/* Access Logs – Base Styles + Layout + Login
   Pure CSS, reusable components, minimal but extendable.
*/

/* ============================= */
/* 1. Design tokens (variables)  */
/* =============================*/

:root {
    /* Typography */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --fs-10: 0.625rem;
    /* 10px */
    --fs-11: 0.6875rem;
    /* 11px */
    --fs-12: 0.75rem;
    /* 12px */
    --fs-14: 0.875rem;
    /* 14px */
    --fs-16: 1rem;
    /* 16px */
    --fs-18: 1.125rem;
    /* 18px */
    --fs-20: 1.25rem;
    /* 20px */
    --fs-24: 1.5rem;
    /* 24px */
    --fs-28: 1.75rem;
    /* 28px */
    --fs-13: 0.8125rem;
    /* 13px */
    --fs-15: 0.9375rem;
    /* 15px */
    --fs-48: 3rem;
    /* 48px - large headings */

    --text-sm: var(--fs-14);
    --text-xs: var(--fs-12);

    /* Radii */
    --r-1: 0.25rem;
    /* 4px */
    --r-2: 0.5rem;
    /* 8px */
    --r-3: 0.75rem;
    /* 12px */
    --r-pill: 999px;

    --radius: var(--r-2);
    --radius-sm: var(--r-1);
    --radius-full: var(--r-pill);

    /* Spacing scale */
    --s-1: 0.25rem;
    /* 4px */
    --s-2: 0.5rem;
    /* 8px */
    --s-3: 0.75rem;
    /* 12px */
    --s-4: 1rem;
    /* 16px */
    --s-5: 1.25rem;
    /* 20px */
    --s-6: 1.5rem;
    /* 24px */
    --s-7: 1.75rem;
    /* 28px */
    --s-8: 2rem;
    /* 32px */

    /* Shadows - defined as variables for reuse */
    --shadow-sm-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
    --shadow-sm-2: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-1: 0 12px 25px rgba(0, 0, 0, 0.15);
    --shadow-2: 0 18px 25px rgba(0, 0, 0, 0.2);

    /* Additional common values */
    --icon-sm: 12px;
    --icon-md: 16px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-xxl: 48px;

    --avatar-sm: 24px;
    --avatar-md: 28px;
    --avatar-lg: 32px;
    --avatar-xl: 36px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Dimensions */
    --sidebar-width: 260px;
    --login-card-width: 420px;
    --dot-size: 8px;
    --switch-width: 40px;
    --switch-height: 22px;
    --slider-size: 18px;
    --search-width: 220px;
    --search-width-focus: 260px;

    --bg-intensity: 0.08;
}

/* ============================= */
/* 2. Base + themes              */
/* ============================= */

/* LIGHT THEME (default) */
body {
    --bg: #f3f4f6;
    --bg-page: var(--bg);
    --bg-offset: #f9fafb;
    --surface: #ffffff;
    --elev: var(--surface);
    --bg-surface: var(--surface);
    --bg-surface-1: var(--surface);
    --bg-surface-2: var(--elev);
    --card-bg: var(--surface);
    --text: #111827;
    --text-color: var(--text);
    --text-base: var(--fs-16);
    --muted: #6b7280;
    --text-muted: var(--muted);
    --text-secondary: var(--muted);
    --fg-muted: var(--muted);
    --border: #e5e7eb;
    --border-color: var(--border);
    --border-hover: #d1d5db;
    --ring: #2563eb;
    --accent: #2563eb;
    --accent-rgb: 37, 99, 235;
    --accent-2: #7c3aed;
    --avatar-color: #e5e7eb;
    --primary: var(--accent);
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --primary-muted: rgba(37, 99, 235, 0.5);
    --primary-soft: var(--accent-bg);
    --danger: #b91c1c;
    --good: #15803d;
    --sick: var(--danger);
    --warning: #f59e0b;
    --home-office: #0f766e;
    /* teal-700 */
    --vacation: #8b5cf6;
    /* purple-600 */
    --leave: var(--vacation);
    /* leave badges - same as vacation */
    --wfh: #10b981;
    /* WFH badges - emerald-500 */

    /* RGB Components for rgba usage */
    --danger-rgb: 185, 28, 28;
    --good-rgb: 21, 128, 61;
    --warning-rgb: 245, 158, 11;
    --muted-rgb: 107, 114, 128;
    --info-rgb: 59, 130, 246;

    /* Vibrant variants for solid elements */
    --success-vibrant: #16a34a;
    --danger-vibrant: #dc2626;
    --warning-vibrant: var(--warning);
    --info-vibrant: #3b82f6;
    --accent-vibrant: var(--accent);
    --success-soft: #22c55e;
    --danger-soft: #ef4444;
    --warning-soft: #facc15;
    --info-soft: #60a5fa;
    --white: #ffffff;

    /* Leave Status Colors (Pastel) */
    --leave-sick: #f5d7e7;
    --leave-medical: #e6e0f7;
    --leave-special: #f6f1d0;
    --leave-vacation: #e0f7ff;
    --leave-wfh: #eaf2d9;
    --leave-delegation: #e8eef3;
    --leave-weekend: #fdebd3;
    --leave-teambuilding: #e3f3ea;
    --leave-holidays: #fff0e0;

    /* Leave Icon Colors (Intense - for SVG fills) */
    --icon-sick: #d63384;
    --icon-medical: #7c3aed;
    --icon-special: #ca8a04;
    --icon-vacation: #0891b2;
    --icon-wfh: var(--success-vibrant);
    --icon-delegation: #0369a1;
    --icon-weekend: #ea580c;
    --icon-teambuilding: #059669;
    --icon-holidays: var(--warning);
    --icon-easter: #ff6a6a;
    --icon-office: var(--icon-delegation);
    /** 22c55e -- old **/

    /* Opacity variants for backgrounds */
    --accent-bg: rgba(var(--accent-rgb), 0.12);
    --accent-bg-hover: rgba(var(--accent-rgb), 0.06);
    --surface-hover: var(--accent-bg-hover);
    --danger-bg: rgba(var(--danger-rgb), 0.16);
    --good-bg: rgba(var(--good-rgb), 0.16);
    --warning-bg: rgba(var(--warning-rgb), 0.15);
    --info-bg: rgba(var(--info-rgb), 0.15);
    --muted-bg: rgba(var(--muted-rgb), 0.15);
    --surface-muted: var(--muted-bg);
    --muted-bg-dark: rgba(var(--muted-rgb), 0.18);
    --progress: var(--accent);
    --progress-track-bg: rgba(var(--muted-rgb), 0.15);

    background: radial-gradient(circle at top, var(--surface), var(--bg));
    color: var(--text);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    font-family: var(--font-sans), serif;
    font-size: var(--fs-16);
    line-height: 1.5;
}

/* DARK THEME */
body.theme-dark {
    --bg: #0f172a;
    --bg-page: var(--bg);
    --bg-offset: #1e293b;
    --surface: #111827;
    --elev: #0b1120;
    --bg-surface: var(--surface);
    --bg-surface-1: var(--surface);
    --bg-surface-2: var(--elev);
    --card-bg: var(--surface);
    --text: #e5e7eb;
    --text-color: var(--text);
    --text-base: var(--fs-16);
    --muted: #9ca3af;
    --text-muted: var(--muted);
    --text-secondary: var(--muted);
    --fg-muted: var(--muted);
    --border: #1f2937;
    --border-color: var(--border);
    --border-hover: #334155;
    --ring: #3b82f6;
    --accent: #2563eb;
    --accent-rgb: 59, 130, 246;
    --accent-2: #7c3aed;
    --avatar-color: #334155;
    --primary: var(--accent);
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --primary-muted: rgba(59, 130, 246, 0.5);
    --primary-soft: var(--accent-bg);
    --danger: #ef4444;
    --good: #22c55e;
    --sick: var(--danger);
    --warning: #f59e0b;
    --home-office: #99f6e4;
    /* teal-200 */
    --vacation: #a78bfa;
    /* purple-400 */
    --leave: var(--vacation);
    /* leave badges (dark) */
    --wfh: #34d399;
    /* WFH badges (dark) - emerald-400 */

    /* RGB Components for rgba usage (Dark) */
    --danger-rgb: 239, 68, 68;
    --good-rgb: 34, 197, 94;
    --warning-rgb: 245, 158, 11;
    --muted-rgb: 156, 163, 175;
    --info-rgb: 59, 130, 246;

    /* Vibrant variants for solid elements (Dark) */
    --success-vibrant: #4ade80;
    --danger-vibrant: #f87171;
    --warning-vibrant: var(--warning);
    --info-vibrant: #60a5fa;
    --accent-vibrant: var(--ring);
    --success-soft: #86efac;
    --danger-soft: #fca5a5;
    --warning-soft: #fef08a;
    --info-soft: #93c5fd;
    --white: #ffffff;

    /* Leave Status Colors (Dark Mode Muted Backgrounds) */
    --leave-sick: #502d40;
    --leave-medical: #383050;
    --leave-special: #454020;
    --leave-vacation: #204050;
    --leave-wfh: #2d4530;
    --leave-delegation: #253040;
    --leave-weekend: #503525;
    --leave-teambuilding: #254535;
    --leave-holidays: #503025;

    /* Leave Icon Colors (Dark Mode - brighter for visibility) */
    --icon-sick: #f472b6;
    --icon-medical: #a78bfa;
    --icon-special: #fbbf24;
    --icon-vacation: #22d3ee;
    --icon-wfh: #4ade80;
    --icon-delegation: #38bdf8;
    --icon-weekend: #fb923c;
    --icon-teambuilding: #34d399;
    --icon-holidays: var(--warning);
    --icon-easter: #ff6a6a;
    --icon-office: var(--icon-delegation);
    /* #4ade80; -- old */

    /* Opacity variants for backgrounds (dark) */
    --accent-bg: rgba(var(--accent-rgb), 0.22);
    --accent-bg-hover: rgba(var(--accent-rgb), 0.1);
    --surface-hover: var(--accent-bg-hover);
    --danger-bg: rgba(var(--danger-rgb), 0.22);
    --good-bg: rgba(var(--good-rgb), 0.22);
    --warning-bg: rgba(var(--warning-rgb), 0.22);
    --info-bg: rgba(var(--info-rgb), 0.22);
    --muted-bg: rgba(15, 23, 42, 0.6);
    --surface-muted: var(--muted-bg);
    --muted-bg-dark: rgba(15, 23, 42, 0.6);
    /* Progress Bar Theme */
    --progress: var(--accent);
    --progress-track-bg: rgba(255, 255, 255, 0.05);

    /* Shadow overrides for dark mode */
    /* Default shadows are kept subtle and dark to maintain page structure without appearing as "glows" */
    --shadow-sm-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-1: 0 12px 25px rgba(0, 0, 0, 0.5);

    /* Hover and Elevated states use a vibrant accent glow (blue) for maximum distinguishability */
    --shadow-sm-2: 0 12px 32px rgba(var(--accent-rgb), 0.5);
    --shadow-2: 0 18px 25px rgba(var(--accent-rgb), 0.4);

    background: radial-gradient(circle at top, var(--surface), var(--bg));
    color: var(--text);
}

/* Reset / base elements */
*,
*::before,
*::after {
    box-sizing: border-box;
}

button,
input,
textarea {
    font: inherit;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code {
    font-family: monospace;
    font-size: var(--fs-12);
    background: var(--muted-bg);
    padding: 2px 6px;
    border-radius: var(--r-1);
}

/* Focus states */
:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* ============================= */
/* 3. Typographic helpers        */
/* ============================= */

h1,
h2,
h3,
h4 {
    margin: 0 0 var(--s-3);
    font-weight: 600;
}

p {
    margin: 0 0 var(--s-3);
}

.small {
    font-size: var(--fs-12);
}

.muted {
    color: var(--muted);
}

/* Simple alignment utilities */
.right {
    margin-left: auto;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Visually hidden (for accessible labels, etc.) */
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* ============================= */
/* 4. Layout skeleton            */
/* ============================= */

.app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    gap: var(--s-4);
}

/* Main areas */
.header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 30;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    margin-right: var(--s-1);
    gap: var(--s-4);
}

