:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --ink: #172033;
    --muted: #65758b;
    --primary: #155e75;
    --primary-soft: #e7f5f8;
    --line: #dde5ef;
    --green: #15803d;
    --amber: #b45309;
    --blue: #2563eb;
    --red: #b91c1c;
}

.occurrence-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.occurrence-overview a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
    background: #fff;
    color: var(--ink);
    font-weight: 750;
    text-decoration: none;
}

.occurrence-overview a:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.occurrence-overview strong {
    display: grid;
    min-width: 34px;
    min-height: 34px;
    place-items: center;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.05rem;
}

.occurrence-module {
    overflow: hidden;
    padding: 0 !important;
}

.occurrence-module > summary,
.occurrence-create-panel > summary {
    list-style: none;
    cursor: pointer;
}

.occurrence-module > summary::-webkit-details-marker,
.occurrence-create-panel > summary::-webkit-details-marker {
    display: none;
}

.occurrence-module-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

.occurrence-module-summary::after {
    content: '+';
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 850;
}

.occurrence-module[open] > .occurrence-module-summary::after {
    content: '−';
}

.occurrence-module-summary h2 {
    margin: 0 0 3px;
    font-size: 1.05rem;
}

.occurrence-module-summary > span {
    margin-left: auto;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
    white-space: nowrap;
}

.occurrence-module-body {
    border-top: 1px solid var(--line);
    padding: 18px 20px 20px;
}

.occurrence-create-panel {
    margin-bottom: 18px;
    border: 1px solid #b8dce5;
    border-radius: 9px;
    background: #f7fcfd;
}

.occurrence-create-panel > summary {
    padding: 12px 14px;
    color: var(--primary);
    font-weight: 800;
}

.occurrence-create-panel > summary::before {
    content: '+ ';
}

.occurrence-create-panel[open] > summary::before {
    content: '− ';
}

.occurrence-form {
    border-top: 1px solid #d6eaf0;
    margin: 0;
    padding: 16px;
}

.occurrence-table td {
    vertical-align: middle;
}

.occurrence-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.occurrence-list-heading span {
    color: var(--muted);
    font-size: .78rem;
}

@media (max-width: 900px) {
    .occurrence-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .occurrence-overview {
        grid-template-columns: 1fr;
    }

    .occurrence-module-summary {
        align-items: flex-start;
        padding: 16px;
    }

    .occurrence-module-summary > span {
        display: none;
    }

    .occurrence-module-body {
        padding: 14px;
    }

    .occurrence-list-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.justification-review-panel {
    min-width: 280px;
}

.justification-review-panel summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
}

.justification-review-panel summary::-webkit-details-marker {
    display: none;
}

