/* ============================================================
   Sistema Rodo Wall — Telas internas do PAD (Gestão do Motorista)
   ------------------------------------------------------------
   Os tokens --p* e a casca (menu lateral, cabeçalho) vêm de
   css/comum/padrao.css. Aqui ficam as telas do módulo, até a
   etapa de migração do PAD.
   ============================================================ */

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

/* ---------- 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:var(--r-lg); position:relative; overflow:hidden;
  min-width:150px; flex:1; padding:16px 18px;
  transition:background var(--t), border-color var(--t);
}
#app .sc:hover{
  background:var(--pcard-h);
  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(--ptx2); font-weight:500; font-size:var(--fs-sm); }
#app .sc-val{ font-weight:600; font-size:var(--fs-num); color:var(--ptx); font-variant-numeric:tabular-nums; }
#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:var(--r-lg); color:var(--ptx); font-size:var(--fs-md);
}
#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:var(--r-lg); font-family:var(--pfd); font-weight:600; }

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

/* ---------- Tabelas: padrão cl-table ---------- */
#app table th{
  color:var(--ptx3); font-weight:600; font-size:var(--fs-xs);
  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:var(--r-lg); font-weight:600;
  transition:all .2s;
}
#app .btn:hover, #app .act-btn:hover{ 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:var(--r-full); font-weight:600;
}
#app .active-filter-tag{
  background:var(--pacc-dim); color:var(--pacc);
  border:1px solid var(--pacc); border-radius:var(--r-full);
}

/* ---------- Dashboard do PAD ---------- */
#app .dash-card{
  background:var(--pcard); border:1px solid var(--pbor);
  border-radius:var(--r-lg);
}
#app .dash-card:hover{ border-color:var(--pbor-b); }
#app .dc-title{
  font-family:var(--pfd); font-weight:600; 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:600; }

/* ---------- 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:var(--r-lg); 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; font-size:var(--fs-xs); }

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

/* (Modais: o skin unificado vive em 17-admin-skin.css — os remendos
   com !important que existiam aqui foram removidos.) */

/* ---------- 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:var(--fs-xl); }
  #app input, #app select, #app textarea{ font-size:var(--fs-lg) !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:var(--r-lg); color:var(--ptx); padding:8px 10px; font-size:var(--fs-sm);
}
#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:var(--fs-xs); font-weight:600; color:var(--ptx3); flex-basis:100%;
}
#app .gf-row-sep{ font-size:var(--fs-xs); 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:var(--r-lg); color:var(--ptx); padding:7px 9px; font-size:var(--fs-xs);
}
#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:var(--r-sm);
  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:var(--r-full); padding:4px 10px; font-size:var(--fs-xs); font-weight:600;
}

/* 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:var(--r-full);
  border:1px solid var(--border2); background:var(--surface2);
  color:var(--text2); font-weight:600; font-size:var(--fs-sm); cursor:pointer;
  transition:all .2s;
}
.perms-grupo-btn:hover{ border-color:var(--accent); color:var(--accent-text); }
.perms-grupo-btn.active{
  background:var(--accent-dim); border-color:var(--accent); color:var(--accent-text); font-weight:600;
}

.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:var(--font); font-weight:600;
  font-size:var(--fs-xl); color:var(--text);
}
.perms-grupo-sub{ font-size:var(--fs-xs); color:var(--text3); margin-top:2px; }
.perms-grupo-acoes{ display:flex; gap:8px; flex-wrap:wrap; }
.perms-mini-btn{
  padding:6px 12px; border-radius:var(--r-sm); font-size:var(--fs-xs); 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:var(--accent); color:var(--accent-text); }

.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:var(--r-lg);
  background:var(--surface); border:1px solid var(--border);
  transition:border-color .2s, background .2s;
}
.perms-item.on{ border-color:var(--accent); background:var(--accent-dim); }
.perms-item-txt{ flex:1; min-width:0; }
.perms-item-nome{ font-weight:600; font-size:var(--fs-md); color:var(--text); }
.perms-item-desc{ font-size:var(--fs-xs); color:var(--text2); margin-top:3px; line-height:1.4; }

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

/* ============================================================
   Acordeão de categorias — tela central de Permissões
   ============================================================ */
.perms-cats{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.perms-cat{
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
  overflow:hidden;
}
.perms-cat.aberta{ border-color:var(--accent); }
.perms-cat-head{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:14px 16px; background:transparent; border:none; cursor:pointer;
  text-align:left; font:inherit; color:var(--text);
}
.perms-cat-head:hover{ background:var(--surface2); }
.perms-cat-toggle{
  width:22px; height:22px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); background:var(--surface2); color:var(--text2);
  font-weight:600; font-size:var(--fs-lg); line-height:1;
}
.perms-cat.aberta .perms-cat-toggle{ background:var(--accent-dim); color:var(--accent-text); }
.perms-cat-title{ flex:1; font-weight:600; font-size:var(--fs-md); }
.perms-cat-count{ font-size:var(--fs-xs); color:var(--text3); font-weight:600; }
.perms-cat-body{ padding:0 16px 16px; }

/* ============================================================
   Mini-matriz contextual — atalho dentro da própria função
   ============================================================ */
.perms-mini-wrap{ margin-top:4px; }
.perms-mini-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.perms-mini-table th, .perms-mini-table td{
  padding:8px 10px; border-bottom:1px solid var(--border); text-align:center;
}
.perms-mini-table th{ color:var(--text2); font-weight:600; font-size:var(--fs-xs); }
.perms-mini-table td:first-child, .perms-mini-table th:first-child{ text-align:left; }
.perms-mini-actions{
  display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:12px; flex-wrap:wrap;
}
.perms-mini-warn{ font-size:var(--fs-xs); color:var(--orange); }

@media (max-width: 860px){
  .perms-item{ padding:12px 14px; }
  .perms-grupo-acoes{ width:100%; }
  .perms-mini-btn{ flex:1; }
  .perms-mini-table{ font-size:var(--fs-xs); }
  .perms-mini-table th, .perms-mini-table td{ padding:6px 6px; }
}