/* ═══════════════════════════════════════
   AJAX LOCALIZA — Design System v3
   Swiss Modernism · DM Sans · Security Green
═══════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --primary:    #1b5e45;
  --primary-dk: #134030;
  --primary-lt: #236b51;
  --primary-pale:#e8f5ef;
  --accent:     #e07a00;
  --accent-dk:  #c06900;
  --accent-lt:  #fff4e0;
  --bg:         #f2f4f3;
  --bg-raised:  #ffffff;
  --card:       #ffffff;
  --text:       #111b17;
  --text-mid:   #3d5c50;
  --text-muted: #7a9488;
  --border:     #dce4e0;
  --border-dk:  #bccec8;
  --ok:         #1e7a4a;   --ok-bg:   #e5f6ed;
  --warn:       #a55c00;   --warn-bg: #fff4e0;
  --err:        #be3b2c;   --err-bg:  #fdecea;
  --info:       #1a5f9e;   --info-bg: #e9f1fb;
  --shadow-xs:  0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.07);
  --shadow-lg:  0 8px 28px rgba(0,0,0,.09);
  --sidebar-w:  248px;
  --topbar-h:   52px;
  --radius:     10px;
  --radius-sm:  6px;
  --ease:       cubic-bezier(.4,0,.2,1);
  --dur:        .18s;
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --primary:    #2d9b6e;
  --primary-dk: #134030;
  --primary-lt: #3aad7e;
  --primary-pale:rgba(45,155,110,.12);
  --accent:     #f0a030;
  --accent-dk:  #d08a20;
  --accent-lt:  rgba(240,160,48,.12);
  --bg:         #0f1613;
  --bg-raised:  #1a2320;
  --card:       #1e2b27;
  --text:       #e4ebe8;
  --text-mid:   #a3b8af;
  --text-muted: #6b8578;
  --border:     #2a3b35;
  --border-dk:  #3a4f47;
  --ok:         #3aad7e;   --ok-bg:   rgba(58,173,126,.12);
  --warn:       #f0a030;   --warn-bg: rgba(240,160,48,.1);
  --err:        #e05545;   --err-bg:  rgba(224,85,69,.1);
  --info:       #4a9ade;   --info-bg: rgba(74,154,222,.1);
  --shadow-xs:  0 1px 2px rgba(0,0,0,.2);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.25);
  --shadow-md:  0 4px 12px rgba(0,0,0,.3);
  --shadow-lg:  0 8px 28px rgba(0,0,0,.4);
}
[data-theme="dark"] #sidebar { background: #0a100d; }
[data-theme="dark"] .sb-logo-block { border-bottom-color: rgba(255,255,255,.05); }
[data-theme="dark"] .data-table thead { background: rgba(255,255,255,.03); }
[data-theme="dark"] .data-table tbody tr:nth-child(even) { background: rgba(255,255,255,.015); }
[data-theme="dark"] .badge { border-color: transparent; }
[data-theme="dark"] .login-wrap::before {
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(45,155,110,.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(45,155,110,.05) 0%, transparent 70%);
}

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  display: flex;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--primary); color: #fff; }

/* ── FOCUS VISIBLE ── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 3px;
}
button:focus-visible { outline-offset: 1px; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-dk); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
#sidebar {
  width: var(--sidebar-w);
  background: var(--primary-dk);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  overflow-y: auto;
  z-index: 200;
}

.sb-logo-block {
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 11px;
}
.sb-logo { width: 36px; height: 36px; object-fit: contain; }
.sb-brand-text {
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .15px;
  line-height: 1.3;
}
.sb-brand-text em { color: var(--accent); font-style: normal; }

.sb-section {
  padding: 18px 20px 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.25);
  text-transform: uppercase;
}

.sb-nav { flex: 1; }

.sb-nav button {
  width: 100%;
  background: transparent;
  border: none;
  border-left: 2.5px solid transparent;
  color: rgba(255,255,255,.5);
  padding: 9px 20px;
  text-align: left;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all var(--dur) var(--ease);
  font-family: inherit;
}
.sb-nav button .btn-icon { width: 18px; text-align: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sb-nav button .btn-badge {
  margin-left: auto;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
}
.sb-nav button .btn-badge.alert { background: var(--err); color: #fff; animation: pulse 2.5s infinite; }
.sb-nav button:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); border-left-color: rgba(255,255,255,.15); }
.sb-nav button.active {
  background: rgba(255,255,255,.08); color: #fff; border-left-color: var(--accent); font-weight: 600;
  box-shadow: inset 3px 0 8px rgba(224,122,0,.1);
}
.sb-nav button.active .btn-icon { color: var(--accent); }

.sb-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  color: rgba(255,255,255,.18);
  line-height: 1.9;
}

/* ═══════════════════════════════════════
   APP / TOPBAR
═══════════════════════════════════════ */
#app {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#topbar {
  height: var(--topbar-h);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 100;
  position: relative;
}

/* Topbar loading progress */
.topbar-progress {
  position: absolute;
  bottom: -1px; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  transition: width .3s var(--ease);
  z-index: 101;
}
.topbar-progress.loading {
  width: 70%;
  animation: topProgress 1.5s ease-in-out infinite;
}
.topbar-progress.done { width: 100%; opacity: 0; transition: width .2s, opacity .4s .2s; }
@keyframes topProgress {
  0% { width: 10%; }
  50% { width: 70%; }
  100% { width: 90%; }
}

.tb-left { display: flex; align-items: center; gap: 14px; }

.hamburger {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: none; cursor: pointer; color: var(--text-mid); transition: all var(--dur) var(--ease);
}
.hamburger:hover { border-color: var(--primary); color: var(--primary); }

/* Botão de recolher sidebar (desktop). No mobile o hamburger assume. */
.sb-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: none; cursor: pointer; color: var(--text-mid); transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}
.sb-collapse-btn:hover { border-color: var(--primary); color: var(--primary); }
body.sb-collapsed .sb-collapse-btn { color: var(--primary); border-color: var(--primary); }

/* Estado recolhido: sidebar desliza pra fora, conteúdo ocupa tudo */
#sidebar { transition: transform .28s var(--ease); }
#app { transition: margin-left .28s var(--ease); }
body.sb-collapsed #sidebar { transform: translateX(-100%); }
body.sb-collapsed #app { margin-left: 0; }
body.sb-collapsed #topbar { left: 0; }

.tb-home {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  text-decoration: none; transition: opacity .2s;
}
.tb-home:hover { opacity: .8; }
.tb-logo { height: 28px; width: auto; object-fit: contain; }
.tb-brand {
  font-weight: 700;
  font-size: .92rem;
  color: var(--primary);
  letter-spacing: .1px;
  white-space: nowrap;
}
.tb-brand span { color: var(--accent); }

.mode-selector {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.mode-btn {
  border: none;
  background: transparent;
  padding: 5px 13px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--dur) var(--ease);
  letter-spacing: .2px;
}
.mode-btn.active { background: var(--bg-raised); color: var(--primary); box-shadow: var(--shadow-xs); }

.tb-right { display: flex; align-items: center; gap: 12px; }
.tb-status {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem; font-weight: 600;
  color: var(--ok);
}
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%; background: var(--ok);
  animation: pulse 2.5s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Global search (Ctrl+K) */
.gsearch-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
  align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.gsearch-overlay.open { display: flex; animation: fadeIn .15s var(--ease); }
.gsearch-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; width: 100%; max-width: 540px;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  overflow: hidden; animation: scaleIn .15s var(--ease);
}
.gsearch-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.gsearch-input-wrap svg { color: var(--text-muted); flex-shrink: 0; }
.gsearch-input {
  flex: 1; border: none; background: transparent; color: var(--text);
  font-size: .95rem; font-family: 'DM Sans', sans-serif; outline: none;
}
.gsearch-input::placeholder { color: var(--text-muted); opacity: .6; }
.gsearch-kbd {
  font-family: 'JetBrains Mono', monospace; font-size: .6rem;
  color: var(--text-muted); background: var(--bg); border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 4px;
}
.gsearch-results {
  max-height: 340px; overflow-y: auto; padding: 6px;
}
.gsearch-results:empty::after {
  content: 'Digite para buscar...'; display: block; text-align: center;
  padding: 2rem; color: var(--text-muted); font-size: .84rem;
}
.gsr-section {
  font-size: .62rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .8px; padding: 8px 12px 4px;
  font-family: 'JetBrains Mono', monospace;
}
.gsr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  transition: background .12s;
}
.gsr-item:hover, .gsr-item.active { background: var(--primary-pale); }
.gsr-item svg { color: var(--primary); opacity: .6; flex-shrink: 0; }
.gsr-item-text { flex: 1; font-size: .84rem; color: var(--text); }
.gsr-item-text small { display: block; font-size: .7rem; color: var(--text-muted); margin-top: 1px; }
.gsr-item-badge { font-size: .65rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.gsearch-footer {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-top: 1px solid var(--border);
  font-size: .62rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace;
}

/* ── DROPDOWN MENUS ── */
.dropdown-wrap {
  position: relative;
}
.dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 300px;
  z-index: 500;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  overflow: hidden;
}
.dropdown-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
}
.dropdown-header small {
  font-weight: 500;
  font-size: .66rem;
  color: var(--text-muted);
  cursor: pointer;
}
.dropdown-header small:hover { color: var(--primary); }
.dropdown-body {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}
.dropdown-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-size: .8rem;
}
.dropdown-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.dropdown-footer a {
  font-size: .72rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
}
.dropdown-footer a:hover { opacity: .7; }

/* Notification items */
.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s var(--ease);
  align-items: flex-start;
}
.notif-item:hover { background: var(--primary-pale); }
.notif-item.unread { background: rgba(27,94,69,.04); }
.notif-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: .7rem;
}
.notif-ico.n-err { background: var(--err-bg); color: var(--err); }
.notif-ico.n-warn { background: var(--warn-bg); color: var(--warn); }
.notif-ico.n-ok { background: var(--ok-bg); color: var(--ok); }
.notif-ico.n-info { background: var(--info-bg); color: var(--info); }
.notif-text {
  flex: 1;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--text);
}
.notif-text small {
  display: block;
  font-size: .64rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}

/* Notification badge on bell */
.notif-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: var(--err);
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  border: 2px solid var(--bg-raised);
  animation: pulse 2s infinite;
}
.sd-badge{background:var(--warn);}
.sd-badge.sd-badge-crit{background:var(--err);animation:pulse 1.5s infinite;}

/* User dropdown */
.user-dropdown {
  min-width: 220px;
}
.user-dropdown .ud-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-dropdown .ud-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-lt));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 700;
}
.user-dropdown .ud-name { font-size: .84rem; font-weight: 700; color: var(--text); }
.user-dropdown .ud-role {
  font-size: .64rem; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.user-dropdown .ud-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: .8rem; font-weight: 500;
  color: var(--text-mid);
  cursor: pointer;
  transition: all .12s;
  border: none; background: none; width: 100%;
  font-family: inherit;
  text-align: left;
}
.user-dropdown .ud-item:hover { background: var(--primary-pale); color: var(--primary); }
.user-dropdown .ud-item.danger:hover { background: var(--err-bg); color: var(--err); }
.user-dropdown .ud-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 12px;
}

/* Theme toggle */
.theme-toggle {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease); flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-pale); }
.theme-toggle svg { width: 16px; height: 16px; }

/* Topbar buttons */
.tb-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  padding: 5px 12px; border-radius: var(--radius-sm); font-size: .72rem;
  font-weight: 600; cursor: pointer; transition: all .18s var(--ease);
  font-family: 'DM Sans', sans-serif; display: inline-flex; align-items: center; gap: 5px;
}
.tb-btn:hover { border-color: var(--primary); color: var(--primary); }
.tb-btn.danger:hover { border-color: var(--err); color: var(--err); }

/* User info in topbar */
.tb-user {
  display: flex; align-items: center; gap: 9px; margin-right: 2px;
}
.tb-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-lt));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; letter-spacing: .3px;
  box-shadow: 0 2px 6px rgba(27,94,69,.15);
  flex-shrink: 0;
}
.tb-user-name { font-size: .78rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.tb-user-role {
  font-family: 'JetBrains Mono', monospace; font-size: .6rem;
  color: var(--text-muted); letter-spacing: .2px;
}

.tb-clock {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  font-weight: 500;
  color: var(--text-mid);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════ */
#main-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem 1.5rem;
  background: var(--bg);
  scroll-behavior: smooth;
}
#main-content > * {
  animation: fadeIn .25s var(--ease) both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  animation: slideUp .35s var(--ease) both;
}
.card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-dk); }
.card-accent { border-left: 3px solid var(--accent); }
.card-ok     { border-left: 3px solid var(--ok); }
.card-err    { border-left: 3px solid var(--err); }

.card-header {
  padding: .8rem 1.15rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-title { font-size: .84rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.card-title svg { opacity: .5; }
.card-body { padding: 1.15rem; }
.card-body-sm { padding: .7rem 1.15rem; max-height: 280px; overflow-y: auto; }

/* Collapsible cards */
.card-header.collapsible {
  cursor: pointer;
  user-select: none;
}
.card-header.collapsible:hover { background: var(--primary-pale); }
.card-header .collapse-icon {
  transition: transform .25s var(--ease);
  flex-shrink: 0;
  color: var(--text-muted);
}
.card-header.collapsed .collapse-icon {
  transform: rotate(-90deg);
}
.card-collapse-body {
  max-height: 1200px;
  overflow: hidden;
  transition: max-height .35s var(--ease), opacity .25s var(--ease);
  opacity: 1;
}
.card-collapse-body.collapsed {
  max-height: 0;
  opacity: 0;
}

/* Page title in topbar */
.tb-page-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .3px;
  padding: 3px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* Page transition */
.page-enter {
  animation: pageSlideIn .3s var(--ease) both;
}
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: .6rem;
}
.page-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-title span { color: var(--accent); font-weight: 500; }

/* ═══════════════════════════════════════
   KPI GRID
═══════════════════════════════════════ */
.kpi-grid { display: grid; gap: .85rem; margin-bottom: 1.2rem; }
.kpi-grid.c4 { grid-template-columns: repeat(4,1fr); }
.kpi-grid.c3 { grid-template-columns: repeat(3,1fr); }
.kpi-grid.c2 { grid-template-columns: repeat(2,1fr); }

.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-xs);
  transition: all var(--dur) var(--ease);
  position: relative; overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2.5px;
  background: var(--border-dk);
}
.kpi { animation: slideUp .3s var(--ease) both; }
.kpi:nth-child(2) { animation-delay: .04s; }
.kpi:nth-child(3) { animation-delay: .08s; }
.kpi:nth-child(4) { animation-delay: .12s; }
.kpi:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kpi .kpi-ico { position: absolute; right: 12px; top: 10px; opacity: .10; }
.kpi .kpi-ico svg { width: 28px; height: 28px; }
.kpi.g::before { background: var(--ok); }
.kpi.o::before { background: var(--accent); }
.kpi.r::before { background: var(--err); }
.kpi.b::before { background: var(--info); }
.kpi.p::before { background: #7d3c98; }
.kpi.g:hover { border-color: var(--ok); box-shadow: 0 4px 16px rgba(30,122,74,.1); }
.kpi.o:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(224,122,0,.1); }
.kpi.r:hover { border-color: var(--err); box-shadow: 0 4px 16px rgba(190,59,44,.1); }
.kpi.b:hover { border-color: var(--info); box-shadow: 0 4px 16px rgba(26,95,158,.1); }
.kpi-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; font-weight: 500; letter-spacing: .5px;
  color: var(--text-muted); margin-bottom: 6px;
  text-transform: uppercase;
}
.kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.85rem; font-weight: 700; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.kpi-value.g { color: var(--ok); }
.kpi-value.o { color: var(--accent); }
.kpi-value.r { color: var(--err); }
.kpi-value.b { color: var(--info); }
.kpi-sub { font-size: .72rem; color: var(--text-muted); margin-top: 5px; }

/* ═══════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px,1fr)); gap: .85rem; }
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.15rem;
  cursor: pointer; transition: all var(--dur) var(--ease); position: relative; overflow: hidden;
}
.stat-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; background: var(--primary); opacity: .5; transition: opacity var(--dur); }
.stat-card:hover::before { opacity: 1; }
.stat-card h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem; font-weight: 700; color: var(--primary);
  margin: 8px 0 4px; font-variant-numeric: tabular-nums;
}
.stat-card p {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .8px;
}
.stat-card .sc-icon { font-size: 1.2rem; opacity: .45; color: var(--primary); transition: opacity .2s; }
.stat-card:hover .sc-icon { opacity: .8; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: 'DM Sans', sans-serif; font-size: .8rem;
  font-weight: 600; cursor: pointer; padding: 7px 15px;
  transition: all var(--dur) var(--ease); white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-primary  { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover  { background: var(--primary-lt); box-shadow: var(--shadow-sm); }
.btn-accent   { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover   { background: var(--accent-dk); }
.btn-outline  { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover  { background: var(--primary-pale); }
.btn-ghost    { background: transparent; color: var(--text-mid); border-color: var(--border); }
.btn-ghost:hover    { background: var(--bg); border-color: var(--border-dk); color: var(--text); }
/* btn-danger: estilo claramente destrutivo (fundo vermelho claro, hover vermelho solido) — evita
   clique acidental confundindo com botao normal. Use em acoes irreversiveis (excluir, remover). */
.btn-danger   { background: rgba(190,59,44,.10); color: var(--err); border-color: rgba(190,59,44,.45); font-weight: 600; }
.btn-danger:hover   { background: var(--err); border-color: var(--err); color: #fff; }
.btn-danger:active  { transform: scale(0.97); }

/* Asterisco vermelho em campos obrigatorios (.form-label.req::after) */
.form-label.req::after { content: ' *'; color: var(--err); font-weight: 700; }
/* Estado de erro em inputs (.form-input.input-error) */
.form-input.input-error, .form-select.input-error, .form-textarea.input-error {
  border-color: var(--err) !important;
  background: rgba(190,59,44,.04);
}
/* Mensagem de erro inline abaixo do input */
.form-error-msg {
  font-size: .74rem;
  color: var(--err);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.form-error-msg::before { content: '⚠'; font-size: .82rem; }
.btn-success  { background: transparent; color: var(--ok); border-color: rgba(30,122,74,.2); }
.btn-success:hover  { background: var(--ok-bg); border-color: var(--ok); }
.btn-warn     { background: transparent; color: var(--warn); border-color: rgba(165,92,0,.2); }
.btn-warn:hover     { background: var(--warn-bg); border-color: var(--warn); }

.btn-sm  { padding: 5px 10px; font-size: .73rem; border-radius: 5px; }
.btn-lg  { padding: 10px 20px; font-size: .85rem; border-radius: 8px; }
.btn-full { width: 100%; justify-content: center; }
.btn-icon-only { padding: 6px 8px; }

/* ═══════════════════════════════════════
   BADGE / STATUS
═══════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.badge { transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.badge:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.bok   { color: var(--ok);   background: var(--ok-bg);   border-color: rgba(30,122,74,.15); }
.bok::before   { background: var(--ok); animation: pulse 2.5s infinite; }
.bwarn { color: var(--warn); background: var(--warn-bg); border-color: rgba(165,92,0,.15); }
.bwarn::before { background: var(--warn); }
.berr  { color: var(--err);  background: var(--err-bg);  border-color: rgba(190,59,44,.15); }
.berr::before  { background: var(--err); }
.binfo { color: var(--info); background: var(--info-bg); border-color: rgba(26,95,158,.15); }
.binfo::before { background: var(--info); }
.bgray { color: var(--text-muted); background: var(--bg); border-color: var(--border); }
.bgray::before { background: var(--text-muted); }

/* ═══════════════════════════════════════
   TABLE
═══════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  padding: 9px 12px; text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border); background: var(--bg);
  white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid var(--border); transition: background .15s var(--ease); }
.data-table tbody tr:hover { background: var(--primary-pale); }
.data-table tbody tr:nth-child(even) { background: rgba(0,0,0,.025); }
.data-table tbody tr:nth-child(even):hover { background: var(--primary-pale); }
.data-table tbody tr:last-child { border-bottom: none; }
/* Sortable headers */
.data-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
.data-table thead th.sortable:hover { color: var(--primary); }
.data-table thead th .sort-icon {
  display: inline-block;
  margin-left: 4px;
  opacity: .3;
  font-size: .55rem;
  vertical-align: middle;
  transition: opacity .15s;
}
.data-table thead th.sort-asc .sort-icon,
.data-table thead th.sort-desc .sort-icon { opacity: 1; color: var(--primary); }

.data-table td { padding: 9px 12px; font-size: .84rem; vertical-align: middle; }
.data-table tbody tr { animation: fadeIn .2s var(--ease) both; }
.data-table tbody tr:nth-child(1) { animation-delay: 0s; }
.data-table tbody tr:nth-child(2) { animation-delay: .02s; }
.data-table tbody tr:nth-child(3) { animation-delay: .04s; }
.data-table tbody tr:nth-child(4) { animation-delay: .06s; }
.data-table tbody tr:nth-child(5) { animation-delay: .08s; }
.data-table tbody tr:nth-child(n+6) { animation-delay: .1s; }

/* ═══════════════════════════════════════
   FORM
═══════════════════════════════════════ */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }

.form-group { margin-bottom: .9rem; }
.form-label {
  display: block;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .15px;
  color: var(--text-mid); margin-bottom: 6px;
  transition: color .2s;
}
.form-group:focus-within .form-label { color: var(--primary); }

.form-input, .form-select, .form-textarea {
  width: 100%; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 9px 12px;
  font-family: inherit; font-size: .86rem;
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
  appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(27,94,69,.1);
  background: var(--bg-raised);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); opacity: .6; }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%237a9488' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}