.footer {
    grid-area: footer;
    font-size: var(--fs-12);
    color: var(--muted);
    padding: var(--s-2) 0;
}

.mt-fs24 {
    margin-top: var(--fs-24);
}

/* ============================= */
/* Start for header / topbar     */
/* ============================= */

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--elev);
    border: 1px solid var(--border);
}

/* Brand */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 600;
    font-size: var(--fs-16);
    color: var(--text);
}

.brand__logo {
    width: var(--avatar-xl);
    height: var(--avatar-xl);
    /*border-radius: var(--r-2);
    background: linear-gradient(145deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.12);*/
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.brand__logo svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Header theme icon */
.toggles {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-left: auto;
}

.theme-toggle {
    border: 1px solid var(--border);
    background: var(--elev);
    border-radius: var(--r-2);
    width: var(--icon-xl);
    height: var(--icon-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.theme-toggle__icon {
    font-size: var(--fs-18);
    line-height: 1;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}


/* User chip */
.userchip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-2);
    background: var(--surface);
    border: 1px solid var(--border);
    margin-left: auto;
}

body.theme-dark .userchip {
    background: radial-gradient(circle at top left,
            var(--muted-bg-dark),
            var(--surface));
}



.userchip__avatar {
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, var(--warning-soft), var(--warning-vibrant));
    overflow: hidden;
    position: relative;
}

.userchip__meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: var(--fs-12);
}

.user.cal__chips {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-11);
    color: var(--fg-muted);
}

.cal__chips>span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Hamburger menu – base (hidden on desktop) */
.header__menu {
    display: none;
}

.header__menu-icon {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 14px;
}

.header__menu-icon span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text);
    border-radius: var(--r-pill);
    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast),
        top var(--transition-fast),
        bottom var(--transition-fast);
}

.header__menu-icon span:nth-child(1) {
    top: 0;
}

.header__menu-icon span:nth-child(2) {
    top: 6px;
}

.header__menu-icon span:nth-child(3) {
    bottom: 0;
}

/* End for header / topbar */

/* ============================= */
/* Start for sidebar & nav       */
/* ============================= */

.sidebar {
    background: var(--elev);
    border-radius: var(--r-3);
    border: 1px solid var(--border);
    padding: var(--s-4);
}

.nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.nav a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    font-size: var(--fs-14);
    color: var(--muted);
}

.nav a svg {
    width: 18px;
    height: 18px;
    stroke-width: 2px;
    color: inherit;
}

.nav a[aria-current="page"] {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}

.nav__group {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.nav__group-label {
    display: block;
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--muted);
    /*text-transform: uppercase;*/
    letter-spacing: 0.05em;
}

.nav__submenu {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin: 0 var(--s-3);
}

.nav__submenu-link {
    display: block;
    padding: var(--s-2) var(--s-3);
    padding-left: var(--s-5);
    border-radius: var(--r-2);
    font-size: var(--fs-14);
    color: var(--muted);
    position: relative;
}

.nav__submenu-link::before {
    content: "";
    position: absolute;
    left: var(--s-1);
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.5;
}

.nav__submenu-link[aria-current="page"] {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}

.nav__submenu-link[aria-current="page"]::before {
    background: var(--accent);
    opacity: 1;
}


/* End for sidebar & nav */

/* ============================= */
/* Start for card component      */
/* ============================= */

.card {
    background: var(--surface);
    border-radius: var(--s-4);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
    padding: var(--s-5);
    color: var(--text);
    backdrop-filter: blur(18px);
}

body.theme-dark .card {
    background: radial-gradient(circle at top left,
            var(--muted-bg-dark),
            var(--surface));
}


.card__title {
    font-size: var(--fs-18);
    font-weight: 600;
    margin: 0 0 var(--s-4);
}

.card__subtitle {
    font-weight: normal;
}

.card__body {
    display: flex;
    flex-direction: column;
}

.card--import {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card--import .card__body {
    flex: 1;
}

.card--import form {
    margin-top: auto;
}

.card__upload_w_img {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    margin-top: var(--s-4);
}

.card__upload_icon {
    flex: 0 0 150px;
    /* fixed-ish width for the icon */
    max-width: 150px;
    height: auto;
}

.card__upload_text {
    flex: 1 1 auto;
    /* text takes the remaining width */
}

@media (max-width: 576px) {
    /*.card__upload_w_img {
        flex-direction: column;
        align-items: flex-start;
    }*/

    .card__upload_icon {
        margin-bottom: 0.75rem;
    }
}

/* Login-specific modifier for card */
.card--login {
    width: 100%;
    max-width: var(--login-card-width);
    box-shadow: var(--shadow-2);
}

/* Card header with actions */
.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--border);
}

.card__header h2 {
    margin: 0;
    font-size: var(--fs-18);
    font-weight: 600;
}

.card__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

/* Leaves & Holiday Settings grid layout */
.absence-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}

@media (max-width: 1200px) {
    .absence-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Form field row - inline fields */
.field-row {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.field-row>.field {
    flex: 1;
    min-width: 120px;
}

/* Select styling improvements */
.select--sm {
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-14);
    border-radius: var(--r-2);
    border: 1px solid var(--border);
    background: var(--elev);
    color: var(--text);
    cursor: pointer;
}

.select--sm:focus {
    border-color: var(--ring);
    outline: none;
}

/* End for card component */

/* ============================= */
/* Leave/Holiday Banner          */
/* ============================= */

.leave-banner-section {
    width: 100%;
    margin-bottom: var(--s-4);
}

.leave-banner {
    width: 100%;
    height: 170px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--r-3);
    box-shadow: var(--shadow-1);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.leave-banner__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--s-3) var(--s-4);
}

.leave-banner__title {
    font-size: var(--fs-18);
    font-weight: 600;
    color: var(--text);
}

/* End for leave banner */

/* ============================= */
/* Start for buttons             */
/* ============================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--r-2);
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: var(--fs-14);
    white-space: nowrap;
}

.btn--primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--white);
    box-shadow: var(--shadow-1);
}

.btn--primary:hover {
    filter: brightness(1.05);
}

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

/* Disabled state */
.btn:disabled {
    opacity: 0.65;
    cursor: default;
    box-shadow: none;
}

/* Social login buttons */
.btn--social {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm-1);
    transition: all var(--transition-normal);
}

.btn--social:hover {
    background: var(--elev);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-1);
}

.btn--social svg {
    width: 20px;
    height: 20px;
}

/* End for buttons */

/* ============================= */
/* Start for forms (generic)     */
/* ============================= */

input[type="email"],
input[type="password"],
input[type="text"],
input[type="date"],
select,
input[type="search"] {
    display: block;
    width: 100%;
    padding: var(--s-3) var(--s-3);
    border-radius: var(--r-2);
    border: 1px solid var(--border);
    background: var(--elev);
    color: var(--text);
}

input.search-input {
    padding-left: var(--s-8);
}

input::placeholder {
    color: rgba(156, 163, 175, 0.8);
}

input:focus-visible,
select:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 1px var(--ring);
    outline: none;
}

label {
    font-size: var(--fs-14);
}

/* Generic form field */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

/* Checkbox wrapper */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-14);
    color: var(--muted);
}

.checkbox__input {
    margin: 0;
}

/* Custom File Upload */
.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-upload-area {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--r-3);
    padding: var(--s-5);
    background: var(--elev);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.file-upload-area:hover {
    border-color: var(--accent);
    background: var(--accent-bg-hover);
}

.file-upload-area.dragover {
    border-color: var(--accent);
    background: var(--accent-bg);
    transform: scale(1.01);
}

.file-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    text-align: center;
}

.file-upload-icon {
    font-size: var(--fs-48);
    line-height: 1;
    opacity: 0.6;
}

.file-upload-text {
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.file-upload-hint {
    font-size: var(--fs-12);
    color: var(--muted);
    margin: 0;
}

.file-upload-selected {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    margin-top: var(--s-2);
    width: 100%;
    max-width: 400px;
}

.file-upload-selected .file-icon {
    font-size: var(--fs-24);
    line-height: 1;
}

.file-upload-selected .filename {
    flex: 1;
    font-size: var(--fs-14);
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.file-upload-selected .file-remove {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: var(--s-1);
    font-size: var(--fs-18);
    line-height: 1;
    border-radius: var(--r-1);
    transition: all var(--transition-fast);
}

.file-upload-selected .file-remove:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.file-upload-area.file-selected .file-upload-icon,
.file-upload-area.file-selected .file-upload-text,
.file-upload-area.file-selected .file-upload-hint {
    display: none;
}

/* End for forms */

/* ============================= */
/* Start for day view components */
/* ============================= */

/* Toolbar layout */
.toolbar {
    display: flex;
    align-items: flex-end;
    gap: var(--s-4);
    flex-wrap: wrap;
}

/* Pills */
.pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pill {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    font-size: var(--fs-12);
    border: 1px solid var(--border);
    color: var(--muted);
}

/* Grids */
.grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-4);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
}

/* End for day view components */

/* ============================= */
/* Start for office activity page */
/* ============================= */

.user-card {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    background: var(--elev);
    transition: transform var(--transition-normal) ease, box-shadow var(--transition-normal) ease;
}

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

.user-card__avatar {
    width: var(--avatar-lg);
    height: var(--avatar-lg);
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    overflow: hidden;
    position: relative;
}

.user-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.user-card__name {
    font-weight: 600;
    font-size: var(--fs-14);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card__role {
    font-size: var(--fs-12);
    color: var(--muted);
}

.user-card__meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-12);
    color: var(--muted);
    margin-top: var(--s-1);
}

.center-v {
    display: flex;
    align-items: center;
}

/* Status dots for WFH */
.status-dot {
    display: inline-block;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--muted);
}

.status-dot.online {
    background: var(--good);
    box-shadow: 0 0 0 2px var(--good-bg);
}

.status-dot.away {
    background: var(--warning);
    box-shadow: 0 0 0 2px var(--warning-bg);
}

.status-dot.offline {
    background: var(--muted);
}

/* Responsive tweaks for grid */
@media (max-width: 900px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 600px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }

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

/* End for office activity page */

/* ============================= */
/* Start for stats               */
/* ============================= */

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.stat__muted {
    font-size: var(--fs-12);
    color: var(--muted);
}

.stat__value {
    font-size: var(--fs-24);
    font-weight: 600;
}

/* End for stats */

/* ============================= */
/* Start for progress bar        */
/* ============================= */

.progress {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--progress-track-bg);
    overflow: hidden;
}

body.theme-dark .progress {
    background: var(--progress-track-bg);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.progress__bar {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--good));
    transform-origin: left;
    transform: scaleX(var(--progress, 0.0));
}

/* Progress bar success state (goal reached) */
.progress--success .progress__bar {
    background: var(--good);
}

/* End for progress bar */

/* ============================= */
/* Start for chips               */
/* ============================= */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip {
    padding: 0.2rem var(--s-3);
    border-radius: var(--r-pill);
    font-size: var(--fs-12);
    background: var(--muted-bg);
    border: 1px solid var(--border);
}

body.theme-dark .chip {
    background: var(--muted-bg);
}

/* End for chips */

/* ============================= */
/* Start for badges              */
/* ============================= */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem var(--s-2);
    border-radius: var(--r-pill);
    font-size: var(--fs-12);
}

.badge svg {
    margin-left: var(--s-1);
}

aside .badge {
    border: 1px solid var(--border);
}

.stat-card__trend span {
    margin-left: var(--s-1);
}

/* Monthly total breakdown */
.stat-card__breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: var(--fs-12);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text);
    gap: 0.5rem;
}

.stat-row svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.stat-row__value {
    font-weight: 600;
    font-size: var(--fs-12);
    white-space: nowrap;
}

/* Activity widget - bar chart */
.activity-widget {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.125rem;
    height: 5rem;
    padding: var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    background: var(--surface);
    margin-bottom: var(--s-2);
    position: relative;
}

