/* ==========================================================================
   UpBox — app.css  (extraído de base.html; ver base.html <style> histórico)
   Fase 1 modernização UI. Fonte Inter self-hosted; tokens em :root.
   ========================================================================== */

/* ── Inter (self-hosted, sem CDN) ── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,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:500;font-display:swap;
  src:url('../fonts/inter-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,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:600;font-display:swap;
  src:url('../fonts/inter-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,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:700;font-display:swap;
  src:url('../fonts/inter-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* latin-ext (acentos PT-BR raros e demais) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-ext-600.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-ext-700.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ── CSS global (extraído verbatim do <style> do base.html) ── */
    :root {
      --bg-main:      #0f1117;
      --bg-card:      #1a1d27;
      --bg-card2:     #20233a;
      --border:       #2e3250;
      --accent:       #4f8ef7;
      --green:        #22c55e;
      --red:          #ef4444;
      --yellow:       #f59e0b;
      --purple:       #a78bfa;
      --text-muted:   #8b92b3;
      --text-body:    #e2e8f0;
      --sidebar-w:    220px;
      --sidebar-collapsed: 54px;
      --sidebar-transition: 0.22s ease;
      --theme-transition: background 0.2s, color 0.2s, border-color 0.2s;
      /* ── Tokens semânticos (aliases; vocabulário p/ toast/TV/tabelas) ── */
      --status-up:      var(--green);
      --status-down:    var(--red);
      --status-warn:    var(--yellow);
      --status-unknown: var(--text-muted);
      --surface-1:      var(--bg-main);
      --surface-2:      var(--bg-card);
      --surface-3:      var(--bg-card2);
    }

    /* ── Modo claro ── */
    html.light {
      --bg-main:    #f0f2f8;
      --bg-card:    #ffffff;
      --bg-card2:   #eef0f8;
      --border:     #d0d5e8;
      --text-muted: #5a6080;
      --text-body:  #1e2235;
    }

    /* Bootstrap 5.3: .text-muted e .form-text usam --bs-secondary-color (quase preto,
       fixo) e ficam ILEGÍVEIS no tema escuro. Forçamos a variável do NOSSO tema —
       válido nos dois temas, em TODAS as telas (regra de contraste da casa). */
    .text-muted, .form-text { color: var(--text-muted) !important; }

    html.light body              { color: var(--text-body); }
    html.light .sidebar          { background: #fff; }
    html.light .topbar           { background: #fff; }
    html.light footer            { background: #fff !important; }
    html.light .nav-item         { color: #5a6080; }
    html.light .nav-item:hover   { color: #1e2235; background: rgba(79,142,247,0.07); }
    html.light .nav-item.active  { color: #2563eb; background: rgba(79,142,247,0.1); }
    html.light .sidebar-brand-name { color: #1e2235; }
    html.light .nav-section-label  { color: #8892b0; }
    html.light .sidebar-user       { color: #1e2235; }
    html.light .sidebar-logout     { color: #8892b0; }
    html.light .modal-content      { background: #fff; border-color: var(--border); color: var(--text-body); }
    html.light .modal-header, html.light .modal-footer { border-color: var(--border); }
    html.light .modal-title        { color: #1e2235; }
    html.light .form-control, html.light .form-select {
      background: var(--bg-card2); border-color: var(--border); color: var(--text-body);
    }
    html.light .form-control:focus, html.light .form-select:focus {
      background: var(--bg-card2); color: var(--text-body);
    }
    html.light .btn-close-white { filter: brightness(0) !important; }
    html.light .page-card       { background: var(--bg-card); border-color: var(--border); }
    html.light .topbar-title    { color: #1e2235; }
    html.light .topbar-title i  { color: var(--accent); }
    html.light code             { color: #2563eb; background: rgba(79,142,247,0.1); border-radius:3px; padding:1px 4px; }

    /* Tabelas */
    html.light .subs-table td,
    html.light .subs-table th    { color: #1e2235; border-color: #d0d5e8; }
    html.light .subs-table tbody tr:hover td { background: rgba(79,142,247,0.06); }
    html.light .subs-table tbody tr.row-selected td { background: rgba(79,142,247,0.12); }
    html.light .subs-table th    { background: #eef0f8; color: #5a6080; }

    /* Forçar override de inline color:#fff em células */
    html.light td[style*="color:#fff"],
    html.light td[style*="color: #fff"]  { color: #1e2235 !important; }

    /* Textos explícitos brancos inline que precisam mudar no light */
    html.light [style*="color:#e2e8f0"]  { color: #1e2235 !important; }
    html.light [style*="color: #e2e8f0"] { color: #1e2235 !important; }
    html.light [style*="color:#fff"]     { color: #1e2235 !important; }
    html.light [style*="color: #fff"]    { color: #1e2235 !important; }
    html.light [style*="color:#94a3b8"]  { color: #4a5575 !important; }
    html.light [style*="color:#7dd3fc"]  { color: #1d64c4 !important; }
    html.light [style*="color:#4a5080"]  { color: #6b7399 !important; }

    /* Monospace / IPs */
    html.light .font-mono,
    html.light [style*="font-family:monospace"] { color: #1d4ed8 !important; }

    /* Badges */
    html.light .badge-connected { background:rgba(21,128,61,0.12);  color:#15803d; border-color:rgba(21,128,61,0.3); }
    html.light .badge-idle      { background:rgba(161,98,7,0.12);   color:#a16207; border-color:rgba(161,98,7,0.3); }
    html.light .badge-unknown   { background:rgba(71,85,105,0.12);  color:#475569; border-color:rgba(71,85,105,0.3); }

    /* Toolbar / search / selects */
    html.light input[type="text"],
    html.light select { background: #eef0f8 !important; border-color: #d0d5e8 !important; color: #1e2235 !important; }
    html.light input::placeholder { color: #8892b0 !important; }

    /* Botões de ação nas tabelas */
    html.light .btn-action       { border-color: #d0d5e8; color: #5a6080; }
    html.light .btn-action:hover { border-color: var(--accent); color: #1d64c4; }
    html.light .btn-action.danger:hover { border-color: #dc2626; color: #dc2626; }

    /* Paginação */
    html.light .page-btn        { background:#eef0f8; border-color:#d0d5e8; color:#5a6080; }
    html.light .page-btn.active { background:rgba(79,142,247,0.15); border-color:var(--accent); color:#1d64c4; }

    /* Bulk bar */
    html.light #bulk-bar { background:rgba(79,142,247,0.07); border-color:rgba(79,142,247,0.25); }

    /* Flash */
    html.light .flash-success { background:rgba(21,128,61,0.1); border-color:rgba(21,128,61,0.3); color:#15803d; }
    html.light .flash-error   { background:rgba(220,38,38,0.1); border-color:rgba(220,38,38,0.3); color:#dc2626; }

    /* Section label */
    html.light .nav-section-label.collapsible:hover { color: #1e2235; }

    /* Sidebar footer */
    html.light .sidebar-logout:hover { color: #dc2626; }
    html.light .role-pill.full       { background:rgba(29,100,196,0.15);  color:#1d64c4; }
    html.light .role-pill.supervisor { background:rgba(147,51,234,0.12);  color:#7c3aed; }
    html.light .role-pill.readonly   { background:rgba(71,85,105,0.12);   color:#475569; }

    * { box-sizing: border-box; }

    body {
      background: var(--bg-main);
      color: #e2e8f0;
      font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
      font-feature-settings: 'tnum' 1, 'cv05' 1;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      display: flex;
    }

    /* ── Sidebar ── */
    .sidebar {
      width: var(--sidebar-w);
      min-height: 100vh;
      background: var(--bg-card);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      z-index: 100;
      transition: width var(--sidebar-transition);
      overflow: hidden;
    }

    .sidebar.collapsed {
      width: var(--sidebar-collapsed);
    }

    .sidebar-brand {
      padding: 14px 14px 12px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 54px;
      flex-shrink: 0;
    }

    .sidebar-brand-text {
      transition: opacity var(--sidebar-transition), width var(--sidebar-transition);
      overflow: hidden;
      white-space: nowrap;
      flex: 1;
    }

    .sidebar.collapsed .sidebar-brand-text { opacity: 0; width: 0; pointer-events: none; }

    .sidebar-brand-icon {
      display: none;
      color: #f5a623;
      font-size: 1.3rem;
    }

    .sidebar.collapsed .sidebar-brand-icon { display: flex; align-items: center; }

    .sidebar-brand-name {
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: 1.5px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .sidebar-brand-name .brand-coffee {
      color: #f5a623;
      font-size: 1.1rem;
    }

    .upbox-beta {
      font-size: 0.52rem; font-weight: 800; letter-spacing: 0.8px;
      color: #f59e0b; background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.45);
      border-radius: 5px; padding: 1px 5px; line-height: 1; align-self: center;
    }
    .sidebar.collapsed .upbox-beta { display: none; }

    /* Modo claro: texto escuro para contrastar */
    html.light .sidebar-brand-name { color: #1e2235; }
    html.light .sidebar-brand-name .brand-coffee { color: #d97706; }

    .sidebar-brand-sub {
      font-size: 0.62rem;
      color: var(--text-muted);
      letter-spacing: 0.5px;
      margin-top: 2px;
    }

    .sidebar-toggle {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px 6px;
      border-radius: 6px;
      font-size: 1rem;
      flex-shrink: 0;
      transition: color 0.15s, background 0.15s;
      display: flex;
      align-items: center;
    }

    .sidebar-toggle:hover { color: #e2e8f0; background: rgba(255,255,255,0.06); }

    /* Scrollbars finas e temáticas (sidebar, modais, painéis) — nos dois temas via variáveis.
       Firefox usa scrollbar-width/color; WebKit usa ::-webkit-scrollbar. */
    * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

    /* Spinner de carregamento padrão (use em TODA espera/loading). Temático. */
    @keyframes upbox-spin { to { transform: rotate(360deg); } }
    .upbox-spinner {
      display:inline-block; width:1em; height:1em; vertical-align:-0.15em;
      border:2px solid var(--border); border-top-color: var(--accent);
      border-radius:50%; animation: upbox-spin .7s linear infinite;
    }

    .sidebar-nav {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 10px 0;
    }

    .nav-section { margin-bottom: 2px; }

    .nav-section-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: var(--text-muted);
      padding: 10px 16px 3px;
      white-space: nowrap;
      overflow: hidden;
      transition: opacity var(--sidebar-transition);
      cursor: default;
    }

    /* Botão utilitário "Colapsar tudo" — propositalmente diferente das seções de módulo:
       minúsculas, menor, centralizado e apagado (acende no hover). */
    .nav-collapse-all-wrap { padding: 2px 12px 4px; }
    .nav-collapse-all {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.3px;
      text-transform: none;
      color: var(--text-muted);
      opacity: 0.6;
      border: 1px dashed var(--border);
      border-radius: 8px;
      padding: 3px 8px;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      overflow: hidden;
      transition: opacity .15s, color .15s, border-color .15s;
    }
    .nav-collapse-all:hover { opacity: 1; color: var(--text-body); border-color: var(--accent); }
    .nav-collapse-all i { font-size: 0.7rem; }
    .sidebar.collapsed .nav-collapse-all-wrap { display: none; }

    .nav-section-label.collapsible {
      cursor: pointer;
      user-select: none;
    }
    .nav-section-label.collapsible:hover { color: #e2e8f0; }

    .nav-section-chevron {
      font-size: 0.65rem;
      transition: transform 0.2s ease;
      opacity: 0.6;
      flex-shrink: 0;
    }
    .nav-section-label.collapsed-section .nav-section-chevron {
      transform: rotate(-90deg);
    }

    .nav-section-items {
      overflow: hidden;
      transition: max-height 0.24s ease, opacity 0.18s ease;
      max-height: 620px;   /* alto o bastante p/ não CORTAR seções longas (ex.: Cisco 8 itens) */
      opacity: 1;
    }
    .nav-section-items.collapsed-section {
      max-height: 0;
      opacity: 0;
    }

    .sidebar.collapsed .nav-section-label { opacity: 0; }
    .sidebar.collapsed .nav-section-items { max-height: 300px !important; opacity: 1 !important; }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 16px;
      font-size: 0.85rem;
      color: #94a3b8;
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
      cursor: pointer;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      white-space: nowrap;
      position: relative;
    }

    .nav-item:hover { background: rgba(79,142,247,0.08); color: #e2e8f0; }

    .nav-item.active {
      background: rgba(79,142,247,0.15);
      color: #7dd3fc;
      border-right: 2px solid var(--accent);
    }

    .nav-item.active i { color: var(--accent); }

    .nav-item.nav-item-sub { padding-left: 36px; font-size: 0.82rem; }
    html.light .nav-item.nav-item-sub { color: #6a7090; }

    /* Módulo bloqueado: mesma tipografia dos cabeçalhos de seção (.nav-section-label)
       — 0.6rem uppercase, só com cadeado à direita em vez de chevron. */
    .nav-module-locked {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 16px 3px; cursor: pointer; user-select: none;
      color: var(--text-muted); opacity: 0.7;
      font-size: 0.6rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1.2px;
      transition: opacity .15s, color .15s;
    }
    .nav-module-locked:hover { opacity: 1; color: #e2e8f0; }
    .nav-module-locked > i:first-child { font-size: 0.72rem !important; width: 16px !important; text-align: center; opacity: 0.55; flex-shrink: 0; }
    .nav-lock-icon { font-size: 0.62rem; opacity: 0.5; margin-left: auto; flex-shrink: 0; }
    html.light .nav-module-locked { color: #8892b0; }
    html.light .nav-module-locked:hover { color: #4b5575; }

    .nav-item i {
      font-size: 0.95rem;
      width: 18px;
      text-align: center;
      flex-shrink: 0;
    }

    .nav-label {
      transition: opacity var(--sidebar-transition);
      overflow: hidden;
    }

    .sidebar.collapsed .nav-label { opacity: 0; }

    /* Tooltip on collapsed */
    .sidebar.collapsed .nav-item:hover::after {
      content: attr(data-label);
      position: absolute;
      left: calc(var(--sidebar-collapsed) + 6px);
      top: 50%;
      transform: translateY(-50%);
      background: #2a2d3e;
      color: #e2e8f0;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 0.78rem;
      white-space: nowrap;
      pointer-events: none;
      z-index: 200;
    }

    .nav-item-disabled { color: #3d4460 !important; cursor: not-allowed; }
    .nav-item-disabled:hover { background: none !important; color: #3d4460 !important; }

    .nav-soon {
      font-size: 0.58rem;
      margin-left: auto;
      padding: 1px 5px;
      border-radius: 8px;
      background: rgba(148,163,184,0.1);
      color: #3d4460;
      flex-shrink: 0;
      transition: opacity var(--sidebar-transition);
    }

    .sidebar.collapsed .nav-soon { opacity: 0; }

    .nav-divider {
      height: 1px;
      background: var(--border);
      margin: 6px 0;
    }

    .sidebar-footer {
      padding: 12px 14px;
      border-top: 1px solid var(--border);
      font-size: 0.78rem;
      flex-shrink: 0;
      overflow: hidden;
    }

    .sidebar-user {
      color: #e2e8f0;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 8px;
      white-space: nowrap;
    }

    .sidebar-user-text {
      transition: opacity var(--sidebar-transition);
      overflow: hidden;
    }

    .sidebar.collapsed .sidebar-user-text { opacity: 0; }

    .role-pill {
      font-size: 0.6rem;
      padding: 1px 7px;
      border-radius: 10px;
      font-weight: 600;
      flex-shrink: 0;
    }

    .role-pill.full       { background: rgba(79,142,247,0.2);  color: #7dd3fc; }
    .role-pill.supervisor { background: rgba(168,85,247,0.15); color: #c084fc; }
    .role-pill.readonly   { background: rgba(148,163,184,0.1); color: #94a3b8; }

    .sidebar-logout {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text-muted);
      text-decoration: none;
      font-size: 0.8rem;
      transition: color 0.15s;
      white-space: nowrap;
    }

    .sidebar-logout:hover { color: #f87171; }

    .sidebar-logout-text {
      transition: opacity var(--sidebar-transition);
      overflow: hidden;
    }

    .sidebar.collapsed .sidebar-logout-text { opacity: 0; }

    /* ── Main content ── */
    .main-wrapper {
      margin-left: var(--sidebar-w);
      flex: 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      transition: margin-left var(--sidebar-transition);
    }

    .main-wrapper.collapsed { margin-left: var(--sidebar-collapsed); }

    .topbar {
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .topbar-title {
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .topbar-title i { color: var(--accent); }

    .main-content {
      flex: 1;
      padding: 24px;
    }

    /* ── Flash messages ── */
    .flash-container {
      padding: 0 24px;
      margin-top: 12px;
    }

    .flash-msg {
      border-radius: 8px;
      padding: 10px 16px;
      font-size: 0.85rem;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .flash-success {
      background: rgba(34,197,94,0.12);
      border: 1px solid rgba(34,197,94,0.3);
      color: #86efac;
    }

    .flash-error {
      background: rgba(239,68,68,0.12);
      border: 1px solid rgba(239,68,68,0.3);
      color: #f87171;
    }

    .flash-msg .flash-text { flex: 1; min-width: 0; }
    .flash-action {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px;
      font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 6px;
      border: 1px solid currentColor; color: inherit; text-decoration: none; white-space: nowrap;
    }
    .flash-action:hover { background: rgba(127,127,127,.14); color: inherit; }
    .flash-close {
      flex-shrink: 0; background: none; border: none; color: inherit;
      opacity: .6; cursor: pointer; padding: 2px 4px; font-size: .8rem; line-height: 1;
    }
    .flash-close:hover { opacity: 1; }

    /* ── Cards ── */
    .page-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
    }

    /* Bootstrap .table tematizado (usado pelo módulo Hotspot e futuros).
       Sem isto o Bootstrap força fundo branco (--bs-table-bg) e a tabela
       aparece branca dentro do card escuro. */
    .table {
      --bs-table-bg: transparent;
      --bs-table-striped-bg: transparent;
      --bs-table-color: var(--text-body);
      --bs-table-striped-color: var(--text-body);
      color: var(--text-body);
      margin-bottom: 0;
    }
    .table > :not(caption) > * > * {
      background-color: transparent;
      color: inherit;
      border-color: var(--border);
    }
    .table > thead th { color: var(--text-muted); border-color: var(--border); }
    .table tbody tr:hover > * { background-color: rgba(79,142,247,0.06); }
    /* Dropdown tematizado (PDF de voucher etc.) */
    .dropdown-menu { background: var(--bg-card2); border: 1px solid var(--border); }
    .dropdown-item { color: var(--text-body); }
    .dropdown-item:hover, .dropdown-item:focus {
      background: rgba(79,142,247,0.12); color: var(--text-body);
    }

    .section-title {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    /* ── Buttons ── */
    .btn-uptec {
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.85rem;
      padding: 7px 14px;
      transition: all 0.15s;
      /* Visual neutro padrão — garante contraste nos DOIS temas para botões sem
         variante (primary/danger). As variantes abaixo sobrescrevem por vir depois. */
      background: var(--bg-card2);
      border: 1px solid var(--border);
      color: var(--text-body);
    }
    .btn-uptec:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .btn-primary-soft {
      background: rgba(79,142,247,0.15);
      border: 1px solid rgba(79,142,247,0.4);
      color: #7dd3fc;
    }

    .btn-primary-soft:hover {
      background: rgba(79,142,247,0.25);
      border-color: var(--accent);
      color: #bae6fd;
    }

    .btn-danger-soft {
      background: rgba(239,68,68,0.12);
      border: 1px solid rgba(239,68,68,0.3);
      color: #f87171;
    }

    .btn-danger-soft:hover {
      background: rgba(239,68,68,0.22);
      border-color: var(--red);
      color: #fca5a5;
    }

    .btn-ghost {
      background: rgba(148,163,184,0.1);
      border: 1px solid var(--border);
      color: var(--text-muted);
    }

    .btn-ghost:hover { color: var(--text-body); }
    /* Variantes de cor: reforço de contraste no tema claro (as cores base são
       calibradas para o tema escuro e ficam fracas sobre fundo claro). */
    html.light .btn-primary-soft        { color: #1d4ed8; }
    html.light .btn-primary-soft:hover  { color: #1e40af; }
    html.light .btn-danger-soft         { color: #b91c1c; }
    html.light .btn-danger-soft:hover   { color: #991b1b; }

    .btn-primary-uptec {
      background: linear-gradient(135deg, #4f8ef7 0%, #3b7ae3 100%);
      border: none; color: #fff; font-weight: 600;
      border-radius: 8px; font-size: 0.85rem; padding: 7px 16px;
      transition: opacity .15s, box-shadow .15s;
      box-shadow: 0 2px 8px rgba(79,142,247,.25);
      display: inline-flex; align-items: center;
    }
    .btn-primary-uptec:hover { opacity: .9; color: #fff; box-shadow: 0 4px 12px rgba(79,142,247,.4); }
    .btn-primary-uptec:disabled { opacity: .5; }

    /* ── Forms ── */
    .form-control, .form-select {
      background: var(--bg-card2);
      border: 1px solid var(--border);
      color: #e2e8f0;
      border-radius: 8px;
      font-size: 0.875rem;
    }

    .form-control:focus, .form-select:focus {
      background: var(--bg-card2);
      border-color: var(--accent);
      color: #e2e8f0;
      box-shadow: 0 0 0 2px rgba(79,142,247,0.2);
    }

    .form-control::placeholder { color: #4a5080; }
    .form-select option { background: #1a1d27; }
    .form-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }

    /* ── Misc ── */
    .modal-content { background: var(--bg-card); border: 1px solid var(--border); }
    .modal-header, .modal-footer { border-color: var(--border); }
    .modal-title { color: #e2e8f0; font-size: 0.95rem; }

    .progress-bar-custom {
      height: 6px;
      border-radius: 3px;
      background: var(--border);
      overflow: hidden;
    }

    .progress-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.5s ease;
    }

    .status-dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      display: inline-block;
    }

    .status-dot.online  { background: var(--green); animation: pulse 2s infinite; }
    .status-dot.offline { background: var(--red); }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.35; }
    }

    /* ── Mobile ── */
    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 99;
      backdrop-filter: blur(2px);
    }

    .sidebar-overlay.active { display: block; }

    .mobile-menu-btn {
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(79,142,247,0.12);
      border: 1px solid rgba(79,142,247,0.3);
      color: #7dd3fc;
      border-radius: 8px;
      width: 36px;
      height: 36px;
      font-size: 1.1rem;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s, color 0.15s;
      margin-right: 10px;
    }

    .mobile-menu-btn:hover { background: rgba(79,142,247,0.22); color: #bae6fd; }

    @media (max-width: 768px) {
      .sidebar {
        transform: translateX(-100%);
        transition: transform var(--sidebar-transition), width var(--sidebar-transition);
        width: var(--sidebar-w) !important;  /* sempre largura total no mobile */
        /* iOS Safari: top:0/bottom:0 (≈100vh) estende a sidebar ATRÁS da barra
           inferior do navegador, cobrindo o rodapé (usuário + Sair). A barra
           flutuante do iOS SOBREPÕE o conteúdo, então 100dvh ainda mede por
           trás dela — usamos 100svh (small viewport: reserva o espaço da
           barra) p/ o rodapé NUNCA ficar coberto. bottom:auto libera o
           esticamento por bottom:0. */
        height: 100vh;        /* fallback navegadores sem svh */
        height: 100svh;
        bottom: auto;
      }

      /* respeita a safe-area (indicador de home) abaixo do rodapé */
      .sidebar-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
      }

      .sidebar.mobile-open {
        transform: translateX(0);
      }

      .main-wrapper {
        margin-left: 0 !important;
      }

      .mobile-menu-btn { display: flex; }

      /* Topbar ajuste para mobile */
      .topbar { padding: 10px 14px; }

      .main-content { padding: 14px; }
    }

/* ══════════════════════════════════════════════════════════════════════
   Toast + Confirm (Fase 1 feedback)
   Infraestrutura de feedback do produto (static/js/app.js): upToast() e
   upConfirm(). Usa só os tokens do :root/html.light — funciona nos dois
   temas. Todos os seletores são prefixados com .uptoast-/.upconfirm- para
   não colidir com nada existente.
   ══════════════════════════════════════════════════════════════════════ */

/* ── upToast: container ── */
.uptoast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1090; /* acima dos modais Bootstrap (1055 backdrop / 1060 modal) */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 24px);
  pointer-events: none; /* o container não intercepta cliques; cada toast liga o próprio */
}

@media (max-width: 480px) {
  .uptoast-container {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}

/* ── upToast: item ── */
.uptoast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--uptoast-accent, var(--accent));
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}

.uptoast.uptoast-show { opacity: 1; transform: translateY(0) scale(1); }
.uptoast.uptoast-hide { opacity: 0; transform: translateY(8px) scale(.98); }

.uptoast-success { --uptoast-accent: var(--status-up); }
.uptoast-error   { --uptoast-accent: var(--status-down); }
.uptoast-warn    { --uptoast-accent: var(--status-warn); }
.uptoast-info    { --uptoast-accent: var(--accent); }

.uptoast-icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1; padding-top: 1px; }
.uptoast-icon i { color: var(--uptoast-accent, var(--accent)); }

.uptoast-body { flex: 1; min-width: 0; }
.uptoast-msg  { color: var(--text-body); font-size: .85rem; line-height: 1.4; word-break: break-word; }

.uptoast-action {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  font-size: .78rem;
  font-family: inherit;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--uptoast-accent, var(--accent));
  background: none;
  color: var(--uptoast-accent, var(--accent));
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.uptoast-action:hover { background: rgba(127,127,127,.14); color: var(--uptoast-accent, var(--accent)); }

.uptoast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  opacity: .7;
  cursor: pointer;
  padding: 2px 4px;
  font-size: .8rem;
  line-height: 1;
}
.uptoast-close:hover { opacity: 1; color: var(--text-body); }

/* Barra de auto-dismiss (opcional; só existe quando timeout > 0) */
.uptoast-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(127,127,127,.15);
  overflow: hidden;
}
.uptoast-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--uptoast-accent, var(--accent));
  animation-name: uptoast-shrink;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes uptoast-shrink {
  from { width: 100%; }
  to   { width: 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .uptoast { transition: none; }
  .uptoast-bar-fill { animation: none; width: 0%; }
}

/* ── upConfirm: modal ── */
/* .modal-content/.modal-header/.modal-footer/.modal-title já são temáticos
   (definidos mais acima, com override em html.light) — reaproveitados aqui. */
.upconfirm-modal .modal-body { display: flex; align-items: flex-start; gap: 12px; }
.upconfirm-icon { flex-shrink: 0; font-size: 1.5rem; line-height: 1; color: var(--accent); padding-top: 2px; }
.upconfirm-icon.upconfirm-icon-danger { color: var(--status-down); }
.upconfirm-message { margin: 0; color: var(--text-body); font-size: .9rem; line-height: 1.5; }

/* ── F3: foco + transição de tema ── */

/* Anel de foco visível e consistente para navegação por teclado (acessibilidade
   NOC). Usa :focus-visible (não :focus puro) para não acender o anel em cliques
   de mouse/touch — só aparece quando o foco veio do teclado. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-item:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* .sidebar tem overflow:hidden (colapsa/expande) — outline externo seria
   cortado nas bordas. Dentro dela, troca por box-shadow inset equivalente. */
.sidebar :focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: 4px;
}

/* Remove o outline padrão do navegador só quando o foco NÃO veio do teclado
   (clique de mouse/touch) — a acessibilidade via teclado continua intacta
   porque :focus-visible (acima) permanece ativo nesse caso. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

/* Transição suave de cores na troca de tema (claro/escuro), para o toggle não
   "piscar". Só background/color/border-color via --theme-transition — nunca
   `transition: all`, para não animar hover/outros estados indesejados.
   Superfícies sem transition próprio (adição limpa, sem conflito): */
body,
.topbar,
.page-card,
.modal-content,
.form-control,
.form-select,
.btn:not(.btn-uptec) {
  transition: var(--theme-transition);
}

/* .sidebar já anima `width` (colapsar/expandir, ver --sidebar-transition).
   Reafirma esse valor e ACRESCENTA as cores de tema no mesmo `transition`
   (shorthand não é cumulativo entre regras) para não perder a animação de
   largura existente. */
.sidebar {
  transition: width var(--sidebar-transition), var(--theme-transition);
}

/* .btn-uptec já tem `transition: all 0.15s`, que cobre background/color/
   border-color — não precisa (e não deve) ganhar uma segunda declaração aqui,
   senão a nova pisaria a existente (mesma especificidade, mesma propriedade). */

@media (prefers-reduced-motion: reduce) {
  body,
  .topbar,
  .page-card,
  .modal-content,
  .form-control,
  .form-select,
  .btn:not(.btn-uptec) {
    transition: none;
  }
  /* Mantém só a transição de largura do sidebar (funcional, não decorativa
     de tema); remove a parte de cor adicionada acima. */
  .sidebar {
    transition: width var(--sidebar-transition);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Assistente de IA — balão de chat Q&A (Fase 1-B, UPMap, read-only)
   Só tokens do :root/html.light — funciona nos dois temas. z-index ABAIXO
   dos modais Bootstrap (backdrop 1050/modal 1055-1060) — nunca deve tapar
   um modal aberto; o .uptoast (1090) continua acima de tudo p/ os erros.
   ══════════════════════════════════════════════════════════════════════ */

.ai-fab {
  position: fixed;
  right: 20px;
  bottom: 76px;               /* acima do rodapé de contato (suporte/telefone) */
  z-index: 1035;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.32);
  cursor: pointer;
  opacity: .5;                /* discreto em repouso; realça no hover/foco */
  transition: transform .15s ease, box-shadow .15s ease, opacity .18s ease, var(--theme-transition);
}
.ai-fab:hover,
.ai-fab:focus-visible { opacity: 1; transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 26px rgba(0,0,0,.38); }
.ai-fab.ai-hidden { display: none; }

.ai-panel {
  position: fixed;
  right: 20px;
  bottom: 140px;              /* acima do FAB (que subiu p/ não cobrir o rodapé) */
  z-index: 1035;
  width: 380px;
  max-width: calc(100vw - 24px);
  height: min(560px, 74vh);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0,0,0,.38);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, var(--theme-transition);
}
.ai-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ai-panel.maximized {
  width: min(720px, calc(100vw - 40px));
  height: min(85vh, calc(100vh - 160px));
  bottom: 140px;
}

.ai-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-card2);
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
  font-weight: 600;
  font-size: .92rem;
  flex-shrink: 0;
}
.ai-panel-head i.bi-stars { color: var(--accent); margin-right: 4px; }
.ai-beta {
  font-size: .65rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ai-panel-head-actions { display: flex; align-items: center; gap: 2px; }
.ai-panel-x {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .95rem;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ai-panel-x:hover { background: rgba(127,127,127,.14); color: var(--text-body); }

.ai-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: .85rem;
  line-height: 1.48;
  color: var(--text-body);
  word-break: break-word;
  white-space: pre-wrap;
}
.ai-msg.bot   { align-self: flex-start; background: var(--bg-card2); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.ai-msg.user  { align-self: flex-end; background: rgba(79,142,247,.16); border: 1px solid rgba(79,142,247,.3); border-bottom-right-radius: 3px; }
.ai-msg.error { align-self: flex-start; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: var(--text-body); }
.ai-msg.typing { align-self: flex-start; color: var(--text-muted); font-style: italic; }
.ai-msg strong { color: var(--text-body); }
.ai-msg code {
  background: rgba(127,127,127,.16);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .82em;
}
.ai-msg ul { margin: 4px 0 4px 18px; padding: 0; }
.ai-msg li { margin-bottom: 2px; }

.ai-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: .8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  background: transparent;
}
.ai-nav-btn:hover { background: rgba(79,142,247,.14); color: var(--accent); }

.ai-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.ai-input {
  flex: 1;
  resize: none;
  max-height: 110px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-body);
  font-size: .85rem;
  font-family: inherit;
  padding: 8px 11px;
  line-height: 1.4;
}
.ai-input:focus { outline: none; border-color: var(--accent); }
.ai-send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: none;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ai-send:hover { filter: brightness(1.08); }
.ai-send:disabled { opacity: .55; cursor: default; }

@media (max-width: 768px) {
  .ai-panel, .ai-panel.maximized {
    inset: 0;
    right: 0; bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;      /* fallback navegadores sem svh */
    height: 100svh;
    border-radius: 0;
    border: none;
  }
  .ai-form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .ai-fab { bottom: calc(20px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-fab, .ai-panel { transition: none; }
}