.form-select option { background: var(--bg-raised); }

/* ═══════════════════════════════════════
   SEARCH BAR
═══════════════════════════════════════ */
.search-wrap { position: relative; }
.search-wrap input {
  width: 100%; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 8px 11px 8px 32px;
  font-family: inherit; font-size: .86rem;
  outline: none; transition: border-color var(--dur);
}
.search-wrap input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,94,69,.07); }
.search-wrap input::placeholder { color: var(--text-muted); }
.search-wrap::before { content: '⌕'; font-size: 1rem; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }

/* ═══════════════════════════════════════
   FILTER CHIPS
═══════════════════════════════════════ */
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; }
.fc {
  background: var(--bg-raised); border: 1px solid var(--border);
  color: var(--text-mid); padding: 5px 14px;
  border-radius: 20px; font-size: .73rem; font-weight: 600;
  cursor: pointer; transition: all .2s var(--ease);
  font-family: inherit; user-select: none;
}
.fc:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-pale); }
.fc.on    { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 6px rgba(27,94,69,.18); }
.fc.ok.on { background: var(--ok);   border-color: var(--ok); box-shadow: 0 2px 6px rgba(30,122,74,.18); }
.fc.err.on{ background: var(--err);  border-color: var(--err); box-shadow: 0 2px 6px rgba(190,59,44,.18); }

/* ═══════════════════════════════════════
   AVATAR
═══════════════════════════════════════ */
.av {
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary), var(--primary-lt));
  color: #fff; font-weight: 700; letter-spacing: .3px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.av.sm  { width:26px; height:26px; font-size:.62rem; border-radius:5px; }