.activity-bar {
    flex: 1;
    min-height: 0.25rem;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    border-radius: 0.125rem 0.125rem 0 0;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.activity-bar:hover {
    opacity: 0.8;
    filter: brightness(1.1);
}

/* Drawer variant for activity widget */

.activity-widget--drawer .activity-bar {
    /* background: var(--accent); Removed to allow specific color classes to show */
    border-radius: 2px 2px 0 0;
    opacity: 0.9;
    transition: opacity var(--transition-normal);
    min-height: 2px;
    min-width: 0;
    /* Ensure bars can shrink below content size if needed */
}

.activity-widget--drawer .activity-bar:hover {
    opacity: 1;
    filter: none;
}

.bar--empty {
    background: transparent;
    height: 2px;
    background-color: var(--border);
}

/* Critical - < 4 hours, red gradient */
.bar--critical {
    background: linear-gradient(180deg, var(--danger-soft), var(--danger-vibrant));
}

/* Warning - 4h to 7.75h, orange gradient */
.bar--warning {
    background: linear-gradient(180deg, var(--warning-vibrant), var(--warning-soft));
}

/* Normal - 7.75h to 8.25h, blue gradient */
.bar--normal {
    background: linear-gradient(180deg, var(--info-vibrant), var(--accent-vibrant));
}

/* Overtime - > 8.25h, heavier/deeper purple-blue gradient */
.bar--overtime {
    background: linear-gradient(180deg, var(--accent-2), var(--accent-vibrant));
}

/* WFH day in normal range - green gradient */
.bar--wfh {
    background: linear-gradient(180deg, var(--good), var(--success-vibrant));
}

/* Legacy class - keep for backwards compatibility */
.bar--undertime {
    background: linear-gradient(180deg, var(--danger-soft), var(--danger-vibrant));
}

/* Holiday/Weekend with no hours - gray/neutral */
.bar--off {
    background: linear-gradient(180deg, var(--muted), var(--muted-bg-dark));
    opacity: 0.6;
}

/* Custom tooltip on hover */
.activity-bar::after {
    content: attr(data-hours) "h";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-0.25rem);
    background: var(--elev);
    color: var(--text);
    padding: 0.25rem 0.5rem;
    border-radius: var(--r-1);
    font-size: var(--fs-11);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm-2);
    z-index: 10;
}

/* Compact variant for dashboard highlights */
.activity-widget--compact {
    height: 3rem;
    padding: var(--s-1) var(--s-2);
    margin-bottom: 0;
}

.dayview-kpi .stat-card__breakdown {
    margin-top: 0.25rem;
    gap: 0.2rem;
}

.activity-bar:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-0.5rem);
}

.activity-widget__labels {
    display: flex;
    justify-content: space-between;
}

/* Stat card */
article .badge {
    border: 1px solid var(--border);
}

.badge--role {
    background: rgba(var(--muted-rgb), 0.2);
    color: var(--muted);
}

.badge--ok {
    background: var(--good-bg);
    color: var(--good);
}

.badge--bad {
    background: var(--danger-bg);
    color: var(--danger);
}

/* Calendar badge colors (light theme) */
.badge--present {
    background: rgba(var(--good-rgb), 0.15);
    color: #065f46;
}

.badge--absent {
    background: rgba(var(--danger-rgb), 0.15);
    color: #7f1d1d;
}

.badge--partial {
    background: rgba(var(--warning-rgb), 0.18);
    color: #7c2d12;
}

.badge--holiday {
    background: rgba(var(--info-rgb), 0.18);
    color: #1d4ed8;
}

/* Calendar badge colors – dark theme */
body.theme-dark .badge--present {
    background: rgba(var(--good-rgb), 0.22);
    color: #bbf7d0;
}

body.theme-dark .badge--absent {
    background: rgba(var(--danger-rgb), 0.22);
    color: #fecaca;
}

body.theme-dark .badge--partial {
    background: rgba(var(--warning-rgb), 0.25);
    color: #ffedd5;
}

body.theme-dark .badge--holiday {
    background: rgba(var(--info-rgb), 0.25);
    color: #bfdbfe;
}

/* Optional: slightly soften the border in dark mode */
body.theme-dark .badge {
    border-color: rgba(var(--muted-rgb), 0.5);
}

/* End for badges */

/* ============================= */
/* Start for table               */
/* ============================= */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-14);
}

.table th,
.table td {
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--border);
}

.table th {
    text-align: left;
    font-weight: 500;
    color: var(--muted);
}


/* End for table */

/* ============================= */
/* Start for login layout + form */
/* ============================= */

/* Full page centering + background */
.login-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-6);
    background: radial-gradient(circle at top, var(--surface), var(--bg));
}

/* Form layout */
.login-form .field {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin-bottom: var(--s-4);
}

/* Inline row for remember+link */
.login-form .field.field--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-5);
}

/* Social login section */
.login-social {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: var(--s-4) 0;
    color: var(--muted);
    font-size: var(--fs-12);
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
}

.login-divider::before {
    margin-right: var(--s-3);
}

.login-divider::after {
    margin-left: var(--s-3);
}

/* Extra notes under the form */
.login-note {
    margin-top: var(--s-3);
    color: var(--muted);
    text-align: center;
}

.login-note+.login-note {
    margin-top: var(--s-2);
}

/* End for login layout + form */

/* ============================= */
/* Start for responsiveness      */
/* ============================= */

/* Smallest tweaks */
@media (max-width: 480px) {
    .card {
        padding: var(--s-4);
    }

    .card__title {
        font-size: var(--fs-16);
    }
}

/* Layout + table + hamburger for <= 760px */
@media (max-width: 760px) {
    .app {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "footer";
    }

    /* Off-canvas sidebar on mobile */
    .sidebar {
        grid-area: unset;
        position: fixed;
        top: 71px;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        max-width: 80%;
        background: var(--surface);
        box-shadow: var(--shadow-2);
        transform: translateX(-100%);
        transition: transform var(--transition-fast);
        z-index: 40;
        border-radius: 0;
    }

    /* When nav toggle is checked, slide sidebar in */
    #navToggle:checked~.app .sidebar {
        transform: translateX(0);
    }

    /* Show hamburger on mobile */
    .header__menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--icon-xl);
        height: var(--icon-xl);
        margin-right: var(--s-1);
        border-radius: var(--r-2);
        border: 1px solid var(--border);
        background: var(--elev);
        cursor: pointer;
    }

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

    .table thead {
        display: none;
    }

    .table tr {
        display: block;
        border: 1px solid var(--border);
        margin-bottom: var(--s-3);
        border-radius: var(--r-2);
        overflow: hidden;
        background: var(--elev);
    }

    .table td {
        display: flex;
        justify-content: space-between;
        border: 0;
        border-bottom: 1px solid var(--border);
    }

    .table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted);
        padding-right: var(--s-3);
    }

    /* Turn hamburger into X when open */
    #navToggle:checked~.app .header__menu-icon span:nth-child(1) {
        top: 6px;
        transform: rotate(45deg);
    }

    #navToggle:checked~.app .header__menu-icon span:nth-child(2) {
        opacity: 0;
    }

    #navToggle:checked~.app .header__menu-icon span:nth-child(3) {
        bottom: 6px;
        transform: rotate(-45deg);
    }
}

/* End for responsiveness */

/* Visual "on" state for the switch (used when dark theme is active) */
.switch--on .track {
    background: var(--accent);
}

.switch--on .thumb {
    transform: translateX(16px);
    background: var(--white);
}

/* ============================= */
/* Start for timeline (visual)   */
/* ============================= */

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.timeline__item {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    position: relative;
}

/* Vertical connector line */
.timeline__item::before {
    content: "";
    position: absolute;
    left: var(--icon-lg);
    top: var(--icon-xxl);
    bottom: -1.5rem;
    width: 2px;
    background: var(--border);
    opacity: 0.7;
}

.timeline__item:last-child::before {
    display: none;
}

/* Marker wrapper */
.timeline__marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Main icon circle */
.timeline__icon {
    position: relative;
    width: var(--icon-xxl);
    height: var(--icon-xxl);
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--elev);
}

/* Arrow SVG inside circle */
.timeline__icon-svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* IN icons: status-colored */
.timeline__icon--ok.timeline__icon--in {
    background: var(--good-bg);
    color: var(--good);
    border-color: rgba(22, 163, 74, 0.5);
}

.timeline__icon.timeline__icon--wfh_exit svg {
    fill: var(--icon-delegation);
}

.timeline__icon.timeline__icon--wfh_entry svg {
    fill: var(--good);
}

.timeline__icon--bad.timeline__icon--in {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: rgba(248, 113, 113, 0.6);
}

/* OUT icons: always neutral grey */
.timeline__icon--out {
    background: var(--muted-bg-dark);
    color: var(--muted);
    border-color: rgba(148, 163, 184, 0.7);
}

/* Tiny device bubble */
.timeline__device {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: var(--r-pill);
    background: var(--elev);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Device SVG */
.timeline__device-icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Optional subtle coloring per device type */
.timeline__device--card {
    color: var(--accent);
}

.timeline__device--phone {
    color: var(--accent-2);
}

.timeline__device--watch {
    color: var(--good);
}

/* Content area */
.timeline__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding-top: var(--s-1);
}

.timeline__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
}

.timeline__direction {
    font-size: var(--fs-12);
    /*text-transform: uppercase;*/
    letter-spacing: 0.04em;
}

.timeline__direction--in {
    color: var(--good);
}

.timeline__direction--out {
    color: var(--muted);
}

.timeline__time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: var(--fs-12);
    color: var(--muted);
}

/* Meta row (location + method text) */
.timeline__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    font-size: var(--fs-12);
    color: var(--muted);
}

/* Location with map pin */
.timeline__location {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.timeline__location-icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.timeline__method {
    opacity: 0.9;
}

/* Status row: badge + note */
.timeline__status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
    font-size: var(--fs-12);
}

.timeline__note {
    color: var(--muted);
}

/* Mobile tweaks */
@media (max-width: 760px) {
    .timeline {
        gap: var(--s-5);
    }

    .timeline__item::before {
        bottom: var(--s-4);
    }
}

/* End for timeline (visual) */

/* ============================= */
/* Start for calendar layout     */
/* ============================= */

.cal {
    display: grid;
    gap: var(--s-4);
}

/* Main grid: 7 days + 1 summary column */
.cal__grid {
    display: grid;
    gap: var(--s-3);
}

@media (min-width: 1024px) {
    .cal__grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

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

    .cal__summary {
        grid-column: 1 / -1;
    }
}

.cal__day,
.cal__summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    padding: var(--s-3);
    box-shadow: var(--shadow-sm-1);
    position: relative;
    min-height: 7rem;
    display: flex;
    flex-direction: column;
    transition: ease 0.3s;
}

.cal__day:hover,
.cal__summary:hover {
    box-shadow: var(--shadow-sm-2);
    transform: translateY(-2px);
    background: var(--surface-hover);
    border-color: var(--accent);
}

.cal__icon {
    width: var(--icon-lg);
    height: var(--avatar-md);
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}

.cal__day-num {
    position: absolute;
    top: var(--s-2);
    right: var(--s-3);
    font-size: var(--fs-12);
    color: var(--muted);
}

/* Empty / no-data days */
.cal__day--empty {
    background: rgba(148, 163, 184, 0.06);
    color: var(--muted);
    box-shadow: none;
    border-style: dashed;
}

.cal__day--empty .badge {
    opacity: 0.7;
}

.cal__day--empty .cal__intensity {
    opacity: 0.15;
}

.cal__placeholder {
    font-size: var(--fs-12);
    font-style: italic;
    opacity: 0.85;
}


.cal__badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Badge with SVG icon */
.badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.badge-icon svg {
    width: 100%;
    height: 100%;
    max-width: 32px;
    max-height: 32px;
    fill: var(--icon-vacation);
    /* Default color for unknown icons */
}

/* Badge icon color classes - apply fill to SVG */
.badge-icon--office svg {
    fill: var(--icon-office);
}

.badge-icon--wfh svg {
    fill: var(--icon-wfh);
}

