/**
 * ContaDias — Modern B2B SaaS Design System
 * Inspired by Linear, Stripe & Vercel
 * Focused on visual restraint, precise density, surface elevation and tabular typography.
 */

:root {
    --color-scheme: dark;

    /* Superfícies e Profundidade (Escala de Elevação sem sombras pesadas) */
    --bg-base: #0C1422;         /* Fundo da tela */
    --bg-surface: #101C2E;      /* Navbars, toolbars */
    --bg-card: #152237;         /* Cards, painéis, tabelas */
    --bg-card-hover: #19202E;   /* Elementos em hover */
    --bg-card-active: #1D2536;  /* Elementos ativos/selecionados */
    --bg-input: #0E121A;        /* Inputs e controlos de formulário */

    /* Bordas de Alta Precisão (Subtis, baseadas em opacidade) */
    --border: rgba(255, 255, 255, 0.07);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-hover: rgba(255, 255, 255, 0.14);
    --border-focus: #3B82F6;

    /* Tipografia e Cores de Texto (Off-white para evitar fadiga visual) */
    --text-primary: #E6E8EB;    /* Texto principal */
    --text-secondary: #9AA3AE;  /* Rótulos, descrições secundárias */
    --text-tertiary: #929BA8;   /* Metadados, notas de rodapé */
    --text-inverse: #FFFFFF;

    /* Acento Único de Marca (Azul de precisão, usado com contenção) */
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-subtle: rgba(37, 99, 235, 0.12);
    --accent-border: rgba(37, 99, 235, 0.28);
    --brand: var(--accent);
    --brand-subtle: var(--accent-subtle);

    /* Estados Semânticos Dessaturados e Elegantes */
    --success: #10B981;
    --success-subtle: rgba(16, 185, 129, 0.12);
    --success-border: rgba(16, 185, 129, 0.24);

    --warning: #F59E0B;
    --warning-subtle: rgba(245, 158, 11, 0.12);
    --warning-border: rgba(245, 158, 11, 0.24);

    --danger: #EF4444;
    --danger-subtle: rgba(239, 68, 68, 0.12);
    --danger-border: rgba(239, 68, 68, 0.24);

    --info: #0EA5E9;
    --info-subtle: rgba(14, 165, 233, 0.12);
    --info-border: rgba(14, 165, 233, 0.24);

    /* Cores de Texto para Alertas */
    --alert-success-text: #A7F3D0;
    --alert-warning-text: #FDE68A;
    --alert-danger-text: #FECACA;
    --alert-info-text: #BAE6FD;

    --badge-neutral-bg: rgba(255, 255, 255, 0.05);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.6);
    --modal-backdrop: rgba(0, 0, 0, 0.7);

    --kiosk-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --kiosk-key-bg: var(--bg-surface);
    --kiosk-key-hover: var(--bg-card-hover);
    --kiosk-key-active: var(--border);

    /* Geometria e Raios Contidos (Sem cantos excessivamente redondos) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-card: 20px;

    /* Tipografia */
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

    /* Transições Rápidas e Responsivas */
    --space-section: 2rem;
    --space-card: 1.5rem;
    --type-title: clamp(1.8rem, 3vw, 2.5rem);
    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================
   TEMA CLARO (LIGHT MODE)
   Equilíbrio sofisticado inspirado no Linear & Stripe
   ========================================================== */
[data-theme="light"] {
    --color-scheme: light;

    /* Superfícies Suaves (Evita branco puro ofuscante no fundo geral) */
    --bg-base: #F2F5FA;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F8FAFC;
    --bg-card-active: #F1F5F9;
    --bg-input: #FFFFFF;

    /* Bordas Precisas e Delicadas */
    --border: #E2E8F0;
    --border-subtle: #F1F5F9;
    --border-hover: #CBD5E1;
    --border-focus: #2563EB;

    /* Tipografia Nítida em Fundo Claro (Passa AAA WCAG) */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #64748B;
    --text-inverse: #FFFFFF;

    /* Acento de Marca */
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-subtle: rgba(37, 99, 235, 0.08);
    --accent-border: rgba(37, 99, 235, 0.22);
    --brand: var(--accent);
    --brand-subtle: var(--accent-subtle);

    /* Semânticas Encorpadas para Leitura Frequente no Claro */
    --success: #059669;
    --success-subtle: rgba(5, 150, 105, 0.09);
    --success-border: rgba(5, 150, 105, 0.22);

    --warning: #D97706;
    --warning-subtle: rgba(217, 119, 6, 0.09);
    --warning-border: rgba(217, 119, 6, 0.22);

    --danger: #DC2626;
    --danger-subtle: rgba(220, 38, 38, 0.08);
    --danger-border: rgba(220, 38, 38, 0.20);

    --info: #0284C7;
    --info-subtle: rgba(2, 132, 199, 0.08);
    --info-border: rgba(2, 132, 199, 0.20);

    /* Cores de Texto de Alertas no Claro */
    --alert-success-text: #065F46;
    --alert-warning-text: #92400E;
    --alert-danger-text: #991B1B;
    --alert-info-text: #075985;

    --badge-neutral-bg: rgba(15, 23, 42, 0.06);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-modal: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05);
    --modal-backdrop: rgba(15, 23, 42, 0.45);

    --kiosk-box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);
    --kiosk-key-bg: #F8FAFC;
    --kiosk-key-hover: #F1F5F9;
    --kiosk-key-active: #E2E8F0;
}

/* ==========================================================
   RESET & TIPOGRAFIA
   ========================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-ui);
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.45;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    letter-spacing: -0.01em;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent);
}

/* Tabular numbers para alinhamento perfeito de horas e saldos */
.tabular-nums, .stat-value, .table td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.mono {
    font-family: var(--font-mono);
}

/* ==========================================================
   LAYOUT CONTAINER (Grelha de 8px e Densidade B2B)
   ========================================================== */
.container {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.container-narrow {
    max-width: 520px;
}

.main-content {
    flex: 1;
    padding-top: 1.5rem;
    padding-bottom: 5rem;
}

@media (min-width: 768px) {
    .main-content {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }
}

/* ==========================================================
   NAVBAR & CABEÇALHO
   ========================================================== */
.navbar {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background-color: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
}

.brand-tag {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.4rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}

.nav-links {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.nav-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-card-hover);
}

.nav-link.active {
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border);
}

.nav-user {
    display: none;
    align-items: center;
    gap: 0.75rem;
}

.user-meta {
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

@media (min-width: 768px) {
    .nav-links, .nav-user {
        display: flex;
    }
}

/* Mobile Bottom Navigation (Densidade contida e discreta) */
.bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.5rem;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border);
    z-index: 50;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 768px) {
    .bottom-nav {
        display: none;
    }
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    gap: 0.2rem;
    transition: var(--transition-fast);
}

