/* ==========================================================================
   Audit Copilot - Fluent 2 theme layer
   --------------------------------------------------------------------------
   This file maps the Microsoft Fluent 2 design language (the same tokens the
   Microsoft.FluentUI.AspNetCore.Components library ships with) onto the
   Bootstrap markup that the existing pages are written in.

   It works by overriding Bootstrap's own CSS custom properties instead of
   fighting its selectors, so utilities such as `bg-primary bg-opacity-10`,
   `text-primary` and the `.btn-*` hover/active states keep behaving exactly
   as before - only the colours, typography, radii and shadows change.

   Load order matters: this stylesheet must come after bootstrap.min.css and
   app.css. See Components/App.razor.
   ========================================================================== */

:root {
    /* ---- Fluent 2 neutrals ------------------------------------------- */
    --fluent-neutral-background-1: #ffffff;
    --fluent-neutral-background-2: #fafafa;
    --fluent-neutral-background-3: #f5f5f5;
    --fluent-neutral-background-4: #f0f0f0;
    --fluent-neutral-background-hover: #f5f5f5;
    --fluent-neutral-background-selected: #ebebeb;
    --fluent-neutral-stroke-1: #d1d1d1;
    --fluent-neutral-stroke-2: #e0e0e0;
    --fluent-neutral-stroke-3: #f0f0f0;
    --fluent-neutral-foreground-1: #242424;
    --fluent-neutral-foreground-2: #424242;
    --fluent-neutral-foreground-3: #616161;
    --fluent-neutral-foreground-disabled: #bdbdbd;

    /* ---- Fluent 2 brand (communication blue) -------------------------- */
    --fluent-brand: #0f6cbd;
    --fluent-brand-rgb: 15, 108, 189;
    --fluent-brand-hover: #115ea3;
    --fluent-brand-pressed: #0c3b5e;
    --fluent-brand-selected: #0f548c;
    --fluent-brand-tint-10: #2886de;
    --fluent-brand-tint-40: #cfe4fa;
    --fluent-brand-tint-60: #ebf3fc;
    --fluent-brand-foreground-link: #0f6cbd;
    --fluent-brand-foreground-link-hover: #115ea3;

    /* ---- Fluent 2 shared (semantic) colours ---------------------------- */
    --fluent-success: #107c10;
    --fluent-success-rgb: 16, 124, 16;
    --fluent-success-tint: #dff6dd;
    --fluent-danger: #c50f1f;
    --fluent-danger-rgb: 197, 15, 31;
    --fluent-danger-tint: #fdf3f4;
    --fluent-warning: #f7630c;
    --fluent-warning-rgb: 247, 99, 12;
    --fluent-warning-tint: #fff4ce;
    --fluent-info: #0f6cbd;
    --fluent-info-rgb: 15, 108, 189;
    --fluent-purple: #5c2e91;
    --fluent-purple-rgb: 92, 46, 145;
    --fluent-teal: #038387;

    /* ---- Fluent 2 elevation -------------------------------------------- */
    --fluent-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
    --fluent-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
    --fluent-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
    --fluent-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
    --fluent-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);

    /* ---- Fluent 2 corner radii ----------------------------------------- */
    --fluent-radius-small: 2px;
    --fluent-radius-medium: 4px;
    --fluent-radius-large: 6px;
    --fluent-radius-xlarge: 8px;

    /* ---- Fluent 2 typography -------------------------------------------- */
    --fluent-font-family: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;

    /* Shell metrics */
    --fluent-header-height: 48px;
    --fluent-nav-width: 260px;

    /* ---- Bootstrap variable remap --------------------------------------- */
    --bs-font-sans-serif: var(--fluent-font-family);
    --bs-body-font-family: var(--fluent-font-family);
    --bs-body-font-size: 0.875rem;
    --bs-body-color: var(--fluent-neutral-foreground-1);
    --bs-body-color-rgb: 36, 36, 36;
    --bs-body-bg: var(--fluent-neutral-background-1);
    --bs-secondary-color: var(--fluent-neutral-foreground-3);
    --bs-emphasis-color: var(--fluent-neutral-foreground-1);
    --bs-border-color: var(--fluent-neutral-stroke-2);
    --bs-border-color-translucent: var(--fluent-neutral-stroke-2);
    --bs-border-radius: var(--fluent-radius-medium);
    --bs-border-radius-sm: var(--fluent-radius-small);
    --bs-border-radius-lg: var(--fluent-radius-large);
    --bs-border-radius-xl: var(--fluent-radius-xlarge);
    --bs-primary: var(--fluent-brand);
    --bs-primary-rgb: var(--fluent-brand-rgb);
    --bs-secondary: var(--fluent-neutral-foreground-3);
    --bs-secondary-rgb: 97, 97, 97;
    --bs-success: var(--fluent-success);
    --bs-success-rgb: var(--fluent-success-rgb);
    --bs-danger: var(--fluent-danger);
    --bs-danger-rgb: var(--fluent-danger-rgb);
    --bs-warning: var(--fluent-warning);
    --bs-warning-rgb: var(--fluent-warning-rgb);
    --bs-info: var(--fluent-info);
    --bs-info-rgb: var(--fluent-info-rgb);
    --bs-light: var(--fluent-neutral-background-3);
    --bs-light-rgb: 245, 245, 245;
    --bs-dark: var(--fluent-neutral-foreground-1);
    --bs-dark-rgb: 36, 36, 36;
    --bs-link-color: var(--fluent-brand-foreground-link);
    --bs-link-color-rgb: var(--fluent-brand-rgb);
    --bs-link-hover-color: var(--fluent-brand-foreground-link-hover);
    --bs-link-hover-color-rgb: 17, 94, 163;
    --bs-focus-ring-color: rgba(15, 108, 189, .35);
    --bs-tertiary-bg: var(--fluent-neutral-background-3);
    --bs-secondary-bg: var(--fluent-neutral-background-3);
}

