/* ============================================================
   Shared design tokens
   ============================================================ */

/* Disable pull-to-refresh browser behaviour */
html, body {
    overscroll-behavior-y: none;
}


.emp-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-surface-hover);
    position: relative;
}

    .emp-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.emp-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* FILTER BAR */
.filter-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
}

.filter-search {
    flex: 1;
    min-width: 200px;
}

.filter-input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.84rem;
    color: var(--color-text);
    background: var(--color-white);
    box-sizing: border-box;
}

    .filter-input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }
/* FILTER BAR */

/* Replace browser blue focus ring with site green on all buttons */
button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

:root {
    /* ── Neutrals (Untitled-UI gray scale) ─── */
    --color-text:           #101828;
    --color-text-strong:    #344054;
    --color-text-muted:     #667085;
    --color-text-subtle:    #98a2b3;
    --color-border:         #d0d5dd;
    --color-border-soft:    #eaecf0;
    --color-surface:        #ffffff;
    --color-surface-alt:    #f9fafb;
    --color-surface-hover:  #f2f4f7;

    /* ── Brand / accent ─────────────────────── */
    --color-primary:        #18a06f;
    --color-primary-hover:  #0f7a54;
    --color-primary-soft:   #ecfdf5;
    --color-primary-strong: #065f46;
    --color-focus-ring:     rgba(24, 160, 111, 0.15);

    /* ── Semantic ───────────────────────────── */
    --color-danger:         #b42318;
    --color-danger-strong:  #d92d20;
    --color-danger-soft:    #fef3f2;
    --color-danger-border:  #fda29b;

    --color-success:        #067647;
    --color-success-soft:   #ecfdf3;

    --color-warning:        #b54708;
    --color-warning-strong: #92400e;
    --color-warning-soft:   #fffaeb;
    --color-warning-accent: #f79009;
    --color-warning-amber:  #fef3c7;

    --color-info:           #3538cd;
    --color-info-soft:      #eef4ff;

    --color-purple:         #5925dc;
    --color-purple-soft:    #f4f3ff;

    --color-drop-target:    #dbeafe;
    --color-range-selected: #bfdbfe;

    /* ── Extended neutrals (gridlines, dividers, surfaces) ─── */
    --color-white:           #ffffff;
    --color-surface-subtle:  #fafafa;
    --color-border-light:    #e4e7ec;
    --color-border-faint:    #f0f1f3;
    --color-text-secondary:  #475467;

    /* ── Extended brand / blues ─────────────── */
    --color-primary-bright:  #1db87f;
    --color-primary-deep:    #0a5940;
    --color-primary-darkest: #052e21;
    --color-primary-tint:    #6ee7b7;
    --color-primary-tint-2:  #a7f3d0;
    --color-primary-bg-1:    #f0fdf8;
    --color-primary-bg-2:    #f0fdf8;
    --color-primary-bg-3:    #ecfdf5;
    --color-primary-bg-4:    #f0fdf8;
    --color-primary-bg-5:    #dcfce7;
    --color-primary-bg-6:    #d1fae5;
    --color-primary-bg-7:    #a7f3d0;

    /* ── Extended success/greens ────────────── */
    --color-success-bright:  #12b76a;
    --color-success-mid:     #0e9f5e;
    --color-success-strong:  #059669;
    --color-success-deep:    #027a48;
    --color-success-darker:  #065f46;
    --color-success-darkest: #166534;
    --color-success-tint:    #a7f3d0;
    --color-success-tint-2:  #86efac;
    --color-success-tint-3:  #bbf7d0;
    --color-success-bg-1:    #d1fae5;
    --color-success-bg-2:    #ecfdf5;
    --color-success-bg-3:    #dcfce7;
    --color-success-bg-4:    #f0fdf4;

    /* ── Extended danger/reds ───────────────── */
    --color-danger-bright:   #dc2626;
    --color-danger-mid:      #ef4444;
    --color-danger-light:    #f87171;
    --color-danger-tint:     #fecaca;
    --color-danger-bg-1:     #fef2f2;
    --color-danger-bg-2:     #fee2e2;

    /* ── Extended warning/amber ─────────────── */
    --color-warning-bright:  #d97706;
    --color-warning-tint:    #fde68a;
    --color-warning-bg-1:    #fffbeb;
    --color-warning-bg-2:    #fffef5;

    /* ── Radius / shadow / motion ───────────── */
    --radius-sm:     4px;
    --radius-md:     6px;
    --radius-lg:     8px;
    --shadow-card:   0 2px 6px rgba(0, 0, 0, 0.12);
    --transition-fast: 0.15s;

    /* ── Typography ─────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   Dark theme — token overrides
   Activated by adding [data-theme="dark"] on any ancestor element.
   Cascades through Blazor CSS isolation because variable lookups
   resolve at the consuming element, not at definition time.
   ============================================================ */
[data-theme="dark"] {
    /* Neutrals — flipped to a near-black canvas */
    --color-text:           #e6e8eb;
    --color-text-strong:    #f5f6f7;
    --color-text-muted:     #a1a7b0;
    --color-text-subtle:    #767c85;
    --color-text-secondary: #c4c8ce;

    --color-border:         #353a42;
    --color-border-soft:    #262a30;
    --color-border-light:   #2a2e34;
    --color-border-faint:   #22262b;

    /* Surface scale — widened so cards/buttons read above the page background.
       page bg (body) < container < surface-alt < surface (card) < hover */
    --color-surface:        #242932; /* card / button face */
    --color-surface-alt:    #1d2128; /* container/grid wash */
    --color-surface-hover:  #2e343d;
    --color-surface-subtle: #14171c; /* page background */
    --color-white:          #242932; /* "white" = card face on dark */

    /* Brand / greens — keep accent vibrant, soften the wash */
    --color-primary-strong:  #6ee7b7;
    --color-primary-soft:    rgba(24, 160, 111, 0.18);
    --color-primary-bg-1:    rgba(24, 160, 111, 0.10);
    --color-primary-bg-2:    rgba(24, 160, 111, 0.10);
    --color-primary-bg-3:    rgba(24, 160, 111, 0.12);
    --color-primary-bg-4:    rgba(24, 160, 111, 0.10);
    --color-primary-bg-5:    rgba(24, 160, 111, 0.14);
    --color-primary-bg-6:    rgba(24, 160, 111, 0.18);
    --color-primary-bg-7:    rgba(24, 160, 111, 0.22);
    --color-focus-ring:      rgba(24, 160, 111, 0.30);
    --color-drop-target:     rgba(24, 160, 111, 0.22);
    --color-range-selected:  rgba(24, 160, 111, 0.28);

    /* Semantic soft fills — translucent so they read on dark */
    --color-danger-soft:     rgba(217, 45, 32, 0.18);
    --color-danger-bg-1:     rgba(217, 45, 32, 0.14);
    --color-danger-bg-2:     rgba(217, 45, 32, 0.20);
    --color-danger-tint:     rgba(217, 45, 32, 0.32);
    --color-danger-border:   rgba(217, 45, 32, 0.50);

    --color-success-soft:    rgba(18, 183, 106, 0.18);
    --color-success-bg-1:    rgba(18, 183, 106, 0.16);
    --color-success-bg-2:    rgba(18, 183, 106, 0.14);
    --color-success-bg-3:    rgba(18, 183, 106, 0.20);
    --color-success-bg-4:    rgba(18, 183, 106, 0.12);

    --color-warning-soft:    rgba(247, 144, 9, 0.18);
    --color-warning-amber:   rgba(247, 144, 9, 0.28);
    --color-warning-bg-1:    rgba(247, 144, 9, 0.14);
    --color-warning-bg-2:    rgba(247, 144, 9, 0.10);
    --color-warning-tint:    rgba(247, 144, 9, 0.32);

    --color-info-soft:       rgba(53, 56, 205, 0.22);
    --color-purple-soft:     rgba(89, 37, 220, 0.22);

    /* Text accents — brighten for contrast on dark fills */
    --color-danger:          #fda29b;
    --color-success:         #6ce9a6;
    --color-warning:         #fdb022;
    --color-info:            #a5b4fc;
    --color-purple:          #c4b5fd;

    /* Shadow — stronger on dark backgrounds */
    --shadow-card:           0 2px 8px rgba(0, 0, 0, 0.45);
}

/* When dark theme is set on <html>, paint the page canvas too. */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background: var(--color-surface-subtle);
    color: var(--color-text);
}

