/* ═══════════════════════════════════════════════════════
   Seka Analytics — app styles
   ═══════════════════════════════════════════════════════ */

/* ─── dcc.Markdown wrappers (Dash 4.x) ─────────────────
   dcc.Markdown envolve o conteúdo em .dash-markdown > p.
   Neutralizamos o wrapper para não quebrar SVGs inline.   */
.hub-icon-wrap .dash-markdown,
.hub-icon-wrap .dash-markdown p { margin: 0; display: flex; align-items: center; justify-content: center; }
/* SVG do mapa de login: o wrapper não deve ter dimensão própria */
.login-overlay > .dash-markdown,
.login-overlay > .dash-markdown p { margin: 0; display: contents; }

:root, [data-theme="light"] {
  --seka-green:        #109040;
  --seka-green-hover:  #0B6E30;
  --seka-green-glow:   #3FB464;
  --seka-dark:         #13302a;
  --seka-darker:       #0b1e17;

  --fg-1: #1a2420;
  --fg-2: #5a6a63;
  --fg-3: #8a9a93;
  --bg-1: #ffffff;
  --bg-2: #f5f8f6;
  --bg-3: #eaf0ec;
  --border-1: #e2ebe5;
  --border-2: #d1ddd5;

  --table-header-bg: var(--seka-dark);
  --table-header-fg: #ffffff;
  --table-row-alt:   var(--bg-2);
  --table-row-hover: rgba(16,144,64,.04);
  --input-bg:        var(--bg-1);
  --mono:            ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(20,40,30,.06);
  --shadow-md: 0 4px 12px rgba(20,40,30,.08);
  --shadow-lg: 0 12px 32px rgba(20,40,30,.12);

  /* compat — variáveis antigas */
  --sk-dark:    #1C3A2B;
  --sk-primary: #2A5240;
  --sk-mid:     #376B51;
  --sk-accent:  #4A8268;
  --sk-light:   #EBF5EF;
  --sk-text:    #C8E0D2;
  --sk-bg:      #F2F5F3;
  --sb-width:   240px;
  --sb-mini:    64px;
  --radius:     10px;
}