/* ==========================================================================
   Typography
   ========================================================================== */

html, body {
    font-family: var(--fluent-font-family);
    font-size: 14px;
    color: var(--fluent-neutral-foreground-1);
    background-color: var(--fluent-neutral-background-3);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fluent-font-family);
    color: var(--fluent-neutral-foreground-1);
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Fluent type ramp */
h1 { font-size: 1.75rem; line-height: 2.25rem; }
h2 { font-size: 1.25rem; line-height: 1.75rem; }
h3 { font-size: 1.125rem; line-height: 1.5rem; }
h4 { font-size: 1rem; line-height: 1.375rem; }
h5, h6 { font-size: 0.875rem; line-height: 1.25rem; }

/* app.css draws a heavy underline below every h2; Fluent headings are quiet. */
h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.75rem;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

small, .small {
    font-size: 0.75rem;
}

.text-muted {
    color: var(--fluent-neutral-foreground-3) !important;
}

/* ==========================================================================
   Focus indicator (Fluent uses a crisp dark ring, not a soft glow)
   ========================================================================== */

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
a:focus-visible {
    outline: 2px solid var(--fluent-neutral-foreground-1);
    outline-offset: 1px;
    box-shadow: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: none;
}

/* ==========================================================================
   Buttons - Fluent 2 button anatomy
   ========================================================================== */

.btn {
    --bs-btn-border-radius: var(--fluent-radius-medium);
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-padding-y: 0.3125rem;
    --bs-btn-padding-x: 0.75rem;
    border-radius: var(--fluent-radius-medium);
    font-weight: 600;
    transition: background-color .1s cubic-bezier(.33,0,.67,1), border-color .1s cubic-bezier(.33,0,.67,1), color .1s cubic-bezier(.33,0,.67,1);
}

.btn-sm {
    --bs-btn-font-size: 0.75rem;
    --bs-btn-padding-y: 0.1875rem;
    --bs-btn-padding-x: 0.5rem;
}

.btn-lg {
    --bs-btn-font-size: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1.25rem;
}

/* Primary = Fluent "accent" button */
.btn-primary {
    --bs-btn-bg: var(--fluent-brand);
    --bs-btn-border-color: var(--fluent-brand);
    --bs-btn-hover-bg: var(--fluent-brand-hover);
    --bs-btn-hover-border-color: var(--fluent-brand-hover);
    --bs-btn-active-bg: var(--fluent-brand-pressed);
    --bs-btn-active-border-color: var(--fluent-brand-pressed);
    --bs-btn-disabled-bg: var(--fluent-neutral-background-4);
    --bs-btn-disabled-border-color: var(--fluent-neutral-stroke-2);
    --bs-btn-disabled-color: var(--fluent-neutral-foreground-disabled);
}

/* Secondary = Fluent "default" button: neutral surface with a stroke */
.btn-secondary {
    --bs-btn-color: var(--fluent-neutral-foreground-1);
    --bs-btn-bg: var(--fluent-neutral-background-1);
    --bs-btn-border-color: var(--fluent-neutral-stroke-1);
    --bs-btn-hover-color: var(--fluent-neutral-foreground-1);
    --bs-btn-hover-bg: var(--fluent-neutral-background-hover);
    --bs-btn-hover-border-color: var(--fluent-neutral-stroke-1);
    --bs-btn-active-color: var(--fluent-neutral-foreground-1);
    --bs-btn-active-bg: var(--fluent-neutral-background-selected);
    --bs-btn-active-border-color: var(--fluent-neutral-stroke-1);
    --bs-btn-disabled-color: var(--fluent-neutral-foreground-disabled);
    --bs-btn-disabled-bg: var(--fluent-neutral-background-4);
    --bs-btn-disabled-border-color: var(--fluent-neutral-stroke-2);
}

.btn-success {
    --bs-btn-bg: var(--fluent-success);
    --bs-btn-border-color: var(--fluent-success);
    --bs-btn-hover-bg: #0e700e;
    --bs-btn-hover-border-color: #0e700e;
    --bs-btn-active-bg: #0b5a0b;
    --bs-btn-active-border-color: #0b5a0b;
}