.justification-review-form {
    display: grid;
    gap: 7px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.justification-review-form .form-label {
    margin: 2px 0 0;
    font-size: .78rem;
}

.review-inline-fields {
    display: grid;
    grid-template-columns: 1fr 64px auto 64px auto;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
}

.justification-effect-group {
    display: grid;
    gap: 7px;
}

[data-effect-fields][hidden] {
    display: none !important;
}

.special-pause-control {
    display: grid;
    gap: 10px;
}

.special-pause-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.special-pause-grid:not([hidden]) {
    display: grid;
}

@media (max-width: 560px) {
    .special-pause-grid {
        grid-template-columns: 1fr;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { text-decoration: none; }

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-right: 1px solid var(--line);
    background: var(--surface);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 800;
}

.brand-logo {
    display: block;
    width: min(100%, 176px);
    height: auto;
}

.sidebar .brand-logo {
    filter: brightness(0) invert(1);
}

.brand-logo-auth {
    width: min(100%, 230px);
}

.topbar-logo {
    display: block;
    width: 126px;
    height: auto;
    margin-bottom: 4px;
    filter: brightness(0) invert(1);
}

.sidebar .nav-link {
    border-radius: 8px;
    color: var(--muted);
    font-weight: 600;
    padding: 11px 12px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: var(--primary-soft);
    color: var(--primary);
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.main-content {
    width: 100%;
    margin-left: 280px;
    padding: 28px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.topbar h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 800;
}

.content-band {
    display: grid;
    gap: 18px;
}

.surface,
.metric {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
}

.metric {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.metric span {
    color: var(--muted);
    font-weight: 700;
}

.metric strong {
    font-size: 2.1rem;
    line-height: 1;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.toolbar h2,
.section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.quick-actions,
.filters,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filters {
    align-items: end;
}

.filters .form-control,
.filters .form-select {
    max-width: 230px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.span-2,
.form-actions {
    grid-column: 1 / -1;
}

.notice {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 700;
}

.presence-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px;
}

.presence-hero h2 {
    margin: 4px 0;
    font-size: 2rem;
    font-weight: 800;
}

.presence-button {
    min-width: 190px;
    min-height: 112px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    box-shadow: 0 12px 22px rgb(15 23 42 / 15%);
}

.type-entrada { background: var(--green); }
.type-pausa { background: var(--amber); }
.type-retorno { background: var(--blue); }
.type-saida { background: var(--red); }

.type-pill {
    display: inline-flex;
    min-width: 78px;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
}

.mark-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}

.mark-observation,
.mark-form .form-check {
    grid-column: 1 / -1;
}

.settings-list {
    display: grid;
    gap: 12px;
}

.app-footer {
    margin: 28px 0 54px;
    color: var(--muted);
    font-size: .9rem;
}

.mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.mobile-nav a,
.mobile-nav button {
    flex: 0 0 auto;
    min-width: 86px;
    border: 0;
    border-radius: 8px;
    padding: 9px 10px;
    background: transparent;
    color: var(--muted);
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
}

.mobile-nav form {
    display: flex;
    margin: 0;
}

.mobile-nav a.active {
    background: var(--primary-soft);
    color: var(--primary);
}

.install-prompt {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    width: min(520px, calc(100vw - 36px));
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.install-prompt[hidden] {
    display: none;
}

.install-prompt > span {
    min-width: 0;
    line-height: 1.4;
}

.install-prompt .btn {
    white-space: nowrap;
}

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(135deg, rgb(21 94 117 / 12%), transparent 38%),
        linear-gradient(315deg, rgb(37 99 235 / 10%), transparent 36%),
        var(--bg);
}

.auth-wrap {
    width: min(100%, 440px);
}

.auth-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 22px 42px rgb(15 23 42 / 10%);
}

.auth-panel h1 {
    font-size: 1.8rem;
    font-weight: 800;
}


.collab-presence {
    display: grid;
    gap: 14px;
    max-width: 760px;
    margin: 0 auto;
}

.internal-note {
    justify-self: start;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    padding: 7px 12px;
    font-size: .86rem;
    font-weight: 700;
}

.collab-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 18px;
}

.collab-kicker {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
}

.collab-header h2 {
    margin: 2px 0 4px;
    font-size: 1.55rem;
    font-weight: 850;
}

.collab-header p {
    margin: 0;
    color: var(--muted);
    font-weight: 650;
}

.day-status {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 7px 11px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .82rem;
    font-weight: 850;
}

.status-sem-entrada { background: #f1f5f9; color: #475569; }
.status-falta-abonada { background: #dcfce7; color: #166534; }
.status-ferias,
.status-licenca-medica,
.status-afastamento,
.status-licenca,
.status-folga-concedida,
.status-ausencia-autorizada,
.status-feriado,
.status-expediente-suspenso { background: #e0f2fe; color: #075985; }
.status-feriado-trabalhado { background: #fef3c7; color: #92400e; }
.status-jornada-especial { background: #ede9fe; color: #5b21b6; }
.status-em-atividade { background: #dcfce7; color: #166534; }
.status-em-pausa { background: #fef3c7; color: #92400e; }
.status-finalizado { background: #fee2e2; color: #991b1b; }

.next-action-card {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 18px;
}

.next-action-copy span {
    display: block;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 800;
}

.next-action-copy strong {
    display: block;
    margin-top: 2px;
    font-size: 1.25rem;
    font-weight: 900;
}

.mobile-primary-action {
    width: 100%;
    min-height: 132px;
    font-size: 1.45rem;
}

.mobile-primary-action:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.location-hint {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
}
body.is-offline .next-action-card {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgb(245 158 11 / 14%);
}

body.is-offline .next-action-card::before {
    content: "Sem conexão: registros ficam pendentes neste aparelho.";
    display: block;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    padding: 10px 12px;
    font-size: .88rem;
    font-weight: 800;
}

.offline-pending {
    display: grid;
    gap: 10px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    padding: 14px;
}

.offline-sync-status {
    color: #92400e;
    font-size: .88rem;
    font-weight: 750;
}

.offline-pending .history-list li {
    background: #fff;
    border-color: #fde68a;
}

.today-history {
    display: grid;
    gap: 10px;
}

.compact-toolbar h2 {
    font-size: 1rem;
}

.history-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.history-list li,
.empty-history {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px;
}

.history-list li strong {
    justify-self: end;
    font-size: 1rem;
}

.history-list li small {
    grid-column: 1 / -1;
    color: var(--muted);
}

.empty-history {
    display: block;
    color: var(--muted);
    text-align: center;
    font-weight: 700;
}

.report-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 18px;
}

.report-heading h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 850;
}

.report-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.report-actions,
.report-filter-actions {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
}

.report-filters {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    gap: 14px;
    align-items: end;
}

.report-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 12px;
}

.report-metrics .metric {
    min-height: 96px;
}

.report-metrics .metric strong {
    font-size: 1.65rem;
}

.report-table td strong,
.report-table td small {
    display: block;
}

.report-table td small {
    color: var(--muted);
    margin-top: 2px;
}

.report-status {
    display: inline-flex;
    min-width: 112px;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: .78rem;
    font-weight: 850;
}

.report-status.status-sem_marcacao { background: #f1f5f9; color: #475569; }
.report-status.status-falta { background: #fee2e2; color: #991b1b; }
.report-status.status-falta_abonada { background: #dcfce7; color: #166534; }
.report-status.status-ferias,
.report-status.status-licenca_medica,
.report-status.status-afastamento,
.report-status.status-licenca,
.report-status.status-folga_concedida,
.report-status.status-ausencia_autorizada,
.report-status.status-feriado,
.report-status.status-expediente_suspenso { background: #e0f2fe; color: #075985; }
.report-status.status-feriado_trabalhado { background: #fef3c7; color: #92400e; }
.report-status.status-aguardando { background: #f1f5f9; color: #475569; }
.report-status.status-nao_contabilizado { background: #e2e8f0; color: #475569; }
.report-status.status-descanso { background: #e0f2fe; color: #075985; }
.report-status.status-em_atividade { background: #dcfce7; color: #166534; }
.report-status.status-em_pausa { background: #fef3c7; color: #92400e; }
.report-status.status-finalizado { background: #fee2e2; color: #991b1b; }

.admin-allowance-card { margin: 1rem 0; }
.allowance-duration-inputs { display: flex; align-items: center; gap: .5rem; }
.allowance-duration-inputs .form-control { max-width: 100px; }
.presence-allowance-note { display: block; margin-top: .2rem; color: #166534; font-size: .75rem; font-weight: 700; }
.monthly-closing-card,
.employee-closing-status { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; }
.monthly-closing-card h2 { margin: .15rem 0; }
.monthly-closing-card p,
.employee-closing-status span { margin: 0; color: #64748b; }
.monthly-closing-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.employee-closing-status { padding: 1rem; border: 1px solid #bae6fd; background: #f0f9ff; border-radius: .75rem; }
.employee-closing-status div { display: grid; gap: .2rem; }
.admin-pending-alert { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; margin-bottom: 1rem; border: 1px solid #fcd34d; border-radius: .8rem; background: #fffbeb; }
.admin-pending-alert div { display: grid; gap: .25rem; }
.admin-pending-alert span { color: #78350f; font-size: .875rem; }
@media (max-width: 720px) {
    .monthly-closing-card,
    .employee-closing-status { align-items: stretch; flex-direction: column; }
    .monthly-closing-actions { justify-content: stretch; }
    .monthly-closing-actions .btn { width: 100%; }
    .admin-pending-alert { align-items: stretch; flex-direction: column; }
}
.observation-button {
    min-width: 34px;
    min-height: 30px;
    font-weight: 850;
    line-height: 1;
}

.print-only {
    display: none;
}
@media (max-width: 991.98px) {
    .main-content {
        margin-left: 0;
        padding: 18px 14px 92px;
    }

    .topbar {
        align-items: flex-start;
    }

    .presence-hero,
    .mark-form,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .presence-button {
        width: 100%;
        min-height: 130px;
    }

    .collab-presence {
        max-width: none;
    }

    .collab-header {
        display: grid;
        gap: 10px;
    }

    .day-status {
        justify-self: start;
    }

    .mobile-primary-action {
        min-height: 144px;
    }

    .filters .form-control,
    .filters .form-select {
        max-width: none;
        flex: 1 1 180px;
    }

    .report-heading,
    .report-actions {
        display: grid;
    }

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

    .report-filter-actions .btn,
    .report-actions .btn {
        width: 100%;
    }

    .span-2,
    .form-actions,
    .mark-observation,
    .mark-form .form-check {
        grid-column: auto;
    }

    .install-prompt {
        left: 12px;
        right: 12px;
        width: auto;
        bottom: calc(78px + env(safe-area-inset-bottom));
    }
}

@media print {
    .sidebar,
    .topbar,
    .mobile-nav,
    .filters,
    .no-print,
    .app-footer,
    .install-prompt {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    .main-content {
        margin: 0;
        padding: 0;
    }

    .surface {
        border: 0;
        padding: 0;
    }

    .report-heading,
    .report-metrics,
    .report-table {
        border: 0;
        padding: 0;
    }

    .report-metrics {
        grid-template-columns: repeat(5, 1fr);
        margin: 12px 0;
    }

    .report-metrics .metric {
        border: 1px solid #ddd;
        min-height: auto;
        padding: 8px;
    }

    .table {
        font-size: 11px;
    }
}

.origin-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    padding: 4px 8px;
    font-size: .74rem;
    font-weight: 850;
}
/* Mobile app-inspired layout */
.mobile-home,
.app-mark-screen {
    display: grid;
    gap: 18px;
}

.mobile-profile-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: -2px 0 8px;
    padding: 18px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
}

.profile-avatar {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 3px solid rgb(255 255 255 / 68%);
    border-radius: 999px;
    background: rgb(255 255 255 / 18%);
    font-size: 1.35rem;
    font-weight: 900;
}

.mobile-profile-strip span,
.mobile-profile-strip strong {
    display: block;
}

.mobile-profile-strip span {
    opacity: .84;
    font-size: .86rem;
    font-weight: 750;
}

.mobile-profile-strip strong {
    font-size: 1.35rem;
    letter-spacing: 0;
}

.shortcut-section h2,
.home-action-section h2 {
    margin: 0 0 14px;
    font-size: 1.35rem;
    font-weight: 850;
}

.shortcut-scroller {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
}

.shortcut-card {
    display: grid;
    flex: 0 0 150px;
    min-height: 118px;
    place-items: center;
    gap: 8px;
    scroll-snap-align: start;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    text-align: center;
    box-shadow: 0 7px 14px rgb(15 23 42 / 12%);
    padding: 14px;
}

.shortcut-card span {
    color: var(--primary);
    font-size: 1.45rem;
    line-height: 1;
}

.shortcut-card strong {
    font-size: .98rem;
    font-weight: 650;
}

.home-action-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-mark-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 112px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 18px rgb(15 23 42 / 12%);
}

.home-mark-button.disabled {
    opacity: .65;
    pointer-events: none;
}

.mark-pin {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 4px solid rgb(255 255 255 / 88%);
    border-radius: 999px;
    font-size: 2rem;
    line-height: 1;
}

.home-mark-button strong {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
}

.compact-note {
    margin-top: 12px;
}

.mark-identity-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
}

.mark-identity-strip span,
.mark-identity-strip strong {
    display: block;
}

.mark-identity-strip span {
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 850;
}

.mark-identity-strip strong {
    color: var(--muted);
    font-size: .95rem;
}

.mark-confirm-card {
    border: 0;
    padding: 0;
    background: transparent;
}

.presence-map-panel {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    border: 2px solid #d6d6d6;
    border-radius: 2px;
    background: #f8fafc;
}

.map-tile {
    position: absolute;
    inset: 0 auto auto 0;
    display: grid;
    width: 50%;
    height: 50%;
    place-items: center;
    background: #d8d0c8;
}

.map-pin {
    color: var(--green);
    font-size: 3rem;
    filter: drop-shadow(0 8px 6px rgb(15 23 42 / 25%));
}

.map-zoom {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    overflow: hidden;
    border: 2px solid #d8d8d8;
    border-radius: 8px;
    background: #fff;
}

.map-zoom span {
    display: grid;
    width: 44px;
    height: 38px;
    place-items: center;
    color: #555;
    font-size: 1.5rem;
    font-weight: 900;
}

.map-zoom span + span {
    border-top: 1px solid #e2e8f0;
}

.map-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    color: #475569;
    font-size: .9rem;
}

.presence-clock-block {
    display: grid;
    gap: 8px;
    justify-items: center;
    text-align: center;
}

.presence-live-clock {
    color: var(--primary);
    font-size: clamp(3.2rem, 14vw, 5rem);
    font-weight: 400;
    line-height: 1;
}

.presence-clock-block strong {
    color: #0f172a;
    font-size: 1.45rem;
    font-weight: 850;
}

.presence-clock-block p {
    max-width: 520px;
    margin: 8px auto 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.45;
}

.centered-action-copy {
    text-align: center;
}

.last-mark-card {
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding: 18px 8px 4px;
    color: var(--primary);
    text-align: center;
}

.last-mark-card span {
    color: var(--muted);
}

.history-period {
    background: #e5e7eb;
    color: var(--primary);
    padding: 9px 14px;
    text-align: center;
    font-weight: 850;
    text-transform: uppercase;
}

.app-mark-list {
    gap: 0;
}

.app-mark-list li {
    grid-template-columns: 110px 1fr;
    border-width: 0 0 1px;
    border-radius: 0;
    padding: 12px 14px;
}

.app-mark-list li strong {
    justify-self: start;
    color: var(--primary);
    font-size: 1.15rem;
    font-weight: 900;
}

.app-mark-list li span {
    color: #1f2937;
    font-size: 1rem;
}

@media (max-width: 991.98px) {
    body {
        background: #f7f7f7;
    }

    .main-content {
        padding: 0 0 calc(96px + env(safe-area-inset-bottom));
    }

    .topbar {
        min-height: 78px;
        margin: 0 0 18px;
        padding: calc(14px + env(safe-area-inset-top)) 22px 18px;
        background: var(--primary);
        color: #fff;
        box-shadow: 0 2px 8px rgb(15 23 42 / 16%);
    }

    .topbar .text-muted {
        display: none;
    }

    .topbar h1 {
        color: #fff;
        font-size: 1.35rem;
        font-weight: 800;
        letter-spacing: .06em;
    }

    .content-band {
        padding: 0 16px;
    }

    .app-footer {
        display: none;
    }

    .mobile-nav {
        justify-content: space-around;
        padding-top: 14px;
        background: #ece8ee;
    }

    .mobile-nav a,
    .mobile-nav button {
        min-width: 74px;
        color: var(--primary);
        font-size: .78rem;
    }

    .mobile-nav a.active {
        background: #fff;
        box-shadow: 0 2px 8px rgb(15 23 42 / 10%);
    }

    .collab-presence,
    .mobile-home {
        max-width: none;
    }

    .internal-note {
        justify-self: center;
    }

    .presence-button,
    .mobile-primary-action {
        min-height: 86px;
        border-radius: 6px;
        background: var(--primary);
    }

    .presence-map-panel {
        min-height: 260px;
    }
}

@media (max-width: 480px) {
    .shortcut-card {
        flex-basis: 138px;
    }

    .presence-map-panel {
        min-height: 230px;
    }

    .app-mark-list li {
        grid-template-columns: 92px 1fr;
    }
}
/* Login closer to mobile app reference */
.auth-mobile-wrap {
    width: min(100%, 460px);
}

.auth-mobile-panel {
    border: 0;
    background: rgb(255 255 255 / 88%);
    box-shadow: 0 22px 45px rgb(15 23 42 / 12%);
}

.auth-form {
    display: grid;
    gap: 20px;
}

.auth-field label {
    display: block;
    color: var(--primary);
    font-size: .9rem;
    font-weight: 850;
    text-transform: uppercase;
}

.auth-field input {
    width: 100%;
    border: 0;
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 72%, #fff);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 1.05rem;
    padding: 10px 2px;
    outline: none;
}


.auth-password-control {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-password-control input {
    padding-right: 46px;
}

.auth-password-toggle {
    position: absolute;
    right: 0;
    bottom: 4px;
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--primary);
    font-size: 1.2rem;
    line-height: 1;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
    background: var(--primary-soft);
    outline: none;
}

.password-eye {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.password-eye-off {
    display: none;
}

.auth-password-toggle.is-visible .password-eye-open {
    display: none;
}

.auth-password-toggle.is-visible .password-eye-off {
    display: block;
}
.auth-password-toggle.is-visible {
    color: #0f4f63;
}
.auth-field input:focus {
    border-color: var(--primary);
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    font-weight: 800;
}

.auth-remember input {
    width: 22px;
    height: 22px;
    accent-color: var(--primary);
}

.auth-submit {
    justify-self: end;
    min-width: 180px;
    border: 0;
    border-radius: 6px;
    background: #f5b51b;
    color: #fff;
    padding: 14px 22px;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-submit span {
    margin-left: 12px;
}

.auth-forgot {
    justify-self: center;
    color: var(--primary);
    font-weight: 850;
}

@media (max-width: 575.98px) {
    .install-prompt {
        grid-template-columns: 1fr 1fr;
    }

    .install-prompt[hidden] {
    display: none;
}

.install-prompt > span {
        grid-column: 1 / -1;
    }

    .install-prompt .btn {
        width: 100%;
    }

    .auth-body .install-prompt {
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    .auth-body {
        min-height: 100dvh;
        align-items: stretch;
        padding: 0;
        background:
            linear-gradient(180deg, rgb(255 255 255 / 25%), rgb(255 255 255 / 92%)),
            radial-gradient(circle at 50% 18%, rgb(21 94 117 / 20%), transparent 36%),
            #f4f4f4;
    }

    .auth-mobile-wrap {
        display: grid;
        align-items: center;
        min-height: 100dvh;
        padding: clamp(16px, 4dvh, 32px) 26px;
    }

    .auth-mobile-panel {
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .auth-mobile-panel h1,
    .auth-subtitle {
        display: none !important;
    }
}
/* Responsive stabilization */
.main-content,
.content-band,
.surface,
.table-responsive {
    min-width: 0;
}

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

.table {
    min-width: max-content;
}

.form-grid,
.mark-form {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.report-filters {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.report-metrics {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.quick-actions {
    align-items: stretch;
}

.quick-actions .btn {
    white-space: normal;
}

.mobile-home,
.app-mark-screen {
    width: min(100%, 820px);
    margin-inline: auto;
}

.shortcut-scroller {
    scrollbar-width: thin;
}

@media (min-width: 992px) {
    .main-content {
        max-width: calc(100vw - 280px);
    }

    .mobile-profile-strip,
    .home-mark-button,
    .mark-confirm-card,
    .last-mark-card,
    .today-history,
    .offline-pending {
        max-width: 820px;
    }

    .presence-map-panel {
        min-height: 300px;
    }

    .mobile-primary-action {
        min-height: 96px;
    }
}

@media (max-width: 1199.98px) {
    .main-content {
        padding: 22px;
    }

    .report-heading {
        display: grid;
    }

    .report-actions .btn {
        flex: 1 1 180px;
    }
}

@media (max-width: 767.98px) {
    .content-band {
        gap: 14px;
    }

    .surface,
    .metric,
    .report-heading {
        padding: 14px;
    }

    .filters,
    .quick-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .filters .form-control,
    .filters .form-select,
    .quick-actions .btn {
        width: 100%;
        max-width: none;
    }

    .report-table {
        margin-inline: -16px;
        border-inline: 0;
        border-radius: 0;
    }

    .report-status {
        min-width: 96px;
    }
}

@media (max-width: 575.98px) {
    .topbar h1 {
        font-size: 1.16rem;
    }

    .mobile-nav {
        gap: 4px;
    }

    .mobile-nav a,
    .mobile-nav button {
        min-width: 62px;
        padding-inline: 7px;
        font-size: .72rem;
    }

    .presence-live-clock {
        font-size: 3.25rem;
    }

    .presence-clock-block p {
        font-size: .98rem;
    }
}
/* Collaborator mobile overflow fix */
@media (max-width: 575.98px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .app-shell,
    .main-content,
    .content-band,
    .mobile-home,
    .app-mark-screen,
    .home-action-section,
    .shortcut-section,
    .collab-presence {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .main-content {
        margin-left: 0;
        padding: 0 0 calc(78px + env(safe-area-inset-bottom));
        overflow-x: hidden;
    }

    .topbar {
        width: 100%;
        min-height: 64px;
        margin: 0;
        padding: calc(12px + env(safe-area-inset-top)) 16px 14px;
        box-shadow: none;
    }

    .topbar h1 {
        max-width: 100%;
        font-size: 1.05rem;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .content-band {
        padding: 14px 14px 0;
        overflow-x: hidden;
    }

    .mobile-home,
    .app-mark-screen {
        gap: 16px;
        margin: 0;
    }

    .mobile-profile-strip {
        width: 100%;
        margin: 0;
        padding: 14px 16px;
        gap: 12px;
        border-radius: 6px;
    }

    .profile-avatar {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        font-size: 1.1rem;
    }

    .mobile-profile-strip strong {
        font-size: 1.12rem;
        line-height: 1.2;
    }

    .shortcut-section h2,
    .home-action-section h2 {
        margin-bottom: 10px;
        font-size: 1.15rem;
    }

    .shortcut-scroller {
        width: 100%;
        max-width: 100%;
        gap: 10px;
        overflow-x: auto;
        padding: 0 0 10px;
    }

    .shortcut-card {
        flex: 0 0 126px;
        min-width: 126px;
        min-height: 104px;
        padding: 12px 10px;
    }

    .shortcut-card strong {
        font-size: .82rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .home-action-heading {
        display: grid;
        gap: 8px;
    }

    .day-status {
        justify-self: start;
        padding: 6px 10px;
        font-size: .74rem;
    }

    .home-mark-button {
        width: 100%;
        min-height: 88px;
        gap: 16px;
        padding: 12px 18px;
        justify-content: center;
        overflow: hidden;
    }

    .mark-pin {
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
        font-size: 1.45rem;
    }

    .home-mark-button strong {
        min-width: 0;
        font-size: 1.12rem;
        overflow-wrap: anywhere;
    }

    .compact-note,
    .internal-note {
        max-width: 100%;
        justify-self: start;
        white-space: normal;
        font-size: .72rem;
        line-height: 1.3;
    }

    .mobile-nav {
        width: 100%;
        overflow-x: hidden;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    }

    .mobile-nav a,
    .mobile-nav button {
        min-width: 0;
        flex: 1 1 0;
        padding: 8px 4px;
        font-size: .66rem;
        overflow-wrap: anywhere;
    }
}
/* Collaborator shortcut cards compact mobile grid */
@media (max-width: 575.98px) {
    .shortcut-scroller {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
    }

    .shortcut-card {
        width: 100%;
        min-width: 0;
        min-height: 88px;
        flex: initial;
        gap: 6px;
        padding: 10px 8px;
        box-shadow: 0 5px 10px rgb(15 23 42 / 10%);
    }

    .shortcut-card span {
        font-size: 1.12rem;
    }

    .shortcut-card strong {
        font-size: .76rem;
        line-height: 1.25;
    }
}

@media (max-width: 360px) {
    .shortcut-scroller {
        gap: 8px;
    }

    .shortcut-card {
        min-height: 82px;
        padding: 9px 6px;
    }

    .shortcut-card strong {
        font-size: .7rem;
    }
}
/* Presence verification screen */
.presence-check-screen {
    display: grid;
    gap: 14px;
    width: min(100%, 820px);
    margin-inline: auto;
}

.check-identity-strip {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
}

.check-history-list {
    display: grid;
    gap: 12px;
}

.check-day-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.check-mark-list li span small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .84rem;
}

@media (max-width: 575.98px) {
    .presence-check-screen {
        width: 100%;
        max-width: 100%;
    }

    .check-identity-strip {
        display: grid;
        gap: 10px;
    }

    .check-identity-strip .btn {
        width: 100%;
    }
}
.presence-map-panel.has-location .map-tile {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.presence-map-panel.has-location .map-pin {
    position: relative;
    z-index: 1;
}
.check-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.check-time span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    padding: 2px 6px;
    font-size: .68rem;
    font-weight: 900;
}

.check-mark-detail {
    display: grid;
    gap: 3px;
}

.check-address {
    display: block;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.35;
}

.muted-address {
    opacity: .7;
}

.check-observation {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: .84rem;
}
/* Collaborator monthly presence report */
.presence-report-screen {
    display: grid;
    gap: 0;
    width: min(100%, 900px);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.presence-report-profile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.presence-report-avatar {
    background: #eef7fa;
    color: var(--primary);
    border: 3px solid #d8e4ea;
}

.presence-report-profile h2 {
    margin: 0 0 4px;
    color: var(--primary);
    font-size: 1.22rem;
    font-weight: 700;
}

.presence-report-profile p {
    margin: 0;
    color: var(--text);
    font-size: .96rem;
    line-height: 1.35;
}

.presence-month-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: #edf3f6;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 10px rgb(15 23 42 / 10%);
}

.presence-month-tabs a {
    display: grid;
    gap: 2px;
    justify-items: center;
    padding: 12px 6px 10px;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 4px solid transparent;
    font-weight: 800;
}

.presence-month-tabs a.active {
    border-bottom-color: #2563eb;
    background: rgb(255 255 255 / 35%);
}

.presence-month-tabs strong,
.presence-month-tabs span {
    display: block;
    line-height: 1.1;
}

.presence-report-block h3 {
    margin: 0;
    padding: 12px 18px;
    background: #e5e7eb;
    color: var(--text);
    font-size: .98rem;
    font-weight: 900;
    text-transform: uppercase;
}

.presence-report-block .monthly-report-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.monthly-balance {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: #475569;
    font-size: .72rem;
    white-space: nowrap;
}

.monthly-balance strong {
    font-size: .9rem;
}

.monthly-balance-credit strong {
    color: #166534;
}

.monthly-balance-debit strong {
    color: #b91c1c;
}

.routine-summary {
    display: grid;
    grid-template-columns: .7fr 1.8fr 1fr;
    gap: 8px;
    align-items: center;
    width: min(100% - 36px, 760px);
    margin: 10px auto 0;
    padding: 8px 14px;
    background: #f8fafc;
    text-align: center;
}

.routine-summary strong,
.routine-summary span {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-weight: 700;
}

.routine-times {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100% - 120px, 520px);
    margin: 0 auto 12px;
    background: #fff;
}

.routine-times span {
    padding: 8px;
    text-align: center;
    color: var(--text);
    font-weight: 700;
}

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

.presence-month-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--text);
    font-size: .88rem;
}

.presence-month-table th,
.presence-month-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #edf2f7;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.presence-month-table th {
    background: #f8fafc;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.presence-month-table tbody tr:nth-child(odd) td {
    background: #f8fafc;
}

.presence-month-table tbody tr:nth-child(even) td {
    background: #fff;
}

.presence-month-table .presence-empty-day {
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0;
}

.presence-month-table .is-empty td {
    color: #475569;
}

@media (max-width: 575.98px) {
    .presence-report-screen {
        width: 100%;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .presence-report-profile {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 14px 16px;
        gap: 12px;
    }

    .presence-report-profile .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .presence-report-profile h2 {
        font-size: 1rem;
    }

    .presence-report-profile p {
        font-size: .84rem;
    }

    .presence-month-tabs a {
        padding: 10px 2px 8px;
        font-size: .78rem;
    }

    .presence-report-block h3 {
        padding: 10px 14px;
        font-size: .86rem;
    }

    .routine-summary {
        width: calc(100% - 28px);
        grid-template-columns: .6fr 1.4fr .9fr;
        padding: 7px 8px;
        font-size: .78rem;
    }

    .routine-times {
        width: calc(100% - 72px);
        font-size: .82rem;
    }

    .presence-month-table {
        font-size: .68rem;
    }

    .presence-month-table th,
    .presence-month-table td {
        padding: 8px 4px;
    }
}

@media print {
    .presence-report-screen {
        width: 100%;
        border: 0;
        box-shadow: none;
    }

    .presence-report-profile,
    .presence-month-tabs,
    .presence-report-block h3,
    .routine-summary,
    .routine-times,
    .presence-month-table th,
    .presence-month-table td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .presence-month-tabs a {
        text-decoration: none;
    }
}

/* Clean database report for print/PDF */
.print-layout-body {
    margin: 0;
    background: #f8fafc;
    color: #111827;
    font-family: Arial, Helvetica, sans-serif;
}

.presence-print-page {
    width: min(100% - 32px, 1040px);
    margin: 24px auto;
    padding: 28px;
    background: #fff;
    border: 1px solid #d1d5db;
}

.print-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 18px;
}

.print-actions button,
.print-actions a {
    border: 1px solid #155e75;
    border-radius: 6px;
    background: #155e75;
    color: #fff;
    padding: 9px 14px;
    text-decoration: none;
    font-weight: 700;
}

.print-actions a {
    background: #fff;
    color: #155e75;
}

.presence-print-header {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr);
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 2px solid #155e75;
}

.presence-print-header h1 {
    margin: 4px 0 8px;
    color: #155e75;
    font-size: 1.6rem;
}

.presence-print-header p,
.presence-print-header span {
    display: block;
    margin: 0;
    color: #475569;
}

.presence-print-header strong {
    display: block;
    margin-bottom: 5px;
    color: #111827;
    font-size: 1.05rem;
}

.presence-print-header .presence-print-balance {
    margin-top: 12px;
    color: #475569;
}

.presence-print-header .presence-print-balance strong {
    display: inline;
    margin: 0;
    font-size: 1rem;
}

.presence-print-routine {
    margin: 18px 0;
    padding: 14px;
    background: #f1f5f9;
    border: 1px solid #dbe3ea;
}

.presence-print-routine h2 {
    margin: 0 0 12px;
    font-size: .92rem;
    text-transform: uppercase;
}

.presence-print-routine div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.presence-print-routine span {
    display: grid;
    gap: 3px;
    padding: 9px;
    background: #fff;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.presence-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.presence-print-table th,
.presence-print-table td {
    padding: 8px 7px;
    border: 1px solid #dbe3ea;
    text-align: left;
    vertical-align: top;
}

.presence-print-table th {
    background: #155e75;
    color: #fff;
    font-size: .72rem;
    text-transform: uppercase;
}

.presence-print-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.presence-print-footer {
    margin-top: 18px;
    color: #475569;
    font-size: .78rem;
}

@media (max-width: 720px) {
    .presence-print-page {
        width: 100%;
        margin: 0;
        padding: 16px;
        border: 0;
    }

    .presence-print-header,
    .presence-print-routine div {
        grid-template-columns: 1fr;
    }

    .presence-print-table {
        font-size: .68rem;
    }

    .presence-print-table th,
    .presence-print-table td {
        padding: 6px 4px;
    }
}

@media print {
    .print-layout-body {
        background: #fff;
    }

    .presence-print-page {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .print-actions {
        display: none;
    }

    .presence-print-header,
    .presence-print-routine,
    .presence-print-table th,
    .presence-print-table td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* Presence report column refinement */
@media (max-width: 720px) {
    .presence-print-routine div {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .presence-print-routine span {
        padding: 7px 3px;
        font-size: .68rem;
        min-width: 0;
    }
}
/* Collaborator weekly routine */
.form-section-title {
    display: grid;
    gap: 2px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.form-section-title h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
}

.form-section-title p {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
}

.weekly-schedule-grid {
    display: grid;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.weekly-schedule-head,
.weekly-schedule-row {
    display: grid;
    grid-template-columns: minmax(135px, 1.15fr) repeat(4, minmax(92px, .8fr)) minmax(88px, .65fr);
    gap: 8px;
    align-items: center;
    min-width: 720px;
}

.weekly-schedule-head {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.weekly-schedule-row {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.weekly-schedule-row strong {
    font-size: .88rem;
}

.schedule-rest-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .weekly-schedule-grid {
        margin-inline: -2px;
    }

    .weekly-schedule-head,
    .weekly-schedule-row {
        min-width: 660px;
        grid-template-columns: minmax(118px, 1.1fr) repeat(4, minmax(82px, .8fr)) minmax(76px, .65fr);
        gap: 6px;
    }

    .weekly-schedule-row {
        padding: 7px;
    }
}
/* Collaborator form top grid */
.collaborator-form.form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
    .collaborator-form.form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .collaborator-form.form-grid {
        grid-template-columns: 1fr;
    }
}
/* Weekly routine pause option */
.weekly-schedule-head,
.weekly-schedule-row {
    grid-template-columns: minmax(132px, 1.1fr) repeat(2, minmax(88px, .75fr)) minmax(86px, .65fr) repeat(2, minmax(88px, .75fr)) minmax(86px, .65fr);
    min-width: 820px;
}

.schedule-pause-check {
    justify-self: start;
}

@media (max-width: 575.98px) {
    .weekly-schedule-head,
    .weekly-schedule-row {
        min-width: 760px;
        grid-template-columns: minmax(112px, 1fr) repeat(2, minmax(78px, .75fr)) minmax(76px, .65fr) repeat(2, minmax(78px, .75fr)) minmax(74px, .65fr);
    }
}
/* Weekly routine summary in reports */
.routine-weekly-summary {
    display: grid;
    gap: 0;
    width: min(100% - 36px, 760px);
    margin: 0 auto 12px;
    background: #fff;
    border: 1px solid #edf2f7;
}

.routine-weekly-summary div {
    display: grid;
    grid-template-columns: minmax(110px, .9fr) minmax(0, 2fr);
    gap: 12px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid #edf2f7;
}

.routine-weekly-summary div:last-child {
    border-bottom: 0;
}

.routine-weekly-summary strong {
    color: var(--primary);
    font-weight: 900;
}

.routine-weekly-summary span {
    color: var(--text);
    font-weight: 800;
}

.presence-print-routine-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.presence-print-routine .presence-print-routine-list span {
    grid-template-columns: minmax(110px, .7fr) minmax(0, 1.8fr);
    align-items: center;
    text-align: left;
}

/* Keep the opened collaborator report close to the desktop/PDF layout on phones. */
@media (max-width: 720px) {
    .presence-print-header {
        grid-template-columns: minmax(0, 1.25fr) minmax(190px, .85fr);
        gap: 16px;
    }

    .presence-print-routine .presence-print-routine-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .presence-print-routine .presence-print-routine-list span {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 6px;
        padding: 9px;
        font-size: .72rem;
        line-height: 1.25;
        overflow-wrap: normal;
        word-break: normal;
    }

    .presence-print-routine .presence-print-routine-list strong {
        min-width: 0;
        overflow-wrap: normal;
        word-break: normal;
    }
}

@media (max-width: 420px) {
    .presence-print-header {
        grid-template-columns: 1fr;
    }

    .presence-print-routine .presence-print-routine-list {
        grid-template-columns: 1fr;
    }

    .presence-print-routine .presence-print-routine-list span {
        grid-template-columns: minmax(90px, .8fr) minmax(0, 1.4fr);
    }
}

@media (max-width: 575.98px) {
    .routine-weekly-summary {
        width: calc(100% - 28px);
    }

    .routine-weekly-summary div {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 10px;
    }
}
/* Routine summary compact typography */
.routine-weekly-summary div {
    padding: 7px 10px;
}

.routine-weekly-summary strong,
.routine-weekly-summary span {
    font-size: .82rem;
    font-weight: 500;
}

.presence-print-routine .presence-print-routine-list span,
.presence-print-routine .presence-print-routine-list strong {
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .routine-weekly-summary strong,
    .routine-weekly-summary span {
        font-size: .74rem;
    }
}
/* Keep routine summary compact on mobile */
@media (max-width: 575.98px) {
    .routine-weekly-summary div {
        grid-template-columns: minmax(82px, .8fr) minmax(0, 1.6fr);
        gap: 8px;
        align-items: center;
        padding: 7px 8px;
    }

    .routine-weekly-summary strong,
    .routine-weekly-summary span {
        font-size: .7rem;
        line-height: 1.2;
    }
}
/* Presence report title refinement */
.presence-report-screen .presence-report-profile h2,
.presence-report-screen .presence-report-block h3,
.presence-print-page h1,
.presence-print-routine h2 {
    color: var(--primary);
    font-size: .95rem;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
}

.presence-report-screen .presence-report-profile h2 {
    font-size: 1.05rem;
}

@media (max-width: 575.98px) {
    .presence-report-screen .presence-report-profile h2 {
        font-size: .92rem;
    }

    .presence-report-screen .presence-report-block h3,
    .presence-print-routine h2 {
        font-size: .78rem;
        letter-spacing: 0;
    }
}
/* Presence report table no broken labels */
.presence-month-table th,
.presence-month-table td {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.presence-month-table th {
    white-space: nowrap;
}

.presence-month-table td:first-child,
.presence-month-table th:first-child,
.presence-month-table td:nth-child(2),
.presence-month-table th:nth-child(2) {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .presence-month-table {
        table-layout: auto;
        min-width: 520px;
        font-size: .62rem;
    }

    .presence-month-table th,
    .presence-month-table td {
        padding: 7px 5px;
    }

    .presence-month-table th {
        font-size: .58rem;
        line-height: 1.1;
    }

    .presence-month-table td:first-child,
    .presence-month-table th:first-child {
        min-width: 66px;
    }

    .presence-month-table td:nth-child(2),
    .presence-month-table th:nth-child(2) {
        min-width: 34px;
    }
}
/* Fit all presence report columns on mobile */
@media (max-width: 575.98px) {
    .presence-report-table-wrap {
        overflow-x: hidden;
    }

    .presence-month-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
        font-size: .56rem;
    }

    .presence-month-table th,
    .presence-month-table td {
        padding: 6px 2px;
        white-space: nowrap;
        text-align: center;
    }

    .presence-month-table th {
        font-size: .5rem;
    }

    .presence-month-table th:first-child,
    .presence-month-table td:first-child {
        width: 18%;
        min-width: 0;
    }

    .presence-month-table th:nth-child(2),
    .presence-month-table td:nth-child(2) {
        width: 8%;
        min-width: 0;
    }

    .presence-month-table th:nth-child(3),
    .presence-month-table td:nth-child(3),
    .presence-month-table th:nth-child(4),
    .presence-month-table td:nth-child(4),
    .presence-month-table th:nth-child(5),
    .presence-month-table td:nth-child(5),
    .presence-month-table th:nth-child(6),
    .presence-month-table td:nth-child(6),
    .presence-month-table th:nth-child(7),
    .presence-month-table td:nth-child(7) {
        width: 14.8%;
    }

    .presence-month-table .presence-empty-day {
        text-align: left;
        white-space: nowrap;
    }
}
/* Admin mobile and daily presence grouping */
.admin-toolbar {
    gap: 10px;
}

.admin-toolbar span {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
}

.admin-daily-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.admin-daily-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.admin-daily-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: #f8fafc;
    border-bottom: 1px solid var(--line);
}

.admin-daily-card header strong,
.admin-daily-card header span {
    display: block;
}

.admin-daily-card header span,
.admin-daily-card header small {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.admin-daily-card ul {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-daily-card li {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #edf2f7;
}

.admin-daily-card li:last-child {
    border-bottom: 0;
}

.admin-daily-card li > span {
    color: var(--primary);
    font-weight: 900;
}

.admin-daily-card li > strong {
    min-width: 0;
    font-size: .9rem;
}

.admin-daily-card li > em {
    grid-column: 2;
    color: var(--muted);
    font-size: .78rem;
    font-style: normal;
}

.admin-presence-filters {
    display: grid;
    grid-template-columns: minmax(170px, .7fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.admin-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-presence-table-wrap {
    padding: 0;
}

.admin-presence-table th:first-child,
.admin-presence-table td:first-child {
    width: 22%;
}

.admin-presence-table th:nth-child(2),
.admin-presence-table td:nth-child(2) {
    width: 12%;
}

.admin-presence-table th:nth-child(3),
.admin-presence-table td:nth-child(3) {
    width: 7%;
}

@media (max-width: 767.98px) {
    .admin-presence-table-wrap {
        overflow-x: auto;
    }

    .admin-presence-table {
        min-width: 820px;
        table-layout: auto;
        font-size: .78rem;
    }

    .admin-presence-table th,
    .admin-presence-table td {
        padding: 9px 7px;
        text-align: left;
    }

    .admin-presence-table th:first-child,
    .admin-presence-table td:first-child {
        min-width: 180px;
        width: auto;
    }
}

@media (max-width: 575.98px) {
    .admin-metrics-row {
        --bs-gutter-y: .65rem;
    }

    .admin-metrics-row .metric {
        min-height: 86px;
        padding: 12px;
    }

    .admin-metrics-row .metric span {
        font-size: .76rem;
        line-height: 1.2;
    }

    .admin-metrics-row .metric strong {
        font-size: 1.55rem;
    }

    .admin-quick-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .admin-quick-actions .btn {
        width: 100%;
    }

    .admin-toolbar {
        display: grid;
        align-items: start;
    }

    .admin-toolbar h2 {
        font-size: .98rem;
        line-height: 1.2;
    }

    .admin-daily-groups {
        grid-template-columns: 1fr;
    }

    .admin-daily-card header {
        padding: 10px 12px;
    }

    .admin-daily-card li {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 9px 12px;
    }

    .admin-presence-filters {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .admin-filter-actions .btn {
        flex: 1 1 130px;
    }
}
/* Admin mobile navigation drawer */
.mobile-menu-toggle {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-content: center;
    gap: 5px;
    border: 1px solid rgb(255 255 255 / 40%);
    border-radius: 8px;
    background: rgb(255 255 255 / 14%);
    color: #fff;
}

.mobile-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.mobile-menu-drawer {
    max-width: min(360px, 88vw);
    border-left: 1px solid var(--line);
}

.mobile-menu-drawer .offcanvas-header {
    align-items: flex-start;
    padding: calc(18px + env(safe-area-inset-top)) 18px 16px;
    border-bottom: 1px solid var(--line);
}

.mobile-menu-logo {
    display: block;
    width: 138px;
    height: auto;
}

.mobile-menu-drawer h2 {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 800;
}

.mobile-menu-user {
    display: grid;
    gap: 2px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--primary-soft);
}

.mobile-menu-user strong {
    color: var(--ink);
}

.mobile-menu-user span {
    color: var(--muted);
    font-size: .88rem;
}

.mobile-menu-list {
    display: grid;
    gap: 8px;
}

.mobile-menu-list a,
.mobile-menu-logout button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    text-align: left;
}

.mobile-menu-list a.active {
    border-color: transparent;
    background: var(--primary-soft);
    color: var(--primary);
}

.mobile-menu-list a::after {
    content: "›";
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
}

.mobile-menu-logout {
    margin-top: 16px;
}

.mobile-menu-logout button {
    justify-content: center;
    color: var(--red);
}

@media (max-width: 991.98px) {
    .topbar {
        gap: 14px;
    }

    .topbar > div:first-child {
        min-width: 0;
    }

    .topbar h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav {
        overflow-x: hidden;
    }

    .mobile-nav a {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
    }
}
/* Location gate for collaborator registration */
.mark-confirm-card[data-location-state="pending"] .presence-button,
.mark-confirm-card[data-location-state="blocked"] .presence-button {
    background: var(--primary);
}

.mark-confirm-card[data-location-state="pending"] .presence-button {
    opacity: .72;
    cursor: wait;
}

.mark-confirm-card[data-location-state="blocked"] .presence-button {
    box-shadow: 0 12px 22px rgb(180 83 9 / 18%);
}

.location-permission-modal .modal-body p {
    margin-bottom: 6px;
    color: var(--ink);
    font-weight: 700;
}

.location-permission-modal .modal-body small {
    color: var(--muted);
}
/* Collaborator app preferences */
.collab-preferences {
    width: min(760px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.preferences-hero {
    padding: 18px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 12px 22px rgb(15 23 42 / 12%);
}

.preferences-hero span {
    display: block;
    margin-bottom: 4px;
    font-size: .82rem;
    font-weight: 700;
    opacity: .85;
}

.preferences-hero h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 850;
}

.preferences-hero p {
    max-width: 46rem;
    margin: 8px 0 0;
    line-height: 1.45;
    opacity: .92;
}

.preference-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.preference-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.preference-heading h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 850;
}

.preference-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.4;
}

.preference-status {
    flex: 0 0 auto;
    max-width: 45%;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 850;
    text-align: center;
}

.preference-action {
    justify-self: start;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.theme-option {
    min-height: 74px;
    display: grid;
    place-items: center;
    gap: 7px;
    padding: 10px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
}

.theme-option span {
    width: 24px;
    height: 24px;
    display: block;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 65%);
}

.theme-option.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

.font-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .collab-preferences {
        gap: 12px;
    }

    .preferences-hero,
    .preference-card {
        padding: 14px;
    }

    .preference-heading {
        display: grid;
    }

    .preference-status {
        max-width: 100%;
        justify-self: start;
    }

    .theme-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .font-controls {
        grid-template-columns: 1fr;
    }

    .preference-action,
    .font-controls .btn {
        width: 100%;
    }
}

/* Admin dashboard polish and button color standardization */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: #0f4f63;
    --bs-btn-hover-border-color: #0f4f63;
    --bs-btn-active-bg: #0c4556;
    --bs-btn-active-border-color: #0c4556;
    --bs-btn-disabled-bg: #7aa4b0;
    --bs-btn-disabled-border-color: #7aa4b0;
    font-weight: 800;
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    font-weight: 800;
}

.btn-outline-secondary {
    --bs-btn-color: var(--muted);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-soft);
    --bs-btn-hover-border-color: var(--primary-soft);
    --bs-btn-active-color: var(--primary);
    --bs-btn-active-bg: var(--primary-soft);
    --bs-btn-active-border-color: var(--primary-soft);
    font-weight: 800;
}

.admin-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid #b9dce5;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), #0f4f63);
    color: #fff;
    box-shadow: 0 12px 26px rgb(21 94 117 / 14%);
}

.admin-welcome span {
    display: block;
    margin-bottom: 4px;
    color: rgb(255 255 255 / 78%);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-welcome h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 900;
}

.admin-welcome p {
    max-width: 720px;
    margin: 6px 0 0;
    color: rgb(255 255 255 / 84%);
    font-size: .92rem;
}

@media (max-width: 575.98px) {
    .admin-welcome {
        margin-bottom: 14px;
        padding: 14px;
    }

    .admin-welcome span {
        font-size: .68rem;
    }

    .admin-welcome h2 {
        font-size: 1.12rem;
        line-height: 1.18;
    }

    .admin-welcome p {
        font-size: .78rem;
        line-height: 1.35;
    }

    .admin-metrics-row > [class*="col-"] {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    .admin-metrics-row .metric {
        min-height: 92px;
    }
}
/* Accessibility font scaling for the mobile footer menu */
.mobile-nav a,
.mobile-nav button {
    font-size: clamp(.78rem, calc(.82rem * var(--app-font-scale, 1)), 1rem);
    line-height: 1.18;
}

@media (max-width: 575.98px) {
    .mobile-nav a,
    .mobile-nav button {
        min-height: 44px;
        font-size: clamp(.7rem, calc(.74rem * var(--app-font-scale, 1)), .92rem);
        line-height: 1.15;
    }
}

@media (max-width: 380px) {
    .mobile-nav a,
    .mobile-nav button {
        font-size: clamp(.66rem, calc(.68rem * var(--app-font-scale, 1)), .84rem);
    }
}

.correction-request-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color, #d6e0e8);
    border-radius: .65rem;
    background: #f6f9fb;
}

.correction-request-fields[hidden] {
    display: none;
}

.correction-request-fields small {
    grid-column: 1 / -1;
}

.correction-review-summary {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-bottom: .75rem;
    padding: .65rem;
    border-radius: .5rem;
    background: #eef5f8;
}

@media (max-width: 720px) {
    .correction-request-fields {
        grid-template-columns: 1fr;
    }
}

.audit-screen {
    display: grid;
    gap: 1rem;
}

.audit-heading,
.audit-entry-header,
.audit-entry-metadata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.audit-heading h2,
.audit-entry-header h3 {
    margin: 0;
}

.audit-heading p,
.audit-entry-header p,
.audit-empty-state p {
    margin: .25rem 0 0;
    color: var(--muted);
}

.audit-filters {
    align-items: end;
}

.audit-filter-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.audit-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.audit-summary.audit-summary-complete {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.audit-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: var(--surface);
}

.audit-summary span {
    color: var(--muted);
    font-size: .86rem;
}

.audit-summary strong {
    color: var(--primary);
    font-size: 1.25rem;
}

.audit-list {
    padding: 0 !important;
    overflow: hidden;
}

.audit-entry {
    padding: 1.2rem;
    border-bottom: 1px solid var(--line);
}

.audit-entry:last-child {
    border-bottom: 0;
}

.audit-entry-id,
.audit-entry-details > div > span,
.audit-mark > span {
    display: block;
    margin-bottom: .25rem;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.audit-entry-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
}

.audit-mark-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
}

.audit-mark {
    min-height: 78px;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: #f8fafc;
}

.audit-mark strong,
.audit-mark small {
    display: block;
}

.audit-mark.is-original {
    border-left: 4px solid var(--amber);
}

.audit-mark.is-result {
    border-left: 4px solid var(--green);
}

.audit-mark.is-empty {
    color: var(--muted);
}

.audit-flow-arrow {
    color: var(--primary);
    font-size: 1.45rem;
    font-weight: 800;
}

.audit-entry-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 1rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--line);
}

.audit-entry-details p {
    margin: 0;
}

.audit-entry-metadata {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: var(--muted);
}

.audit-empty-state {
    padding: 3rem 1rem;
    text-align: center;
}

@media (max-width: 720px) {
    .audit-heading,
    .audit-entry-header,
    .audit-entry-metadata {
        align-items: stretch;
        flex-direction: column;
    }

    .audit-heading .btn {
        width: 100%;
    }

    .audit-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audit-summary.audit-summary-complete {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audit-entry-status {
        align-items: flex-start;
    }

    .audit-mark-flow {
        grid-template-columns: 1fr;
    }

    .audit-flow-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .audit-entry-details {
        grid-template-columns: 1fr;
    }

    .audit-entry-metadata {
        grid-column: 1;
    }
}