/* --- CONFIGURAÇÕES GERAIS E RESET --- */
:root {
    --blue-main: #660099;
    --blue-bg: #143158;
    --white: #FFFFFF;
    --gray-bg: #F5F7FA;
    --gray-text-dark: #333333;
    --gray-text-light: #666666;
    --gray-border: #E0E4E9;

    /* Cores das Tags */
    --tag-bg-block: #FFDAB9;
    --tag-text-block: #B35F00;
    --tag-bg-unblock: #DFFFDF;
    --tag-text-unblock: #158237;
    --tag-bg-denied: #FFCFCF;
    --tag-text-denied: #C32D2D;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--gray-bg);
    color: var(--gray-text-dark);
    overflow-x: hidden;
}

/* --- CABEÇALHO --- */
.main-header {
    background-color: var(--blue-main);
    color: var(--white);
    padding: 15px 30px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

.bio-icon {
    background-color: var(--white);
    color: var(--blue-main);
    padding: 10px;
    font-weight: bold;
    border-radius: 6px;
}

.titles h1 {
    font-size: 1.1rem;
    font-weight: 600;
}

.titles p {
    font-size: 0.85rem;
    opacity: 0.8;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-stats {
    display: flex;
    gap: 10px;
}

.stat-block {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 15px 25px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: bold;
}

.stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Menu Dropdown */
.user-menu {
    position: relative;
    display: inline-block;
}

.user-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.3s;
}

.user-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--white);
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
    top: 100%;
}

.dropdown-content a {
    color: var(--gray-text-dark);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--gray-bg);
}

.dropdown-content hr {
    border: 0;
    border-top: 1px solid var(--gray-border);
    margin: 0;
}

.user-menu:hover .dropdown-content {
    display: block;
}

/* --- CONTEÚDO PRINCIPAL --- */
.main-content {
    max-width: 1600px;
    margin: 20px auto;
    padding: 0 30px;
}

/* Filtros */
.filters-section {
    background-color: var(--white);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--gray-border);
    margin-bottom: 20px;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.btn-area {
    grid-column: span 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-item label {
    font-size: 0.65rem;
    color: var(--gray-text-light);
    font-weight: 600;
    text-transform: uppercase;
}

.filter-item input,
.filter-item select {
    padding: 10px 15px;
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Botões UI */
.btn {
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    border: none;
}

.btn-secondary {
    background-color: var(--white);
    color: var(--gray-text-light);
    border: 1px solid var(--gray-border);
}

/* Sub-cabeçalho */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: var(--gray-text-light);
    font-size: 0.9rem;
}

.view-controls {
    display: flex;
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--white);
}

.view-btn {
    padding: 8px 15px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--gray-text-light);
    border-left: 1px solid var(--gray-border);
}

.view-btn:first-child {
    border-left: none;
}

.view-btn.is-active {
    background-color: var(--blue-main);
    color: var(--white);
}

/* Alternância de Visão */
.view-container {
    display: none;
}

#app-body.view-cards #cards-view {
    display: block;
}

#app-body.view-table #table-view {
    display: block;
}

/* --- EXIBIÇÃO EM CARDS --- */
#cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.bio-card {
    background-color: var(--white);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid var(--gray-border);
    text-align: left;
}

.bio-card.block-type {
    border-left: 4px solid var(--tag-text-block);
}

.bio-card.unblock-type {
    border-left: 4px solid var(--tag-text-unblock);
}

.bio-card.denied-type {
    border-left: 4px solid var(--tag-text-denied);
}

.card-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: var(--gray-bg);
    color: var(--blue-main);
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.card-details p {
    font-size: 0.8rem;
    color: var(--gray-text-dark);
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
}

.detail-label {
    color: var(--gray-text-light);
    font-weight: normal;
}

.tag-type {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Card Clicável */
.bio-card-clickable {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.bio-card-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* --- EXIBIÇÃO EM TABELA --- */
.table-container {
    background-color: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-border);
    overflow-x: auto;
}

.bio-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: left;
    table-layout: fixed;
}

.bio-table th,
.bio-table td {
    padding: 15px;
    border-bottom: 1px solid var(--gray-border);
}

.bio-table th {
    font-size: 0.7rem;
    color: var(--gray-text-light);
    font-weight: bold;
    text-transform: uppercase;
}

.td-name {
    font-weight: 600;
}