.btn-danger {
    --bs-btn-bg: var(--fluent-danger);
    --bs-btn-border-color: var(--fluent-danger);
    --bs-btn-hover-bg: #b10e1c;
    --bs-btn-hover-border-color: #b10e1c;
    --bs-btn-active-bg: #960b18;
    --bs-btn-active-border-color: #960b18;
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--fluent-warning);
    --bs-btn-border-color: var(--fluent-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #de5a0b;
    --bs-btn-hover-border-color: #de5a0b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c14f0a;
    --bs-btn-active-border-color: #c14f0a;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--fluent-info);
    --bs-btn-border-color: var(--fluent-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fluent-brand-hover);
    --bs-btn-hover-border-color: var(--fluent-brand-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--fluent-brand-pressed);
    --bs-btn-active-border-color: var(--fluent-brand-pressed);
}

.btn-light {
    --bs-btn-bg: var(--fluent-neutral-background-1);
    --bs-btn-border-color: var(--fluent-neutral-stroke-1);
    --bs-btn-hover-bg: var(--fluent-neutral-background-hover);
    --bs-btn-hover-border-color: var(--fluent-neutral-stroke-1);
    --bs-btn-active-bg: var(--fluent-neutral-background-selected);
}

.btn-outline-primary {
    --bs-btn-color: var(--fluent-brand);
    --bs-btn-border-color: var(--fluent-neutral-stroke-1);
    --bs-btn-hover-color: var(--fluent-brand-hover);
    --bs-btn-hover-bg: var(--fluent-brand-tint-60);
    --bs-btn-hover-border-color: var(--fluent-brand-tint-40);
    --bs-btn-active-color: var(--fluent-brand-pressed);
    --bs-btn-active-bg: var(--fluent-brand-tint-40);
    --bs-btn-active-border-color: var(--fluent-brand-tint-40);
}

.btn-outline-secondary {
    --bs-btn-color: var(--fluent-neutral-foreground-1);
    --bs-btn-border-color: var(--fluent-neutral-stroke-1);
    --bs-btn-hover-color: var(--fluent-neutral-foreground-1);
    --bs-btn-hover-bg: var(--fluent-neutral-background-hover);
    --bs-btn-hover-border-color: var(--fluent-neutral-stroke-1);
    --bs-btn-active-color: var(--fluent-neutral-foreground-1);
    --bs-btn-active-bg: var(--fluent-neutral-background-selected);
    --bs-btn-active-border-color: var(--fluent-neutral-stroke-1);
}

