/*
 * style.css — Wardon Segurança Empresarial / Sistema Escolta
 * ─────────────────────────────────────────────
 * Extraído do base.html inline (Deploy 2b).
 * Mantém EXATAMENTE os mesmos nomes de variáveis e classes
 * para não quebrar nenhum template existente.
 *
 * Adições novas (Deploy 2b):
 *  - Componentes .toast / .toast-stack (consumidos por toasts.js)
 */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Dark (padrão) - Corporate Security */
  --bg:#070a13;
  --bg2:#0d1220;
  --bg3:#141a2c;
  --bg4:#1c2338;
  --bg-elevated:#111628;
  --border:#1e2744;
  --border2:#2a3558;
  --border-soft:rgba(255,255,255,.04);

  --text:#ecf0f8;
  --text2:#a8b4d0;  /* WCAG AA: 4.5:1 ratio (era #9aa3c0) */
  --text3:#7a86a8;  /* WCAG AA: 3:1 ratio mínimo (era #5e678a) */

  /* Primária: azul institucional */
  --blue:#3b82f6;
  --blue2:#2563eb;
  --blue-light:#60a5fa;
  --blue-bg:rgba(59,130,246,.12);
  --blue-border:rgba(59,130,246,.28);
  --blue-glow:rgba(59,130,246,.35);
  --accent:#2563eb;

  /* Acento: dourado/âmbar premium (segurança) */
  --gold:#f5b841;
  --gold2:#d99a1a;

  --green:#34d399;   /* Dessaturado (era #22c55e) — menos agressivo */
  --green-bg:rgba(52,211,153,.10);
  --green-border:rgba(52,211,153,.30);
  --red:#f87171;     /* Dessaturado (era #ef4444) — menos agressivo */
  --red-bg:rgba(248,113,113,.10);
  --red-border:rgba(248,113,113,.30);
  --amber:#fbbf24;   /* Dessaturado (era #f59e0b) — menos agressivo */
  --amber-bg:rgba(251,191,36,.10);
  --amber-border:rgba(251,191,36,.30);
  --gray:#64748b;
  --silver:#c8d0e0;

  --radius:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --sidebar-w:248px;
  --topbar-h:62px;

  /* Espaçamento — escala de 4px */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --grid-gap:var(--space-4);
  --section-gap:var(--space-8);

  /* Tipografia — escala modular 1.25 */
  --text-xs:11px;
  --text-sm:12.5px;
  --text-base:14px;
  --text-lg:16px;
  --text-xl:18px;
  --text-2xl:22px;
  --text-3xl:28px;
  --text-4xl:36px;
  --font-normal:400;
  --font-medium:500;
  --font-semibold:600;
  --font-bold:700;
  --font-extrabold:800;
  --leading-tight:1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 14px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25);
  --shadow-lg:0 12px 32px rgba(0,0,0,.40),0 2px 6px rgba(0,0,0,.25);
  --shadow-blue:0 0 0 1px rgba(59,130,246,.18),0 8px 24px rgba(59,130,246,.18);
}

html,body{height:100%}
body{
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  display:flex;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
}
body::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(59,130,246,.08),transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%,rgba(245,184,65,.04),transparent 60%);
}

/* OVERLAY para fechar sidebar no mobile */
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:99}
#sidebar-overlay.open{display:block}

/* ================= SIDEBAR ================= */
.sidebar{
  width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;
  position:fixed;top:0;left:0;height:100vh;overflow-y:auto;
  z-index:100;transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

.sidebar-logo{
  padding:20px 18px 18px;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse 120% 100% at 50% 0%,rgba(59,130,246,.14),transparent 70%),
    linear-gradient(180deg,rgba(20,26,44,.6),rgba(13,18,32,.2));
  position:relative;overflow:hidden;
}
.sidebar-logo::after{
  content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.35),transparent);
}
.sidebar-logo .brand{
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  font-size:16px;font-weight:800;letter-spacing:.5px;
  color:#fff;text-transform:uppercase;
  background:none!important;-webkit-text-fill-color:unset!important;
  display:flex;align-items:center;justify-content:center;
}
.sidebar-logo .brand img{
  width:140px;height:auto;max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.sidebar-logo .brand .accent{color:var(--gold)!important;-webkit-text-fill-color:var(--gold)!important}
.sidebar-logo .sub{
  font-size:9.5px;color:var(--silver);margin-top:3px;
  letter-spacing:1.8px;text-transform:uppercase;opacity:.55;font-weight:500;
}
.logo-wrap{
  display:flex;align-items:center;gap:12px;
}
.logo-badge{
  position:relative;flex-shrink:0;
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(245,184,65,.06));
  border:1px solid rgba(96,165,250,.22);
  box-shadow:0 4px 14px rgba(59,130,246,.22),inset 0 1px 0 rgba(255,255,255,.08);
  padding:4px;
}
.logo-badge img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}

.nav-section{
  display:flex;align-items:center;justify-content:space-between;
  width:calc(100% - 20px);margin:12px 10px 4px;
  padding:10px 12px;
  font-size:10.5px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.14em;
  background:none;border:none;cursor:pointer;
  border-radius:var(--radius);font-family:inherit;
  transition:background .15s,color .15s;
  user-select:none;
}
.nav-section:hover{background:var(--bg3);color:var(--text2)}
.nav-section .chevron{
  width:12px;height:12px;flex-shrink:0;opacity:.6;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.nav-group.collapsed .nav-section .chevron{transform:rotate(-90deg)}
.nav-group-items{
  overflow:hidden;
  max-height:1000px;
  transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s;
  opacity:1;
}
.nav-group.collapsed .nav-group-items{
  max-height:0;
  opacity:0;
  pointer-events:none;
}
/* Desabilita animação enquanto o sidebar está "inicializando" (evita flash ao carregar) */
.sidebar.nav-booting .nav-group-items,
.sidebar.nav-booting .nav-section .chevron{transition:none!important}

.nav-item{
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:10px 14px;margin:2px 10px;
  border-radius:var(--radius);
  cursor:pointer;font-size:13.5px;font-weight:500;
  color:var(--text2);text-decoration:none;
  transition:all .18s cubic-bezier(.4,0,.2,1);
}
.nav-item:hover{background:var(--bg3);color:var(--text);transform:translateX(2px)}
.nav-item.active{
  background:var(--blue-bg);
  color:var(--blue-light);
  border:1px solid var(--blue-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 1px 3px rgba(59,130,246,.12);
  font-weight:600;
}
.nav-item.active::before{
  content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--blue-light),var(--blue2));
  box-shadow:0 0 8px var(--blue-glow);
}
.nav-item svg{flex-shrink:0;opacity:.75;transition:opacity .18s}
.nav-item:hover svg,.nav-item.active svg{opacity:1}

.sidebar-footer{margin-top:auto;padding:14px 10px;border-top:1px solid var(--border)}

/* ================= MAIN ================= */
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;position:relative;z-index:1}

/* TOPBAR */
.topbar{
  padding:0 22px;height:var(--topbar-h);
  background:rgba(13,18,32,.75);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;gap:10px;
}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.topbar-left .page-title{
  font-size:16px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.01em;
}
.topbar-left .breadcrumb{
  font-size:11.5px;color:var(--text3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-left .breadcrumb a{color:var(--text2);text-decoration:none;transition:color .15s}
.topbar-left .breadcrumb a:hover{color:var(--blue-light)}
.topbar-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}

/* Identificação do usuário na topbar */
.topbar-user{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text2);font-size:12.5px;font-weight:600;
  max-width:200px;
}
.topbar-user .user-avatar{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  text-transform:uppercase;letter-spacing:.02em;
}
.topbar-user .user-name{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--text);
}

/* HAMBURGUER */
.btn-hamburger{
  display:none;padding:8px;border-radius:var(--radius);
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;align-items:center;transition:all .15s;
}
.btn-hamburger:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}

.content{padding:22px;flex:1;max-width:1600px;width:100%;margin:0 auto;animation:content-enter .3s ease-out}
@keyframes content-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px;border-radius:var(--radius);
  font-size:13px;font-weight:600;cursor:pointer;border:none;
  text-decoration:none;transition:all .15s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;letter-spacing:.01em;
  font-family:inherit;
}
.btn:active{transform:scale(0.97)}
.btn-primary{
  background:linear-gradient(180deg,var(--blue),var(--blue2));
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 4px 12px rgba(37,99,235,.32);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 18px rgba(37,99,235,.42);
  filter:brightness(1.06);
}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{
  background:var(--bg3);color:var(--text2);
  border:1px solid var(--border);
}
.btn-secondary:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.btn-danger:hover{background:rgba(239,68,68,.22)}
.btn-sm{padding:6px 11px;font-size:12px}
.btn-icon{
  padding:7px;border-radius:8px;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;
  display:inline-flex;align-items:center;transition:all .18s;
}
.btn-icon:hover{background:var(--bg4);color:var(--text);border-color:var(--border2);transform:translateY(-1px)}

/* ================= CARDS ================= */
.card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:var(--shadow-md);
  position:relative;
  transition:box-shadow .3s,border-color .3s;
}
.card:hover{
  box-shadow:0 8px 30px rgba(0,0,0,.2);
  border-color:var(--border2);
}
.card-title{
  font-size:16px;font-weight:700;color:var(--text);
  margin-bottom:24px;padding-bottom:18px;
  border-bottom:2px solid var(--border);
  display:flex;align-items:center;gap:12px;
  letter-spacing:-.02em;
}
.card-title::before{
  content:'';width:4px;height:18px;
  background:var(--blue);border-radius:2px;
  flex-shrink:0;
}
.card + .card{margin-top:20px}

/* FORM */
.form-grid{display:grid;gap:18px}
.form-grid-2{grid-template-columns:1fr 1fr}
.form-grid-3{grid-template-columns:1fr 1fr 1fr}
.form-grid-4{grid-template-columns:1fr 1fr 1fr 1fr}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:12.5px;color:var(--text2);font-weight:600;letter-spacing:.01em}
.field input,.field select,.field textarea{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 14px;
  color:var(--text);font-size:14px;font-family:inherit;
  outline:none;transition:all .2s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
  background:var(--bg4);
}
.field select option{background:var(--bg3)}
.field textarea{resize:vertical;min-height:80px}
.field-full{grid-column:1/-1}
.form-section{
  font-size:11px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.09em;
  grid-column:1/-1;padding-top:6px;
}

/* PHOTO UPLOAD */
.photo-area{display:flex;gap:18px;align-items:flex-start;grid-column:1/-1}
.photo-box{
  width:94px;height:94px;flex-shrink:0;
  border:1.5px dashed var(--border2);border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:var(--text3);font-size:11px;cursor:pointer;
  background:var(--bg3);transition:all .18s;
}
.photo-box:hover{border-color:var(--blue);color:var(--blue-light);background:var(--blue-bg)}
.photo-box img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}

/* ================= TABLE ================= */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);position:relative}
/* Scroll shadow indicator on mobile */
.table-wrap::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:24px;
  background:linear-gradient(90deg,transparent,var(--bg-elevated));
  pointer-events:none;opacity:0;transition:opacity .2s;
}
.table-wrap.scroll-right::after{opacity:1}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:500px}
th{
  text-align:left;padding:10px 12px;
  font-size:10.5px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.08em;
  border-bottom:2px solid var(--border);
  white-space:nowrap;
  background:var(--bg-elevated);
  position:sticky;top:0;z-index:2;
}
td{
  padding:9px 12px;font-size:13px;
  border-bottom:1px solid var(--border-soft);
  vertical-align:middle;
  transition:background .15s;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}
/* Subtle zebra striping */
tbody tr:nth-child(even) td{background:rgba(255,255,255,.012)}
tbody tr:hover td{background:rgba(59,130,246,.04)}
tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--blue)}
/* Status-colored left border on active rows */
tbody tr.row-active td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
tbody tr.row-done td:first-child{box-shadow:inset 3px 0 0 var(--green)}
tbody tr.row-cancelled td:first-child{box-shadow:inset 3px 0 0 var(--red)}

/* ================= BADGES ================= */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:700;white-space:nowrap;
  letter-spacing:.02em;
  transition:all .15s;
}
.badge::before{
  content:'';width:5px;height:5px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.06);
  flex-shrink:0;
}
.badge-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.badge-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.badge-amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.badge-gray{background:var(--bg4);color:var(--text2);border:1px solid var(--border)}
.badge-blue{background:var(--blue-bg);color:var(--blue-light);border:1px solid var(--blue-border)}
/* Pulse for active/running statuses */
.badge-active{animation:badge-pulse 2.5s ease-in-out infinite}
@keyframes badge-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}
  50%{box-shadow:0 0 0 3px rgba(59,130,246,.12)}
}

