/* ============================================================
   Sistema Rodo Wall — Adições: Ferramentas de TI, Permissões,
   Grupos, Papel de parede e Aparência
   ------------------------------------------------------------
   Botão de tema, avisos (toast), confirmação e tela de módulos
   passaram para css/comum/padrao.css.
   ============================================================ */

/* ---------- Ferramentas de TI (a janela em si vem do padrão) ---------- */
.tool-card{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px;margin-bottom:12px;
}
.tool-card:last-child{margin-bottom:0;}
.tool-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.tool-card-icon{
  width:36px;height:36px;border-radius:var(--r-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-dim);color:var(--accent-text);
}
.tool-card-icon.perigo{background:var(--red-dim);color:var(--red);}
.tool-card-title{font-size:var(--fs-md);font-weight:600;color:var(--text);}
.tool-card-desc{font-size:var(--fs-sm);color:var(--text2);line-height:1.5;margin:0 0 12px;}
.tool-card-desc strong{color:var(--text);}
.tool-card .cl-aviso{margin:12px 0 0;}
.tool-file-drop{
  border:1px dashed var(--border2);border-radius:var(--r-sm);
  padding:14px;text-align:center;cursor:pointer;
  transition:border-color var(--t);margin-bottom:10px;
  background:var(--surface);font-size:var(--fs-sm);color:var(--text2);
}
.tool-file-drop:hover{border-color:var(--accent);}
.tool-file-drop input{display:none;}
.tool-import-info{
  background:var(--green-dim);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--fs-sm);
  color:var(--text);margin-bottom:10px;display:none;line-height:1.5;
}

/* ============================================================
   Tela de Permissões por Grupo (Admin)
   ============================================================ */
.perms-intro{margin-bottom:20px;}
.perms-intro-title{
  font-family:var(--font);font-size:var(--fs-xl);font-weight:600;
  color:var(--text);margin-bottom:6px;
}
.perms-intro-desc{
  font-size:var(--fs-sm);color:var(--text2);line-height:1.6;max-width:760px;
}
.perms-intro-desc strong{color:var(--text);}

.perms-table-wrap{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:18px;
}
.perms-table{width:100%;border-collapse:collapse;}
.perms-table thead th{
  background:var(--surface2);
  font-family:var(--font);font-size:var(--fs-xs);font-weight:600;color:var(--text2);
  padding:14px 12px;text-align:center;border-bottom:2px solid var(--border);
}
.perms-table thead th.perms-fn-col{text-align:left;min-width:240px;}
.perms-grp-col{min-width:90px;}
.perms-table tbody td{
  padding:14px 12px;border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.perms-table tbody tr:last-child td{border-bottom:none;}
.perms-table tbody tr:hover{background:var(--surface2);}
.perms-fn-cell{text-align:left;}
.perms-fn-nome{
  font-family:var(--font);font-size:var(--fs-sm);font-weight:600;
  color:var(--text);margin-bottom:2px;
}
.perms-fn-desc{font-size:var(--fs-xs);color:var(--text3);line-height:1.4;}
.perms-check-cell{text-align:center;}

/* Toggle switch */
.perms-switch{
  position:relative;display:inline-block;width:42px;height:24px;cursor:pointer;
}
.perms-switch input{opacity:0;width:0;height:0;position:absolute;}
.perms-slider{
  position:absolute;inset:0;background:var(--surface3);
  border:1px solid var(--border2);border-radius:var(--r-full);transition:all .2s;
}
.perms-slider::before{
  content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;
  background:var(--text3);border-radius:50%;transition:all .2s;
}
.perms-switch input:checked + .perms-slider{
  background:var(--green);border-color:var(--green);
}
.perms-switch input:checked + .perms-slider::before{
  transform:translateX(18px);background:#fff;
}
.perms-switch-locked{cursor:not-allowed;opacity:.65;}
.perms-switch-locked .perms-slider{
  background:var(--accent-dim);border-color:var(--accent);
}
.perms-switch-locked input:checked + .perms-slider{
  background:var(--accent);border-color:var(--accent);
}
.perms-switch-locked input:checked + .perms-slider::before{background:var(--navy);}

.perms-actions{
  display:flex;flex-direction:column;gap:12px;
}
.perms-warn{
  background:var(--orange-dim);border:1px solid rgba(251,146,60,.3);
  border-radius:var(--r-sm);padding:10px 14px;font-size:var(--fs-xs);color:var(--orange);
  line-height:1.5;
}
.perms-btns{display:flex;gap:10px;justify-content:flex-end;}
.perms-btn-reset{
  padding:10px 18px;border-radius:var(--r-sm);
  border:1px solid var(--border2);background:var(--surface2);
  color:var(--text2);font-family:var(--font);font-size:var(--fs-sm);font-weight:600;
  cursor:pointer;transition:all .15s;
}
.perms-btn-reset:hover{background:var(--surface3);color:var(--text);}
.perms-btn-save{
  padding:10px 22px;border-radius:var(--r-sm);border:none;
  background:var(--green-solid);color:#fff;
  font-family:var(--font);font-size:var(--fs-sm);font-weight:600;
  cursor:pointer;transition:all .15s;
}
.perms-btn-save:hover{filter:brightness(1.1);}

/* ============================================================
   Tela de Grupos (Admin)
   ============================================================ */
.grupos-intro{margin-bottom:20px;}
.grupos-intro-title{
  font-family:var(--font);font-size:var(--fs-xl);font-weight:600;
  color:var(--text);margin-bottom:6px;
}
.grupos-intro-desc{
  font-size:var(--fs-sm);color:var(--text2);line-height:1.6;max-width:760px;
}
.grupos-intro-desc strong{color:var(--text);}

.grupos-add-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:18px;margin-bottom:20px;
}
.grupos-add-title{
  font-family:var(--font);font-size:var(--fs-sm);font-weight:600;
  color:var(--text);margin-bottom:14px;
}
.grupos-add-row{
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
}
.grupos-add-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:160px;}
.grupos-add-field label{
  font-size:var(--fs-xs);color:var(--text2);font-family:var(--font);
  font-weight:600;
}
.grupos-add-field input,.grupos-add-field select{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:10px 12px;color:var(--text);
  font-size:var(--fs-sm);font-family:var(--font);outline:none;
  transition:border-color .2s;
}
.grupos-add-field input:focus,.grupos-add-field select:focus{
  border-color:var(--accent);
}