.badge-icon--vacation svg {
    fill: var(--icon-vacation);
}

.badge-icon--sick svg,
.badge-icon--sick-leave svg {
    fill: var(--icon-sick);
}

.badge-icon--medical svg,
.badge-icon--medical-leave svg {
    fill: var(--icon-medical);
}

.badge-icon--absent svg {
    fill: var(--danger);
}

.badge-icon--special-leave svg {
    fill: var(--icon-special);
}

.badge-icon--christmas svg,
.badge-icon--team-building svg,
.badge-icon--teambuilding svg {
    fill: var(--icon-teambuilding);
}

.badge-icon--delegation svg,
.badge-icon--delegatie svg {
    fill: var(--icon-delegation);
}

.badge-icon--maternity-leave svg {
    fill: var(--icon-medical);
}

/* Holiday icons use --icon-holidays color */
.badge-icon--chick-egg svg,
.badge-icon--epiphany svg,
.badge-icon--good-friday svg,
.badge-icon--bunny svg,
.badge-icon--virgin-mary svg,
.badge-icon--saint svg path,
.badge-icon--religious svg {
    fill: var(--icon-easter);
}

.badge-icon--new-year svg,
.badge-icon--childrens-day svg,
.badge-icon--saint svg,
.badge-icon--st-nicholaus svg,
.badge-icon--romania svg,
.badge-icon--union svg {
    fill: var(--icon-holidays);
}

.badge-icon--labour-day svg,
.badge-icon--baptism svg {
    fill: var(--icon-delegation);
}

.badge-icon--weekend svg,
.badge-icon--summer-weekend svg {
    fill: var(--icon-weekend);
}

.cal__chips {
    margin-top: var(--s-5);
    display: grid;
    gap: 0.35rem;
    font-size: var(--fs-12);
    margin-bottom: var(--s-1);
}

.cal__intensity {
    height: 6px;
    border-radius: var(--r-pill);
    background: transparent;
    margin-top: auto;
}

/* Intensity gradient colors - matching activity widget */
.cal__intensity--critical {
    background: linear-gradient(90deg,
            rgba(239, 68, 68, 0.3),
            rgba(239, 68, 68, 0.9));
}

.cal__intensity--warning {
    background: linear-gradient(90deg,
            rgba(245, 158, 11, 0.3),
            rgba(245, 158, 11, 0.9));
}

.cal__intensity--normal {
    background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.3),
            rgba(59, 130, 246, 0.9));
}

.cal__intensity--wfh {
    background: linear-gradient(90deg,
            rgba(34, 197, 94, 0.3),
            rgba(34, 197, 94, 0.9));
}

.cal__intensity--absent {
    background: linear-gradient(90deg,
            rgba(239, 68, 68, 0.3),
            rgba(239, 68, 68, 0.9));
}

.cal__intensity--none {
    background: transparent;
}


/* Calendar header labels (Mon–Sun + Summary) */

.cal__dow {
    display: grid;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}

@media (min-width: 1024px) {
    .cal__dow {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

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

.cal__label {
    font-size: var(--fs-12);
    color: var(--muted);
    padding-inline: 0.35rem;
    font-weight: 600;
}

/* Toolbar helpers (calendar only) */

.toolbar__left,
.toolbar__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
}

.toolbar__right {
    margin-left: auto;
    justify-content: flex-end;
}

/* Legends for status + intensity */

.legend {
    display: inline-flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    align-items: center;
}

.legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid var(--border);
}

/* Status colors */
.legend__swatch--present {
    background: rgba(34, 197, 94, 0.45);
}

.legend__swatch--absent {
    background: rgba(239, 68, 68, 0.45);
}

.legend__swatch--partial {
    background: rgba(245, 158, 11, 0.5);
}

.legend__swatch--holiday {
    background: rgba(59, 130, 246, 0.35);
}

/* Intensity colors */
.legend__swatch--heat-low {
    background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.12),
            rgba(124, 58, 237, 0.25));
}

.legend__swatch--heat-med {
    background: linear-gradient(90deg,
            var(--info-bg),
            rgba(124, 58, 237, 0.55));
}

.legend__swatch--heat-high {
    background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.3),
            rgba(124, 58, 237, 0.9));
}

/* End for calendar layout */

/* ============================= */
/* Start for monthly summary helpers */
/* ============================= */

.grid-auto-220 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-4);
}

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

/* row with label + ring + percentage */
.grid-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.col-span-all {
    grid-column: 1 / -1;
}

/* Use your existing .chip, just add a slightly denser layout for stats if needed */
.chip--stat {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--s-2);
}

/* Circular progress ring */
.progress-ring {
    --size: 80px;
    --thickness: 8px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient(var(--bg) var(--value, 40%),
            rgba(127, 127, 127, 0.15) 0);
    mask: radial-gradient(circle calc(50% - var(--thickness)),
            transparent 98%,
            black 100%);
    border: 1px solid var(--border);
}

.ring-75 {
    --value: 75%;
}

/* End for monthly summary helpers */

/* ============================= */
/* Start for accessibility helpers */
/* ============================= */

.visually-muted {
    color: var(--muted);
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* End for accessibility helpers */

/* ============================= */
/* Start for day view section    */
/* ============================= */

.dayview {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

/* Filters */

.dayview__filters .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.dayview-filters {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

@media (min-width: 768px) {
    .dayview-filters {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.dayview-filters__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    align-items: center;
}

.dayview-filters__divider {
    width: 1px;
    height: 2rem;
    background: var(--border);
    opacity: 0.7;
}

.dayview-filters__date {
    font-size: 0.95rem;
    font-weight: 600;
}

/* filter chips */

.dayview-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem var(--s-4);
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: var(--fs-14);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.dayview-chip svg {
    width: var(--icon-md);
    height: var(--icon-md);
}

.dayview-chip:hover {
    border-color: var(--accent);
    background: var(--accent-bg-hover);
}

/* End for day view section */

/* ============================= */
/* Start for new dashboard toolbar */
/* ============================= */

.dash-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
}

.dash-toolbar__left {
    margin-left: var(--s-3);
}

@media (min-width: 768px) {
    .dash-toolbar {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.dash-toolbar__title {
    font-size: var(--fs-28);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.dash-toolbar__subtitle {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-14);
    margin-bottom: var(--s-2);
}

.dash-toolbar__nav {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.dash-toolbar__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-lg);
    height: var(--avatar-lg);
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    transition: all var(--transition-normal);
    text-decoration: none;
}

.dash-toolbar__nav-btn:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--elev);
}

.dash-toolbar__nav-btn svg {
    width: 18px;
    height: 18px;
}

.dt-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.dt-input-group {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    color: var(--text);
    font-size: var(--fs-14);
    box-shadow: var(--shadow-sm-1);
}

.dt-icon {
    display: flex;
    color: var(--muted);
}

.dt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-14);
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-sm-1);
    transition: all var(--transition-normal);
}

.dt-btn:hover {
    background: var(--elev);
    border-color: var(--accent);
}

.dt-btn--primary {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.dt-btn--primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

/* End for new dashboard toolbar */

/* ============================= */
/* Start for new calendar header & stats grid */
/* ============================= */

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

/* Drawer-specific stats grid */
.drawer-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}

.drawer-stats-grid .stat-card {
    min-height: 8rem;
}

/* Full-width stat card (spans both columns) */
.stat-card--full {
    grid-column: 1 / -1;
}

/* Constrain icon sizes in stat card labels */
.stat-card__label svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    box-shadow: var(--shadow-sm-1);
}

.stat-card__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-12);
    color: var(--fg-muted);
    /*text-transform: uppercase;*/
    letter-spacing: 0.03em;
}

.stat-card__hint {
    margin-top: 0.5rem;
    font-size: var(--fs-11);
    color: var(--muted);
}

.stat-card__value {
    line-height: 1;
    font-size: var(--fs-24);
    font-weight: 700;
    color: var(--text);
}

.stat-card__trend {
    font-size: var(--fs-12);
    display: flex;
    gap: var(--s-1);
    align-items: center;
    margin-top: var(--s-2);
}

.stat-card__trend svg {
    width: 0.75rem;
    height: 0.75rem;
}

.trend--up {
    color: var(--good);
}

.trend--down {
    color: var(--danger);
}

.trend--neutral {
    color: var(--muted);
}

/* Calendar Header Refactor */
.cal-header {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

@media (min-width: 768px) {
    .cal-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.cal-title {
    font-size: var(--fs-24);
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-lg);
    height: var(--avatar-lg);
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.cal-nav-btn:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--elev);
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    background: var(--elev);
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
}

.cal-legend__item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-12);
    color: var(--muted);
    font-weight: 500;
}

.cal-legend__dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
}

/* Legend Dot Colors - use intense icon colors for visibility */
.dot--present {
    background: var(--good);
}

.dot--absent {
    background: var(--danger);
}

.dot--partial {
    background: var(--warning);
}

.dot--holiday {
    background: var(--icon-holidays);
}

.dot--weekend {
    background: var(--icon-weekend);
}

.dot--leave {
    background: var(--icon-vacation);
}

/* End for new calendar header & stats grid */

/* ====================This file is too long. I'll split this into a continuation ========================= */
/* Start for dashboard interactivity */
/* ============================= */

/* Search Input (Flex Wrapper) */
.dt-search-box {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    transition: all var(--transition-normal);
    width: var(--search-width);
}

.dt-search-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-hover);
    width: var(--search-width-focus);
}

.dt-search__input {
    border: none;
    background: transparent;
    padding: 0;
    font-size: var(--fs-14);
    color: var(--text);
    width: 100%;
    outline: none;
}

/* Date Group (Relative for overlay) */
.dt-date-group {
    position: relative;
    cursor: pointer;
}

.dt-date-group--wide {
    min-width: 220px;
    /* ~50% wider than normal */
}

.dt-date-text {
    font-weight: 500;
}

.dt-date-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 10;
}

/* Make the calendar icon cover the whole input in WebKit browsers */
.dt-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* Filter Wrapper & Panel */
.dt-filter-wrapper {
    position: relative;
}

.dash-filters {
    position: absolute;
    top: calc(100% + var(--s-2));
    right: 0;
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    padding: var(--s-3);
    min-width: 280px;
    box-shadow: var(--shadow-2);
    animation: slideDown var(--transition-normal);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.filter-label {
    font-size: var(--fs-12);
    color: var(--muted);
    font-weight: 600;
    margin-bottom: var(--s-1);
}

/* Filter Chip (Label + Checkbox) */
.filter-chip {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.4rem var(--s-3);
    border-radius: var(--r-2);
    cursor: pointer;
    font-size: var(--fs-14);
    transition: background var(--transition-fast);
}

.filter-chip:hover {
    background: var(--elev);
}

.filter-check {
    accent-color: var(--accent);
    width: var(--icon-md);
    height: var(--icon-md);
}

.filter-chip .dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
}

.dayview-chip--active {
    border-color: var(--accent);
    background: var(--accent-bg-hover);
    color: var(--accent);
}

/* Summary */

.dayview-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-3);
}

.dayview-kpi {
    padding: var(--s-3);
    border-radius: var(--r-2);
    background: var(--elev);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dayview-kpi__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-14);
    color: var(--muted);
}

.dayview-kpi__label svg {
    width: var(--icon-md);
    height: var(--icon-md);
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    opacity: 0.9;
}

.dayview-kpi__value {
    font-size: var(--fs-24);
    font-weight: 600;
    color: var(--text);
}

.dayview-kpi__hint {
    font-size: var(--fs-12);
    color: var(--muted);
}

/* warning accent only used here – no global warning token */
.dayview-kpi__value--warning {
    color: var(--warning);
}

.dayview-kpi__hint--warning {
    color: var(--warning);
    font-weight: 500;
}

.dayview-kpi--expected .dayview-kpi__label {
    color: var(--warning);
}

.dayview-kpi--expected .dayview-kpi__value {
    color: var(--warning);
}

.dayview-kpi--expected .dayview-kpi__hint {
    color: var(--warning);
    font-weight: 500;
    font-size: var(--fs-12);
}

