/* =====================================================================
   assets/ui/premium.css — LINGUAGEM VISUAL "PREMIUM" DO ÁGILFILA (2026-09-28, fase 1)
   ---------------------------------------------------------------------
   Um padrão só para todas as telas do Admin. Carregado por assets/admin.css (@import) e
   pelo admin/sidebar.php (para as telas que não usam admin.css).
   Regras: base neutra (branco / cinzas / "tinta" quase preta), UMA cor de destaque usada com
   parcimônia, linhas finas, sombras quase invisíveis, cor só quando significa algo (verde =
   tudo certo, âmbar = atenção, vermelho = erro/apagar). Fonte: Inter (local).
   Os seletores começam com "html body" para vencer os <style> antigos de cada tela sem
   precisar mexer nelas; !important só onde a tela usa style="" direto no HTML.
   ===================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ui-bg: #fafafa; --ui-panel: #ffffff; --ui-panel-2: #fcfcfc; --ui-hover: #f4f4f5; --ui-sel: #f1f1f2;
  --ui-line: #ebebeb; --ui-line-2: #e4e4e7;
  --ui-t1: #09090b; --ui-t2: #52525b; --ui-t3: #a1a1aa;
  --ui-ink: #18181b; --ui-ink-2: #27272a;
  --ui-acc: #4f46e5; --ui-acc-s: #eef2ff;
  --ui-ok: #15803d; --ui-ok-s: #f0fdf4; --ui-ok-l: #bbf7d0;
  --ui-warn: #b45309; --ui-warn-s: #fffbeb; --ui-warn-l: #fde68a;
  --ui-bad: #b91c1c; --ui-bad-s: #fef2f2; --ui-bad-l: #fecaca;
  --ui-info: #1d4ed8; --ui-info-s: #eff6ff; --ui-info-l: #bfdbfe;
  --ui-r: 12px; --ui-r-sm: 8px;
  --ui-sh: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
  --ui-sh-lg: 0 12px 40px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.04);
  --ui-sb: 248px; --ui-sb-min: 64px; --ui-top: 56px;
  --ui-ease: cubic-bezier(.2,.8,.2,1);
  /* Bootstrap 5.1 usa estas variáveis em vários lugares */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-primary: #18181b; --bs-primary-rgb: 24,24,27;
}

/* ---------- Base ---------- */
html body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--ui-bg) !important; color: var(--ui-t1);
  font-size: 14px; letter-spacing: -.006em; line-height: 1.5;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { color: var(--ui-t1); letter-spacing: -.02em; }
html body #mainContent > h2:first-child, html body #mainContent > h3:first-child,
html body #mainContent h2.mb-1, html body #mainContent h2.mb-4, html body #mainContent h2.mb-0, html body #mainContent h3.fw-bold {
  font-size: 22px !important; font-weight: 650 !important; letter-spacing: -.022em;
}
html body #mainContent h2 > i:first-child, html body #mainContent h3 > i:first-child { color: var(--ui-t3) !important; font-size: .85em; margin-right: 4px; }
html body .text-muted { color: var(--ui-t2) !important; }
html body a { color: var(--ui-t1); text-underline-offset: 3px; }
html body code { color: var(--ui-t1); background: var(--ui-hover); border-radius: 5px; padding: 1px 5px; font-size: .86em; }
html body ::selection { background: #e0e7ff; }
html body :focus-visible { outline: 2px solid var(--ui-acc); outline-offset: 2px; }

/* ---------- Casca: menu lateral fixo em altura total + barra de cima ---------- */
html body .app-wrapper { display: block !important; min-height: calc(100vh - var(--ui-top)); }
html body #sidebar {
  position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 1040;
  width: var(--ui-sb) !important; background: var(--ui-panel-2) !important;
  border-right: 1px solid var(--ui-line); overflow-y: auto; overflow-x: hidden;
  transition: width .2s var(--ui-ease) !important; scrollbar-width: thin;
}
html body #sidebar.collapsed { width: var(--ui-sb-min) !important; }
html body #mainContent { margin-left: var(--ui-sb); padding: 28px 32px 40px !important; transition: margin .2s var(--ui-ease); min-width: 0; }
html body nav.navbar { margin-left: var(--ui-sb); transition: margin .2s var(--ui-ease); }
html body .footer-admin { margin-left: var(--ui-sb); }
html.ui-sb-min body #mainContent, html.ui-sb-min body nav.navbar, html.ui-sb-min body .footer-admin { margin-left: var(--ui-sb-min); }