.btn-outline-success { --bs-btn-color: var(--fluent-success); --bs-btn-hover-bg: var(--fluent-success); --bs-btn-active-bg: #0b5a0b; }
.btn-outline-danger { --bs-btn-color: var(--fluent-danger); --bs-btn-hover-bg: var(--fluent-danger); --bs-btn-active-bg: #960b18; }
.btn-outline-info { --bs-btn-color: var(--fluent-info); --bs-btn-hover-bg: var(--fluent-info); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--fluent-brand-pressed); }
.btn-outline-warning { --bs-btn-color: #a4500a; --bs-btn-hover-bg: var(--fluent-warning); --bs-btn-hover-color: #fff; }

/* Fluent 2 "Subtle" button: transparent surface that only reveals a neutral
   background on hover. This is the Fluent appearance for row-level commands in
   a data grid - a table full of filled accent/danger buttons is off-pattern
   because Fluent reserves those fills for the single primary action on a page. */
.btn-subtle {
    --bs-btn-color: var(--fluent-neutral-foreground-2);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--fluent-neutral-foreground-1);
    --bs-btn-hover-bg: var(--fluent-neutral-background-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--fluent-neutral-foreground-1);
    --bs-btn-active-bg: var(--fluent-neutral-background-selected);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--fluent-neutral-foreground-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/* Destructive variant of the subtle button - colour carries the meaning, the
   surface stays neutral until the user hovers it. */
.btn-subtle-danger {
    --bs-btn-color: var(--fluent-danger);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #b10e1c;
    --bs-btn-hover-bg: var(--fluent-danger-tint);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #960b18;
    --bs-btn-active-bg: var(--fluent-danger-tint);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--fluent-neutral-foreground-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/* Command bar for the "Acties" column of a data grid. */
.table-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.table-actions .btn {
    white-space: nowrap;
}

/* Project-specific accents, restated with Fluent palette values */
.btn-teal {
    background-color: var(--fluent-teal) !important;
    border-color: var(--fluent-teal) !important;
    color: #fff;
}

.btn-teal:hover {
    background-color: #026d70 !important;
    border-color: #026d70 !important;
    color: #fff;
}

.btn-outline-purple {
    color: var(--fluent-purple);
    border-color: var(--fluent-neutral-stroke-1);
}

.btn-outline-purple:hover,
.btn-check:checked + .btn-outline-purple {
    color: #fff;
    background-color: var(--fluent-purple);
    border-color: var(--fluent-purple);
}

.btn-link {
    --bs-btn-color: var(--fluent-brand-foreground-link);
    --bs-btn-hover-color: var(--fluent-brand-foreground-link-hover);
    font-weight: 600;
}

/* Bootstrap `bg-*` utilities already read the --bs-*-rgb variables above, so
   the project's own purple/orange accents only need their raw values refreshed.
   Keeping the rgba(...) form means `bg-opacity-*` modifiers keep working. */
.bg-purple { background-color: rgba(var(--fluent-purple-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-purple { color: var(--fluent-purple) !important; }
.border-purple { border-color: var(--fluent-purple) !important; }
.bg-secondary-custom { background-color: rgba(var(--fluent-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-secondary-custom { color: #a4500a !important; }
.border-secondary-custom { border-color: var(--fluent-warning) !important; }

/* ==========================================================================
   Form controls - Fluent 2 input anatomy (accent stroke on focus)
   ========================================================================== */

.form-control,
.form-select {
    border-radius: var(--fluent-radius-medium);
    border: 1px solid var(--fluent-neutral-stroke-1);
    border-bottom-color: var(--fluent-neutral-foreground-3);
    background-color: var(--fluent-neutral-background-1);
    color: var(--fluent-neutral-foreground-1);
    font-size: 0.875rem;
    padding: 0.3125rem 0.625rem;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--fluent-neutral-stroke-1);
    border-bottom-color: var(--fluent-neutral-foreground-1);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fluent-neutral-stroke-1);
    border-bottom: 2px solid var(--fluent-brand);
    padding-bottom: calc(0.3125rem - 1px);
    box-shadow: none;
    outline: none;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--fluent-neutral-background-3);
    color: var(--fluent-neutral-foreground-disabled);
    border-color: var(--fluent-neutral-stroke-2);
}

.form-control-sm, .form-select-sm { font-size: 0.75rem; }

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
    margin-bottom: 0.25rem;
}

.form-check-input {
    border-color: var(--fluent-neutral-foreground-3);
    border-radius: var(--fluent-radius-small);
}

.form-check-input:checked {
    background-color: var(--fluent-brand);
    border-color: var(--fluent-brand);
}

.form-check-input:focus {
    border-color: var(--fluent-brand);
    box-shadow: none;
}

.darker-border-checkbox.form-check-input {
    border-color: var(--fluent-neutral-foreground-3);
}

.input-group-text {
    background-color: var(--fluent-neutral-background-3);
    border-color: var(--fluent-neutral-stroke-1);
    color: var(--fluent-neutral-foreground-2);
    font-size: 0.875rem;
}

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--fluent-success); }
.invalid { outline: 1px solid var(--fluent-danger); }
.validation-message { color: var(--fluent-danger); font-size: 0.75rem; }

/* ==========================================================================
   Cards & surfaces - Fluent 2 layers
   ========================================================================== */

.card {
    border: 1px solid var(--fluent-neutral-stroke-2);
    border-radius: var(--fluent-radius-xlarge);
    background-color: var(--fluent-neutral-background-1);
    box-shadow: var(--fluent-shadow-2);
}

.card-header {
    background-color: var(--fluent-neutral-background-1);
    border-bottom: 1px solid var(--fluent-neutral-stroke-2);
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

.card-title {
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

.card-footer {
    background-color: var(--fluent-neutral-background-2);
    border-top: 1px solid var(--fluent-neutral-stroke-2);
}

.dashboard-card {
    border: 1px solid var(--fluent-neutral-stroke-2);
    border-radius: var(--fluent-radius-xlarge);
    box-shadow: var(--fluent-shadow-2);
    transition: box-shadow .15s cubic-bezier(.33,0,.67,1), border-color .15s cubic-bezier(.33,0,.67,1);
}

.dashboard-card-hover:hover {
    box-shadow: var(--fluent-shadow-16);
    transform: none;
    border-color: var(--fluent-neutral-stroke-1);
}

.dashboard-icon { color: var(--fluent-brand); }

.dashboard-card .card-title { color: var(--fluent-neutral-foreground-1); }

.welcome-hero h1 { color: var(--fluent-neutral-foreground-1); font-weight: 600; }
.welcome-hero .lead { color: var(--fluent-neutral-foreground-3); font-size: 1rem; }

.section-row,
.task-row {
    border: 1px solid var(--fluent-neutral-stroke-2);
    border-radius: var(--fluent-radius-large);
    background: var(--fluent-neutral-background-1);
}

.section-row:hover,
.task-row:hover {
    background-color: var(--fluent-neutral-background-hover);
    box-shadow: var(--fluent-shadow-4);
}

.section-title { color: var(--fluent-neutral-foreground-1); }

.task-description-area {
    background-color: var(--fluent-neutral-background-2);
    border: 1px solid var(--fluent-neutral-stroke-2);
    border-radius: var(--fluent-radius-medium);
    /* Fluent body text - app.css sizes this like a heading, which is off-scale. */
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.4286;
    color: var(--fluent-neutral-foreground-2);
    max-height: 8.5rem;
}

/* ==========================================================================
   Task detail dialog (Taken beheren / Mijn taken)
   Fluent 2 dialog anatomy: 24px gutters, a caption overline above the title,
   a subtle close button, and content surfaces built from neutral tokens.
   ========================================================================== */

.task-dialog .modal-content {
    border-radius: var(--fluent-radius-xlarge);
    overflow: hidden;
}

.task-dialog .modal-header {
    padding: 1.5rem 1.5rem 0;
    background-color: var(--fluent-neutral-background-1);
}

.task-dialog .modal-title {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

/* Caption line above the dialog title (section number + section name). */
.task-dialog-overline {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fluent-neutral-foreground-3);
}

/* Fluent dialogs close with a subtle icon button, not a tinted glyph image. */
.task-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--fluent-radius-medium);
    background-color: transparent;
    color: var(--fluent-neutral-foreground-2);
    font-size: 1rem;
    line-height: 1;
}

.task-dialog-close:hover {
    background-color: var(--fluent-neutral-background-hover);
    color: var(--fluent-neutral-foreground-1);
}

.task-dialog-close:active {
    background-color: var(--fluent-neutral-background-selected);
}

.task-dialog .modal-body {
    padding: 0;
    background-color: var(--fluent-neutral-background-1);
}

.task-dialog .modal-footer {
    padding: 1rem 1.5rem 1.25rem;
    background-color: var(--fluent-neutral-background-1);
    border-top: 1px solid var(--fluent-neutral-stroke-3);
    gap: 0.5rem;
}

/* Tab strip sits flush on the dialog divider. */
.task-dialog .nav-tabs .nav-link {
    padding: 0.5rem 0.875rem;
}

/* File / attachment tile inside the dialog. */
.doc-card {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    background-color: var(--fluent-neutral-background-1);
    border: 1px solid var(--fluent-neutral-stroke-2);
    border-radius: var(--fluent-radius-medium);
    cursor: pointer;
    transition: background-color .1s ease, box-shadow .1s ease, border-color .1s ease;
}

.doc-card:hover {
    background-color: var(--fluent-neutral-background-hover);
    border-color: var(--fluent-neutral-stroke-1);
    box-shadow: var(--fluent-shadow-4);
}

.doc-card-icon {
    flex-shrink: 0;
    font-size: 1.125rem;
    color: var(--fluent-brand);
}

.doc-card-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

.doc-card-meta {
    font-size: 0.75rem;
    color: var(--fluent-neutral-foreground-3);
}

/* ==========================================================================
   Page command bar
   Fluent 2 puts view switches and filters in a toolbar on the title line, on
   transparent chrome. Boxing them in a card reads as a content item, which is
   confusing directly above a list of rows that really are content.
   ========================================================================== */

.page-command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.page-command-bar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Fluent segmented control: one bordered group, the selected option filled. */
.segmented {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--fluent-neutral-stroke-1);
    border-radius: var(--fluent-radius-medium);
    background-color: var(--fluent-neutral-background-3);
}

.segmented-option {
    border: none;
    background-color: transparent;
    border-radius: calc(var(--fluent-radius-medium) - 1px);
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4286;
    color: var(--fluent-neutral-foreground-2);
    white-space: nowrap;
    transition: background-color .1s ease, color .1s ease;
}

.segmented-option:hover {
    background-color: var(--fluent-neutral-background-hover);
    color: var(--fluent-neutral-foreground-1);
}

.segmented-option.is-selected {
    background-color: var(--fluent-neutral-background-1);
    color: var(--fluent-brand);
    box-shadow: var(--fluent-shadow-2);
}

/* ==========================================================================
   Task detail drawer (Mijn taken)
   Fluent 2 uses an overlay Drawer, not a centered dialog, for the details of an
   item picked from a list: it is full height, slides in from the trailing edge
   and keeps the list visible behind the scrim. A dialog is reserved for short,
   blocking decisions.
   ========================================================================== */

.fluent-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: rgba(0, 0, 0, .4);
    animation: fluent-drawer-scrim .15s cubic-bezier(0, 0, .2, 1);
}

@keyframes fluent-drawer-scrim {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Layer that positions the panel against the trailing edge. */
.fluent-drawer-host {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.fluent-drawer {
    pointer-events: auto;
    width: min(820px, 100vw);
    max-width: 100vw;
    background-color: var(--fluent-neutral-background-1);
    box-shadow: var(--fluent-shadow-28);
    animation: fluent-drawer-in .2s cubic-bezier(0, 0, .2, 1);
    transition: width .2s cubic-bezier(0, 0, .2, 1);
}

/* Widened while the PDF preview shares the panel. */
.fluent-drawer-wide {
    width: min(1600px, 100vw);
}

@keyframes fluent-drawer-in {
    from { transform: translateX(2rem); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.fluent-drawer-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.fluent-drawer-header {
    flex-shrink: 0;
    padding: 1.5rem 1.5rem 0;
    background-color: var(--fluent-neutral-background-1);
}

/* Without header extras (tabs, progress) the title needs its own gap above the divider;
   with tabs the underline has to sit on the divider, so the gap is opt-in. */
.fluent-drawer-header.has-gap {
    padding-bottom: 1rem;
}

/* Single scrolling column inside the body, for drawers that hold a form instead of a
   tab column plus a preview panel. */
.fluent-drawer-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem;
}

.fluent-drawer-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    border-top: 1px solid var(--fluent-neutral-stroke-2);
}

.fluent-drawer-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background-color: var(--fluent-neutral-background-1);
    border-top: 1px solid var(--fluent-neutral-stroke-2);
}

.fluent-drawer .nav-tabs .nav-link {
    padding: 0.5rem 0.875rem;
}

@media (max-width: 900px) {
    .fluent-drawer,
    .fluent-drawer-wide {
        width: 100vw;
    }
}

/* --------------------------------------------------------------------------
   File upload surface.
   A native <input type="file"> cannot be themed, so it is stretched invisibly
   over a Fluent drop surface that carries the icon, label and hint.
   -------------------------------------------------------------------------- */
.upload-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.5rem 1rem;
    text-align: center;
    border: 1px dashed var(--fluent-neutral-stroke-1);
    border-radius: var(--fluent-radius-large);
    background-color: var(--fluent-neutral-background-2);
    cursor: pointer;
    transition: background-color .1s ease, border-color .1s ease;
}

.upload-zone:hover {
    border-color: var(--fluent-brand);
    background-color: var(--fluent-brand-tint-60);
}

/* Set by todoDropZone.js while files hover over the surface. */
.upload-zone.todo-drop-active {
    border-color: var(--fluent-brand);
    border-style: solid;
    background-color: var(--fluent-brand-tint-60);
}

.upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-zone-icon {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--fluent-brand);
}

.upload-zone-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

.upload-zone-hint {
    font-size: 0.75rem;
    color: var(--fluent-neutral-foreground-3);
}

.upload-zone.is-busy {
    pointer-events: none;
    opacity: .6;
}

/* Shown instead of the drop surface when no more files may be added. */
.upload-zone-locked {
    padding: 0.75rem 1rem;
    border: 1px solid var(--fluent-neutral-stroke-2);
    border-radius: var(--fluent-radius-large);
    background-color: var(--fluent-neutral-background-2);
    font-size: 0.8125rem;
    color: var(--fluent-neutral-foreground-3);
    text-align: center;
}

/* Section heading above a group inside the dialog body. */
.dialog-section-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fluent-neutral-foreground-3);
}