.table-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    background-color: var(--gray-bg);
    color: var(--blue-main);
    font-weight: bold;
    font-size: 0.9rem;
}

/* Efeito clicável para a linha da tabela */
.bio-table-row-clickable {
    cursor: pointer;
    transition: background-color 0.2s;
}

.bio-table-row-clickable:hover {
    background-color: #E8EDF2;
}

/* Fundo levemente azulado ao passar o mouse */

.tag-type.unblock-type {
    background-color: var(--tag-bg-unblock);
    color: var(--tag-text-unblock);
    border: 1px solid rgba(21, 130, 55, 0.1);
}

.tag-type.block-type {
    background-color: var(--tag-bg-block);
    color: var(--tag-text-block);
    border: 1px solid rgba(179, 95, 0, 0.1);
}

.tag-type.denied-type {
    background-color: var(--tag-bg-denied);
    color: var(--tag-text-denied);
    border: 1px solid rgba(195, 45, 45, 0.1);
}

/* --- ESTRUTURA DA MODAL --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.is-open {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: var(--white);
    width: 90%;
    max-width: 480px;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.modal-overlay.is-open .modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--gray-text-light);
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover {
    color: #C32D2D;
}

.modal-body {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* CONTAINER DA FOTO */
.modal-photo-large {
    width: 100%;
    max-width: 300px;
    /* Ajuste para o tamanho máximo que você quer na modal */
    aspect-ratio: 1 / 1;
    /* Garante que a caixa será sempre 100% quadrada */
    margin: 0 auto;
    /* Centraliza a caixa na modal */
    border-radius: 12px;
    overflow: hidden;
    /* Nada escapa dessa caixa */
    background-color: #e9ecef;
    /* Um cinza clarinho de fundo enquanto carrega */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* A IMAGEM EM SI */
#modal-person-photo {
    width: 100%;
    height: 100%;
    /* O SEGREDO ESTÁ AQUI EMBAIXO: */
    object-fit: cover;
    object-position: center top;
}

.modal-info-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gray-text-dark);
    margin-bottom: 5px;
}

#modal-status-container {
    margin-bottom: 20px;
}

/* Nova Grade de Dados na Modal */
.modal-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    background-color: var(--gray-bg);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    text-align: left;
    border: 1px solid var(--gray-border);
}

.modal-data-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.9rem;
}

.modal-data-item.modal-data-full {
    grid-column: span 2;
}

.modal-data-item strong {
    color: var(--gray-text-dark);
    font-weight: 600;
}

.modal-actions {
    display: flex;
    gap: 15px;
    width: 100%;
    justify-content: center;
}

.btn-action-edit {
    background-color: var(--blue-main);
    color: var(--white);
    border: none;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-action-edit:hover {
    background-color: #4D0073;
}

.btn-action-delete {
    background-color: #FFCFCF;
    color: #C32D2D;
    border: 1px solid rgba(195, 45, 45, 0.2);
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-action-delete:hover {
    background-color: #FFBABA;
}

/* --- MODAIS SECUNDÁRIAS (Edição e Exclusão) --- */
/* Aumentamos o z-index para ficar acima da modal de detalhes (que tem 1000) */
.modal-overlay.modal-secondary {
    z-index: 1010;
    background-color: rgba(0, 0, 0, 0.7);
}

/* --- ESTILOS DO FORMULÁRIO DE EDIÇÃO --- */
.edit-form-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    text-align: left;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 0.75rem;
    color: var(--gray-text-light);
    font-weight: 700;
    text-transform: uppercase;
}

.form-group input {
    padding: 12px 15px;
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    font-size: 0.95rem;
    width: 100%;
    transition: border-color 0.2s;
    background-color: var(--gray-bg);
    color: var(--gray-text-dark);
}

.form-group input:focus {
    outline: none;
    border-color: var(--blue-main);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(102, 0, 153, 0.1);
}

/* ========================================== */
/* ESTILOS EXCLUSIVOS DA DASHBOARD            */
/* ========================================== */

.welcome-section {
    margin-bottom: 30px;
}

.welcome-section h2 {
    font-size: 2rem;
    color: var(--blue-main);
    margin-bottom: 5px;
}

.welcome-section p {
    color: var(--gray-text-light);
    font-size: 1.1rem;
}

/* Grade de Cartões Principais */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

/* O Cartão Módulo */
.dash-card {
    background-color: var(--white);
    border-radius: 16px;
    padding: 35px 25px;
    border: 1px solid var(--gray-border);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.dash-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-color: rgba(102, 0, 153, 0.3);
    /* Borda sutilmente roxa no hover */
}

/* Ícone Gigante */
.dash-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    background-color: var(--gray-bg);
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--gray-border);
    transition: background-color 0.3s;
}

