/* ============================================================
   Sistema Rodo Wall — Skin do PAD na linguagem do Checklist
   ------------------------------------------------------------
   Veste o módulo Gestão do Motorista com o MESMO design do
   módulo Checklist (o mais bonito): tokens locais espelhados,
   cards limpos com faixa de destaque, Rajdhani nos números e
   títulos, item ativo com borda, pílulas com ponto, cantos 12px.
   Carregada por último — apenas sobrepõe, não remove nada.
   ============================================================ */

/* ---------- Tokens: ALIAS do tema da plataforma ----------
   LIÇÃO: a 1a versão criava uma paleta paralela (fundo quase preto)
   que brigava com o navy dos componentes — o "preto sem nexo".
   Agora a skin herda o tema (claro/escuro seguem automaticamente)
   e aplica apenas a LINGUAGEM do checklist: cantos, Rajdhani,
   faixa no topo, borda ativa e anel de foco no accent. */
#app{
  --pbg:var(--bg); --pcard:var(--surface); --pcard-h:var(--surface2);
  --pacc:#3b82f6; --pacc-dim:rgba(59,130,246,.14); --pacc-glow:rgba(59,130,246,.22);
  --pbor:var(--border); --pbor-b:var(--border2);
  --ptx:var(--text); --ptx2:var(--text2); --ptx3:var(--text3);
  --pfd:'Rajdhani',sans-serif;
}
[data-theme="light"] #app{
  --pacc:#2563eb; --pacc-dim:rgba(37,99,235,.10); --pacc-glow:rgba(37,99,235,.16);
}

/* ---------- Fundo do módulo ---------- */
#app{ background:var(--pbg); }
#app .main{ background:transparent; }

/* ---------- Topbar: mantém o navy da marca, refina o acabamento ---------- */
#app .topbar{ box-shadow:0 6px 22px rgba(2,13,63,.25); }
#app .tn{
  border-radius:9px; padding:7px 13px; font-weight:600;
  border-bottom:2px solid transparent;
  transition:all .22s cubic-bezier(.4,0,.2,1);
}
#app .tn:hover{ background:rgba(255,255,255,.08); color:#fff; }
#app .tn.active{
  background:rgba(59,130,246,.18); color:#9cc3ff;
  border-bottom-color:#3b82f6; font-weight:700;
}

/* ---------- Statsbar: stat-cards do checklist (faixa no topo) ---------- */
#app .statsbar{
  background:transparent; border:none; gap:14px;
  padding:16px 20px 2px; flex-wrap:wrap;
}
#app .sc{
  background:var(--pcard); border:1px solid var(--pbor) !important;
  border-radius:12px; position:relative; overflow:hidden;
  min-width:150px; flex:1; padding:16px 18px;
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
}
#app .sc::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--pacc);
}
#app .sc:hover{
  background:var(--pcard-h);
  transform:translateY(-3px); box-shadow:0 10px 28px rgba(2,13,63,.16);
  border-color:var(--pbor-b) !important;
}
#app .sc.active-filter{
  background:var(--pacc-dim); border-color:var(--pacc) !important;
  border-bottom:1px solid var(--pacc);
}
#app .sc-lbl{ color:var(--ptx3); font-weight:700; letter-spacing:1.2px; font-size:9.5px; }
#app .sc-val{ font-family:var(--pfd); font-weight:700; font-size:28px; color:var(--ptx); }
#app .sc-sub{ color:var(--ptx2); }

/* ---------- Sidebar (lista de motoristas): card branco/limpo ---------- */
#app .sidebar{
  background:var(--pcard); border-right:1px solid var(--pbor);
}
#app .sb-head{ background:var(--pcard); border-bottom:1px solid var(--pbor); }
#app .sb-search input{
  background:var(--pcard-h); border:1px solid var(--pbor-b);
  border-radius:9px; color:var(--ptx); font-size:14px;
}
#app .sb-search input:focus{
  border-color:var(--pacc);
  box-shadow:0 0 0 3px var(--pacc-glow);
}
#app .dc{ border-bottom:1px solid var(--pbor); border-left:3px solid transparent; transition:all .18s; }
#app .dc:hover{ background:var(--pcard-h); border-left-color:var(--pbor-b); }
#app .dc.active{ background:var(--pacc-dim); border-left:3px solid var(--pacc); }
#app .dc-name{ color:var(--ptx); font-weight:600; }
#app .dc-meta, #app .dc-lbl{ color:var(--ptx3); }
#app .nb-lv{ border-radius:10px; font-family:var(--pfd); font-weight:700; }

