/**
 * assets/css/tokens.css
 * BGAUTOS — DESIGN SYSTEM v5
 * Base: dark minimalista, um único acento azul, cor reservada a tags/status.
 * Este arquivo entra ANTES de app.css no <head>. Não contém regras de
 * layout/página — só tokens (variáveis) e os componentes de baixo nível
 * (badge, tag, alert, check, switch, plate) reaproveitados em várias telas.
 */

:root{
  --ac-bg:        #121316;
  --ac-surface:   #1A1B1F;
  --ac-surface-2: #232429;
  --ac-line:      rgba(255,255,255,.07);
  --ac-line-2:    rgba(255,255,255,.14);

  --ac-ink:       #ECEDEF;
  --ac-ink-dim:   #9C9EA7;
  --ac-ink-mute:  #6A6C75;

  --ac-accent:    #111EC5;   /* AZUL DA MARCA bgautos (logo/favicon) — preenchimentos e botões, com texto branco */
  --ac-accent-2:  #7B86FF;   /* versão clara do azul da marca: texto, ícone e destaque sobre fundo escuro */

  /* Semânticas — só em tag/badge/status/alert, nunca em botão comum */
  --ac-green:  #4CC38A;
  --ac-orange: #F2A24B;
  --ac-red:    #EF6B6B;
  --ac-purple: #A78BFA;
  --ac-cyan:   #4FB6E8;

  --ac-font-display: 'Montserrat', system-ui, sans-serif;
  --ac-font-body:    'Public Sans', system-ui, sans-serif;
  --ac-font-mono:    var(--ac-font-body);   /* sem fonte monoespaçada na interface; números usam tabular-nums */
  --ac-font-plate:   'JetBrains Mono', ui-monospace, monospace;   /* só a placa */

  /* Sobrepondo variáveis nativas do Bootstrap 5.3 */
  --bs-body-bg: var(--ac-bg);
  --bs-body-color: var(--ac-ink);
  --bs-border-color: var(--ac-line);
  --bs-primary: var(--ac-accent);
  --bs-primary-rgb: 17,30,197;
  --bs-secondary-bg: var(--ac-surface-2);
  --bs-tertiary-bg: var(--ac-surface);
  --bs-body-font-family: var(--ac-font-body);
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 9px;
  --bs-border-radius-lg: 14px;

  --bs-card-bg: var(--ac-surface);
  --bs-card-border-color: var(--ac-line);
  --bs-modal-bg: var(--ac-surface);
  --bs-modal-border-color: var(--ac-line);
  --bs-dropdown-bg: var(--ac-surface-2);
  --bs-dropdown-border-color: var(--ac-line);
  --bs-dropdown-link-hover-bg: var(--ac-surface);
  --bs-table-border-color: var(--ac-line);

  /*
    Variáveis que faltaram na primeira versão — causa raiz confirmada do
    "texto preto em fundo preto". O Bootstrap usa cores SEPARADAS de
    --bs-body-color para texto secundário/muted/ênfase, e eu só tinha
    sobrescrito a principal.
  */
  --bs-secondary-color: var(--ac-ink-dim);           /* .text-muted, subtítulo de card, texto de ajuda */
  --bs-secondary-color-rgb: 154,156,168;
  --bs-tertiary-color: var(--ac-ink-mute);           /* texto terciário/desabilitado */
  --bs-emphasis-color: var(--ac-ink);                 /* .text-body-emphasis — era #000 fixo */
  --bs-link-color: var(--ac-accent-2);
  --bs-link-hover-color: var(--ac-accent);
  --bs-link-color-rgb: 123,134,255;
  --bs-border-color-translucent: rgba(255,255,255,.12);
  --bs-code-color: var(--ac-accent-2);
}

body{ font-family: var(--ac-font-body); }
.ac-mono{ font-family: var(--ac-font-mono); font-variant-numeric: tabular-nums; }
h1,h2,h3,h4,h5,.ac-display{ font-family: var(--ac-font-display); letter-spacing:0; font-weight:600; }
.ac-eyebrow{ font-family: var(--ac-font-display); font-size:.78rem; letter-spacing:.02em; color: var(--ac-accent-2); font-weight:600; }
::selection{ background: rgba(123,134,255,.35); }