.dash-card:hover .dash-icon {
    background-color: rgba(102, 0, 153, 0.1);
    border-color: rgba(102, 0, 153, 0.2);
}

.dash-card h3 {
    font-size: 1.3rem;
    color: var(--gray-text-dark);
    margin-bottom: 15px;
    font-weight: 700;
}

.dash-card p {
    font-size: 0.95rem;
    color: var(--gray-text-light);
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Área do Gerador de Link */
.generator-action {
    width: 100%;
    margin-top: auto;
}

#generated-link-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--blue-main);
    border-radius: 8px;
    background-color: rgba(102, 0, 153, 0.05);
    color: var(--blue-main);
    font-weight: 600;
    text-align: center;
    margin-bottom: 5px;
    outline: none;
}

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* Ajustado para 220px */
    gap: 20px;
    margin-bottom: 35px;
}

.kpi-card {
    background-color: var(--white);
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid var(--gray-border);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: box-shadow 0.2s;
}

.kpi-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.kpi-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.kpi-info {
    display: flex;
    flex-direction: column;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-text-dark);
    line-height: 1.1;
}

.kpi-label {
    font-size: 0.8rem;
    color: var(--gray-text-light);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 4px;
}

/* ========================================== */
/* ESTILOS DA TELA DE USUÁRIOS                */
/* ========================================== */