.grupos-list{display:flex;flex-direction:column;gap:8px;}
.grupo-item{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:12px 16px;
}
.grupo-item-left{display:flex;align-items:center;gap:10px;flex:1;}
.grupo-badge{
  padding:4px 12px;border-radius:var(--r-full);
  font-family:var(--font);font-size:var(--fs-xs);font-weight:600;
}
.grupo-id-tag{
  font-family:var(--font);font-size:var(--fs-xs);
  color:var(--text3);background:var(--surface2);
  padding:2px 8px;border-radius:var(--r-sm);
}
.grupo-locked-tag{
  font-size:var(--fs-xs);font-family:var(--font);font-weight:600;
  color:var(--mustard-text);background:var(--mustard-dim);
  padding:2px 8px;border-radius:var(--r-sm);
}
.grupo-item-info{
  font-size:var(--fs-xs);color:var(--text2);font-family:var(--font);
  min-width:90px;text-align:right;
}
.grupo-item-actions{display:flex;gap:8px;}
.grupo-edit-btn,.grupo-del-btn{
  padding:7px 14px;border-radius:var(--r-sm);
  font-family:var(--font);font-size:var(--fs-xs);font-weight:600;
  cursor:pointer;transition:all .15s;border:1px solid var(--border2);
}
.grupo-edit-btn{background:var(--surface2);color:var(--text2);}
.grupo-edit-btn:hover{background:var(--surface3);color:var(--text);}
.grupo-del-btn{background:var(--red-dim);color:var(--red);border-color:rgba(248,113,113,.3);}
.grupo-del-btn:hover{background:var(--red);color:#fff;}


/* ============================================================
   Polimento de interação
   ============================================================ */


/* Cards principais ganham uma elevação sutil ao passar o mouse */
.score-card,.reg-card,.dash-card{
  transition:box-shadow var(--t-base), border-color var(--t-base),
             background-color var(--t-slow);
}
.score-card:hover,.dash-card:hover{
  box-shadow:var(--elev-md);
  border-color:var(--border2);
}

/* Linhas de tabela com transição suave no hover */
.ev-table tr td{transition:background-color var(--t-fast);}
.crud-table tr td{transition:background-color var(--t-fast);}

/* Botões em geral: leve afundamento ao clicar (resposta tátil) */
.btn:active,.reg-btn:active,.act-btn:active,
.add-btn:active,.tool-action-btn:active,
.perms-btn-save:active{
  transform:translateY(1px);
}

/* ============================================================
   Papel de Parede Global + Efeito Vidro
   ------------------------------------------------------------
   Ativado quando o admin define uma foto (html[data-wallpaper]).
   A foto fica fixa ao fundo com um véu escuro; os painéis ficam
   semitransparentes com desfoque, mantendo a legibilidade.
   ============================================================ */
html[data-wallpaper="on"] body{
  background-image:
    linear-gradient(rgba(2,13,63,.78),rgba(10,20,48,.86)),
    var(--wallpaper);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
html[data-wallpaper="on"][data-theme="light"] body{
  background-image:
    linear-gradient(rgba(238,242,249,.82),rgba(238,242,249,.9)),
    var(--wallpaper);
}
@supports (backdrop-filter:blur(6px)){
  html[data-wallpaper="on"] .score-card,
  html[data-wallpaper="on"] .reg-card,
  html[data-wallpaper="on"] .dash-card,
  html[data-wallpaper="on"] .val-filters,
  html[data-wallpaper="on"] .asec,
  html[data-wallpaper="on"] .no-data,
  html[data-wallpaper="on"] .perms-table-wrap,
  html[data-wallpaper="on"] .grupos-add-card,
  html[data-wallpaper="on"] .grupo-item,
  html[data-wallpaper="on"] .aparencia-card{
    background:color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
}
/* #hubAdminScreen usava backdrop-filter (acima) pra desfocar o vão ao
   redor dos cartões, mas backdrop-filter depende de composição por GPU
   que nem todo ambiente oferece — testado e confirmado sem efeito nenhum
   em pelo menos um navegador real. Aqui, em vez de desfocar o que está
   ATRÁS do elemento, o papel de parede vira uma camada própria já
   borrada (filter, não backdrop-filter — suporte bem mais amplo), do
   mesmo jeito que já funciona comprovadamente no Hub principal
   (#hubScreen, mais acima neste arquivo). */
#hubAdminScreen{ position:relative; }
#hubAdminScreen > *{ position:relative; z-index:1; }
html[data-wallpaper="on"] #hubAdminScreen::before{
  content:"";
  position:absolute; inset:-16px; z-index:0;
  background:
    linear-gradient(rgba(2,13,63,.78),rgba(2,13,63,.86)),
    var(--wallpaper);
  background-size:cover; background-position:center;
  filter:blur(14px);
}
html[data-wallpaper="on"][data-theme="light"] #hubAdminScreen::before{
  background:
    linear-gradient(rgba(238,242,249,.82),rgba(238,242,249,.9)),
    var(--wallpaper);
}

/* Tela Admin > Aparência */
.aparencia-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-5);max-width:640px;
}
.aparencia-preview{
  border:1px dashed var(--border2);border-radius:var(--r-md);
  overflow:hidden;margin-bottom:var(--sp-4);
  min-height:180px;display:flex;align-items:center;justify-content:center;
  background:var(--surface2);
}
.aparencia-preview img{width:100%;height:auto;display:block;max-height:320px;object-fit:cover;}
.aparencia-vazio{color:var(--text3);font-size:var(--fs-xs);font-family:var(--font);padding:var(--sp-8);}
.aparencia-acoes{display:flex;gap:10px;flex-wrap:wrap;}
.aparencia-btn{
  display:inline-flex;align-items:center;padding:10px 18px;border-radius:var(--r-sm);
  border:none;background:var(--accent);color:var(--on-accent);
  font-family:var(--font);font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  transition:background var(--t-base);
}
.aparencia-btn:hover{background:var(--accent-hover);}
.aparencia-btn-rm{background:var(--red-dim);color:var(--red);border:1px solid rgba(232,97,95,.3);}
.aparencia-btn-rm:hover{background:var(--red);color:#fff;}
.aparencia-nota{font-size:var(--fs-xs);color:var(--text3);margin-top:var(--sp-3);line-height:1.5;}


/* Papel de parede na tela de módulos: camada própria, borrada */
html[data-wallpaper="on"] #hubScreen{
  /* O papel de parede vira uma camada à parte (::before), borrada — nos
     vãos entre os cards (onde não tem o blur do próprio .hub-card por
     cima) a imagem crua ficava visível, e se ela tiver texto (ex.: um
     pôster de missão/visão/valores, caso real testado), o texto sobra
     legível mesmo com um véu escuro forte por cima: contraste alto
     (letras brancas) atravessa qualquer opacidade razoável. Borrar a
     imagem em si resolve pra qualquer papel de parede, não só os lisos. */
  background:var(--navy);
}
html[data-wallpaper="on"] #hubScreen::before{
  content:"";
  position:fixed; inset:-16px;   /* fixed: a camada não entra na rolagem da tela */
  background:
    linear-gradient(rgba(2,13,63,.78),rgba(2,13,63,.86)),
    var(--wallpaper);
  background-size:cover;background-position:center;
  filter:blur(14px);
}

/* Painel de Administração: seções */
#hubAdminScreen .admin-body{
  display:flex;flex-direction:column;gap:0;
}
#hubAdminScreen .asec{display:none;}
#hubAdminScreen .asec.active{display:block;}

/* ============================================================
   Grade responsiva de 2 colunas — utilitário genérico
   ------------------------------------------------------------
   Usada pra aproveitar mais a largura da tela em modais grandes
   (estreou no "Ver plano" do módulo Atas, pedido do usuário,
   19/08/2026: "pode se usar mais a tela pra não ficar tanta coisa
   embaixo da outra"). Empilha numa coluna só em telas estreitas,
   senão o conteúdo fica espremido demais.
   ============================================================ */
.cl-grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;}
@media (max-width:700px){
  .cl-grid-2col{grid-template-columns:1fr;}
}