/* Fluent empty state: a muted glyph with a short line of guidance. */
.dialog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--fluent-neutral-foreground-3);
    text-align: center;
}

.dialog-empty i {
    font-size: 2rem;
    color: var(--fluent-neutral-stroke-1);
}

.dialog-empty p {
    margin: 0;
    font-size: 0.875rem;
}

/* Comment thread bubbles. */
.chat-bubble {
    max-width: 85%;
    padding: 0.625rem 0.875rem;
    background-color: var(--fluent-neutral-background-3);
    border: 1px solid var(--fluent-neutral-stroke-2);
    border-radius: var(--fluent-radius-large);
}

.chat-bubble-own {
    background-color: var(--fluent-brand-tint-60);
    border-color: var(--fluent-brand-tint-40);
}

.chat-bubble-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4286;
    color: var(--fluent-neutral-foreground-1);
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble-meta {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--fluent-neutral-foreground-3);
}

/* Audit trail rows. */
.audit-trail-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.625rem 0;
    font-size: 0.875rem;
    color: var(--fluent-neutral-foreground-2);
    border-bottom: 1px solid var(--fluent-neutral-stroke-3);
}

/* Side-by-side PDF preview panel. */
.pdf-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--fluent-neutral-background-3);
}

.pdf-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background-color: var(--fluent-neutral-background-1);
    border-bottom: 1px solid var(--fluent-neutral-stroke-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

.upload-drop-zone:hover {
    background-color: var(--fluent-brand-tint-60);
    border-color: var(--fluent-brand);
    transform: none;
}

/* ==========================================================================
   Tables - Fluent 2 data grid look
   ========================================================================== */

.table {
    --bs-table-border-color: var(--fluent-neutral-stroke-2);
    --bs-table-hover-bg: var(--fluent-neutral-background-hover);
    --bs-table-striped-bg: var(--fluent-neutral-background-2);
    font-size: 0.8125rem;
    color: var(--fluent-neutral-foreground-1);
}

.table > :not(caption) > * > * {
    padding: 0.5rem 0.625rem;
}

.table thead th {
    background-color: var(--fluent-neutral-background-1);
    color: var(--fluent-neutral-foreground-3);
    font-weight: 600;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-1);
    /* Long headers wrap instead of forcing the page into horizontal scroll. */
    white-space: normal;
}