/* Botões de Ação na Tabela (Ícones) */
.btn-icon {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.btn-icon:hover {
    background-color: var(--gray-bg);
}

/* Toggle Switch (Interruptor) */
.status-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-text {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.status-text.active {
    color: #158237;
}

.status-text.inactive {
    color: #C32D2D;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFCFCF;
    transition: .3s;
    border-radius: 24px;
    border: 1px solid rgba(195, 45, 45, 0.3);
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: #C32D2D;
    transition: .3s;
    border-radius: 50%;
}

/* Quando o input está marcado (checked) = Ativo */
input:checked+.slider {
    background-color: #DFFFDF;
    border-color: rgba(21, 130, 55, 0.3);
}

input:checked+.slider:before {
    transform: translateX(20px);
    background-color: #158237;
}

/* --- ESTILOS PARA O UPLOAD DE FOTO (Modal de Cadastro) --- */
.photo-upload-preview {
    width: 140px;
    height: 140px;
    border: 2px dashed var(--gray-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-bg);
    color: var(--gray-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.photo-upload-preview:hover {
    border-color: var(--blue-main);
    background-color: rgba(102, 0, 153, 0.05);
    /* Fundo sutilmente roxo */
    color: var(--blue-main);
}

/* ========================================== */
/* AJUSTE FINO - BOTÕES E FILTROS             */
/* ========================================== */

/* A div que envolve o "Voltar" e o "Adicionar" */
.action-buttons {
    display: flex;
    gap: 20px;
    /* Afasta os botões no Computador */
    align-items: center;
}

/* A caixa branca que envolve os filtros */
.filters-card {
    padding: 25px 30px;
    /* Aumenta a caixa dando mais respiro interno */
    margin-bottom: 25px;
    /* Afasta a caixa da tabela de usuários */
}

/* ========================================== */
/* RESPONSIVIDADE (Celulares e Tablets)       */
/* ========================================== */
@media (max-width: 768px) {

    /* Cabeçalho */
    .header-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .header-right {
        width: 100%;
        justify-content: center;
    }

    /* Grids (Dashboard e Filtros) */
    .dashboard-grid,
    .dashboard-kpis {
        grid-template-columns: 1fr;
        /* Fica um card embaixo do outro */
    }

    .filters-grid {
        grid-template-columns: 1fr;
        /* Filtros empilhados no celular */
        gap: 15px;
    }

    /* Tabelas */
    .table-container {
        overflow-x: auto;
        /* Permite rolar a tabela para o lado no celular */
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    .bio-table {
        min-width: 700px;
        /* Força a tabela a manter o tamanho, ativando o scroll */
    }

    /* Modais */
    .modal-content {
        width: 95%;
        padding: 20px;
        margin: 10px;
    }

    .edit-form-grid {
        grid-template-columns: 1fr;
        /* Formulários ficam em uma coluna só */
    }

    /* Ajuste dos Blocos do Cabeçalho no Celular */
    .header-stats {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    .stat-block {
        flex: 1;
        /* Faz os blocos dividirem o espaço igualmente na tela pequena */
        padding: 15px 10px;
        /* Reduz um pouco o padding interno no celular */
    }
}

/* ========================================== */
/* MODO ESCURO (DARK MODE)                    */
/* ========================================== */

/* Transição suave de cores quando o tema muda */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dash-card,
.kpi-card,
.modal-content,
.filter-item input,
.filter-item select,
.bio-table {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Variáveis do Modo Escuro */
body.dark-mode {
    --gray-bg: #121212;
    /* Fundo da página bem escuro */
    --white: #1e1e1e;
    /* Fundo dos cartões/modais um pouco mais claro */
    --gray-text-dark: #f0f0f0;
    /* Texto principal branco/cinza claro */
    --gray-text-light: #aaaaaa;
    /* Texto secundário cinza */
    --gray-border: #333333;
    /* Bordas sutis */
    background-color: var(--gray-bg);
    color: var(--gray-text-dark);
}

/* Ajustes específicos para o Dark Mode */
body.dark-mode .main-header {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

body.dark-mode .dash-card,
body.dark-mode .kpi-card,
body.dark-mode .modal-content {
    background-color: var(--white);
    border-color: var(--gray-border);
}

body.dark-mode .bio-table th {
    background-color: #252525;
    color: #fff;
}

body.dark-mode .bio-table tr {
    border-bottom: 1px solid var(--gray-border);
}

body.dark-mode .bio-table tr:hover {
    background-color: #2a2a2a;
}

/* Inputs e Selects no Dark Mode */
body.dark-mode input,
body.dark-mode select {
    background-color: #2a2a2a !important;
    color: #fff !important;
    border-color: var(--gray-border) !important;
}

body.dark-mode .input-add-data {
    background-color: #333 !important;
}

/* Títulos Específicos */
body.dark-mode h1 {
    color: #ffffff;
}

body.dark-mode p {
    color: #ffffff;
}

body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .td-name,
body.dark-mode label {
    color: #ffffff;
}



/* ========================================== */
/* RESPONSIVIDADE - TELA DE USUÁRIOS          */
/* ========================================== */

/* Desktop: proporção original dos filtros, agora controlada pelo CSS */
.filters-grid {
    grid-template-columns: 2fr 1fr 1fr auto;
}

@media (max-width: 900px) {
    .main-header {
        padding: 14px 20px;
    }

    .main-content {
        padding: 0 20px;
    }

    .filters-grid {
        grid-template-columns: 1fr 1fr;
    }

    .btn-area {
        justify-content: stretch;
    }

    .btn-area .btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .main-header {
        padding: 12px 16px;
    }

    .header-content {
        align-items: stretch;
        gap: 14px;
    }

    .logo-area {
        justify-content: center;
        text-align: left;
    }

    .bio-icon {
        flex: 0 0 auto;
    }

    .titles h1 {
        font-size: 1.05rem;
    }

    .titles p {
        font-size: 0.78rem;
    }

    .header-right {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: stretch;
    }

    .header-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .stat-block {
        min-width: 0;
        padding: 12px 8px;
    }

    .stat-value {
        font-size: 1.4rem;
    }

    .user-menu,
    .user-btn {
        height: 100%;
    }

    .user-btn {
        min-width: 82px;
        padding: 8px 10px;
    }

    .dropdown-content {
        z-index: 20;
    }

    .main-content {
        margin: 18px auto;
        padding: 0 16px;
    }

    .content-header {
        display: grid;
        grid-template-columns: 1fr 1.35fr;
        gap: 10px;
        align-items: stretch;
    }

    .content-header .btn {
        width: 100%;
        min-height: 52px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.25;
    }

    .filters-section {
        padding: 18px;
        overflow: hidden;
    }

    .filters-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .filter-item,
    .filter-item input,
    .filter-item select,
    .btn-area,
    .btn-area .btn {
        width: 100%;
        min-width: 0;
    }

    .filter-item input,
    .filter-item select {
        font-size: 16px;
        /* evita zoom automático em alguns celulares */
    }

    /* Em vez de uma tabela larga com scroll, cada linha vira um card */
    .table-container {
        background: transparent;
        border: 0;
        overflow: visible;
    }

    .bio-table,
    .bio-table tbody,
    .bio-table tr,
    .bio-table td {
        display: block;
        width: 100%;
    }

    .bio-table {
        min-width: 0;
        table-layout: auto;
    }

    .bio-table thead {
        display: none;
    }

    .bio-table tbody {
        display: grid;
        gap: 14px;
    }

    .bio-table tbody tr {
        position: relative;
        background-color: var(--white);
        border: 1px solid var(--gray-border);
        border-radius: 12px;
        padding: 16px;
        overflow: hidden;
    }

    .bio-table th,
    .bio-table td {
        border-bottom: 0;
        padding: 0;
    }

    .bio-table td:first-child {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 44px;
    }

    .table-avatar {
        width: 44px;
        height: 44px;
    }

    .bio-table .td-name {
        min-height: 48px;
        padding-left: 58px;
        padding-right: 0;
        margin-bottom: 14px;
        font-size: 1rem;
        line-height: 1.35;
    }

    .bio-table td:nth-child(3),
    .bio-table td:nth-child(4),
    .bio-table td:nth-child(5),
    .bio-table td:nth-child(6) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 10px 0;
        border-top: 1px solid var(--gray-border);
        text-align: right !important;
        font-size: 0.86rem;
    }

    .bio-table td:nth-child(3)::before {
        content: "Loja";
    }

    .bio-table td:nth-child(4)::before {
        content: "Cargo";
    }

    .bio-table td:nth-child(5)::before {
        content: "Acesso biométrico";
    }

    .bio-table td:nth-child(6)::before {
        content: "Ações";
    }

    .bio-table td:nth-child(3)::before,
    .bio-table td:nth-child(4)::before,
    .bio-table td:nth-child(5)::before,
    .bio-table td:nth-child(6)::before {
        flex: 0 0 auto;
        color: var(--gray-text-light);
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        text-align: left;
    }

    .status-toggle-wrapper {
        justify-content: flex-end;
    }

    .btn-icon {
        font-size: 1.15rem;
        padding: 7px;
    }

    .modal-overlay {
        padding: 12px;
        overflow-y: auto;
    }

    .modal-content {
        width: 100%;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        margin: auto;
        padding: 24px 18px;
        border-radius: 14px;
    }

    .modal-info-header h2 {
        font-size: 1.35rem;
        padding-right: 28px;
    }

    .modal-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .modal-actions .btn,
    .modal-actions .btn-action-edit,
    .modal-actions .btn-action-delete {
        width: 100%;
        justify-content: center;
    }

    .photo-upload-preview {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 420px) {
    .main-header {
        padding-inline: 12px;
    }

    .main-content {
        padding-inline: 12px;
    }

    .logo-area {
        gap: 10px;
    }

    .bio-icon {
        padding: 9px;
    }

    .titles h1 {
        font-size: 0.98rem;
    }

    .titles p {
        font-size: 0.72rem;
    }

    .header-right {
        grid-template-columns: minmax(0, 1fr) 82px;
    }

    .stat-block {
        padding: 11px 6px;
    }

    .content-header {
        grid-template-columns: 1fr;
    }

    .content-header .btn {
        min-height: 46px;
    }

    .filters-section {
        padding: 15px;
    }

    .bio-table tbody tr {
        padding: 14px;
    }

    .bio-table td:first-child {
        top: 14px;
        left: 14px;
    }

    .bio-table .td-name {
        padding-left: 56px;
    }

    /* =====================================================
   MOBILE - TABELA DE COMPUTADORES
   ===================================================== */

    @media (max-width: 768px) {

        /* Cada computador vira um card */
        .computers-table tbody tr {
            display: block;
            position: relative;
            padding: 20px 14px;
            margin-bottom: 14px;
            border: 1px solid var(--gray-border);
            border-radius: 12px;
            background: var(--white);
        }

        /* Remove comportamento tradicional da tabela */
        .computers-table tbody td {
            display: flex;
            width: 100%;
            min-width: 0;
            padding: 10px 0;
            border-bottom: 1px solid var(--gray-border);
            align-items: center;
            justify-content: space-between;
        }

        .computers-table tbody td:last-child {
            border-bottom: none;
        }

        /* Cabeçalho da tabela não é necessário no mobile */
        .computers-table thead {
            display: none;
        }

        /*
       IMPORTANTE:
       primeira coluna do computador
       deixa de receber o layout usado nos usuários
    */
        .computers-table tbody td:first-child {
            position: static;
            width: 100%;
            height: auto;
            padding: 0 0 12px;
            margin: 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        /* Caso exista avatar/ícone do PC */
        .computers-table .table-avatar {
            position: static;
            flex-shrink: 0;
            margin: 0 12px 0 0;
        }

        /* Nome / identificação do computador */
        .computers-table .td-name {
            position: static;
            flex: 1;
            min-width: 0;
            padding-left: 0;
        }

        /* Evita textos sendo esmagados */
        .computers-table td {
            white-space: normal;
            word-break: normal;
            overflow-wrap: break-word;
        }
    }
}

.employee-photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.photo-upload-preview.has-photo {
    padding: 0;
    overflow: hidden;
    border-style: solid;
    border-color: #158237;
}

/* CONTAINER DA FOTO NO CARD */
.card-avatar-container {
    width: 48px;
    /* Ajuste se o seu card-avatar antigo era maior/menor */
    height: 48px;
    border-radius: 8px;
    /* Coloque 50% se quiser a foto redonda */
    overflow: hidden;
    background-color: #e9ecef;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* A IMAGEM DENTRO DO CARD */
.card-person-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* AS INICIAIS (SE NÃO TIVER FOTO) */
.card-avatar-placeholder {
    font-weight: bold;
    color: #555;
}

.login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Garante que a logo não fique esticada ou distorcida */
    border-radius: 50%;
    /* Mantém o formato circular caso a imagem seja quadrada */
}

/* Efeitos para os Cards do Dashboard */
.clickable-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.clickable-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05) !important;
}

/* Quando um card é selecionado, os outros ficam apagadinhos */
.clickable-card.dimmed {
    opacity: 0.4;
    filter: grayscale(0.5);
}

.clickable-card.active {
    transform: scale(1.02);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================== */
/* CORES DOS CARDS - MODO CLARO (PADRÃO)      */
/* ========================================== */
.stat-card {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
}

.stat-card .card-title {
    color: #64748B;
}

.stat-card .card-number {
    color: #1E293B;
}

/* ========================================== */
/* CORES DOS CARDS - MODO ESCURO              */
/* ========================================== */
/* IMPORTANTE: Verifique qual classe o seu botão de tema aplica no <body>. 
   Estou usando .dark-mode e .dark-theme por precaução. */
body.dark-mode .stat-card,
body.dark-theme .stat-card,
body[data-theme="dark"] .stat-card {
    background-color: #242424;
    /* Fundo escuro igual ao da sua tabela */
    border: 1px solid #3d3d3d;
    /* Borda sutil escurecida */
}

body.dark-mode .stat-card .card-title,
body.dark-theme .stat-card .card-title,
body[data-theme="dark"] .stat-card .card-title {
    color: #94A3B8;
    /* Cinza claro para leitura agradável */
}

body.dark-mode .stat-card .card-number,
body.dark-theme .stat-card .card-number,
body[data-theme="dark"] .stat-card .card-number {
    color: #F8FAFC;
    /* Branco para o número saltar aos olhos */
}

/* ==========================================
   ⏳ ANIMAÇÃO DE LOADING (MÁQUINA DO TEMPO)
   ========================================== */
.solides-spinner {
    width: 45px;
    height: 45px;
    border: 4px solid #e2e8f0;
    /* Fundo cinza clarinho */
    border-top: 4px solid #10b981;
    /* Verde esmeralda (sua cor principal) */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-box {
    text-align: center;
    padding: 60px 20px;
}

.loading-box h3 {
    color: #334155;
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.loading-box p {
    color: #64748b;
    margin: 0;
    font-size: 0.95rem;
}

/* ==========================================
   🎛️ ALINHAMENTO DA PAGINAÇÃO
   ========================================== */
.paginacao {
    /* Substitua pelo ID ou Classe exata da sua div de paginação, ex: #paginacaoContainer */
    display: flex;
    justify-content: center;
    /* ISSO AQUI JOGA PRO MEIO! */
    align-items: center;
    gap: 5px;
    /* Espacinho elegante entre os botões */
    width: 100%;
    margin: 20px 0;
}