[data-theme="dark"] {
  --seka-green:        #3FB464;
  --seka-green-hover:  #52c776;
  --seka-green-glow:   #6fe095;
  --fg-1: #e8efea; --fg-2: #9aa8a1; --fg-3: #6a7a73;
  --bg-1: #15241f; --bg-2: #0f1a16; --bg-3: #1b2e28;
  --border-1: rgba(255,255,255,.06); --border-2: rgba(63,180,100,.2);
  --table-header-bg: #0b1e17; --table-header-fg: #9fe3b6;
  --table-row-alt: rgba(255,255,255,.02); --table-row-hover: rgba(63,180,100,.07);
  --input-bg: #0f1a16;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; color: var(--fg-1); background: var(--bg-2); }
body { transition: background-color .2s ease, color .2s ease; }
a { text-decoration: none !important; }

/* ─── App shell ─────────────────────────────────────── */
.app-root { width: 100vw; height: 100vh; overflow: hidden; }
.app-main { display: flex; height: 100vh; }
.main-content { flex: 1; min-width: 0; overflow-x: hidden; overflow-y: auto; }
.content-wide { flex: 1; }

/* Indicador de carregamento global: selo fixo no canto, NÃO cobre/apaga o conteúdo. */
.global-loading {
  position: fixed; top: 12px; right: 16px; z-index: 3000; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: #2A5240; color: #fff; font-size: 12px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.global-loading--on { opacity: 1; visibility: visible; transform: translateY(0); }
.global-loading__spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: seka-glspin .7s linear infinite;
}
@keyframes seka-glspin { to { transform: rotate(360deg); } }

/* ─── Sidebar wrapper ───────────────────────────────── */
.sb-wrapper { position: relative; width: var(--sb-width); flex-shrink: 0; transition: width .22s ease; z-index: 200; }
.sb-wrapper.sb-collapsed { width: var(--sb-mini); }

/* Hambúrguer (3 traços) — recolhe/expande a sidebar, no topo do header */
.sb-burger {
  border: none; background: transparent; color: #9fe3b6; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 8px;
  flex-shrink: 0; transition: background .14s, color .14s;
}
.sb-burger:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ─── Sidebar ───────────────────────────────────────── */
.sidebar {
  position: sticky; top: 0; height: 100vh; width: 100%;
  background: linear-gradient(180deg, var(--seka-dark) 0%, var(--seka-darker) 100%);
  color: rgba(255,255,255,.85); display: flex; flex-direction: column;
  border-right: 1px solid rgba(63,180,100,.15); overflow: hidden;
}
.sb-header { display: flex; align-items: center; gap: 10px; padding: 16px 14px 14px; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
.sb-brandbox { display: flex; align-items: center; gap: 10px; overflow: hidden; min-width: 0; }
.sb-logo { height: 30px; width: auto; display: block; object-fit: contain; flex-shrink: 0; }
.sb-brand { font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: #9fe3b6; }
/* Recolhido: hambúrguer em cima, logo centralizada (sem texto) */
.sb-collapsed .sb-header { flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; }
.sb-collapsed .sb-brandbox { flex-direction: column; gap: 2px; }
.sb-nav { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
/* Abrir um grupo não pode encolher os demais itens: mantêm a altura e a nav rola */
.sb-nav > * { flex-shrink: 0; }
.sb-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: none; background: transparent;
  color: rgba(255,255,255,.72) !important; border-radius: 8px; font-size: 13.5px; text-align: left;
  cursor: pointer; transition: background .14s, color .14s; font-family: inherit; width: 100%; white-space: nowrap; overflow: hidden;
}
.sb-link:hover { background: rgba(255,255,255,.05); color: #fff !important; }
.sb-icon { font-size: 16px; width: 20px; flex-shrink: 0; text-align: center; }
.sb-label { transition: opacity .18s; white-space: nowrap; overflow: hidden; }
.sb-collapsed .sb-label { opacity: 0; width: 0; pointer-events: none; }
.sb-collapsed .sb-link { justify-content: center; padding: 10px; }

/* ─── Grupos expansíveis da sidebar ─────────────────── */
.sb-group { display: flex; flex-direction: column; }
.sb-group-head { display: flex; align-items: center; }
.sb-group-head .sb-group-link { flex: 1; min-width: 0; }
.sb-caret {
  border: none; background: transparent; color: rgba(255,255,255,.5); cursor: pointer;
  padding: 8px 10px; border-radius: 8px; flex-shrink: 0; transition: color .14s, background .14s;
}
.sb-caret:hover { color: #fff; background: rgba(255,255,255,.05); }
.sb-caret-ic { font-size: 12px; display: inline-block; transition: transform .2s ease; }
.sb-group.open .sb-caret-ic { transform: rotate(180deg); }
.sb-sublist { display: none; flex-direction: column; gap: 1px; padding: 2px 0 4px 34px; }
.sb-group.open .sb-sublist { display: flex; }
.sb-sublink {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px;
  color: rgba(255,255,255,.6) !important; font-size: 12.5px; text-decoration: none;
  white-space: nowrap; overflow: hidden; cursor: pointer;
}
.sb-sublink:hover { background: rgba(255,255,255,.05); color: #fff !important; }
.sb-sublink-off { opacity: .5; cursor: not-allowed; }
/* Item de topo desativado ("em breve") — replica os cards "Em breve" do hub central */
.sb-link-off { opacity: .5; cursor: not-allowed; }
.sb-link-off:hover { background: transparent; }
.sb-subtag { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; opacity: .7; margin-left: 6px; }
/* No modo recolhido não há expansão: some com carets e sub-listas */
.sb-collapsed .sb-caret { display: none; }
.sb-collapsed .sb-sublist { display: none !important; }
.sb-footer { padding: 12px 10px 16px; border-top: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 6px; overflow: hidden; }
.sb-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--seka-green); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; box-shadow: 0 0 0 2px rgba(63,180,100,.25); flex-shrink: 0; }
.sb-user-info { min-width: 0; flex: 1; overflow: hidden; }
.sb-user-name  { font-size: 13px; color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-email { font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-logout { color: rgba(255,255,255,.6) !important; }
.sb-logout:hover { color: #ff7a6a !important; background: rgba(255,100,80,.08) !important; }
/* Botão de tema: hover neutro (não herda o vermelho do logout) */
.sb-theme-btn { color: rgba(255,255,255,.72) !important; }
.sb-theme-btn:hover { color: #fff !important; background: rgba(255,255,255,.05) !important; }
/* Senha/Sair somem quando a sidebar está recolhida (evita ícones amontoados).
   !important vence o utilitário .d-flex do Bootstrap (display:flex !important). */
.sb-collapsed .sb-footer-actions { display: none !important; }
.sb-collapsed .sb-footer { align-items: center; }

/* ─── Tela de Credenciais ───────────────────────────── */
.cred-reauth-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--border-1, #e2e6e4); border-radius: 10px; background: var(--surface, #fff); }
.cred-reauth-lbl { font-size: 13px; color: var(--fg-2, #555); }
.cred-group { margin-bottom: 22px; }
.cred-group-title { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fg-3, #888); margin: 0 0 8px 2px; }
.cred-item { border: 1px solid var(--border-1, #e2e6e4); border-radius: 10px; background: var(--surface, #fff); margin-bottom: 8px; overflow: hidden; }
.cred-sum { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; }
.cred-sum::-webkit-details-marker { display: none; }
.cred-sum::marker { content: ""; }
.cred-ic { font-size: 18px; color: var(--seka-green, #109040); width: 22px; text-align: center; }
.cred-title { font-size: 14px; font-weight: 600; color: var(--fg-1, #1a1a1a); }
.cred-sec { font-family: var(--mono, monospace); font-size: 11px; color: var(--fg-3, #888); }
.cred-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.cred-sum .cred-badge { margin-left: auto; }
.cred-badge.ok { color: #1c7a42; background: rgba(63,180,100,.16); }
.cred-badge.off { color: var(--fg-3, #888); background: rgba(120,120,120,.15); }
.cred-body { padding: 8px 16px 16px; border-top: 1px solid var(--border-1, #e2e6e4); }
.cred-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.cred-lbl { font-size: 12.5px; color: var(--fg-2, #555); width: 180px; flex-shrink: 0; }
.cred-input-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.cred-input { flex: 1; min-width: 180px; padding: 7px 10px; font-size: 13px; border: 1px solid var(--border-2, #cdd3d0); border-radius: 8px; background: var(--bg, #f7f9f8); color: var(--fg-1, #1a1a1a); }
.cred-input:focus { outline: none; border-color: var(--seka-green, #109040); }
.cred-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.cred-hint { font-size: 12px; color: var(--fg-3, #888); margin-bottom: 8px; }

/* ─── Page container ────────────────────────────────── */
.page-container { max-width: 1280px; margin: 0 auto; padding: 28px 32px 48px; }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -.4px; color: var(--fg-1); margin-bottom: 20px; }
.page-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }

.region-strip { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-3); margin-bottom: 24px; }
.region-strip .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--seka-green-glow); box-shadow: 0 0 8px rgba(63,180,100,.8); animation: live-blink 2s ease-in-out infinite; }
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.region-strip .sep { opacity: .3; }

/* ═══════════════════════════════════════════════════════
   LOGIN — Tela de mapa animado (novo design)
   ═══════════════════════════════════════════════════════ */
.login-overlay {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 50% at 68% 48%, rgba(63,180,100,.14) 0, transparent 65%),
    linear-gradient(165deg, #13302a 0%, #0b1e17 100%);
  display: flex; align-items: center; justify-content: center;
}

.lm-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 55% 55%, black 40%, transparent 95%);
  mask-image: radial-gradient(ellipse at 55% 55%, black 40%, transparent 95%);
}

.lm-vignette {
  position: absolute; inset: 0; z-index: 5;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
}

/* Labels do mapa */
.lm-label {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.55); white-space: nowrap;
}
.lm-highway {
  background: rgba(16,144,64,.18); border: 1px solid rgba(63,180,100,.5);
  color: #9fe3b6; padding: 2px 6px; border-radius: 3px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 1.3px;
}
.lm-city   { color: rgba(255,255,255,.75); font-weight: 600; font-size: 10.5px; letter-spacing: .8px; }
.lm-ocean  { color: rgba(255,255,255,.35); font-size: 9px; letter-spacing: 2px; }
.lm-badge  {
  position: absolute; z-index: 3;
  font-family: var(--mono); color: rgba(255,255,255,.4); font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
}

/* Hub de clique (ponto de Araquari) */
.lm-hub {
  position: absolute; z-index: 6; cursor: pointer;
  left: 52.3%; top: 58.5%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.lm-hub-core {
  position: relative; width: 16px; height: 16px; border-radius: 50%;
  background: #3FB464; box-shadow: 0 0 0 4px rgba(63,180,100,.25), 0 0 18px rgba(63,180,100,.85);
  transition: transform .2s ease;
}
.lm-hub-core::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; background: #fff; border-radius: 50%; transform: translate(-50%,-50%);
}
.lm-hub:hover .lm-hub-core { transform: scale(1.15); }
.lm-hub-pulse {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 2px solid #3FB464; transform: translate(-50%,-50%);
  animation: lm-pulse 2s ease-out infinite;
}
.lm-hub-pulse.p2 { animation-delay: 1s; }
@keyframes lm-pulse {
  0%   { width: 16px; height: 16px; opacity: .9; }
  100% { width: 90px; height: 90px; opacity: 0; }
}
.lm-hub-label {
  background: rgba(10,25,20,.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(63,180,100,.4); border-radius: 999px;
  padding: 6px 14px 6px 12px; color: #fff; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  white-space: nowrap; transition: all .2s ease;
}
.lm-hub:hover .lm-hub-label { background: rgba(16,144,64,.85); border-color: #3FB464; }
.lm-hub-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: #9fe3b6; border-left: 1px solid rgba(159,227,182,.4); padding-left: 8px;
}
.lm-hub:hover .lm-hub-tag { color: #fff; border-color: rgba(255,255,255,.4); }
.lm-hub-hint {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: rgba(255,255,255,.4); animation: lm-hint-blink 2.4s ease-in-out infinite;
}
@keyframes lm-hint-blink { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* Pontos pulsantes das cidades */
.lm-dot-pulse {
  position: absolute; z-index: 2; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.6); transform: translate(-50%,-50%); pointer-events: none;
}
.lm-dot-pulse::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5); animation: lm-pulse-small 2.4s ease-out infinite;
}
@keyframes lm-pulse-small { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }

/* Caminhões animados */
.lm-truck {
  position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%;
  background: #3FB464; box-shadow: 0 0 8px #3FB464; animation: lm-drive-h 9s linear infinite;
}
.lm-truck.t2 { animation: lm-drive-v 11s linear infinite; animation-delay: -3s; }
@keyframes lm-drive-h {
  0%   { left: -2%; top: 60%; opacity: 0; }
  5%   { opacity: 1; }
  50%  { left: 52%; top: 59%; }
  95%  { opacity: 1; }
  100% { left: 78%; top: 55%; opacity: 0; }
}
@keyframes lm-drive-v {
  0%   { left: 56%; top: -2%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { left: 52.5%; top: 102%; opacity: 0; }
}

/* Radar rotativo */
.lm-radar {
  position: absolute; left: 52.3%; top: 58.5%; z-index: 1; pointer-events: none;
  width: 260px; height: 260px; transform: translate(-50%,-50%);
  opacity: .4; animation: lm-spin 8s linear infinite;
}
@keyframes lm-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Overlay escuro + card (aparece ao clicar no hub) */
.lm-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,18,14,.25); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.lm-overlay.open { opacity: 1; pointer-events: auto; }

/* Card de login */
.lm-card {
  width: 360px; padding: 34px 32px 30px; border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(63,180,100,.15), inset 0 1px 0 rgba(255,255,255,.6);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transform: scale(.95) translateY(10px); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  position: relative; font-family: 'Inter', sans-serif;
}
.lm-overlay.open .lm-card { transform: scale(1) translateY(0); opacity: 1; }

.lm-card-close {
  position: absolute; top: 12px; right: 14px; width: 26px; height: 26px;
  border: none; background: transparent; color: #888; font-size: 20px;
  cursor: pointer; border-radius: 6px; line-height: 1; display: grid; place-items: center;
}
.lm-card-close:hover { background: #f3f3f3; color: #333; }

.lm-subname { font-size: 12px; font-weight: 600; color: #109040; letter-spacing: 3.5px; text-transform: uppercase; margin-top: -2px; }
.lm-origin { font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #999; margin: 2px 0 6px; display: flex; align-items: center; gap: 6px; }
.lm-origin-dot { width: 6px; height: 6px; border-radius: 50%; background: #3FB464; box-shadow: 0 0 6px rgba(63,180,100,.8); flex-shrink: 0; }

.lm-field { width: 100%; }
.lm-field label { display: block; font-size: 11.5px; font-weight: 500; color: #555; margin-bottom: 5px; letter-spacing: .2px; }
.lm-field .form-control {
  width: 100% !important; padding: 10px 12px !important; font-size: 14px !important;
  border: 1px solid #c8ddd0 !important; border-radius: 8px !important;
  font-family: inherit !important; outline: none !important; box-shadow: none !important;
  transition: border-color .14s, box-shadow .14s !important;
}
.lm-field .form-control:focus {
  border-color: #109040 !important;
  box-shadow: 0 0 0 3px rgba(16,144,64,.12) !important;
}

.lm-row { width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #888; margin-top: 2px; }
.lm-row a { color: #109040; text-decoration: none !important; font-weight: 500; }
.lm-row-label { display: flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; font-weight: 400; }
.lm-row input[type="checkbox"] { accent-color: #109040; cursor: pointer; }

.lm-erro { min-height: 18px; font-size: 12px; color: #dc3545; text-align: center; width: 100%; }

.lm-btn {
  width: 100%; background: #109040; color: #fff; border: none;
  font-size: 15px; font-weight: 600; padding: 11px; border-radius: 8px;
  cursor: pointer; font-family: inherit; margin-top: 4px; transition: background .14s;
}
.lm-btn:hover { background: #0B6E30; }

/* ═══════════════════════════════════════════════════════
   HUB
   ═══════════════════════════════════════════════════════ */
.hub-greeting { font-size: 32px; font-weight: 700; letter-spacing: -.5px; color: var(--fg-1); margin-bottom: 4px; }
.hub-sub { font-size: 14px; color: var(--fg-2); margin-bottom: 28px; }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

.hub-card {
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 12px;
  padding: 22px 20px 20px; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  position: relative; overflow: hidden; color: var(--fg-1) !important;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.hub-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--seka-green); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.hub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.hub-card:hover::before { transform: scaleX(1); }

.hub-card-off { opacity: .5; cursor: not-allowed; }
.hub-card-off:hover { transform: none; box-shadow: none; border-color: var(--border-1); }
.hub-card-off:hover::before { transform: scaleX(0); }

.hub-icon-wrap { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 6px; color: var(--seka-green); position: relative; }
.hub-svg { width: 44px; height: 44px; display: block; overflow: visible; }
.hub-arrow { position: absolute; top: 14px; right: 14px; font-size: 16px; color: var(--seka-green); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.hub-card:not(.hub-card-off):hover .hub-arrow { opacity: 1; transform: translateX(0); }

.hub-card-title { font-size: 15px; font-weight: 600; color: var(--fg-1); margin-bottom: 2px; }
.hub-card-desc  { font-size: 13px; color: var(--fg-2); line-height: 1.4; }
.hub-card-tag   { font-size: 10.5px; font-weight: 600; color: var(--fg-3); letter-spacing: .5px; margin-top: 2px; }

/* ── Reordenar módulos do hub (admin) ── */
.hub-toolbar { display: flex; justify-content: flex-end; margin: -6px 0 16px; }
/* Cada card do hub vai num wrapper posicionado p/ receber as setas ↑/↓ */
.hub-card-wrap { position: relative; display: flex; }
.hub-card-wrap > .hub-card { width: 100%; }
.hub-grid.hub-reordering .hub-card { pointer-events: none; }
.hub-grid.hub-reordering .hub-card-wrap { outline: 1px dashed var(--border-2); border-radius: 12px; }
.hub-grid.hub-reordering .bi-card-reorder { display: flex; }

/* ── Animações dos ícones ── */

/* Abastecimento: mangueira balança + gota pinga */
.hub-hose { transform-origin: 36px 24px; }
.hub-card:not(.hub-card-off):hover .hub-hose { animation: hub-hose-sway 1.4s ease-in-out infinite; }
@keyframes hub-hose-sway { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg) translateY(-1px); } }
.hub-drop { opacity: 0; }
.hub-card:not(.hub-card-off):hover .hub-drop { animation: hub-drop-fall 1.4s ease-in infinite; animation-delay: .4s; }
@keyframes hub-drop-fall {
  0%  { opacity: 0; transform: translateY(0) scale(.6); }
  15% { opacity: 1; transform: translateY(0) scale(1); }
  90% { opacity: 1; transform: translateY(4px) scale(.9); }
  100%{ opacity: 0; transform: translateY(6px) scale(.4); }
}

/* Rastreamento: radar pulsa + pino bounce */
.hub-ring { transform-origin: 32px 34px; opacity: 0; }
.hub-card:not(.hub-card-off):hover .hub-ring.r1 { animation: hub-radar 1.6s ease-out infinite; }
.hub-card:not(.hub-card-off):hover .hub-ring.r2 { animation: hub-radar 1.6s ease-out infinite .3s; }
.hub-card:not(.hub-card-off):hover .hub-ring.r3 { animation: hub-radar 1.6s ease-out infinite .6s; }
@keyframes hub-radar { 0% { transform: scale(.3); opacity: .9; } 80% { opacity: .1; } 100% { transform: scale(1.1); opacity: 0; } }
.hub-pin { transform-origin: 32px 44px; }
.hub-card:not(.hub-card-off):hover .hub-pin { animation: hub-pin-bounce 1.4s ease-in-out infinite; }
@keyframes hub-pin-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Documentos: canto dobra + linhas preenchem */
.hub-fold { transform-origin: 40px 8px; }
.hub-card:not(.hub-card-off):hover .hub-fold { animation: hub-fold-flip 1.8s ease-in-out infinite; }
@keyframes hub-fold-flip { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } }
.hub-line { stroke-dasharray: 30; stroke-dashoffset: 30; opacity: .7; }
.hub-card:not(.hub-card-off):hover .hub-line.l1 { animation: hub-line-fill 1.8s ease forwards; }
.hub-card:not(.hub-card-off):hover .hub-line.l2 { animation: hub-line-fill 1.8s ease .2s forwards; }
.hub-card:not(.hub-card-off):hover .hub-line.l3 { animation: hub-line-fill 1.8s ease .4s forwards; }
@keyframes hub-line-fill { to { stroke-dashoffset: 0; opacity: 1; } }

/* Relatórios: barras crescem + linha desenha */
.hub-bar { transform-origin: bottom; transform: scaleY(.3); }
.hub-card:not(.hub-card-off):hover .hub-bar.b1 { animation: hub-bar-grow .6s ease forwards; }
.hub-card:not(.hub-card-off):hover .hub-bar.b2 { animation: hub-bar-grow .6s ease .12s forwards; }
.hub-card:not(.hub-card-off):hover .hub-bar.b3 { animation: hub-bar-grow .6s ease .24s forwards; }
@keyframes hub-bar-grow { to { transform: scaleY(1); } }
.hub-trend { stroke-dasharray: 60; stroke-dashoffset: 60; }
.hub-card:not(.hub-card-off):hover .hub-trend { animation: hub-trend-draw .9s ease .3s forwards; }
@keyframes hub-trend-draw { to { stroke-dashoffset: 0; } }
.hub-trend-dot { opacity: 0; transform-origin: 52px 12px; }
.hub-card:not(.hub-card-off):hover .hub-trend-dot { animation: hub-dot-pop .4s ease 1.1s forwards; }
@keyframes hub-dot-pop { 0% { opacity: 0; transform: scale(0); } 70% { transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }

/* BI's: barras crescem, tendência desenha, lupa dá zoom */
.hub-bibar { transform-origin: bottom; transform: scaleY(.3); }
.hub-card:not(.hub-card-off):hover .hub-bibar.bb1 { animation: hub-bar-grow .6s ease forwards; }
.hub-card:not(.hub-card-off):hover .hub-bibar.bb2 { animation: hub-bar-grow .6s ease .12s forwards; }
.hub-card:not(.hub-card-off):hover .hub-bibar.bb3 { animation: hub-bar-grow .6s ease .24s forwards; }
.hub-bitrend { stroke-dasharray: 40; stroke-dashoffset: 40; }
.hub-card:not(.hub-card-off):hover .hub-bitrend { animation: hub-trend-draw .8s ease .3s forwards; }
.hub-bilens { transform-box: fill-box; transform-origin: 44px 42px; }
.hub-card:not(.hub-card-off):hover .hub-bilens { animation: hub-bilens-zoom 1.8s ease-in-out infinite .4s; }
@keyframes hub-bilens-zoom { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Gerenciamento/Scripts: escudo pulsa + check desenha */
.hub-shield { transform-origin: 32px 32px; }
.hub-card:not(.hub-card-off):hover .hub-shield { animation: hub-shield-pulse 1.8s ease-in-out infinite; }
@keyframes hub-shield-pulse {
  0%,100% { filter: drop-shadow(0 0 0 rgba(63,180,100,0)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 6px rgba(63,180,100,.7)); transform: scale(1.04); }
}
.hub-check { stroke-dasharray: 40; stroke-dashoffset: 40; }
.hub-card:not(.hub-card-off):hover .hub-check { animation: hub-check-draw .5s ease .1s forwards; }
@keyframes hub-check-draw { to { stroke-dashoffset: 0; } }

/* Frota/Manutenção: rodas giram + rastro */
.hub-wheel.w1 { transform-box: fill-box; transform-origin: 22px 46px; }
.hub-wheel.w2 { transform-box: fill-box; transform-origin: 48px 46px; }
.hub-card:not(.hub-card-off):hover .hub-wheel.w1,
.hub-card:not(.hub-card-off):hover .hub-wheel.w2 { animation: hub-wheel-spin .8s linear infinite; }
@keyframes hub-wheel-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hub-trail line { opacity: 0; }
.hub-card:not(.hub-card-off):hover .hub-trail line:nth-child(1) { animation: hub-trail 1s ease-in-out infinite; }
.hub-card:not(.hub-card-off):hover .hub-trail line:nth-child(2) { animation: hub-trail 1s ease-in-out infinite .15s; }
.hub-card:not(.hub-card-off):hover .hub-trail line:nth-child(3) { animation: hub-trail 1s ease-in-out infinite .3s; }
@keyframes hub-trail { 0% { opacity: 0; transform: translateX(6px); } 40% { opacity: .7; } 100% { opacity: 0; transform: translateX(-4px); } }

/* Sistema: LEDs dos servidores piscam + fluxo de dados nas linhas */
.hub-led { transform-box: fill-box; transform-origin: center; }
.hub-card:not(.hub-card-off):hover .hub-led.l1 { animation: hub-led-blink 1.2s ease-in-out infinite; }
.hub-card:not(.hub-card-off):hover .hub-led.l2 { animation: hub-led-blink 1.2s ease-in-out infinite .6s; }
@keyframes hub-led-blink {
  0%,100% { opacity: .35; transform: scale(.85); }
  50%     { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 3px rgba(63,180,100,.8)); }
}
.hub-data { stroke-dasharray: 4 4; }
.hub-card:not(.hub-card-off):hover .hub-data.d1 { animation: hub-data-flow .9s linear infinite; }
.hub-card:not(.hub-card-off):hover .hub-data.d2 { animation: hub-data-flow .9s linear infinite .45s; }
@keyframes hub-data-flow { from { stroke-dashoffset: 16; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }

/* Usuários: pessoas */
.hub-users-person { transition: transform .3s ease; transform-origin: center bottom; }
.hub-card:not(.hub-card-off):hover .hub-users-person.p1 { animation: hub-person-sway 1.6s ease-in-out infinite; }
.hub-card:not(.hub-card-off):hover .hub-users-person.p2 { animation: hub-person-sway 1.6s ease-in-out infinite .3s; }
@keyframes hub-person-sway { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }

/* PLR: moeda vira (efeito de moeda girando) */
.hub-plr-coin { transform-box: fill-box; transform-origin: center; }
.hub-card:not(.hub-card-off):hover .hub-plr-coin { animation: hub-plr-flip 2.2s ease-in-out infinite; }
@keyframes hub-plr-flip {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hub-card:hover * { animation: none !important; }
  .lm-truck, .lm-radar, .lm-hub-pulse, .lm-dot-pulse::after, .lm-hub-hint { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════
   KPI / FILTROS / TABS / TABELAS
   ═══════════════════════════════════════════════════════ */
.kpi-row  { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi-card { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 10px; padding: 16px 18px 14px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); }
.kpi-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--seka-green); }
.kpi-label { font-size: 11px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--fg-1); letter-spacing: -.3px; line-height: 1.1; }
.kpi-delta { font-size: 12px; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.kpi-delta.up { color: var(--seka-green); } .kpi-delta.down { color: #c63a3a; }

.filter-bar { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 10px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-1); margin-bottom: 16px; }
.tab { background: transparent; border: none; padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--fg-2); font-family: inherit; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .14s, border-color .14s; }
.tab:hover { color: var(--fg-1); }
.tab.active { color: var(--seka-green); border-bottom-color: var(--seka-green); }

/* compat — tabs-bar / tab-btn */
.tabs-bar { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn { padding: 7px 18px; border-radius: 6px; border: 1.5px solid var(--border-2); background: var(--bg-1); color: var(--fg-2); font-size: 13px; cursor: pointer; transition: background .14s, color .14s, border-color .14s; font-family: inherit; }
.tab-btn:hover { background: var(--bg-3); border-color: var(--seka-green); color: var(--seka-green); }
.tab-btn.tab-active { background: var(--seka-green); color: #fff; border-color: var(--seka-green); font-weight: 600; }

.data-table-wrap { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th { background: var(--table-header-bg); color: var(--table-header-fg); text-align: left; padding: 11px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.data-table tbody td { padding: 11px 14px; border-top: 1px solid var(--border-1); color: var(--fg-1); }
.data-table tbody tr:nth-child(even) { background: var(--table-row-alt); }
.data-table tbody tr:hover { background: var(--table-row-hover); }

/* compat */
.table-area { width: 100%; overflow-x: auto; }
.dash-spreadsheet-container { width: 100% !important; }
/* min-width (não width fixo): a tabela cresce com as colunas e o container
   rola na horizontal mesmo sem rolagem vertical (poucas linhas). */
.dash-spreadsheet-inner table { min-width: 100% !important; }
.table-area .dash-spreadsheet-container { border-radius: 8px; overflow-x: auto; border: 1px solid var(--border-1); box-shadow: var(--shadow-sm); }

.card-table { background: var(--bg-1); border-radius: 10px; border: 1px solid var(--border-1); overflow: hidden; box-shadow: var(--shadow-sm); }
.card-table thead th { background: var(--table-header-bg); color: var(--table-header-fg); font-size: 12px; font-weight: 600; padding: 10px 14px; border: none; }
.card-table tbody td { font-size: 13px; padding: 10px 14px; vertical-align: middle; color: var(--fg-1); }
.card-table tbody tr:hover { background: var(--table-row-hover); }

.gerenc-card { border: 1px solid var(--border-1) !important; border-radius: 10px !important; box-shadow: var(--shadow-sm) !important; background: var(--bg-1) !important; }

/* ════════════════════════════════════════════════════════════════════════
   SCRIPTS — linhas-tabela expansíveis (substitui os cards empilhados)
   ════════════════════════════════════════════════════════════════════════ */

/* Toolbar: busca + filtro por status */
.scripts-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.scripts-toolbar .scripts-search { flex: 1 1 320px; max-width: 480px; }
.scripts-toolbar .scripts-filtro { flex: 0 0 190px; width: 190px; font-size: 13px; }

/* Grade compartilhada entre o cabeçalho de colunas e cada linha */
.script-row-head {
  display: grid;
  /* última coluna FIXA: garante trilhos idênticos no cabeçalho e em todas as
     linhas (senão o botão "Em execução..." alarga a coluna e desalinha) */
  grid-template-columns: 52px 100px minmax(0, 1fr) 160px 142px 142px 500px;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
}

.script-row {
  border: 1px solid var(--border-1);
  border-radius: 8px;
  background: var(--bg-1);
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
  transition: border-color .14s;
}
.script-row:hover { border-color: var(--seka-green); }

/* Cabeçalho de colunas (sem moldura, rótulos discretos) */
.script-row-header {
  background: transparent;
  padding: 0 15px 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
}

.script-cell { min-width: 0; font-size: 13px; color: var(--fg-1); }
.script-cell-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--fg-2); }
.script-cell-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.script-cell-agend,
.script-cell-ult,
.script-cell-prox { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.script-cell-label { display: none; }          /* "Última:"/"Próxima:" — ocultos no desktop (há header) */
.script-status-badge { font-size: 11px; }
.script-dates-wrap { display: contents; }       /* projeta Última + Próxima como 2 colunas da grade */
.script-cell-acoes { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

.script-row-body { padding: 4px 15px 14px; }

.scripts-sem-resultado { padding: 28px; text-align: center; color: #999; font-size: 13px; }

/* Telas estreitas (≤1200px): a grade vira flex para não estourar.
   Oculta Agendamento/Próxima, mantém Status · Nome · Última · Ações.
   Rótulos "Última:"/"Próxima:" voltam inline; cabeçalho de colunas some. */
@media (max-width: 1280px) {
  .script-row-header { display: none; }
  .script-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .script-cell-nome { flex: 1 1 100%; order: -1; }
  .script-cell-agend, .script-cell-prox { display: none; }
  .script-cell-label { display: inline; }
  .script-cell-acoes { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
}

/* Botões */
.btn-primary { background: var(--seka-green); color: #fff; border: none; padding: 9px 16px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; transition: background .14s; }
.btn-primary:hover { background: var(--seka-green-hover); }
.btn-ghost { background: transparent; color: var(--fg-2); border: 1px solid var(--border-2); padding: 9px 14px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; font-family: inherit; }
.btn-ghost:hover { border-color: var(--seka-green); color: var(--seka-green); }
.seka-btn { background: var(--seka-green) !important; border-color: var(--seka-green) !important; color: #fff !important; font-size: 13px !important; }
.seka-btn:hover { background: var(--seka-green-hover) !important; border-color: var(--seka-green-hover) !important; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge.ok  { background: rgba(16,144,64,.12); color: var(--seka-green); }
.badge.warn{ background: rgba(230,160,30,.14); color: #a06b00; }
.badge.err { background: rgba(220,80,80,.12);  color: #b02a2a; }

/* ─── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #b0c9bb; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sk-mid); }

/* ─── DatePickerRange ───────────────────────────────── */
.DateRangePickerInput, .DateRangePickerInput__withBorder,
.abast-datepicker .DateRangePickerInput, .rastr-datepicker .DateRangePickerInput {
  border: 1.5px solid var(--seka-green) !important; border-radius: 6px !important; background: var(--bg-1) !important;
}
.DateInput { background: transparent !important; }
.DateInput_input { font-size: 11px !important; padding: 4px 8px !important; color: var(--fg-1) !important; border-bottom: 2px solid transparent !important; background: transparent !important; font-weight: 400 !important; font-family: inherit !important; }
.DateInput_input__focused, .DateInput_input:focus { border-bottom-color: var(--seka-green) !important; outline: none !important; box-shadow: none !important; }
.DateRangePickerInput_arrow { color: #aaa !important; }
.CalendarDay__selected, .CalendarDay__selected:hover, .CalendarDay__selected:active { background: var(--seka-green) !important; border-color: var(--seka-green) !important; color: #fff !important; }
.CalendarDay__selected_start, .CalendarDay__selected_end { background: var(--seka-dark) !important; border-color: var(--seka-dark) !important; color: #fff !important; }
.CalendarDay__selected_span, .CalendarDay__selected_span:hover { background: #4A8268 !important; border-color: #4A8268 !important; color: #fff !important; }
.CalendarDay__hovered_span, .CalendarDay__hovered_span:hover { background: var(--bg-3) !important; border-color: var(--border-2) !important; color: var(--seka-green) !important; }
.DayPickerNavigation_button { border: 1px solid var(--border-2) !important; border-radius: 4px !important; }
.DayPickerNavigation_button:hover { background: var(--bg-3) !important; }
.DateRangePicker_picker { z-index: 1000 !important; }
.CalendarMonth_caption { color: var(--seka-green) !important; }
/* Datepicker compacto (Documentos → CTE Erro Diferencial): largura só p/ o período.
   Escopado num wrapper .cte-err-dp (div normal garante a classe no DOM). */
.cte-err-dp { display: inline-block; }
.cte-err-dp .DateInput { width: 84px !important; }
.cte-err-dp .DateInput_input { width: 84px !important; text-align: center; padding: 4px 4px !important; }
.cte-err-dp .DateRangePickerInput_arrow { width: 16px !important; padding: 0 !important; }

/* Datepicker compacto (Notas Fiscais): largura só p/ o período. */
.notas-dp { display: inline-block; }
.notas-dp .DateInput { width: 84px !important; }
.notas-dp .DateInput_input { width: 84px !important; text-align: center; padding: 4px 4px !important; }
.notas-dp .DateRangePickerInput_arrow { width: 16px !important; padding: 0 !important; }

/* ─── DataTable filters ─────────────────────────────── */
.dash-filter input { border: 1px solid var(--border-2) !important; border-radius: 4px !important; background: var(--bg-2) !important; font-size: 10px !important; padding: 2px 6px !important; color: var(--fg-1) !important; outline: none !important; min-width: 80px !important; font-family: inherit !important; }
.dash-filter input:focus { border-color: var(--seka-green) !important; box-shadow: 0 0 0 2px rgba(16,144,64,.15) !important; }
.dash-filter input::placeholder { color: #aaa !important; font-style: italic; }
.dash-filter .filter-case-sensitive, .dash-filter .filter-case-sensitive-icon,
button[class*="case-sensitive"], td.dash-filter button, th.dash-filter button { display: none !important; }
td.dash-filter, th.dash-filter { padding: 2px 4px !important; }
td.dash-filter > div, th.dash-filter > div { width: 100% !important; display: flex !important; }
td.dash-filter input, th.dash-filter input { width: 100% !important; flex: 1 !important; }

/* ─── react-select (rastreamento) ───────────────────── */
.rastr-dropdown .Select-control { border-color: var(--border-2) !important; }
.rastr-dropdown.is-open .Select-control, .rastr-dropdown .is-focused .Select-control { border-color: var(--seka-green) !important; box-shadow: none !important; }
.rastr-dropdown .Select-option.is-focused { background: var(--bg-3) !important; color: var(--seka-green) !important; }
.rastr-dropdown .Select-option.is-selected { background: var(--seka-green) !important; color: #fff !important; }
.rastr-dropdown [class$="-control"] { border-color: var(--border-2) !important; box-shadow: none !important; }
.rastr-dropdown [class$="-control"]:hover, .rastr-dropdown [class*="-control--is-focused"] { border-color: var(--seka-green) !important; box-shadow: 0 0 0 1px var(--seka-green) !important; }
.rastr-dropdown [class*="-multiValue"] { background-color: var(--seka-green) !important; }
.rastr-dropdown [class*="-multiValueLabel"] { color: #fff !important; }
.rastr-dropdown [class*="-option"]:active, .rastr-dropdown [class*="-option--is-selected"] { background-color: var(--seka-green) !important; color: #fff !important; }
.rastr-dropdown [class*="-option--is-focused"] { background-color: var(--bg-3) !important; color: var(--seka-green) !important; }

:root { --bs-focus-ring-color: rgba(16, 144, 64, 0.25) !important; }

/* ═══════════════════════════════════════════════════════
   MOBILE  —  top-bar + drawer + responsividade
   Top-bar e backdrop ficam ocultos no desktop.
   ═══════════════════════════════════════════════════════ */
.mobile-topbar         { display: none; }
.mobile-drawer-backdrop{ display: none; }

@media (max-width: 768px) {

  /* ── Top-bar fixa com hambúrguer ─────────────────────── */
  .mobile-topbar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 240;
    padding: 0 12px;
    background: linear-gradient(180deg, var(--seka-dark) 0%, var(--seka-darker) 100%);
    border-bottom: 1px solid rgba(63,180,100,.18);
  }
  .mobile-menu-btn {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px;
    border: 1px solid rgba(63,180,100,.35); background: transparent; color: #9fe3b6;
    display: grid; place-items: center; font-size: 20px; cursor: pointer;
  }
  .mobile-menu-btn:active { background: rgba(63,180,100,.15); }
  .mobile-topbar-logo   { height: 26px; width: auto; }
  .mobile-topbar-brand  { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #9fe3b6; }

  /* ── Sidebar vira drawer off-canvas ──────────────────── */
  .sb-wrapper, .sb-wrapper.sb-collapsed {
    position: fixed; top: 0; left: 0; height: 100vh; width: 270px; max-width: 82vw;
    transform: translateX(-100%); transition: transform .25s ease; z-index: 300;
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
  }
  .app-root.drawer-open .sb-wrapper { transform: translateX(0); }
  .sb-toggle-btn { display: none !important; }        /* botão de colapso só no desktop */

  /* Garante o menu completo mesmo se a sessão estava colapsada no desktop */
  .sb-collapsed .sb-label { opacity: 1 !important; width: auto !important; pointer-events: auto !important; }
  .sb-collapsed .sb-link  { justify-content: flex-start !important; padding: 10px 12px !important; }

  /* Backdrop escuro quando o drawer está aberto */
  .app-root.drawer-open .mobile-drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 250;
    background: rgba(0,0,0,.5);
  }

  /* Conteúdo ocupa toda a largura e desce abaixo da top-bar */
  .app-main     { height: auto; min-height: 100vh; }
  .main-content { padding-top: 52px; }
  .app-root     { height: auto; overflow: visible; }

  /* ── Densidade / espaçamentos ────────────────────────── */
  .page-container { padding: 16px 14px 32px; }
  .page-title  { font-size: 19px; margin-bottom: 14px; }
  .page-topbar { flex-wrap: wrap; gap: 10px; }
  .hub-greeting{ font-size: 24px; }
  .region-strip{ flex-wrap: wrap; gap: 8px; }
  .kpi-row     { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }

  /* Filtros: tudo quebra linha e ocupa largura cheia (sobrepõe px inline) */
  .filter-bar { padding: 12px; gap: 10px; }
  .filter-bar > * { flex: 1 1 100%; min-width: 0 !important; }
  .filter-bar input,
  .filter-bar .Select,
  .filter-bar .dash-dropdown,
  .filter-bar .DateRangePickerInput { width: 100% !important; min-width: 0 !important; }

  /* Tabelas: rolagem horizontal suave em vez de cortar */
  .data-table-wrap,
  .table-area,
  .dash-spreadsheet-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* Altura fixa calc(100vh-210px) sobra no mobile (filtros quebram linha) */
  .dash-spreadsheet-container { height: auto !important; max-height: 68vh !important; }

  /* Abastecimentos: controles de filtro empilham e ocupam largura cheia */
  .abast-controls { width: 100%; }
  .abast-controls > .dash-spreadsheet-container { max-height: none !important; }
  .abast-controls input,
  .abast-controls .DateRangePickerInput { width: 100% !important; min-width: 0 !important; }
  .abast-controls .abast-datepicker,
  .abast-controls .abast-datepicker .DateRangePicker { width: 100%; }

  /* Cards de script (Gerenciamento/Scripts): cabeçalho quebra linha,
     botões descem para baixo do nome em vez de transbordar */
  .script-card-head { flex-wrap: wrap; gap: 8px; }
  .script-card-head > * { min-width: 0; }

  /* Toolbar em largura cheia em telas estreitas */
  .scripts-toolbar .scripts-search,
  .scripts-toolbar .scripts-filtro { flex: 1 1 100%; width: 100%; max-width: none; }

  /* Usuários: busca/filtro em largura cheia + tabela rolável na horizontal */
  .usuarios-searchbar .form-control,
  .usuarios-searchbar .form-select { max-width: 100% !important; flex: 1 1 100%; }
  .card-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Modais Bootstrap confortáveis em telas estreitas */
  .modal-dialog { margin: 12px; max-width: calc(100vw - 24px); }

  /* Card de login se adapta a telas estreitas (era width:360px fixo) */
  .lm-card { width: auto; max-width: 360px; margin: 0 16px; }
}

@media (max-width: 480px) {
  .page-container { padding: 14px 10px 28px; }
  .kpi-row    { grid-template-columns: 1fr 1fr; }
  .kpi-value  { font-size: 22px; }
  .hub-greeting { font-size: 21px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PNEUS — ícone do hub + chassi (movimentação)
   ════════════════════════════════════════════════════════════════════════ */

/* Ícone Pneus: pneu gira no próprio eixo (origem relativa ao viewBox) */
.hub-tire { transform-box: view-box; transform-origin: 32px 32px; }
.hub-card:not(.hub-card-off):hover .hub-tire { animation: hub-tire-spin 2.4s linear infinite; }
@keyframes hub-tire-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Abas internas da página de Pneus */
.pneus-tabs { display:flex; gap:8px; margin-bottom:12px; }
.pneus-tab-btn.active { box-shadow:0 0 0 2px rgba(42,82,64,.25); }

/* Faixa do veículo selecionado */
.pneus-veic-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#eef5ef; border:1px solid #d6e2d6; border-radius:10px;
  padding:10px 14px; margin-bottom:14px; }
.pneus-veic-label { font-size:13px; color:#1f2937; margin-right:auto; }
.pneus-veic-ina { color:#c0392b; font-weight:700; }

/* Popup de pesquisa: um filtro por coluna, acima da tabela */
.pneus-filtros-grid { display:grid; grid-template-columns:repeat(8, minmax(70px, 1fr));
  gap:6px; margin-bottom:8px; }
.pneus-filtro-in { min-width:0 !important; width:100%; font-size:12px; padding:4px 6px; }
.pneus-popup-actions { display:flex; gap:8px; margin-bottom:10px; }
@media (max-width: 768px) {
  .pneus-filtros-grid { grid-template-columns:repeat(2, 1fr); }
  /* popup ocupa a tela inteira e rola melhor no celular */
  #pneus-modal-veic .modal-dialog { margin:0; max-width:100%; height:100%; }
  #pneus-modal-veic .modal-content { height:100vh; border-radius:0; }
  #pneus-modal-veic .modal-body { -webkit-overflow-scrolling:touch; }
  .pneus-popup-actions .btn { flex:1; }
}

/* Página */
.pneus-page .page-subtitle { margin-top: -4px; margin-bottom: 12px; }
.pneus-card { background:#fff; border:1px solid #e3e8e3; border-radius:10px;
  padding:12px 14px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.pneus-card-title { font-size:13px; font-weight:700; color:#2A5240; margin-bottom:8px; }
.pneus-lbl { font-size:11px; font-weight:600; color:#555; display:block; margin-bottom:2px; }
.pneus-hint { font-size:12px; margin-top:6px; }
.pneus-hint-ok { color:#15803d; }
.pneus-hint-err { color:#c0392b; }
.pneus-input { font-size:13px; padding:5px 8px; border:1px solid #cbd5cb; border-radius:6px; min-width:200px; }
.pneus-estoque-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.pneus-pne-card { margin-top:10px; padding:10px 12px; border:1px solid #d6e2d6;
  border-radius:8px; background:#f7faf7; }
.pneus-pne-cod { font-weight:700; color:#1f2937; font-family:Consolas,monospace; }
.pneus-pne-desc { font-size:13px; color:#374151; margin:2px 0; }
.pneus-pne-meta { font-size:11px; color:#6b7280; margin-right:10px; }

.pneus-acao-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0 14px; }
.pneus-sel-info { font-size:12px; color:#555; margin-right:auto; }
.pneus-chassi-area { display:flex; justify-content:center; overflow-x:auto; padding:6px 0; }

.pneus-audit-filtros { display:flex; align-items:flex-end; flex-wrap:wrap; gap:18px; }

/* ── Chassi (adaptado de Doc_HTML_VEIC_Chassi.md item 9) ─────────────────── */
.chassi-note { padding:18px; color:#9ca3af; font-size:14px; text-align:center; }
.chassi-wrap { padding:10px 8px; text-align:left; display:inline-block; }
.chassi-head { font-size:17px; font-weight:700; color:#1f2937; margin-bottom:3px; }
.chassi-sub { font-size:13px; color:#6b7280; margin-bottom:14px; }
.chassi-sub-ina { color:#c0392b; font-weight:600; }
.chassi-canvas { position:relative; }
.spine { position:absolute; background:#1f2937; border-radius:4px; height:10px; }
.axle { position:absolute; background:#374151; border-radius:4px; width:10px; }
.hub { position:absolute; width:22px; height:22px; border-radius:50%; background:#9ca3af; border:3px solid #4b5563; }
.tire { position:absolute; width:116px; height:40px; border-radius:7px; display:flex;
  align-items:center; justify-content:center; font-size:16px; font-weight:700;
  letter-spacing:.5px; cursor:pointer; user-select:none; }
.tire.mounted { background:#000; color:#22c55e; border:2px solid #16a34a; font-family:Consolas,'Courier New',monospace; }
.tire.mountedina { background:#000; color:#f87171; border:2px solid #ef4444; font-family:Consolas,'Courier New',monospace; }
.tire.empty { background:#f3f4f6; color:#9ca3af; border:2px dashed #cbd5e1; font-size:13px; font-weight:600; }
.tire.emptyreq { background:#fef2f2; color:#ef4444; border:2px solid #ef4444; box-shadow:0 0 0 2px rgba(239,68,68,.40); font-size:13px; font-weight:600; }
.tire.fora { border-color:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.50); }
.tire.sel { outline:3px solid #2563eb; outline-offset:1px; box-shadow:0 0 0 4px rgba(37,99,235,.30); z-index:45; }
.tire:hover { z-index:40; }

.tip { position:absolute; left:0; top:48px; width:280px; background:#fff; border:1.5px solid #ccc;
  border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.20); display:none; z-index:50; overflow:hidden;
  text-align:left; font-family:'Segoe UI',sans-serif; letter-spacing:normal; font-weight:400;
  cursor:default; pointer-events:none; }
.tire:hover .tip { display:block; }
.tip.up { top:auto; bottom:48px; }
.tip.r { left:auto; right:0; }
.tip.green { border-color:#16a34a; }
.tip.amber { border-color:#f59e0b; }
.tip.red { border-color:#ef4444; }
.tip-head { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 10px; color:#fff; font-size:13px; font-weight:700; }
.tip.green .tip-head { background:#16a34a; }
.tip.amber .tip-head { background:#d97706; }
.tip.red .tip-head { background:#dc2626; }
.tip-head .pos { font-size:14px; }
.tip-head .nf { font-size:14px; font-weight:800; }
.tip-main { padding:8px 10px 6px; }
.tip-main .m1 { font-size:14px; font-weight:700; color:#111827; line-height:1.2; }
.tip-main .m2 { font-size:13px; font-weight:600; color:#374151; margin-top:2px; white-space:nowrap; }
.tip-grid { padding:6px 10px 9px; border-top:1px solid #eee; display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; }
.tip-grid div { font-size:11px; color:#6b7280; line-height:1.35; }
.tip-grid b { color:#374151; font-weight:600; }
.frente { position:absolute; writing-mode:vertical-rl; text-orientation:upright; font-weight:800; color:#9ca3af; letter-spacing:5px; font-size:18px; }
.estbox { position:absolute; border:1px dashed #d1d5db; border-radius:8px; background:#fafafa; }
.estlabel { position:absolute; font-size:12px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:1px; }
.legend { margin-top:10px; font-size:12px; color:#6b7280; display:flex; gap:16px; flex-wrap:wrap; max-width:760px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend .dot { width:16px; height:13px; border-radius:3px; display:inline-block; }
.dot.dot-mounted { background:#000; border:2px solid #16a34a; }
.dot.dot-emptyreq { background:#fef2f2; border:2px solid #ef4444; }
.dot.dot-fora { background:#fff; border:2px solid #f59e0b; }
.dot.dot-empty { background:#f3f4f6; border:2px dashed #cbd5e1; }
.dot.dot-ina { background:#000; border:2px solid #ef4444; }

/* Mobile: chassi com leve redução para caber */
@media (max-width: 768px) {
  .chassi-canvas { transform: scale(.78); transform-origin: top left; }
  .pneus-chassi-area { justify-content:flex-start; }
  .pneus-input { min-width:140px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bases de Dados (/bases) — monitoramento de disco, árvore estilo VSCode
   ══════════════════════════════════════════════════════════════════════════ */
.bases-cards { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.bases-card {
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  min-width:210px; flex:1 1 210px;
}
.bases-card-icon {
  width:42px; height:42px; border-radius:10px; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-3); color:var(--seka-green); font-size:20px;
}
.bases-card-valor { font-size:20px; font-weight:700; color:var(--fg-1); line-height:1.1; }
.bases-card-titulo { font-size:12px; color:var(--fg-2); margin-top:2px; }

.bases-tree { padding:8px 6px; font-size:13px; }
.bases-tree .bases-head {
  font-weight:600; color:var(--fg-2); font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; border-bottom:1px solid var(--border-1); cursor:default;
}
.bases-row {
  display:flex; align-items:center; gap:8px;
  padding:5px 8px; border-radius:6px; white-space:nowrap;
}
.bases-row .bases-name { flex:1 1 auto; display:flex; align-items:center; gap:8px;
  overflow:hidden; text-overflow:ellipsis; }
.bases-row .bases-meta { flex:0 0 130px; text-align:right; color:var(--fg-2); font-size:12px; }
.bases-row .bases-size { flex:0 0 90px; text-align:right; color:var(--fg-1);
  font-variant-numeric:tabular-nums; font-weight:500; }
.bases-icon { color:var(--fg-2); }
.bases-icon-folder { color:var(--seka-green); }
.bases-count { color:var(--fg-2); font-size:11px; margin-left:6px; }

.bases-folder { cursor:pointer; user-select:none; }
.bases-row.bases-folder:hover, .bases-row.bases-file:hover { background:var(--bg-3); }

/* indentação dos níveis (children dentro de <details>) */
.bases-children { margin-left:18px; border-left:1px solid var(--border-1); padding-left:4px; }
/* marcador do <details> discreto */
.bases-details > summary { list-style:none; }
.bases-details > summary::-webkit-details-marker { display:none; }
.bases-details > summary::before {
  content:"\F285"; font-family:"bootstrap-icons"; color:var(--fg-2);
  font-size:11px; margin-right:2px; transition:transform .12s ease; display:inline-block;
}
.bases-details[open] > summary::before { transform:rotate(90deg); }

/* botão de pré-visualização (olho), discreto e visível ao passar o mouse */
.bases-preview-btn {
  background:none; border:none; padding:0 4px; margin-left:6px; cursor:pointer;
  color:var(--fg-2); font-size:13px; line-height:1; opacity:0;
  transition:opacity .12s ease, color .12s ease;
}
.bases-row.bases-file:hover .bases-preview-btn { opacity:.7; }
.bases-preview-btn:hover { color:var(--seka-green); opacity:1 !important; }

/* modal de pré-visualização */
.bases-preview-dialog { max-width:min(1480px, 95vw) !important; }
.bases-preview-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.bases-preview-info { font-size:12px; color:var(--fg-2); margin-left:auto; }
.bases-preview-banner:empty { display:none; }
.bases-preview-banner {
  font-size:12px; color:#8a5a00; background:#fff6e0; border:1px solid #ffe3a3;
  border-radius:6px; padding:6px 10px; margin-bottom:10px;
}
.bases-preview-pager { display:flex; align-items:center; gap:14px; margin-left:auto; }
.bases-preview-range { font-size:12px; color:var(--fg-2); min-width:120px; text-align:center; }

/* ═══════════════════════════════════════════════════════
   BI's — grade de dashboards (padrão hub) + tela do BI
   ═══════════════════════════════════════════════════════ */
.bi-search-wrap { margin: 16px 0 18px; }

/* Campo de busca: input ocupa a largura e a lupa fica integrada à direita
   (sem caixinha separada), na cor do texto interno. */
.bi-search-box { position: relative; max-width: 480px; }
.bi-search-input.form-control {
  height: 42px; font-size: 14px; padding: 8px 40px 8px 14px; border-radius: 10px;
}
.bi-search-ic {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--fg-2); font-size: 15px; pointer-events: none; line-height: 1;
}

/* Cada célula do .hub-grid é um wrapper posicionado que contém o .hub-card
   (link) + controles de admin (lápis / setas) sobrepostos. */
.bi-card-wrap { position: relative; display: flex; }
.bi-card-wrap > .hub-card { width: 100%; }
.bi-card-wrap .hub-icon-wrap .bi { font-size: 30px; color: var(--seka-green); line-height: 1; }
/* Descrição um pouco menor que o padrão do hub (podem ser textos mais longos) */
.bi-card-wrap .hub-card-desc { font-size: 12px; }

/* Lápis de edição (canto inferior direito) */
.bi-card-pencil {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--bg-1); color: var(--fg-2);
  display: grid; place-items: center; font-size: 13px; padding: 0;
  opacity: 0; transition: opacity .16s ease, color .16s ease, border-color .16s ease;
}
.bi-card-wrap:hover .bi-card-pencil { opacity: 1; }
.bi-card-pencil:hover { color: var(--seka-green); border-color: var(--seka-green); }

/* Setas de reordenação (aparecem só no modo reordenar) */
.bi-card-reorder {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: none; flex-direction: column; gap: 6px;
}
.bi-reorder-btn {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; padding: 0;
  border: 1px solid var(--border-2); background: var(--bg-1); color: var(--fg-1);
  display: grid; place-items: center; font-size: 13px;
}
.bi-reorder-btn:hover { border-color: var(--seka-green); color: var(--seka-green); }

/* Modo reordenar: desativa navegação do card, esconde lápis, mostra setas */
.bis-grid.bi-reordering .hub-card { pointer-events: none; }
.bis-grid.bi-reordering .bi-card-wrap { outline: 1px dashed var(--border-2); border-radius: 12px; }
.bis-grid.bi-reordering .bi-card-pencil { display: none; }
.bis-grid.bi-reordering .bi-card-reorder { display: flex; }

/* ── Tela dedicada do BI (/bis/<id>) ── */
/* A tela de BI usa quase toda a largura da viewport (o dashboard aparece o maior
   possível), sem ultrapassar a tela — ajusta-se ao tamanho de quem visualiza. */
.bi-page-container { max-width: none; }
.bi-page-fs { display: flex; flex-direction: column; }
.bi-page-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.bi-page-title { font-size: 18px; font-weight: 600; color: var(--seka-green); margin: 0; }
.bi-page-actions { display: flex; gap: 8px; }
.bi-page-frame-wrap {
  position: relative; width: 100%; max-width: 100%; box-sizing: border-box;
  /* 210px cobre o cabeçalho real da tela (paddings do .page-container 28+48, link
     "← Voltar", region-strip e a bi-page-bar ≈ 201px) — evita o scroll vertical
     residual quando o dashboard cabe. */
  height: calc(100vh - 210px); min-height: 460px;
  border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden;
  background: var(--bg-2);
}
.bi-page-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bi-page-fs:fullscreen { background: var(--bg-1); padding: 14px; }
.bi-page-fs:fullscreen .bi-page-frame-wrap { flex: 1; height: auto; min-height: 0; }

@media (max-width: 768px) {
  .bi-page-bar { flex-direction: column; align-items: stretch; }
  .bi-page-actions { justify-content: space-between; }
  .bi-page-frame-wrap { height: calc(100vh - 200px); }
}

/* ── Liberações de Acesso (/sistema/liberacoes) ── */
.lib-user-list { display: flex; flex-direction: column; gap: 5px; max-height: 65vh;
  overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.lib-user-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  cursor: pointer; font: inherit;
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 8px;
  padding: 6px 10px; color: var(--fg-1);
  transition: border-color .12s ease, background .12s ease;
}
.lib-user-item:hover { border-color: var(--seka-green); background: var(--bg-2); }
.lib-user-item.active { border-color: var(--seka-green); background: var(--bg-2);
  box-shadow: inset 3px 0 0 var(--seka-green); }
.lib-user-num  { color: #999; font-size: 11px; min-width: 26px; flex-shrink: 0; }
.lib-user-name { flex: 1; min-width: 0; font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-user-badge { font-size: 10px; flex-shrink: 0; }
.lib-mod-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.lib-mod-card {
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 12px;
  padding: 14px 16px;
}
.lib-mod-list { display: flex; flex-direction: column; gap: 10px; }
.lib-mod-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-mod-title { font-weight: 700; font-size: 14px; color: var(--fg-1); }
.lib-mod-switch { margin-left: auto; }
.lib-mod-body { padding-top: 10px; margin-top: 8px; border-top: 1px dashed var(--border-1); }
/* v3 (Rodada 5): caret de expansão + coringa + linha-por-tela com ações inline. */
.lib-mod-caret {
  background: none; border: 0; color: var(--fg-2, #888); cursor: pointer;
  padding: 0 4px; font-size: 13px; line-height: 1;
}
.lib-mod-caret:hover { color: var(--fg-1); }
.lib-coringa-switch { margin: 2px 0 8px; font-size: 13px; font-weight: 600; }
.lib-screen-list { display: flex; flex-direction: column; gap: 2px; }
.lib-screen-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 2px 6px; border-radius: 8px;
}
.lib-screen-row:hover { background: var(--bg-2, rgba(0,0,0,0.02)); }
.lib-screen-row.lib-screen-off { opacity: 0.7; }
.lib-screen-row .form-check { margin-bottom: 0; }
.lib-screen-switch { font-size: 13px; min-width: 240px; }
.lib-screen-name { font-size: 13px; }
.lib-actions { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; margin-left: auto; }
.lib-actions .form-check { margin: 0; }