.av.md  { width:32px; height:32px; font-size:.72rem; border-radius:6px; }
.av.lg  { width:42px; height:42px; font-size:.88rem; border-radius:8px; }
.av.accent  { background: linear-gradient(135deg, var(--accent), var(--accent-dk)); }
.av.blue    { background: linear-gradient(135deg, var(--info), #1570b8); }
.av.purple  { background: linear-gradient(135deg, #7d3c98, #5b2c6f); }
.av.red     { background: linear-gradient(135deg, var(--err), #9c2d20); }

/* ═══════════════════════════════════════
   PROGRESS BARS
═══════════════════════════════════════ */
.prog-wrap { margin-bottom: .75rem; }
.prog-row  { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: .73rem; }
.prog-name { color: var(--text-mid); font-weight: 500; }
.prog-pct  {
  font-family: 'JetBrains Mono', monospace;
  color: var(--primary); font-size: .66rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.prog-bar  { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 3px; transition: width 1s var(--ease); }
.prog-fill.ok   { background: var(--ok); }
.prog-fill.warn { background: var(--accent); }
.prog-fill.err  { background: var(--err); }

/* ═══════════════════════════════════════
   GRID HELPERS
═══════════════════════════════════════ */
.g2  { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.g3  { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.g31 { display:grid; grid-template-columns:2fr 1fr; gap:1rem; }
.g13 { display:grid; grid-template-columns:1fr 2fr; gap:1rem; }
.mb1 { margin-bottom:1rem; } .mb15 { margin-bottom:1.5rem; }

/* ═══════════════════════════════════════
   SECTION LABEL
═══════════════════════════════════════ */
.slbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px; margin-bottom: .7rem;
}
.slbl::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ═══════════════════════════════════════
   MODAL
═══════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(17,27,23,.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}
.modal-overlay.open { display: flex; animation: fadeIn .18s var(--ease); }
@keyframes slideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }

.modal-box {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  padding: 1.6rem;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 16px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn .2s var(--ease);
}
.modal-title {
  font-size: .96rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: 8px;
  padding-right: 2rem;
}
.modal-title svg { color: var(--primary); opacity: .7; }
.modal-close {
  position: absolute; top: 1.1rem; right: 1rem;
  background: transparent; border: 1px solid transparent;
  color: var(--text-muted); font-size: 1rem;
  cursor: pointer; padding: 4px 7px;
  border-radius: 6px; transition: all var(--dur);
  line-height: 1; display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--err-bg); color: var(--err); border-color: rgba(190,59,44,.15); }
.modal-footer {
  display: flex; justify-content: flex-end;
  gap: 8px; margin-top: 1.3rem;
  padding-top: 1rem; border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
#toasts {
  position: fixed; bottom: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 9999;
}
.toast {
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: 8px;
  padding: 9px 14px; display: flex; align-items: center; gap: 9px;
  font-size: .82rem; font-weight: 500; color: var(--text);
  min-width: 220px; box-shadow: var(--shadow-lg);
  animation: toastIn .2s var(--ease);
}
.toast.ok   { border-left-color: var(--ok); }
.toast.err  { border-left-color: var(--err); }
.toast.warn { border-left-color: var(--accent); }
@keyframes toastIn { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastProgress { from{width:100%} to{width:0%} }
.toast-progress {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: currentColor; opacity: .3; border-radius: 0 0 8px 8px;
}
.toast { position: relative; overflow: hidden; }
.toast span { display: flex; align-items: center; flex-shrink: 0; }
.toast.ok span { color: var(--ok); }
.toast.err span { color: var(--err); }
.toast.warn span { color: var(--accent); }
.toast.info span { color: var(--info); }

/* ═══════════════════════════════════════
   MAP
═══════════════════════════════════════ */
#map { width: 100%; height: 500px; border-radius: var(--radius); border: 1px solid var(--border); z-index: 1; }
#map .leaflet-popup-content-wrapper { border-radius: 8px; box-shadow: var(--shadow-md); }
#map .leaflet-popup-content { font-family: 'DM Sans', sans-serif; font-size: .82rem; line-height: 1.5; }

/* ═══════════════════════════════════════
   FILTER FORM
═══════════════════════════════════════ */
.filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
  gap: 1rem;
  align-items: flex-end;
}

/* ═══════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════ */
.empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--text-muted); }
.empty-state .ei {
  margin-bottom: 1rem; opacity: .18; color: var(--primary);
  animation: emptyFloat 3s ease-in-out infinite;
}
@keyframes emptyFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.empty-state p { font-size: .84rem; line-height: 1.5; }
.empty-state p strong { color: var(--text-mid); }
.empty-state .empty-hint {
  margin-top: 12px;
  font-size: .72rem;
  color: var(--text-muted);
  opacity: .7;
}

/* ═══════════════════════════════════════
   PANIC BANNER
═══════════════════════════════════════ */
.panic-banner {
  background: var(--err); color: #fff;
  padding: .75rem 1.2rem; border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .88rem;
  margin-bottom: 1rem;
}
.panic-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1s infinite; flex-shrink: 0; }

/* ═══════════════════════════════════════
   CHECKBOX
═══════════════════════════════════════ */
.chk-row {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--text-mid);
  cursor: pointer;
}
.chk-row input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer;
}

/* ═══════════════════════════════════════
   LOGIN SCREEN
═══════════════════════════════════════ */
#login-screen {
  width: 100%; min-height: 100vh; flex: 1;
}
.login-wrap {
  width: 100%; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  position: relative; overflow: hidden;
}
.login-wrap::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(27,94,69,.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(27,94,69,.04) 0%, transparent 70%);
  pointer-events: none;
}
.login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 44px 40px 36px; width: 100%; max-width: 400px;
  box-shadow: var(--shadow-lg);
  position: relative; z-index: 1;
  animation: loginEnter .5s var(--ease) both;
}
@keyframes loginEnter {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-header { text-align: center; margin-bottom: 32px; }
.login-logo { height: 58px; margin-bottom: 14px; animation: loginEnter .5s var(--ease) .1s both; }
.login-title {
  font-size: 1.4rem; font-weight: 700; color: var(--primary);
  animation: loginEnter .5s var(--ease) .15s both;
}
.login-title span { font-weight: 400; color: var(--text); }
.login-subtitle {
  font-family: 'JetBrains Mono', monospace; font-size: .64rem;
  color: var(--text-muted); margin-top: 6px; letter-spacing: .8px;
  text-transform: uppercase; animation: loginEnter .5s var(--ease) .2s both;
}
.login-field {
  margin-bottom: 18px;
  animation: loginEnter .4s var(--ease) .25s both;
}
.login-field:nth-child(2) { animation-delay: .3s; }
.login-field label {
  font-size: .75rem; font-weight: 600; color: var(--text-mid);
  display: block; margin-bottom: 6px;
}
.login-field input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 8px; font-size: .88rem; font-family: 'DM Sans', sans-serif;
  background: var(--bg); color: var(--text); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(27,94,69,.1);
  background: var(--bg-raised);
}
.login-field input::placeholder { color: var(--text-muted); opacity: .6; }
.login-erro {
  color: var(--err); font-size: .82rem; text-align: center;
  margin-bottom: 12px; display: none;
  background: var(--err-bg); padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(190,59,44,.12);
}
.login-btn {
  width: 100%; padding: 12px; background: var(--primary); color: #fff;
  border: none; border-radius: 8px; font-size: .92rem; font-weight: 700;
  cursor: pointer; transition: all .2s; position: relative; overflow: hidden;
  animation: loginEnter .4s var(--ease) .35s both;
}
.login-btn:hover { background: var(--primary-lt); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(27,94,69,.2); }
.login-btn:active { transform: translateY(0); }
.login-loading {
  text-align: center; margin-top: 14px; display: none;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--text-muted);
}
.login-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 0; animation: loginEnter .4s var(--ease) .4s both;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.login-divider span {
  font-size: .62rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .5px; font-family: 'JetBrains Mono', monospace;
}
.login-footer {
  text-align: center; margin-top: 10px; font-size: .68rem; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace; animation: loginEnter .4s var(--ease) .45s both;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; }
  .kpi-grid.c4 { grid-template-columns: repeat(2,1fr); }
  .g31, .g13 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px) {
  .g2 { grid-template-columns: 1fr; }
  .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
  .mode-selector { display: none; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-header > div { width: 100%; flex-wrap: wrap; }
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tb-right { gap: 6px; }
  .tb-clock { display: none; }
  .tb-status { display: none; }
  .tb-user-name { font-size: .72rem; }
  .tb-user-role { font-size: .55rem; }
  .tb-avatar { width: 28px; height: 28px; font-size: .62rem; }
  .tb-btn { font-size: .66rem; padding: 4px 8px; }
  .login-card { padding: 30px 24px 28px; margin: 12px; }
  .login-title { font-size: 1.2rem; }
  .card-header { flex-wrap: wrap; gap: 8px; }
}
/* ═══════════════════════════════════════
   BOTTOM NAV (MOBILE)
═══════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  z-index: 300;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
.bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}
.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: .58rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  border-radius: 8px;
  transition: all .15s var(--ease);
  position: relative;
}
.bnav-item:hover { color: var(--primary); }
.bnav-item.active {
  color: var(--primary);
}
.bnav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--primary);
}
.bnav-item svg { width: 20px; height: 20px; }
.bnav-badge {
  position: absolute;
  top: 0; right: 4px;
  background: var(--err);
  color: #fff;
  font-size: .48rem;
  min-width: 14px; height: 14px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

@media (max-width: 640px) {
  .bottom-nav { display: block; }
  #main-content { padding-bottom: 70px; }
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 200;
    transform: translateX(-100%); transition: transform .25s var(--ease);
    box-shadow: none;
  }
  #sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.18); }
  .sidebar-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35);
    z-index: 199; backdrop-filter: blur(2px);
  }
  .sidebar-overlay.show { display: block; }
  #app { margin-left: 0; }
  #topbar { left: 0; }
  .tb-left { gap: 8px; }
  .tb-brand span { display: none; }
  .hamburger { display: flex !important; }
  .sb-collapse-btn { display: none !important; }
  body.sb-collapsed #app { margin-left: 0; }
  .kpi-grid.c4, .kpi-grid.c3 { grid-template-columns: repeat(2,1fr); }
  .kpi-grid.c4 .kpi, .kpi-grid.c3 .kpi { padding: 14px 12px; }
  .kpi-label { font-size: .58rem; }
  .kpi-value { font-size: 1.3rem; }
  #main-content { padding: 14px 12px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .card { border-radius: 8px; }
  .modal-box { margin: 10px; max-height: 90vh; }
  .filter-row { flex-wrap: wrap; }
  .filter-row .fc { font-size: .68rem; padding: 4px 8px; }
  .login-card { margin: 8px; padding: 28px 20px 24px; }
  .login-logo { height: 48px; }
  .tb-user { display: none; }
  .panic-banner { font-size: .78rem; padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .page-title { font-size: 1rem; }
  .card-body-sm { flex-direction: column; }
  .search-wrap { width: 100%; }
}

@media (max-width: 400px) {
  .kpi-grid.c4, .kpi-grid.c3 { grid-template-columns: 1fr 1fr; }
  .kpi-value { font-size: 1.15rem; }
  .kpi-label { font-size: .55rem; }
  .kpi-ico { display: none; }
  .stats-grid { grid-template-columns: 1fr; }
  .btn-lg { padding: 8px 14px; font-size: .8rem; }
  .page-title span { display: block; }
}

/* ═══════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════
   TOOLTIPS
═══════════════════════════════════════ */
[data-tip] {
  position: relative;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(.92);
  background: var(--text);
  color: var(--bg-raised);
  font-size: .68rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
  z-index: 500;
  font-family: 'DM Sans', sans-serif;
}
[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--text);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s var(--ease);
  z-index: 500;
}
[data-tip]:hover::after, [data-tip]:focus::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
[data-tip]:hover::before, [data-tip]:focus::before {
  opacity: 1;
}