.bottom-nav-item.active, .bottom-nav-item:hover {
    color: var(--text-primary);
}

.bottom-nav-item.active svg {
    stroke: var(--accent);
}

/* ==========================================================
   BOTÕES (Sólidos, sem gradientes, raio discreto de 6px)
   ========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
    user-select: none;
    white-space: nowrap;
    background-color: transparent;
    color: var(--text-primary);
}

.btn:hover {
    filter: brightness(1.08);
}

.btn:active {
    transform: translateY(1px);
}

/* Ação Primária */
.btn-primary {
    background-color: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}
.btn-primary:hover {
    color: var(--text-inverse);
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Botões Semânticos com Contenção */
.btn-success {
    background-color: #0d8258;
    color: var(--text-inverse);
    border-color: #0d8258;
}
.btn-success:hover {
    background-color: #0a6946;
}

.btn-warning {
    background-color: #a16207;
    color: var(--text-inverse);
    border-color: #a16207;
}
.btn-warning:hover {
    background-color: #854d0e;
}

.btn-danger {
    background-color: #b91c1c;
    color: var(--text-inverse);
    border-color: #b91c1c;
}
.btn-danger:hover {
    background-color: #991b1b;
}

/* Botão Neutro / Outline */
.btn-outline {
    background-color: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}
.btn-outline:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--border-hover);
}

/* Tamanhos */
.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 0.75rem 1.4rem;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
}

.btn-block {
    width: 100%;
}

/* ==========================================================
   FORMULÁRIOS
   ========================================================== */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.form-control, .form-select {
    width: 100%;
    padding: 0.55rem 0.85rem;
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    transition: var(--transition-fast);
}

.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--border-focus);
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.3rem;
}

/* ==========================================================
   CARDS & GRELHA DE MÉTRICAS (Linear / Stripe Style)
   ========================================================== */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: var(--card-shadow);
}

.card-header {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.015em;
}

.card-body {
    padding: 1.25rem;
}

/* Grelha de Métricas: 1 número herói por cartão */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    transition: var(--transition-fast);
}

.stat-card:hover {
    border-color: var(--border-hover);
    background-color: var(--bg-card-hover);
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-icon {
    color: var(--text-tertiary);
}

.stat-value {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.stat-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ==========================================================
   BADGES (Opacidade baixa da cor semântica + texto pleno)
   ========================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    line-height: 1.2;
}

.badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.badge-success {
    background-color: var(--success-subtle);
    color: var(--success);
    border-color: var(--success-border);
}
.badge-success .badge-dot { background-color: var(--success); }

.badge-warning {
    background-color: var(--warning-subtle);
    color: var(--warning);
    border-color: var(--warning-border);
}
.badge-warning .badge-dot { background-color: var(--warning); }

.badge-danger {
    background-color: var(--danger-subtle);
    color: var(--danger);
    border-color: var(--danger-border);
}
.badge-danger .badge-dot { background-color: var(--danger); }

.badge-info {
    background-color: var(--info-subtle);
    color: var(--info);
    border-color: var(--info-border);
}
.badge-info .badge-dot { background-color: var(--info); }

.badge-neutral {
    background-color: var(--badge-neutral-bg);
    color: var(--text-secondary);
    border-color: var(--border);
}

/* ==========================================================
   ALERTAS
   ========================================================== */
.alert {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    line-height: 1.4;
}

.alert-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.alert-success {
    background-color: var(--success-subtle);
    border: 1px solid var(--success-border);
    color: var(--alert-success-text);
}

.alert-warning {
    background-color: var(--warning-subtle);
    border: 1px solid var(--warning-border);
    color: var(--alert-warning-text);
}

.alert-danger {
    background-color: var(--danger-subtle);
    border: 1px solid var(--danger-border);
    color: var(--alert-danger-text);
}

.alert-info {
    background-color: var(--info-subtle);
    border: 1px solid var(--info-border);
    color: var(--alert-info-text);
}

/* ==========================================================
   TABELAS (Dense, Alta Legibilidade)
   ========================================================== */
/* Operational and table pages share the available width and one outer gutter. */
@media screen {
    .main-content { min-width: 0; }
    .main-content > .container:has(table),
    .main-content > .container:has(.daily-page),
    .main-content > .container:has(.company-settings) {
        max-width: none;
        padding-inline: clamp(16px, 1.25vw, 24px);
    }
    .main-content > .container > .container:has(table),
    .main-content > .container > .daily-page,
    .main-content > .container > .company-settings,
    .main-content > .container > .settlement-wrap {
        /* Override the older page-specific inline width limits. */
        max-width: none !important;
        width: 100%;
        min-width: 0;
        padding-inline: 0;
    }
    .main-content .table-responsive { min-width: 0; max-width: 100%; }
    .main-content .daily-page > .card { min-width: 0; }
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.88rem;
}

.table th {
    background-color: var(--bg-surface);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border);
}

.table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.table tbody tr:hover {
    background-color: var(--bg-card-hover);
}

/* ==========================================================
   UTILITÁRIOS
   ========================================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

/* ==========================================================
   BOTÃO DE TEMA (MODO CLARO / NOTURNO)
   ========================================================== */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-card-hover);
    border-color: var(--border-hover);
}

.theme-toggle-btn .icon-sun {
    display: block;
}
.theme-toggle-btn .icon-moon {
    display: none;
}

[data-theme="light"] .theme-toggle-btn .icon-sun {
    display: none;
}
[data-theme="light"] .theme-toggle-btn .icon-moon {
    display: block;
}