/* ---------- Painel de detalhe ---------- */
#app .detail{ background:transparent; }
#app .detail-inner > div, #app .bd-section{
  border-radius:12px;
}
#app .bd-section{
  background:var(--pcard); border:1px solid var(--pbor);
  padding:16px;
}
#app .bd-lbl{ color:var(--ptx3); font-weight:700; letter-spacing:.8px; }
#app .bd-val{ font-family:var(--pfd); font-weight:700; color:var(--ptx); }
#app .bd-bar{ background:var(--pcard-h); border-radius:999px; }
#app .bd-fill{ border-radius:999px; }

/* ---------- Tabelas: padrão cl-table ---------- */
#app table th{
  color:var(--ptx3); font-weight:700; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.8px;
  background:var(--pcard-h);
  border-bottom:1px solid var(--pbor);
}
#app table td{ border-bottom:1px solid var(--pbor); color:var(--ptx); }
#app table tbody tr{ transition:background .15s; }
#app table tbody tr:hover{ background:var(--pcard-h); }

/* ---------- Botões: acabamento do checklist ---------- */
#app .btn, #app .act-btn, #app .vbtn, #app .mbtn, #app .fb{
  border-radius:9px; font-weight:600;
  transition:all .2s;
}
#app .btn:hover, #app .act-btn:hover, #app .mbtn:hover{
  transform:translateY(-1px); filter:brightness(1.06);
}
#app .vbtn-ok:hover{ filter:brightness(1.1); }

/* ---------- Chips, tags e pílulas: ponto colorido ---------- */
#app .achip, #app .ctag, #app .acao-tag, #app .rc-chip{
  border-radius:999px; font-weight:700;
}
#app .active-filter-tag{
  background:var(--pacc-dim); color:var(--pacc);
  border:1px solid var(--pacc); border-radius:999px;
}

/* ---------- Dashboard do PAD ---------- */
#app .dash-card{
  background:var(--pcard); border:1px solid var(--pbor);
  border-radius:12px;
}
#app .dash-card:hover{ border-color:var(--pbor-b); }
#app .dc-title{
  font-family:var(--pfd); font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--ptx);
}
#app .top-item{ border-bottom:1px solid var(--pbor); }
#app .top-name{ color:var(--ptx); }
#app .top-pts{ font-family:var(--pfd); font-weight:700; }

/* ---------- Formulários do PAD (registro/validação) ---------- */
#app .fi, #app .fta, #app .val-inp, #app .df-inp, #app .act-inp, #app .df-search, #app .tower-link-inp{
  background:var(--pcard-h); border:1px solid var(--pbor-b);
  border-radius:9px; color:var(--ptx);
  transition:border-color .2s, box-shadow .2s;
}
#app .fi:focus, #app .fta:focus, #app .val-inp:focus, #app .df-inp:focus, #app .df-search:focus{
  border-color:var(--pacc); box-shadow:0 0 0 3px var(--pacc-glow); outline:none;
}
#app .fg label{ color:var(--ptx3); font-weight:600; letter-spacing:.6px; text-transform:uppercase; font-size:11px; }

/* ---------- Área de importação ---------- */
#app .import-drop{
  background:var(--pcard); border:1.5px dashed var(--pbor-b);
  border-radius:12px; transition:border-color .2s;
}
#app .import-drop:hover{ border-color:var(--pacc); }

/* ---------- Modais (admin/gerais): cantos e sombra do checklist ---------- */
.modal{
  border-radius:16px !important;
  box-shadow:0 24px 60px rgba(8,11,18,.35) !important;
}
.modal-title{ font-family:'Rajdhani','Montserrat',sans-serif !important; letter-spacing:.5px; }

/* ---------- Mobile extra do PAD (harmoniza com o checklist) ---------- */
@media (max-width: 860px){
  #app .statsbar{ padding:12px 12px 0; gap:10px; }
  #app .sc{ min-width:44%; padding:13px 14px; }
  #app .sc-val{ font-size:22px; }
  #app input, #app select, #app textarea{ font-size:16px !important; }
  #app .detail-inner{ padding:12px; }
}