/* ═══════════════════════════════════════
   RIPPLE EFFECT
═══════════════════════════════════════ */
.btn, .login-btn, .mode-btn, .fc, .stat-card {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: rippleAnim .5s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ═══════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: .9rem;
  font-size: .72rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.breadcrumb a {
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s;
}
.breadcrumb a:hover { opacity: .7; }
.breadcrumb .bc-sep {
  color: var(--border-dk);
  font-size: .6rem;
}
.breadcrumb .bc-current {
  color: var(--text-mid);
  font-weight: 600;
}

/* ═══════════════════════════════════════
   OFFLINE BANNER
═══════════════════════════════════════ */
.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--warn);
  color: #fff;
  text-align: center;
  padding: 6px 16px;
  font-size: .76rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  z-index: 10001;
  transform: translateY(-100%);
  transition: transform .3s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.offline-banner.show { transform: translateY(0); }
.offline-banner .ob-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.5s infinite;
}

/* ═══════════════════════════════════════
   SCROLL TO TOP
═══════════════════════════════════════ */
.scroll-top-btn {
  position: fixed;
  bottom: 20px; right: 70px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .15s;
  z-index: 800;
  pointer-events: none;
}
.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top-btn:hover {
  background: var(--primary-lt);
  box-shadow: var(--shadow-lg);
}

