/* Hub Motometria — camada fina sobre tokens.css + components.css do Design System.
   Só o que o Hub precisa e o sistema não tem: grelha de ferramentas, níveis, estado, tabelas. */

[data-product="hub"] { --product-accent: var(--color-primary-500); }

.hub-main { padding: var(--sp-6) var(--sp-4) var(--sp-8); min-height: calc(100vh - var(--nav-h) - 64px); }
.hub-brand-tag { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-primary-600); background: var(--color-primary-50); border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-full); padding: 2px 8px; margin-left: 10px; vertical-align: middle; }
.nav-brand { display: flex; align-items: center; }
.nav-links a.is-active { color: var(--color-primary-600); font-weight: var(--fw-semibold); }
.hub-inline { display: inline; margin: 0; }

.hub-user { display: flex; align-items: center; gap: 10px; }
.hub-user-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.15; }
.hub-user-name small { display: block; font-weight: var(--fw-regular); color: var(--text-muted); font-size: 11.5px; }
.hub-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-600); color: #fff; font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: .02em; flex: none; }
.hub-avatar-sm { width: 26px; height: 26px; font-size: 10.5px; vertical-align: middle; margin-right: 6px; }

/* Hero */
.hub-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.hub-hero h1 { font-size: var(--fs-xl); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); margin: 4px 0 6px; line-height: var(--lh-tight); }
.hub-hero p { margin: 0; max-width: 60ch; }
.hub-hero-side { display: flex; gap: var(--sp-3); }
.hub-kpi { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 16px; min-width: 96px; }
.hub-kpi b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: 1; color: var(--color-success); }
.hub-kpi.is-bad b { color: var(--color-danger); }
.hub-kpi span { font-size: var(--fs-xs); color: var(--text-muted); }

/* Grupos e grelha */
.hub-group { margin-bottom: var(--sp-6); }
.hub-group-title { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-3); padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.hub-group-title small { font-weight: var(--fw-medium); margin-left: 6px; color: var(--color-neutral-400); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }

.hub-tool { display: flex; flex-direction: column; gap: 10px; padding: var(--sp-4); border-top: 3px solid var(--tool-accent); transition: transform var(--trans-fast), box-shadow var(--trans-fast), border-color var(--trans-fast); }
.hub-tool:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.hub-tool.is-locked { opacity: .55; cursor: not-allowed; }
.hub-tool.is-locked:hover { transform: none; box-shadow: var(--shadow-sm); }
.hub-tool p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-normal); flex: 1; }
.hub-tool-head { display: flex; align-items: center; gap: 12px; }
.hub-tool-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--tool-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: 13px; letter-spacing: .02em; flex: none; }
.hub-tool-icon-sm { width: 24px; height: 24px; font-size: 9.5px; border-radius: 6px; vertical-align: middle; margin-right: 6px; }
.hub-tool-title { flex: 1; min-width: 0; line-height: 1.2; }
.hub-tool-title strong { display: block; font-size: var(--fs-base); }
.hub-tool-title small { color: var(--text-muted); font-size: 11.5px; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.hub-tool-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--border-subtle); }
.hub-tool-go { margin-left: auto; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-primary-600); }

/* Níveis e estado */
.hub-level { font-size: 11px; font-weight: var(--fw-semibold); padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap; }
.hub-level-admin  { background: var(--color-primary-50); color: var(--color-primary-700); border-color: var(--color-primary-200); }
.hub-level-operar { background: var(--color-success-bg); color: var(--color-accent-800); }
.hub-level-ler    { background: var(--color-warning-bg); color: #92400e; }
.hub-level-none   { background: var(--bg-muted); color: var(--text-muted); }
.badge-soon { background: var(--color-warning-bg); color: #92400e; font-size: 10.5px; }

.hub-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.hub-dot-up { background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-bg); }
.hub-dot-down { background: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-bg); }
.hub-dot-unknown { background: var(--color-neutral-300); }

/* Páginas internas */
.hub-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.hub-page-head h1 { font-size: var(--fs-xl); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); margin: 4px 0 6px; }
.hub-page-head p { margin: 0; max-width: 64ch; }
.hub-two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-4); align-items: start; }
.hub-two-wide { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 860px) { .hub-two, .hub-two-wide { grid-template-columns: 1fr; } }
.hub-form { padding: var(--sp-5); }
.hub-form h3 { margin: 0 0 var(--sp-4); font-size: var(--fs-md); }
.hub-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.hub-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-4); }
.form-input-sm { padding: 6px 8px; font-size: var(--fs-sm); }