/* Top horizontal header — match the dark sidebar (#1e293b) so the
   chrome reads as a single dark band. The sidebar uses a baked-in
   dashui dark theme; we mirror its background here. */
html[data-theme="dark"] .navbar-custom {
    background-color: #1e293b !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.4);
}

    html[data-theme="dark"] .navbar-custom,
    html[data-theme="dark"] .navbar-custom a,
    html[data-theme="dark"] .navbar-custom .btn-link,
    html[data-theme="dark"] .navbar-custom .btn-ghost {
        color: #f5f6f7;
    }

    html[data-theme="dark"] .navbar-custom svg,
    html[data-theme="dark"] .navbar-custom .nav-icon,
    html[data-theme="dark"] .navbar-custom .bi {
        color: #f5f6f7;
        fill: currentColor;
        stroke: currentColor;
    }

/* ============================================================
   Shared toolbar / week-navigation buttons
   (used across roster, reporting, approval, absence pages)
   ============================================================ */
.btn-nav,
.btn-today,
.btn-print,
.btn-export,
.btn-reload {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

    .btn-nav:hover,
    .btn-today:hover,
    .btn-print:hover,
    .btn-export:hover,
    .btn-reload:hover {
        background: var(--color-surface-hover);
    }

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

.btn-today:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: var(--radius-lg);
    font-weight: 500;
}

    .btn-export:hover {
        border-color: var(--color-text-subtle);
    }