/* ═══════════════════════════════════════
   ACESSIBILIDADE
═══════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .82rem;
  z-index: 10000;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus {
  top: 8px;
}
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--primary-pale);
}

/* ═══════════════════════════════════════
   SKELETON LOADING
═══════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  border-radius: var(--radius-sm);
}
.skel-line {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 4px;
}
.skel-line.w80 { width: 80%; }
.skel-line.w60 { width: 60%; }
.skel-line.w40 { width: 40%; }
.skel-line.w100 { width: 100%; }
.skel-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
}
.skel-kpi {
  height: 88px;
  border-radius: var(--radius);
}
.skel-card {
  height: 200px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.skel-table-row {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.skel-table-row .skeleton { flex: 1; height: 12px; }
.skel-table-row .skeleton:first-child { flex: 0 0 32px; height: 32px; border-radius: 50%; }

/* ═══════════════════════════════════════
   PRINT STYLES
═══════════════════════════════════════ */
@media print {
  body { display: block; background: #fff; }
  #sidebar, #topbar, .hamburger, .sidebar-overlay,
  .btn, .modal-overlay, #confirm-overlay,
  #loading-overlay, #toasts, .page-header button,
  .filter-row, .search-wrap, .tb-right { display: none !important; }
  #app { margin-left: 0; display: block; height: auto; overflow: visible; }
  #main-content { padding: 0; overflow: visible; height: auto; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; page-break-inside: avoid; }
  .kpi { box-shadow: none; border: 1px solid #ddd; }
  .kpi-ico { display: none; }
  .data-table { display: table; font-size: .75rem; }
  .data-table th { background: #f5f5f5; }
  .badge { border: 1px solid #ccc; }
  .page-title { font-size: 1.2rem; margin-bottom: .5rem; }
  a { text-decoration: none; color: inherit; }
  canvas { max-height: 200px; }
}

/* ═══════════════════════════════════════
   DASHBOARD & UX IMPROVEMENTS
═══════════════════════════════════════ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kpi{transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.kpi[style*="cursor:pointer"]:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.kpi-grid .kpi{animation:fadeInUp .35s ease-out both;}
.kpi-grid .kpi:nth-child(2){animation-delay:.05s;}
.kpi-grid .kpi:nth-child(3){animation-delay:.1s;}
.kpi-grid .kpi:nth-child(4){animation-delay:.15s;}
.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none;}
.btn{transition:all .15s var(--ease);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.data-table tbody tr{transition:background .12s;}
.data-table tbody tr:hover{background:rgba(0,0,0,.02);}
.card{transition:box-shadow .2s var(--ease);}
.card:hover{box-shadow:var(--shadow-sm);}
.page-enter{animation:fadeInUp .25s ease-out;}

/* ═══════════════════════════════════════
   SUPERVISÃO — Filtros Região + Período (estilo FindMe)
═══════════════════════════════════════ */
.sup-filters{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.sup-region-select{padding:12px 18px;font-size:.88rem;font-weight:600;color:#fff;background:#4a90d9;border:none;border-radius:6px;min-width:280px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;text-transform:uppercase;letter-spacing:.5px;}
.sup-region-select option{background:#fff;color:var(--text);text-transform:none;font-weight:400;}
.sup-period-tabs{display:flex;border-radius:6px;overflow:hidden;}
.sup-period-tab{padding:12px 28px;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border:none;cursor:pointer;transition:all .15s;color:#fff;background:#1e3a5f;}
.sup-period-tab.active{background:#1e3a5f;}
.sup-period-tab:not(.active){background:#c5cdd6;color:#8896a5;}
.sup-period-tab:not(.active):hover{background:#a8b5c2;color:#fff;}

.sup-overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:24px;}
.sup-local-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:box-shadow .15s;}
.sup-local-card:hover{box-shadow:var(--shadow-md);}
.sup-local-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.sup-local-card-name{font-size:.95rem;font-weight:700;color:var(--text);}
.sup-local-card-client{font-size:.75rem;color:var(--text-muted);}
.sup-local-card-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.sup-local-stat{text-align:center;padding:8px 4px;background:var(--bg);border-radius:6px;}
.sup-local-stat-value{font-size:1.1rem;font-weight:800;}
.sup-local-stat-label{font-size:.68rem;color:var(--text-muted);margin-top:2px;}
.sup-local-stat-value.g{color:var(--ok);}
.sup-local-stat-value.o{color:var(--warn);}
.sup-local-stat-value.r{color:var(--err);}
.sup-local-stat-value.b{color:var(--primary);}
.sup-local-progress{margin-top:12px;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.sup-local-progress-bar{height:100%;border-radius:3px;transition:width .4s;}
.sup-local-supervisor{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.78rem;color:var(--text-mid);}

.sup-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.sup-table thead th{background:#1e3a5f;color:#fff;padding:12px 16px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;text-align:left;}
.sup-table tbody td{padding:12px 16px;font-size:.84rem;border-bottom:1px solid var(--border);}
.sup-table tbody tr:hover{background:var(--bg);}
.sup-table tbody tr:last-child td{border-bottom:none;}
.sup-row-main:hover{background:rgba(30,58,95,.03);}
.sup-row-expanded{background:rgba(30,58,95,.04)!important;}
.sup-expand-ico{display:inline-block;transition:transform .2s;}
.sup-detail-wrap{padding:16px 20px 20px 44px;animation:supDetailIn .2s ease-out;}
@keyframes supDetailIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sup-detail-postos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.sup-detail-posto{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px 16px;}
.sup-detail-posto:hover{box-shadow:0 2px 8px rgba(0,0,0,.06);}
.sup-detail-posto-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.sup-detail-posto-head strong{font-size:.88rem;}
.sup-detail-posto-stats{display:flex;gap:14px;font-size:.78rem;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.sup-detail-ativs{display:flex;flex-direction:column;gap:2px;}
.sup-detail-ativ{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;padding:3px 0;color:var(--text-mid);}

/* Métricas / Relatórios — layout FindMe */
.fm-filter-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px;align-items:flex-end;}
.fm-filter-group{display:flex;flex-direction:column;gap:4px;min-width:180px;flex:1;}
.fm-filter-group label{font-size:.82rem;font-weight:700;color:var(--text);}
.fm-filter-group select,.fm-filter-group input{padding:10px 14px;border:1px solid var(--border);border-radius:6px;font-size:.84rem;background:var(--card);color:var(--text);transition:border-color .15s,box-shadow .15s;}
.fm-filter-group select:focus,.fm-filter-group input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-pale);outline:none;}
.fm-filter-group select.region-select{background:#4a90d9;color:#fff;font-weight:600;border:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.fm-btn-calcular{padding:10px 24px;background:#1e3a5f;color:#fff;border:none;border-radius:6px;font-size:.84rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;transition:background .15s;}
.fm-btn-calcular:hover{background:#2a4f7a;}
.fm-btn-pdf{padding:10px 24px;background:#c25a3c;color:#fff;border:none;border-radius:6px;font-size:.84rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;transition:background .15s;}
.fm-btn-pdf:hover{background:#a84b30;}
.fm-btn-xls{padding:10px 24px;background:#a84b30;color:#fff;border:none;border-radius:6px;font-size:.84rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;transition:background .15s;opacity:.7;}
.fm-btn-xls:hover{opacity:1;}
.fm-check-row{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--text);white-space:nowrap;cursor:pointer;}
.fm-check-row input[type="checkbox"]{accent-color:var(--primary);width:16px;height:16px;}

/* ═══════════════════════════════════════
   INVENTÁRIO — Layout Master-Detail
═══════════════════════════════════════ */
.inv-layout{display:flex;gap:0;min-height:calc(100vh - var(--topbar-h) - 140px);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card);}
.inv-sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--border);background:var(--bg);padding:8px 0;overflow-y:auto;}
.inv-nav-item{display:flex;align-items:center;gap:10px;padding:11px 18px;cursor:pointer;font-size:.84rem;color:var(--text-mid);transition:all .15s;border-left:3px solid transparent;}
.inv-nav-item:hover{background:var(--card);color:var(--text);}
.inv-nav-item.active{background:var(--card);color:var(--text);font-weight:600;border-left-color:var(--primary);}
.inv-nav-icon{display:flex;align-items:center;color:var(--text-muted);flex-shrink:0;}
.inv-nav-item.active .inv-nav-icon{color:var(--primary);}
.inv-nav-label{flex:1;}
.inv-nav-count{background:var(--border);color:var(--text-muted);font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:10px;min-width:24px;text-align:center;}
.inv-nav-item.active .inv-nav-count{background:var(--primary);color:#fff;}
.inv-content{flex:1;padding:20px 24px;overflow-y:auto;min-width:0;}

@media(max-width:768px){
  .inv-layout{flex-direction:column;}
  .inv-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border);padding:4px 0;display:flex;overflow-x:auto;flex-shrink:0;}
  .inv-nav-item{padding:8px 14px;border-left:none;border-bottom:2px solid transparent;white-space:nowrap;}
  .inv-nav-item.active{border-bottom-color:var(--primary);border-left-color:transparent;}
  .inv-content{padding:16px;}
}

/* ═══════════════════════════════════════
   CADASTRO — Tabs + Paginação + Tabela
═══════════════════════════════════════ */
.cad-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:0;padding:0 0 14px;}
.cad-tabs{display:flex;gap:0;margin-bottom:0;}
.cad-tab{padding:8px 18px;font-size:.86rem;font-weight:500;color:var(--text-muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:color var(--dur),border-color var(--dur);}
.cad-tab:hover{color:var(--text);}
.cad-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:700;}
.cad-filter{display:flex;align-items:center;gap:12px;margin-left:auto;}
.cad-filter input{border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;font-size:.82rem;width:220px;outline:none;transition:border-color var(--dur);}
.cad-filter input:focus{border-color:var(--primary);}
.cad-count{font-size:.8rem;color:var(--text-muted);white-space:nowrap;}
.cad-pag{display:flex;align-items:center;gap:4px;}
.cad-pag button{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-sm);width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all var(--dur);}
.cad-pag button:hover:not(:disabled){border-color:var(--primary);color:var(--primary);}
.cad-pag button:disabled{opacity:.3;cursor:not-allowed;}
.cad-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.cad-header .page-title{margin:0;}
.cad-header-actions{display:flex;align-items:center;gap:8px;}
.cad-table-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card);}
.cad-table-wrap .data-table thead th{background:transparent;border-bottom:1px solid var(--border);}
.cad-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 0 0;}

@media(max-width:768px){
  .cad-toolbar{flex-wrap:wrap;}
  .cad-filter{margin-left:0;width:100%;}
  .cad-filter input{flex:1;}
}

/* ═══════════════════════════════════════
   LOCAL DETALHE — Layout (Tabs + Sidebar)
═══════════════════════════════════════ */
.ld-breadcrumb{margin-bottom:6px;}
.ld-breadcrumb a{font-size:.88rem;color:var(--primary);cursor:pointer;text-decoration:none;}
.ld-breadcrumb a:hover{text-decoration:underline;}
.ld-breadcrumb span{color:var(--text-muted);font-size:.88rem;margin:0 4px;}
.ld-title{font-size:1.5rem;font-weight:800;margin-bottom:20px;color:var(--text);}

.ld-wrap{display:flex;gap:0;min-height:calc(100vh - var(--topbar-h) - 40px);}
.ld-main{flex:1;min-width:0;padding-right:24px;}
.ld-sidebar{width:290px;flex-shrink:0;border-left:1px solid var(--border);background:var(--card);border-radius:0 var(--radius) var(--radius) 0;padding:0;overflow-y:auto;max-height:calc(100vh - var(--topbar-h) - 40px);}

.ld-sidebar-head{padding:18px 20px 14px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--border);}
.ld-sidebar-head-title{font-size:.95rem;font-weight:700;color:var(--text);line-height:1.2;}
.ld-sidebar-head-actions{display:flex;gap:6px;flex-shrink:0;}
.ld-btn-desativar{background:#fee2e2;color:#b91c1c;border:none;border-radius:var(--radius-sm);padding:5px 10px;font-size:.72rem;font-weight:600;cursor:pointer;transition:all var(--dur);}
.ld-btn-desativar:hover{background:#fecaca;}
.ld-btn-salvar{background:#dcfce7;color:#15803d;border:none;border-radius:var(--radius-sm);padding:5px 10px;font-size:.72rem;font-weight:600;cursor:pointer;transition:all var(--dur);}
.ld-btn-salvar:hover{background:#bbf7d0;}

.ld-sidebar-body{padding:14px 20px 20px;}
.ld-sidebar-body .form-group{margin-bottom:14px;}
.ld-sidebar-body .form-label{font-size:.78rem;color:var(--text-muted);margin-bottom:4px;display:block;}
.ld-sidebar-body .form-input,.ld-sidebar-body .form-select{font-size:.84rem;padding:8px 10px;width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);}
.ld-sidebar-map{width:100%;height:200px;border-radius:var(--radius-sm);border:1px solid var(--border);margin-top:10px;overflow:hidden;position:relative;z-index:0;}

.ld-historico-link{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--text-mid);cursor:pointer;margin-bottom:18px;text-decoration:none;}
.ld-historico-link:hover{color:var(--primary);}
.ld-historico-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);display:inline-block;}

.ld-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:0;padding:0;}
.ld-tab{padding:10px 18px;font-size:.86rem;font-weight:500;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;}
.ld-tab:hover{color:var(--text);}
.ld-tab.active{color:var(--text);border-bottom-color:var(--text);font-weight:700;}
.ld-tab-body{padding:20px 0 0;}
.ld-tab-panel{display:none;}
.ld-tab-panel.active{display:block;}

.ld-tab-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.ld-tab-header .ld-count{font-size:.82rem;color:var(--text-muted);}

.ld-posto-actions{display:flex;gap:2px;align-items:center;}
.ld-posto-actions button{background:none;border:none;cursor:pointer;padding:4px 6px;color:var(--text-muted);border-radius:var(--radius-sm);transition:color var(--dur),background var(--dur);}
.ld-posto-actions button:hover{color:var(--primary);background:rgba(0,0,0,.04);}

@media(max-width:900px){
  .ld-wrap{flex-direction:column;}
  .ld-main{padding-right:0;}
  .ld-sidebar{width:100%;border-left:none;border-top:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);max-height:none;}
  .ld-tabs{overflow-x:auto;flex-wrap:nowrap;}
  .ld-tab{padding:8px 12px;font-size:.78rem;}
}

/* ═══════════════════════════════════════
   SAÚDE DOS DISPOSITIVOS
═══════════════════════════════════════ */
.sd-resumo{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.sd-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:.72rem;font-weight:700;font-family:'JetBrains Mono',monospace;}
.sd-tag.sd-ok{background:rgba(22,163,74,.1);color:var(--ok);}
.sd-tag.sd-err{background:rgba(190,59,44,.1);color:var(--err);}
.sd-tag.sd-warn{background:rgba(224,122,0,.1);color:var(--warn);}

.sd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.sd-card{border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:var(--card);transition:box-shadow var(--dur),border-color var(--dur);}
.sd-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06);}
.sd-card.sd-online{border-left:3px solid var(--ok);}
.sd-card.sd-offline{border-left:3px solid var(--err);background:rgba(190,59,44,.02);}