/* ---------- Sidebar: filtros e período sem empilhamento estranho ---------- */
#app .sb-head{ gap:10px; }
#app .frow{ display:flex; align-items:center; gap:8px; }
#app .fb{ flex:1; text-align:center; }

/* Select de ordenação no padrão dos inputs do checklist */
#app .sort-sel{
  width:100%; background:var(--pcard-h); border:1px solid var(--pbor-b);
  border-radius:9px; color:var(--ptx); padding:8px 10px; font-size:13px;
}
#app .sort-sel:focus{ border-color:var(--pacc); box-shadow:0 0 0 3px var(--pacc-glow); outline:none; }

/* Linha de período: rótulo + 2 datas + limpar, tudo na horizontal */
#app .gf-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
#app .gf-row-label{
  font-size:10px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--ptx3); flex-basis:100%;
}
#app .gf-row-sep{ font-size:11px; color:var(--ptx3); }
#app .gf-row input[type="date"]{
  flex:1; min-width:110px;
  background:var(--pcard-h); border:1px solid var(--pbor-b);
  border-radius:9px; color:var(--ptx); padding:7px 9px; font-size:12px;
}
#app .gf-row input[type="date"]:focus{
  border-color:var(--pacc); box-shadow:0 0 0 3px var(--pacc-glow); outline:none;
}
#app .gf-clear-btn{
  width:28px; height:28px; flex-shrink:0; border-radius:8px;
  background:var(--pcard-h); border:1px solid var(--pbor-b); color:var(--ptx2);
  cursor:pointer;
}
#app .gf-active-tag{
  background:var(--pacc-dim); color:var(--pacc); border:1px solid var(--pacc);
  border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700;
}

/* Estado vazio da lista: discreto, sem parecer um card solto */
#app .dlist > div:only-child{ border:none; background:transparent; }


/* ---------- Performance: desliga blur em telas pequenas / low-power ---------- */
@media (max-width: 860px){
  *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}
@media (prefers-reduced-motion: reduce){
  *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
     animation-duration:.01ms !important; transition-duration:.05ms !important; }
}

/* ============================================================
   Tela de Permissões — redesenho (grupo → funções uma a uma)
   ============================================================ */
.perms-grupos{
  display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 18px;
}
.perms-grupo-btn{
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--border2); background:var(--surface2);
  color:var(--text2); font-weight:600; font-size:13px; cursor:pointer;
  transition:all .2s;
}
.perms-grupo-btn:hover{ border-color:#2563eb; color:#2563eb; }
.perms-grupo-btn.active{
  background:rgba(37,99,235,.12); border-color:#2563eb; color:#2563eb; font-weight:700;
}
[data-theme="light"] .perms-grupo-btn.active{ background:rgba(37,99,235,.1); }

.perms-grupo-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid var(--border);
}
.perms-grupo-nome{
  font-family:'Rajdhani','Montserrat',sans-serif; font-weight:700;
  font-size:20px; letter-spacing:.5px; color:var(--text);
}
.perms-grupo-sub{ font-size:12px; color:var(--text3); margin-top:2px; }
.perms-grupo-acoes{ display:flex; gap:8px; }
.perms-mini-btn{
  padding:6px 12px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer;
  border:1px solid var(--border2); background:var(--surface2); color:var(--text2);
  transition:all .18s;
}
.perms-mini-btn:hover{ border-color:#2563eb; color:#2563eb; }

.perms-lista{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.perms-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border);
  transition:border-color .2s, background .2s;
}
.perms-item.on{ border-color:rgba(37,99,235,.4); background:rgba(37,99,235,.05); }
.perms-item-txt{ flex:1; min-width:0; }
.perms-item-nome{ font-weight:600; font-size:14px; color:var(--text); }
.perms-item-desc{ font-size:12px; color:var(--text2); margin-top:3px; line-height:1.4; }

/* switch reaproveita o estilo existente .perms-switch/.perms-slider */

@media (max-width: 860px){
  .perms-item{ padding:12px 14px; }
  .perms-grupo-acoes{ width:100%; }
  .perms-mini-btn{ flex:1; }
}