/* ================= STATS ================= */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px}
@media(min-width:1400px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px 30px;
  box-shadow:var(--shadow-md);
  position:relative;overflow:hidden;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
/* KPI accent bar — color-coded per card type */
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  opacity:1;
  transition:opacity .25s;
}
.stat-card:nth-child(1)::before{background:linear-gradient(90deg,#22c55e,#4ade80) !important}  /* Agentes — verde */
.stat-card:nth-child(2)::before{background:linear-gradient(90deg,#3b82f6,#60a5fa) !important}  /* Viaturas — azul */
.stat-card:nth-child(3)::before{background:linear-gradient(90deg,#f59e0b,#fbbf24) !important}  /* Clientes — âmbar */
.stat-card:nth-child(4)::before{background:linear-gradient(90deg,#ef4444,#f87171) !important}  /* Armamentos — vermelho */

/* KPI colored left border — always visible */
.stat-card:nth-child(1){border-left:3px solid #22c55e !important}
.stat-card:nth-child(2){border-left:3px solid #3b82f6 !important}
.stat-card:nth-child(3){border-left:3px solid #f59e0b !important}
.stat-card:nth-child(4){border-left:3px solid #ef4444 !important}
.stat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  border-color:var(--blue-border);
}
.stat-card:nth-child(1):hover{border-color:#22c55e !important;background:rgba(34,197,94,.06) !important}
.stat-card:nth-child(2):hover{border-color:#3b82f6 !important;background:rgba(59,130,246,.06) !important}
.stat-card:nth-child(3):hover{border-color:#f59e0b !important;background:rgba(245,158,11,.06) !important}
.stat-card:nth-child(4):hover{border-color:#ef4444 !important;background:rgba(239,68,68,.06) !important}
.stat-card:hover::before{opacity:1}
.stat-label{
  font-size:11px;color:var(--text3);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
}
.stat-value{
  font-family:'JetBrains Mono',monospace;
  font-size:36px;font-weight:800;
  color:var(--text);margin-top:10px;
  line-height:1;letter-spacing:-.04em;
  font-feature-settings:"tnum";
}
.stat-sub{font-size:13px;color:var(--text3);margin-top:10px}
.stat-sub a{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--text3);text-decoration:none;
  transition:color .2s;
}
.stat-sub a:hover{color:var(--blue)}
/* Stat icon subtle glow on hover */
.stat-ico{
  color:var(--text3);transition:color .2s;
}
.stat-card:nth-child(1):hover .stat-ico{color:#34d399}
.stat-card:nth-child(2):hover .stat-ico{color:#3b82f6}
.stat-card:nth-child(3):hover .stat-ico{color:#f59e0b}
.stat-card:nth-child(4):hover .stat-ico{color:#ef4444}

/* SEARCH BAR */
.search-bar{display:flex;gap:12px;margin-bottom:20px;align-items:center;flex-wrap:wrap}
.search-bar form{display:flex;gap:10px;flex:1;min-width:0}
.search-bar input{
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 16px;
  color:var(--text);font-size:14px;outline:none;flex:1;min-width:0;
  transition:all .2s;box-shadow:var(--shadow-sm);
}
.search-bar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}

/* MESSAGES (fallback inline para quando JS está desligado) */
.messages{margin-bottom:18px}
.msg{
  padding:12px 16px;border-radius:var(--radius);
  font-size:13px;margin-bottom:8px;font-weight:500;
  display:flex;align-items:center;gap:10px;
  box-shadow:var(--shadow-sm);
}
.msg-success{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.msg-error{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}

.delete-box{max-width:480px;margin:40px auto}

/* Monospace em CPF, placas, etc */
.font-mono,code,kbd{font-family:'JetBrains Mono','Fira Code',monospace;font-size:.92em}

/* ================= TOASTS (Deploy 2b) ================= */
.toast-stack{
  position:fixed;top:16px;right:16px;z-index:9999;
  display:flex;flex-direction:column;gap:10px;
  max-width:360px;pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  min-width:260px;
  opacity:1;transform:translateX(0);
  transition:opacity .22s ease,transform .22s ease;
  font-size:13px;line-height:1.4;
}
.toast[data-type="success"]{border-left:3px solid var(--green)}
.toast[data-type="error"]{border-left:3px solid var(--red)}
.toast[data-type="warning"]{border-left:3px solid var(--amber)}
.toast[data-type="info"]{border-left:3px solid var(--blue)}
.toast-icon{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}
.toast[data-type="success"] .toast-icon{background:var(--green-bg);color:var(--green)}
.toast[data-type="error"]   .toast-icon{background:var(--red-bg);color:var(--red)}
.toast[data-type="warning"] .toast-icon{background:var(--amber-bg);color:var(--amber)}
.toast[data-type="info"]    .toast-icon{background:var(--blue-bg);color:var(--blue-light)}
.toast-body{flex:1;min-width:0}
.toast-title{font-weight:600;color:var(--text);word-wrap:break-word}
.toast-desc{font-size:12px;color:var(--text2);margin-top:2px}
.toast-close{
  flex-shrink:0;background:none;border:none;color:var(--text3);
  cursor:pointer;padding:2px;border-radius:4px;
  display:inline-flex;align-items:center;transition:color .15s,background .15s;
}
.toast-close:hover{color:var(--text);background:var(--bg3)}

/* ================= LIGHT THEME ================= */
.light-theme{
  --bg:#f5f7fb;
  --bg2:#ffffff;
  --bg3:#f1f4fa;
  --bg4:#e6ebf5;
  --bg-elevated:#ffffff;
  --border:#e3e8f1;
  --border2:#cfd6e4;
  --border-soft:rgba(15,23,42,.05);

  --text:#0f172a;
  --text2:#475569;   /* WCAG AA: 7:1 ratio no light */
  --text3:#64748b;   /* WCAG AA: 5:1 ratio no light (era #7c879f) */

  --blue:#2563eb;
  --blue2:#1d4ed8;
  --blue-light:#2563eb;
  --blue-bg:rgba(37,99,235,.09);
  --blue-border:rgba(37,99,235,.25);
  --blue-glow:rgba(37,99,235,.30);
  --accent:#1d4ed8;

  --green:#059669;   /* Light theme — já dessaturado */
  --green-bg:rgba(16,185,129,.12);
  --green-border:rgba(16,185,129,.35);
  --red:#dc2626;     /* Light theme — já adequado */
  --red-bg:rgba(239,68,68,.10);
  --red-border:rgba(239,68,68,.30);
  --amber:#d97706;   /* Light theme — já adequado */
  --amber-bg:rgba(245,158,11,.14);
  --amber-border:rgba(245,158,11,.35);

  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 14px rgba(15,23,42,.08),0 1px 3px rgba(15,23,42,.04);
  --shadow-lg:0 20px 40px rgba(15,23,42,.10),0 4px 12px rgba(15,23,42,.06);
}
.light-theme body::before{
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%,rgba(37,99,235,.05),transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%,rgba(245,184,65,.04),transparent 60%);
}
.light-theme .sidebar{background:linear-gradient(180deg,#ffffff 0%,#fafbfe 100%);border-right:1px solid var(--border)}
.light-theme .sidebar-logo{
  background:
    radial-gradient(ellipse 120% 100% at 50% 0%,rgba(37,99,235,.08),transparent 70%),
    linear-gradient(180deg,#1a2340 0%,#0f1730 100%);
  border-bottom:1px solid var(--border);
}
.light-theme .sidebar-logo .brand{color:#fff!important;-webkit-text-fill-color:#fff!important}
.light-theme .sidebar-logo .sub{color:rgba(255,255,255,.6)}
.light-theme .logo-badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.light-theme .topbar{background:rgba(255,255,255,.80);border-bottom:1px solid var(--border)}
.light-theme .nav-item.active{box-shadow:0 1px 2px rgba(37,99,235,.12)}
.light-theme tbody tr:hover td{background:#f0f4fc}
.light-theme tbody tr:nth-child(even) td{background:rgba(0,0,0,.012)}
.light-theme th{background:#fafbfe;color:#64748b}
.light-theme .stat-card{background:#ffffff}
.light-theme .card{background:#ffffff}
.light-theme .search-bar input,.light-theme .field input,.light-theme .field select,.light-theme .field textarea{background:#fff}
.light-theme .btn-secondary{background:#ffffff}
.light-theme .btn-secondary:hover{background:#f5f7fb}
.light-theme .btn-icon{background:#ffffff}
.light-theme .btn-icon:hover{background:#f5f7fb}
.light-theme #sidebar-overlay{background:rgba(15,23,42,.4)}
.light-theme .toast{background:#fff}
.light-theme .topbar-user{background:#fff}
.light-theme .active-filter{background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.2);color:#475569}
.light-theme .active-filter strong{color:#0f172a}
.light-theme .active-filter-clear:hover{background:rgba(0,0,0,.04)}
.light-theme .kpi-tabs{background:#f1f4fa;border-color:#e3e8f1}
.light-theme tbody tr:hover td{background:#f8fafd}
.light-theme .badge{animation:none}
.light-theme .badge-green{background:rgba(16,185,129,.12);color:#059669;border-color:rgba(16,185,129,.3)}
.light-theme .badge-blue{background:rgba(37,99,235,.08);color:#2563eb;border-color:rgba(37,99,235,.22)}
/* Light theme — date inputs */
.light-theme .form-inline input[type="date"]{
  background:#fff;border:1px solid #d1d5db;color:#1e293b;
}
.light-theme .form-inline input[type="date"]:focus{
  border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.light-theme .form-inline .btn-sm-narrow{
  background:#3b82f6;color:#fff;border:none;
}
.light-theme .form-inline .btn-sm-narrow:hover{
  background:#2563eb;
}
/* Light theme — KPI hover tints */
.light-theme .stat-card:nth-child(1):hover{background:#f0fdf4 !important;border-color:#22c55e !important}
.light-theme .stat-card:nth-child(2):hover{background:#eff6ff !important;border-color:#3b82f6 !important}
.light-theme .stat-card:nth-child(3):hover{background:#fffbeb !important;border-color:#f59e0b !important}
.light-theme .stat-card:nth-child(4):hover{background:#fef2f2 !important;border-color:#ef4444 !important}

/* ============================================================
   MELHORIAS DE HIERARQUIA VISUAL
   Section titles, depth, stat-card enhancements
   ============================================================ */

/* === Section titles com accent bar === */
.section-title{
  font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text);
  letter-spacing:-0.02em;margin-bottom:var(--space-5);
  display:flex;align-items:center;gap:10px;
  line-height:var(--leading-tight);
}
.section-title::before{
  content:'';width:4px;height:20px;
  background:var(--blue);border-radius:2px;
  flex-shrink:0;
}
.section-subtitle{
  font-size:var(--text-sm);color:var(--text3);font-weight:var(--font-normal);margin-top:var(--space-1);
}

/* === Heading typography — escala modular 1.25 === */
h1,.h1{font-size:var(--text-2xl);font-weight:var(--font-extrabold);line-height:var(--leading-tight);letter-spacing:-.02em}
h2,.h2{font-size:var(--text-xl);font-weight:var(--font-bold);line-height:var(--leading-tight);letter-spacing:-.01em}
h3,.h3{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight)}

/* === Monospace utilitário === */
.mono,.font-mono{font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace;font-size:.92em;font-weight:var(--font-medium);letter-spacing:-.02em}
.plate,.code,.id-field{font-family:'JetBrains Mono',monospace;font-size:var(--text-sm);background:var(--bg3);padding:2px 6px;border-radius:4px;border:1px solid var(--border)}

/* === Dashboard section separation === */
.dashboard-section{
  margin-bottom:28px;position:relative;
}
.dashboard-section::after{
  content:'';position:absolute;bottom:-14px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--border),transparent);
}

/* === Stat-card enhanced hover === */
.stat-card{
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.stat-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:var(--border2);
}
/* Highlight indicator on top — always visible */
.stat-card::before{
  opacity:1;
  transition:opacity .2s;
}
.stat-card:hover::before{
  opacity:1;
}

/* === Card title spacing === */
.card-title{
  margin-bottom:18px;padding-bottom:14px;
}

/* === Print styles === */
@media print{
  .sidebar,.topbar,.btn-hamburger,.toast-stack{display:none!important}
  .main{margin-left:0!important}
  .content{padding:0!important}
  .stat-card,.card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}
  body{background:white;color:black}
}

/* ===== RESPONSIVO MOBILE ===== */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  .btn-hamburger{display:inline-flex}
  .topbar{padding:0 14px}
  .topbar-left .breadcrumb{display:none}
  .topbar-user{max-width:120px}
  .topbar-user .user-name{max-width:70px}
  .content{padding:12px}
  .form-grid-2,.form-grid-3,.form-grid-4{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .stat-value{font-size:22px}
  .card{padding:12px}
  .btn{padding:8px 12px;font-size:12px}
  .btn svg{width:12px;height:12px}
  .search-bar{flex-direction:column;align-items:stretch}
  .search-bar form{width:100%}
  .toast-stack{top:8px;right:8px;left:8px;max-width:none}
  /* Botões de ação em tabelas — não quebrar linha */
  .table-wrap{border-radius:var(--radius-lg);-webkit-overflow-scrolling:touch}
  .btn-icon{min-width:30px;min-height:30px}
  /* Topbar: esconder breadcrumb, só mostrar título */
  .topbar-left{gap:8px}
  .page-title{font-size:14px}
  /* Formulários: labels e campos cheios */
  .form-group{margin-bottom:12px}
  label{font-size:12px}
  input,select,textarea{font-size:14px}  /* 14px evita zoom automático no iOS */
  /* Detail cards lado a lado -> empilhados */
  .detail-grid,.info-grid{grid-template-columns:1fr !important}
  /* Seções de detalhe da OS */
  .os-header-info{flex-direction:column;gap:8px}
  /* Ações do topo de página (botões Novo, Exportar etc) */
  .page-actions{flex-wrap:wrap;gap:8px}
  .page-actions .btn{flex:1;justify-content:center;min-width:120px}
}

@media(max-width:480px){
  /* Ocultar colunas menos importantes nas tabelas */
  .hide-mobile{display:none !important}
  .stats-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:400px){
  .stats-grid{grid-template-columns:1fr}
  .topbar-left .page-title{font-size:13px}
  .topbar-user{display:none}
}

/* ============================================================
   MOBILE TABLE CARDS
   Alternativa visual para tabelas em telas <640px
   ============================================================ */
.mobile-cards{display:none}
@media(max-width:640px){
  .table-wrap{display:none}
  .mobile-cards{
    display:flex;flex-direction:column;gap:var(--space-3);
  }
  .mobile-card{
    background:var(--bg2);border:1px solid var(--border);
    border-radius:var(--radius);padding:var(--space-4);
  }
  .mobile-card-header{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:var(--space-3);
  }
  .mobile-card-body{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);
  }
  .mobile-card-field{
    display:flex;flex-direction:column;gap:2px;
  }
  .mobile-card-label{
    font-size:var(--text-xs);color:var(--text3);
    text-transform:uppercase;letter-spacing:.05em;
  }
  .mobile-card-value{
    font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text);
  }
}

/* ============================================================
   SIDEBAR COLAPSÁVEL
   Collapsed: 64px, só ícones, sem scrollbar
   Hover: expande como overlay sobre o conteúdo (main não move)
   ============================================================ */
:root { --sidebar-collapsed-w: 64px; }

/* Transições */
.sidebar { transition: width .25s cubic-bezier(.4,0,.2,1), box-shadow .25s; }
.main     { transition: margin-left .25s cubic-bezier(.4,0,.2,1); }

/* Botão toggle — aparece ao passar o mouse na sidebar */
.sidebar-collapse-btn {
  position: absolute; top: 14px; right: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 200; color: var(--text3);
  opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.sidebar:hover .sidebar-collapse-btn,
.sidebar.collapsed .sidebar-collapse-btn { opacity: 1; }
.sidebar-collapse-btn:hover { background: var(--blue-bg); color: var(--blue-light); border-color: var(--blue-border); }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
.sidebar-collapse-btn svg { transition: transform .25s; }

/* ── COLAPSADO ── */
.sidebar.collapsed {
  width: var(--sidebar-collapsed-w);
  overflow: hidden;           /* REMOVE scrollbar */
}
.sidebar.collapsed ~ .main {
  margin-left: var(--sidebar-collapsed-w);
}

/* ── HOVER sobre sidebar colapsada: expande como OVERLAY ── */
.sidebar.collapsed:hover {
  width: var(--sidebar-w);
  overflow-y: auto;
  box-shadow: 6px 0 28px rgba(0,0,0,.35);
  z-index: 200;
}

/* ── Collapsed + sem hover: esconde conteúdo ── */

/* Logo: reduz imagem */
.sidebar.collapsed:not(:hover) .sidebar-logo .brand img { width: 36px; }
.sidebar.collapsed:not(:hover) .sidebar-logo .sub { display: none; }

/* Grupo header: font-size:0 esconde text nodes, centraliza ícone */
.sidebar.collapsed:not(:hover) .nav-group-toggle {
  font-size: 0 !important;
  justify-content: center;
  gap: 0;
  padding: 10px 0;
}
.sidebar.collapsed:not(:hover) .nav-group-toggle svg.lead {
  width: 18px !important; height: 18px !important;
  opacity: .8;
}
.sidebar.collapsed:not(:hover) .nav-group-toggle .chev { display: none; }

/* Sub-itens: ocultos quando colapsado */
.sidebar.collapsed:not(:hover) .nav-sub { display: none !important; }

/* Footer Sair */
.sidebar.collapsed:not(:hover) .sidebar-footer .nav-item {
  font-size: 0 !important;
  justify-content: center; gap: 0; padding: 10px 0; margin: 2px 8px;
}
.sidebar.collapsed:not(:hover) .sidebar-footer .nav-item svg {
  width: 16px !important; height: 16px !important;
}

/* ============================================================
   ACESSIBILIDADE — WCAG 2.1 AA
   Focus indicators, touch targets, skip-link, reduced motion
   ============================================================ */

/* === Focus indicators (keyboard navigation) === */
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:var(--radius);
}
/* Enhanced focus for interactive elements */
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(59,130,246,.20);
}
/* Focus for clickable cards */
.card[role="button"]:focus-visible,
.stat-card:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}
/* Focus for navigation items */
.nav-item:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

/* === Touch targets (WCAG 2.5.5 — minimum 44px) === */
@media(pointer:coarse){
  .btn{
    min-height:44px;min-width:44px;
  }
  .btn-sm{
    min-height:38px;min-width:38px;
  }
  .btn-icon{
    width:44px;height:44px;
  }
  .nav-item{
    min-height:44px;padding:10px 12px;
  }
  /* Table action links */
  td a{
    display:inline-flex;min-height:44px;align-items:center;
  }
}

/* === Skip to content link === */
.skip-link{
  position:absolute;top:-100%;left:16px;z-index:9999;
  padding:12px 24px;
  background:var(--blue);color:#fff;
  font-weight:600;border-radius:var(--radius);
  text-decoration:none;transition:top .2s;
}
.skip-link:focus{
  top:16px;
}

/* === Reduced motion (prefers-reduced-motion) === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
  .stat-card:hover{
    transform:none;
  }
  .sidebar{transition:none!important}
  .main{transition:none!important}
  .content{animation:none!important}
  .active-filter{animation:none!important}
  .badge-active{animation:none!important}
}

/* === High contrast mode (forced-colors) === */
@media(forced-colors:active){
  .stat-card{
    border:2px solid ButtonText;
  }
  .badge{
    border:1px solid ButtonText;
  }
  .btn{
    border:1px solid ButtonText;
  }
  .card{
    border:1px solid ButtonText;
  }
}

/* ============================================================
   MELHORIAS UI/UX — Prioridade Média
   Espaçamento + Tipografia + Grid responsivo
   ============================================================ */

/* === MELHORIA 3.1: Escala de espaçamento (múltiplos de 4px) === */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --grid-gap: var(--space-4);
  --section-gap: var(--space-8);
}

/* === MELHORIA 4.1: Escala tipográfica (modular 1.25) === */
:root {
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
}

/* === MELHORIA 4.2: Aplicação tipográfica consistente === */
body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--font-normal);
}

h1, .h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

/* === MELHORIA 4.3: Monospace mais utilizável === */
.mono, .font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.92em;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* KPI values com monospace */
.stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
}

/* Códigos, IDs, placas */
.code, .id-field, .plate {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-sm);
  background: var(--bg3);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* === MELHORIA 3.2: KPI Grid responsivo === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gap);
  margin-bottom: var(--section-gap);
}

@media (min-width: 1400px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* === MELHORIA 3.3: Padding consistente === */
.card { padding: var(--space-5); }
.card-title { margin-bottom: var(--space-4); padding-bottom: var(--space-3); }
.stat-card { padding: var(--space-5) var(--space-6); }

/* === MELHORIA 3.4: Alinhamento vertical === */
.stat-value { margin-top: var(--space-2); }
.stat-label {
  font-size: 12px; color: var(--text3); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.stat-change {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 12px; font-weight: 600; margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: 999px;
}
.stat-change.positive { color: var(--green); background: var(--green-bg); }
.stat-change.negative { color: var(--red); background: var(--red-bg); }

/* ============================================================
   MELHORIAS UI/UX — Prioridade Baixa
   Micro-interações + Skeleton Loading + Print
   ============================================================ */

/* === Micro-interações: Botões com feedback tátil === */
.btn{
  transition:all .15s cubic-bezier(.4,0,.2,1);
}
.btn:active{
  transform:scale(0.98);
}

/* === Micro-interações: Badges com animação de entrada === */
.badge{
  animation:badge-enter .2s ease-out;
}
@keyframes badge-enter{
  from{opacity:0;transform:scale(0.8)}
  to{opacity:1;transform:scale(1)}
}

/* === Skeleton Loading === */
.skeleton{
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);
  background-size:200% 100%;
  animation:skeleton-loading 1.5s infinite;
  border-radius:var(--radius);
}
@keyframes skeleton-loading{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.skeleton-text{height:14px;margin-bottom:8px}
.skeleton-title{height:20px;width:60%;margin-bottom:16px}
.skeleton-value{height:32px;width:40%}

/* === Print Styles (estilo para impressão) === */
@media print{
  .sidebar,.topbar,.btn-hamburger,.toast-stack{display:none!important}
  .main{margin-left:0!important}
  .content{padding:0!important}
  .stat-card,.card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}
  .badge{animation:none}
  body{background:white;color:black}
  a{text-decoration:underline;color:#000}
  .btn{display:none!important}
}

/* ============================================================
   UTILITY CLASSES — Substituem estilos inline nos templates
   ============================================================ */

/* === Layout === */
.u-relative{position:relative}
.u-absolute{position:absolute}
.u-fixed{position:fixed}
.u-inset-0{inset:0}

/* === Flexbox === */
.u-flex{display:flex}
.u-flex-col{display:flex;flex-direction:column}
.u-flex-wrap{flex-wrap:wrap}
.u-flex-1{flex:1}
.u-items-center{align-items:center}
.u-justify-between{justify-content:space-between}
.u-justify-center{justify-content:center}
.u-gap-1{gap:4px}
.u-gap-2{gap:8px}
.u-gap-3{gap:12px}
.u-gap-4{gap:16px}

/* === Grid === */
.u-grid{display:grid}
.u-grid-2{grid-template-columns:1fr 1fr}
.u-grid-3{grid-template-columns:1fr 1fr 1fr}

/* === Text === */
.u-text-center{text-align:center}
.u-text-right{text-align:right}
.u-text-muted{color:var(--text3)}
.u-text-red{color:var(--red)}
.u-text-green{color:var(--green)}
.u-text-blue{color:var(--blue-light)}
.u-text-cyan{color:#06b6d4}
.u-text-purple{color:#a78bfa}
.u-text-whatsapp{color:#25D366}
.u-text-xs{font-size:11px}
.u-text-sm{font-size:12px}
.u-text-base{font-size:13px}
.u-text-lg{font-size:14px}
.u-font-bold{font-weight:700}
.u-font-semibold{font-weight:600}
.u-uppercase{text-transform:uppercase}
.u-tracking-wide{letter-spacing:.06em}

/* === Spacing === */
.u-p-0{padding:0}
.u-p-1{padding:4px}
.u-p-2{padding:8px}
.u-p-3{padding:12px}
.u-p-4{padding:16px}
.u-p-5{padding:20px}
.u-px-3{padding-left:12px;padding-right:12px}
.u-px-4{padding-left:16px;padding-right:16px}
.u-py-2{padding-top:8px;padding-bottom:8px}
.u-pt-0{padding-top:0}
.u-pt-4{padding-top:16px}
.u-pt-5{padding-top:20px}
.u-mb-0{margin-bottom:0}
.u-mb-1{margin-bottom:4px}
.u-mb-2{margin-bottom:8px}
.u-mb-3{margin-bottom:12px}
.u-mb-4{margin-bottom:16px}
.u-mt-2{margin-top:8px}
.u-mt-3{margin-top:12px}
.u-mt-4{margin-top:16px}

/* === Borders === */
.u-border{border:1px solid var(--border)}
.u-border-b{border-bottom:1px solid var(--border)}
.u-border-t{border-top:1px solid var(--border)}
.u-rounded{border-radius:var(--radius)}
.u-rounded-lg{border-radius:var(--radius-lg)}
.u-rounded-full{border-radius:999px}

/* === Display === */
.u-hidden{display:none}
.u-block{display:block}
.u-inline-block{display:inline-block}
.u-w-full{width:100%}

/* === Overflow === */
.u-overflow-auto{overflow:auto}
.u-overflow-hidden{overflow:hidden}

/* === Heights === */
.u-h-240{height:240px}
.u-h-260{min-height:260px}
.u-h-38{height:38px}
.u-h-34{height:34px}

/* === Shadows === */
.u-shadow-lg{box-shadow:var(--shadow-lg)}

/* === Button variants === */
.btn-cyan{color:#06b6d4;border-color:#06b6d4}
.btn-purple{color:#a78bfa;border-color:#a78bfa}
.btn-whatsapp{color:#25D366;border-color:#25D366}
.btn-sm-narrow{padding:6px 14px}

/* === Card variants === */
.card-compact{padding:16px}
.card-center{text-align:center}

/* === Modal === */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.75);z-index:9999;
  align-items:flex-start;justify-content:center;
  padding-top:30px;overflow-y:auto;
}
.modal-overlay.open{display:flex}
.modal-content{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.6);
  overflow:hidden;
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
  background:var(--bg3);
}
.modal-body{padding:20px}
.modal-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-top:1px solid var(--border);
  background:var(--bg3);
}

/* === Empty state === */
.empty-state{
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);font-size:13px;
}

/* === Chart container === */
.chart-container{position:relative;height:240px}

/* === Form inline === */
.form-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* === Muted text in tables === */
.td-muted{color:var(--text3)}

/* ================================================================
   DASHBOARD — Melhorias UI/UX
   ================================================================ */

/* === Date inputs dark theme === */
.form-inline input[type="date"]{
  background:var(--bg3);border:1px solid var(--border);border-radius:8px;
  padding:7px 12px;color:var(--text);font-size:13px;
  font-family:'JetBrains Mono',monospace;
  outline:none;transition:all .2s;
  min-width:140px;
}
.form-inline input[type="date"]:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.form-inline input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(.6);cursor:pointer;
}

/* === Table rows hover — alert tables === */
.grid-alerts table tbody tr{
  transition:background .15s;
}
.grid-alerts table tbody tr:hover{
  background:var(--bg3);
}
.grid-alerts table tbody tr:hover .badge{
  filter:brightness(1.1);
}

/* === Table rows hover — recent tables === */
.grid-2 table tbody tr{
  transition:background .15s;
}
.grid-2 table tbody tr:hover{
  background:var(--bg3);
}

/* === Chart cards — subtle inner padding === */
.grid-2 .card{
  padding:22px 24px;
}

/* === KPI link arrow animation === */
.stat-sub a svg{
  transition:transform .2s;
}
.stat-sub a:hover svg{
  transform:translateX(3px);
}

/* === Section heading — match amber accent === */
.section-head .section-ico{
  transition:transform .2s;
}
.section-head:hover .section-ico{
  transform:scale(1.08);
}

/* === Alert count badge polish === */
.alert-count{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:6px;padding:2px 8px;
  min-width:22px;text-align:center;
}

/* === Form button filter — match dark theme === */
.form-inline .btn-sm-narrow{
  background:var(--blue);color:#fff;border:none;
  padding:7px 16px;border-radius:8px;font-size:12px;font-weight:600;
  transition:all .2s;cursor:pointer;
}
.form-inline .btn-sm-narrow:hover{
  background:var(--blue2);box-shadow:0 2px 8px rgba(59,130,246,.3);
}

/* ================================================================
   OS DETALHE — Utility classes for inline style removal
   ================================================================ */

/* Banner cancelada */
.banner-cancelada{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);color:var(--red)}

/* Grid with margin-bottom */
.g-mb-10{margin-bottom:10px}
.g-mb-0{margin-bottom:0}

/* Status display box */
.status-display{
  padding:8px 12px;background:var(--input-bg);border:1px solid var(--border);
  border-radius:6px;font-weight:600;color:var(--text)
}
.status-hint{
  display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:2px
}

/* Link create team wrapper */
.u-pt-20{padding-top:20px}

/* Equipe preview grid */
.ep-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ep-divider{display:flex;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.ep-item-flex{flex:1}

/* Font sizes */
.u-text-xs{font-size:11px}
.u-text-sm-13{font-size:13px}
.u-text-orange{color:#f97316}

/* Form section spacing */
.form-section{margin-top:10px}

/* Card section spacing */
.section-mb{margin-bottom:16px}
.section-mb-sm{margin-bottom:10px}

/* Card header flex */
.card-header-row{display:flex;align-items:center;justify-content:space-between}
.card-header-label{display:flex;align-items:center;gap:8px}

/* Button small */
.btn-xs{font-size:11px;padding:5px 12px}

/* Overflow wrapper */
.overflow-x{overflow-x:auto}

/* Op table */
.op-table{width:100%;border-collapse:collapse;font-size:12px}

/* Op table headers */
.op-th{
  text-align:left;padding:10px 12px;color:var(--text3);font-weight:700;
  font-size:11px;text-transform:uppercase;letter-spacing:.06em
}
.op-th-c{padding:10px 12px;color:var(--text3);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;text-align:center}
.op-th-w180{width:180px}
.op-th-w90{width:90px}
.op-th-w110{width:110px}
.op-th-w60{width:60px}

/* Op table cells */
.op-td{padding:10px 12px;color:var(--text);font-weight:600;border-bottom:1px solid var(--border)}
.op-td-c{padding:10px 12px;text-align:center;border-bottom:1px solid var(--border);color:var(--text3);font-weight:600}
.op-td-c2{padding:10px 12px;text-align:center;border-bottom:1px solid var(--border);color:var(--text2);font-weight:600}
.op-td-d{padding:10px 12px;text-align:center;border-bottom:1px solid var(--border);color:var(--text3)}
.op-td-d2{padding:10px 12px;text-align:center;border-bottom:1px solid var(--border);color:var(--text2);font-weight:600}
.op-td-in{padding:6px 12px;border-bottom:1px solid var(--border)}
.op-td-last{padding:10px 12px;text-align:center;border-bottom:1px solid var(--border)}
.op-td-no-border{padding:10px 12px;text-align:center}

/* Op row border-left variants */
.op-row-blue{border-left:3px solid var(--blue);background:rgba(59,130,246,.03)}
.op-row-amber{border-left:3px solid #f59e0b;background:rgba(245,158,11,.03)}
.op-row-orange{border-left:3px solid #f97316;background:rgba(249,115,22,.03)}
.op-row-purple{border-left:3px solid #a855f7;background:rgba(168,85,247,.03)}
.op-row-green{border-left:3px solid var(--green);background:rgba(34,197,94,.03)}

/* Op input fields */
.op-input-dt{
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  padding:6px 10px;color:var(--text);font-size:12px;font-family:inherit;
  outline:none;width:200px;min-height:36px
}
.op-input-km{
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  padding:6px 10px;color:var(--text);font-size:12px;font-family:inherit;
  outline:none;width:90px;text-align:center;min-height:36px
}
.op-input-text{
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  padding:5px 8px;color:var(--text);font-size:12px;font-family:inherit;
  outline:none;width:100%;min-width:100px
}
.op-input-text-w120{min-width:120px}
.op-input-pedagio{
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  padding:8px 12px;color:var(--text);font-size:16px;font-weight:700;
  font-family:inherit;outline:none;width:120px;text-align:right;min-height:40px
}

/* Op field wrapper */
.op-field-max160{max-width:160px}

/* GPS link */
.gps-link{color:#10b981;font-size:18px;text-decoration:none}

/* Dash */
.dash{color:var(--text3)}

/* Totalizer section */
.total-section{
  display:flex;flex-wrap:wrap;gap:24px;margin-top:16px;padding-top:16px;
  border-top:2px solid var(--border)
}
.total-group{display:flex;flex-direction:column;gap:6px}
.total-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.total-values{display:flex;gap:16px}
.total-item{font-size:12px;color:var(--text3)}
.total-value{color:var(--text);font-size:16px}
.total-value-blue{color:var(--blue-light);font-size:16px}
.total-divider{width:1px;background:var(--border);margin:0 4px}
.total-pedagio-label{font-size:13px;color:var(--text3)}
.total-pedagio-group{display:flex;align-items:center;gap:8px}

/* Mini table headers (veículos escoltados) */
.mini-th{
  text-align:left;padding:7px 8px;color:var(--text3);font-weight:600;
  font-size:10px;text-transform:uppercase;letter-spacing:.06em
}
.mini-th-c{padding:7px 6px;color:var(--text3);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.06em;text-align:center;width:30px}
.mini-tr{border-bottom:1px solid var(--border)}
.mini-td{padding:6px;text-align:center;color:var(--text3);font-size:11px;font-weight:700}
.mini-td-in{padding:4px 6px}

/* Card header subtitle */
.card-header-sub{margin-left:auto;font-size:10px;color:var(--text3);font-weight:400;text-transform:none;letter-spacing:0}

/* Photo grid */
.photo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.photo-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.photo-label{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;text-align:center}
.photo-img{
  width:100%;height:140px;object-fit:contain;border-radius:8px;
  border:1px solid var(--border);background:#f0f2f8;cursor:zoom-in;
  transition:opacity .15s
}
.photo-img:hover{opacity:.85}
.photo-placeholder{
  width:100%;height:140px;border-radius:8px;border:1px dashed var(--border);
  display:flex;align-items:center;justify-content:center;font-size:11px;
  color:var(--text3)
}

/* Photo card (veículo fotos) */
.photo-card{border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--bg3)}
.photo-card-img{
  width:100%;height:120px;object-fit:contain;display:block;
  background:#f0f2f8;cursor:zoom-in;transition:opacity .15s
}
.photo-card-img:hover{opacity:.85}
.photo-card-caption{padding:4px 8px;font-size:10px;color:var(--text3)}

/* Photo grid responsive */
.photo-grid-fill{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}

/* Signature card */
.sig-card{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg3)}
.sig-card-header{
  padding:6px 10px;font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);
  background:var(--bg4)
}
.sig-card-img{background:#fff;padding:8px;text-align:center}
.sig-card-img img{max-height:80px;max-width:100%;object-fit:contain}
.sig-card-footer{padding:6px 10px;font-size:11px;color:var(--text2);border-top:1px solid var(--border)}
.sig-card-date{font-size:10px;color:var(--text3)}
.sig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}

/* Troca motorista */
.troca-card{
  border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--bg3)
}
.troca-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.troca-name{font-size:13px;font-weight:600;color:var(--text)}
.troca-meta{font-size:11px;color:var(--text3);margin-top:2px}
.troca-link{font-size:11px;color:#4d8df0;text-decoration:none;white-space:nowrap}
.troca-photos{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.troca-photo{width:70px;height:70px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}

/* SSX select */
.ssx-select{
  margin-left:8px;background:var(--bg3);border:1px solid var(--border);
  border-radius:6px;padding:3px 8px;color:var(--text);font-size:11px;cursor:pointer
}
.ssx-fixed{margin-left:8px;font-size:11px;color:var(--text3);font-weight:600}
.ssx-subtitle{margin-left:auto;font-size:10px;color:var(--text3);font-weight:400;text-transform:none;letter-spacing:0}

/* Readonly field */
.input-readonly{
  background:var(--bg4,#eef2f7);cursor:not-allowed;color:var(--text2)
}

/* Save button right-aligned */
.u-justify-end{justify-content:flex-end}

/* Flex column */
.u-flex-col{display:flex;flex-direction:column}
.u-gap-2{gap:8px}

/* Font weight */
.u-font-bold{font-weight:700}
.u-font-semibold{font-weight:600}

/* Border top */
.u-border-t{border-top:1px solid var(--border)}

/* Text accent */
.u-text-accent{color:var(--accent)}

/* Despesas table */
.desp-table{font-size:12.5px}
.desp-header{text-align:left;color:var(--text3);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.desp-th{padding:6px 8px}
.desp-th-right{text-align:right}
.desp-th-center{text-align:center}
.desp-td{padding:8px;color:var(--text2)}
.desp-nowrap{white-space:nowrap}
.desp-td-right{text-align:right}
.desp-td-center{text-align:center}

/* Badge natureza */
.badge-credito{
  font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 10px;
  background:rgba(34,197,94,.14);color:#22c55e;border:1px solid rgba(34,197,94,.35)
}
.badge-despesa{
  font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 10px;
  background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.35)
}

/* Despesas totals */
.desp-totais{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--border);font-size:12px;color:var(--text2)
}

/* Leaflet map container */
.leaflet-map-container{
  height:300px;border-radius:8px;border:1px solid var(--border)
}

/* Timeline */
.timeline{
  display:flex;align-items:flex-start;overflow-x:auto;margin-top:14px;padding-bottom:6px
}

/* ================================================================
   DESIGN IMPROVEMENTS — Remove inline styles from templates
   ================================================================ */

/* === KPI Dashboard Cards (dashboard.html / operacional.html / faturamento.html) === */
.kpi-grid{display:grid;gap:var(--space-3);margin-bottom:var(--space-4)}
.kpi-grid-2{grid-template-columns:repeat(2,1fr)}
.kpi-grid-4{grid-template-columns:repeat(4,1fr)}
.kpi-card{
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-4);
  box-shadow:var(--shadow-sm);transition:all .2s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
}
.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  opacity:0;transition:opacity .2s;
}
.kpi-card:hover{
  transform:translateY(-2px);box-shadow:var(--shadow-md);
  border-color:var(--border2);
}
.kpi-card:hover::before{opacity:1}
.kpi-label{
  font-size:var(--text-xs);color:var(--text3);font-weight:var(--font-bold);
  text-transform:uppercase;letter-spacing:.06em;
}
.kpi-value{
  font-family:'JetBrains Mono',monospace;
  font-size:26px;font-weight:var(--font-extrabold);
  margin-top:var(--space-1);letter-spacing:-.03em;
  font-feature-settings:"tnum";
  line-height:1.2;
}
.kpi-card-blue .kpi-value{color:var(--blue-light)}
.kpi-card-green .kpi-value{color:var(--green)}
.kpi-card-amber .kpi-value{color:var(--amber)}
.kpi-card-red .kpi-value{color:var(--red)}
@media(max-width:1024px){.kpi-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kpi-grid-4{grid-template-columns:1fr 1fr}.kpi-value{font-size:22px}}
@media(max-width:400px){.kpi-grid-4{grid-template-columns:1fr}}

/* === KPI Tabs (operacional) === */
.kpi-tabs{display:flex;gap:2px;margin-bottom:var(--space-3);background:var(--bg2);border-radius:var(--radius);padding:3px;width:fit-content;border:1px solid var(--border)}
.kpi-tab{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:var(--radius-sm,8px);
  font-size:var(--text-xs);font-weight:var(--font-semibold);
  color:var(--text3);background:transparent;border:none;cursor:pointer;
  text-decoration:none;transition:all .15s;white-space:nowrap;
}
.kpi-tab:hover{color:var(--text);background:var(--bg3)}
.kpi-tab-active{color:var(--text);background:var(--bg4);box-shadow:var(--shadow-sm)}
.kpi-tab-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;font-size:10px;font-weight:var(--font-bold);
  background:var(--bg3);color:var(--text2);
}
.kpi-tab-active .kpi-tab-count{background:var(--blue-bg);color:var(--blue-light)}
.kpi-tab-dot{width:7px;height:7px;border-radius:50%}
.kpi-dot-green{background:var(--green)}
.kpi-dot-blue{background:var(--blue)}
.kpi-dot-red{background:var(--red)}

/* === Badge Dots === */
.badge-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:middle}
.badge-dot-green{background:var(--green)}
.badge-dot-blue{background:var(--blue-light)}
.badge-dot-red{background:var(--red)}

/* === Provedor Pills === */
.prov-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;
  font-size:var(--text-xs);font-weight:var(--font-semibold);
  background:var(--bg3);color:var(--text2);border:1px solid var(--border);
  white-space:nowrap;transition:all .15s;
}
.prov-pill:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}
.prov-pill-online{border-color:var(--green-border);color:var(--green)}
.prov-pill-offline{border-color:var(--red-border);color:var(--red)}

/* === Filter Bar === */
.filter-bar{
  display:flex;gap:var(--space-2);flex-wrap:wrap;
  align-items:center;margin-bottom:var(--space-4);
}
.filter-bar select{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius);padding:8px 12px;
  color:var(--text);font-size:var(--text-sm);font-family:inherit;
  cursor:pointer;outline:none;transition:all .15s;
}
.filter-bar select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.filter-bar-spacer{margin-left:auto}

/* === Active Filter Indicator === */
.active-filter{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;margin-bottom:var(--space-3);
  background:var(--blue-bg);border:1px solid var(--blue-border);
  border-radius:var(--radius);font-size:var(--text-sm);color:var(--text2);
  animation:filter-enter .25s ease-out;
}
@keyframes filter-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.active-filter strong{color:var(--text);font-weight:var(--font-semibold)}
.active-filter-clear{
  margin-left:auto;font-size:var(--text-xs);color:var(--text3);
  text-decoration:none;display:flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:6px;transition:all .15s;
}
.active-filter-clear:hover{color:var(--text);background:rgba(255,255,255,.06)}

/* === Topbar User (remove inline styles) === */
.topbar-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:var(--font-bold);font-size:var(--text-xs);
  color:#fff;flex-shrink:0;
}
.topbar-username{
  font-size:var(--text-sm);color:var(--text2);
  margin:0 var(--space-2);
}

/* === Detail Field Grid (os_detalhe.html) === */
.detail-grid{display:grid;gap:var(--space-4)}
.detail-grid-2{grid-template-columns:repeat(2,1fr)}
.detail-grid-4{grid-template-columns:repeat(4,1fr)}
.detail-field{}
.detail-label{
  font-size:var(--text-xs);color:var(--text3);
  text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:var(--space-1);
}
.detail-value{
  font-size:var(--text-base);color:var(--text);font-weight:var(--font-medium);
}
.detail-value-bold{font-weight:var(--font-bold)}
@media(max-width:768px){
  .detail-grid-2,.detail-grid-4{grid-template-columns:1fr}
}

/* === Enhanced Empty State === */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--space-10) var(--space-4);
  color:var(--text3);font-size:var(--text-sm);text-align:center;gap:var(--space-3);
}
.empty-state-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--bg3);display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-2);opacity:.5;
}
.empty-state-text{max-width:320px;line-height:var(--leading-relaxed)}

/* === Back Button (remove inline from os_detalhe) === */
.back-btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius);
  font-size:var(--text-sm);font-weight:var(--font-semibold);
  background:var(--bg3);color:var(--text2);border:1px solid var(--border);
  text-decoration:none;transition:all .15s;
}
.back-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}

/* === Footer Note === */
.footer-note{
  color:var(--text3);font-size:var(--text-xs);
  margin-top:var(--space-3);opacity:.8;
}

/* === Table Card (wrapping table in card) === */
.table-card{padding:0;overflow:hidden;transition:none}
.table-card:hover{transform:none;box-shadow:var(--shadow-md)}
.table-card-header{
  padding:var(--space-4) var(--space-5) 0;
}

/* === Status summary row === */
.status-summary{
  display:flex;flex-wrap:wrap;gap:var(--space-3);
  align-items:center;
}

/* ================================================================
   OS LIST — Utility classes for inline style removal
   ================================================================ */

/* Filter dot indicator */
.filter-dot{display:inline-block;width:7px;height:7px;background:#4d8df0;border-radius:50%;margin-left:4px;vertical-align:middle}

/* Print modal */
.print-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9999;align-items:flex-start;justify-content:center;padding-top:30px;overflow-y:auto}
.print-modal-inner{width:680px;margin-bottom:90px}
.print-area{background:#fff;border-radius:8px;overflow:hidden}
.print-actions{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:10000}
.print-btn{background:var(--accent);color:#1a1205;border:none;padding:11px 32px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.print-close{background:#374151;color:#fff;border:none;padding:11px 22px;border-radius:8px;font-size:14px;cursor:pointer}

/* Toast */
.toast-copy{display:none;position:fixed;bottom:28px;right:28px;background:#16a34a;color:#fff;padding:11px 22px;border-radius:8px;font-size:13px;font-weight:600;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,.3)}

/* Filter modal */
.filtro-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:8000;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.filtro-content{background:var(--bg2);border:1px solid var(--border);border-radius:12px;width:600px;max-width:95vw;box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden}
.filtro-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--bg3)}
.filtro-header-left{display:flex;align-items:center;gap:10px}
.filtro-title{font-size:14px;font-weight:700;color:var(--text)}
.filtro-close{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px;border-radius:4px;font-size:18px;line-height:1}
.filtro-body{padding:20px;display:flex;flex-direction:column;gap:18px}
.filtro-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);display:block;margin-bottom:6px}
.filtro-input{width:100%;box-sizing:border-box;height:38px;padding:0 12px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;outline:none}
.filtro-input-sm{height:34px;padding:0 10px 0 30px;background:var(--bg);border:1px solid var(--border);border-radius:6px 6px 0 0;color:var(--text);font-size:12px;outline:none;border-bottom:none}
.filtro-date{width:100%;box-sizing:border-box;height:38px;padding:0 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;outline:none}
.filtro-dates-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.filtro-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--border);background:var(--bg3)}
.filtro-resumo{font-size:12px;color:var(--text3)}
.filtro-actions{display:flex;gap:8px}

/* Client list */
.client-list{max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:0 0 6px 6px;background:var(--bg)}
.client-item{display:flex;align-items:center;gap:10px;padding:7px 12px;cursor:pointer;font-size:13px;color:var(--text);border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s}
.client-item:hover{background:rgba(77,141,240,.08)!important}
.client-item-inativo{color:var(--text3)}
.client-check{width:14px;height:14px;accent-color:var(--blue-light,#4d8df0);flex-shrink:0;cursor:pointer;margin:0}
.client-span{flex:1}
.client-inativo-badge{font-size:10px;color:var(--red,#ef4444);background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);padding:1px 6px;border-radius:8px;font-weight:600}
.client-empty{padding:16px 16px;text-align:center;font-size:12px;color:var(--text3)}

/* Client search wrapper */
.client-search-wrap{position:relative;margin-bottom:4px}
.client-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.4;pointer-events:none}

/* Client header row */
.client-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.client-header-actions{display:flex;gap:8px}
.client-action-link{font-size:10px;background:none;border:none;cursor:pointer;font-weight:600;padding:0}
.client-action-blue{color:var(--blue-light,#4d8df0)}
.client-action-red{color:var(--red,#ef4444)}
.client-separator{color:var(--border)}

/* Active filter bar */
.filtro-ativo-svg{color:var(--blue-light,#4d8df0);flex-shrink:0}
.filtro-ativo-text{color:var(--text2)}
.filtro-ativo-strong{color:var(--text)}
.filtro-ativo-clear{margin-left:auto;font-size:11px;color:var(--text3);text-decoration:none;display:flex;align-items:center;gap:4px}

/* Table layout */
.os-table-fixed{table-layout:fixed;width:100%}
.os-col-76{width:76px}
.os-col-80{width:80px}
.os-col-90{width:90px}
.os-col-12p{width:12%}
.os-col-7p{width:7%}
.os-col-20p{width:20%}
.os-col-68{width:68px}
.os-col-100{width:100px}
.os-col-9p{width:9%}
.os-col-80{width:80px}
.os-col-116{width:116px}
.os-col-128{width:128px}
.os-col-160{width:160px}

/* Table headers sortable */
.os-th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.os-th-link{color:inherit;text-decoration:none;display:flex;align-items:center;gap:4px}
.os-th-arrow{opacity:.35}

/* Table cells */
.os-td-nowrap{white-space:nowrap}
.os-td-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-td-text{color:var(--text)}
.os-td-text2{color:var(--text2)}
.os-td-text2-nw{color:var(--text2);white-space:nowrap}

/* Empty state button */
.empty-btn{margin-top:10px}

/* Pagination ellipsis */
.page-ellipsis{cursor:default;opacity:.5}

/* ============================================================
   REDESIGN — inspirado em shadcn-admin (satnaing/shadcn-admin)
   Paleta neutra, tipografia Inter, superfícies achatadas.
   Overrides no fim do arquivo (cascata) — mantém os MESMOS
   nomes de variável/classe usados nos templates (regra CLAUDE.md:
   nunca renomear, só ajustar valores/regras).
   ============================================================ */

:root{
  --bg:#0a0a0c;
  --bg2:#111114;
  --bg3:#19191e;
  --bg4:#212127;
  --bg-elevated:#141417;
  --border:#242429;
  --border2:#2e2e35;

  --text:#f2f2f3;
  --text2:#a8a8ae;
  --text3:#79797f;

  --blue:#5b8def;
  --blue2:#4470cc;
  --blue-light:#8bafef;
  --blue-bg:rgba(91,141,239,.10);
  --blue-border:rgba(91,141,239,.24);
  --blue-glow:rgba(91,141,239,.20);
  --accent:#4470cc;

  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --shadow-md:0 1px 3px rgba(0,0,0,.30),0 1px 2px rgba(0,0,0,.20);
  --shadow-lg:0 4px 14px rgba(0,0,0,.35);
  --shadow-blue:none;
}

body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif}
body::before{content:none}

/* Sidebar — flat, sem glow radial */
.sidebar{background:var(--bg)}
.sidebar-logo{background:var(--bg2);box-shadow:none}
.sidebar-logo::after{content:none}

.nav-item:hover{transform:none}
.nav-item.active{
  background:var(--bg3);
  color:var(--text);
  border:1px solid transparent;
  box-shadow:none;
}
.nav-item.active::before{content:none}

/* Topbar — sem blur/saturate pesado */
.topbar{background:var(--bg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* Botões — sólidos, sem gradiente/glow */
.btn-primary{background:var(--blue);box-shadow:none}
.btn-primary:hover{background:var(--blue2);transform:none;filter:none;box-shadow:none}
.btn-primary:active{transform:scale(.98)}

/* Cards / KPIs — bordas finas, sem barra colorida no topo */
.card,.stat-card,.kpi-card{box-shadow:var(--shadow-sm)}
.card:hover{box-shadow:var(--shadow-sm);border-color:var(--border)}
.stat-card::before,.kpi-card::before{content:none}
.stat-card:nth-child(1),.stat-card:nth-child(2),
.stat-card:nth-child(3),.stat-card:nth-child(4){
  border-left:1px solid var(--border) !important;
  background:var(--bg-elevated) !important;
}
.stat-card:hover{
  transform:none;
  box-shadow:var(--shadow-md);
  border-color:var(--border2);
}
.stat-card:nth-child(1):hover,.stat-card:nth-child(2):hover,
.stat-card:nth-child(3):hover,.stat-card:nth-child(4):hover{
  border-color:var(--border2) !important;
  background:var(--bg-elevated) !important;
}
.stat-card:nth-child(1):hover .stat-ico,.stat-card:nth-child(2):hover .stat-ico,
.stat-card:nth-child(3):hover .stat-ico,.stat-card:nth-child(4):hover .stat-ico{color:var(--text2)}
.kpi-card:hover{transform:none;box-shadow:var(--shadow-md)}

/* Badges — pill simples, sem pulso/glow */
.badge::before{box-shadow:none}
.badge-active{animation:none}
.badge{animation:none}

/* Tabela — hover neutro */
tbody tr:hover td{background:var(--bg3)}
tbody tr:hover td:first-child{box-shadow:none}

/* ===== Light theme — mesmos princípios, neutro claro ===== */
.light-theme{
  --bg:#ffffff;
  --bg2:#f7f7f8;
  --bg3:#f0f0f2;
  --bg4:#e7e7ea;
  --bg-elevated:#ffffff;
  --border:#e4e4e7;
  --border2:#d4d4d8;

  --text:#18181b;
  --text2:#52525b;
  --text3:#71717a;

  --blue:#3b66c9;
  --blue2:#2f52a3;
  --blue-light:#3b66c9;
  --blue-bg:rgba(59,102,201,.08);
  --blue-border:rgba(59,102,201,.22);

  --shadow-sm:0 1px 2px rgba(15,15,20,.05);
  --shadow-md:0 1px 3px rgba(15,15,20,.08),0 1px 2px rgba(15,15,20,.04);
}
.light-theme body::before{content:none}
.light-theme .sidebar{background:#ffffff}
.light-theme .sidebar-logo{background:#ffffff;box-shadow:none}
.light-theme .topbar{background:rgba(255,255,255,.92)}
.light-theme .nav-item.active{background:var(--bg3);box-shadow:none}
.light-theme .stat-card:nth-child(1),.light-theme .stat-card:nth-child(2),
.light-theme .stat-card:nth-child(3),.light-theme .stat-card:nth-child(4){
  border-left:1px solid var(--border) !important;
  background:#ffffff !important;
}
.light-theme .stat-card:nth-child(1):hover,.light-theme .stat-card:nth-child(2):hover,
.light-theme .stat-card:nth-child(3):hover,.light-theme .stat-card:nth-child(4):hover{
  border-color:var(--border2) !important;background:#ffffff !important;
}

/* ─── CADASTRO DE CLIENTES (Set/26) ───────────────────────────────
   Classes que faltavam no vocabulario de formulario. Ficam aqui em vez de
   estilo inline no template: quando o tema mudar, muda num lugar so. */

.check-line{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:13px;color:var(--text);font-weight:500;
}
.check-line input[type="checkbox"]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}

.form-actions{display:flex;gap:10px;padding-top:6px}

.os-link{color:var(--blue-light);text-decoration:none;font-weight:600}
.os-link:hover{text-decoration:underline}

.os-td-sub{font-size:11px;margin-top:2px}

.tabela-vazia{text-align:center;padding:48px 0;color:var(--text2)}

/* ─── DETALHE DA OS: cabecalho de status + stepper (Set/26) ────────
   Mesmo desenho do detalhe da OS no Wardon, pra quem abre os dois nao
   trocar de linguagem visual no meio do caminho. Aqui e SO LEITURA:
   o stepper informa em que etapa a operacao esta, nao deixa mudar. */

.os-status-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);margin-bottom:12px;flex-wrap:wrap;
}
.os-status-numero{font-family:var(--mono,monospace);font-size:18px;font-weight:700;color:var(--text)}

.os-stepper{
  display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);margin-bottom:16px;flex-wrap:wrap;gap:4px;
}
.os-stepper-step{
  display:flex;align-items:center;gap:8px;padding:10px 16px;
  border-radius:8px;background:transparent;border:1px solid transparent;
}
.os-stepper-step.active{background:var(--blue-bg);border-color:var(--blue-border)}
.os-stepper-step.completed{background:var(--green-bg);border-color:var(--green-border)}
.os-stepper-step-number{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  background:var(--bg3);color:var(--text3);border:1px solid var(--border);
}
.os-stepper-step.active .os-stepper-step-number{background:var(--blue);color:#fff;border-color:var(--blue)}
.os-stepper-step.completed .os-stepper-step-number{background:var(--green);color:#fff;border-color:var(--green)}
.os-stepper-step-label{font-size:12px;font-weight:600;color:var(--text3)}
.os-stepper-step.active .os-stepper-step-label,
.os-stepper-step.completed .os-stepper-step-label{color:var(--text)}
.os-stepper-connector{width:30px;height:2px;background:var(--border);margin:0 4px}
.os-stepper-connector.completed{background:var(--green)}

@media (max-width:860px){
  .os-stepper{padding:14px 10px}
  .os-stepper-step{padding:8px 10px}
  .os-stepper-step-label{display:none}   /* no celular sobra so a bolinha numerada */
  .os-stepper-connector{width:14px}
}

/* .detail-grid-3 era usada em 5 pontos do detalhe da OS e nunca existiu no CSS -
   aqueles blocos vinham numa coluna so. Achado ao conferir classe por classe. */
.detail-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.detail-grid-3{grid-template-columns:1fr}}

/* ─── MAPA DAS VIATURAS EM OPERAÇÃO (Set/26) ──────────────────────
   A viatura so aparece entre a Chegada Operacao e o Termino Operacao -
   regra aplicada no provedor, nao aqui. */

.mapa-wrap{position:relative;padding:0;overflow:hidden}
.mapa-tela{height:calc(100vh - 230px);min-height:420px;width:100%;background:var(--bg2)}
.mapa-vazio{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  background:rgba(0,0,0,.55);color:var(--text2);font-size:14px;
  pointer-events:none;   /* deixa arrastar o mapa por baixo do aviso */
}
.mapa-vazio-sub{font-size:12px;color:var(--text3)}
.oculto{display:none !important}

/* o popup do Leaflet vem branco por padrao e briga com o tema escuro */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:var(--bg2);color:var(--text);border:1px solid var(--border);
}
.leaflet-container{font-family:inherit}

/* Tiles do OpenStreetMap invertidos pra simular mapa escuro - o CARTO dark_all
   passou a exigir API key. Mesma solucao do mapa do Wardon. O filtro e so no
   tile-pane: marcador e popup ficam em panes proprios e nao sao invertidos. */
.leaflet-tile-pane{filter:invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
                   opacity:.99}

/* Barra de filtro com periodo: com 3 campos o submit automatico do select
   atrapalha (recarrega antes de escolher as datas), entao tem botao. */
.filtro-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.filtro-form input[type=date]{background:var(--bg2);color:var(--text);
  border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13px}
.btn-filtro{background:var(--blue);color:#fff;border:none;border-radius:8px;
  padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;
  display:inline-block;line-height:1.4}
.btn-filtro:hover{filter:brightness(1.1)}
.btn-filtro-limpar{background:transparent;color:var(--text3);border:1px solid var(--border)}

.filter-bar-dir{display:flex;gap:8px;margin-left:auto}
.btn-excel{background:#1d6f42;color:#fff}   /* verde do Excel, pra achar de relance */
.btn-excel:hover{filter:brightness(1.15)}

.barra-topo{display:flex;align-items:center;gap:12px}

/* texto do relatorio guardado no HTML pro botao Editar preencher o form */
.rel-texto{display:none}