:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --secondary: #64748b;
    --background: #f8fafc;
    --surface: #ffffff;
    --sidebar: #1e293b;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --hover: #f1f5f9;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

[data-theme="dark"] {
    --background: #0f172a;
    --surface: #1e293b;
    --sidebar: #0f172a;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
    --hover: #2d3748;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--background);
    color: var(--text);
    overflow: hidden;
}

/* Layout */
.app-container {
    display: grid;
    grid-template-columns: 1fr;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar */
aside {
    background-color: var(--sidebar);
    color: white;
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 150;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

aside.active {
    transform: translateX(0);
}

aside .logo {
    padding: 0 2rem;
    margin-bottom: 3rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--primary);
}

aside nav {
    flex: 1;
    min-height: 0; /* allow the flex item to shrink so overflow-y can actually scroll */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Thin scrollbar for sidebar nav */
aside nav::-webkit-scrollbar {
    width: 4px;
}
aside nav::-webkit-scrollbar-track {
    background: transparent;
}
aside nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}
aside nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

aside nav a {
    display: flex;
    align-items: center;
    padding: 0.75rem 2rem;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.2s;
    border-left: 4px solid transparent;
}

aside nav a:hover, aside nav a.active {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border-left-color: var(--primary);
}

/* Sidebar Dropdown Categories */
.sidebar-dropdown {
    display: flex;
    flex-direction: column;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 2rem;
    color: #94a3b8;
    background: none;
    border: none;
    border-left: 4px solid transparent;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    transition: all 0.2s;
}

.dropdown-trigger:hover, .dropdown-trigger.open {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.dropdown-trigger .chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.dropdown-trigger.open .chevron {
    transform: rotate(90deg);
}

.dropdown-content {
    display: flex;
    flex-direction: column;
}

/* Indentation and Softer Tone for Child Links */
.dropdown-content a {
    padding-left: 3rem !important;
    font-size: 0.9rem;
    color: #64748b !important;
}

.dropdown-content a:hover, .dropdown-content a.active {
    color: white !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 140;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Menu Toggle Button */
.menu-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text);
    cursor: pointer;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.menu-toggle:hover {
    background-color: var(--hover);
}

/* Main Content */
main {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    width: 100%;
}

header {
    background: var(--surface);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.content-area {
    padding: 1.5rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Responsive Grid Utilities */
.grid {
    display: grid;
    gap: 1.5rem;
}
.grid-2, .grid-3, .grid-1-2 {
    grid-template-columns: 1fr;
}

/* Responsive Media Queries */
@media (min-width: 768px) {
    header {
        padding: 1rem 3rem;
    }

    .content-area {
        padding: 3rem;
    }

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

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

@media (min-width: 1024px) {
    .app-container {
        grid-template-columns: 260px 1fr;
    }

    aside {
        position: static;
        transform: none;
        width: auto;
        z-index: auto;
        /* As a static grid item the sidebar would grow to its content height and
           overflow the viewport, hiding the bottom menu items. Bind it to the
           viewport (min-height:0 defeats the grid item's default min-height:auto)
           so the inner nav scrolls instead. */
        height: 100vh;
        min-height: 0;
    }

    .sidebar-overlay {
        display: none !important;
    }

    .menu-toggle {
        display: none !important;
    }
}

/* Components */
.card {
    background: var(--surface);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

/* Charts */
.card canvas {
    max-height: 250px;
    width: 100% !important;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Calendar */
.calendar {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.calendar th {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.calendar td {
    padding: 0.75rem;
    text-align: center;
    border: 1px solid var(--border);
    font-size: 0.875rem;
    position: relative;
    cursor: default;
}

.calendar .today {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: bold;
}

.calendar .present {
    border-bottom: 3px solid var(--success);
}

.calendar .absent {
    border-bottom: 3px solid var(--danger);
}

.calendar .half-day {
    border-bottom: 3px solid var(--warning);
}

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

.stat-card {
    background: var(--surface);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--primary);
}

.stat-card h3 {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-card .value {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

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

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

th {
    text-align: left;
    padding: 1rem;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9375rem;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover {
    background: var(--hover);
}

/* Buttons */
.btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary { background: var(--secondary); color: white; }
.btn-secondary:hover { background: #475569; }

.btn-warning { background: var(--warning); color: white; }
.btn-warning:hover { background: #d97706; }

.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }

/* Status Badges */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.badge-present { background: #dcfce7; color: #166534; }
.badge-absent { background: #fee2e2; color: #991b1b; }
.badge-half { background: #fef3c7; color: #92400e; }

/* Modal Placeholder */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    width: 400px;
    max-width: 90%;
    /* Never taller than the viewport: scroll the modal body so the action
       buttons at the bottom are always reachable (previously the Save button
       could sit off-screen for tall forms like the attendance editor). */
    max-height: 90vh;
    overflow-y: auto;
}

/* Utils */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.mt-4 { margin-top: 1rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-1 { gap: 0.25rem; }
/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
}

.toast {
    background: var(--sidebar);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    animation: slideIn 0.3s ease-out;
}

.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.hidden { display: none !important; }

/* Standalone Kiosk Mode Layout Modifiers */
.app-container.kiosk-mode {
    grid-template-columns: 1fr;
}
.app-container.kiosk-mode aside {
    display: none !important;
}
.app-container.kiosk-mode header {
    display: none !important;
}
.app-container.kiosk-mode #premium-banner {
    display: none !important;
}
.app-container.kiosk-mode .content-area {
    padding: 0;
    max-width: 100vw;
    margin: 0;
}
.app-container.kiosk-mode #view-kiosk {
    min-height: 100vh !important;
    padding: 0 !important;
    background: var(--background);
}

/* --- Attendance kiosk screen ---------------------------------------------
   The kiosk usually runs on a phone propped at a door, in portrait, and is
   read from a step or two away — so it commits to its own dark palette rather
   than following the app theme, and sizes off viewport units instead of the
   app's type scale. It is the one screen in the product that is looked at
   rather than used. */

.kiosk-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #0b1220;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}

.kiosk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: #16203a;
    flex: none;
}
.kiosk-bar .kiosk-device {
    font-weight: 650;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kiosk-bar .kiosk-clock {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.95rem;
    color: #8296bd;
    flex: none;
}

/* Camera stage */
.kiosk-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #070c17;
}
.kiosk-stage video,
.kiosk-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mirrored so moving left moves the face left, as in a mirror. */
    transform: scaleX(-1);
}

/* Alignment frame. Its colour is the fastest signal on the screen, so state
   changes drive --kiosk-frame and nothing else has to move. */
.kiosk-frame {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    width: min(62vw, 46vh);
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    border: 2px solid var(--kiosk-frame, #6366f1);
    box-shadow: 0 0 0 100vmax rgba(7, 12, 23, 0.45);
    transition: border-color 0.25s ease;
    pointer-events: none;
}
.kiosk-frame i {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid var(--kiosk-frame, #6366f1);
    border-radius: 3px;
    transition: border-color 0.25s ease;
}
.kiosk-frame i:nth-child(1) { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.kiosk-frame i:nth-child(2) { top: -3px; right: -3px; border-left: 0; border-bottom: 0; }
.kiosk-frame i:nth-child(3) { bottom: -3px; left: -3px; border-right: 0; border-top: 0; }
.kiosk-frame i:nth-child(4) { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }

/* Instruction to the person in front of the camera. */
.kiosk-prompt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.4rem;
    z-index: 3;
    padding: 0 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}
.kiosk-prompt .kiosk-lead {
    font-size: clamp(1.15rem, 4.5vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.kiosk-prompt .kiosk-sub {
    font-size: clamp(0.8rem, 2.6vw, 0.95rem);
    color: #8296bd;
    text-wrap: balance;
}
.kiosk-meter {
    width: min(72%, 320px);
    height: 5px;
    border-radius: 3px;
    background: #24314f;
    overflow: hidden;
}
.kiosk-meter b {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: #f59e0b;
    transition: width 0.2s linear;
}

/* Full-stage answer: recorded, already recorded, camera failed. */
.kiosk-result {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.5rem;
    text-align: center;
    color: #fff;
}
.kiosk-result.is-shown { display: flex; }
.kiosk-result .kiosk-mark {
    width: clamp(52px, 16vw, 76px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: clamp(1.5rem, 6vw, 2.2rem);
    background: rgba(255, 255, 255, 0.16);
    margin-bottom: 0.6rem;
}
.kiosk-result .kiosk-name {
    font-size: clamp(1.4rem, 6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.kiosk-result .kiosk-meta {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: clamp(0.78rem, 3vw, 0.95rem);
    opacity: 0.92;
}
.kiosk-result .kiosk-dir {
    margin-top: 0.7rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: clamp(0.68rem, 2.4vw, 0.8rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.18);
}

/* Footer rail */
.kiosk-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.9rem;
    background: #16203a;
}
.kiosk-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    color: #8296bd;
    white-space: nowrap;
}
.kiosk-pill .kiosk-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.kiosk-foot .kiosk-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}
.kiosk-foot button {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    border: 1px solid #2b3a5c;
    background: transparent;
    color: #8296bd;
    cursor: pointer;
}
.kiosk-foot button:hover { color: #e2e8f0; border-color: #4b5c85; }
.kiosk-foot button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

/* Ambient flash on a detected face — a soft confirmation that something
   happened, for a screen with no touch feedback. */
.kiosk-flash {
    position: absolute;
    inset: 0;
    z-index: 9;
    background: #fff;
    opacity: 0;
    display: none;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
}

/* In landscape the frame competes with the prompt for height, so give the
   frame less of it and pull the caption in tight. */
@media (orientation: landscape) and (max-height: 560px) {
    .kiosk-frame { top: 34%; width: min(34vh, 40vw); }
    .kiosk-prompt { bottom: 0.7rem; gap: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-frame,
    .kiosk-frame i,
    .kiosk-meter b,
    .kiosk-flash { transition: none; }
}

/* Reports CSS Styles */
.report-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.report-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 200px;
}

.report-filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.report-filter-group select, .report-filter-group input {
    padding: 0.625rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--background);
    color: var(--text);
    font-size: 0.875rem;
}

.report-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.report-table-wrapper {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 1rem;
}

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

.report-table th {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.875rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

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

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

/* Specific Shorthand Styling */
.badge-muster {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.75rem;
    text-align: center;
    min-width: 28px;
}
.badge-muster.P { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.badge-muster.A { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.badge-muster.L { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
.badge-muster.H { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.badge-muster.WO { background: rgba(107, 114, 128, 0.1); color: #6b7280; }

.report-footer-sum {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
}

/* Report Loader Styles */
.report-loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--surface);
    border-radius: 8px;
}

.report-loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: report-spin 1s linear infinite;
    margin-bottom: 1.5rem;
}

.report-loader-progress-bar {
    width: 280px;
    height: 6px;
    background-color: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1rem;
    position: relative;
}

.report-loader-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    width: 0%;
    border-radius: 3px;
    animation: report-progress 2.5s ease-out forwards;
}

.report-loader-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.report-loader-subtext {
    font-size: 0.875rem;
    color: var(--text-muted);
}

@keyframes report-spin {
    to { transform: rotate(360deg); }
}

@keyframes report-progress {
    0% { width: 0%; }
    20% { width: 35%; }
    50% { width: 65%; }
    80% { width: 85%; }
    100% { width: 95%; }
}



/* --- Employee roster cards (Employee Directory) --- */
.emp-roster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1rem;
}

.emp-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--emp-accent, var(--primary));
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.emp-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.emp-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0.85rem 0.6rem;
}

.emp-avatar {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--emp-accent, var(--primary));
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.emp-ident {
    flex: 1;
    min-width: 0;
}

.emp-name {
    font-weight: 650;
    font-size: 0.95rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-role {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.85;
}

.emp-actions {
    display: flex;
    gap: 0.35rem;
    flex: none;
}

.emp-iconbtn {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--hover);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.emp-iconbtn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.emp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 0.85rem 0.7rem;
}

.emp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--hover);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 550;
    white-space: nowrap;
}

.emp-chip .emp-swatch {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--emp-accent, var(--primary));
}

.emp-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: auto;
    background: var(--border);
    border-top: 1px solid var(--border);
}

.emp-facts > div {
    background: var(--hover);
    padding: 0.45rem 0.6rem;
}

.emp-facts .emp-k {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 650;
}

.emp-facts .emp-v {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.emp-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

/* --- Employee detail drawer (slides in from the right) --- */
.emp-drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgb(15 23 42 / 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 1400;
}

.emp-drawer-scrim.open {
    opacity: 1;
    pointer-events: auto;
}

.emp-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Explicit: anything inheriting a left offset would over-constrain the box
       and pin the panel to the left edge instead of the right. */
    left: auto;
    width: min(440px, 94vw);
    z-index: 1401;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateX(102%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.emp-drawer.open { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .emp-drawer, .emp-drawer-scrim { transition: none; }
}

.emp-drawer-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.emp-drawer-head .emp-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.1rem;
}

.emp-drawer-title {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text);
}

.emp-drawer-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.emp-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.9rem 1rem 1.5rem;
}

.emp-group + .emp-group { margin-top: 1.25rem; }

.emp-group h4 {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.emp-kv {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.35rem 0.75rem;
    font-size: 0.82rem;
}

.emp-kv dt { color: var(--text-muted); }

.emp-kv dd {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.emp-drawer-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--hover);
}

/* --- Workforce summary strip (above the employee roster) --- */
.emp-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    margin-bottom: 1.25rem;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.emp-strip-cell {
    background: var(--surface);
    padding: 0.7rem 0.85rem;
}

.emp-strip-k {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 650;
}

.emp-strip-v {
    display: block;
    font-size: 1.25rem;
    font-weight: 650;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.emp-strip-sub {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* --- Attendance muster grid --- */
/* Status ramp validated for colour-blind separation on both surfaces. Every use
   is paired with a letter glyph, so colour never carries the meaning alone. */
:root {
    --att-present: #10b981;
    --att-half: #d97706;
    --att-absent: #e11d48;
    --att-leave: #0284c7;
    --att-off: #cbd5e1;
    --att-none: #f1f5f9;
}

[data-theme="dark"] {
    --att-present: #059669;
    --att-half: #d97706;
    --att-absent: #e11d48;
    --att-leave: #0284c7;
    --att-off: #334155;
    --att-none: #1e293b;
}

.muster-scroll { overflow-x: auto; padding-bottom: 0.25rem; }

.muster {
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 0.7rem;
}

.muster th {
    font-weight: 650;
    font-size: 0.62rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0 0 0.25rem;
}

.muster th.off-col { color: var(--att-absent); }

.muster td.muster-who {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    text-align: left;
    padding-right: 0.75rem;
    white-space: nowrap;
}

.muster-who-wrap { display: flex; align-items: center; gap: 0.5rem; }
.muster-who-name { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.muster-who-code { font-family: Consolas, "Courier New", monospace; font-size: 0.62rem; color: var(--text-muted); }

.muster-cell {
    width: 21px;
    height: 21px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-family: inherit;
    font-size: 0.56rem;
    font-weight: 800;
    color: #fff;
}

.muster-cell:hover { outline: 2px solid var(--text); outline-offset: 1px; }
.muster-cell.st-present { background: var(--att-present); }
.muster-cell.st-half { background: var(--att-half); }
.muster-cell.st-absent { background: var(--att-absent); }
.muster-cell.st-leave { background: var(--att-leave); }
.muster-cell.st-off { background: var(--att-off); color: var(--text-muted); }
.muster-cell.st-holiday { background: var(--att-off); color: var(--text-muted); }
.muster-cell.st-none { background: var(--att-none); color: var(--text-muted); cursor: default; }
.muster-cell.st-none:hover { outline: none; }

.muster td.muster-tot {
    padding-left: 0.5rem;
    font-size: 0.72rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text);
}

.muster-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.85rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.muster-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }

.muster-legend i {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 0.55rem;
    font-weight: 800;
    color: #fff;
}

.muster-toggle { display: flex; gap: 0.25rem; }

.muster-toggle button {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 550;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
}

.muster-toggle button[aria-pressed="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* --- Punch trail (attendance drawer) --- */
.punch-trail {
    list-style: none;
    position: relative;
    padding-left: 1.1rem;
    margin: 0;
}

.punch-trail::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--border);
}

.punch-trail li {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-size: 0.82rem;
}

.punch-trail li::before {
    content: "";
    position: absolute;
    left: -1.1rem;
    top: 0.7rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--emp-accent, var(--primary));
}

.punch-trail li > span:first-child { color: var(--text-muted); }
.punch-trail li > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Leave approval queue --- */
.leave-split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .leave-split { grid-template-columns: 1fr; }
}

.leave-req {
    display: flex;
    gap: 0.7rem;
    padding: 0.8rem;
    margin-bottom: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--leave-accent, var(--primary));
    border-radius: 9px;
}

.leave-req:hover { box-shadow: var(--shadow); }
.leave-req-body { flex: 1; min-width: 0; }

.leave-req-top {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.leave-req-name { font-weight: 650; font-size: 0.9rem; }

.leave-req-when {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.leave-req-when strong { color: var(--text); font-weight: 650; }

.leave-req-reason {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    overflow-wrap: anywhere;
}

.leave-req-bal {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: var(--hover);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.leave-req-bal.short { color: var(--att-absent); border-color: var(--att-absent); }

.leave-req-acts { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; }

.leave-meter { margin-bottom: 0.85rem; }

.leave-meter-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.leave-meter-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

.leave-meter-track {
    height: 8px;
    border-radius: 999px;
    background: var(--hover);
    border: 1px solid var(--border);
    overflow: hidden;
}

.leave-meter-fill {
    height: 100%;
    border-radius: 999px 4px 4px 999px;
    background: var(--leave-accent, var(--primary));
}

.leave-out {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
}

.leave-out:first-child { border-top: 0; }
.leave-out-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.leave-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* --- Payroll run view --- */
.pay-hero-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.pay-hero {
    font-size: 2rem;
    font-weight: 680;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.pay-hero-sub { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.pay-adjrow {
    display: grid;
    grid-template-columns: 160px 1fr 120px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.3rem 0;
}

@media (max-width: 700px) {
    .pay-adjrow { grid-template-columns: 110px 1fr 96px; }
}

.pay-adjrow .pay-adjlabel { font-size: 0.82rem; color: var(--text); }

.pay-adjtrack { position: relative; height: 22px; }

.pay-adjtrack::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--border);
}

.pay-adjbar { position: absolute; top: 3px; height: 16px; }
.pay-adjbar.pos { left: 50%; background: var(--att-present); border-radius: 0 4px 4px 0; }
.pay-adjbar.neg { right: 50%; background: var(--att-absent); border-radius: 4px 0 0 4px; }

.pay-adjamt { text-align: right; font-size: 0.82rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.pay-adjamt.pos { color: var(--att-present); }
.pay-adjamt.neg { color: var(--att-absent); }

.pay-emprow {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0;
    border-top: 1px solid var(--border);
}

.pay-emprow-who { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.pay-emprow-name { font-size: 0.85rem; font-weight: 620; }
.pay-emprow-net { font-size: 0.85rem; font-weight: 650; font-variant-numeric: tabular-nums; }

.pay-delta {
    font-size: 0.75rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    min-width: 88px;
    text-align: right;
}

.pay-delta.up { color: var(--att-present); }
.pay-delta.down { color: var(--att-absent); }
.pay-delta.flat { color: var(--text-muted); }

.pay-adjamt.zero { color: var(--text-muted); font-weight: 550; }

/* --- Salary advances --- */
.adv-card {
    display: flex;
    gap: 0.7rem;
    padding: 0.8rem;
    margin-bottom: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--adv-accent, var(--primary));
    border-radius: 9px;
}

.adv-card:hover { box-shadow: var(--shadow); }
.adv-body { flex: 1; min-width: 0; }

.adv-top { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.adv-name { font-weight: 650; font-size: 0.9rem; }

.adv-amount {
    margin-left: auto;
    font-size: 1.05rem;
    font-weight: 680;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.adv-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.25rem; }
.adv-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; overflow-wrap: anywhere; }

.adv-impact {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: var(--hover);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.adv-impact.heavy { color: var(--att-half); border-color: var(--att-half); }
.adv-impact.blocked { color: var(--att-absent); border-color: var(--att-absent); }

.adv-acts { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; }

.adv-group-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.adv-group-head strong { color: var(--text); font-size: 0.85rem; }

.adv-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
}

.adv-line:first-child { border-top: 0; }
.adv-line-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-line-amt { font-variant-numeric: tabular-nums; font-weight: 650; }

/* --- Expense claim pipeline --- */
.exp-pipe {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

@media (max-width: 860px) {
    .exp-pipe { grid-template-columns: 1fr; }
}

.exp-lane {
    background: var(--hover);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.exp-lane > header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-top: 3px solid var(--exp-accent, var(--primary));
    border-bottom: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
}

.exp-lane header .exp-lane-title { font-weight: 650; font-size: 0.82rem; }

.exp-lane header .exp-lane-count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}

.exp-lane-items { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }

.exp-lane > footer {
    margin-top: auto;
    padding: 0.5rem 0.75rem;
    border-top: 1px dashed var(--border);
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.exp-lane > footer strong { color: var(--text); font-variant-numeric: tabular-nums; }

.exp-claim {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem;
}

.exp-claim-title { font-size: 0.82rem; font-weight: 620; overflow-wrap: anywhere; }

.exp-claim-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.exp-claim-amt { font-size: 0.85rem; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--text); }
.exp-claim-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.3rem; overflow-wrap: anywhere; }

.exp-state {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 5px;
    background: var(--hover);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.exp-state.paid { color: var(--att-present); border-color: var(--att-present); }
.exp-state.due { color: var(--att-leave); border-color: var(--att-leave); }
.exp-state.missed { color: var(--att-absent); border-color: var(--att-absent); }
.exp-state.stale { color: var(--att-half); border-color: var(--att-half); }

.exp-claim-acts { display: flex; gap: 0.35rem; margin-top: 0.5rem; }

/* --- Overtime logs --- */
.ot-row {
    display: grid;
    grid-template-columns: 170px 1fr 96px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.3rem 0;
    cursor: pointer;
    border-radius: 6px;
}

.ot-row:hover { background: var(--hover); }

@media (max-width: 720px) {
    .ot-row { grid-template-columns: 110px 1fr 80px; }
}

.ot-who { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.ot-who-name { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ot-track { display: flex; align-items: center; height: 20px; gap: 2px; }

.ot-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.35rem;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 2px;
}

.ot-bar-dropped {
    height: 100%;
    background: repeating-linear-gradient(45deg, var(--att-half) 0 4px, transparent 4px 8px);
    border: 1px solid var(--att-half);
    border-radius: 0 4px 4px 0;
    min-width: 2px;
}

.ot-cost { text-align: right; font-size: 0.78rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.ot-cost.pending { color: var(--text-muted); font-weight: 550; font-size: 0.7rem; }

.ot-policy {
    margin-top: 1rem;
    padding: 0.6rem 0.75rem;
    background: var(--hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ot-policy strong { color: var(--text); }

.ot-day {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
}

.ot-day:first-child { border-top: 0; }
.ot-day-hrs { font-variant-numeric: tabular-nums; font-weight: 600; }
.ot-day-hrs.dropped { color: var(--att-half); }

/* --- Login split layout: form left, module carousel right --- */
/* Proportions follow a 50/50 split: a narrow centred form column with the
   footer pinned below it, and the showcase inset as a card with its own margin. */
.login-screen {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    align-items: stretch;
    height: 100vh;
    background: var(--sidebar);
}

.login-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.login-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem clamp(1.5rem, 5vw, 4rem);
    min-height: 0;
}

.login-form-wrap {
    width: 100%;
    max-width: 400px;
}

.login-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.login-brand img {
    max-width: 190px;
    height: auto;
    border-radius: 8px;
    display: block;
}

.login-panel .login-sub {
    color: #94a3b8;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 2rem;
}

.login-panel .form-group { margin-bottom: 0.9rem; }
.login-panel .form-group label { color: #cbd5e1; }

.login-panel .form-group input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f8fafc;
    padding: 0.75rem 0.85rem;
}

.login-panel .form-group input::placeholder { color: #64748b; }

.login-panel .form-group input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.login-password-wrap { position: relative; }
.login-password-wrap input { padding-right: 2.75rem !important; }

.login-eye {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}

.login-eye:hover { color: #f8fafc; background: rgba(255, 255, 255, 0.08); }
.login-eye:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.login-submit {
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
}

/* Pinned beneath the form, as in the reference. */
.login-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 1rem;
    text-align: center;
}

.login-footer-label {
    color: #64748b;
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
}

.login-footer img {
    max-width: 120px;
    height: auto;
    border-radius: 5px;
    display: inline-block;
    opacity: 0.85;
}

.login-footer-copy {
    color: #64748b;
    font-size: 0.72rem;
    margin-top: 0.5rem;
}

.login-divider {
    background: rgba(255, 255, 255, 0.12);
    width: 2px;
}

.login-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 2.75rem);
    min-width: 0;
    overflow: hidden;
}

/* The inset card the previews sit inside. */
.login-card {
    width: 100%;
    max-width: 760px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: clamp(1rem, 2.5vw, 2rem);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
}

.login-slides {
    position: relative;
    width: 100%;
    /* Holds the card height steady while slides cross-fade. */
    aspect-ratio: 460 / 300;
}

.login-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}

.login-slide.active { opacity: 1; transform: none; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
    .login-slide { transition: none; transform: none; }
}

.login-slide svg {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.login-slide figcaption { text-align: center; }

.login-slide-title {
    color: #f8fafc;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin-bottom: 0.3rem;
}

.login-slide-text {
    color: #94a3b8;
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 52ch;
    margin: 0 auto;
}

.login-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
}

.login-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: width 0.25s ease, background 0.2s ease;
}

.login-dot:hover { background: rgba(255, 255, 255, 0.45); }
.login-dot[aria-selected="true"] { width: 26px; background: var(--primary); }
.login-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

@media (max-width: 900px) {
    .login-screen { grid-template-columns: 1fr; }
    .login-divider, .login-showcase { display: none; }
}

/* --- Form controls follow the theme ---
   Selects and inputs previously relied on per-element inline styles, so any
   omission (or a typo'd variable) fell back to the browser's white-on-white
   defaults in dark mode. These are the baseline; inline styles still win. */
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="search"],
textarea {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
}

/* The native dropdown popup takes its colours from the option elements on
   Windows, so they have to be set explicitly. */
select option,
select optgroup {
    background-color: var(--surface);
    color: var(--text);
}

select:disabled,
input:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

::placeholder { color: var(--text-muted); opacity: 1; }

/* Date and time pickers ship a dark glyph that disappears on a dark surface. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
    cursor: pointer;
}

/* --- Dashboard: operations cockpit --- */
.dash-pulse {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.dash-pulse-cell { background: var(--surface); padding: 0.7rem 0.85rem; }
.dash-pulse-k { display: block; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 650; }
.dash-pulse-v { display: block; font-size: 1.4rem; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.dash-pulse-sub { display: block; font-size: 0.68rem; color: var(--text-muted); }
.dash-pulse-bar { height: 4px; border-radius: 999px; background: var(--hover); margin-top: 0.45rem; overflow: hidden; }
.dash-pulse-bar span { display: block; height: 100%; border-radius: 999px; }

.dash-grid { display: grid; gap: 1.25rem; align-items: start; }
.dash-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dash-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .dash-main, .dash-two { grid-template-columns: 1fr; } }

.dash-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.dash-card-head h3 { font-size: 0.95rem; }
.dash-sub { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.dash-link { font: inherit; font-size: 0.72rem; font-weight: 600; color: var(--primary); background: none; border: 0; cursor: pointer; padding: 0; }
.dash-link:hover { text-decoration: underline; }

.dash-inbox-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0; border-top: 1px solid var(--border); }
.dash-inbox-row:first-of-type { border-top: 0; }
.dash-inbox-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 0.95rem; flex: none; background: var(--hover); }
.dash-inbox-body { flex: 1; min-width: 0; }
.dash-inbox-title { font-size: 0.82rem; font-weight: 620; }
.dash-inbox-meta { font-size: 0.72rem; color: var(--text-muted); }
.dash-inbox-count { font-size: 1.25rem; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* stretch so the percentage-height segments have a box to resolve against */
.dash-trend { display: flex; align-items: stretch; gap: 4px; height: 140px; }
.dash-trend-day { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dash-trend-stack { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.dash-trend-seg { border-radius: 2px; }
.dash-trend-lbl { font-size: 0.55rem; color: var(--text-muted); text-align: center; margin-top: 0.3rem; font-variant-numeric: tabular-nums; }

.dash-legend { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.75rem; font-size: 0.7rem; color: var(--text-muted); }
.dash-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.dash-legend i { width: 10px; height: 10px; border-radius: 3px; }

.dash-hero { font-size: 1.75rem; font-weight: 690; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.dash-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0; border-top: 1px solid var(--border); font-size: 0.8rem; }
.dash-row:first-of-type { border-top: 0; }
.dash-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-ot { display: grid; grid-template-columns: 104px 1fr 68px; gap: 0.5rem; align-items: center; padding: 0.2rem 0; font-size: 0.75rem; }
.dash-ot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-ot-track { display: flex; height: 15px; gap: 2px; }
.dash-ot-pay { background: var(--primary); border-radius: 0 3px 3px 0; }
.dash-ot-drop { background: repeating-linear-gradient(45deg, var(--att-half) 0 3px, transparent 3px 6px); border: 1px solid var(--att-half); border-radius: 0 3px 3px 0; }
.dash-ot-cost { text-align: right; font-variant-numeric: tabular-nums; font-weight: 620; }

.dash-exc { display: flex; gap: 0.55rem; padding: 0.55rem 0; border-top: 1px solid var(--border); }
.dash-exc:first-of-type { border-top: 0; }
.dash-exc-dot { width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; font-size: 0.62rem; font-weight: 800; flex: none; }
.dash-exc-title { font-size: 0.8rem; font-weight: 620; }
.dash-exc-why { font-size: 0.72rem; color: var(--text-muted); }

.dash-empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.8rem; }

/* --- Settings ---------------------------------------------------------- */
/* The policy screen is grouped by decision rather than run as one long form,
   so it needs a rail, panels, and a save bar that can show what has moved. */

.settings-shell { display: flex; flex-direction: column; gap: 1rem; }

.settings-savebar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; padding: 0.85rem 1.15rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow);
}
.settings-savebar-title { font-weight: 700; font-size: 0.95rem; }
.settings-savebar-sub { font-size: 0.78rem; color: var(--text-muted); }
.settings-savebar-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* .badge and .settings-rail-pip both set display, which otherwise wins over the
   hidden attribute the dirty tracking toggles. */
.settings-savebar-actions [hidden], .settings-rail-pip[hidden] { display: none; }

.settings-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .settings-body { grid-template-columns: 1fr; } }

.settings-rail {
    display: flex; flex-direction: column; gap: 1px; padding: 0.5rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    position: sticky; top: 5.5rem;
}
@media (max-width: 900px) { .settings-rail { position: static; flex-direction: row; flex-wrap: wrap; } }

.settings-rail-group {
    font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted); font-weight: 700; padding: 0.7rem 0.65rem 0.25rem; width: 100%;
}
.settings-rail-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    width: 100%; text-align: left; font: inherit; font-size: 0.85rem;
    background: none; border: 0; border-radius: 6px; padding: 0.45rem 0.65rem;
    color: var(--text-muted); cursor: pointer;
}
.settings-rail-item:hover { background: var(--hover); color: var(--text); }
.settings-rail-item[aria-current="true"] {
    background: rgba(99, 102, 241, 0.12); color: var(--primary); font-weight: 650;
}
.settings-rail-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.settings-rail-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex: none; }

.settings-panes { min-width: 0; }
.settings-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.settings-panel[hidden] { display: none; }
.settings-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.settings-panel-head h3 { margin: 0; font-size: 1rem; }
.settings-panel-head p { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--text-muted); }

.setting-rows { display: flex; flex-direction: column; }
.setting-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem 1.5rem;
    align-items: center; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .setting-row { grid-template-columns: 1fr; } }

.setting-label { font-size: 0.875rem; font-weight: 620; }
.setting-hint { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.15rem; }
.setting-control { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; justify-self: start; }
.setting-control input, .setting-control select {
    padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.setting-control input:disabled, .setting-control select:disabled { opacity: 0.6; cursor: not-allowed; }
.setting-unit { font-size: 0.8rem; color: var(--text-muted); }

/* A changed row is marked where the change was made, so the count in the save
   bar can always be traced back to specific fields. */
.setting-row--dirty { background: rgba(245, 158, 11, 0.08); box-shadow: inset 3px 0 0 var(--warning); }
.setting-row--dirty .setting-label::after {
    content: "changed"; margin-left: 0.5rem; font-size: 0.62rem; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--warning); font-weight: 700;
}

.settings-note {
    margin: 1.15rem; padding: 0.7rem 0.85rem; font-size: 0.8rem; color: var(--text-muted);
    background: var(--hover); border-radius: 8px;
}
.settings-subform { padding: 1.15rem 1.15rem 0; }
.settings-subform h4 { margin: 0 0 0.85rem; font-size: 0.9rem; }
.settings-subform .form-group { margin-bottom: 0.85rem; }

/* ============================================================
   Employee self-service shell
   ============================================================
   An employee has five things to do here, and an admin sidebar listing
   payroll, organisation and audit is not one of them. On this screen the
   chrome is removed and the actions are the page: the quick-action row is
   the navigation, so nothing is hidden behind a drawer nobody opens. */

body.employee-shell aside,
body.employee-shell #sidebar-toggle,
body.employee-shell #premium-banner { display: none !important; }

/* The grid must collapse to one column as well as losing the sidebar.
   From 1024px up the shell is `grid-template-columns: 260px 1fr`, so hiding the
   sidebar with display:none takes it out of the grid and hands <main> the
   260px column — the whole dashboard squeezed into a sidebar-width strip with
   the rest of the screen blank. Kiosk mode collapses the same way. */
body.employee-shell .app-container { grid-template-columns: 1fr; }

body.employee-shell main { margin-left: 0; }
body.employee-shell header { padding-left: 1.5rem; }
/* The greeting card names the person and the day, so a second "Dashboard"
   heading above it is one label too many. */
body.employee-shell #view-title { display: none; }
body.employee-shell .content-area { max-width: 1000px; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }

.emp-greet {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem;
}
.emp-greet-who { display: flex; align-items: center; gap: 0.85rem; }
.emp-greet-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
}
.emp-greet-name { margin: 0; font-size: 1.05rem; font-weight: 700; }
.emp-greet-sub { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

.emp-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 1.25rem 1.4rem;
}

.emp-punch { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.emp-punch-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); }
.emp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); flex: none; }
.emp-dot--idle { background: var(--text-muted); }
.emp-clock {
    margin: 0.35rem 0 0; font-size: 2rem; font-weight: 700; letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.emp-punch-meta { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--text-muted); }
