/* ============================================================================
   krypta-acessos.css — EDITOR DE NÍVEL DE ACESSO PADRÃO KRYPTA
   ============================================================================
   ARQUIVO 7 DE 7. Depende de krypta-tokens.css. Par obrigatório: krypta-acessos.js

   Prefixo: .adm-  (Administração)

   PROBLEMA QUE ESTE COMPONENTE RESOLVE
   ------------------------------------
   Telas de permissão viram uma sopa: um select aqui, um checkbox ali, um
   radio acolá, e o admin não consegue ler o estado atual sem abrir tudo.

   REGRA KRYPTA — CADA TIPO DE PERMISSÃO TEM UM SÓ CONTROLE:

     escolha única hierárquica  ->  .adm-seg     (segmented control)
        ex: nenhum | ver | editar | excluir | total
     multi-seleção              ->  .adm-chips   (chips clicáveis)
        ex: quais filiais, quais painéis, quais sub-abas
     booleano                   ->  .adm-switch  (toggle on/off)
        ex: "pode exportar?", "vê valores?"

   NUNCA misture. Um select nativo numa tela de permissão = fora do padrão.

   E O RESUMO NO CABEÇALHO
   -----------------------
   Cada acordeão mostra um chip (.adm-acc-summary) com o estado atual — o
   admin lê tudo SEM abrir nada. O JS preenche isso automaticamente.

   ESTRUTURA
   ---------
     <div class="modal-header adm-modal-header"> ... </div>
     <div class="modal-body">
        <div class="adm-ident-grid"> nome | usuário | senha </div>
        <div class="accordion adm-accordion">
           <div class="accordion-item">
              <h2 class="accordion-header">
                 <button class="accordion-button collapsed" ...>
                    Financeiro
                    <span class="adm-acc-summary" data-adm-summary="financeiro"></span>
                 </button>
              </h2>
              <div class="accordion-collapse collapse">
                 <div class="accordion-body">
                    <div class="adm-row">
                       <div class="adm-row-label">
                          <span class="adm-row-title"><i class="fas fa-coins"></i>Receita</span>
                          <span class="adm-row-desc">Acesso à aba de receita</span>
                       </div>
                       <div class="adm-row-control"> ... controle ... </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
     </div>
     <div class="modal-footer adm-modal-footer"> ... </div>
   ============================================================================ */

/* ============================================================================
   1. CABEÇALHO E RODAPÉ DO MODAL
   ============================================================================ */
.adm-modal-header {
    background: var(--krypta-gradient-brand);
    color: #FFFFFF;
    border-bottom: none;
    padding: 1rem 1.25rem;
    border-top-left-radius: var(--krypta-radius-2xl);
    border-top-right-radius: var(--krypta-radius-2xl);
}
.adm-modal-header .modal-title,
.adm-modal-header h5 { color: #FFFFFF; font-weight: 700; }
.adm-modal-header .btn-close { filter: brightness(0) invert(1); opacity: 0.9; }
.adm-modal-header .btn-close:hover { opacity: 1; }
.adm-modal-header .adm-modal-sub {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
    font-weight: 400;
    margin-top: 2px;
}

.adm-modal-footer {
    background: var(--krypta-bg-elevated);
    border-top: 1px solid var(--krypta-border);
    padding: 0.85rem 1.25rem;
    border-bottom-left-radius: var(--krypta-radius-2xl);
    border-bottom-right-radius: var(--krypta-radius-2xl);
}
.adm-modal-footer .btn-primary {
    background: var(--krypta-gradient-brand);
    border: none;
    font-weight: 600;
    padding: 8px 18px;
}
.adm-modal-footer .btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 12px rgba(0,184,230,0.30);
}

/* ============================================================================
   2. ACORDEÃO DE ÁREAS
   ============================================================================ */
