html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 16px 16px 56px; /* 56px = respiro para o crachá fixo do usuário */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* sem rolagem de página — o scroll fica dentro dos blocos */
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
}

/* ---------- Base / Core ---------- */
.app-header {
    flex: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
    flex-wrap: wrap;
}

.app-header h1 {
    margin: 0;
    font-size: 20px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.update-banner {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 16px;
    background: #0b5ed7;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.update-banner button {
    background: #fff;
    color: #0b5ed7;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-weight: bold;
    cursor: pointer;
}

.header-search { display: flex; align-items: center; gap: 4px; }
.header-search input {
    width: 210px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.btn {
    padding: 8px 12px;
    background: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}

.btn:hover { background: #0056b3; }
.btn-danger { background: #dc3545; }
.btn-danger:hover { background: #c82333; }
.btn-muted { background: #6c757d; }
.btn-muted:hover { background: #5a6268; }
.btn-sm { padding: 4px 8px; font-size: 12px; }

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    font-size: 20px;
    color: #333;
}

.inline-form { display: inline; }

/* Toast fixo no canto: aparece e some sem empurrar o conteúdo da tela. */
.flash {
    position: fixed;
    top: 16px;
    right: 16px;
    max-width: 300px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    z-index: 1200;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transition: opacity .5s ease;
}

.flash-out { opacity: 0; }

.flash-erro { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.flash-ok   { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

.empty { color: #777; font-size: 12px; }

/* ---------- Login ---------- */
.login-box {
    max-width: 300px;
    margin: 60px auto;
    max-height: calc(100% - 80px);
    overflow-y: auto;
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}

.login-box input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

/* Olho de mostrar/ocultar senha — o wrapper é montado pelo app.js em todo input[type=password] */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 36px; }
.login-box .password-wrap { margin-bottom: 10px; }
.login-box .password-wrap input { margin-bottom: 0; }
/* "Lembrar-me": checkbox com o texto ao lado (o input do login é 100% de largura por padrão). */
.login-remember { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; cursor: pointer; }
.login-box .login-remember input { width: 18px; height: 18px; margin: 0; padding: 0; flex: none; }
.password-toggle {
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 4px;
    background: none;
    border: 0;
    color: #666;
    cursor: pointer;
}
.password-toggle:hover { color: #222; }
.password-toggle .eye-closed { display: none; }
.password-toggle.is-visible .eye-open { display: none; }
.password-toggle.is-visible .eye-closed { display: block; }

/* ---------- Paleta Stema (compartilhada: módulos e Manutenção) ----------
   Light e dark. Cores de status continuam fixas: são funcionais, não de marca. */
:root {
    --m-primary: #262b49;        /* azul Stema: botões, abas e filtros ativos */
    --m-text-accent: #262b49;    /* texto de destaque */
    --m-accent: #c7d826;         /* verde-limão Stema: filete de destaque */
    --m-neutral: #b7aca5;        /* cinza quente: bordas de destaque */
    --m-border: #d0d3dd;
    --m-muted: #6b6f82;
}
[data-theme="dark"] {
    --m-primary: #4b5394;        /* azul Stema clareado: mantém o contraste no escuro */
    --m-text-accent: #c9cdf5;
    --m-accent: #c7d826;
    --m-neutral: #8f877f;
    --m-border: var(--d-border2);
    --m-muted: var(--d-muted);
}

/* ---------- Seleção de módulos ---------- */
.module-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    align-content: flex-start;
}

.module-card {
    background: #fff;
    border: 1px solid #878e96;
    border-top: 4px solid var(--m-accent);
    border-radius: 6px;
    padding: 15px;
    width: 260px;
    text-decoration: none;
    color: #333;
}
.module-card:hover { border-color: var(--m-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.module-icon { display: block; margin-bottom: 10px; border-radius: 9px; }
.module-card h3 { margin: 0 0 6px; font-size: 16px; color: var(--m-text-accent); }
.module-card p { margin: 0; font-size: 13px; color: var(--m-muted); }

/* ---------- Módulo Kanban ---------- */
/* Container das abas/board: ocupa a altura restante e não rola. Quem rola são
   as colunas (cards) e, na aba Colaboradores, a tabela. */
.kanban-tabs-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kanban-board {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.column {
    background: #e9ecef;
    border-radius: 6px;
    width: 250px;
    padding: 0 15px 15px; /* sem padding no topo: o cabeçalho sticky encosta na borda */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto; /* rolagem dos cards dentro da própria coluna */
}

.column h3 {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -15px 0; /* estica sobre o padding lateral: barra de ponta a ponta */
    padding: 15px 15px 10px; /* devolve o respiro por dentro do próprio cabeçalho */
    background: #e9ecef;
    border-radius: 6px 6px 0 0;
    font-size: 16px;
    color: #333;
}

.column .count {
    background: #ced4da;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 12px;
}

.card {
    position: relative;
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    border-left: 5px solid #6c757d; /* fallback; a cor real vem da criticidade */
}

/* Borda esquerda = criticidade (mesma cor da etiqueta .prio, sem pintar o fundo). */
.card.crit-alta  { border-left-color: #dc3545; }
.card.crit-media { border-left-color: #fd7e14; }
.card.crit-baixa { border-left-color: #0d6efd; }

/* Fundo pastel = status / prazo. O PHP aplica só uma destas classes por card. */
.card.is-andamento { background-color: #d1e7dd; } /* Em Andamento — verde */
.card.is-concluido { background-color: #e2e3e5; } /* Concluído — cinza */
.card.atrasado     { background-color: #f8d7da; } /* Atrasado — vermelho */
.card.proximo      { background-color: #fff3cd; } /* Vence em breve — amarelo */
.card.is-aguardando { background-color: #e2d9f3; } /* Aguardando terceiro — lilás */
.card .card-wait { font-weight: bold; color: #59359a; }
.details-wait { font-weight: bold; color: #59359a; }

.card h4 { margin: 0 0 5px; font-size: 14px; padding-right: 22px; }
.card p  { margin: 3px 0; font-size: 12px; color: #555; }
.card-note { font-style: italic; color: #666; }

/* Menu "..." no canto superior direito do card (Editar / Excluir / Delegar). */
.card-menu { position: absolute; top: 4px; right: 4px; }

.card-menu-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #6c757d;
    padding: 2px 6px;
    border-radius: 4px;
}

.card-menu-btn:hover { background: rgba(0, 0, 0, .07); color: #333; }
.card-menu-btn:focus-visible { outline: 2px solid #0056b3; outline-offset: 1px; }

.card-menu-list {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 130px;
    padding: 4px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.card-menu-list button {
    border: none;
    background: transparent;
    text-align: left;
    padding: 7px 10px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    border-radius: 3px;
}

.card-menu-list[hidden] { display: none; }

.card-menu-list button:hover { background: #f2f7ff; }
.card-menu-list button.danger { color: #dc3545; }
.card-menu-list button.danger:hover { background: #f8d7da; }

/* ---------- Alertas / sino ---------- */
.notification-container { position: relative; }

.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
}

.alerts-dropdown {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    width: 320px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    border-radius: 6px;
    border: 1px solid #878e96;
    z-index: 1000;
    max-height: min(400px, calc(100vh - 70px));
    overflow-y: auto;
    padding: 10px;
}

.alerts-dropdown.show { display: block; }

.badge[hidden] { display: none; }

/* ---------- Criticidade ---------- */
.prio {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 3px;
    color: #fff;
}

.prio-alto  { background: #dc3545; }
.prio-medio { background: #fd7e14; }
.prio-baixo { background: #0d6efd; }

/* ---------- Drag-and-drop ---------- */
.card[draggable="true"] { cursor: grab; }
.card.dragging { opacity: .5; }
.column.drag-over { outline: 2px dashed #007bff; outline-offset: -2px; }

/* ---------- Crachá do usuário (rodapé, canto inferior esquerdo) ---------- */
.user-badge {
    position: fixed;
    left: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid #878e96;
    border-radius: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    font-size: 13px;
    z-index: 900;
}

.user-badge-name { font-weight: bold; color: #333; }
.user-badge .icon-btn { color: #555; display: flex; }
.user-badge .icon-btn:hover { color: #007bff; }
.user-badge form.inline-form { display: flex; }
.user-badge-logout:hover { color: #dc3545 !important; }

/* ---------- Etiquetas do card (visão do gestor) ---------- */
.tag {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
}

.tag-own      { background: #d4edda; color: #155724; }
.tag-deleg    { background: #d1ecf1; color: #0c5460; }
.tag-help     { background: #dc3545; color: #fff; }
.tag-andamento { background: #0f5132; color: #fff; }
.tag-vencida  { background: #dc3545; color: #fff; }
.prio-rec  { background: #6f42c1; }

/* Botão play/pause: alterna A Fazer <-> Em Andamento sem sair da coluna
   Atrasado (que agrupa os dois status vencidos). */
.btn-toggle-progress {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    padding: 3px 8px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: #0d6efd;
    color: #fff;
    vertical-align: middle;
}

.btn-toggle-progress:hover { background: #0b5ed7; }
.btn-toggle-progress.is-pause { background: #6c757d; }
.btn-toggle-progress.is-pause:hover { background: #5c636a; }

/* Botão "✓": conclui ocorrência Diária sem passar pela coluna Concluído. */
.btn-complete-recur {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    padding: 3px 8px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: #198754;
    color: #fff;
    vertical-align: middle;
}

.btn-complete-recur:hover { background: #157347; }

/* ---------- Notas de andamento ---------- */
.note {
    border-top: 1px solid #9aa1a9;
    padding: 6px 0;
    font-size: 12px;
}

.note p { margin: 0 0 3px; }
.note small { color: #777; }

.note-add { margin-top: 10px; }
.note-add textarea { width: 100%; box-sizing: border-box; margin-bottom: 6px; }

.field-label { font-size: 12px; color: #555; }

/* ---------- Estorno de apontamento ---------- */
.estorno-log { margin-top: 12px; }

/* Recolhível: por padrão só o botão "Estornar" aparece; abre os campos ao clicar. */
.estorno-box { margin-top: 12px; }

.estorno-box > summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 12px;
    background: #6c757d;
    color: #fff;
    border-radius: 4px;
}
.estorno-box > summary::-webkit-details-marker { display: none; }
.estorno-box > summary:hover { background: #5a6268; }

.estorno-form {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #e0c39a;
    background: #fff8ec;
    border-radius: 6px;
}
.estorno-form .field-label {
    display: block;
    margin-bottom: 8px;
}
.estorno-form select,
.estorno-form input[type="datetime-local"] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 3px;
}
.estorno-hint {
    font-size: 12px;
    color: #7a6a4c;
    margin: 2px 0 8px;
}

.alert-banner {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.alert-x {
    border: none;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    padding: 0;
    flex: none;
}

.alert-x:hover { opacity: 1; }

.alert-due  { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.alert-late { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.alert-notif          { background: #e2e3f3; color: #31366b; border: 1px solid #c9cbe8; cursor: pointer; }
.alert-notif-ajuda    { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-notif-concluida { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

/* ---------- Modais ---------- */
.modal {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

.modal[hidden] { display: none; }

.modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Modal de detalhes: altura presa ao viewport; só o corpo rola, o cabeçalho fica fixo. */
.modal-wide {
    width: 460px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    overflow: hidden;
}

.modal-wide .modal-head { flex: 0 0 auto; }

#details-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.modal-content h3 { margin: 0; }

.modal-content input,
.modal-content textarea,
.modal-content select {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
}

/* Prazo obrigatório (atividade delegada) — pista visual. */
.modal-content input.field-required { border: 1px solid #dc3545; }

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Compacta, estilo planilha/CSV: fonte menor, linhas justas, grade fina. */
.details-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 10px;
    font-size: 10px;
    line-height: 1.25;
    text-align: left;
}

.details-table th,
.details-table td {
    padding: 1px 5px;
    border: 1px solid #878e96;
    white-space: nowrap;
}

.details-table thead tr {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ced4da;
}

.details-table .hist-action {
    display: block;
    margin-top: 0;
    color: #666;
    font-weight: normal;
    font-size: 9px;
    white-space: normal;
}

/* Histórico recolhível no modal de detalhes: fechado por padrão, mantém o modal curto. */
.details-history {
    margin: 4px 0 12px;
}

.details-history > summary {
    cursor: pointer;
    font-size: 12px;
    padding: 4px 0;
}

.details-history-sum {
    color: #666;
    font-weight: normal;
}

.details-history[open] > summary {
    margin-bottom: 4px;
}

/* Metadados do modal de detalhes: pares rótulo/valor em 2 colunas, compacto. */
.details-grid {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr;
    gap: 4px 10px;
    margin: 4px 0 12px;
    font-size: 12px;
}

.details-grid dt { font-weight: bold; color: #555; }
.details-grid dd { margin: 0; }
.details-grid dd.wide { grid-column: 2 / -1; }

.details-desc { font-size: 12px; margin: 4px 0 12px; }

@media (max-width: 480px) {
    .details-grid { grid-template-columns: max-content 1fr; }
    .details-grid dd.wide { grid-column: 2 / 3; }
}

/* ---------- Tabs Kanban ---------- */
.kanban-tabs {
    flex: none;
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #878e96;
}

.tab-btn {
    padding: 8px 16px;
    background: #e9ecef;
    border: 1px solid #878e96;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 14px;
    color: #495057;
    margin-bottom: -1px;
}

.tab-btn.active {
    background: #f4f4f9;
    font-weight: bold;
    color: #007bff;
    border-bottom: 1px solid #9aa1a9;
}

.kanban-tab-content {
    display: none !important;
}

.kanban-tab-content.active {
    display: flex !important;
    flex: 1;
    min-height: 0;
}

/* ---------- Aba "Colaboradores" do gestor ---------- */
/* Layout em bloco: o resumo (lista) e o drill-down (board) controlam a própria largura. */
.kanban-board.team-view { display: block; }
.kanban-tab-content.team-view.active { display: block !important; overflow-y: auto; }

/* Estado RESUMO: tabela com 1 linha por colaborador (apontamento atual). */
.team-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 860px;
    background: #fff;
    border: 1px solid #878e96;
    border-radius: 6px;
    overflow: hidden;
    font-size: 13px;
}

.team-table th,
.team-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #9aa1a9;
}

.team-table thead th {
    background: #e9ecef;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #495057;
}

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

.team-table .collab-row { cursor: pointer; }
.team-table .collab-row:hover { background: #f2f7ff; }
.team-table .collab-row:focus-visible { outline: 2px solid #0056b3; outline-offset: -2px; }

.team-table .collab-name { font-weight: bold; color: #333; white-space: nowrap; }
.team-table .collab-qtde { text-align: center; }
.team-table .collab-time { white-space: nowrap; }

.wait-flag {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 10px;
    background: #e2d9f3;
    color: #59359a;
    white-space: nowrap;
}

.help-flag {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    background: #dc3545;
    color: #fff;
    white-space: nowrap;
}
.team-table .muted { color: #999; }

.status-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    background: #d1ecf1;
    color: #0c5460;
    white-space: nowrap;
}

.status-pill.late { background: #f8d7da; color: #721c24; }
.status-pill.idle { background: #e2e3e5; color: #6c757d; }

/* ---------- Filtro por responsável (aba "Minhas Tarefas" do gestor) ---------- */
#mine-pane.kanban-tab-content.active { flex-direction: column; align-items: stretch; }

.board-filter { flex: none; position: relative; margin-bottom: 12px; }

.board-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.board-filter-toggle:hover { border-color: #007bff; }

.board-filter-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 500;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    padding: 8px;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
}

.board-filter-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    font-size: 13px;
    cursor: pointer;
}

.board-filter-menu label:hover { background: #f2f7ff; }
.board-filter-menu hr { border: none; border-top: 1px solid #9aa1a9; margin: 4px 0; }

/* Estado DETALHE: barra de voltar + board do colaborador. */
.collab-drill-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.collab-back-btn {
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}

.collab-back-btn:hover { background: #5a6268; }
.collab-drill-name { font-weight: bold; font-size: 16px; color: #333; }

/* ---------- Core > Usuários (admin) ---------- */
.admin-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.admin-new {
    flex: none;
    background: #fff;
    border: 1px solid #878e96;
    border-radius: 8px;
    padding: 14px 16px;
}
.admin-new h3 { margin: 0 0 10px; font-size: 15px; }
.admin-new-row { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-new-row input,
.admin-new-row select {
    padding: 7px 9px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
.admin-new-row input[name="name"]  { flex: 1 1 160px; }
.admin-new-row input[name="email"] { flex: 1 1 200px; }
.admin-hint { margin: 8px 0 0; font-size: 12px; color: #777; }

.admin-table-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #878e96;
    border-radius: 8px;
}
.admin-table { width: 100%; }
.admin-table tr.is-inactive td { opacity: .5; }
/* Linhas compactas. A célula de ações NÃO pode ser display:flex (saía do alinhamento da linha). */
.admin-table th, .admin-table td { padding: 4px 10px; vertical-align: middle; }
.admin-actions { white-space: nowrap; }
.admin-actions form { display: inline-block; margin: 0 4px 0 0; }

.shift-form { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; margin: 0; }
.shift-pair { display: inline-flex; gap: 3px; }
.shift-form input[type="time"] {
    width: 84px;
    padding: 2px 4px;
    font-size: 12px;
    box-sizing: border-box;
}

.pill-on, .pill-off, .pill-warn {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
}
.pill-on   { background: #e3f6e5; color: #1e7b32; }
.pill-off  { background: #f0f0f0; color: #888; }
.pill-warn { background: #fff3cd; color: #8a6d3b; }
.collab-drill .kanban-board { display: flex; }

/* ---------- Aba "Arquivadas" (gestor) ---------- */
#archive-pane.kanban-tab-content.active { flex-direction: column; align-items: stretch; }

.archive-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.archive-bar #archive-search {
    flex: 1 1 220px;
    padding: 7px 9px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.archive-months {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}
.chip-group { display: inline-flex; align-items: stretch; }
.chip {
    background: #e9ecef;
    border: 1px solid #878e96;
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 12px;
    color: #495057;
    cursor: pointer;
    white-space: nowrap;
}
.chip-group .chip { border-radius: 12px 0 0 12px; border-right: none; }
.chip.active { background: #007bff; border-color: #007bff; color: #fff; font-weight: bold; }
.chip-dl {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    font-size: 12px;
    text-decoration: none;
    color: #495057;
    background: #e9ecef;
    border: 1px solid #878e96;
    border-radius: 0 12px 12px 0;
}
.chip-dl:hover { background: #d3d9df; }

.archive-table th,
.archive-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #9aa1a9;
    font-size: 13px;
}
.archive-table thead th {
    background: #e9ecef;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #495057;
    position: sticky;
    top: 0;
}
.archive-row { cursor: pointer; }
.archive-row:hover { background: #f2f7ff; }
.archive-row:focus-visible { outline: 2px solid #0056b3; outline-offset: -2px; }
.archive-title { font-weight: bold; color: #333; display: block; }
.archive-desc { color: #999; display: block; margin-top: 2px; }
.archive-empty { color: #888; }

/* ---------- Dark mode (crachá do usuário -> botão sol/lua) ---------- */
/* Ícone do botão: mostra lua no claro (clicar escurece), sol no escuro. */
#theme-toggle-btn .icon-sun  { display: none; }
#theme-toggle-btn .icon-moon { display: block; }
[data-theme="dark"] #theme-toggle-btn .icon-sun  { display: block; }
[data-theme="dark"] #theme-toggle-btn .icon-moon { display: none; }

/* Paleta escura Dracula (padrão do tema do VS Code) em 4 níveis (fundo < coluna < card < elevado).
   Cards ficam neutros; status entra só como um leve matiz (color-mix) — sem fundos saturados. */
[data-theme="dark"] {
    color-scheme: dark;
    --d-bg:      #1e1f29;
    --d-surface: #282a36;
    --d-card:    #343746;
    --d-raised:  #44475a;
    --d-hover:   #4f5268;
    --d-border:  #686c7e;   /* linha entre registros (D077) */
    --d-border-forte: #7c8094; /* contorno de tabela, painel, cartão (D077) */
    --d-border2: #565a73;   /* campos de formulário */
    --d-text:    #f8f8f2;
    --d-text2:   #d4d6e0;
    --d-muted:   #8a92bf;
    --d-accent:  #a58fd6;
    --d-green:   #50fa7b;
    --d-red:     #ff5555;
    --d-amber:   #ffb86c;
    --d-purple:  #ff79c6;
    --d-cyan:    #8be9fd;
    /* Preenchimento dos cards de indicador (D079): tons Dracula escurecidos p/ texto branco legível (contraste >= 4.5). */
    --d-fill-green:  #1a7f45;
    --d-fill-red:    #c9373f;
    --d-fill-purple: #7a5fc0;
    --d-fill-amber:  #a8561a;
    --d-fill-cyan:   #1f7f99;
    --d-fill-pink:   #9b4a8c;
}

[data-theme="dark"] html,
[data-theme="dark"] body { background-color: var(--d-bg); color: var(--d-text); }

/* Botões */
[data-theme="dark"] .btn { background: var(--d-accent); color: #fff; }
[data-theme="dark"] .btn:hover { background: #6f86d6; }
[data-theme="dark"] .btn-muted,
[data-theme="dark"] .collab-back-btn,
[data-theme="dark"] .estorno-box > summary { background: var(--d-raised); color: var(--d-text); box-shadow: inset 0 0 0 1px var(--d-border2); }
[data-theme="dark"] .btn-muted:hover,
[data-theme="dark"] .collab-back-btn:hover,
[data-theme="dark"] .estorno-box > summary:hover { background: var(--d-hover); }
[data-theme="dark"] .btn-danger { background: #f0506e; }
[data-theme="dark"] .btn-danger:hover { background: #d63c5b; }

[data-theme="dark"] .icon-btn { color: var(--d-text2); }
[data-theme="dark"] .user-badge .icon-btn:hover { color: var(--d-accent); }
[data-theme="dark"] .password-toggle { color: var(--d-muted); }
[data-theme="dark"] .password-toggle:hover { color: var(--d-text); }

/* Campos */
[data-theme="dark"] .header-search input,
[data-theme="dark"] .login-box input,
[data-theme="dark"] .modal-content input,
[data-theme="dark"] .modal-content textarea,
[data-theme="dark"] .modal-content select,
[data-theme="dark"] .admin-new-row input,
[data-theme="dark"] .admin-new-row select,
[data-theme="dark"] .archive-bar #archive-search,
[data-theme="dark"] .painel-filtros input,
[data-theme="dark"] .painel-filtros select {
    background: var(--d-surface);
    color: var(--d-text);
    border-style: solid; /* só cor/estilo: a espessura continua a do tema claro */
    border-color: var(--d-border2);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--d-muted); }
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus { border-color: var(--d-accent); outline: none; }

/* Superfícies */
[data-theme="dark"] .login-box,
[data-theme="dark"] .module-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .team-table,
[data-theme="dark"] .admin-new,
[data-theme="dark"] .admin-table-scroll {
    background: var(--d-surface);
    color: var(--d-text);
    border-color: var(--d-border-forte);
}
[data-theme="dark"] .card-menu-list,
[data-theme="dark"] .alerts-dropdown,
[data-theme="dark"] .user-badge,
[data-theme="dark"] .board-filter-toggle,
[data-theme="dark"] .board-filter-menu {
    background: var(--d-raised);
    color: var(--d-text);
    border-color: var(--d-border2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .board-filter-toggle { box-shadow: none; }
[data-theme="dark"] .board-filter-toggle:hover { background: var(--d-hover); }

[data-theme="dark"] .user-badge-name { color: var(--d-text); }

[data-theme="dark"] .module-card { border-top-color: var(--m-accent); }
[data-theme="dark"] .module-card:hover { border-color: var(--m-primary); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
[data-theme="dark"] .module-card h3 { color: var(--m-text-accent); }

/* Textos secundários */
[data-theme="dark"] .module-card p,
[data-theme="dark"] .card p,
[data-theme="dark"] .details-grid dt,
[data-theme="dark"] .field-label {
    color: var(--d-text2);
}
[data-theme="dark"] .card-note,
[data-theme="dark"] .note small,
[data-theme="dark"] .details-table .hist-action,
[data-theme="dark"] .details-history-sum,
[data-theme="dark"] .admin-hint,
[data-theme="dark"] .empty,
[data-theme="dark"] .team-table .muted {
    color: var(--d-muted);
}

/* Abas */
[data-theme="dark"] .kanban-tabs { border-color: var(--d-border); }
[data-theme="dark"] .tab-btn {
    background: transparent;
    color: var(--d-muted);
    border-color: transparent;
}
[data-theme="dark"] .tab-btn:hover { color: var(--d-text); background: var(--d-surface); }
[data-theme="dark"] .tab-btn.active {
    background: var(--d-bg);
    color: var(--d-text);
    border-color: var(--d-border);
    border-bottom-color: var(--d-bg);
    box-shadow: inset 0 2px 0 var(--d-accent);
}

/* Colunas */
[data-theme="dark"] .column,
[data-theme="dark"] .column h3 { background: var(--d-surface); }
[data-theme="dark"] .column { box-shadow: inset 0 0 0 1px var(--d-border-forte); }
[data-theme="dark"] .column h3 { box-shadow: inset 0 -1px 0 var(--d-border); color: var(--d-text); }
[data-theme="dark"] .column .count { background: var(--d-raised); color: var(--d-text2); }
[data-theme="dark"] .column.drag-over { outline-color: var(--d-accent); }

/* Cards: neutros + leve matiz do status. Só a cor da borda esquerda (criticidade) é ajustada. */
[data-theme="dark"] .card {
    background: var(--d-card);
    color: var(--d-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .card h4 { color: var(--d-text); }
[data-theme="dark"] .card.crit-alta  { border-left-color: var(--d-red); }
[data-theme="dark"] .card.crit-media { border-left-color: #ffa600; }
[data-theme="dark"] .card.crit-baixa { border-left-color: var(--d-accent); }

[data-theme="dark"] .card.is-andamento  { background-color: color-mix(in srgb, var(--d-green) 12%, var(--d-card)); }
[data-theme="dark"] .card.atrasado      { background-color: color-mix(in srgb, var(--d-red) 13%, var(--d-card)); }
[data-theme="dark"] .card.proximo       { background-color: color-mix(in srgb, var(--d-amber) 12%, var(--d-card)); }
[data-theme="dark"] .card.is-aguardando { background-color: color-mix(in srgb, var(--d-purple) 12%, var(--d-card)); }
[data-theme="dark"] .card.is-concluido  { background-color: var(--d-card); opacity: .72; }
[data-theme="dark"] .card.is-concluido:hover { opacity: 1; }
[data-theme="dark"] .card .card-wait    { color: #f08ccb; }

[data-theme="dark"] .card-menu-btn { color: var(--d-muted); }
[data-theme="dark"] .card-menu-btn:hover { background: rgba(255, 255, 255, .08); color: var(--d-text); }
[data-theme="dark"] .card-menu-list button { color: var(--d-text); }
[data-theme="dark"] .card-menu-list button:hover { background: var(--d-hover); }
[data-theme="dark"] .card-menu-list button.danger { color: #f26681; }
[data-theme="dark"] .card-menu-list button.danger:hover { background: rgba(240, 80, 110, .15); }

/* Etiquetas: fundo translúcido + texto claro do mesmo matiz */
[data-theme="dark"] .prio-alto  { background: #f0506e; }
[data-theme="dark"] .prio-medio { background: #ffa600; }
[data-theme="dark"] .prio-baixo { background: #686c7e; }
[data-theme="dark"] .prio-rec   { background: #9b8afb; }
[data-theme="dark"] .prio-alto,
[data-theme="dark"] .prio-medio,
[data-theme="dark"] .prio-rec { color: #1e1f29; }
[data-theme="dark"] .tag-own    { background: rgba(0, 194, 146, .18);  color: #00c292; }
[data-theme="dark"] .tag-deleg  { background: rgba(54, 198, 244, .16); color: #36c6f4; }
[data-theme="dark"] .tag-andamento { background: rgba(0, 194, 146, .25); color: #3ee0b4; }
[data-theme="dark"] .tag-help,
[data-theme="dark"] .tag-vencida,
[data-theme="dark"] .help-flag  { background: #f0506e; color: #fff; }
[data-theme="dark"] .wait-flag  { background: rgba(230, 107, 181, .2); color: #f08ccb; }
[data-theme="dark"] .details-grid dd.details-wait { color: #f08ccb; }

[data-theme="dark"] .status-pill        { background: rgba(54, 198, 244, .16); color: #36c6f4; }
[data-theme="dark"] .status-pill.late   { background: rgba(240, 80, 110, .18);  color: #f4738b; }
[data-theme="dark"] .status-pill.idle   { background: var(--d-raised); color: var(--d-muted); }
[data-theme="dark"] .pill-on            { background: rgba(0, 194, 146, .18);  color: #00c292; }
[data-theme="dark"] .pill-off           { background: var(--d-raised); color: var(--d-muted); }
[data-theme="dark"] .pill-warn          { background: rgba(255, 166, 0, .18); color: #ffa600; }

/* Alertas / flash */
[data-theme="dark"] .alert-due           { background: rgba(255, 166, 0, .12); color: #ffa600; border-color: rgba(255, 166, 0, .35); }
[data-theme="dark"] .alert-late,
[data-theme="dark"] .alert-notif-ajuda,
[data-theme="dark"] .flash-erro          { background: rgba(240, 80, 110, .12); color: #f4738b; border-color: rgba(240, 80, 110, .35); }
[data-theme="dark"] .alert-notif-concluida,
[data-theme="dark"] .flash-ok            { background: rgba(0, 194, 146, .12); color: #00c292; border-color: rgba(0, 194, 146, .35); }
[data-theme="dark"] .alert-notif         { background: rgba(155, 138, 251, .12); color: #c3b8ff; border-color: rgba(155, 138, 251, .35); }

/* Hover de listas */
[data-theme="dark"] .board-filter-menu label:hover,
[data-theme="dark"] .team-table .collab-row:hover,
[data-theme="dark"] .archive-row:hover { background: var(--d-hover); }
[data-theme="dark"] .board-filter-menu hr,
[data-theme="dark"] .note { border-color: var(--d-border); }

/* Tabelas */
[data-theme="dark"] .details-table thead tr,
[data-theme="dark"] .team-table thead th,
[data-theme="dark"] .archive-table thead th { background: var(--d-raised); color: var(--d-text2); }
[data-theme="dark"] .details-table th,
[data-theme="dark"] .details-table td,
[data-theme="dark"] .team-table th,
[data-theme="dark"] .team-table td,
[data-theme="dark"] .archive-table th,
[data-theme="dark"] .archive-table td { border-color: var(--d-border); }
[data-theme="dark"] .admin-table tr.is-inactive td { color: var(--d-muted); }

[data-theme="dark"] .collab-drill-name,
[data-theme="dark"] .team-table .collab-name,
[data-theme="dark"] .archive-title { color: var(--d-text); }
[data-theme="dark"] .archive-desc,
[data-theme="dark"] .archive-empty { color: var(--d-muted); }

[data-theme="dark"] .estorno-form { background: rgba(255, 166, 0, .08); border-color: rgba(255, 166, 0, .35); }
[data-theme="dark"] .estorno-hint { color: #ffc252; }

/* Aba "Arquivadas" */
[data-theme="dark"] .chip,
[data-theme="dark"] .chip-dl { background: var(--d-raised); border-color: var(--d-border2); color: var(--d-text2); }
[data-theme="dark"] .chip.active { background: var(--d-accent); border-color: var(--d-accent); color: #fff; }
[data-theme="dark"] .chip-dl:hover { background: var(--d-hover); }

/* Barras de rolagem discretas */
[data-theme="dark"] * { scrollbar-color: var(--d-border2) transparent; }

/* ---------- Aba "Painel" ---------- */
/* Viewport Layout — a página não rola; só o corpo do painel (e cada gráfico) rola por dentro. */
#painel-pane.kanban-tab-content.active { flex-direction: column; align-items: stretch; gap: 12px; }

.painel-bar {
    flex: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.painel-bar h2 { margin: 0; font-size: 22px; }
.painel-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #495057; }
.painel-filtros input,
.painel-filtros select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}
.painel-filtros a.btn { text-decoration: none; }
.painel-atalhos { display: flex; gap: 6px; margin-right: 6px; }

.painel-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto; /* só se a tela for pequena demais para os blocos */
}

.painel-cards {
    flex: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}
.painel-card,
.painel-panel {
    background: #fff;
    border: 1px solid #878e96;
    border-radius: 6px;
}
.painel-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    min-width: 0;
}
.painel-card-label { font-size: 12px; color: #555; }
.painel-card-num { font-size: 26px; color: #212529; line-height: 1.2; }
.painel-card-num.num-ok { color: #14a314; }
.painel-card-sub { font-size: 12px; color: #6c757d; }
.painel-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.painel-charts {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: minmax(240px, 1fr);
    gap: 12px;
}
.painel-panel { display: flex; flex-direction: column; padding: 14px 18px; min-height: 0; min-width: 0; }
.painel-panel-wide { grid-column: span 2; }
.painel-panel h3 { flex: none; margin: 0 0 10px; font-size: 16px; color: #212529; }
.painel-panel-scroll { flex: 1; min-height: 0; overflow-y: auto; }

.painel-bar-row { margin-bottom: 10px; }
.painel-bar-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #343a40; margin-bottom: 3px; }
.painel-bar-val { font-weight: bold; white-space: nowrap; }
.painel-bar-track { height: 9px; background: #e9ecef; border-radius: 5px; overflow: hidden; }
.painel-bar-fill { height: 100%; border-radius: 5px; }
.painel-bar-sub { font-size: 11px; color: #6c757d; margin-top: 2px; }
.bar-blue   { background: #4f95e6; }
.bar-green  { background: #14a314; }
.bar-red    { background: #d13b3b; }
.bar-orange { background: #ee835a; }
.bar-purple { background: #8a63d2; }
.tag-ok  { color: #14a314; font-weight: bold; }
.tag-bad { color: #d13b3b; font-weight: bold; }

@media (max-width: 700px) {
    .painel-panel-wide { grid-column: auto; }
}

/* Tema escuro: sem fallback automático, cada cor própria precisa de override. */
[data-theme="dark"] .painel-card,
[data-theme="dark"] .painel-panel { background: var(--d-surface); border-color: var(--d-border-forte); }
[data-theme="dark"] .painel-card-num,
[data-theme="dark"] .painel-panel h3,
[data-theme="dark"] .painel-bar-head { color: var(--d-text); }
[data-theme="dark"] .painel-card-num.num-ok,
[data-theme="dark"] .tag-ok { color: var(--d-green); }
[data-theme="dark"] .tag-bad { color: var(--d-red); }
[data-theme="dark"] .painel-card-label,
[data-theme="dark"] .painel-card-sub,
[data-theme="dark"] .painel-bar-sub,
[data-theme="dark"] .painel-filtros { color: var(--d-muted); }
[data-theme="dark"] .painel-bar-track { background: var(--d-raised); }
/* Escuro navy (D078): cards do Painel preenchidos com cor viva e texto branco, em sequência. */
[data-theme="dark"] .painel-cards .painel-card { border: 0; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
[data-theme="dark"] .painel-cards .painel-card :is(.painel-card-num, .painel-card-num.num-ok) { color: #fff; }
[data-theme="dark"] .painel-cards .painel-card :is(.painel-card-label, .painel-card-sub) { color: rgba(255, 255, 255, .88); }
[data-theme="dark"] .painel-cards .painel-card:nth-child(6n + 1) { background: var(--d-fill-green); }
[data-theme="dark"] .painel-cards .painel-card:nth-child(6n + 2) { background: var(--d-fill-purple); }
[data-theme="dark"] .painel-cards .painel-card:nth-child(6n + 3) { background: var(--d-fill-amber); }
[data-theme="dark"] .painel-cards .painel-card:nth-child(6n + 4) { background: var(--d-fill-cyan); }
[data-theme="dark"] .painel-cards .painel-card:nth-child(6n + 5) { background: var(--d-fill-pink); }
[data-theme="dark"] .painel-cards .painel-card:nth-child(6n + 6) { background: var(--d-fill-red); }
[data-theme="dark"] .bar-purple { background: var(--d-purple); }

/* Grade de acessos por módulo (Core > Usuários) */
.admin-table .access-col { text-align: center; }
.admin-table .access-col input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }