/* ============================================================================
 * BOX FIBRA — Facelift v3 (opt-in)  ·  html[data-face="v3"]
 * v2 2026-06-12: Fase 1+2 juntas — tipografia, profundidade, sidebar nova,
 * assinatura de acento nos painéis. Herda tema/modo (dark/light × 7 acentos).
 * Rollback: desligar "✨ Visual v3" no menu de temas.
 * ========================================================================== */

/* ── Tipografia ── */
html[data-face="v3"] body,
html[data-face="v3"] input,
html[data-face="v3"] select,
html[data-face="v3"] textarea,
html[data-face="v3"] button {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html[data-face="v3"] code,
html[data-face="v3"] pre,
html[data-face="v3"] kbd {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  font-variant-numeric: tabular-nums;
}
/* números grandes de KPI → fonte de instrumento (bem visível) */
html[data-face="v3"] .panel [style*="font-size:24px"],
html[data-face="v3"] .panel [style*="font-size:22px"],
html[data-face="v3"] .panel [style*="font-size:20px"],
html[data-face="v3"] .panel [style*="font-size:28px"],
html[data-face="v3"] .panel [style*="font-size:32px"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}

/* ── Fundo com respiro ── */
html[data-face="v3"]:not([data-mode="light"]) body {
  background:
    radial-gradient(1100px 480px at 15% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
    radial-gradient(900px 400px at 95% -10%, rgba(88, 166, 255, .07), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
html[data-face="v3"][data-mode="light"] body {
  background:
    radial-gradient(1100px 480px at 15% -8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ── Painéis: profundidade + assinatura de acento no topo ── */
html[data-face="v3"] .panel {
  position: relative;
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--border) 55%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 103%, #fff),
    color-mix(in srgb, var(--panel) 90%, #000));
  box-shadow: 0 10px 32px rgba(0, 0, 0, .30);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
html[data-face="v3"] .panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent) 65%, transparent) 30%,
    color-mix(in srgb, var(--accent) 65%, transparent) 70%,
    transparent);
  opacity: .8;
  pointer-events: none;
}
html[data-face="v3"] .panel:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, .38),
              0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
html[data-face="v3"][data-mode="light"] .panel {
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel) 94%, #8899aa));
  box-shadow: 0 8px 24px rgba(30, 40, 60, .12);
}

/* ── Títulos de painel: barra de acento + peso ── */
html[data-face="v3"] .panel-title {
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 11px;
}
html[data-face="v3"] .panel-title i {
  color: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent));
}

/* ── Sidebar repaginada ── */
html[data-face="v3"] #sidebar {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sidebar, var(--panel)) 104%, #fff),
    color-mix(in srgb, var(--sidebar, var(--panel)) 92%, #000));
  border-right-color: color-mix(in srgb, var(--border) 55%, transparent);
}
html[data-face="v3"] .sb-item {
  margin: 1px 7px;
  padding: 7px 10px;
  border-radius: 9px;
  border-left: none;
  transition: background .15s, color .15s, transform .15s;
}
html[data-face="v3"] .sb-item:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translateX(2px);
}
html[data-face="v3"] .sb-item.active {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 28%, transparent),
    color-mix(in srgb, var(--accent) 12%, transparent));
  color: var(--text, #e6edf3);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
              0 0 14px color-mix(in srgb, var(--accent) 18%, transparent);
}
html[data-face="v3"] .sb-item.active i { color: var(--accent); }
html[data-face="v3"] .sb-group-hdr {
  letter-spacing: 1.2px;
  font-weight: 800;
}

/* ── Topbar: gradiente + linha de acento ── */
html[data-face="v3"] #topbar {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 106%, #fff),
    color-mix(in srgb, var(--panel) 96%, #000));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 1px 18px color-mix(in srgb, var(--accent) 12%, transparent);
}
html[data-face="v3"] .tb-btn {
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
html[data-face="v3"] .tb-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ── Inputs / selects / badges ── */
html[data-face="v3"] input,
html[data-face="v3"] select { border-radius: 9px; }
html[data-face="v3"] .tag,
html[data-face="v3"] .svc-badge,
html[data-face="v3"] .status-pill { border-radius: 9px; font-weight: 800; }

/* ── Cards de serviço no padrão NOC v3 ── */
html[data-face="v3"] .svc-card {
  border-radius: 12px;
  background: linear-gradient(180deg,
    var(--input-bg, var(--panel)),
    color-mix(in srgb, var(--input-bg, var(--panel)) 88%, #000));
  transition: box-shadow .2s;
}
html[data-face="v3"] .svc-card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

/* ── Tabelas: cabeçalho com tinta de acento + hover de linha ── */
html[data-face="v3"] table th {
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 10px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
html[data-face="v3"] table td { font-variant-numeric: tabular-nums; }
html[data-face="v3"] table tbody tr { transition: background .12s; }
html[data-face="v3"] table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ── Modais / drawers ── */
html[data-face="v3"] [id$="Modal"] > div,
html[data-face="v3"] .bf-ai-panel,
html[data-face="v3"] .bf-drawer { border-radius: 16px; }

/* ── Scrollbar fina ── */
html[data-face="v3"] ::-webkit-scrollbar { width: 6px; height: 6px; }
html[data-face="v3"] ::-webkit-scrollbar-track { background: transparent; }
html[data-face="v3"] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 3px;
}

/* ════════════════════════════════════════════════════════════════════════
 * map.html — Fase 3 (mesmo toggle: localStorage noc_facelift → data-face)
 * ══════════════════════════════════════════════════════════════════════ */
html[data-face="v3"] #detailPanel {
  border-left-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 103%, #fff),
    color-mix(in srgb, var(--panel) 90%, #000));
  box-shadow: -8px 0 24px rgba(0,0,0,.3);
}
html[data-face="v3"] #legend,
html[data-face="v3"] #baseDropdown,
html[data-face="v3"] #heatDropdown {
  border-radius: 12px;
  /* vidro fosco: translúcido o bastante p/ "respirar" sobre o mapa, mas o
     blur forte mantém o texto legível mesmo sobre satélite claro. */
  background: linear-gradient(180deg,
    rgba(26, 31, 40, 0.84),
    rgba(13, 17, 23, 0.88));
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
/* cabeçalho "Legenda" mais presente; separador no corpo (some ao colapsar) */
html[data-face="v3"] #legToggle {
  color: var(--text);
  font-weight: 700;
}
html[data-face="v3"] #legBody {
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
}
html[data-face="v3"] .leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
}
html[data-face="v3"] .leaflet-tooltip { border-radius: 8px; }
html[data-face="v3"] .leaflet-control-zoom a { border-radius: 8px !important; }
html[data-face="v3"] #modeBadge { border-radius: 8px; font-weight: 800; }
html[data-face="v3"] .heat-item:hover,
html[data-face="v3"] .base-item:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}