.table td {
    /* Long tokens (GUIDs, IBANs) must not stretch a column past the viewport. */
    overflow-wrap: anywhere;
}

.table-bordered > :not(caption) > * > * {
    border-color: var(--fluent-neutral-stroke-2);
}

.table-responsive {
    border-radius: var(--fluent-radius-medium);
}

/* ==========================================================================
   Badges, alerts, progress
   ========================================================================== */

.badge {
    border-radius: var(--fluent-radius-medium);
    font-weight: 600;
    font-size: 0.6875rem;
    padding: 0.25em 0.5em;
}

.status-badge {
    font-size: 0.75rem !important;
    padding: 0.3em 0.6em !important;
}

/* Subtle Fluent 2 "counter/state" badges: tinted background with a matching
   outline instead of a solid fill, used for role/status/link columns. */
/* Rows that open a detail page on click. The stretched link on the first cell makes the
   whole row a real hyperlink, so navigation also works before the circuit is connected. */
.row-clickable {
    cursor: pointer;
    position: relative;
}

.row-clickable .row-actions {
    position: relative;
    z-index: 2;
}

.badge-fluent {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--fluent-neutral-stroke-1);
    border-radius: var(--fluent-radius-medium);
    background-color: var(--fluent-neutral-background-3);
    color: var(--fluent-neutral-foreground-2);
    font-weight: 600;
    font-size: 0.6875rem;
    line-height: 1.25;
    padding: 0.25em 0.5em;
    white-space: nowrap;
}