.adm-accordion .accordion-item {
    background: var(--krypta-bg-card);
    border: 1px solid var(--krypta-border);
    border-radius: var(--krypta-radius-lg) !important;
    margin-bottom: 8px;
    overflow: hidden;
}
.adm-accordion .accordion-button {
    background: var(--krypta-bg-card);
    color: var(--krypta-text-primary);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.7rem 1rem;
    box-shadow: none;
}
.adm-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, rgba(0,184,230,0.08) 0%, rgba(147,51,234,0.05) 100%);
    color: var(--krypta-text-primary);
    box-shadow: inset 0 -1px 0 var(--krypta-border);
}
.adm-accordion .accordion-button:focus { box-shadow: none; border-color: var(--krypta-border); }
/* Troca a setinha SVG do Bootstrap por um chevron do Font Awesome */
.adm-accordion .accordion-button::after {
    background-image: none;
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8rem;
    transform: none !important;
    transition: transform 0.2s ease;
    color: var(--krypta-text-muted);
    width: auto; height: auto;
    background: transparent;
}
.adm-accordion .accordion-button:not(.collapsed)::after { transform: rotate(180deg) !important; }
.adm-accordion .accordion-body {
    background: var(--krypta-bg-card);
    padding: 1rem 1.1rem 1.1rem 1.1rem;
}
.adm-accordion .accordion-button > i:first-child {
    color: var(--krypta-cyan);
    margin-right: 8px;
    width: 18px;
    text-align: center;
}

/* ============================================================================
   3. CHIP DE RESUMO NO CABEÇALHO DO ACORDEÃO
   ============================================================================
   Preenchido pelo JS: "TOTAL", "3 SELECIONADOS", "NÃO DEFINIDO"...
   ============================================================================ */
.adm-acc-summary {
    margin-left: auto;
    margin-right: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--krypta-radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--krypta-bg-elevated);
    color: var(--krypta-text-muted);
    border: 1px solid var(--krypta-border);
    font-family: var(--krypta-font-mono);
}
.adm-acc-summary.adm-summary-on {
    background: linear-gradient(135deg, rgba(0,184,230,0.12), rgba(147,51,234,0.12));
    color: var(--krypta-cyan);
    border-color: rgba(0,184,230,0.30);
}
.adm-acc-summary.adm-summary-off { color: var(--krypta-text-faded); }
.adm-acc-summary i { font-size: 0.65rem; }

/* ============================================================================
   4. LINHA DE PERMISSÃO
   ============================================================================
   Grid 1fr / 1.4fr: rótulo à esquerda, controle à direita (mais largo,
   porque segmented controls precisam de espaço). Empilha no mobile.
   ============================================================================ */
.adm-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--krypta-border);
}
.adm-row:last-child { border-bottom: none; }
.adm-row-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.adm-row-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--krypta-text-primary);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 6px;
}
.adm-row-title i { color: var(--krypta-cyan); font-size: 0.85rem; }
.adm-row-desc {
    font-size: 0.72rem;
    color: var(--krypta-text-muted);
    line-height: 1.35;
}
.adm-row-control { min-width: 0; }