.hub-tablewrap { overflow-x: auto; padding: 0; }
.hub-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hub-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); padding: 12px 14px; border-bottom: 1px solid var(--border-strong); background: var(--bg-elevated); white-space: nowrap; }
.hub-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.hub-table tr:last-child td { border-bottom: 0; }
.hub-table a { color: var(--color-primary-600); font-weight: var(--fw-semibold); }
.hub-mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); }
.hub-matrix select { min-width: 130px; }
.hub-level-select[data-level="admin"]  { border-color: var(--color-primary-300); }
.hub-level-select[data-level="operar"] { border-color: var(--color-accent-300); }
.hub-level-select[data-level="ler"]    { border-color: #fcd34d; }

.hub-alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.hub-alert-ok { background: var(--color-success-bg); color: var(--color-accent-800); }
.hub-alert-err { background: var(--color-danger-bg); color: #991b1b; }
.hub-alert code { word-break: break-all; }

/* Login / convite */
.hub-bare { background: linear-gradient(160deg, var(--color-primary-700), var(--color-primary-900)); min-height: 100vh; }
.hub-bare-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.hub-login-card { width: 100%; max-width: 400px; padding: var(--sp-6); }
.hub-login-card h1 { font-size: var(--fs-lg); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); margin: var(--sp-4) 0 4px; }
.hub-login-card > p { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }
.hub-login-card .form { margin-top: var(--sp-4); }
.hub-login-foot { font-size: var(--fs-xs); margin: var(--sp-4) 0 0; }

.hub-foot { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }

/* .eyebrow no design system só existe dentro de .section-head — o Hub define o seu. */
[data-product="hub"] .eyebrow { display: inline-block; padding: var(--sp-1) var(--sp-3); background: var(--color-primary-50); color: var(--color-primary-700); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: var(--sp-2); }
[data-product="hub"] .eyebrow a { color: inherit; }

/* tokens.css força img{height:auto} — fixar o logo em px nos dois sítios onde aparece. */
.nav-brand img { height: 26px; width: auto; }
.hub-login-card > img { height: 30px; width: auto; }

/* Campo de password com botão "Mostrar/Ocultar" (regra da casa) */
.hub-pw { position: relative; display: flex; align-items: stretch; }
.hub-pw .form-input { padding-right: 88px; }
.hub-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--color-primary-600); background: var(--color-primary-50); border: 1px solid var(--color-primary-200); border-radius: var(--radius-sm);
  padding: 5px 10px; cursor: pointer; line-height: 1; }
.hub-pw-toggle:hover { background: var(--color-primary-100); }
.hub-pw-toggle:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.hub-login-links { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); margin-top: var(--sp-3); }
.hub-login-links a { color: var(--color-primary-600); font-weight: var(--fw-semibold); }

/* Utilizador na barra é link para /conta */
a.hub-user { border-radius: var(--radius-full); padding: 3px 8px 3px 3px; transition: background var(--trans-fast); }
.hub-user:hover { background: var(--bg-muted); }
.nav-links a.is-active { color: var(--color-primary-600); }

/* Pagamentos */
.hub-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.hub-kpi.is-warn b { color: var(--color-warning); }
.hub-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hub-filters .form-input { width: auto; }
.hub-inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 2px 0; }
.hub-actions-cell { white-space: nowrap; text-align: right; }
.hub-pay td small { color: var(--text-muted); font-size: 11.5px; }
.hub-pay code { font-size: 12px; }

/* Faixa "Hoje" — 2026-09-10, ecrã de entrada do dia (José + Carla) */
.hoje-bar { background: var(--color-primary-50); border-bottom: 1px solid var(--border-subtle); padding: 10px 0; }
.hoje-inner { display: flex; gap: var(--sp-3); overflow-x: auto; scrollbar-width: none; }
.hoje-inner::-webkit-scrollbar { display: none; }
.hoje-tile { flex: 1 1 0; min-width: 180px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: var(--bg-elev); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: inherit; text-decoration: none; transition: background var(--trans-fast), transform var(--trans-fast); }
.hoje-tile:hover { background: var(--bg-muted); transform: translateY(-1px); }
.hoje-tile.is-down { opacity: .72; }
.hoje-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); font-weight: var(--fw-semibold); }
.hoje-value { font-size: var(--fs-lg); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); }
.hoje-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.hoje-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--color-danger, #dc2626); display: inline-block; }
@media (max-width: 720px) {
  .hoje-inner { flex-direction: column; }
  .hoje-tile { min-width: 0; }
}

/* Contador de "por tratar" no ícone da ferramenta (faixa Hoje → tile) */
.hub-tool-icon { position: relative; }
.hub-tool-alert { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-danger, #dc2626); color: #fff; font-size: 11px; font-weight: var(--fw-bold); border-radius: 999px; border: 2px solid var(--bg-elev); line-height: 1; }
.hub-tool.has-alert { border-color: var(--color-danger-bg, #fecaca); }