/* Split KPI Card */
.dayview-kpi--split {
    gap: var(--s-2);
}

.dayview-kpi__split-row {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
}

.dayview-kpi__split-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dayview-kpi__split-item .dayview-kpi__value {
    font-size: var(--fs-18);
}

.dayview-kpi__split-item .dayview-kpi__hint {
    font-size: var(--fs-11);
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.dayview-kpi__split-item .dayview-kpi__hint svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--muted);
    opacity: 0.7;
}

.dayview-kpi__divider {
    width: 1px;
    height: 2.5rem;
    background: var(--border);
    opacity: 0.6;
    margin-top: 0.2rem;
}

/* Breakdown KPI Card */
.dayview-kpi--breakdown {
    gap: var(--s-2);
}

.dayview-kpi__breakdown-items {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin-top: var(--s-2);
}

.dayview-kpi__breakdown-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-12);
    color: var(--muted);
}

.dayview-kpi__breakdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.dayview-kpi__breakdown-icon svg {
    width: 14px;
    height: 14px;
}

.dayview-kpi__breakdown-label {
    flex: 1;
}

.dayview-kpi__breakdown-value {
    font-weight: 600;
    color: var(--text);
}

.dayview-kpi__value.text-danger:hover {
    background: none;
}

/* Timeline */

.dayview-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dayview-timeline::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 0.9rem;
    bottom: var(--s-2);
    width: 2px;
    background: var(--border);
}

.dayview-timeline__item {
    display: flex;
    gap: var(--s-2);
    position: relative;
    padding-bottom: var(--s-2);
}

.dayview-timeline__item:last-child {
    padding-bottom: 0;
}

.dayview-timeline__marker {
    position: relative;
    z-index: 1;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
}

.dayview-timeline__marker svg {
    width: 1.3rem;
    height: 1.3rem;
}

.dayview-timeline__item--in .dayview-timeline__marker {
    background: var(--good-bg);
    border-color: rgba(34, 197, 94, 0.4);
    color: var(--good);
}

.dayview-timeline__item--out .dayview-timeline__marker {
    background: var(--surface);
    color: var(--muted);
}

.dayview-timeline__content {
    flex: 1;
    padding-top: 0.2rem;
}

.dayview-timeline__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-2);
    margin-bottom: 0.15rem;
}

.dayview-timeline__label {
    font-size: var(--fs-14);
    font-weight: 600;
    /*text-transform: uppercase;*/
    letter-spacing: 0.06em;
}

.dayview-timeline__time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;
    font-size: var(--fs-14);
    opacity: 0.7;
}

.dayview-timeline__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--fs-12);
    color: var(--muted);
}

.dayview-timeline__meta svg {
    width: var(--fs-14);
    height: var(--fs-14);
}

/* Sessions */

.dayview-sessions {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dayview-session {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2);
    border-radius: var(--r-2);
    border: 1px solid var(--border);
    background: var(--elev);
}

.dayview-session__endpoint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 80px;
    text-align: center;
}

.dayview-session__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-pill);
    background: rgba(34, 197, 94, 0.1);
    color: var(--good);
}

.dayview-session__icon--muted {
    background: var(--surface);
    color: var(--muted);
}

.dayview-session__icon svg {
    width: var(--icon-md);
    height: var(--icon-md);
}

.dayview-session__time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;
    font-size: var(--fs-12);
    font-weight: 600;
}

.dayview-session__location {
    font-size: var(--fs-11);
    color: var(--muted);
}

.dayview-session__duration {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
    min-width: 90px;
}

.dayview-session__duration svg {
    width: var(--icon-md);
    height: var(--icon-md);
    opacity: 0.7;
}

.dayview-session__duration span {
    display: inline-block;
    padding: 0.1rem var(--s-3);
    border-radius: var(--r-pill);
    font-size: var(--fs-12);
    font-weight: 500;
    background: var(--surface);
    color: var(--text);
    opacity: 0.9;
}

/* End for dashboard interactivity */

/* ============================= */
/* Start for department board view */
/* ============================= */

.department-board {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    padding-bottom: var(--s-4);
    height: 100%;
    align-items: flex-start;
    scroll-snap-type: x mandatory;
    padding-right: var(--s-4);
}

.department-column {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    background: var(--elev);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    max-height: 100%;
    box-shadow: var(--shadow-1);
    scroll-snap-align: start;
}

.department-column__header {
    padding: var(--s-3);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    display: flex;
    align-items: center;
    background: inherit;
    border-radius: var(--r-3) var(--r-3) 0 0;
    z-index: 10;
}

.department-column__body {
    padding: var(--s-3);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    scrollbar-width: thin;
    scrollbar-color: var(--muted) transparent;
}

.department-column__body::-webkit-scrollbar {
    width: 6px;
}

.department-column__body::-webkit-scrollbar-thumb {
    background-color: var(--muted);
    border-radius: var(--r-1);
}


.user-card--compact {
    padding: var(--s-2);
    gap: var(--s-2);
    align-items: flex-start;
}

.user-card--compact .user-card__avatar {
    width: var(--avatar-xl);
    height: var(--avatar-xl);
    margin-top: 2px;
}

.user-card--compact .user-card__name {
    font-size: var(--fs-14);
    margin-bottom: 0.15rem;
}

.user-card__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.user-card__pill {
    font-size: var(--fs-11);
    padding: 1px 6px;
    border-radius: var(--r-1);
    background: var(--muted-bg);
    color: var(--muted);
    border: 1px solid var(--border);
}

.user-card--compact .user-card__meta {
    margin-top: 0.1rem;
    font-size: var(--fs-11);
}

/* End for department board view */

/* ============================= */
/* Start specific for department calendar */
/* ============================= */

.department-grid,
.cal__dow.department-grid {
    grid-template-columns: repeat(8, 1fr) !important;
}

@media (max-width: 1130px) {
    .department-grid {
        grid-template-columns: 1fr !important;
    }

    .cal__dow.department-grid {
        display: none;
    }

    .department-grid .cal__summary {
        grid-column: 1 / -1;
        margin-top: var(--s-2);
        margin-bottom: var(--s-4);
    }

    .cal__day-name-mobile {
        display: inline-block !important;
    }
}

.user-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: var(--s-2);
    width: 100%;
}

.user-mini-card {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    /* Reduced gap */
    padding: 0.25rem var(--s-1);
    /* Reduced padding */
    border-radius: var(--r-2);
    background: var(--surface);
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm-1);
    font-size: var(--fs-12);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.user-mini-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-1);
    border-color: var(--border);
}

.user-mini-card__avatar {
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
}

@media (max-width: 1400px) {
    .department-grid .user-mini-card__avatar {
        display: none;
    }
}

.user-mini-card__info {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.1;
    overflow: hidden;
    min-width: 0;
}

.user-mini-card__info .name {
    font-weight: 600;
    color: var(--text);
    /* Allow wrapping */
    white-space: normal;
    word-wrap: break-word;
    font-size: var(--fs-12);
    /* Reduced from 14 */
    margin-bottom: 1px;
}

.user-mini-card__info .hours {
    color: var(--muted);
    font-size: var(--fs-10);
    /* Reduced from 11 */
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Timeline indicator icon - shows when user has timeline data */
.user-mini-card__timeline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    opacity: 0.4;
    margin-left: auto;
    padding: 2px;
    transition: opacity var(--transition-fast);
}

.user-mini-card.has-timeline:hover .user-mini-card__timeline-icon {
    opacity: 1;
}

/* Status Indicators (Left Border) */

.status--entry,
.status--present {
    border-left: 3px solid var(--good);
}

.status--exit,
.status--home-office {
    border-left: 3px solid var(--warning);
}

.status--sick {
    border-left: 3px solid var(--danger);
}

.status--vacation {
    border-left: 3px solid var(--vacation);
}

.status--off {
    border-left: 3px solid var(--muted);
    opacity: 0.7;
}

.status--leave {
    border-left: 3px solid var(--accent-2);
}

/* Employees list layout using mini cards */
.employee-grid {
    /* reuse .user-grid base behavior */
    width: 100%;
}

/* Make mini-card work as row with CTA on the right */
.user-mini-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s-2);
    padding: 0.5rem var(--s-3);
    border-radius: var(--r-2);
    background: var(--surface);
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm-1);
    font-size: var(--fs-12);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.user-mini-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-1);
    border-color: var(--border);
}

.user-mini-card__avatar {
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
}

@media (max-width: 1400px) {
    .department-grid .user-mini-card__avatar {
        display: none;
    }
}

.user-mini-card__info {
    flex: 1;
    /* take all remaining space */
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.3;
    overflow: hidden;
    min-width: 0;
}

.user-mini-card__info .name {
    font-weight: 600;
    color: var(--text);
    white-space: normal;
    word-wrap: break-word;
    font-size: var(--fs-14);
    margin-bottom: 0;
}

.user-mini-card__info .small {
    font-size: var(--fs-12);
}

.user-mini-card__cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

/* Small button variant (reusing your design tokens) */
.btn.btn--sm {
    padding: 0.35rem 0.6rem;
    font-size: var(--fs-12);
    box-shadow: var(--shadow-sm-1);
}

.btn.btn--sm svg {
    width: 14px;
    height: 14px;
}

/* End specific for department calendar */

/* ============================= */
/* Start for modal               */
/* ============================= */

.cal-title {
    flex: 0 0 auto;
    min-width: 180px;
    text-align: center;
    font-size: var(--fs-18);
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.show-more-btn {
    width: 100%;
    padding: 0.35rem;
    background: rgba(0, 0, 0, 0.03);
    border: 1px dashed var(--border);
    border-radius: var(--r-2);
    font-size: var(--fs-11);
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    text-align: center;
    transition: all var(--transition-normal);
}

.show-more-btn:hover {
    background: var(--elev);
    color: var(--text);
    border-color: var(--accent);
}

/* ============================= */
/* Timeline Modal                */
/* ============================= */



.modal-content {
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    animation: modalIn var(--transition-normal);
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* End for modal */

/* ============================= */
/* Start for drawer component    */
/* ============================= */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    z-index: 200;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.drawer-overlay.is-open {
    opacity: 1;
}

.drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-2);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-slow) cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-overlay.is-open .drawer {
    transform: translateX(0);
}

.drawer__header {
    padding: var(--s-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.drawer__title {
    margin: 0;
    font-size: var(--fs-18);
}

.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-4) var(--s-6);
}

.drawer__footer {
    padding: var(--s-4);
    border-top: 1px solid var(--border);
    background: var(--elev);
}

.btn-icon {
    background: transparent;
    border: none;
    padding: var(--s-1);
    cursor: pointer;
    color: var(--muted);
    border-radius: var(--r-1);
}

.btn-icon:hover {
    background: var(--elev);
    color: var(--text);
}

.divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--s-4) 0;
}

.section-title {
    font-size: var(--fs-14);
    /*text-transform: uppercase;*/
    color: var(--muted);
    letter-spacing: 0.05em;
    margin-bottom: var(--s-3);
}

/* Activity Widget - Removed duplicate definition, use .activity-widget--drawer if needed */

/* Settings Toggles */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.setting-label {
    font-weight: 500;
    font-size: var(--fs-14);
}

.setting-desc {
    font-size: var(--fs-12);
    color: var(--muted);
}

/* Switch Component */
.switch {
    position: relative;
    display: inline-block;
    width: var(--switch-width);
    height: var(--switch-height);
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border);
    transition: var(--transition-slow);
    border-radius: var(--switch-height);
}

.slider:before {
    position: absolute;
    content: "";
    height: var(--slider-size);
    width: var(--slider-size);
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: var(--transition-slow);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
    background-color: var(--accent);
}

input:checked+.slider:before {
    transform: translateX(var(--slider-size));
}

/* Small switch variant */
.switch--small {
    width: 32px;
    height: 18px;
}

.switch--small .slider {
    border-radius: 18px;
}

.switch--small .slider:before {
    height: 14px;
    width: 14px;
}

.switch--small input:checked+.slider:before {
    transform: translateX(14px);
}