.badge-fluent-brand {
    border-color: var(--fluent-brand-tint-40);
    background-color: var(--fluent-brand-tint-60);
    color: var(--fluent-brand-pressed);
}

.badge-fluent-success {
    border-color: #9fd89f;
    background-color: var(--fluent-success-tint);
    color: #0b5a0b;
}

.badge-fluent-warning {
    border-color: #f2c894;
    background-color: var(--fluent-warning-tint);
    color: #8a4a08;
}

.alert {
    border-radius: var(--fluent-radius-medium);
    border-width: 1px;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
}

.alert-primary { --bs-alert-bg: var(--fluent-brand-tint-60); --bs-alert-border-color: var(--fluent-brand-tint-40); --bs-alert-color: var(--fluent-brand-pressed); }
.alert-success { --bs-alert-bg: var(--fluent-success-tint); --bs-alert-border-color: #9fd89f; --bs-alert-color: #0b5a0b; }
.alert-danger { --bs-alert-bg: var(--fluent-danger-tint); --bs-alert-border-color: #eeacb2; --bs-alert-color: #960b18; }
.alert-warning { --bs-alert-bg: var(--fluent-warning-tint); --bs-alert-border-color: #f2c894; --bs-alert-color: #8a4a08; }
.alert-info { --bs-alert-bg: var(--fluent-brand-tint-60); --bs-alert-border-color: var(--fluent-brand-tint-40); --bs-alert-color: var(--fluent-brand-pressed); }
.alert-secondary { --bs-alert-bg: var(--fluent-neutral-background-3); --bs-alert-border-color: var(--fluent-neutral-stroke-2); --bs-alert-color: var(--fluent-neutral-foreground-2); }

.progress {
    background-color: var(--fluent-neutral-background-4);
    border-radius: var(--fluent-radius-small);
}

.progress-bar { background-color: var(--fluent-brand); }

.spinner-border, .spinner-grow { color: var(--fluent-brand); }

/* ==========================================================================
   Overlays: modals, dropdowns, tooltips
   ========================================================================== */

.modal-content {
    border: none;
    border-radius: var(--fluent-radius-xlarge);
    box-shadow: var(--fluent-shadow-28);
}

.modal-header {
    border-bottom: 1px solid var(--fluent-neutral-stroke-3);
}

.modal-title { font-size: 1.25rem; font-weight: 600; }

.modal-footer {
    border-top: none;
}

/* --------------------------------------------------------------------------
   Fluent 2 confirmation dialog: a small centered surface with 24px gutters,
   a title without a divider, and the primary action leading in the footer.
   Used for the "work is not saved yet" prompts.
   -------------------------------------------------------------------------- */

.modal.fluent-dialog-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.4);
}

.fluent-dialog {
    width: 100%;
    max-width: 27.5rem;
    margin: 0;
}

.fluent-dialog .modal-content {
    padding: 1.5rem;
    gap: 0.75rem;
    background-color: var(--fluent-neutral-background-1);
}

.fluent-dialog .modal-header,
.fluent-dialog .modal-body,
.fluent-dialog .modal-footer {
    padding: 0;
    border: none;
}

.fluent-dialog .modal-title {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

.fluent-dialog .modal-body {
    font-size: 0.875rem;
    line-height: 1.4286;
    color: var(--fluent-neutral-foreground-2);
}

.fluent-dialog .modal-footer {
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Fluent 2 wizard dialog: a wide centered surface for a multi-step, blocking
   flow (template toepassen, kopieren van een ander project). Fluent keeps a
   dialog for a task the user must finish or cancel; the drawer is for the
   details of an item picked from a list.
   -------------------------------------------------------------------------- */

.fluent-wizard {
    width: 100%;
    max-width: 46rem;
    margin: 0;
}

.fluent-wizard .modal-content {
    max-height: 88vh;
    background-color: var(--fluent-neutral-background-1);
}

.fluent-wizard .modal-header {
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: none;
}

.fluent-wizard .modal-title {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

.fluent-wizard-subtitle {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--fluent-neutral-foreground-3);
}

.fluent-wizard .modal-body {
    padding: 0 1.5rem 0.5rem;
    overflow-y: auto;
}

.fluent-wizard .modal-footer {
    padding: 1rem 1.5rem 1.5rem;
    border-top: none;
    gap: 0.5rem;
}

.fluent-wizard-lead {
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.4286;
    color: var(--fluent-neutral-foreground-2);
}

/* Fluent renders a set of mutually exclusive options as selectable cards with
   radio semantics, not as clickable Bootstrap cards. */
.choice-card-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.choice-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    text-align: left;
    background-color: var(--fluent-neutral-background-1);
    border: 1px solid var(--fluent-neutral-stroke-1);
    border-radius: var(--fluent-radius-large);
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.choice-card:hover {
    background-color: var(--fluent-neutral-background-hover);
    border-color: var(--fluent-neutral-stroke-1);
}

.choice-card.is-selected {
    background-color: var(--fluent-brand-tint-60);
    border-color: var(--fluent-brand);
    box-shadow: inset 0 0 0 1px var(--fluent-brand);
}

.choice-card-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--fluent-brand);
}

.choice-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

.choice-card-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--fluent-neutral-foreground-3);
}