/* ==========================================================
   MODAIS & DIÁLOGOS REUTILIZÁVEIS
   ========================================================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--modal-backdrop);
    backdrop-filter: blur(2px);
    z-index: -1;
}

.modal-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow-modal);
    position: relative;
    overflow: hidden;
}

.modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    background-color: var(--bg-surface);
}

.btn-close {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.35rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.btn-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-card-hover);
}


/* Ajustes dos controlos usados diariamente; reutiliza os tokens existentes. */
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.form-control:focus-visible, .form-select:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.btn, .form-control, .form-select { min-height: 40px; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; filter: none; }
[aria-busy="true"] .btn:disabled { cursor: wait; }
.btn-secondary, .btn-neutral { background: var(--bg-card); border-color: var(--border); }
.btn-secondary:hover, .btn-neutral:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.card-header { flex-wrap: wrap; gap: .75rem; }
.filter-tab { min-height: 40px; }
.filter-feedback { padding: .75rem 1.15rem; color: var(--text-secondary); font-size: .85rem; }
.punch-feedback { min-height: 1.5em; margin-top: .5rem; color: var(--text-secondary); font-size: .85rem; }
@media (max-width: 767px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
    .btn, .filter-tab, .form-control, .form-select, .theme-toggle-btn, .btn-close { min-height: 44px; }
    .theme-toggle-btn, .btn-close { min-width: 44px; }
    .form-control, .form-select { font-size: 16px; }
    .bottom-nav { height: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
    .main-content { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .stat-card { padding: .85rem; min-width: 0; }
    .stat-label { font-size: .75rem; }
    .stat-value { font-size: 1.5rem; }
    #timesheetFilterForm > div { flex-wrap: wrap; max-width: 100%; }
    #timesheetFilterForm #selectUser { min-width: 0 !important; width: 100%; }
    .daily-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Estrutura visual partilhada: espaço, hierarquia e ações do dia a dia. */
body { line-height: 1.6; }
.main-content { padding-top: 2.5rem; }
.navbar-inner { height: auto; min-height: 4.5rem; gap: 1rem; flex-wrap: wrap; padding-top: .75rem; padding-bottom: .75rem; }
.nav-links { flex-wrap: wrap; }
.nav-link { min-height: 40px; }
.nav-link.active { background: var(--accent-subtle); border-color: var(--accent-border); color: var(--text-primary); }
.brand-icon { width: 34px; height: 34px; border-radius: var(--radius-md); }
.card { box-shadow: none; margin-bottom: var(--space-section); }
.card-header { padding: 1.25rem var(--space-card); background: var(--bg-surface); }
.card-title { font-size: 1.1rem; }
.card-body { padding: var(--space-card); }
.btn { min-height: 46px; padding: .7rem 1.15rem; font-size: .92rem; font-weight: 600; }
.btn-sm { min-height: 40px; padding: .5rem .85rem; font-size: .85rem; }
.btn-primary { box-shadow: 0 4px 10px var(--accent-subtle); }
.btn-outline, .btn-neutral, .btn-secondary { background: transparent; }
.btn:hover { filter: none; }
.btn:disabled { opacity: .45; box-shadow: none; }
.btn svg { flex-shrink: 0; }
.form-label { font-size: .9rem; color: var(--text-primary); margin-bottom: .5rem; }
.form-group { margin-bottom: 1.4rem; }
.form-control, .form-select { min-height: 48px; padding: .75rem 1rem; font-size: 1rem; }
.form-control:hover, .form-select:hover { border-color: var(--border-hover); }
.form-control:user-invalid, .form-select:user-invalid { border-color: var(--danger); background: var(--danger-subtle); }
.form-hint { font-size: .82rem; }
.table th { padding: 1rem 1.25rem; background: var(--bg-card-active); font-size: .74rem; font-weight: 700; }
.table td { padding: 1.15rem 1.25rem; border-bottom-color: var(--border); }
.table tbody tr:nth-child(even) { background: var(--bg-surface); }
.table tbody tr:hover { background: var(--accent-subtle); }
.badge { padding: .35rem .65rem; font-size: .78rem; border-radius: var(--radius-sm); }
.alert { padding: 1.15rem 1.3rem; border-left-width: 4px; }
.daily-page { max-width: 1240px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: var(--space-section); padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.page-heading h1 { font-size: var(--type-title); letter-spacing: -.045em; line-height: 1.15; font-weight: 750; margin-bottom: .6rem; }
.page-heading p { font-size: .98rem; max-width: 65ch; line-height: 1.6; }
.page-heading > .d-flex { flex-wrap: wrap; }
.stats-grid { gap: 1rem; margin-bottom: var(--space-section); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat-card { padding: 1.5rem; box-shadow: none; min-width: 0; }
.stat-card:hover { background: var(--bg-card); border-color: var(--border); }
.stat-label { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.stat-value { font-family: var(--font-ui); font-size: 2.25rem; letter-spacing: -.05em; }
.stat-sub { font-size: .82rem; }
.daily-page .stats-grid > :first-child { background: var(--accent); border-color: var(--accent); color: #fff; }
.daily-page .stats-grid > :first-child :is(.stat-label,.stat-value,.stat-icon,.stat-sub) { color: #fff !important; }
.empty-state { margin: 1.5rem; padding: 3rem 1.5rem; text-align: center; background: var(--bg-surface); border: 1px dashed var(--border-hover); border-radius: var(--radius-lg); color: var(--text-secondary); }
.daily-page .filter-feedback { margin: 1rem 1.5rem 0; padding: .75rem 1rem; border-radius: var(--radius-md); background: var(--accent-subtle); color: var(--text-secondary); }
.daily-page #presenceCardsContainer { padding: 1.5rem !important; gap: 1rem !important; }
.daily-page .presence-card { padding: 1.25rem !important; border-radius: var(--radius-lg) !important; background: var(--bg-card) !important; }
.daily-page .presence-card:hover { transform: none; border-color: var(--accent-border); }
.daily-page .presence-card strong { font-size: .95rem !important; }
.daily-page .presence-card .btn { font-size: .85rem !important; min-height: 40px; padding: .5rem .8rem !important; }
.daily-page .presence-card .badge { font-size: .75rem !important; padding: .3rem .55rem !important; }
.daily-page .filter-tab { min-height: 44px; padding: .6rem 1rem; font-size: .88rem; border-radius: var(--radius-md); }
.clock-page { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.clock-page > .page-heading { grid-column: 1 / -1; margin-bottom: 0; }
.clock-hero { text-align: center; padding: 2rem; background: linear-gradient(150deg, var(--accent-subtle), var(--bg-card) 65%); border-color: var(--accent-border); }
.clock-hero #live-clock { font-size: clamp(3rem, 5vw, 4.5rem) !important; margin: 2rem 0 .75rem; }
.clock-metrics { display: grid; grid-template-columns: 1fr 1fr; padding: 1.25rem; margin: 1.5rem 0; border-radius: var(--radius-lg); background: var(--bg-surface); }
.clock-metrics #counter-worked, .clock-metrics #counter-break { font-size: 1.6rem !important; }
.clock-timeline { padding: 1.5rem; }
.clock-timeline h2 { font-size: 1.2rem !important; }
.clock-hero .btn { white-space: normal; flex: 1; min-height: 52px; }
.clock-hero > .d-flex { flex-wrap: wrap; gap: .5rem; }
.punch-feedback:not(:empty) { background: var(--accent-subtle); border-radius: var(--radius-md); padding: .75rem; }
.absence-workspace { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1.4fr); gap: 1.5rem; align-items: start; }
.absence-workspace > .card { min-width: 0; }
.calculation-card { min-height: 168px; background: var(--accent-subtle) !important; border-color: var(--accent-border) !important; padding: 1.25rem !important; }
.calculation-card[aria-busy="true"] { border-style: dashed; }
.calculation-card.calculation-error { background: var(--danger-subtle) !important; border-color: var(--danger) !important; }
#submitAbsenceBtn { position: sticky; bottom: 1rem; z-index: 2; }
#absenceForm { overflow: visible; }
.absence-workspace > .card:first-child { overflow: visible; }
.daily-modal { position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 1rem; background: var(--modal-backdrop); backdrop-filter: blur(4px); }
.daily-modal > .card { max-height: 90dvh; overflow-y: auto; box-shadow: var(--shadow-modal) !important; }
.daily-modal .card-header:last-child { position: sticky; bottom: 0; background: var(--bg-surface) !important; }
.daily-page .btn-danger { margin-left: .75rem; }
@media (max-width: 767px) {
    .main-content { padding-top: 1.5rem; }
    .page-heading { gap: 1rem; padding-bottom: 1rem; }
    .page-heading h1 { font-size: 1.8rem; }
    .page-heading p { font-size: .9rem; }
    .page-heading > .d-flex { width: 100%; }
    .clock-page, .absence-workspace { display: flex; flex-direction: column; gap: 1rem; }
    .clock-page > *, .absence-workspace > * { width: 100%; }
    .clock-hero { padding: 1.25rem; margin-bottom: 0; }
    .clock-hero #live-clock { margin: 1rem 0; }
    .clock-metrics { padding: .85rem; margin: 1rem 0; }
    .stat-card { padding: 1.1rem; }
    .stat-value { font-size: 1.8rem; }
    .stat-label { font-size: .82rem; }
    .stat-sub { font-size: .76rem; }
    .daily-page .btn, .daily-page .btn-sm { min-height: 44px; }
    .daily-page .form-control, .daily-page .form-select { min-width: 0; max-width: 100%; }
    #submitAbsenceBtn { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
    #filterForm > div { flex-wrap: wrap; }
    .daily-modal .card-body { padding: 1.25rem; }
}

/* Composição do cabeçalho e filtros sem alterar os destinos da navegação. */
@media (min-width: 768px) {
    .navbar-inner { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; }
    .nav-user { justify-self: end; grid-column: 2; grid-row: 1; }
    .nav-links { grid-row: 2; grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; padding: .25rem 0; }
    .nav-link { flex-shrink: 0; white-space: nowrap; }
}
.daily-page .stats-grid > :first-child { background: var(--accent) !important; border-color: var(--accent) !important; }
.daily-page .stats-grid > :first-child :is(.stat-value span,.stat-sub span) { color: #fff !important; }
#timesheetFilterForm input[type="date"] { width: auto; }
#timesheetFilterForm > div { flex: 1; }
#timesheetFilterForm > div:last-child { justify-content: flex-end; flex: 2; }
#filterForm .form-select { width: auto; }
.btn-danger-outline { color: var(--danger); border-color: var(--danger-border); margin-left: .75rem; }
.btn-danger-outline:hover { background: var(--danger-subtle); }
.absence-workspace > .card:first-child > .card-header { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.daily-page .stats-grid > .card { padding: 1.5rem !important; margin-bottom: 0; }
.daily-page .stats-grid > .card:first-child :is(span,div) { color: white !important; }
@media (max-width: 767px) {
    #timesheetFilterForm > div { flex-basis: 100%; }
    #timesheetFilterForm > div:last-child { justify-content: flex-start; }
    #filterForm > div { width: 100%; }
    #filterForm .form-select { width: 100%; }
    .absence-page { display: flex; flex-direction: column; }
    .absence-page > .stats-grid { order: 2; margin-top: 1.5rem; }
    .absence-page > .absence-workspace { order: 1; }
}

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.form-row > * { min-width: 0; }
.form-row input { width: 100%; min-width: 0; }
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
    .stat-header { gap: .5rem; align-items: flex-start; }
    .daily-page .stats-grid { gap: .75rem; }
}

html { color-scheme: var(--color-scheme); }
/* Navegação lateral com espaço reservado: nunca cobre o conteúdo. */
.sidebar-toggle { display: none; }
.sidebar-account { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; flex-shrink: 0; }
@media (min-width: 768px) {
    .app-sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; border-right: 1px solid var(--border); border-bottom: 0; }
    .app-sidebar .navbar-inner { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; height: 100dvh; padding: 1.5rem 1rem; gap: 1.5rem; }
    .app-sidebar .brand { padding: 0 .5rem; }
    .app-sidebar .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
    .app-sidebar .nav-link { min-height: 46px; white-space: normal; border: 1px solid transparent; }
    .app-sidebar .nav-link.active { border-color: var(--accent-border); }
    .app-sidebar .nav-link svg { flex-shrink: 0; }
    .app-sidebar .sidebar-account { flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--border); }
    .app-sidebar .nav-user { display: flex; flex-wrap: wrap; width: 100%; gap: .75rem; }
    .app-sidebar .user-meta { flex-wrap: wrap; overflow-wrap: anywhere; }
    .app-sidebar ~ .main-content { margin-left: 240px; min-width: 0; }
    .app-sidebar ~ footer { margin-left: 240px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
    .clock-page, .absence-workspace { display: flex; flex-direction: column; }
    .clock-page > *, .absence-workspace > * { width: 100%; }
}
@media (max-width: 767px) {
    .app-sidebar { position: relative; }
    .app-sidebar .navbar-inner { display: grid; grid-template-columns: 1fr auto; gap: .75rem; }
    .sidebar-toggle { display: inline-flex; }
    .app-sidebar .sidebar-account { grid-column: 1 / -1; justify-content: flex-end; }
    .app-sidebar .nav-links { grid-column: 1 / -1; display: none; }
    .app-sidebar.is-open .nav-links { display: flex; flex-direction: column; align-items: stretch; max-height: 55dvh; overflow-y: auto; }
    .app-sidebar.is-open .nav-user { display: flex; flex-wrap: wrap; }
    .app-sidebar:not(.is-open) .sidebar-account { display: none; }
}

/* Pesquisa local de colaboradores; o select mantém o valor do formulário. */
.visually-hidden, select.employee-native {
    position: absolute !important; width: 1px !important; height: 1px !important;
    min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
    margin: -1px !important; border: 0 !important; overflow: hidden !important;
    clip-path: inset(50%); white-space: nowrap;
}
.employee-picker { position: relative; width: 100%; min-width: 0; }
.employee-search { width: 100%; padding-right: 2rem; text-overflow: ellipsis; }
.employee-search[aria-expanded="true"] { border-color: var(--border-focus); }
.employee-search[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-subtle); }
.employee-options {
    position: fixed; z-index: 2000; margin: 0; padding: .4rem;
    overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border-hover);
    border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary);
    box-shadow: var(--shadow-modal); font: .92rem/1.5 var(--font-ui);
}
.employee-options[hidden] { display: none; }
.employee-options [role="option"] { padding: .7rem .85rem; min-height: 44px; border-radius: var(--radius-sm); cursor: pointer; }
.employee-options [role="option"][aria-selected="true"] { font-weight: 700; background: var(--accent-subtle); }
.employee-options [role="option"]:hover, .employee-options .is-active { color: var(--text-inverse); background: var(--accent) !important; }
.employee-empty { padding: 1rem; color: var(--text-secondary); }
#filterForm .employee-picker { width: min(100%, 300px); }
.employee-filter-row { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.employee-filter-row > label { flex: none; }
.employee-identity-picker { display: flex; align-items: center; width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; }
.employee-identity-picker:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-subtle); }
.employee-identity-picker .employee-search { flex: 1 1 auto; width: 0; min-width: 0; border: 0; background: transparent; box-shadow: none; text-overflow: clip; }
.employee-identity-number { flex: none; padding: .45rem .75rem; margin-right: .35rem; border-radius: var(--radius-sm); background: var(--accent-subtle); color: var(--accent); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.employee-identity-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; white-space: nowrap; overflow-x: auto; }
.employee-option-number { color: var(--text-secondary); font-size: .8rem; white-space: nowrap; }
.employee-identity-option:hover .employee-option-number, .employee-identity-option.is-active .employee-option-number { color: inherit; }
/* Shared accordion appearance; the account menu remains a dropdown. */
details:not(.account-dropdown) {
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: none;
    min-width: 0;
}
details:not(.account-dropdown) > summary {
    display: list-item;
    min-height: 44px;
    padding: 10px 0;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    line-height: 24px;
    list-style: disclosure-closed inside;
    overflow-wrap: anywhere;
}
details:not(.account-dropdown)[open] > summary { list-style-type: disclosure-open; margin-bottom: 1rem; }
details:not(.account-dropdown) > summary::marker { color: var(--text-primary); }
details:not(.account-dropdown) > summary:hover { color: var(--accent); }
details:not(.account-dropdown) > summary:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 4px; border-radius: 4px; }
.report-accordion > summary > span { margin-left: .75rem; color: var(--text-secondary); font-size: .8rem; font-weight: 500; }
.report-accordion-body { padding-top: 1rem; border-top: 1px solid var(--border); overflow-x: auto; }
.report-person-line { display: flex; align-items: baseline; gap: 1rem; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.report-person-line h2 { flex: none; margin: .25rem 0; color: var(--text-primary); font-size: 1.15rem; font-weight: 700; }
.report-person-line > span { flex: none; color: var(--accent); font-size: .85rem; font-weight: 700; }
.terminal-list-heading { gap: 1rem; flex-wrap: wrap; }
.terminal-list-heading > div { flex-wrap: wrap; }
.terminal-history-content { max-width: min(100%, 1080px); max-height: min(85vh, 850px); display: flex; flex-direction: column; }
.terminal-history-content .modal-body { overflow: auto; }
.terminal-history-content .modal-body > form { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.terminal-history-content .modal-body .container { padding: 0; }
.terminal-key-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.terminal-key-row input { flex: 1 1 220px; min-width: 0; font-family: var(--font-mono); }
.modal[hidden] { display: none !important; }
.entity-modal-open { overflow: hidden; }
.entity-form-modal .modal-content { max-width: min(100%, 760px); max-height: min(92vh, 980px); display: flex; flex-direction: column; }
.entity-form-modal .modal-header h2 { margin: 0; font-size: 1.2rem; }
.entity-form-modal .modal-body { overflow-y: auto; min-height: 0; }
.entity-form-modal .card.container-narrow { max-width: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.entity-form-modal .card.container-narrow form > .d-flex:last-child { position: sticky; bottom: -1.25rem; padding: 1rem 0; background: var(--bg-card); border-top: 1px solid var(--border); }
.shift-assignment-grid { display: grid; grid-template-columns: minmax(260px, 1.5fr) minmax(260px, 1.5fr) minmax(170px, .8fr) minmax(160px, auto); gap: .85rem; align-items: end; }
.shift-assignment-grid > * { min-width: 0; }
.shift-assignment-grid .form-select, .shift-assignment-grid .form-control, .shift-assignment-grid .employee-picker { width: 100%; }
.shift-assignment-submit { min-height: 44px; white-space: nowrap; }
.terminal-subpage { max-width: 1240px; }
.terminal-workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 1.25rem; align-items: start; }
.terminal-action-form, .terminal-guidance { padding: 1.5rem; }
.terminal-action-form { display: grid; gap: 1.2rem; }
.terminal-action-form .form-group { margin: 0; min-width: 0; }
.terminal-action-form .form-control, .terminal-action-form .employee-picker { width: 100%; }
.terminal-section-title { display: flex; align-items: center; gap: .85rem; }
.terminal-section-title > span { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--accent-subtle); color: var(--accent); font-weight: 700; }
.terminal-section-title h2, .terminal-guidance h2 { margin: 0; font-size: 1.1rem; }
.terminal-section-title p, .terminal-history .card-header p { margin: .2rem 0 0; color: var(--text-secondary); font-size: .85rem; }
.terminal-section-divider { padding-top: 1.2rem; border-top: 1px solid var(--border); }
.terminal-two-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.terminal-choice-group { margin: 0; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.terminal-choice-group legend { padding: 0 .35rem; color: var(--text-secondary); font-size: .8rem; font-weight: 700; }
.terminal-choice-group label { display: flex; align-items: center; gap: .7rem; min-height: 42px; cursor: pointer; }
.terminal-choice-group input { width: 17px; height: 17px; accent-color: var(--accent); }
.terminal-choice-group small { display: block; color: var(--text-secondary); font-size: .74rem; }
.terminal-form-footer { padding-top: 1rem; border-top: 1px solid var(--border); }
.terminal-form-footer .btn { min-width: 210px; }
.terminal-guidance { background: var(--bg-surface); }
.terminal-guidance ol { padding-left: 1.25rem; margin: 1.1rem 0; line-height: 1.6; }
.terminal-guidance li + li { margin-top: .8rem; }
.terminal-guidance > p { line-height: 1.6; }
.terminal-guidance > .btn { margin-top: 1rem; }
.terminal-note { padding: .9rem 1rem; border: 1px solid var(--accent-border); border-radius: var(--radius-md); background: var(--accent-subtle); color: var(--text-primary); font-size: .84rem; line-height: 1.55; }
.terminal-history { margin-top: 1.25rem; overflow: hidden; }
.terminal-history .card-header { gap: 1rem; }
.terminal-history .card-header .btn { flex: none; }
.terminal-history > .card { margin: 1rem; }
.terminal-empty { display: grid; gap: .3rem; justify-items: center; padding: 2.5rem 1rem; color: var(--text-secondary); text-align: center; }
.terminal-empty strong { color: var(--text-primary); }
.terminal-message { margin-top: .35rem; color: var(--text-secondary); font-size: .8rem; }
.diagnostics-filters { display: flex; align-items: end; gap: 1rem; padding: 1.25rem; flex-wrap: wrap; }
.diagnostics-filters > label { flex: 1 1 300px; margin: 0; display: grid; gap: .5rem; }
.diagnostics-events { overflow: hidden; }
.diagnostics-events .card-header { gap: 1rem; flex-wrap: wrap; }
.diagnostics-events .card-header p { margin: .4rem 0 0; font-size: .85rem; max-width: 70ch; }
.diagnostics-events .table { margin: 0; }
.diagnostics-events .table td { vertical-align: top; }
.terminal-preview { padding: 1.5rem; margin-top: 1.25rem; border: 2px solid var(--warning); }
@media (max-width: 900px) { .terminal-workspace { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .terminal-two-fields { grid-template-columns: minmax(0, 1fr); } .terminal-action-form, .terminal-guidance { padding: 1.1rem; } .terminal-history .card-header { flex-wrap: wrap; } }
#timesheetFilterForm > .employee-filter-row { flex: 1 1 560px; max-width: none; }
#timesheetFilterForm > .employee-filter-row .employee-identity-picker { flex: 1; }
#timesheetFilterForm > div:last-child { flex: 0 1 auto; }
.absence-filter-grid { display: grid; grid-template-columns: minmax(390px, 1fr) minmax(440px, 1fr); gap: 1rem; align-items: center; }
.absence-status-filters, .absence-select-filters { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.absence-status-filters { flex-wrap: nowrap; }
.absence-status-filters .btn { white-space: nowrap; }
.absence-select-filters .employee-picker { flex: 1 1 280px; width: auto !important; }
.absence-select-filters > .form-select { flex: 0 1 175px; width: 175px !important; min-width: 0; }
@media (max-width: 1100px) { .absence-filter-grid { grid-template-columns: minmax(0, 1fr); } .absence-status-filters { flex-wrap: wrap; } }
@media (max-width: 640px) { .absence-select-filters { flex-wrap: wrap; } .absence-select-filters .employee-picker, .absence-select-filters > .form-select { flex: 1 1 100%; width: 100% !important; } }
@media (max-width: 1050px) { .shift-assignment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .shift-assignment-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .employee-filter-row { width: 100%; } .employee-filter-row > label { display: none; } .report-accordion > summary > span { display: none; } }
@media print { .employee-options { display: none !important; } }

/* Perfil e ações de sessão agrupados no rodapé da navegação. */
.account-company { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); text-decoration: none; }
.account-company-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--accent-subtle); color: var(--text-primary); font-size: 1.2rem; font-weight: 650; overflow: hidden; }
.account-company-avatar:not(.has-logo)::before { content: attr(data-initial); }
.account-company-avatar.has-logo { width: auto; max-width: 148px; min-width: 42px; padding: 4px; box-sizing: border-box; background: transparent; }
.account-company-logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 34px; object-fit: contain; object-position: center; }
.account-company-identity { min-width: 0; }
.account-company-identity strong { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.account-company-identity > span { display: block; color: var(--text-secondary); font-size: .75rem; margin-top: .25rem; }
a.account-company:hover { background: var(--bg-card-hover); border-color: var(--accent-border); color: var(--text-primary); }
a.account-company:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.account-company > svg { flex-shrink: 0; margin-left: auto; }
.account-profile { display: flex; align-items: center; gap: .7rem; padding: .85rem; background: var(--bg-card-active); border: 1px solid var(--border); border-radius: var(--radius-md); }
.account-profile .user-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-border); }
.account-identity { min-width: 0; }
.account-identity strong { display: block; font-size: .85rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.account-identity > span { display: block; margin-top: .15rem; font-size: .75rem; color: var(--text-secondary); }
.account-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem; }
.account-action { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .5rem .6rem; border: 1px solid transparent; border-radius: var(--radius-md); font: 500 .8rem var(--font-ui); color: var(--text-secondary); background: transparent; cursor: pointer; }
.account-action.theme-toggle-btn { width: auto; height: auto; }
.account-action svg { flex-shrink: 0; }
.account-action:hover { background: var(--bg-card-hover); border-color: var(--border); color: var(--text-primary); }
.account-logout { border-left-color: var(--border); }
.account-logout:hover { color: var(--danger); background: var(--danger-subtle); border-color: var(--danger-border); }
.theme-label-dark, [data-theme="light"] .theme-label-light { display: none; }
[data-theme="light"] .theme-label-dark { display: inline; }

/* Compact employee filters, with explicit labels and responsive columns. */
.employee-filter-bar { padding:1.1rem 1.25rem; border-bottom:1px solid var(--border); }
.employee-filters { display:grid; grid-template-columns:minmax(180px,2fr) repeat(3,minmax(120px,1fr)) auto; align-items:end; gap:.85rem; }
.employee-filter-field { display:grid; gap:.4rem; min-width:0; margin:0; }
.employee-filter-field > span { font-size:.78rem; font-weight:600; color:var(--text-secondary); }
.employee-filter-field .form-control, .employee-filter-field .form-select { width:100%; min-width:0; height:42px; margin:0; font-size:.85rem; }
.employee-filter-actions { display:flex; gap:.5rem; align-items:center; }
.employee-filter-actions .btn { min-height:42px; white-space:nowrap; }
.employee-filter-summary { margin-top:.75rem; font-size:.78rem; color:var(--text-tertiary); }
.employee-filters-simple { grid-template-columns:minmax(220px,1fr) minmax(120px,1fr) auto; }
@media (max-width:1100px) {
    .employee-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .employee-filter-search { grid-column:1/-1; }
    .employee-filter-actions { grid-column:1/-1; justify-content:flex-end; }
}
@media (max-width:560px) {
    .employee-filter-bar { padding:1rem; }
    .employee-filters { grid-template-columns:minmax(0,1fr); }
    .employee-filter-actions { justify-content:stretch; }
    .employee-filter-actions .btn { flex:1; }
}

/* Company organization settings. */
.organization-intro { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin:.5rem 0 1.5rem; }
.organization-intro h2 { font-size:1.15rem; font-weight:600; margin:0 0 .4rem; letter-spacing:-.02em; }
.organization-intro p { margin:0; font-size:.85rem; line-height:1.6; max-width:680px; }
.organization-intro .btn { flex-shrink:0; gap:.65rem; }
.organization-card { padding:1.5rem; margin-bottom:1.25rem; }
.organization-card-heading { display:flex; align-items:center; gap:.75rem; }
.organization-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--accent-subtle); color:var(--accent); }
.organization-card-heading h3 { margin:0; font-size:1rem; font-weight:600; }
.organization-count { display:grid; place-items:center; min-width:26px; height:26px; padding:0 .4rem; border-radius:8px; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); font-size:.75rem; font-weight:600; }
.organization-description { margin:.75rem 0 1.25rem; color:var(--text-secondary); font-size:.83rem; line-height:1.6; }
.organization-edit { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:1rem; align-items:end; padding:1rem; margin:.75rem 0; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; }
.organization-field { display:grid; gap:.5rem; min-width:0; font-size:.8rem; font-weight:500; color:var(--text-secondary); margin:0; }
.organization-field .form-control { min-width:0; width:100%; height:44px; margin:0; font-size:.875rem; color:var(--text-primary); }
.organization-row-actions { display:flex; align-items:center; gap:.85rem; min-height:44px; flex-wrap:wrap; }
.organization-active { display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; cursor:pointer; white-space:nowrap; }
.organization-active input { width:16px; height:16px; accent-color:var(--accent); }
.organization-row-actions .btn, .organization-add .btn { min-height:44px; }
.organization-add { display:grid; grid-template-columns:minmax(180px,1fr) auto; align-items:end; gap:1rem; margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.organization-empty { display:grid; gap:.4rem; padding:1.25rem; border:1px dashed var(--border); border-radius:12px; background:var(--bg-surface); }
.organization-empty strong { font-size:.85rem; font-weight:500; }
.organization-empty span { font-size:.8rem; color:var(--text-secondary); line-height:1.6; }
.organization-note { margin:1.25rem 0 0; padding:0 .25rem; max-width:850px; color:var(--text-tertiary); font-size:.8rem; line-height:1.7; }
@media(max-width:760px) {
    .organization-intro { align-items:flex-start; flex-direction:column; gap:.85rem; }
    .organization-card { padding:1rem; }
    .organization-edit { grid-template-columns:minmax(0,1fr); }
    .organization-row-actions .btn { margin-left:auto; }
}
@media(max-width:440px) {
    .organization-add { grid-template-columns:minmax(0,1fr); }
    .organization-row-actions { gap:.6rem; }
}

/* Establishment colours: identification only, never status. Dark theme first, light below. */
:root { --org-indigo:#818CF8; --org-violet:#A78BFA; --org-fuchsia:#E879F9; --org-pink:#F472B6; --org-teal:#2DD4BF; --org-blue:#60A5FA; --org-brown:#C79A6B; --org-slate:#94A3B8; }
[data-theme="light"] { --org-indigo:#4F46E5; --org-violet:#7C3AED; --org-fuchsia:#C026D3; --org-pink:#DB2777; --org-teal:#0F766E; --org-blue:#1D4ED8; --org-brown:#8B5A2B; --org-slate:#64748B; }
.org-color-indigo { --org:var(--org-indigo); } .org-color-violet { --org:var(--org-violet); } .org-color-fuchsia { --org:var(--org-fuchsia); } .org-color-pink { --org:var(--org-pink); }
.org-color-teal { --org:var(--org-teal); } .org-color-blue { --org:var(--org-blue); } .org-color-brown { --org:var(--org-brown); } .org-color-slate { --org:var(--org-slate); }
.org-dot { display:inline-block; flex:none; width:.6rem; height:.6rem; border-radius:50%; background:var(--org, var(--org-slate)); vertical-align:baseline; }
.org-dot[hidden] { display:none; }
.ui-organization-summary .org-dot { margin-right:.1rem; }
.org-unit { display:inline-flex; align-items:center; gap:.4rem; min-width:0; color:var(--text-secondary); font-size:.78rem; overflow-wrap:anywhere; }
.org-unit strong { color:var(--text-primary); font-weight:500; }
.organization-colors { grid-column:1 / -1; margin:0; padding:0; border:0; min-width:0; }
.organization-colors legend { padding:0; margin-bottom:.5rem; font-size:.8rem; font-weight:500; color:var(--text-secondary); }
.organization-colors small { display:block; margin-top:.5rem; color:var(--text-tertiary); font-size:.75rem; line-height:1.5; }
.organization-color-options { display:flex; flex-wrap:wrap; gap:.4rem; }
.organization-color { position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:10px; border:1px solid var(--border); background:var(--bg-surface); cursor:pointer; }
.organization-color input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.organization-color .org-dot { width:1.15rem; height:1.15rem; }
.organization-color:has(input:checked) { border-color:var(--org); box-shadow:inset 0 0 0 2px var(--org); }
.organization-color:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
@media print { .org-dot { print-color-adjust:exact; -webkit-print-color-adjust:exact; } }

/* Shared headers follow vertical scrolling within each table's bounds. */
.app-table-heading { position: relative; z-index: 5; background: var(--bg-surface); }
.app-table-heading > tr > th, .app-table-heading > tr > td { position: static !important; }
@media print { .app-table-heading { transform: none !important; } }

/* Navigation follows daily work, team management, then settlement and settings. */
.app-sidebar .nav-section { display: grid; gap: .15rem; flex-shrink: 0; }
.app-sidebar .nav-section-title { margin: .8rem .75rem .3rem; font-size: .65rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); }
.app-sidebar .nav-section:first-child .nav-section-title { margin-top: 0; }
.app-sidebar .nav-settings { margin: .7rem 0 0; padding: .6rem 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; flex-shrink: 0; }
.app-sidebar .nav-settings > summary, .app-sidebar .nav-settings[open] > summary { display: flex; list-style: none; cursor: pointer; margin: 0; padding: .4rem .75rem; }
.app-sidebar .nav-settings > summary::-webkit-details-marker { display: none; }
.app-sidebar .nav-chevron { margin-left: auto; transition: transform .15s ease; }
.app-sidebar .nav-settings[open] .nav-chevron { transform: rotate(90deg); }
.app-sidebar .nav-settings-links { margin: .25rem 0 0 .8rem; padding-left: .4rem; border-left: 1px solid var(--border); }
.app-sidebar .nav-settings-links .nav-link { font-size: .8rem; }
.app-sidebar .nav-link { flex-shrink: 0; }
.app-sidebar .nav-link svg { flex-shrink: 0; }
.app-sidebar .nav-count { margin-left: auto; font-size: .68rem; }
.app-sidebar .nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.distribution-notice{padding:1.25rem 1.5rem;margin-bottom:1.5rem;border-left:3px solid var(--accent,#2563eb)}
.distribution-notice h2{font-size:1rem;margin:0 0 .65rem}
.distribution-notice p{font-size:.875rem;line-height:1.6;margin:.45rem 0;color:var(--text-secondary)}
.distribution-notice>.btn{margin-top:.75rem}
.shift-conflict-explanation{font-size:.85rem;line-height:1.6;white-space:normal}
.shift-conflict-explanation ul{padding-left:1.2rem;margin:.75rem 0}
.shift-conflict-explanation li{margin:.5rem 0}

/* ContaDias: matching marks for the existing themes. */
.brand-logo { width: 161px; height: 28px; object-fit: contain; }
.brand-logo-light { display: none; }
[data-theme="light"] .brand-logo-dark { display: none; }
[data-theme="light"] .brand-logo-light { display: block; }

/* Consistent report warnings; retain inline styles for standalone PDF exports. */
.report-notice.alert {
    display: block;
    padding: 0.85rem 1rem !important;
    border: 1px solid var(--warning-border) !important;
    color: var(--alert-warning-text) !important;
    font-size: 0.88rem !important;
}
@media screen {
    .rh-summary-table tbody tr { cursor: pointer; }
    .rh-summary-table tbody tr:hover,
    .rh-summary-table tbody tr:focus-within,
    .rh-summary-table tbody tr.is-selected { background: var(--info-subtle); }
    .rh-summary-table tbody tr.is-selected > td:first-child { box-shadow: inset 3px 0 var(--brand); }
    .rh-summary-table tbody tr:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
}

.report-export-dropdown { position: relative; }
.report-export-options {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 50;
    width: 260px;
    max-width: calc(100vw - 2rem);
    padding: 0.35rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.report-export-options a { display: block; padding: 0.65rem 0.75rem; border-radius: 5px; color: var(--text-primary); text-decoration: none; font-size: 0.85rem; }
.report-export-options a:hover, .report-export-options a:focus-visible { background: var(--info-subtle); }
.report-export-options small { display: block; margin-top: 0.2rem; color: var(--text-secondary); font-size: 0.72rem; }
@media (max-width: 640px) { .report-export-options { right: auto; left: 0; } }
/* Bank overview and monthly statement. */
.bank-filters { display:flex; align-items:end; flex-wrap:wrap; gap:1rem; padding:1.25rem; margin-bottom:1.25rem; }
.bank-filters label { display:grid; gap:.4rem; font-size:.85rem; font-weight:600; flex:1 1 140px; }
.bank-employee-filter { flex:2 1 260px; min-width:0; }
.bank-employee-filter > label { margin-bottom:.4rem; }
.bank-filters select,.bank-filters input { width:100%; min-height:44px; padding:.65rem .8rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-card); color:var(--text-primary); font:inherit; }
.bank-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.5rem; }
.bank-stat { padding:1.25rem; display:flex; flex-direction:column; gap:.65rem; margin:0; }
.bank-stat span,.bank-stat small { color:var(--text-secondary); }
.bank-stat strong { font-size:1.9rem; font-variant-numeric:tabular-nums; line-height:1.2; }
.bank-stat-main { border-top:3px solid var(--accent); }
.bank-credit { color:var(--success); }
.bank-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1.25rem; border-bottom:1px solid var(--border); }
.bank-section-heading h2 { font-size:1rem; margin:0; }
.bank-section-heading p { margin:.4rem 0 0; color:var(--text-secondary); font-size:.85rem; }
.bank-table { margin:0; }
.bank-table th,.bank-table td { text-align:right; vertical-align:top; }
.bank-table th:first-child,.bank-table td:last-child,.bank-table th:last-child { text-align:left; }
.bank-table tbody th { background:transparent; font-size:.85rem; white-space:nowrap; font-weight:600; text-transform:none; }
.bank-table .bank-zero { color:var(--text-secondary); }
.bank-day-detail { min-width:120px; }
.bank-day-detail summary { cursor:pointer; color:var(--accent); font-weight:600; padding:.3rem 0; }
.bank-day-detail summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.bank-day-detail[open] { min-width:280px; max-width:440px; }
.bank-detail-content { line-height:1.65; overflow-wrap:anywhere; font-size:.85rem; }
.bank-detail-content p { padding:.8rem 0; border-bottom:1px solid var(--border); }
.bank-payout-detail { border-top:1px solid var(--border); padding:1rem 0; overflow-wrap:anywhere; }
.bank-payout-detail dt { font-size:.85rem; color:var(--text-muted); }
.bank-payout-detail dd { margin:0; }
.bank-payout-detail .ui-form-grid > * { min-width:0; }
.bank-table .bank-empty { text-align:center; padding:3rem 1.5rem; }
.bank-empty p { color:var(--text-secondary); margin:.5rem 0 0; }
@media(max-width:900px) { .bank-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .bank-summary { gap:.65rem; } .bank-stat { padding:1rem; } .bank-stat strong { font-size:1.45rem; } .bank-filters .btn { flex:1 1 100%; } }
@media print { .bank-summary { grid-template-columns:repeat(4,1fr); } .bank-stat { padding:.5rem; } .bank-stat strong { font-size:1.2rem; } }

/* Compact actions for settlement and monthly reports. */
.compact-report-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0}.compact-report-actions>div{margin:0!important}.compact-report-actions .btn{font-size:.85rem}.compact-more{position:relative;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.compact-more>summary{cursor:pointer;list-style:none}.compact-more>summary::-webkit-details-marker{display:none}.compact-more>summary::after{content:' ▾'}.compact-more>div{position:absolute;right:0;top:calc(100% + .4rem);z-index:20;display:grid;gap:.35rem;min-width:220px;padding:.6rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 8px 24px #0002}.compact-more>div>.btn{justify-content:flex-start;white-space:nowrap}.report-identity-compact{padding:.75rem 1rem!important}.report-identity-compact .badge{margin-bottom:.15rem!important}.report-identity-compact .report-person-line{margin:.15rem 0}.report-detail-dialog{position:fixed;inset:0;margin:auto;width:min(900px,calc(100vw - 2rem));max-height:85vh;overflow:auto;padding:1.25rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);color:var(--text-primary)}.report-detail-dialog::backdrop{background:#0f172a99}.report-detail-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.report-detail-dialog h2{font-size:1.2rem}.report-detail-dialog table{width:100%}@media(max-width:600px){.compact-report-actions>.btn{flex:1 1 auto}.compact-more>div{right:auto;left:0}}

/* Keep the actions menu above sticky table headings (z-index 5). */
.settlement-action-bar{position:relative;z-index:10;overflow:visible}

/* Seleção de colaboradores na atribuição de turnos. */
.shift-employee-list { max-height: 18rem; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.shift-employee-option { display: flex; gap: .75rem; align-items: center; padding: .75rem; cursor: pointer; border-bottom: 1px solid var(--border-subtle); }
.shift-employee-option:last-child { border-bottom: 0; }
.shift-employee-option[hidden] { display: none; }
.shift-employee-option input { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.shift-employee-option span { min-width: 0; overflow-wrap: anywhere; }
.shift-employee-option small { display: block; }

.employee-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}
.employee-row-actions>.btn{margin:0;flex:none;white-space:nowrap}
.employee-status-panel{text-align:left;white-space:normal}
.employee-status-panel form{display:grid;gap:1rem}