/* End for drawer component */

/* ============================= */
/* Access / Provider Cards                */
/* ============================= */

.card-id-code {
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-12);
    padding: 2px 6px;
    background: var(--surface-muted, var(--bg));
    border-radius: var(--r-1);
    color: var(--muted);
}

.card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.employee-avatar--unassigned {
    display: flex;
    align-items: center;
    justify-content: center;
}

.employee-avatar--unassigned svg {
    stroke: white;
}

.card-info__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-bottom: 4px;
}

.badge--subtle {
    background: var(--accent-bg);
    color: var(--accent);
}

.badge--info {
    background: rgba(8, 145, 178, 0.15);
    color: #0891b2;
}

.badge--icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge--icon svg {
    flex-shrink: 0;
}

.card-info__id {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.card-garage-icon {
    display: inline-flex;
    align-items: center;
    color: #0891b2;
}

.card-info__data {
    margin-top: 4px;
}

.card-data-json {
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-11);
    padding: 2px 4px;
    background: var(--surface-muted, var(--bg));
    border-radius: var(--r-1);
    color: var(--muted);
    word-break: break-all;
}

.card-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.card-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 38px;
    height: 20px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    /* Clear gray for off state */
    transition: .3s;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input:checked+.slider {
    background-color: var(--info-vibrant);
    /* Vivid blue for on state */
}

input:focus+.slider {
    outline: 2px solid var(--primary-light, #93c5fd);
    outline-offset: 2px;
}

input:checked+.slider:before {
    transform: translateX(18px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* ============================= */
/* Employee List & Table Components */
/* ============================= */

/* Employee Directory Container */
.employee-directory {
    padding: var(--s-6) 0;
}

/* Employee Stats Cards */
.employee-stats {
    display: flex;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
    flex-wrap: wrap;
}

/* Stat card flex modifier for dashboard grids */
.stat-card--flex {
    flex: 1;
    min-width: 150px;
}

.stat-value {
    font-size: var(--fs-28);
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}

.stat-label {
    font-size: var(--fs-14);
    color: var(--muted);
    margin-top: var(--s-1);
}

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

.employee-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: var(--r-2);
    overflow: hidden;
    box-shadow: var(--shadow-sm-1);
}

.employee-table th,
.employee-table td {
    padding: var(--s-4);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.employee-table th {
    background: var(--bg);
    font-weight: 600;
    font-size: var(--fs-14);
    /*text-transform: uppercase;*/
    letter-spacing: 0.5px;
    color: var(--muted);
}

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

.employee-table tbody tr:hover {
    background: var(--accent-bg-hover);
}

/* Provider Cards Table - Sticky Headers */
.provider-cards-table,
.summary-table,
.data-table--yearly,
.report-results-table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible;
    /* Override employee-table's overflow:hidden to enable sticky */
}

.provider-cards-table th,
.summary-table th,
.data-table--yearly th,
.report-results-table th {
    position: sticky;
    top: 81px;
    z-index: 20;
    background: var(--surface);
    box-shadow: 1px 1px 2px var(--border);
    border-bottom: 1px solid var(--border);
}

/* Employee Name Cell */
.employee-name {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.employee-avatar {
    width: var(--avatar-xl);
    height: var(--avatar-xl);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--fs-14);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

/* Avatar Image - fills parent container with proper scaling */
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
}

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

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

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.35rem var(--s-3);
    border-radius: var(--r-pill);
    font-size: var(--fs-13);
    font-weight: 500;
}

.status-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    display: inline-block;
}

.status-active {
    background: var(--good-bg);
    color: var(--good);
}

.status-active .status-dot {
    background: var(--success-vibrant);
}

.status-on-leave {
    background: var(--warning-bg);
    color: #9a3412;
}

.status-on-leave .status-dot {
    background: var(--warning);
}

.status-inactive {
    background: var(--danger-bg);
    color: var(--danger);
}

.status-inactive .status-dot {
    background: var(--danger-vibrant);
}

/* Department Badge */
.department-badge {
    display: inline-block;
    padding: 0.35rem var(--s-3);
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: var(--r-pill);
    font-size: var(--fs-13);
    font-weight: 500;
}

/* Presence Indicator */
.presence-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-14);
}

.presence-indicator::before {
    content: '';
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    display: inline-block;
}

.presence-in::before {
    background: var(--success-vibrant);
}

.presence-out::before {
    background: var(--danger-vibrant);
}

.presence-break::before {
    background: var(--warning-vibrant);
}

/* Action Buttons */
.actions {
    white-space: nowrap;
}

.action-buttons {
    display: flex;
    gap: var(--s-2);
    justify-content: flex-end;
}

.btn-action {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    width: var(--icon-xl);
    height: var(--icon-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted);
    transition: all var(--transition-normal);
}

.btn-action:hover {
    background: var(--accent-bg-hover);
    color: var(--accent);
    border-color: var(--accent);
}

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

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--surface);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-1);
    min-width: 200px;
    z-index: 1000;
    margin-top: var(--s-2);
    border: 1px solid var(--border);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    color: var(--text);
    text-decoration: none;
    transition: all var(--transition-normal);
    font-size: var(--fs-14);
}

.dropdown-item svg {
    width: var(--icon-md);
    height: var(--icon-md);
    flex-shrink: 0;
}

.dropdown-item:hover {
    background: var(--accent-bg-hover);
    color: var(--accent);
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: var(--s-1) 0;
}

.text-danger {
    color: var(--danger);
}

.text-danger:hover {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.1);
}

/* Search and Filters */
.filters-container {
    padding: var(--s-4) var(--s-6);
}

.filters-row {
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
    align-items: center;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 240px;
}

.search-icon {
    position: absolute;
    left: var(--s-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 0.625rem var(--s-4) 0.625rem 2.5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-15);
    transition: all var(--transition-normal);
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--info-bg);
}

.filter-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: auto;
}

.filter-group label {
    margin-bottom: 0.375rem;
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--muted);
}

.filter-select {
    padding: 0.625rem 2.5rem 0.625rem var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right var(--s-3) center;
    background-size: var(--icon-md);
    color: var(--text);
    font-size: var(--fs-15);
    appearance: none;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--info-bg);
}

/* Date Range Group - inline date inputs with separator */
.date-range-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-2);
}

.date-range-separator {
    color: var(--muted);
    font-weight: 500;
    font-size: var(--fs-16);
}

/* Simple Table Styles (for attendance) */
.employee-name-simple {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.employee-avatar-simple {
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--fs-12);
    flex-shrink: 0;
}

.department-badge-simple {
    display: inline-block;
    padding: var(--s-1) var(--s-2);
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: var(--r-1);
    font-size: var(--fs-12);
    font-weight: 500;
}

/* Badge Styles (for simple table) */
.badge {
    display: inline-block;
    padding: var(--s-1) var(--s-2);
    font-size: var(--fs-12);
    font-weight: 500;
    border-radius: var(--r-1);
    /*text-transform: uppercase;*/
    letter-spacing: 0.5px;
}

.badge--ok {
    background: var(--good-bg);
    color: var(--good);
}

.badge--warning {
    background: var(--warning-bg);
    color: #d97706;
}

.badge--bad {
    background: var(--danger-bg);
    color: var(--danger);
}

/* Alert Components - for flash messages */
.alert {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-2);
    margin-bottom: var(--s-4);
    font-size: var(--fs-14);
    font-weight: 500;
    border: 1px solid transparent;
}

.alert--error {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: rgba(185, 28, 28, 0.3);
}

.alert--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.3);
}

.alert--success {
    background: var(--good-bg);
    color: var(--good);
    border-color: rgba(22, 163, 74, 0.3);
}

.alert--info {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: rgba(37, 99, 235, 0.3);
}

/* Status Row Highlights - subtle backgrounds at ~20% opacity */
.bg-holiday {
    background: rgba(245, 158, 11, var(--bg-intensity));
}

.bg-weekend {
    background: rgba(234, 88, 12, var(--bg-intensity));
}

.bg-leave {
    background: rgba(8, 145, 178, var(--bg-intensity));
}

/* Leave Type Specific Background Colors - subtle */
.bg-leave-sick,
.bg-leave-sick-leave,
.bg-leave-sick_leave {
    background: rgba(214, 51, 132, var(--bg-intensity));
}

.bg-leave-medical,
.bg-leave-medical-leave,
.bg-leave-medical_leave {
    background: rgba(124, 58, 237, var(--bg-intensity));
}

.bg-leave-special,
.bg-leave-special-leave,
.bg-leave-special_leave {
    background: rgba(202, 138, 4, var(--bg-intensity));
}

.bg-leave-vacation,
.bg-leave-annual,
.bg-leave-annual-leave,
.bg-leave-annual_leave {
    background: rgba(8, 145, 178, var(--bg-intensity));
}

.bg-leave-wfh,
.bg-leave-work-from-home,
.bg-leave-work_from_home {
    background: rgba(22, 163, 74, var(--bg-intensity));
}

.bg-leave-delegation,
.bg-leave-delegatie,
.bg-leave-business-trip {
    background: rgba(3, 105, 161, var(--bg-intensity));
}

.bg-leave-teambuilding,
.bg-leave-team-building,
.bg-leave-team_building {
    background: rgba(5, 150, 105, var(--bg-intensity));
}

.bg-light {
    background: var(--muted-bg);
}

/* Toggle Switch for Rich/Minimal View */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    cursor: pointer;
    user-select: none;
}

.toggle-switch input {
    display: none;
}

.toggle-switch__slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--muted-bg);
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.toggle-switch__slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--muted);
    border-radius: 50%;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.toggle-switch input:checked+.toggle-switch__slider {
    background: var(--accent-bg);
    border-color: var(--accent);
}

.toggle-switch input:checked+.toggle-switch__slider::before {
    transform: translateX(16px);
    background: var(--accent);
}

.toggle-switch__label {
    font-size: var(--fs-12);
    color: var(--muted);
    font-weight: 500;
}

/* Minimal View Mode - hides icons and uses grey backgrounds */
.minimal-view .badge-icon {
    display: none !important;
}

.minimal-view .bg-holiday,
.minimal-view .bg-weekend,
.minimal-view .bg-leave,
.minimal-view .bg-leave-sick,
.minimal-view .bg-leave-sick-leave,
.minimal-view .bg-leave-sick_leave,
.minimal-view .bg-leave-medical,
.minimal-view .bg-leave-medical-leave,
.minimal-view .bg-leave-medical_leave,
.minimal-view .bg-leave-special,
.minimal-view .bg-leave-special-leave,
.minimal-view .bg-leave-special_leave,
.minimal-view .bg-leave-vacation,
.minimal-view .bg-leave-annual,
.minimal-view .bg-leave-annual-leave,
.minimal-view .bg-leave-annual_leave,
.minimal-view .bg-leave-wfh,
.minimal-view .bg-leave-work-from-home,
.minimal-view .bg-leave-work_from_home,
.minimal-view .bg-leave-delegation,
.minimal-view .bg-leave-delegatie,
.minimal-view .bg-leave-business-trip,
.minimal-view .bg-leave-teambuilding,
.minimal-view .bg-leave-team-building,
.minimal-view .bg-leave-team_building {
    background: var(--muted-bg) !important;
}

/* Action Buttons (Simple) */
.action-buttons-simple {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* ============================= */
/* Leave/Action Modals           */
/* ============================= */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow-y: auto;
    padding: var(--s-8) 0;
}

.modal.modal-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.modal-content {
    background: var(--surface);
    border-radius: var(--r-2);
    width: 100%;
    max-width: 600px;
    margin: var(--s-8);
    box-shadow: var(--shadow-2);
    position: relative;
}

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

.modal-header h3 {
    margin: 0;
    font-size: var(--fs-24);
    font-weight: 600;
}

.close-modal {
    background: none;
    border: none;
    font-size: var(--fs-24);
    cursor: pointer;
    color: var(--muted);
    padding: var(--s-2);
    line-height: 1;
}

.close-modal:hover {
    color: var(--text);
}

.modal-body {
    padding: var(--s-6);
}