/* ---------- Inputs ---------- */
.form-control, .form-select{
  background: var(--ac-surface); border:1px solid var(--ac-line); color: var(--ac-ink);
  border-radius: 10px; padding:.6rem .85rem; font-size:.92rem;
}
.form-control::placeholder{ color: var(--ac-ink-mute); }
.form-control:focus, .form-select:focus{
  background: var(--ac-surface); color:var(--ac-ink); border-color: var(--ac-accent-2);
  box-shadow: 0 0 0 3px rgba(123,134,255,.25);
}

/* ---------- Badges de status (fundo suave, texto vivo) ---------- */
.badge-soft{ font-weight:600; font-size:.68rem; letter-spacing:.03em; padding:.38em .65em; border-radius:6px; }
.badge-soft.green{  background: rgba(76,195,138,.14);  color: var(--ac-green);  }
.badge-soft.orange{ background: rgba(242,162,75,.14);  color: var(--ac-orange); }
.badge-soft.red{    background: rgba(239,107,107,.14); color: var(--ac-red);    }
.badge-soft.purple{ background: rgba(167,139,250,.14); color: var(--ac-purple); }
.badge-soft.cyan{   background: rgba(79,182,232,.14);  color: var(--ac-cyan);   }
.badge-soft.blue{   background: rgba(123,134,255,.16);   color: var(--ac-accent-2); }

/*
  ---------- Alertas — versão SUAVIZADA ----------
  Feedback do usuário: alerta padrão do Bootstrap (fundo sólido saturado)
  "grita" demais. Reaproveita o mesmo padrão visual do badge-soft:
  fundo com opacidade baixa, texto na cor viva, borda sutil.
*/
.alert{ border-radius: 12px; border-width: 1px; font-size:.9rem; }
.alert-success{ background: rgba(76,195,138,.10); color: var(--ac-green); border-color: rgba(76,195,138,.25); }
.alert-warning{ background: rgba(242,162,75,.10); color: var(--ac-orange); border-color: rgba(242,162,75,.25); }
.alert-danger{  background: rgba(239,107,107,.10); color: var(--ac-red); border-color: rgba(239,107,107,.25); }
.alert-info{    background: rgba(79,182,232,.10); color: var(--ac-cyan); border-color: rgba(79,182,232,.25); }
.alert i{ opacity:.9; }

/* ---------- Tags (chip com "x") ---------- */
.ac-tag{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:500; padding:5px 10px 5px 12px; border-radius:999px; }
.ac-tag.green{ background: rgba(76,195,138,.14); color: var(--ac-green); }
.ac-tag.orange{ background: rgba(242,162,75,.14); color: var(--ac-orange); }
.ac-tag.red{ background: rgba(239,107,107,.14); color: var(--ac-red); }
.ac-tag.purple{ background: rgba(167,139,250,.14); color: var(--ac-purple); }
.ac-tag.cyan{ background: rgba(79,182,232,.14); color: var(--ac-cyan); }
.ac-tag i{ cursor:pointer; opacity:.75; }
.ac-tag i:hover{ opacity:1; }

/* ---------- Checkbox / Toggle customizados ---------- */
.ac-check{ width:20px; height:20px; border-radius:6px; border:1.5px solid var(--ac-line-2); background: var(--ac-surface); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:.7rem; }
.ac-check.checked, .ac-check.indet{ background: var(--ac-accent); border-color: var(--ac-accent); }

.ac-switch{ width:42px; height:24px; border-radius:999px; background: var(--ac-surface-2); border:1px solid var(--ac-line-2); position:relative; display:inline-block; cursor:pointer; }
.ac-switch .knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background: var(--ac-ink-mute); transition:.15s; }
.ac-switch.on{ background: var(--ac-accent); border-color: var(--ac-accent); }
.ac-switch.on .knob{ left:20px; background:#fff; }

/* ---------- Segmented control ---------- */
.ac-segmented{ display:inline-flex; background: var(--ac-surface); border:1px solid var(--ac-line); border-radius:10px; padding:3px; gap:2px; }
.ac-segmented .seg{ padding:7px 16px; border-radius:7px; font-size:.85rem; color: var(--ac-ink-dim); cursor:pointer; font-weight:500; }
.ac-segmented .seg.active{ background: var(--ac-surface-2); color: var(--ac-ink); box-shadow: inset 0 0 0 1px var(--ac-line-2); }

/* ---------- Plate chip (elemento-assinatura: identificador de veículo) ---------- */
.ac-plate{ display:inline-flex; border-radius:7px; overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.4); }
.ac-plate-flag{ width:18px; background: var(--ac-accent); color:#fff; font-size:.5rem; writing-mode:vertical-rl; display:flex; align-items:center; justify-content:center; font-family:var(--ac-font-plate); font-weight:700; letter-spacing:.08em; }
.ac-plate-face{ background:#EDEDED; color:#14181C; font-family:var(--ac-font-plate); font-weight:700; padding:5px 10px; font-size:.9rem; letter-spacing:.05em; }
.ac-plate.sm .ac-plate-face{ font-size:.7rem; padding:3px 8px; }
.ac-plate.sm .ac-plate-flag{ width:12px; font-size:.4rem; }

/* ---------- Avatar ---------- */
.ac-avatar{ width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; font-family:var(--ac-font-display); color:#fff; }

/* ---------- Card / tabela / botão / nav — ajustes finos por cima do Bootstrap ---------- */
.card{ background: var(--ac-surface); box-shadow:none; }
.table > :not(caption) > * > *{ color: var(--ac-ink-dim); border-color: var(--ac-line) !important; background:transparent; }
.table thead th{ color: var(--ac-ink-mute); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.table td:first-child{ color: var(--ac-ink); }
.btn{ font-weight:600; border-radius:9px; }
.btn-primary{ background: var(--ac-accent); border-color: var(--ac-accent); }
.btn-primary:hover{ background:#2433E0; border-color:#2433E0; }
.btn-outline-light{ border-color: var(--ac-line-2); color: var(--ac-ink); }
.btn-outline-light:hover{ background: var(--ac-surface-2); color:#fff; }
.dropdown-item:hover{ color:#fff; }
.nav-tabs{ border-bottom-color: var(--ac-line); }
.nav-tabs .nav-link{ color: var(--ac-ink-dim); border:none; }
.nav-tabs .nav-link.active{ background:transparent; color: var(--ac-ink); border-bottom:2px solid var(--ac-accent); }

/* ============================================================
   SHELL — Sidebar lateral fixa + topbar
   Substitui a navbar horizontal antiga. Aplica-se globalmente via
   painel/_nav.php (mesmo ponto de include de todas as páginas) —
   nenhuma página precisou ser editada individualmente.
   ============================================================ */

body{ padding-left: 232px; padding-top: 56px; }
@media (max-width: 991.98px){ body{ padding-left: 0; } }

.ac-sidebar{
  position: fixed; top:0; left:0; bottom:0; width:232px; z-index:1030;
  background: var(--ac-surface); border-right:1px solid var(--ac-line);
  padding:16px 12px; display:flex; flex-direction:column; overflow-y:auto;
}
@media (max-width: 991.98px){
  .ac-sidebar{ transform: translateX(-100%); transition: transform .2s ease; }
  .ac-sidebar.show{ transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.5); }
}

.ac-wordmark{ display:flex; align-items:center; gap:8px; font-family:var(--ac-font-display); font-weight:700; font-size:1.02rem; padding:6px 8px 18px; }
.ac-wordmark .accent{ color: var(--ac-accent-2); }

.ac-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.ac-nav a{
  color: var(--ac-ink-dim); font-size:.86rem; font-weight:500; text-decoration:none;
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  border-left:2px solid transparent;
}
.ac-nav a i{ width:18px; text-align:center; }
.ac-nav a:hover{ background: var(--ac-surface-2); color: var(--ac-ink); }
.ac-nav a.active{ background: var(--ac-surface-2); color: var(--ac-ink); border-left-color: var(--ac-accent-2); }
.ac-nav .grp{ font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600; color:var(--ac-ink-mute); padding:14px 10px 4px; }

.ac-sidebar-footer{ border-top:1px solid var(--ac-line); padding-top:12px; margin-top:8px; }
.ac-avatar-chip{ display:flex; align-items:center; gap:8px; }
.ac-avatar-chip .ac-avatar{ background: var(--ac-accent); flex:none; }
.ac-avatar-name{ font-size:.82rem; font-weight:600; color:var(--ac-ink); }
.ac-avatar-role{ font-size:.68rem; color:var(--ac-ink-mute); font-family:var(--ac-font-mono); }

.ac-sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1025;
}
.ac-sidebar-backdrop.show{ display:block; }
@media (min-width: 992px){ .ac-sidebar-backdrop{ display:none !important; } }

.ac-topbar{
  position:fixed; top:0; left:232px; right:0; height:56px; z-index:1020;
  background: var(--ac-surface); border-bottom:1px solid var(--ac-line);
  display:flex; align-items:center; gap:12px; padding:0 20px;
}
@media (max-width: 991.98px){ .ac-topbar{ left:0; } }
.ac-topbar-title{ font-family:var(--ac-font-display); font-weight:600; font-size:1rem; }
.ac-topbar-user{ font-size:.8rem; color:var(--ac-ink-dim); }
.ac-burger{ background:transparent; border:none; color:var(--ac-ink); font-size:1.3rem; padding:4px 6px; }

/* Item de menu "em breve" (modo foco no financeiro) — não clicável */
.ac-nav .ac-nav-soon{
  color: var(--ac-ink-mute); font-size:.86rem; font-weight:500; cursor:not-allowed; user-select:none;
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; border-left:2px solid transparent;
}
.ac-nav .ac-nav-soon i{ width:18px; text-align:center; opacity:.6; }
.ac-nav .ac-nav-soon em{
  margin-left:auto; font-style:normal; font-family:var(--ac-font-mono); font-size:.58rem; letter-spacing:.08em;
  text-transform:uppercase; padding:2px 6px; border-radius:20px; background:var(--ac-surface-2); color:var(--ac-ink-dim);
}

/* ---------- Menu em grupos (pai/filhos recolhíveis) ---------- */
.ac-nav .ac-nav-group{ margin-bottom:2px; }
.ac-nav .ac-nav-parent{
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; border:0; border-left:2px solid transparent;
  background:transparent; color: var(--ac-ink); font-size:.86rem; font-weight:600; text-align:left; cursor:pointer;
}
.ac-nav .ac-nav-parent:hover{ background: var(--ac-surface-2); }
.ac-nav .ac-nav-parent > i:first-child{ width:18px; text-align:center; color: var(--ac-accent-2); }
.ac-nav .ac-nav-parent span{ flex:1; }
.ac-nav .ac-nav-parent .ac-chev{ width:auto; font-size:.8rem; color: var(--ac-ink-mute); transition: transform .18s ease; }
.ac-nav .ac-nav-parent.collapsed .ac-chev{ transform: rotate(-90deg); }
.ac-nav .ac-nav-group.has-active > .ac-nav-parent{ color:#fff; }
.ac-nav .ac-nav-children{ display:flex; flex-direction:column; gap:1px; margin:2px 0 6px 18px; padding-left:8px; border-left:1px solid var(--ac-line); }
.ac-nav .ac-nav-children a, .ac-nav .ac-nav-children .ac-nav-soon{ padding:7px 10px; font-size:.83rem; }
a.ac-wordmark{ color: var(--ac-ink); text-decoration:none; }

/* ---------- SweetAlert2 no tema escuro (vale para todos os modais do sistema) ---------- */
.swal2-popup{
  background: var(--ac-surface); color: var(--ac-ink); border:1px solid var(--ac-line);
  border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.5); font-family: var(--ac-font-body);
}
.swal2-title{ color: var(--ac-ink); font-family: var(--ac-font-display); font-weight:600; font-size:1.35rem; }
.swal2-html-container{ color: var(--ac-ink-dim); }
.swal2-html-container .text-muted{ color: var(--ac-ink-dim) !important; }
.swal2-input, .swal2-textarea, .swal2-select, .swal2-file{
  background: var(--ac-bg); color: var(--ac-ink); border:1px solid var(--ac-line-2);
}
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus, .swal2-file:focus{
  border-color: var(--ac-accent); box-shadow:0 0 0 3px rgba(123,134,255,.25);
}
.swal2-styled.swal2-confirm{ background: var(--ac-accent); border-radius:11px; font-weight:600; }
.swal2-styled.swal2-confirm:focus{ box-shadow:0 0 0 3px rgba(123,134,255,.35); }
.swal2-styled.swal2-cancel{ background: var(--ac-surface-2); color: var(--ac-ink); border-radius:11px; font-weight:600; }
.swal2-styled.swal2-deny{ border-radius:11px; font-weight:600; }
.swal2-validation-message{ background: rgba(239,107,107,.10); color: var(--ac-red); border-radius:10px; }
.swal2-timer-progress-bar{ background: var(--ac-accent-2); }
.swal2-close{ color: var(--ac-ink-dim); }
.swal2-footer{ border-top-color: var(--ac-line); color: var(--ac-ink-dim); }
.swal2-popup .swal2-icon.swal2-success [class^=swal2-success-line]{ background-color: var(--ac-green); }
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring{ border-color: rgba(76,195,138,.3); }
.swal2-popup .swal2-icon.swal2-success{ color: var(--ac-green); border-color: rgba(76,195,138,.35); }
.swal2-popup .swal2-icon.swal2-success [class^=swal2-success-circular-line]{ background: var(--ac-surface); }
.swal2-popup .swal2-icon.swal2-success .swal2-success-fix{ background: var(--ac-surface); }

/* rótulo de item de menu: reticências em vez de quebrar linha; selo "em breve" sempre numa linha só */
.ac-nav a .t, .ac-nav .ac-nav-soon .t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-nav .ac-nav-soon em{ flex:none; white-space:nowrap; font-size:.52rem; padding:2px 5px; }

/* ============================================================
   SIDEBAR — cabeçalho com logo + alternância aberta/fechada (desktop)
   Fechada = trilho de 72px só com ícones; grupos abrem num flyout ao passar o mouse.
   Estado: classe `sb-closed` no <html> (ver _partials/head.php e painel/_nav.php).
   ============================================================ */
.ac-sidebar{ transition: width .2s ease; }
.ac-sb-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px 20px; }
.ac-brand{ display:flex; align-items:center; min-width:0; }
.ac-logo-open{ height:34px; width:auto; display:block; }
.ac-logo-closed{ display:none; height:34px; width:auto; }
.ac-sb-toggle{
  flex:none; width:30px; height:30px; align-items:center; justify-content:center; border-radius:9px;
  background:transparent; border:1px solid var(--ac-line); color: var(--ac-ink-dim); cursor:pointer; font-size:1.05rem;
}
.ac-sb-toggle:hover{ background: var(--ac-surface-2); color: var(--ac-ink); }
body{ transition: padding-left .2s ease; }
.ac-topbar{ transition: left .2s ease; }

@media (min-width: 992px){
  html.sb-closed body{ padding-left:72px; }
  html.sb-closed .ac-topbar{ left:72px; }
  html.sb-closed .ac-sidebar{ width:72px; padding:16px 10px; overflow:visible; }

  html.sb-closed .ac-sb-head{ flex-direction:column; gap:12px; padding:2px 0 18px; }
  html.sb-closed .ac-logo-open{ display:none; }
  html.sb-closed .ac-logo-closed{ display:block; }

  html.sb-closed .ac-nav-parent{ justify-content:center; padding:11px 0; }
  html.sb-closed .ac-nav-parent span,
  html.sb-closed .ac-nav-parent .ac-chev{ display:none; }
  html.sb-closed .ac-nav-group.has-active > .ac-nav-parent{ background: var(--ac-surface-2); }

  /* flyout dos grupos */
  html.sb-closed .ac-nav-group{ position:relative; }
  html.sb-closed .ac-nav-group > .collapse{ display:none !important; }
  html.sb-closed .ac-nav-group:hover > .collapse,
  html.sb-closed .ac-nav-group:focus-within > .collapse{
    display:block !important; position:absolute; left:100%; top:0; padding-left:10px; z-index:1040;
  }
  html.sb-closed .ac-nav-group .ac-nav-children{
    margin:0; padding:8px; min-width:210px; background: var(--ac-surface-2);
    border:1px solid var(--ac-line-2); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.45);
  }

  html.sb-closed .ac-sidebar-footer{ display:flex; justify-content:center; }
  html.sb-closed .ac-avatar-chip > div:not(.ac-avatar){ display:none; }
}