@media (max-width: 640px) {
    .adm-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================================
   5. SEGMENTED CONTROL — escolha única hierárquica
   ============================================================================
   <div class="adm-seg" data-adm-seg="1">
      <input type="hidden" name="perm_receita" value="ver">
      <button type="button" class="adm-seg-opt" data-value="nenhum">Nenhum</button>
      <button type="button" class="adm-seg-opt is-active" data-value="ver">Ver</button>
      ...
   </div>
   Com 5+ opções, adicione .adm-seg-compact (fonte e padding menores).
   ============================================================================ */
.adm-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    background: var(--krypta-bg-elevated);
    border: 1px solid var(--krypta-border);
    border-radius: var(--krypta-radius-lg);
    width: 100%;
}
.adm-seg-opt {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 6px 10px;
    border-radius: 7px;
    border: 0;
    background: transparent;
    color: var(--krypta-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-seg-opt:hover {
    background: var(--krypta-bg-card);
    color: var(--krypta-text-primary);
}
.adm-seg-opt.is-active {
    background: var(--krypta-gradient-brand);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0,184,230,0.30);
}
.adm-seg-opt.is-active:hover { color: #FFFFFF; }
.adm-seg.adm-seg-compact .adm-seg-opt { padding: 5px 7px; font-size: 0.72rem; }
html[data-theme="dark"] .adm-seg-opt { color: #94A3B8; }
html[data-theme="dark"] .adm-seg-opt:hover { color: #FFFFFF; }

/* ============================================================================
   6. CHIPS MULTI-SELECT
   ============================================================================
   <div class="adm-chips" data-adm-chips="filiais">
     <label class="adm-chip is-checked">
        <input type="checkbox" class="adm-chip-input" name="filiais" value="1" checked>
        <i class="fas fa-building adm-chip-icon"></i>
        <span class="adm-chip-text">Matriz</span>
        <span class="adm-chip-check"><i class="fas fa-check"></i></span>
     </label>
   </div>
   ============================================================================ */
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border-radius: var(--krypta-radius-pill);
    background: var(--krypta-bg-elevated);
    border: 1.5px solid var(--krypta-border);
    color: var(--krypta-text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    margin: 0;
}
/* O checkbox real fica invisível — o <label> inteiro é a área de clique */
.adm-chip .adm-chip-input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}
.adm-chip:hover {
    border-color: var(--krypta-cyan);
    color: var(--krypta-text-primary);
    background: rgba(0,184,230,0.05);
}
.adm-chip i.adm-chip-icon {
    color: var(--krypta-text-muted);
    font-size: 0.75rem;
    transition: color 0.15s ease;
}
.adm-chip .adm-chip-check {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--krypta-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: transparent;
    font-size: 0.55rem;
    transition: all 0.15s ease;
}
/* Estado marcado — .is-checked é posto pelo JS; :has() cobre browsers novos */
.adm-chip.is-checked,
.adm-chip:has(.adm-chip-input:checked) {
    background: linear-gradient(135deg, rgba(0,184,230,0.12) 0%, rgba(147,51,234,0.12) 100%);
    border-color: var(--krypta-cyan);
    color: var(--krypta-text-primary);
    box-shadow: 0 1px 3px rgba(0,184,230,0.15);
}
.adm-chip.is-checked i.adm-chip-icon,
.adm-chip:has(.adm-chip-input:checked) i.adm-chip-icon { color: var(--krypta-cyan); }
.adm-chip.is-checked .adm-chip-check,
.adm-chip:has(.adm-chip-input:checked) .adm-chip-check {
    background: var(--krypta-gradient-brand);
    border-color: transparent;
    color: #FFFFFF;
}
.adm-chip-desc { font-size: 0.65rem; color: var(--krypta-text-muted); display: block; }
html[data-theme="dark"] .adm-chip { background: rgba(255,255,255,0.05); color: #CBD5E1; }
html[data-theme="dark"] .adm-chip:hover { background: rgba(0,184,230,0.10); color: #FFFFFF; }

/* Toolbar "Marcar todos / Limpar" acima de um grupo de chips */
.adm-chips-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.72rem;
}
.adm-chips-toolbar-info { color: var(--krypta-text-muted); }
.adm-chips-toolbar-actions { display: flex; gap: 6px; }
.adm-chips-toolbar-actions button {
    padding: 3px 9px;
    border-radius: 7px;
    border: 1px solid var(--krypta-border);
    background: var(--krypta-bg-card);
    color: var(--krypta-text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.adm-chips-toolbar-actions button:hover {
    border-color: var(--krypta-cyan);
    color: var(--krypta-cyan);
}

/* ============================================================================
   7. SWITCH — booleano
   ============================================================================
   Padrão hidden=0 + checkbox=1: o form SEMPRE envia o campo, marcado ou não.
   Sem o hidden, um switch desligado simplesmente não aparece no POST e o
   backend não consegue distinguir "desligado" de "não enviado".

   <label class="adm-switch">
      <input type="hidden" name="pode_exportar" value="0">
      <input type="checkbox" name="pode_exportar" value="1" checked>
      <span class="adm-switch-track"></span>
      <span class="adm-switch-label">Pode exportar</span>
   </label>
   ============================================================================ */
.adm-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
.adm-switch input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}
.adm-switch-track {
    width: 40px;
    height: 22px;
    border-radius: var(--krypta-radius-pill);
    background: var(--krypta-border-strong);
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.adm-switch-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    transition: all 0.2s ease;
}
.adm-switch input:checked + .adm-switch-track { background: var(--krypta-gradient-brand); }
.adm-switch input:checked + .adm-switch-track::after { left: 20px; }
.adm-switch-label {
    font-size: 0.82rem;
    color: var(--krypta-text-primary);
    font-weight: 500;
}
.adm-switch input:focus-visible + .adm-switch-track {
    outline: 2px solid var(--krypta-cyan);
    outline-offset: 2px;
}
html[data-theme="dark"] .adm-switch-track { background: rgba(255,255,255,0.18); }

/* ============================================================================
   8. AUXILIARES: caixa de ajuda, sub-seção, grid de identificação
   ============================================================================ */
.adm-help {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--krypta-radius-md);
    background: var(--krypta-bg-elevated);
    border: 1px solid var(--krypta-border);
    color: var(--krypta-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
}
.adm-help i { color: var(--krypta-cyan); margin-right: 4px; }
.adm-help strong { color: var(--krypta-text-primary); }
.adm-help.adm-help-warn {
    background: rgba(217,119,6,0.07);
    border-color: rgba(217,119,6,0.25);
}
.adm-help.adm-help-warn i { color: var(--krypta-warning); }
html[data-theme="dark"] .adm-help { background: rgba(255,255,255,0.03); }

.adm-subsection {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--krypta-border);
}
.adm-subsection-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--krypta-cyan);
    margin-bottom: 8px;
    font-family: var(--krypta-font-mono);
}
.adm-subsection-title small {
    margin-left: auto;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--krypta-text-muted);
    font-family: var(--krypta-font-body);
    font-size: 0.7rem;
}

/* Bloco de identificação no topo do modal (nome / usuário / senha) */
.adm-ident-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.adm-ident-grid label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--krypta-text-muted);
    margin-bottom: 3px;
    display: block;
}
.adm-ident-grid input {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--krypta-radius-md);
    border: 1.5px solid var(--krypta-border);
    background: var(--krypta-bg-card);
    color: var(--krypta-text-primary);
    font-size: 0.88rem;
    transition: border-color 0.15s ease;
}
.adm-ident-grid input:focus {
    outline: none;
    border-color: var(--krypta-cyan);
    box-shadow: 0 0 0 3px rgba(0,184,230,0.10);
}
html[data-theme="dark"] .adm-ident-grid input { background: rgba(255,255,255,0.04); color: #FFFFFF; }
@media (max-width: 640px) { .adm-ident-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   9. LISTA DE ADMINISTRADORES (tela por trás do modal)
   ============================================================================ */
.adm-lista-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--krypta-border);
    border-radius: var(--krypta-radius-lg);
    background: var(--krypta-bg-card);
    margin-bottom: 8px;
    transition: all 0.15s ease;
}
.adm-lista-item:hover {
    border-color: var(--krypta-cyan);
    box-shadow: var(--krypta-shadow-soft);
}
.adm-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--krypta-gradient-brand);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    font-family: var(--krypta-font-display);
}
.adm-lista-nome { font-weight: 600; color: var(--krypta-text-primary); font-size: 0.9rem; }
.adm-lista-meta { font-size: 0.72rem; color: var(--krypta-text-muted); font-family: var(--krypta-font-mono); }
.adm-lista-acoes { margin-left: auto; display: flex; gap: 6px; }

/* Selo de perfil */
.adm-selo {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: var(--krypta-radius-pill);
    font-family: var(--krypta-font-mono);
}
.adm-selo.master { background: var(--krypta-gradient-brand); color: #FFF; }
.adm-selo.comum  { background: var(--krypta-bg-elevated); color: var(--krypta-text-muted); border: 1px solid var(--krypta-border); }
.adm-selo.inativo{ background: rgba(220,38,38,0.12); color: var(--krypta-danger); }