.btn-reload {
    border-color: var(--color-warning-accent);
    color: var(--color-warning-strong);
    font-weight: 500;
}

.date-picker {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}

    .date-picker:hover {
        background: var(--color-surface-hover);
    }

/* Dark-theme variants for the shared toolbar buttons. */
[data-theme="dark"] .btn-nav,
[data-theme="dark"] .btn-today,
[data-theme="dark"] .btn-export,
[data-theme="dark"] .btn-reload,
[data-theme="dark"] .date-picker {
    background: var(--color-surface);
    color: var(--color-text-strong);
    border-color: var(--color-border);
}

    [data-theme="dark"] .btn-nav:hover,
    [data-theme="dark"] .btn-today:hover,
    [data-theme="dark"] .btn-export:hover,
    [data-theme="dark"] .btn-reload:hover,
    [data-theme="dark"] .date-picker:hover {
        background: var(--color-surface-hover);
    }

/* Tell the browser to render native form-control chrome (including the
   calendar icon) in its dark variant. */
[data-theme="dark"] .date-picker {
    color-scheme: dark;
}

/* ============================================================
   Shared dialog buttons
   ============================================================ */
.btn-cancel {
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .btn-cancel:hover {
        background: var(--color-surface-hover);
    }

.btn-save {
    padding: 0.45rem 1rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .btn-save:hover:not(:disabled) {
        background: var(--color-primary-hover);
    }

    .btn-save:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-delete {
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-danger);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

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

.btn-cancel-edit {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .btn-cancel-edit:hover {
        background: var(--color-surface-alt);
    }

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

    .btn-back:hover {
        background: var(--color-surface-hover);
        border-color: var(--color-text-subtle);
    }

/* ── FluentUI dialog footer buttons ─────────────────────────────────────────
   Applied as Class="btn-dialog-*" on <FluentButton>.
   CSS custom properties cascade into FAST shadow DOM;
   the explicit color/background lines serve as fallback.
   ───────────────────────────────────────────────────────────────────────── */

/* Cancel / neutral outline */
.btn-dialog-cancel {
    --neutral-foreground-rest: var(--color-text-strong);
    --neutral-stroke-rest:     var(--color-border);
    color: var(--color-text-strong) !important;
    border-color: var(--color-border) !important;
    background: transparent !important;
}

.btn-dialog-cancel:hover {
    background: var(--color-surface-hover) !important;
}

[data-theme="dark"] .btn-dialog-cancel {
    --neutral-foreground-rest: var(--color-text-strong);
    --neutral-stroke-rest:     var(--color-border);
    color: var(--color-text-strong) !important;
    border-color: var(--color-border) !important;
    background: transparent !important;
}

[data-theme="dark"] .btn-dialog-cancel:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Delete / danger — solid red */
.btn-dialog-danger {
    padding: 0.45rem 1rem;
    background: var(--color-danger-bright);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

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

[data-theme="dark"] .btn-dialog-danger {
    background: var(--color-danger-bright);
}

[data-theme="dark"] .btn-dialog-danger:hover {
    background: var(--color-danger-mid);
}

/* Absence / vacation navigation — green outline */
.btn-dialog-nav {
    --neutral-foreground-rest: #166534;
    --neutral-stroke-rest:     #86efac;
    color: #166534 !important;
    border-color: #86efac !important;
    background: transparent !important;
}

.btn-dialog-nav:hover {
    background: rgba(22, 101, 52, 0.08) !important;
}

[data-theme="dark"] .btn-dialog-nav {
    --neutral-foreground-rest: #86efac;
    --neutral-stroke-rest:     #14532d;
    color: #86efac !important;
    border-color: #14532d !important;
    background: rgba(20, 83, 45, 0.15) !important;
}

[data-theme="dark"] .btn-dialog-nav:hover {
    background: rgba(20, 83, 45, 0.28) !important;
}

/* Orange — marketplace / highlight actions */
.btn-dialog-orange {
    --neutral-foreground-rest: #ffffff;
    --neutral-fill-rest:       var(--color-warning-accent);
    --neutral-fill-hover:      #dc6803;
    --neutral-fill-active:     #b45309;
    color: #ffffff !important;
    background: var(--color-warning-accent) !important;
    border-color: transparent !important;
}

.btn-dialog-orange:hover:not([disabled]) {
    background: #dc6803 !important;
}

.btn-dialog-orange[disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

[data-theme="dark"] .btn-dialog-orange {
    color: #ffffff !important;
    background: #dc6803 !important;
    border-color: transparent !important;
}

[data-theme="dark"] .btn-dialog-orange:hover:not([disabled]) {
    background: #b45309 !important;
}

/* Confirm / primary â€" green */
.btn-dialog-confirm {
    --neutral-foreground-rest: #ffffff;
    --neutral-fill-rest:       var(--color-primary);
    --neutral-fill-hover:      var(--color-primary-hover);
    --neutral-fill-active:     var(--color-primary-strong);
    --accent-fill-rest:        var(--color-primary);
    --accent-fill-hover:       var(--color-primary-hover);
    --accent-fill-active:      var(--color-primary-strong);
    color: #ffffff !important;
    background: var(--color-primary) !important;
    border-color: transparent !important;
}

.btn-dialog-confirm:hover:not([disabled]) {
    background: var(--color-primary-hover) !important;
}

.btn-dialog-confirm[disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

[data-theme="dark"] .btn-dialog-confirm {
    color: #ffffff !important;
    background: var(--color-primary) !important;
    border-color: transparent !important;
}

[data-theme="dark"] .btn-dialog-confirm:hover:not([disabled]) {
    background: var(--color-primary-hover) !important;
}

/* Override FluentUI FAST accent tokens so dialog primary (accent) buttons use site green.
   CSS custom properties cascade through shadow DOM, so setting on fluent-dialog is enough. */
fluent-dialog {
    --accent-fill-rest:        var(--color-primary);
    --accent-fill-hover:       var(--color-primary-hover);
    --accent-fill-active:      var(--color-primary-strong);
    --accent-fill-focus:       var(--color-primary);
    --foreground-on-accent-rest:   #ffffff;
    --foreground-on-accent-hover:  #ffffff;
    --foreground-on-accent-active: #ffffff;
}

fluent-dialog fluent-button[appearance="accent"] {
    --accent-fill-rest:        var(--color-primary);
    --accent-fill-hover:       var(--color-primary-hover);
    --accent-fill-active:      var(--color-primary-strong);
    color: #ffffff !important;
    background: var(--color-primary) !important;
    border-color: transparent !important;
}

fluent-dialog fluent-button[appearance="accent"]:hover {
    background: var(--color-primary-hover) !important;
}

/* ============================================================
   Shared shift item type colors
   Applied via element class names, scoped CSS need not duplicate.
   ============================================================ */
.shift-type-pill.type-unavailable,
.shift-type-pill.type-unavailable-pending {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.shift-type-pill.type-vacation,
.shift-type-pill.type-vacation-pending {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.shift-type-pill.type-request {
    background: var(--color-purple-soft);
    color: var(--color-purple);
}

.shift-type-pill.type-sick {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.shift-type-pill.type-other {
    background: var(--color-purple-soft);
    color: var(--color-purple);
}

.shift-type-pill.type-open {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.shift-type-pill.type-marketplace {
    background: var(--color-warning-amber);
    color: var(--color-warning-strong);
}

[data-theme="dark"] .shift-type-pill.type-marketplace {
    background: rgba(247, 144, 9, 0.22);
    color: #fde68a;
}

.shift-card.type-unavailable         { background: var(--color-danger-soft); }
.shift-card.type-vacation            { background: var(--color-success-soft); }
.shift-card.type-request             { background: var(--color-purple-soft); }
.shift-card.type-sick                { background: var(--color-warning-soft); }
.shift-card.type-other               { background: var(--color-purple-soft); }
.shift-card.type-open                { background: var(--color-warning-soft); border-style: dashed; }
.shift-card.type-vacation-pending    { background: var(--color-success-soft); border-style: dashed; }
.shift-card.type-unavailable-pending { background: var(--color-danger-soft); border-style: dashed; }

[data-theme="dark"] .shift-card.type-unavailable,
[data-theme="dark"] .shift-card.type-unavailable-pending {
    background: transparent;
    color: #f87171;
}

[data-theme="dark"] .shift-card.type-request {
    background: rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .shift-type-pill.type-request {
    background: rgba(139, 92, 246, 0.22);
    color: #d8b4fe;
}

[data-theme="dark"] .shift-type-pill.type-unavailable,
[data-theme="dark"] .shift-type-pill.type-unavailable-pending {
    background: transparent;
    color: #f87171;
}

/* ============================================================
   Shared day-message pills
   (used by MyRoster day cards, CompactRoster message list,
    and any other view that renders MOTD messages as pills)
   ============================================================ */
.day-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.2rem 0.45rem;
    border-radius: 5px;
    font-size: 0.72rem;
    line-height: 1.35;
}

.day-msg.company {
    background: var(--color-warning-amber);
    color: var(--color-warning-strong);
}

.day-msg.dept {
    background: var(--color-primary-soft);
    color: #1849a9;
}

.day-msg-icon {
    flex-shrink: 0;
    font-size: 0.7rem;
    line-height: 1.35;
}

.day-msg-text {
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Dark-theme overrides — keep amber/blue identity but ensure contrast. */
[data-theme="dark"] .day-msg.company {
    background: rgba(247, 144, 9, 0.22);
    color: #fde68a;
}

[data-theme="dark"] .day-msg.dept {
    background: rgba(46, 144, 250, 0.22);
    color: #bfdbfe;
}

/* ============================================================
   FluentUI dialog shell — dark mode
   fluent-dialog is a FAST web component; its chrome (backdrop,
   panel, header/footer dividers) lives in shadow DOM.
   We override it via:
     1. FAST CSS custom properties that cascade into the shadow.
     2. ::part() selectors for direct visual fallback.
   ============================================================ */
[data-theme="dark"] fluent-dialog {
    /* FAST design tokens — propagate into shadow DOM */
    --fill-color:                      #242932;
    --neutral-layer-floating:          #242932;
    --neutral-foreground-rest:         #f5f6f7;
    --neutral-stroke-rest:             #4a5060;
    --base-layer-luminance:            0.15;
    /* stealth button (dismiss × in header) */
    --neutral-fill-stealth-rest:       transparent;
    --neutral-fill-stealth-hover:      rgba(255, 255, 255, 0.08);
    --neutral-fill-stealth-active:     rgba(255, 255, 255, 0.12);
    /* outline button (e.g. Annuleren) */
    --neutral-fill-outline-rest:       transparent;
    --neutral-fill-outline-hover:      rgba(255, 255, 255, 0.08);
    --neutral-fill-outline-active:     rgba(255, 255, 255, 0.12);
    --neutral-stroke-strong:           #6b7280;
}

/* Fix outline (cancel) button rendering white-on-white in dark mode */
[data-theme="dark"] fluent-dialog fluent-button::part(control) {
    background: transparent;
    color: #d1d5db;
    border-color: #6b7280;
}

[data-theme="dark"] fluent-dialog fluent-button[appearance="accent"]::part(control) {
    background: var(--color-primary, #2563eb);
    color: #fff;
    border-color: transparent;
}

/* Place confirm (primary/accent) on the right, cancel on the left */
fluent-dialog .fluent-dialog-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
}

[data-theme="dark"] fluent-dialog::part(overlay) {
    background: rgba(0, 0, 0, 0.65);
}

/* Target both the legacy 'control' part name and the newer 'dialog' part name */
[data-theme="dark"] fluent-dialog::part(control),
[data-theme="dark"] fluent-dialog::part(dialog) {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* ============================================================
   Toast styling
   FluentUI renders .fluent-toast with FAST tokens; we override
   shape, shadow and animation here globally, and feed dark-mode
   via [data-theme="dark"] token overrides.
   ============================================================ */

/* ── Base shape & animation ────────────────────── */
.fluent-toast {
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow:
        4px 0 0 0 var(--toast-accent, #2e90fa) inset,
        0 4px 20px rgba(0, 0, 0, 0.12) !important;
    animation-name: toast-slide-in !important;
    animation-duration: 0.28s !important;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid var(--color-border-soft);
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    min-width: 300px !important;
}

@keyframes toast-slide-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Intent accent colours (left bar) ─────────── */
/* success */
.fluent-toast:has(fluent-icon[name="CheckmarkCircle"]),
.fluent-toast:has(fluent-icon[name="Checkmark"]) {
    --toast-accent: var(--color-success);
}

/* error */
.fluent-toast:has(fluent-icon[name="DismissCircle"]),
.fluent-toast:has(fluent-icon[name="ErrorCircle"]) {
    --toast-accent: var(--color-danger-strong);
}

/* warning */
.fluent-toast:has(fluent-icon[name="Warning"]) {
    --toast-accent: var(--color-warning-accent);
}

/* info (default) */
.fluent-toast:has(fluent-icon[name="Info"]) {
    --toast-accent: var(--color-primary);
}

/* ── Dark mode ─────────────────────────────────── */
[data-theme="dark"] .fluent-toast {
    --neutral-layer-floating:  var(--color-surface);
    --neutral-foreground-rest: var(--color-text);
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
    box-shadow:
        4px 0 0 0 var(--toast-accent, #2e90fa) inset,
        0 6px 24px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .fluent-toast .fluent-toast-title {
    color: var(--color-text-strong) !important;
}

[data-theme="dark"] .fluent-toast .fluent-toast-details,
[data-theme="dark"] .fluent-toast .fluent-toast-small {
    color: var(--color-text-muted) !important;
}

/* ── Intent accents in dark mode ──────────────── */
[data-theme="dark"] .fluent-toast:has(fluent-icon[name="CheckmarkCircle"]),
[data-theme="dark"] .fluent-toast:has(fluent-icon[name="Checkmark"]) {
    --toast-accent: var(--color-success);
}

[data-theme="dark"] .fluent-toast:has(fluent-icon[name="DismissCircle"]),
[data-theme="dark"] .fluent-toast:has(fluent-icon[name="ErrorCircle"]) {
    --toast-accent: #fca5a5;
}

[data-theme="dark"] .fluent-toast:has(fluent-icon[name="Warning"]) {
    --toast-accent: var(--color-warning);
}

[data-theme="dark"] .fluent-toast:has(fluent-icon[name="Info"]) {
    --toast-accent: var(--color-primary);
}

/* ── Dark-mode: green accent for checkboxes/toggles ───────────────────── */
[data-theme="dark"] input[type="checkbox"] {
    accent-color: var(--color-success-bright);
}

/* ============================================================
   Sidebar redesign — cohesive with the site's green design
   language (overrides DashUI defaults)
   ============================================================ */

/* ── Brand header ──────────────────────────────────────────── */
.sm-sidebar-brand {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    height: 60px;
    padding: 0 1.25rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

.sm-sidebar-brand-logo {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1;
}

.sm-sidebar-brand-logo span {
    color: var(--color-primary);
}

/* ── Section headings ──────────────────────────────────────── */
.navbar-vertical .navbar-heading {
    font-size: 0.675rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 1.1rem 1.25rem 0.35rem;
    margin: 0;
}

/* ── Nav items ─────────────────────────────────────────────── */
.navbar-vertical .navbar-nav.flex-column {
    width: 100%;
}

.navbar-vertical .navbar-nav .sm-nav-item {
    margin: 1px 0.5rem;
}

.navbar-vertical .navbar-nav .sm-nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
    text-decoration: none;
}

.navbar-vertical .navbar-nav .sm-nav-item .nav-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.92);
}

.navbar-vertical .navbar-nav .sm-nav-item .nav-link.active,
.navbar-vertical .navbar-nav .sm-nav-item .nav-link.sm-active {
    background: rgba(24, 160, 111, 0.15);
    color: #ffffff;
    font-weight: 500;
}

.navbar-vertical .navbar-nav .sm-nav-item .nav-link.active::before,
.navbar-vertical .navbar-nav .sm-nav-item .nav-link.sm-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-primary);
}

/* ── Icon wrapper ──────────────────────────────────────────── */
.sm-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    opacity: 1;
}

/* ── Nav text ──────────────────────────────────────────────── */
.sm-nav-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Sidebar structural tweaks ─────────────────────────────── */

/* Bootstrap .navbar forces flex-direction:row — we need a column */
.navbar-vertical.nav-dashboard,
.navbar-vertical.nav-dashboard.navbar {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    padding-top: 0;
    padding-bottom: 0;
}

/* Brand takes its natural height; scrollable area fills the rest */
.navbar-vertical.nav-dashboard .sm-sidebar-brand {
    flex-shrink: 0;
}

.navbar-vertical.nav-dashboard .h-100 {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

/* Ensure simplebar scrollable area fills remaining height */
.navbar-vertical.nav-dashboard .simplebar-content-wrapper {
    padding-bottom: 1rem;
}

/* ── Light mode — sidebar stays dark (no override needed);
      subtle elevation to differentiate from content area ── */
.app-menu {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
}

/* ── Scrollbar inside sidebar ──────────────────────────────── */
.app-menu .simplebar-scrollbar::before {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* ── Remove old DashUI active/hover bleed styles ───────────── */
.navbar-vertical .navbar-nav .nav-item .nav-link:before {
    display: none;
}

.btn-submit {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.82rem;
    cursor: pointer;
    font-weight: 600;
}

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

.btn-cancel {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--color-text-strong);
}

    .btn-cancel:hover {
        background: var(--color-surface-alt);
    }


.btn-delete {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-danger-tint);
    border-radius: 8px;
    background: var(--color-danger-bg-1);
    color: var(--color-danger-bright);
    font-size: 0.82rem;
    cursor: pointer;
    font-weight: 600;
}

    .btn-delete:hover {
        background: var(--color-danger-bg-2);
        border-color: var(--color-danger-light);
    }