.modal-footer {
    padding: var(--s-4) var(--s-6);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--s-3);
}

/* Responsive adjustments for employee list */
@media (max-width: 992px) {
    .filters-row {
        flex-direction: column;
    }

    .search-box,
    .filter-group {
        width: 100%;
    }

    .employee-table th,
    .employee-table td {
        padding: 0.625rem;
        font-size: var(--fs-14);
    }
}

@media (min-width: 761px) and (max-width: 1320px) {
    .table {
        font-size: var(--fs-14);
    }

    .table th,
    .table td {
        padding: var(--s-2);
    }

    .department-badge-simple {
        padding: 0.125rem 0.375rem;
        font-size: var(--fs-11);
    }

    .employee-avatar-simple {
        width: var(--avatar-sm);
        height: var(--avatar-sm);
        font-size: var(--fs-10);
    }

    .btn-action {
        width: var(--avatar-md);
        height: var(--avatar-md);
    }

    .btn-action svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 760px) {
    .action-buttons-simple {
        flex-direction: column;
        gap: var(--s-1);
        align-items: center;
    }

    .btn-action {
        width: var(--avatar-sm);
        height: var(--avatar-sm);
    }

    .btn-action svg {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 1320px) {
    .action-buttons-simple {
        gap: 0.125rem;
    }
}

/* End Employee List & Table Components */

/* Form Styles for Employee Modals */
.form-group {
    margin-bottom: var(--s-5);
}

.form-row {
    display: flex;
    gap: var(--s-4);
    margin: 0 -var(--s-2);
}

.form-row .form-group {
    flex: 1;
    margin: 0 var(--s-2);
}

.form-control {
    width: 100%;
    padding: 0.625rem var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-15);
    transition: border-color var(--transition-normal);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--info-bg);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-3) center;
    background-size: var(--icon-md);
    padding-right: 2.5rem;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

/* Employee Details View Styles */
.employee-details {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}

.employee-header {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s-2);
}

.employee-header .employee-avatar {
    width: 64px;
    height: 64px;
    font-size: var(--fs-24);
}

.employee-info h2 {
    margin: 0;
    font-size: var(--fs-24);
    font-weight: 600;
}

.details-section {
    margin-bottom: var(--s-4);
}

.details-section h4 {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-16);
    color: var(--muted);
    /*text-transform: uppercase;*/
    letter-spacing: 0.5px;
    font-weight: 600;
}

.detail-row {
    display: flex;
    margin-bottom: var(--s-3);
    font-size: var(--fs-15);
}

.detail-label {
    font-weight: 500;
    color: var(--muted);
    min-width: 120px;
}

.details-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
}


/* ============================= */
/* Start for Modals              */
/* ============================= */
/* ============================= */
/* Settings Modal                */
/* ============================= */

/** todo: fix what we find below **/


.modal {
    background: var(--surface);
    border-radius: var(--s-4);
    box-shadow: var(--shadow-2);
    width: 100%;
    max-width: 500px;
    transform: translateY(20px);
    transition: all var(--transition-normal);
    border: 1px solid var(--border);
}

.modal-overlay.active .modal {
    transform: translateY(0);
}

.modal__header {
    padding: var(--s-4);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal__title {
    margin: 0;
    font-size: var(--fs-18);
    font-weight: 600;
}

.modal__close {
    background: none;
    border: none;
    font-size: var(--fs-24);
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal__body {
    padding: var(--s-4);
}

.modal__footer {
    padding: var(--s-4);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--s-2);
}

/* ============================= */
/* Modal Fixes & Improvements    */
/* ============================= */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.2s ease, visibility 0.2s ease;
    backdrop-filter: blur(4px);
}

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

/* Override the line 3844 .modal styles with higher specificity */
.modal-overlay .modal {
    /* Reset problematic inherited styles */
    display: block;
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    padding: 0;

    /* Actual modal styling */
    background: var(--surface);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--r-3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.modal-overlay.active .modal {
    transform: scale(1);
}

/* Dark mode specific */
body.theme-dark .modal-overlay .modal {
    background: var(--elev);
    border-color: var(--border);
}

/* Modal compact form styling */
.modal-overlay .modal .field {
    margin-bottom: var(--s-3);
}

.modal-overlay .modal .field--inline {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.modal-overlay .modal .field--inline label {
    flex: 0 0 auto;
    min-width: 90px;
    margin-bottom: 0;
    font-size: var(--fs-14);
    white-space: nowrap;
}

.modal-overlay .modal .field--inline input,
.modal-overlay .modal .field--inline select,
.modal-overlay .modal .field--inline textarea {
    flex: 1;
    min-width: 0;
}

.modal-overlay .modal input,
.modal-overlay .modal select,
.modal-overlay .modal textarea {
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-14);
}

.modal-overlay .modal .modal__body {
    padding: var(--s-4);
}

.modal-overlay .modal .modal__footer {
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--s-2);
}

/* Add support for new input types */
input[type="datetime-local"],
input[type="month"] {
    display: block;
    width: 100%;
    padding: var(--s-3) var(--s-3);
    border-radius: var(--r-2);
    border: 1px solid var(--border);
    background: var(--elev);
    color: var(--text);
    font-family: inherit;
}

input[type="datetime-local"]:focus,
input[type="month"]:focus {
    border-color: var(--ring);
    outline: none;
    box-shadow: 0 0 0 1px var(--ring);
}

/** on employee details page **/
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}

.info-item label {
    font-size: var(--fs-12);
    color: var(--muted);
    display: block;
    margin-bottom: var(--s-1);
}

.info-item div {
    font-weight: 500;
}

.span-2 {
    grid-column: span 2;
}

/* ============================= */
/* Reports Page Filters          */
/* ============================= */

.filters-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    align-items: center;
}

.filter-row .filter-group {
    flex: 0 1 auto;
    min-width: 140px;
}

.filter-row .date-range-group {
    flex: 0 1 auto;
}

.filter-actions {
    flex: 0 0 auto;
}

.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
}

.quick-label {
    font-size: var(--fs-12);
    color: var(--muted);
    font-weight: 500;
}

.btn--outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.btn--outline:hover {
    border-color: var(--accent);
    background: var(--accent-bg-hover);
    color: var(--accent);
}

/* Margin utilities */
.mb-4 {
    margin-bottom: var(--s-4);
}

.mb-2 {
    margin-bottom: var(--s-2);
}

.mt-4 {
    margin-top: var(--s-4);
}

.mb-8 {
    margin-bottom: var(--s-8);
}

.mt-8 {
    margin-top: var(--s-8);
}

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

/* Display block utility */
.d-block {
    display: block;
}

/* ============================= */
/* View Toggle Component         */
/* ============================= */

.view-toggle {
    display: flex;
    gap: var(--s-1);
}

.view-toggle__btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    width: var(--icon-xl);
    height: var(--icon-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted);
    transition: all var(--transition-normal);
}

.view-toggle__btn:hover {
    background: var(--accent-bg-hover);
    color: var(--accent);
    border-color: var(--accent);
}

.view-toggle__btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.view-toggle__btn svg {
    display: block;
}

/* ============================= */
/* Admin Section Header & Group  */
/* ============================= */

.nav__admin-group {
    background: var(--bg);
    border-radius: var(--r-2);
    padding: var(--s-2);
    margin-top: var(--s-4);
    border: 1px solid var(--border);
}

.nav__section-subheader {
    font-size: var(--fs-11);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--muted);
}

.nav__section-header {
    font-size: var(--fs-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    padding: var(--s-2) var(--s-3);
    background: var(--accent-bg);
    border-radius: var(--r-1);
    margin: 0 0 var(--s-2) 0;
}

/* ============================= */
/* Manager Filter Buttons        */
/* ============================= */

.manager-filters {
    display: flex;
    gap: var(--s-2);
    margin-left: var(--s-4);
}

.manager-filters .filter-btn {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-12);
    font-weight: 500;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    white-space: nowrap;
}

.manager-filters .filter-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-bg-hover);
}

.manager-filters .filter-btn.active {
    color: white;
    background: var(--accent);
    border-color: var(--accent);
}

.manager-filters .filter-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.manager-filters .filter-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .manager-filters {
        margin-left: var(--s-2);
    }

    .manager-filters .filter-btn span {
        display: none;
    }

    .manager-filters .filter-btn {
        padding: var(--s-2);
    }
}

/* Restructured Sidebar Components */
.nav__item--coming-soon {
    opacity: 0.6;
    cursor: not-allowed;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__item--coming-soon:hover {
    color: var(--muted) !important;
    background: transparent !important;
}

.badge--coming-soon {
    font-size: 0.6rem;
    background: var(--muted-bg);
    color: var(--muted);
    padding: 2px 6px;
    border-radius: var(--r-pill);
    margin-left: auto;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.nav__divider {
    border-top: 1px solid var(--border);
    margin: var(--s-2) 0;
}

/* ============================= */
/* Tabs Component                */
/* ============================= */

.tabs {
    display: flex;
    gap: var(--s-1);
    margin-bottom: var(--s-4);
}

.tabs__btn {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: transparent;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--r-2) var(--r-2) 0 0;
    font-size: var(--fs-14);
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
}

.tabs__btn:hover {
    color: var(--accent);
    background: var(--accent-bg-hover);
}

.tabs__btn.active {
    background: var(--surface);
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

.tabs__btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--surface);
}

.tabs__btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tabs__actions {
    margin-left: auto;
    display: flex;
    gap: var(--s-2);
}

.tabs__actions .btn-group {
    gap: var(--s-2);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Leave type cell with icon */
.leave-type-cell {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

/* ============================= */
/* Calendar Loading Overlay      */
/* ============================= */

.cal-loader {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-3);
    transition: opacity 0.3s ease;
}

body.theme-dark .cal-loader {
    background: rgba(17, 24, 39, 0.6);
}

.cal-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Modal Loading Overlay */
.modal-loading-overlay {
    position: absolute;
    inset: 0;
    background: var(--surface);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

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

/* ============================= */
/* Error Pages                   */
/* ============================= */

.error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--s-4);
}

.error-card {
    width: 100%;
    max-width: 500px;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: var(--s-8) var(--s-5);
}

.error-code {
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--border);
    opacity: 0.5;
    margin-bottom: var(--s-2);
    background: linear-gradient(180deg, var(--border), transparent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}