.emp-punch-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.emp-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.9rem; margin: 1rem 0;
}
.emp-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; }
.emp-tile-k { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.emp-tile-v { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.emp-tile-v small { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }

/* align-items: start so a short card keeps its own height — stretching "This
   week" to match a long request list leaves a panel of empty space that reads
   as something failing to load. */
.emp-split {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.9rem; align-items: start;
}
.emp-card h4 { margin: 0 0 0.9rem; font-size: 0.95rem; font-weight: 700; }

.emp-week { display: flex; gap: 0.5rem; align-items: flex-end; }
.emp-week-day { flex: 1; text-align: center; }
.emp-week-bar { height: 52px; border-radius: 7px; border: 1px solid var(--border); }
.emp-week-bar--today { border: 2px solid var(--primary); }
.emp-week-label { font-size: 0.72rem; color: var(--text-muted); }
.emp-legend { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.85rem; font-size: 0.72rem; color: var(--text-muted); }
.emp-legend span span { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 0.3rem; }

.emp-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.emp-row:last-child { border-bottom: 0; }
.emp-row-title { font-size: 0.88rem; }
.emp-row-sub { font-size: 0.78rem; color: var(--text-muted); }

.emp-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.emp-actions .btn { border-radius: 10px; }

.emp-empty { font-size: 0.85rem; color: var(--text-muted); margin: 0.4rem 0 0; }

@media (max-width: 640px) {
    body.employee-shell .content-area { padding: 1rem 0.9rem 2.5rem; }
    .emp-clock { font-size: 1.7rem; }
}

/* Employee sub-pages. With the sidebar gone these are reached from the
   dashboard's action row, so each one has to carry its own way back —
   otherwise the only exit is the browser button. */
.emp-page-head {
    display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem;
}
.emp-back {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 0.45rem 0.75rem; font-size: 0.85rem; color: var(--text);
    cursor: pointer; font-family: inherit;
}
.emp-back:hover { background: var(--hover); }
.emp-page-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.emp-page-sub { margin: 0; font-size: 0.82rem; color: var(--text-muted); }

/* A history is a list of days, not a spreadsheet: one row per day, the date and
   the outcome first, the times as supporting detail. */
.emp-list-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 0; border-bottom: 1px solid var(--border);
}
.emp-list-row:last-child { border-bottom: 0; }
.emp-list-main { min-width: 0; }
.emp-list-date { font-size: 0.9rem; font-weight: 600; }
.emp-list-sub { font-size: 0.78rem; color: var(--text-muted); }
.emp-list-right { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.emp-list-hours { font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* A payslip is a figure with a breakdown, so the net pay leads and the parts
   sit under it — reversing that makes someone hunt for the number they opened
   the page for. */
.emp-payslip {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.emp-payslip:last-child { border-bottom: 0; }
.emp-payslip-period { font-size: 0.9rem; font-weight: 600; }
.emp-payslip-parts { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.emp-payslip-net { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.emp-payslip-right { display: flex; align-items: center; gap: 0.85rem; }