/* Slim determinate progress meter above the step content. */
.wizard-progress {
    height: 2px;
    margin-bottom: 1.25rem;
    background-color: var(--fluent-neutral-stroke-2);
    border-radius: 1px;
    overflow: hidden;
}

.wizard-progress-bar {
    height: 100%;
    background-color: var(--fluent-brand);
    transition: width 0.2s ease;
}

.wizard-section-list {
    border: 1px solid var(--fluent-neutral-stroke-2);
    border-radius: var(--fluent-radius-medium);
    overflow-y: auto;
}

.wizard-task-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-3);
}

.wizard-task-row:last-child {
    border-bottom: none;
}

.wizard-task-row:hover {
    background-color: var(--fluent-neutral-background-hover);
}

.wizard-task-index {
    flex-shrink: 0;
    min-width: 1.25rem;
    padding-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--fluent-neutral-foreground-3);
}

/* Borderless inputs so a row reads as text until it is focused. */
.wizard-input {
    width: 100%;
    padding: 0.125rem 0.25rem;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--fluent-radius-small);
    color: var(--fluent-neutral-foreground-1);
}

.wizard-input:hover {
    background-color: var(--fluent-neutral-background-hover);
}

.wizard-input:focus {
    outline: none;
    background-color: var(--fluent-neutral-background-1);
    border-color: var(--fluent-brand);
}

.wizard-input-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.wizard-input-description {
    font-size: 0.8125rem;
    color: var(--fluent-neutral-foreground-3);
}

.wizard-input-section {
    font-size: 1rem;
    font-weight: 600;
}

/* Keeps a form inside a drawer at a readable measure even when the panel is widened. */
.drawer-form {
    max-width: 60rem;
}

/* Two-column layout for wide drawers: metadata on the left, the task list fills
   the remaining width. Collapses to a single column on narrower viewports. */
.drawer-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.drawer-split-side > :last-child,
.drawer-split-main > :last-child {
    margin-bottom: 0;
}

.drawer-split-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 1200px) {
    .drawer-split {
        grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr);
        gap: 2.5rem;
    }

    .drawer-split-side {
        position: sticky;
        top: 0;
    }
}

/* At full drawer width the task title and description fit side by side. */
@media (min-width: 1500px) {
    .drawer-split-main .wizard-task-fields {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        gap: 0.25rem 0.75rem;
        align-items: start;
    }
}

.dropdown-menu {
    border: 1px solid var(--fluent-neutral-stroke-2);
    border-radius: var(--fluent-radius-medium);
    box-shadow: var(--fluent-shadow-16);    font-size: 0.875rem;
    padding: 0.25rem;
}

.dropdown-item {
    border-radius: var(--fluent-radius-medium);
    padding: 0.375rem 0.625rem;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--fluent-neutral-background-hover);
    color: var(--fluent-neutral-foreground-1);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--fluent-neutral-background-selected);
    color: var(--fluent-neutral-foreground-1);
}

.tooltip-inner {
    background-color: var(--fluent-neutral-background-1);
    color: var(--fluent-neutral-foreground-1);
    box-shadow: var(--fluent-shadow-16);
    border-radius: var(--fluent-radius-medium);
    font-size: 0.75rem;
}

/* ==========================================================================
   Tabs, pills, lists
   ========================================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--fluent-neutral-stroke-2);
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--fluent-neutral-foreground-2);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--fluent-neutral-foreground-1);
    background-color: var(--fluent-neutral-background-hover);
}

.nav-tabs .nav-link.active {
    color: var(--fluent-brand);
    background-color: transparent;
    border-bottom-color: var(--fluent-brand);
}

.nav-pills .nav-link {
    border-radius: var(--fluent-radius-medium);
    color: var(--fluent-neutral-foreground-2);
    font-weight: 600;
}

.nav-pills .nav-link.active {
    background-color: var(--fluent-brand);
}

.list-group-item {
    border-color: var(--fluent-neutral-stroke-2);
    font-size: 0.875rem;
}

.list-group-item.active {
    background-color: var(--fluent-brand);
    border-color: var(--fluent-brand);
}

.accordion-button:not(.collapsed) {
    background-color: var(--fluent-brand-tint-60);
    color: var(--fluent-brand-pressed);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: var(--fluent-neutral-stroke-2);
}

/* ==========================================================================
   Fluent UI Blazor components mixed into Bootstrap pages
   ========================================================================== */

fluent-button, fluent-text-field, fluent-select, fluent-combobox, fluent-tab {
    font-family: var(--fluent-font-family);
}