@font-face {
    font-family: 'Diglu';
    src: url('/fonts/Diglu-Regular.woff2') format('woff2'), url('/fonts/Diglu-Regular.woff') format('woff'), url('/fonts/Diglu-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Diglu';
    src: url('/fonts/Diglu-Bold.woff2') format('woff2'), url('/fonts/Diglu-Bold.woff') format('woff'), url('/fonts/Diglu-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Diglu';
    src: url('/fonts/Diglu-RegularItalic.woff2') format('woff2'), url('/fonts/Diglu-RegularItalic.woff') format('woff'), url('/fonts/Diglu-RegularItalic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Diglu';
    src: url('/fonts/Diglu-BoldItalic.woff2') format('woff2'), url('/fonts/Diglu-BoldItalic.woff') format('woff'), url('/fonts/Diglu-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-400i.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables for Light Mode (Default) */
:root {
    /* Native UI (scrollbars, date-picker popups, autofill, form-control
       internals) follows the OS theme; without this it stays light-rendered
       even when the app's dark palette is active. */
    color-scheme: light dark;

    /* Brand Colors */
    --color-primary: #0066cc;
    --color-primary-hover: #0052a3;
    --color-primary-active: #004080;

    /* Background Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f5f5;
    --color-bg-tertiary: #ebebeb;
    --color-bg-elevated: #ffffff;

    /* Text Colors */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #2c2c2c;
    --color-text-tertiary: #666666;
    --color-text-muted: #888888;

    /* Border Colors */
    --color-border-primary: #e0e0e0;
    --color-border-secondary: #d0d0d0;
    --color-border-hover: #c0c0c0;

    /* Interactive States */
    --color-hover-bg: #ebebeb;
    --color-active-bg: #e3e3e3;
    --color-focus-ring: #0066cc40;

    /* Semantic Colors */
    --color-success: #22863a;
    --color-success-bg: #d4edda;
    --color-danger: #d73a49;
    --color-danger-bg: #f8d7da;
    --color-warning: #f9a825;
    --color-warning-bg: #fff3cd;
    --color-info: #0366d6;
    --color-info-bg: #d1ecf1;

    /* Button Colors */
    --btn-primary-bg: #0066cc;
    --btn-primary-hover: #0052a3;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-hover: #5a6268;
    --btn-success-bg: #22863a;
    --btn-success-hover: #1a6e2e;
    --btn-danger-bg: #d73a49;
    --btn-danger-hover: #b52a37;
    --btn-warning-bg: #f9a825;
    --btn-warning-hover: #e69500;
    --btn-info-bg: #0366d6;
    --btn-info-hover: #0256b8;
}

/* Dark Mode CSS Variables - Warm palette */
@media (prefers-color-scheme: dark) {
    :root {
        /* Brand Colors - Warm amber accent */
        --color-primary: #e0a458;
        --color-primary-hover: #ebba78;
        --color-primary-active: #f5d0a0;

        /* Background Colors - Warm charcoal with subtle brown undertones */
        --color-bg-primary: #1c1917;
        --color-bg-secondary: #262220;
        --color-bg-tertiary: #302b28;
        --color-bg-elevated: #3a3432;

        /* Text Colors - Warm whites */
        --color-text-primary: #faf6f1;
        --color-text-secondary: #e7e0d8;
        --color-text-tertiary: #a8a099;
        --color-text-muted: #787068;

        /* Border Colors - Visible warm grays */
        --color-border-primary: #3d3835;
        --color-border-secondary: #302b28;
        --color-border-hover: #524b47;

        /* Interactive States */
        --color-hover-bg: #3a3432;
        --color-active-bg: #454039;
        --color-focus-ring: #e0a45840;

        /* Semantic Colors - Desaturated for dark backgrounds */
        --color-success: #7dcea0;
        --color-success-bg: #1e3a2a;
        --color-danger: #e87c73;
        --color-danger-bg: #3d2422;
        --color-warning: #e5b84c;
        --color-warning-bg: #3d3422;
        --color-info: #7cb3e0;
        --color-info-bg: #223344;

        /* Button Colors */
        --btn-primary-bg: #e0a458;
        --btn-primary-hover: #ebba78;
        --btn-primary-text: #1c1917;
        --btn-secondary-bg: #524b47;
        --btn-secondary-hover: #635c57;
        --btn-success-bg: #5fa87a;
        --btn-success-hover: #7dcea0;
        --btn-danger-bg: #cf6660;
        --btn-danger-hover: #e87c73;
        --btn-warning-bg: #d4a73e;
        --btn-warning-hover: #e5b84c;
        --btn-info-bg: #5a9fd0;
        --btn-info-hover: #7cb3e0;
    }
}

html, body {
    font-family: 'Diglu', 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--color-bg-primary);
    color: var(--color-text-secondary);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

a, .btn-link {
    color: var(--color-primary);
    transition: color 0.15s ease-in-out;
}

a:hover, .btn-link:hover {
    color: var(--color-primary-hover);
}

/* Bootstrap Button Customization */
.btn-primary {
    color: var(--btn-primary-text);
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    transition: all 0.15s ease-in-out;
}

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

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
    border-color: var(--btn-secondary-hover);
}

.btn-success {
    background-color: var(--btn-success-bg);
    border-color: var(--btn-success-bg);
}

.btn-success:hover {
    background-color: var(--btn-success-hover);
    border-color: var(--btn-success-hover);
}

.btn-danger {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-bg);
}

.btn-danger:hover {
    background-color: var(--btn-danger-hover);
    border-color: var(--btn-danger-hover);
}

.btn-warning {
    background-color: var(--btn-warning-bg);
    border-color: var(--btn-warning-bg);
}

.btn-warning:hover {
    background-color: var(--btn-warning-hover);
    border-color: var(--btn-warning-hover);
}

.btn-info {
    background-color: var(--btn-info-bg);
    border-color: var(--btn-info-bg);
}

.btn-info:hover {
    background-color: var(--btn-info-hover);
    border-color: var(--btn-info-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--color-bg-primary), 0 0 0 0.25rem var(--color-focus-ring);
}

/* Form Controls */
.form-control, .form-select {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-primary);
    color: var(--color-text-secondary);
}

.form-control:focus, .form-select:focus {
    background-color: var(--color-bg-primary);
    border-color: var(--color-primary);
    color: var(--color-text-primary);
}

/* Tables */
.table {
    color: var(--color-text-secondary);
}

thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.actions {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: var(--color-bg-elevated);
}

.icon-header {
    text-align: center;
    white-space: nowrap;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--color-bg-secondary);
}

.table-bordered {
    border-color: var(--color-border-primary);
}

.table-bordered > :not(caption) > * > * {
    border-color: var(--color-border-primary);
}

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

.table-dark {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.thead-light {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* Enhanced table styling for dark mode */
@media (prefers-color-scheme: dark) {
    /* Bootstrap table variables — drive the --bs-table-* chain instead of
       forcing painted backgrounds, so striping, contextual tints (table-danger
       etc.), hover and selection COMPOSE like in light mode. The striped value
       is a translucent warm-white wash: over the plain page bg it yields the
       usual stripe, over a contextual row bg it yields a lighter stripe of the
       same tint — no per-combination rules needed. */
    .table {
        --bs-table-bg: transparent;
        --bs-table-color: #e7e0d8;
        --bs-table-border-color: #3d3835;
        --bs-table-striped-bg: rgba(250, 246, 241, 0.05);
        --bs-table-striped-color: #e7e0d8;
        --bs-table-hover-bg: #3a3432;
        --bs-table-hover-color: #faf6f1;
        --bs-table-active-bg: var(--color-active-bg);
        --bs-table-active-color: #faf6f1;
        color: #e7e0d8 !important;
    }

    /* Force text color on all table cells */
    .table th,
    .table td,
    .table thead th,
    .table tbody td,
    .table > thead > tr > th,
    .table > tbody > tr > td {
        color: #e7e0d8 !important;
    }

    .table > thead {
        background-color: #302b28;
        border-bottom: 2px solid #524b47;
    }

    .table > thead th {
        color: #faf6f1 !important;
        font-weight: 600;
        background-color: #302b28 !important;
    }

    /* Sticky headers need solid background in dark mode */
    th[style*="sticky"],
    th {
        background-color: #302b28;
    }

    table thead th,
    table tbody th {
        background-color: #302b28;
    }

    .table > tbody > tr {
        border-bottom: 1px solid #302b28;
    }

    /* Striped/hover backgrounds flow from the --bs-table-* variables above via
       Bootstrap's own cell-painting rule — no forced background-color here.
       (The old !important forces at higher specificity were what erased every
       table-danger/-warning/-active tint in striped tables in dark mode.)
       This one rule re-routes the light-mode striped rule earlier in this file
       (which paints a literal background) back onto the variable chain: */
    .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: var(--bs-table-bg);
    }

    /* Cards and elevated surfaces */
    .card {
        background-color: var(--color-bg-secondary);
        border-color: var(--color-border-primary);
    }

    .card-header {
        background-color: var(--color-bg-tertiary);
        border-color: var(--color-border-primary);
        color: var(--color-text-primary);
    }

    .modal-content {
        background-color: var(--color-bg-elevated);
        border-color: var(--color-border-primary);
    }

    .modal-header {
        border-color: var(--color-border-primary);
        color: var(--color-text-primary);
    }

    .modal-footer {
        border-color: var(--color-border-primary);
    }

    .dropdown-menu {
        background-color: var(--color-bg-elevated);
        border-color: var(--color-border-primary);
    }

    .dropdown-item {
        color: var(--color-text-secondary);
    }

    .dropdown-item:hover, .dropdown-item:focus {
        background-color: var(--color-hover-bg);
        color: var(--color-text-primary);
    }

    /* Badges */
    .badge.bg-light {
        background-color: var(--color-bg-tertiary) !important;
        color: var(--color-text-primary) !important;
    }

    .badge.text-dark {
        color: var(--color-text-primary) !important;
    }

    /* Button groups and filter buttons */
    .btn-outline-primary,
    .btn-outline-secondary {
        color: var(--color-text-secondary);
        border-color: var(--color-border-primary);
    }

    .btn-outline-primary:hover,
    .btn-outline-secondary:hover {
        background-color: var(--color-hover-bg);
        color: var(--color-text-primary);
    }

    .btn-outline-primary.active,
    .btn-outline-secondary.active {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: #1c1917;
    }

    /* Text utilities override */
    .text-dark {
        color: var(--color-text-primary) !important;
    }

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

    .bg-light {
        background-color: var(--color-bg-tertiary) !important;
    }

    /* ------------------------------------------------------------------
       Project-wide dark-mode remaps for Bootstrap surfaces app.css does
       not theme by default. Without these, Bootstrap's light-mode defaults
       leak through in dark mode as light-on-light, washed-out or invisible
       UI. They affect EVERY form and table in the app — most visibly the
       read-only/approval editor views (e.g. the business-trip approval
       page) where almost every field renders disabled.
       ------------------------------------------------------------------ */

    /* Disabled / read-only inputs.
       Bootstrap fills these with a light grey (#e9ecef) while our themed
       rule keeps the text light → light-on-light, unreadable. Re-skin them
       as recessed dark fields that stay fully legible. */
    .form-control:disabled,
    .form-control[readonly],
    .form-select:disabled,
    textarea.form-control:disabled {
        background-color: var(--color-bg-secondary);
        border-color: var(--color-border-primary);
        color: var(--color-text-secondary);
        -webkit-text-fill-color: var(--color-text-secondary); /* WebKit greys disabled text otherwise */
        opacity: 1;
    }

    /* Placeholders — Bootstrap's default dark grey vanishes on dark fields. */
    .form-control::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

    /* Select chevron — Bootstrap bakes in a dark chevron SVG that disappears
       on a dark field. Swap in a light one. */
    .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e7e0d8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-image: var(--bs-form-select-bg-img);
    }

    /* Plain-text read-only fields and form helper text. */
    .form-control-plaintext {
        color: var(--color-text-secondary);
    }

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

    /* List groups — Bootstrap defaults the item background to white. */
    .list-group {
        --bs-list-group-bg: var(--color-bg-secondary);
        --bs-list-group-color: var(--color-text-secondary);
        --bs-list-group-border-color: var(--color-border-primary);
        --bs-list-group-action-color: var(--color-text-secondary);
        --bs-list-group-action-hover-bg: var(--color-hover-bg);
        --bs-list-group-action-hover-color: var(--color-text-primary);
    }

    /* Contextual table classes (table-light / -secondary / -primary / -success /
       -danger / -warning / -info). Bootstrap's own class rules carry LIGHT
       values for the whole --bs-table-* variable family; redefine the
       background side onto the warm-dark palette. Same specificity as
       Bootstrap's rules — app.css loads after bootstrap.min.css, so these win.
       Because these are variables feeding Bootstrap's cell-painting rule (not
       painted backgrounds), the class works wherever it sits — row, cell, or a
       thead/tbody/tfoot wrapper — and composes with striping, hover and
       selection. Cell text stays governed by the generic light force above,
       which is legible on all of these dark fills. Striped/hover/active
       derivatives lighten the base fill via color-mix, mirroring how Bootstrap
       derives them in light mode.
       (.table-active needs no rule here: it only maps the state variables,
       and the dark --bs-table-active-bg base is set on .table above.) */
    .table-light,
    .table-secondary {
        --bs-table-bg: var(--color-bg-tertiary);
        --bs-table-striped-bg: color-mix(in srgb, var(--color-bg-tertiary) 92%, #faf6f1);
        --bs-table-hover-bg: color-mix(in srgb, var(--color-bg-tertiary) 82%, #faf6f1);
        --bs-table-active-bg: color-mix(in srgb, var(--color-bg-tertiary) 85%, #faf6f1);
        --bs-table-border-color: var(--color-border-primary);
    }
    .table-primary {
        --bs-table-bg: var(--color-bg-elevated);
        --bs-table-striped-bg: color-mix(in srgb, var(--color-bg-elevated) 92%, #faf6f1);
        --bs-table-hover-bg: color-mix(in srgb, var(--color-bg-elevated) 82%, #faf6f1);
        --bs-table-active-bg: color-mix(in srgb, var(--color-bg-elevated) 85%, #faf6f1);
        --bs-table-border-color: var(--color-border-primary);
    }
    .table-success {
        --bs-table-bg: var(--color-success-bg);
        --bs-table-striped-bg: color-mix(in srgb, var(--color-success-bg) 92%, #faf6f1);
        --bs-table-hover-bg: color-mix(in srgb, var(--color-success-bg) 82%, #faf6f1);
        --bs-table-active-bg: color-mix(in srgb, var(--color-success-bg) 85%, #faf6f1);
        --bs-table-border-color: var(--color-border-primary);
    }
    .table-danger {
        --bs-table-bg: var(--color-danger-bg);
        --bs-table-striped-bg: color-mix(in srgb, var(--color-danger-bg) 92%, #faf6f1);
        --bs-table-hover-bg: color-mix(in srgb, var(--color-danger-bg) 82%, #faf6f1);
        --bs-table-active-bg: color-mix(in srgb, var(--color-danger-bg) 85%, #faf6f1);
        --bs-table-border-color: var(--color-border-primary);
    }
    .table-warning {
        --bs-table-bg: var(--color-warning-bg);
        --bs-table-striped-bg: color-mix(in srgb, var(--color-warning-bg) 92%, #faf6f1);
        --bs-table-hover-bg: color-mix(in srgb, var(--color-warning-bg) 82%, #faf6f1);
        --bs-table-active-bg: color-mix(in srgb, var(--color-warning-bg) 85%, #faf6f1);
        --bs-table-border-color: var(--color-border-primary);
    }
    .table-info {
        --bs-table-bg: var(--color-info-bg);
        --bs-table-striped-bg: color-mix(in srgb, var(--color-info-bg) 92%, #faf6f1);
        --bs-table-hover-bg: color-mix(in srgb, var(--color-info-bg) 82%, #faf6f1);
        --bs-table-active-bg: color-mix(in srgb, var(--color-info-bg) 85%, #faf6f1);
        --bs-table-border-color: var(--color-border-primary);
    }

    /* Alerts — Bootstrap's pastel light-mode fills stay glaringly bright in
       dark mode. Remap each variant onto the warm-dark palette via Bootstrap's
       own --bs-alert-* variables: a dark tinted fill with the desaturated
       semantic accent for text and border. */
    .alert-info {
        --bs-alert-color: var(--color-info);
        --bs-alert-bg: var(--color-info-bg);
        --bs-alert-border-color: var(--color-info);
        --bs-alert-link-color: var(--color-info);
    }
    .alert-success {
        --bs-alert-color: var(--color-success);
        --bs-alert-bg: var(--color-success-bg);
        --bs-alert-border-color: var(--color-success);
        --bs-alert-link-color: var(--color-success);
    }
    .alert-warning {
        --bs-alert-color: var(--color-warning);
        --bs-alert-bg: var(--color-warning-bg);
        --bs-alert-border-color: var(--color-warning);
        --bs-alert-link-color: var(--color-warning);
    }
    .alert-danger {
        --bs-alert-color: var(--color-danger);
        --bs-alert-bg: var(--color-danger-bg);
        --bs-alert-border-color: var(--color-danger);
        --bs-alert-link-color: var(--color-danger);
    }
    .alert-primary {
        --bs-alert-color: var(--color-primary);
        --bs-alert-bg: var(--color-bg-elevated);
        --bs-alert-border-color: var(--color-primary);
        --bs-alert-link-color: var(--color-primary);
    }
    .alert-secondary {
        --bs-alert-color: var(--color-text-secondary);
        --bs-alert-bg: var(--color-bg-tertiary);
        --bs-alert-border-color: var(--color-border-hover);
        --bs-alert-link-color: var(--color-text-primary);
    }
    .alert-light {
        --bs-alert-color: var(--color-text-secondary);
        --bs-alert-bg: var(--color-bg-tertiary);
        --bs-alert-border-color: var(--color-border-primary);
        --bs-alert-link-color: var(--color-text-primary);
    }
    .alert-dark {
        --bs-alert-color: var(--color-text-primary);
        --bs-alert-bg: var(--color-bg-secondary);
        --bs-alert-border-color: var(--color-border-primary);
        --bs-alert-link-color: var(--color-text-primary);
    }

    /* Accordion — Bootstrap defaults the panel/buttons to white with a dark
       chevron, lighting up the whole component in dark mode (most visible in
       the business-trip "Útmutató" guide modal). Remap onto the warm-dark
       palette and swap the chevrons for light (collapsed) / amber (active). */
    .accordion {
        --bs-accordion-color: var(--color-text-secondary);
        --bs-accordion-bg: var(--color-bg-secondary);
        --bs-accordion-border-color: var(--color-border-primary);
        --bs-accordion-btn-color: var(--color-text-primary);
        --bs-accordion-btn-bg: var(--color-bg-tertiary);
        --bs-accordion-active-color: var(--color-primary);
        --bs-accordion-active-bg: var(--color-bg-elevated);
        --bs-accordion-btn-focus-border-color: var(--color-primary);
        --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--color-focus-ring);
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e7e0d8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e0a458'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }

    /* Progress track — Bootstrap's default light-grey track stays bright. */
    .progress, .progress-stacked {
        --bs-progress-bg: var(--color-bg-tertiary);
    }

    /* ------------------------------------------------------------------
       BlazorDateRangePicker (third-party) — ships light-only colors in a
       scoped-CSS bundle inside Hub.styles.css. !important is required on
       every declaration: the bundle loads after app.css and its [b-*]
       scope attributes give its selectors higher specificity. Colors only;
       layout stays the library's.
       ------------------------------------------------------------------ */
    .daterangepicker {
        background-color: var(--color-bg-elevated) !important;
        border-color: var(--color-border-primary) !important;
    }

    /* Speech-bubble arrow: ::before draws the border wedge, ::after the fill. */
    .daterangepicker:before {
        border-bottom-color: var(--color-border-hover) !important;
    }

    .daterangepicker:after {
        border-bottom-color: var(--color-bg-elevated) !important;
    }

    .daterangepicker.drop-up:before {
        border-top-color: var(--color-border-hover) !important;
    }

    .daterangepicker.drop-up:after {
        border-top-color: var(--color-bg-elevated) !important;
    }

    .daterangepicker .calendar-table {
        background-color: var(--color-bg-elevated) !important;
        border-color: var(--color-bg-elevated) !important;
    }

    .daterangepicker .drp-buttons {
        border-top-color: var(--color-border-primary) !important;
    }

    /* Neutralize app.css's bare `th { background-color: … }` dark rule,
       which paints stray dark boxes behind the weekday/month header cells. */
    .daterangepicker th {
        background-color: transparent !important;
    }

    /* Prev/next month chevrons are drawn with black borders — invisible on dark. */
    .daterangepicker .prev span,
    .daterangepicker .next span {
        border-color: var(--color-text-primary) !important;
    }

    .daterangepicker td.available:hover,
    .daterangepicker th.available:hover {
        background-color: var(--color-hover-bg) !important;
    }

    /* Days outside the displayed month. */
    .daterangepicker td.off,
    .daterangepicker td.off.in-range,
    .daterangepicker td.off.start-date,
    .daterangepicker td.off.end-date {
        background-color: var(--color-bg-elevated) !important;
        color: var(--color-text-muted) !important;
    }

    /* Selected range band — amber-tinted, derived from the primary token. */
    .daterangepicker td.in-range {
        background-color: color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
        color: var(--color-text-primary) !important;
    }

    /* Range endpoints. */
    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        background-color: var(--color-primary) !important;
        color: var(--btn-primary-text) !important;
    }

    .daterangepicker td.disabled,
    .daterangepicker option.disabled {
        color: var(--color-text-muted) !important;
    }

    /* Preset-range list (when Ranges are configured on the picker). */
    .daterangepicker .ranges li:hover {
        background-color: var(--color-hover-bg) !important;
    }

    .daterangepicker .ranges li.active {
        background-color: var(--color-primary) !important;
        color: var(--btn-primary-text) !important;
    }

    /* Time-picker selects (when TimePicker is enabled). */
    .daterangepicker select.hourselect,
    .daterangepicker select.minuteselect,
    .daterangepicker select.secondselect,
    .daterangepicker select.ampmselect {
        background: var(--color-bg-secondary) !important;
        border-color: var(--color-border-primary) !important;
        color: var(--color-text-secondary) !important;
    }
}

/* Input Groups */
.input-group-text {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-secondary);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.spinner-border {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

.bi {
    display: inline-block;
    position: relative;
    top: -1px;
    background-size: cover;
    margin: 0;
    fill: currentColor;
    width: 1rem;
    height: 1rem;
}

/* Spinners: Bootstrap's spinner-border-sm defaults to 1.25rem which
   is larger than .bi icons (1rem). Override globally so spinners
   match icon size everywhere — inside buttons, inline with text, etc. */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Adjust height as needed */
}

.no-float .form-check-input {
    float: none;
}

/* AI Button - Gradient style for AI-powered features */
.btn-ai {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #ffffff;
    font-weight: 500;
    padding: 0.375rem 0.85rem;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.btn-ai:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}

.btn-ai:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.btn-ai:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.5);
}

.btn-ai svg {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
}

/* Copy-to-clipboard affordance — shared across list/editor pages (was
   duplicated in five scoped .razor.css files; defined once here instead). */
.copy-to-clipboard {
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.copy-to-clipboard:hover {
    background-color: #e0f7fa;
    color: #00796b;
    box-shadow: 0 0 0.3rem rgba(0, 121, 107, 0.6);
}

/* Ctrl key visual feedback for multi-select filter groups */
body.ctrl-pressed .multi-select-filter .btn:not(.active):hover {
    cursor: copy;
}

@media (prefers-color-scheme: dark) {
    .btn-ai {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
        box-shadow: 0 2px 4px rgba(167, 139, 250, 0.3);
    }

    .btn-ai:hover {
        background: linear-gradient(135deg, #c084fc 0%, #a78bfa 100%);
        box-shadow: 0 4px 8px rgba(167, 139, 250, 0.4);
    }

    .btn-ai:focus {
        box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.5);
    }

    /* Sötét változat: mély teál háttér, világosított teál ikon/szöveg. */
    .copy-to-clipboard:hover {
        background-color: #1d3a37;
        color: #7dd6c8;
        box-shadow: 0 0 0.3rem rgba(125, 214, 200, 0.5);
    }
}