/* Barra de cima (as telas trazem style="" com degradê — vencido com !important) */
html body nav.navbar {
  background: rgba(250,250,250,.86) !important; box-shadow: none !important;
  border-bottom: 1px solid var(--ui-line); height: var(--ui-top); padding: 0 24px !important;
  position: sticky; top: 0; z-index: 1030; backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
}
html body nav.navbar .container-fluid { padding: 0; gap: 12px; flex-wrap: nowrap; }
html body nav.navbar .navbar-brand { color: var(--ui-t1) !important; font-size: 14px !important; font-weight: 500 !important; display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
html body nav.navbar .navbar-brand > i { display: none; }
html body .ui-crumb { display: flex; align-items: center; gap: 8px; color: var(--ui-t3); white-space: nowrap; overflow: hidden; }
html body .ui-crumb b { color: var(--ui-t1); font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
html body nav.navbar .dropdown > .btn, html body nav.navbar .btn-light {
  background: var(--ui-panel) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line-2) !important;
  border-radius: 999px !important; height: 34px; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--ui-sh); font-weight: 500;
}
html body nav.navbar .badge-super { background: var(--ui-hover) !important; color: var(--ui-t2) !important; font-weight: 600; border: 1px solid var(--ui-line-2); }
html body .ui-busca-btn {
  display: inline-flex; align-items: center; gap: 8px; width: 280px; height: 34px; padding: 0 10px;
  border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-sm); background: var(--ui-panel); color: var(--ui-t3);
  font-size: 13.5px; cursor: pointer; box-shadow: var(--ui-sh); margin-right: 8px;
}
html body .ui-busca-btn:hover { border-color: #d4d4d8; color: var(--ui-t2); }
html body .ui-kbd { margin-left: auto; font-size: 11px; color: var(--ui-t2); border: 1px solid var(--ui-line-2); border-radius: 5px; padding: 0 5px; background: var(--ui-bg); font-family: inherit; }
/* Selo da licença na barra de cima: vira um botão branco com o ícone na cor do estado (premium.js) */
html body nav.navbar .ui-selo-lic { background: var(--ui-panel) !important; border: 1px solid var(--ui-line-2) !important; box-shadow: var(--ui-sh); margin-right: 6px; }
html body nav.navbar .ui-selo-lic i { color: var(--ui-selo, var(--ui-ok)) !important; }
html body .ui-i { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.75; }

/* ---------- Menu lateral ---------- */
html body .sidebar-premium { background: transparent !important; min-height: 100%; display: flex; flex-direction: column; padding: 12px 10px 10px; }
html body .ui-sb-marca { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; font-weight: 650; font-size: 14.5px; color: var(--ui-t1); text-decoration: none; white-space: nowrap; }
html body .ui-sb-marca .ui-mk { width: 28px; height: 28px; border-radius: 8px; background: var(--ui-ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
html body .ui-sb-marca small { color: var(--ui-t3); font-weight: 500; font-size: 12px; margin-left: auto; }
html body .ui-sb-local { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ui-line); border-radius: 9px; padding: 7px 9px; margin: 0 0 10px; background: var(--ui-panel); color: var(--ui-t2); font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; }
html body .ui-sb-local b { color: var(--ui-t1); font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
html body .sidebar-premium .nav-link {
  color: var(--ui-t2) !important; padding: 7px 9px !important; margin: 1px 0 !important; border-radius: 8px !important;
  font-weight: 500; font-size: 13.5px; display: flex; align-items: center; gap: 10px; transition: background .12s, color .12s !important;
  transform: none !important; box-shadow: none !important; white-space: nowrap; line-height: 1.35;
}
html body .sidebar-premium .nav-link:hover { background: var(--ui-hover) !important; color: var(--ui-t1) !important; }
html body .sidebar-premium .nav-link.active { background: var(--ui-sel) !important; color: var(--ui-t1) !important; font-weight: 550; }
html body .sidebar-premium .nav-link .ui-i { color: var(--ui-t3); }
html body .sidebar-premium .nav-link.active .ui-i, html body .sidebar-premium .nav-link:hover .ui-i { color: var(--ui-t1); }
html body .sidebar-premium .nav-link small { color: var(--ui-t3) !important; opacity: 1 !important; font-size: 11.5px; }
html body .sidebar-premium .nav-header {
  color: var(--ui-t3) !important; font-size: 11.5px !important; font-weight: 550; letter-spacing: 0 !important; text-transform: none !important;
  padding: 14px 9px 4px !important;
}
html body .sidebar-premium .nav-header span { text-transform: lowercase; }
html body .sidebar-premium .nav-header span::first-letter { text-transform: uppercase; }
html body .sidebar-premium .seta-secao { font-size: .55rem; opacity: .7; margin-right: 2px; }
html body .sidebar-toggle {
  position: static !important; width: 28px !important; height: 28px !important; border-radius: 7px !important; background: transparent !important;
  color: var(--ui-t3) !important; border: 0 !important; margin-left: auto; box-shadow: none !important;
}
html body .sidebar-toggle:hover { background: var(--ui-hover) !important; color: var(--ui-t1) !important; transform: none !important; }
html body .ui-sb-pe { margin-top: auto; border-top: 1px solid var(--ui-line); padding: 12px 6px 4px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ui-t1); }
html body .ui-sb-pe .ui-pe-nome { font-weight: 550; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .ui-sb-pe .ui-pe-papel { font-size: 12px; color: var(--ui-t3); white-space: nowrap; }
html body .ui-sb-pe .avatar-usuario { border: 0 !important; flex-shrink: 0; }
html body #sidebar.collapsed .ui-sb-marca span, html body #sidebar.collapsed .ui-sb-marca small,
html body #sidebar.collapsed .ui-sb-local, html body #sidebar.collapsed .ui-sb-pe > div { display: none !important; }
html body #sidebar.collapsed .sidebar-premium .nav-link { justify-content: center; padding: 9px !important; }
html body #sidebar.collapsed .sidebar-premium .nav-link .ui-i { width: 18px; height: 18px; }
html body #sidebar.collapsed .sidebar-toggle { margin: 0 auto; }
html body #sidebar.collapsed .ui-sb-topo { flex-direction: column; gap: 8px; }

/* ---------- Superfícies (cartões das várias telas) ---------- */
html body .card, html body .config-card, html body .card-cfg, html body .chart-container, html body .stat-card,
html body .metric-card, html body .termo-card, html body .filter-card, html body .table-card, html body .form-card,
html body .info-card, html body .content-card, html body .dashboard-card, html body .section-card {
  background: var(--ui-panel) !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r) !important;
  box-shadow: var(--ui-sh) !important; color: var(--ui-t1) !important;
}
html body .stat-card:hover, html body .metric-card:hover, html body .card:hover { transform: none !important; }
html body .config-card h5, html body .chart-container h5, html body .card-cfg h5, html body .card-header, html body .config-card h4 {
  border-left: 0 !important; padding-left: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: var(--ui-t1) !important;
}
html body .config-card h5 i, html body .chart-container h5 i, html body .card-header i { color: var(--ui-t3) !important; }
html body .card-header { background: transparent !important; border-bottom: 1px solid var(--ui-line) !important; }
/* Números grandes (estatísticas): sem degradês, texto escuro, ícone discreto */
html body .stat-card, html body .metric-card { background: var(--ui-panel) !important; color: var(--ui-t1) !important; }
html body .stat-card .stat-icon, html body .metric-card .metric-icon { font-size: 1rem !important; color: var(--ui-t3) !important; background: none !important; -webkit-text-fill-color: currentColor; margin-bottom: 8px !important; }
html body .stat-card .stat-value, html body .metric-card .metric-value { font-size: 28px !important; font-weight: 600 !important; letter-spacing: -.03em; color: var(--ui-t1) !important; -webkit-text-fill-color: currentColor; background: none !important; }
html body .stat-card .stat-label, html body .metric-card .metric-title { color: var(--ui-t2) !important; font-size: 12.5px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }

/* ---------- Botões ---------- */
html body .btn { border-radius: var(--ui-r-sm) !important; font-weight: 550; font-size: 13.5px; letter-spacing: -.005em; box-shadow: var(--ui-sh); transition: background .12s, border-color .12s, color .12s, box-shadow .12s; }
html body .btn:not(.btn-sm):not(.btn-lg) { min-height: 34px; }
html body .btn-primary, html body .btn-dark, html body .btn-success.ui-principal {
  background: var(--ui-ink) !important; border-color: var(--ui-ink) !important; color: #fff !important;
}
html body .btn-primary:hover, html body .btn-dark:hover { background: var(--ui-ink-2) !important; border-color: var(--ui-ink-2) !important; }
html body .btn-secondary, html body .btn-light, html body .btn-outline-secondary, html body .btn-outline-primary, html body .btn-outline-dark, html body .btn-outline-info {
  background: var(--ui-panel) !important; border: 1px solid var(--ui-line-2) !important; color: var(--ui-t1) !important;
}
html body .btn-secondary:hover, html body .btn-light:hover, html body .btn-outline-secondary:hover, html body .btn-outline-primary:hover, html body .btn-outline-dark:hover, html body .btn-outline-info:hover { background: var(--ui-hover) !important; }
html body .btn-success { background: var(--ui-ok) !important; border-color: var(--ui-ok) !important; color: #fff !important; }
html body .btn-danger { background: var(--ui-bad) !important; border-color: var(--ui-bad) !important; color: #fff !important; }
html body .btn-warning { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }
html body .btn-info { background: var(--ui-panel) !important; border: 1px solid var(--ui-line-2) !important; color: var(--ui-t1) !important; }
html body .btn-outline-danger { background: var(--ui-panel) !important; border: 1px solid var(--ui-line-2) !important; color: var(--ui-bad) !important; }
html body .btn-outline-danger:hover { background: var(--ui-bad-s) !important; border-color: var(--ui-bad-l) !important; }
html body .btn-outline-success { background: var(--ui-panel) !important; border: 1px solid var(--ui-line-2) !important; color: var(--ui-ok) !important; }
html body .btn-outline-warning { background: var(--ui-panel) !important; border: 1px solid var(--ui-line-2) !important; color: var(--ui-warn) !important; }
html body .btn:disabled, html body .btn.disabled { opacity: .45; }
html body .btn-link { box-shadow: none; color: var(--ui-t1); }

/* ---------- Formulários ---------- */
html body .form-label { font-weight: 550; font-size: 13px; color: var(--ui-t1); margin-bottom: 6px; }
html body .form-control, html body .form-select, html body .input-group-text {
  border: 1px solid var(--ui-line-2) !important; border-radius: var(--ui-r-sm) !important; font-size: 14px; color: var(--ui-t1);
  box-shadow: none !important; background-color: var(--ui-panel);
}
html body .input-group-text { background: var(--ui-bg) !important; color: var(--ui-t2); }
html body .form-control:focus, html body .form-select:focus { border-color: var(--ui-ink) !important; box-shadow: 0 0 0 3px rgba(24,24,27,.08) !important; }
html body .form-control::placeholder { color: var(--ui-t3); }
html body .form-text, html body small.text-muted { color: var(--ui-t2) !important; }
html body .form-check-input { border-color: #d4d4d8; box-shadow: none !important; }
html body .form-check-input:checked { background-color: var(--ui-ink) !important; border-color: var(--ui-ink) !important; }
html body .form-check-input:focus { border-color: var(--ui-ink); box-shadow: 0 0 0 3px rgba(24,24,27,.08) !important; }
html body .form-switch .form-check-input { width: 2.2em; height: 1.2em; }
html body input[type="color"].form-control { padding: 3px; height: 38px; }
html body .form-range::-webkit-slider-thumb { background: var(--ui-ink); }
html body .form-range::-moz-range-thumb { background: var(--ui-ink); }

/* ---------- Tabelas ---------- */
html body .table { --bs-table-bg: transparent; --bs-table-striped-bg: #fafafa; --bs-table-hover-bg: #f7f7f8; color: var(--ui-t1); font-size: 13.5px; }
html body .table > thead th, html body .table > thead td, html body table.dataTable thead th {
  font-size: 12px !important; font-weight: 550 !important; color: var(--ui-t2) !important; text-transform: none !important; letter-spacing: 0 !important;
  background: transparent !important; border-bottom: 1px solid var(--ui-line) !important; border-top: 0 !important;
}
html body .table > :not(caption) > * > * { border-bottom-color: #f1f1f2; padding-top: .7rem; padding-bottom: .7rem; }
html body .table-dark, html body .table thead.table-dark th { background: transparent !important; color: var(--ui-t2) !important; }

/* ---------- Avisos, etiquetas, abas, menus ---------- */
html body .alert { border-radius: var(--ui-r) !important; border: 1px solid var(--ui-line) !important; background: var(--ui-panel) !important; color: var(--ui-t1) !important; box-shadow: var(--ui-sh); font-size: 13.5px; }
html body .alert-success { background: var(--ui-ok-s) !important; border-color: var(--ui-ok-l) !important; color: #14532d !important; }
html body .alert-danger { background: var(--ui-bad-s) !important; border-color: var(--ui-bad-l) !important; color: #7f1d1d !important; }
html body .alert-warning { background: var(--ui-warn-s) !important; border-color: var(--ui-warn-l) !important; color: #78350f !important; }
html body .alert-info, html body .alert-primary { background: var(--ui-info-s) !important; border-color: var(--ui-info-l) !important; color: #1e3a8a !important; }
html body .alert-secondary, html body .alert-light { background: var(--ui-panel) !important; color: var(--ui-t2) !important; }
html body .badge { font-weight: 550 !important; border-radius: 999px !important; letter-spacing: 0; }
html body .badge.bg-primary, html body .badge.bg-info, html body .badge.bg-secondary, html body .badge.bg-light, html body .badge.bg-dark {
  background: var(--ui-hover) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line-2);
}
html body .badge.bg-success { background: var(--ui-ok-s) !important; color: var(--ui-ok) !important; border: 1px solid var(--ui-ok-l); }
html body .badge.bg-danger { background: var(--ui-bad-s) !important; color: var(--ui-bad) !important; border: 1px solid var(--ui-bad-l); }
html body .badge.bg-warning { background: var(--ui-warn-s) !important; color: var(--ui-warn) !important; border: 1px solid var(--ui-warn-l); }
html body .nav-tabs { border-bottom: 1px solid var(--ui-line) !important; gap: 4px; }
html body .nav-tabs .nav-link { border: 0 !important; border-bottom: 2px solid transparent !important; color: var(--ui-t2) !important; font-weight: 550; border-radius: 0 !important; padding: 10px 12px; background: transparent !important; }
html body .nav-tabs .nav-link:hover { color: var(--ui-t1) !important; }
html body .nav-tabs .nav-link.active { color: var(--ui-t1) !important; border-bottom-color: var(--ui-ink) !important; }
html body .nav-pills .nav-link.active { background: var(--ui-ink) !important; color: #fff !important; }
html body .dropdown-menu { border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r) !important; box-shadow: var(--ui-sh-lg) !important; padding: 6px; font-size: 13.5px; }
html body .dropdown-item { border-radius: 6px; padding: 7px 10px; }
html body .dropdown-item:hover { background: var(--ui-hover); }
html body .modal-content { border: 1px solid var(--ui-line) !important; border-radius: 14px !important; box-shadow: var(--ui-sh-lg) !important; }
html body .modal-header { border-bottom: 1px solid var(--ui-line) !important; background: var(--ui-panel) !important; color: var(--ui-t1) !important; }
html body .modal-header .modal-title { font-weight: 600; font-size: 16px; }
html body .modal-header .btn-close { filter: none !important; }
html body .modal-footer { border-top: 1px solid var(--ui-line) !important; }
html body .modal-backdrop.show { opacity: .35; }
html body .progress { background: var(--ui-hover); border-radius: 999px; }
html body .progress-bar { background: var(--ui-ink); }
html body .page-link { color: var(--ui-t1); border-color: var(--ui-line-2); }
html body .page-item.active .page-link { background: var(--ui-ink); border-color: var(--ui-ink); }

/* Ícone "?" de ajuda e botão flutuante da Central de Ajuda */
html body .help-icon, html body .ajuda-q { color: var(--ui-t3) !important; }
html body .ajuda-fab, html body .btn-ajuda-flutuante, html body #ajudaBotao { background: var(--ui-ink) !important; box-shadow: var(--ui-sh-lg) !important; }

/* Rodapé */
html body .footer-admin { width: auto !important; background: transparent !important; color: var(--ui-t3) !important; border-top: 1px solid var(--ui-line); font-size: 12.5px; }
html body .footer-admin a, html body .footer-admin * { color: var(--ui-t3) !important; }
html body .footer-admin .credito-fabricante { opacity: 1 !important; }

/* DataTables e Select2 (bibliotecas usadas em algumas telas) */
html body .dataTables_wrapper .dataTables_filter input, html body .dataTables_wrapper .dataTables_length select { border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-sm); padding: 4px 8px; }
html body .select2-container--bootstrap-5 .select2-selection { border-color: var(--ui-line-2) !important; border-radius: var(--ui-r-sm) !important; }


/* ---------- Peças próprias de algumas telas (antes coloridas/degradê) ---------- */
html body .btn-new, html body .btn-premium, html body .btn-floating {
  background: var(--ui-ink) !important; color: #fff !important; border: 1px solid var(--ui-ink) !important; border-radius: var(--ui-r-sm) !important;
  box-shadow: var(--ui-sh) !important; font-weight: 550 !important; font-size: 13.5px !important; padding: 0 14px !important; height: 36px; display: inline-flex; align-items: center; gap: 6px; transform: none !important;
}
html body .btn-new:hover, html body .btn-premium:hover { background: var(--ui-ink-2) !important; }
html body .badge-ativo { background: var(--ui-ok-s) !important; color: var(--ui-ok) !important; border: 1px solid var(--ui-ok-l); box-shadow: none !important; }
html body .badge-inativo { background: var(--ui-hover) !important; color: var(--ui-t2) !important; border: 1px solid var(--ui-line-2); box-shadow: none !important; }
html body .badge-admin, html body .badge-operador, html body .badge-escopo { background: var(--ui-hover) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line-2); box-shadow: none !important; }
html body .previsao-card { background: var(--ui-panel) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line) !important; }
html body .offcanvas-ajuda .offcanvas-header { background: var(--ui-panel) !important; color: var(--ui-t1) !important; border-bottom: 1px solid var(--ui-line); }
html body .nav-tabs-premium .nav-link.active::after { background: var(--ui-ink) !important; }
html body .nav-tabs-premium, html body .nav-tabs-custom { background: transparent !important; box-shadow: none !important; border-bottom: 1px solid var(--ui-line) !important; border-radius: 0 !important; padding: 0 !important; }
html body .nav-tabs-premium .nav-link, html body .nav-tabs-custom .nav-link { background: transparent !important; color: var(--ui-t2) !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; }
html body .nav-tabs-premium .nav-link.active, html body .nav-tabs-custom .nav-link.active { color: var(--ui-t1) !important; border-bottom-color: var(--ui-ink) !important; }
/* Configurações do Sistema: faixa escura das áreas + lista lateral → neutras */
html body .tabs-container { background: var(--ui-panel) !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r) !important; box-shadow: var(--ui-sh) !important; overflow: hidden; }
html body .cfg-areas { background: var(--ui-panel-2) !important; border-bottom: 1px solid var(--ui-line); padding: 8px 10px !important; gap: 4px !important; }
html body .cfg-area-btn { background: transparent !important; color: var(--ui-t2) !important; border-radius: var(--ui-r-sm) !important; font-weight: 550 !important; font-size: 13.5px !important; padding: 8px 12px !important; }
html body .cfg-area-btn:hover { background: var(--ui-hover) !important; color: var(--ui-t1) !important; }
html body .cfg-area-btn.active { background: var(--ui-panel) !important; color: var(--ui-t1) !important; box-shadow: var(--ui-sh), 0 0 0 1px var(--ui-line-2) !important; }
html body .cfg-lista { background: var(--ui-panel-2) !important; border-right: 1px solid var(--ui-line) !important; }
html body .cfg-lista-grupo { text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; font-weight: 550 !important; color: var(--ui-t3) !important; }
html body .cfg-lista .tab-btn { color: var(--ui-t2) !important; font-weight: 500 !important; font-size: 13.5px !important; }
html body .cfg-lista .tab-btn:hover { background: var(--ui-hover) !important; color: var(--ui-t1) !important; }
html body .cfg-lista .tab-btn.active { background: var(--ui-sel) !important; color: var(--ui-t1) !important; font-weight: 550 !important; }
html body .cfg-lista .tab-btn i { color: var(--ui-t3); }
html body .tab-buttons { background: var(--ui-panel-2) !important; }
html body .tab-btn.active { color: var(--ui-t1) !important; }
html body .config-card .form-label, html body .config-card label.form-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; }
/* Modo Básico/Completo e sub-abas do totem */
html body .cfg-modo button.on { color: var(--ui-t1) !important; }
html body .cfg-subabas .nav-link { color: var(--ui-t2); }
html body .cfg-subabas .nav-link.active { background: var(--ui-sel) !important; color: var(--ui-t1) !important; }
html body .cfg-subabas .nav-link.active small, html body .cfg-subabas .nav-link.active .text-muted { color: var(--ui-t2) !important; }
html body #mainContent h2 { font-size: 22px; font-weight: 650; }
html body #mainContent h2 > i.fa-ticket-alt { font-size: .8em; }

/* ---------- Paleta de comandos (Ctrl+K) ---------- */
.ui-cmdk-fundo { position: fixed; inset: 0; background: rgba(9,9,11,.32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 20000; display: none; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; opacity: 0; transition: opacity .15s var(--ui-ease); }
.ui-cmdk-fundo.aberto { display: flex; }
.ui-cmdk-fundo.visivel { opacity: 1; }
.ui-cmdk { width: 640px; max-width: 100%; background: #fff; border: 1px solid var(--ui-line); border-radius: 14px; box-shadow: 0 30px 80px rgba(9,9,11,.28); overflow: hidden; transform: translateY(-6px) scale(.985); transition: transform .18s var(--ui-ease); font-family: "Inter", system-ui, sans-serif; color: var(--ui-t1); }
.ui-cmdk-fundo.visivel .ui-cmdk { transform: none; }
.ui-cmdk-topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ui-line); color: var(--ui-t3); }
.ui-cmdk-topo input, .ui-cmdk-topo input:focus, .ui-cmdk-topo input:focus-visible { flex: 1; border: 0 !important; outline: 0 !important; box-shadow: none !important; font-size: 16px; font-family: inherit; color: var(--ui-t1); background: transparent; letter-spacing: -.01em; }
.ui-cmdk-lista { max-height: min(56vh, 460px); overflow-y: auto; padding: 6px 0; scroll-padding: 8px; }
.ui-cmdk-grupo { font-size: 11.5px; font-weight: 600; color: var(--ui-t3); padding: 10px 16px 4px; }
.ui-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 9px 16px; margin: 0 6px; border-radius: 8px; cursor: pointer; color: var(--ui-t2); text-decoration: none; }
.ui-cmdk-item .ui-cmdk-ic { width: 28px; height: 28px; border-radius: 7px; background: var(--ui-hover); display: grid; place-items: center; color: var(--ui-t2); flex-shrink: 0; }
.ui-cmdk-item b { color: var(--ui-t1); font-weight: 500; }
.ui-cmdk-item small { margin-left: auto; color: var(--ui-t3); font-size: 12px; white-space: nowrap; padding-left: 12px; }
.ui-cmdk-item.sel { background: var(--ui-sel); }
.ui-cmdk-item.sel .ui-cmdk-ic { background: #fff; color: var(--ui-t1); box-shadow: var(--ui-sh); }
.ui-cmdk-item mark { background: none; color: var(--ui-t1); font-weight: 650; padding: 0; }
.ui-cmdk-vazio { padding: 28px 16px; text-align: center; color: var(--ui-t3); }
.ui-cmdk-pe { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--ui-line); font-size: 12px; color: var(--ui-t3); background: var(--ui-panel-2); }
.ui-cmdk-pe .ui-kbd { margin: 0 4px 0 0; }

/* ---------- Avisos rápidos (toast) ---------- */
.ui-toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 20010; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.ui-toast { background: var(--ui-ink); color: #fafafa; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); font: 500 13.5px "Inter", system-ui, sans-serif; pointer-events: auto; animation: uiToastIn .22s var(--ui-ease); }
@keyframes uiToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Transições suaves entre telas (navegadores modernos) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  html body #sidebar { transform: translateX(-100%); transition: transform .2s var(--ui-ease) !important; width: 272px !important; box-shadow: var(--ui-sh-lg); }
  html.ui-sb-aberto body #sidebar { transform: none; }
  html body #mainContent, html body nav.navbar, html body .footer-admin, html.ui-sb-min body #mainContent, html.ui-sb-min body nav.navbar, html.ui-sb-min body .footer-admin { margin-left: 0 !important; }
  html body #mainContent { padding: 18px 16px 32px !important; }
  html body .ui-busca-btn { width: 36px; padding: 0; justify-content: center; }
  html body .ui-busca-btn span, html body .ui-busca-btn .ui-kbd { display: none; }
  html body .ui-menu-btn { display: inline-flex !important; }
}
html body .ui-menu-btn { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--ui-line-2); background: #fff; color: var(--ui-t1); }
@media print { html body #sidebar, html body nav.navbar, html body .footer-admin { display: none !important; } html body #mainContent { margin: 0 !important; } }

/* =====================================================================
   FASE 5 (2026-09-29, v2.4.4) — retoques tela a tela
   ===================================================================== */
/* Botões de exportar (Excel, CSV, Imprimir) — brancos; a cor fica só no ícone */
html body .btn-excel, html body .btn-csv, html body .btn-print {
  background: var(--ui-panel) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line-2) !important;
  border-radius: var(--ui-r-sm) !important; font-weight: 550 !important; box-shadow: var(--ui-sh) !important; transform: none !important;
}
html body .btn-excel:hover, html body .btn-csv:hover, html body .btn-print:hover { background: var(--ui-hover) !important; }
html body .btn-excel i { color: #15803d !important; }
html body .btn-csv i { color: #0e7490 !important; }
html body .btn-print i { color: var(--ui-t2) !important; }
/* Abas em pílula (Cabeçalho / Rodapé e parecidas) */
html body .tab-btn:not(.cfg-lista .tab-btn) { transform: none !important; }
html body .tab-buttons .tab-btn, html body .tabs-hf .tab-btn, html body #mainContent .tab-btn:not(.cfg-lista .tab-btn) {
  background: transparent !important; color: var(--ui-t2) !important; border-radius: var(--ui-r-sm) !important; font-weight: 550 !important; box-shadow: none !important;
}
html body #mainContent .tab-btn:not(.cfg-lista .tab-btn).active, html body .tab-buttons .tab-btn.active {
  background: var(--ui-panel) !important; color: var(--ui-t1) !important; box-shadow: var(--ui-sh), 0 0 0 1px var(--ui-line-2) !important;
}
/* Página Configurações: quadradinhos das áreas sem cores fortes */
html body .hub-ic {
  background: var(--ui-hover) !important; color: var(--ui-t1) !important; box-shadow: inset 0 0 0 1px var(--ui-line) !important;
}
html body .hub-ic i { color: var(--ui-t1) !important; }
/* Estrelas e ícones decorativos coloridos nos títulos → discretos */
html body #mainContent h1 > i[style*="color"], html body #mainContent h2 > i[style*="color"] { color: var(--ui-t3) !important; }
/* Cartões de números dos relatórios: ícone pequeno num quadradinho claro da mesma cor */
html body .stat-card > .icon {
  width: 40px; height: 40px; border-radius: 11px; display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 17px !important; margin: 0 auto 10px !important; opacity: 1 !important;
  background: color-mix(in srgb, currentColor 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, #fff);
}
html body .stat-card > .icon:not([style]), html body .stat-card > .icon[style*="8b5cf6"], html body .stat-card > .icon[style*="667eea"],
html body .stat-card > .icon[style*="764ba2"], html body .stat-card > .icon[style*="1e293b"], html body .stat-card > .icon[style*="333"] { color: var(--ui-t1) !important; }
html body .stat-card > .icon[style*="f59e0b"], html body .stat-card > .icon[style*="fbbf24"] { color: var(--ui-warn) !important; }
/* Gráficos: fundo dos quadros */
html body canvas { max-width: 100%; }

/* =====================================================================
   DEFINIÇÃO + COR DA MARCA + COR DO MENU (2026-09-29, v2.4.5 / v2.4.6)
   Mais contraste (fundo cinza-claro, bordas e sombras firmes), menu lateral com cor
   própria e a cor da marca só nos detalhes. As cores vêm de variáveis: os valores abaixo
   são o padrão; o admin/sidebar.php coloca por cima as calculadas por includes/ui_tema.php
   a partir de Configurações → Identidade → Cores (cor primária + "Menu lateral").
   Para voltar ao visual branco anterior: apagar este bloco inteiro (até o fim do arquivo).
   ===================================================================== */
:root {
  --ui-bg: #e9ebef; --ui-panel-2: #f6f7f9; --ui-line: #dcdfe5; --ui-line-2: #cfd3da; --ui-t2: #3f3f46; --ui-t3: #8a8a94;
  --ui-sh: 0 1px 2px rgba(16,24,40,.07), 0 3px 10px rgba(16,24,40,.05);
  --ui-sh-lg: 0 16px 48px rgba(16,24,40,.16), 0 2px 6px rgba(16,24,40,.06);
  --ui-acc: #4f46e5; --ui-acc-rgb: 79,70,229; --ui-acc-s: #eef0ff; --ui-acc-t: #3730a3; --ui-acc-l: #818cf8; --ui-acc-b: #dfe3ff;
  --ui-sb-bg: #111114; --ui-sb-hover: #1c1c20; --ui-sb-line: #26262b; --ui-sb-t1: #fafafa; --ui-sb-t2: #a1a1aa; --ui-sb-t3: #6b6b75;
  --ui-sb-sel: rgba(79,70,229,.24); --ui-sb-sel-t: #ffffff; --ui-sb-filete: #818cf8; --ui-sb-sel-ic: #a5b4fc; --ui-sb-borda: #111114;
  --ui-sb-mk: #4f46e5; --ui-sb-mk-t: #ffffff;
}
/* contraste */
html body #mainContent h1, html body #mainContent h2 { font-weight: 700 !important; }
html body .stat-card .stat-value, html body .metric-card .metric-value { font-weight: 700 !important; }
html body nav.navbar { background: #fff !important; border-bottom: 1px solid var(--ui-line) !important; }
html body .card-header { background: #fafbfc !important; }
/* menu lateral com cor própria */
html body #sidebar { background: var(--ui-sb-bg) !important; border-right: 1px solid var(--ui-sb-borda) !important; scrollbar-color: var(--ui-sb-line) transparent; }
html body .sidebar-premium .nav-link { color: var(--ui-sb-t2) !important; }
html body .sidebar-premium .nav-link:hover { background: var(--ui-sb-hover) !important; color: var(--ui-sb-t1) !important; }
html body .sidebar-premium .nav-link .ui-i { color: var(--ui-sb-t3) !important; }
html body .sidebar-premium .nav-link:hover .ui-i { color: var(--ui-sb-t1) !important; }
html body .sidebar-premium .nav-link small { color: var(--ui-sb-t3) !important; }
html body .sidebar-premium .nav-header, html body .sidebar-premium .nav-header * { color: var(--ui-sb-t3) !important; }
html body .ui-sb-marca { color: var(--ui-sb-t1) !important; }
html body .ui-sb-marca small { color: var(--ui-sb-t3) !important; }
html body .ui-sb-local { background: var(--ui-sb-hover) !important; border-color: var(--ui-sb-line) !important; color: var(--ui-sb-t2) !important; }
html body .ui-sb-local b { color: var(--ui-sb-t1) !important; }
html body .ui-sb-local .ui-i, html body .ui-sb-local i { color: var(--ui-sb-t3) !important; }
html body .ui-sb-pe { border-top-color: var(--ui-sb-line) !important; color: var(--ui-sb-t1) !important; }
html body .ui-sb-pe .ui-pe-papel { color: var(--ui-sb-t3) !important; }
html body #sidebar .sidebar-toggle, html body #sidebar button { color: var(--ui-sb-t2) !important; }
html body #sidebar .sidebar-toggle:hover { background: var(--ui-sb-hover) !important; color: var(--ui-sb-t1) !important; }
html body .ui-sb-marca .ui-mk { background: var(--ui-sb-mk) !important; color: var(--ui-sb-mk-t) !important; }
html body .sidebar-premium .nav-link.active { background: var(--ui-sb-sel) !important; color: var(--ui-sb-sel-t) !important; position: relative; }
html body .sidebar-premium .nav-link.active::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ui-sb-filete); }
html body .sidebar-premium .nav-link.active .ui-i { color: var(--ui-sb-sel-ic) !important; }
/* cor da marca nos detalhes */
html body .nav-tabs .nav-link.active, html body .nav-tabs-premium .nav-link.active, html body .nav-tabs-custom .nav-link.active { color: var(--ui-acc-t) !important; border-bottom-color: var(--ui-acc) !important; }
html body .nav-tabs-premium .nav-link.active::after { background: var(--ui-acc) !important; }
html body .cfg-lista .tab-btn.active { background: var(--ui-acc-s) !important; color: var(--ui-acc-t) !important; }
html body .cfg-lista .tab-btn.active i { color: var(--ui-acc) !important; }
html body .cfg-area-btn.active { color: var(--ui-acc-t) !important; }
html body .cfg-subabas .nav-link.active { background: var(--ui-acc-s) !important; color: var(--ui-acc-t) !important; }
html body #mainContent a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not([class*="card"]) { color: var(--ui-acc-t); }
html body .stat-card .stat-icon, html body .metric-card .metric-icon { color: var(--ui-acc) !important; }
html body #mainContent h1 > i:first-child, html body #mainContent h2 > i:first-child { color: var(--ui-acc) !important; }
html body .form-check-input:checked { background-color: var(--ui-acc) !important; border-color: var(--ui-acc) !important; }
html body .form-control:focus, html body .form-select:focus { border-color: var(--ui-acc-l) !important; box-shadow: 0 0 0 3px rgba(var(--ui-acc-rgb),.14) !important; }
html body .ui-busca-btn:hover { border-color: var(--ui-acc-l) !important; }
html body .page-item.active .page-link { background: var(--ui-acc) !important; border-color: var(--ui-acc) !important; }
/* Temas Prontos (Configurações) no padrão */
html body .btn-preset { background: var(--ui-ink) !important; color: #fff !important; border-radius: var(--ui-r-sm) !important; box-shadow: none !important; transform: none !important; font-weight: 600 !important; }
html body .btn-preset:hover { background: var(--ui-ink-2) !important; }
html body .preset-card { border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r) !important; box-shadow: var(--ui-sh) !important; }
html body .preset-card:hover { border-color: var(--ui-acc-l) !important; transform: none !important; }
html body .preset-dica { color: var(--ui-t3) !important; }
html body .preset-dica i { display: none; }