body.theme-dark .error-code {
    background: linear-gradient(180deg, var(--muted), transparent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.2;
}

.error-title {
    font-size: var(--fs-24);
    font-weight: 700;
    margin-bottom: var(--s-2);
    color: var(--text);
}

.error-message {
    font-size: var(--fs-16);
    color: var(--muted);
    margin-bottom: var(--s-6);
    line-height: 1.6;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.error-actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
}

.error-icon-box {
    margin-bottom: var(--s-4);
    display: inline-flex;
    padding: var(--s-3);
    background: var(--surface);
    border-radius: 50%;
    box-shadow: var(--shadow-sm-1);
    border: 1px solid var(--border);
    color: var(--accent);
}

.error-icon-box svg {
    width: 32px;
    height: 32px;
}

/* ============================= */
/* DayView Sessions - Breaks     */
/* ============================= */

.dayview-break {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    justify-content: center;
    opacity: 0.7;
    margin: var(--s-1) 0;
}

.dayview-break__line {
    flex: 1;
    height: 1px;
    background: var(--border);
    max-width: 60px;
}

.dayview-break__content {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0 var(--s-3);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    border: none;
    font-size: var(--fs-12);
    font-weight: 500;
}

.dayview-break__icon {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.dayview-break__time {
    color: var(--text-secondary);
}

body.theme-dark .dayview-break__content {
    background: var(--bg-surface-2);
    border-color: var(--border);
}

.mirror-x {
    transform: scaleX(-1);
    display: inline-block;
}

.dayview-break__icon.coffee svg {
    width: 14px;
    height: 14px;
    display: block;
}

.dayview-break__icon svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* ============================= */
/* Timeline License Plate        */
/* ============================= */

.timeline__plate {
    display: inline-block;
    padding: 1px 6px;
    background: white;
    color: #1a1a1a;
    border: 1px solid #333;
    border-left: 6px solid #003399;
    /* EU Blue */
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 700;
    font-size: var(--fs-12);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: var(--s-2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ============================= */
/* CSRF Error Modal              */
/* ============================= */

.csrf-modal {
    max-width: 400px;
    text-align: center;
}

.csrf-modal__icon {
    color: var(--warning);
    margin-bottom: var(--s-4);
}

.csrf-modal__title {
    font-size: var(--fs-20);
    font-weight: 600;
    margin: 0 0 var(--s-3);
    color: var(--text);
}

.csrf-modal__message {
    color: var(--muted);
    margin: 0 0 var(--s-4);
    font-size: var(--fs-14);
    line-height: 1.5;
}

.csrf-modal__countdown {
    font-size: var(--fs-12);
    color: var(--muted);
    margin: 0 0 var(--s-4);
}

.csrf-modal__countdown span {
    font-weight: 600;
    color: var(--primary);
}

.csrf-modal__actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
}

.csrf-modal__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}

/* ============================= */
/* Confirm Modal                 */
/* ============================= */

.confirm-modal {
    max-width: 400px;
    text-align: center;
}

.confirm-modal__icon {
    margin-bottom: var(--s-4);
    color: var(--danger);
}

.confirm-modal__icon svg {
    display: block;
    margin: 0 auto;
}

.confirm-modal__title {
    font-size: var(--fs-20);
    font-weight: 600;
    margin: 0 0 var(--s-3);
    color: var(--text);
}

.confirm-modal__message {
    color: var(--muted);
    margin: 0 0 var(--s-5);
    font-size: var(--fs-14);
    line-height: 1.5;
}

.confirm-modal__actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
}

.confirm-modal__actions .btn {
    min-width: 100px;
}

/* ============================= */
/* Reports Page Styles           */
/* ============================= */

/* Tabs Navigation */
.tabs-nav {
    display: flex;
    gap: var(--s-1);
    padding: var(--s-2);
}

.tabs-nav__item {
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-2);
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.15s ease;
}

.tabs-nav__item:hover {
    background: var(--accent-bg);
    color: var(--text);
    text-decoration: none;
}

.tabs-nav__item--active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: white;
}

.tabs-nav__item--active:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: white;
}

/* Filter Styling */
.filter-label {
    display: block;
    font-size: var(--fs-12);
    color: var(--muted);
    margin-bottom: var(--s-1);
}

.filter-input {
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    background: var(--elev);
    color: var(--text);
    font-size: var(--fs-14);
}

/* Stats Grid */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
}

/* Note: .stat-card base styles are defined at line ~2627 */

.stat-card__label {
    font-size: var(--fs-12);
    color: var(--muted);
    text-transform: uppercase;
    margin-top: var(--s-1);
}

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: var(--s-3);
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.data-table th {
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
}

.data-table tr:hover {
    background: var(--accent-bg-hover);
}

/* Details popup */
details summary {
    cursor: pointer;
    list-style: none;
}

details summary::-webkit-details-marker {
    display: none;
}

.details-popup {
    position: absolute;
    right: 0;
    z-index: 10;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-2);
    padding: var(--s-2);
    max-height: 200px;
    overflow-y: auto;
    min-width: 280px;
}

.details-row {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2);
    font-size: var(--fs-12);
    border-bottom: 1px solid var(--border);
}

.details-row:last-child {
    border-bottom: none;
}

.details-row--warning {
    background: var(--warning-bg);
}

.details-row--info {
    background: var(--accent-bg-hover);
}

/* Text utilities */
.text-warning {
    color: var(--warning);
}

.text-info {
    color: var(--accent);
}

.mb-4 {
    margin-bottom: var(--s-4);
}

@media (max-width: 768px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters-row {
        flex-direction: column;
    }
}

/* Stat Card Color Variants */
.stat-card--leave .stat-card__value {
    color: var(--leave);
}

.stat-card--wfh .stat-card__value {
    color: var(--wfh);
}

.stat-card--warning .stat-card__value {
    color: var(--warning);
}

.stat-card--info .stat-card__value {
    color: var(--accent);
}

/* Data Table Striped Variant */
.data-table--striped tbody tr:nth-child(even) {
    background: var(--accent-bg-hover);
}

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

.data-table th {
    background: var(--bg);
}

/* Badge Variants for Reports */
.badge--leave {
    background: rgba(139, 92, 246, 0.2);
    color: var(--leave);
}

.badge--wfh {
    background: rgba(16, 185, 129, 0.2);
    color: var(--wfh);
}

.badge--warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.badge--info {
    background: var(--accent-bg);
    color: var(--accent);
}

/* Note: code element styles moved to base elements section */

.text-muted {
    color: var(--muted);
    font-size: var(--fs-12);
}

/* ========================================================================== */
/* Shared Components (Filters, Search, Buttons)                               */
/* ========================================================================== */

.filters-container {
    padding: var(--s-1) 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.filters-row {
    display: flex;
    gap: var(--s-3);
    align-items: center;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box svg {
    position: absolute;
    left: 12px;
    color: var(--muted);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

.search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    background-color: var(--elev);
    color: var(--text);
    font-size: var(--fs-14);
    transition: var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-hover);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    background: var(--elev);
    color: var(--text);
    font-size: var(--fs-14);
    cursor: pointer;
    min-width: 150px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    cursor: pointer;
    font-size: var(--fs-14);
    white-space: nowrap;
}

/* Calendar Navigation */
.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3);
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.cal-title {
    font-size: var(--fs-18);
    font-weight: 600;
    margin: 0;
}

.cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-2);
    border: 1px solid var(--border);
    background: var(--elev);
    color: var(--text);
    text-decoration: none;
    transition: var(--transition-fast);
}

.cal-nav-btn:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.cal-nav-btn svg {
    width: 16px;
    height: 16px;
}

/* Legend */
.cal-legend {
    display: flex;
    gap: var(--s-4);
    align-items: center;
    flex-wrap: wrap;
}

.cal-legend__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-12);
    color: var(--muted);
}

.cal-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot--present {
    background: var(--good);
}

.dot--break,
.dot--home-office {
    background: var(--warning-vibrant);
}

.dot--sick {
    background: var(--danger-soft);
}

/* ============================= */
/* Notifications                 */
/* ============================= */

#notification-area {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.app-notification {
    padding: 12px 20px;
    border-radius: 6px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.app-notification--visible {
    opacity: 1;
    transform: translateX(0);
}

.app-notification--success {
    background: var(--good);
}

.app-notification--error,
.app-notification--danger {
    background: var(--danger);
}

.app-notification--warning {
    background: var(--warning);
}

.app-notification--info {
    background: var(--accent);
}

/* ============================= */
/* Admin Widgets Table           */
/* ============================= */

.admin-widgets-table .widget-name-cell {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.admin-widgets-table .widget-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: var(--primary-muted);
    border-radius: var(--radius-sm);
    color: var(--primary);
}

.admin-widgets-table .widget-icon-wrap svg {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
}

.admin-widgets-table .widget-name-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-widgets-table .badge--xs {
    font-size: 0.65rem;
    padding: 1px 5px;
}

.admin-widgets-table .widget-preview-cell {
    padding: var(--s-2);
}

.admin-widgets-table .widget-preview-cell .dayview-kpi,
.admin-widgets-table .widget-preview-cell .stat,
.admin-widgets-table .widget-preview-cell .stat-card {
    transform: scale(0.85);
    transform-origin: left center;
}

.admin-widgets-table .preview-placeholder {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2);
    color: var(--text-muted);
}

/* ============================= */
/* Quick Actions Grid            */
/* ============================= */

.quick-actions-grid {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.quick-actions-grid a:hover {
    text-decoration: none;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    text-align: left;
    width: 100%;
}

.quick-action-btn:hover {
    border-color: var(--primary);
    background: var(--surface-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.quick-action-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--primary-soft);
    border-radius: var(--radius);
    color: var(--primary);
    flex-shrink: 0;
}

.quick-action-btn__icon svg {
    width: 24px;
    height: 24px;
}

/* if someone sees this below (... svg.exception), DO NOT DO LIKE ME.. I WAS LASY AS F.. AFTER 12 HOURS OF CODING! */
.quick-action-btn__icon svg.exception {
    width: 48px;
    height: 48px;
}

.quick-action-btn__content {
    flex: 1;
}

.quick-action-btn__content strong {
    display: block;
    font-size: 1rem;
    margin-bottom: var(--s-1);
}

.quick-action-btn__content p {
    margin: 0;
    line-height: 1.4;
}

.quick-action-btn__arrow {
    font-size: 1.5rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.quick-action-btn:hover .quick-action-btn__arrow {
    transform: translateX(4px);
    color: var(--primary);
}

/* ============================= */
/* Calculation Mode Options      */
/* ============================= */

.calculation-mode-options {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.calculation-mode-option {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.calculation-mode-option:hover {
    border-color: var(--primary);
    background: var(--surface-hover);
}

.calculation-mode-option:has(input:checked),
.calculation-mode-option--active {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.calculation-mode-option input[type="radio"] {
    margin-top: 0.25rem;
}

.calculation-mode-option__content {
    flex: 1;
}

/* ============================= */
/* Toggle Switch Styles          */
/* ============================= */

.toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: normal;
}

.toggle-row:hover {
    border-color: var(--primary);
    background: var(--surface-hover);
}

.toggle-label {
    flex: 1;
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--surface-muted);
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked+.toggle-slider {
    background-color: var(--primary);
}

.toggle-switch input:checked+.toggle-slider:before {
    transform: translateX(22px);
}

/* ============================= */
/* Office Settings Table         */
/* ============================= */

.defaults-info {
    margin-bottom: var(--s-4);
    padding: var(--s-3);
    background: var(--surface-muted);
    border-radius: var(--radius);
}

.office-settings-table .badge--subtle {
    background: var(--surface-muted);
    color: var(--text-muted);
}

/* ============================= */
/* Weekday Checkboxes            */
/* ============================= */

.weekday-checkboxes {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.weekday-checkbox {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.weekday-checkbox:hover {
    border-color: var(--primary);
}

.weekday-checkbox:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.weekday-checkbox input {
    display: none;
}

/* Employee Profile Header */
.profile-header-group {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.profile-avatar-wrapper {
    position: relative;
}

.avatar--profile {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar--placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--avatar-color, #ccc);
    /* Fallback */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.btn-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.btn-avatar-edit:hover {
    background: var(--surface-hover);
    border-color: var(--border-hover);
}

/* Drop Zone Styles (Extracted from show.twig) */
.drop-zone {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    position: relative;
}

.drop-zone:hover {
    border-color: var(--color-primary, var(--info-vibrant));
    background-color: rgba(59, 130, 246, 0.05);
    /* Fallback for primary-rgb if not defined */
}

.drop-zone.drag-over {
    border-color: var(--color-primary, var(--info-vibrant));
    background-color: rgba(59, 130, 246, 0.1);
}

.drop-zone__input {
    display: none;
}

.drop-zone__prompt {
    pointer-events: none;
}

.drop-zone__preview {
    margin-top: 1rem;
    display: none;
}

.drop-zone__preview img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Utilities */
.justify-end {
    justify-content: flex-end;
}

.d-flex {
    display: flex;
}

.gap-2 {
    gap: 0.5rem;
}

/* Radio Group Styles for Reactivate Modal */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--r-1, 4px);
    transition: background 0.2s;
}

.radio-option:hover {
    background: var(--bg, #f5f5f5);
}

.radio-option input[type="radio"] {
    margin: 0;
}

/* Card Actions Layout */
.card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Button Variants - Danger/Success */
.btn--danger {
    background: var(--danger, var(--danger-vibrant));
    color: white;
    border: none;
}

.btn--danger:hover {
    background: var(--danger);
}

.btn--success {
    background: var(--good, var(--success-vibrant));
    color: white;
    border: none;
}

.btn--success:hover {
    background: var(--good);
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
    border: none;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent-2);
    transform: translateY(-2px);
}