.sd-card-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.sd-info{flex:1;min-width:0;}
.sd-nome{font-size:.83rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sd-sub{font-size:.7rem;color:var(--text-muted);margin-top:1px;}

.sd-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.sd-status-dot.sd-online{background:var(--ok);box-shadow:0 0 6px rgba(22,163,74,.5);animation:sdPulse 2s ease-in-out infinite;}
.sd-status-dot.sd-offline{background:var(--err);}
@keyframes sdPulse{0%,100%{box-shadow:0 0 4px rgba(22,163,74,.4);}50%{box-shadow:0 0 10px rgba(22,163,74,.7);}}

.sd-indicators{display:flex;flex-wrap:wrap;gap:5px;}
.sd-ind{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:4px;font-size:.68rem;font-weight:600;font-family:'JetBrains Mono',monospace;}
.sd-ind.ok{background:rgba(22,163,74,.08);color:var(--ok);}
.sd-ind.warn{background:rgba(224,122,0,.08);color:var(--warn);}
.sd-ind.err{background:rgba(190,59,44,.08);color:var(--err);}

.sd-versao{margin-top:6px;font-size:.63rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace;text-align:right;}

@media(max-width:600px){
  .sd-grid{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════
   POSTO — Grade Semanal
═══════════════════════════════════════ */
.pg-grade-wrap{max-height:calc(100vh - 260px);overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);}
.pg-grade{border-collapse:collapse;width:100%;min-width:700px;}
.pg-grade thead{position:sticky;top:0;z-index:2;}
.pg-grade thead th{background:var(--card);border-bottom:2px solid var(--border);padding:8px 6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mid);text-align:center;}
.pg-grade tbody tr{transition:background var(--dur);}
.pg-grade tbody tr:hover{background:rgba(0,0,0,.015);}
.pg-grade tbody tr.pg-hour td{border-top:1.5px solid var(--border);}
.pg-grade .pg-time-col{width:60px;min-width:60px;padding:3px 8px;font-size:.72rem;font-family:'JetBrains Mono',monospace;text-align:right;border-right:1px solid var(--border);position:sticky;left:0;background:var(--card);z-index:1;}
.pg-grade .pg-cell{padding:1px 2px;border-right:1px solid rgba(0,0,0,.04);min-width:80px;height:22px;cursor:pointer;vertical-align:top;transition:background var(--dur);}
.pg-grade .pg-cell:hover{background:var(--primary-light,rgba(22,101,52,.06));}
.pg-grade .pg-cell:last-child{border-right:none;}