/* =========================================================================
   Breeze Cloud theme — implements the Breeze design style guide v1.1
   Space Grotesk · electric indigo · cool porcelain surfaces · 8/10/12px radii
   This file maps the guide's tokens onto Bootstrap 5.3 and restyles the
   components used across the application. Load after bootstrap.min.css.
   ========================================================================= */

:root {
    /* ---- Guide tokens (§9) ---- */
    --bz-font-ui: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --bz-font-code: "JetBrains Mono", ui-monospace, monospace;

    --bz-brand: #4048ff;
    --bz-brand-rgb: 64, 72, 255;
    --bz-brand-hover: #353dd6;
    --bz-brand-hover-rgb: 53, 61, 214;
    --bz-brand-soft: #e8e9ff;
    --bz-canvas: #f7f8fc;
    --bz-canvas-rgb: 247, 248, 252;
    --bz-surface: #ffffff;
    --bz-surface-muted: #f1f3f8;
    --bz-surface-muted-rgb: 241, 243, 248;
    --bz-surface-subtle: #fafbfe;
    --bz-text: #121214;
    --bz-text-rgb: 18, 18, 20;
    --bz-text-secondary: #4a4a52;
    --bz-text-secondary-rgb: 74, 74, 82;
    --bz-text-muted: #6e6e78;
    --bz-text-muted-rgb: 110, 110, 120;
    --bz-text-disabled: #9a9aa4;
    --bz-text-disabled-rgb: 154, 154, 164;
    --bz-border: #dadee8;
    --bz-border-rgb: 218, 222, 232;
    --bz-divider: #eceef4;
    --bz-control-border: #858c9c;

    --bz-accent-warm: #9a4d18;
    --bz-accent-warm-soft: #fff3e8;
    --bz-accent-teal: #0f766e;
    --bz-accent-teal-rgb: 15, 118, 110;
    --bz-accent-teal-soft: #eaf8f5;
    --bz-success: #15803d;
    --bz-success-rgb: 21, 128, 61;
    --bz-success-soft: #ecfdf3;
    --bz-success-dot: #22c55e;
    --bz-warning: #8a6a00;
    --bz-warning-rgb: 138, 106, 0;
    --bz-warning-soft: #fff8e1;
    --bz-danger: #b42318;
    --bz-danger-rgb: 180, 35, 24;
    --bz-danger-soft: #fff1f0;

    --bz-radius-control: 8px;
    --bz-radius-card: 10px;
    --bz-radius-overlay: 12px;
    --bz-radius-pill: 999px;
    --bz-shadow-overlay: 0 12px 32px rgb(18 18 20 / 16%);
    --bz-focus-halo: 0 0 0 3px rgb(64 72 255 / 16%);
    --bz-feature-gradient: linear-gradient(135deg, #353dd6, #4048ff);
    --bz-feature-gradient-green: linear-gradient(135deg, #15803d, #1e9e52);

    --bz-header-h: 60px;
    --bz-content-max: 1480px;
    --bz-page-gutter: 40px;
    --bz-control-h: 40px;
    --bz-control-h-sm: 32px;
    --bz-control-h-header: 36px;
    --bz-space-label: 6px;
    --bz-space-card: 18px;
    --bz-space-section: 28px;
    --bz-card-padding: 20px 22px;
    --bz-transition-fast: 120ms ease;
    --bz-transition-base: 180ms ease;

    /* ---- Legacy aliases kept so existing page-level CSS keeps resolving ---- */
    --white: var(--bz-surface);
    --white-rgb: 255, 255, 255;
    --black: var(--bz-text);
    --black-rgb: var(--bz-text-rgb);
    --grey: var(--bz-text-disabled);
    --grey-rgb: var(--bz-text-disabled-rgb);
    --off-white: var(--bz-canvas);
    --off-white-rgb: var(--bz-canvas-rgb);
    --brand: var(--bz-brand);
    --brand-rgb: var(--bz-brand-rgb);
    --brand-subtle-bg: var(--bz-brand-soft);
    --brand-subtle-line: #c9ccff;
    --brand-emphasis: var(--bz-brand-hover);
    --brand-hover: var(--bz-brand-hover);
    --brand-hover-rgb: var(--bz-brand-hover-rgb);
    --brand-active: var(--bz-brand-hover);
    --orange: var(--bz-warning);
    --orange-rgb: var(--bz-warning-rgb);
    --orange-subtle-bg: var(--bz-warning-soft);
    --orange-subtle-line: #f3e3a3;
    --orange-emphasis: var(--bz-warning);
    --orange-hover: #705600;
    --orange-active: #5e4800;
    --purple: var(--bz-brand);
    --purple-rgb: var(--bz-brand-rgb);
    --purple-subtle-bg: var(--bz-brand-soft);
    --purple-subtle-line: #c9ccff;
    --purple-emphasis: var(--bz-brand-hover);
    --red: var(--bz-danger);
    --red-rgb: var(--bz-danger-rgb);
    --red-subtle-bg: var(--bz-danger-soft);
    --red-subtle-line: #f7c8c4;
    --red-emphasis: var(--bz-danger);
    --red-hover: #961d13;
    --red-active: #7f1810;
    --pink: var(--bz-accent-warm);
    --pink-rgb: 154, 77, 24;
    --pink-subtle-bg: var(--bz-accent-warm-soft);
    --pink-subtle-line: #f5d5bd;
    --pink-emphasis: var(--bz-accent-warm);
    --aqua: var(--bz-accent-teal);
    --aqua-rgb: var(--bz-accent-teal-rgb);
    --aqua-subtle-bg: var(--bz-accent-teal-soft);
    --aqua-subtle-line: #bfe8de;
    --aqua-emphasis: var(--bz-accent-teal);
    --aqua-hover: #0c5f59;
    --aqua-active: #0a504b;
    --green: var(--bz-success);
    --green-rgb: var(--bz-success-rgb);
    --green-subtle-bg: var(--bz-success-soft);
    --green-subtle-line: #bfe9cc;
    --green-emphasis: var(--bz-success);
    --green-hover: #126b33;
    --green-active: #0f5a2b;

    /* ---- Bootstrap overrides ---- */
    --bs-font-sans-serif: var(--bz-font-ui);
    --bs-font-monospace: var(--bz-font-code);
    --bs-body-font-family: var(--bz-font-ui);
    --bs-body-font-size: 15px;
    --bs-body-line-height: 1.5;

    --bs-body-color: var(--bz-text);
    --bs-body-color-rgb: var(--bz-text-rgb);
    --bs-body-bg: var(--bz-canvas);
    --bs-body-bg-rgb: var(--bz-canvas-rgb);
    --bs-heading-color: var(--bz-text);
    --bs-emphasis-color: var(--bz-text);
    --bs-emphasis-color-rgb: var(--bz-text-rgb);

    --bs-secondary-color: var(--bz-text-muted);
    --bs-secondary-color-rgb: var(--bz-text-muted-rgb);
    --bs-secondary-bg: var(--bz-surface-muted);
    --bs-secondary-bg-rgb: var(--bz-surface-muted-rgb);
    --bs-tertiary-color: var(--bz-text-muted);
    --bs-tertiary-color-rgb: var(--bz-text-muted-rgb);
    --bs-tertiary-bg: var(--bz-surface-subtle);
    --bs-tertiary-bg-rgb: 250, 251, 254;

    --bs-border-color: var(--bz-border);
    --bs-border-color-rgb: var(--bz-border-rgb);
    --bs-border-color-translucent: var(--bz-border);
    --bs-border-radius: var(--bz-radius-control);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--bz-radius-card);
    --bs-border-radius-xl: var(--bz-radius-overlay);
    --bs-border-radius-xxl: 16px;
    --bs-border-radius-pill: var(--bz-radius-pill);

    --bs-primary: var(--bz-brand);
    --bs-primary-rgb: var(--bz-brand-rgb);
    --bs-primary-bg-subtle: var(--bz-brand-soft);
    --bs-primary-border-subtle: #c9ccff;
    --bs-primary-text-emphasis: var(--bz-brand-hover);

    --bs-secondary: var(--bz-text-muted);
    --bs-secondary-rgb: var(--bz-text-muted-rgb);
    --bs-secondary-bg-subtle: var(--bz-surface-muted);
    --bs-secondary-border-subtle: var(--bz-border);
    --bs-secondary-text-emphasis: var(--bz-text-secondary);

    --bs-success: var(--bz-success);
    --bs-success-rgb: var(--bz-success-rgb);
    --bs-success-bg-subtle: var(--bz-success-soft);
    --bs-success-border-subtle: #bfe9cc;
    --bs-success-text-emphasis: var(--bz-success);

    --bs-danger: var(--bz-danger);
    --bs-danger-rgb: var(--bz-danger-rgb);
    --bs-danger-bg-subtle: var(--bz-danger-soft);
    --bs-danger-border-subtle: #f7c8c4;
    --bs-danger-text-emphasis: var(--bz-danger);

    --bs-warning: var(--bz-warning);
    --bs-warning-rgb: var(--bz-warning-rgb);
    --bs-warning-bg-subtle: var(--bz-warning-soft);
    --bs-warning-border-subtle: #f3e3a3;
    --bs-warning-text-emphasis: var(--bz-warning);

    --bs-info: var(--bz-accent-teal);
    --bs-info-rgb: var(--bz-accent-teal-rgb);
    --bs-info-bg-subtle: var(--bz-accent-teal-soft);
    --bs-info-border-subtle: #bfe8de;
    --bs-info-text-emphasis: var(--bz-accent-teal);

    --bs-light: var(--bz-surface-muted);
    --bs-light-rgb: var(--bz-surface-muted-rgb);
    --bs-light-bg-subtle: var(--bz-surface-subtle);
    --bs-light-border-subtle: var(--bz-border);
    --bs-light-text-emphasis: var(--bz-text-secondary);

    --bs-dark: var(--bz-text);
    --bs-dark-rgb: var(--bz-text-rgb);
    --bs-dark-bg-subtle: var(--bz-surface-muted);
    --bs-dark-border-subtle: var(--bz-border);
    --bs-dark-text-emphasis: var(--bz-text);

    --bs-black: var(--bz-text);
    --bs-black-rgb: var(--bz-text-rgb);
    --bs-white: var(--bz-surface);
    --bs-white-rgb: 255, 255, 255;

    --bs-link-color: var(--bz-brand);
    --bs-link-color-rgb: var(--bz-brand-rgb);
    --bs-link-hover-color: var(--bz-brand-hover);
    --bs-link-hover-color-rgb: var(--bz-brand-hover-rgb);
    --bs-link-decoration: underline;

    --bs-form-valid-color: var(--bz-success);
    --bs-form-valid-border-color: var(--bz-success);
    --bs-form-invalid-color: var(--bz-danger);
    --bs-form-invalid-border-color: var(--bz-danger);

    --bs-focus-ring-color: rgb(64 72 255 / 16%);
    --bs-focus-ring-width: 3px;
}

@media (max-width: 1199px) {
    :root { --bz-page-gutter: 24px; }
}

@media (max-width: 767px) {
    :root {
        --bz-page-gutter: 16px;
        --bs-body-font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --bz-transition-fast: 0ms;
        --bz-transition-base: 0ms;
    }
}

/* =========================================================================
   BASE
   ========================================================================= */

body {
    font-family: var(--bz-font-ui);
    color: var(--bz-text);
    background: var(--bz-canvas);
    -webkit-font-smoothing: antialiased;
}

a {
    text-underline-offset: 2px;
    transition: color var(--bz-transition-fast);
}

hr {
    color: var(--bz-divider);
    opacity: 1;
}

legend {
    float: none;
}

code,
kbd,
pre,
samp,
.font-monospace {
    font-family: var(--bz-font-code);
    font-size: 13px;
}

code {
    color: var(--bz-text-secondary);
    background: var(--bz-surface-muted);
    padding: 1px 5px;
    border-radius: 4px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--bz-brand);
    outline-offset: 3px;
}

/* Fields show focus through their border + halo instead of an outline */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: none;
}

/* Page container: the guide's 1,480px content width, left-aligned beside the
   sidebar, with responsive gutters */
.main-content > .container-lg,
.main-footer > .container-lg {
    max-width: var(--bz-content-max);
    margin-left: 0;
    padding-left: var(--bz-page-gutter);
    padding-right: var(--bz-page-gutter);
}

.main-content {
    padding-top: 28px;
    padding-bottom: 72px;
}

/* =========================================================================
   TYPOGRAPHY (§3)
   ========================================================================= */

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--bz-font-ui);
    color: var(--bz-text);
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}

.h1, h1 {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.h2, h2 {
    font-size: 18px;
    font-weight: 500;
}

.h3, h3 {
    font-size: 16px;
    font-weight: 600;
}

.h4, h4 {
    font-size: 15px;
    font-weight: 600;
}

.h5, h5 {
    font-size: 16px;
    font-weight: 600;
}

.h6, h6 {
    font-size: 13px;
    font-weight: 400;
    color: var(--bz-text-muted);
}

/* Headings that sit inside a card act as card headings (16px / 600) */
.card h2,
.border.bg-white h2,
.accordion h2 {
    font-size: 16px;
    font-weight: 600;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.card-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: var(--bz-text-muted);
}

.lead {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--bz-text-secondary);
    max-width: 660px;
}

.small, small {
    font-size: 13px;
}

.text-secondary,
.text-muted,
.text-body-secondary,
.text-body-tertiary {
    color: var(--bz-text-muted) !important;
}

.fw-bold {
    font-weight: 600 !important;
}

@media (max-width: 859px) {
    .h1, h1 { font-size: 28px; }
}

/* =========================================================================
   BUTTONS (§6)
   ========================================================================= */

.btn {
    --bs-btn-font-family: var(--bz-font-ui);
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.4;
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 9px;
    --bs-btn-border-radius: var(--bz-radius-control);
    --bs-btn-focus-box-shadow: var(--bz-focus-halo);
    --bs-btn-disabled-opacity: 0.55;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--bz-control-h);
    white-space: nowrap;
    text-transform: none;
    transition: color var(--bz-transition-fast), background-color var(--bz-transition-fast),
        border-color var(--bz-transition-fast), box-shadow var(--bz-transition-fast);
}

.btn > .bz-icon,
.btn > .bz-brand-mark {
    flex: 0 0 auto;
}

.btn-group-sm > .btn,
.btn-sm {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 5px;
    --bs-btn-font-size: 13px;
    --bs-btn-border-radius: var(--bz-radius-control);
    min-height: var(--bz-control-h-sm);
    gap: 6px;
}

.btn-group-sm > .btn > .bz-icon,
.btn-sm > .bz-icon {
    width: 14px;
    height: 14px;
}

.btn-group-lg > .btn,
.btn-lg {
    --bs-btn-padding-x: 20px;
    --bs-btn-padding-y: 12px;
    --bs-btn-font-size: 14px;
    min-height: 48px;
}

/* Primary — indigo fill. `.btn-dark` is the app's existing primary action
   class, so it maps here rather than being renamed in every view. */
.btn-primary,
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bz-brand);
    --bs-btn-border-color: var(--bz-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bz-brand-hover);
    --bs-btn-hover-border-color: var(--bz-brand-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bz-brand-hover);
    --bs-btn-active-border-color: var(--bz-brand-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bz-brand);
    --bs-btn-disabled-border-color: var(--bz-brand);
}

/* Secondary — white fill, neutral border, charcoal text */
.btn-secondary,
.btn-outline-dark,
.btn-outline-secondary,
.btn-light,
.btn-outline-light {
    --bs-btn-color: var(--bz-text);
    --bs-btn-bg: var(--bz-surface);
    --bs-btn-border-color: var(--bz-border);
    --bs-btn-hover-color: var(--bz-text);
    --bs-btn-hover-bg: var(--bz-surface-muted);
    --bs-btn-hover-border-color: var(--bz-control-border);
    --bs-btn-active-color: var(--bz-text);
    --bs-btn-active-bg: var(--bz-surface-muted);
    --bs-btn-active-border-color: var(--bz-control-border);
    --bs-btn-disabled-color: var(--bz-text-disabled);
    --bs-btn-disabled-bg: var(--bz-surface);
    --bs-btn-disabled-border-color: var(--bz-border);
}

/* Subtle — pale indigo fill, dark indigo text. Used for contextual
   configuration actions ("Add …", Sync, Download) and selected states. */
.btn-subtle,
.btn-outline-primary,
.btn-success,
.btn-outline-success,
.btn-info,
.btn-outline-info {
    --bs-btn-color: var(--bz-brand-hover);
    --bs-btn-bg: var(--bz-brand-soft);
    --bs-btn-border-color: var(--bz-brand-soft);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bz-brand);
    --bs-btn-hover-border-color: var(--bz-brand);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bz-brand-hover);
    --bs-btn-active-border-color: var(--bz-brand-hover);
    --bs-btn-disabled-color: var(--bz-brand-hover);
    --bs-btn-disabled-bg: var(--bz-brand-soft);
    --bs-btn-disabled-border-color: var(--bz-brand-soft);
}

/* Danger — error foreground on error-soft surface; solid on hover */
.btn-danger,
.btn-outline-danger {
    --bs-btn-color: var(--bz-danger);
    --bs-btn-bg: var(--bz-danger-soft);
    --bs-btn-border-color: var(--bz-danger-soft);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bz-danger);
    --bs-btn-hover-border-color: var(--bz-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #961d13;
    --bs-btn-active-border-color: #961d13;
    --bs-btn-disabled-color: var(--bz-danger);
    --bs-btn-disabled-bg: var(--bz-danger-soft);
    --bs-btn-disabled-border-color: var(--bz-danger-soft);
}

/* Warning — amber label pair */
.btn-warning,
.btn-outline-warning {
    --bs-btn-color: var(--bz-warning);
    --bs-btn-bg: var(--bz-warning-soft);
    --bs-btn-border-color: var(--bz-warning-soft);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bz-warning);
    --bs-btn-hover-border-color: var(--bz-warning);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #705600;
    --bs-btn-active-border-color: #705600;
    --bs-btn-disabled-color: var(--bz-warning);
    --bs-btn-disabled-bg: var(--bz-warning-soft);
    --bs-btn-disabled-border-color: var(--bz-warning-soft);
}

.btn-link {
    --bs-btn-color: var(--bz-brand);
    --bs-btn-hover-color: var(--bz-brand-hover);
    --bs-btn-active-color: var(--bz-brand-hover);
    --bs-btn-font-weight: 600;
    text-decoration: none;
    min-height: 0;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-close {
    --bs-btn-close-color: var(--bz-text-secondary);
    --bs-btn-close-opacity: 0.8;
    --bs-btn-close-hover-opacity: 1;
    --bs-btn-close-focus-shadow: var(--bz-focus-halo);
    width: 30px;
    height: 30px;
    padding: 0;
    background-size: 14px;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-control);
    transition: background-color var(--bz-transition-fast), border-color var(--bz-transition-fast);
}

.btn-close:hover {
    background-color: var(--bz-surface-muted);
    border-color: var(--bz-control-border);
}

/* Button groups: keep 8px corners on the outer edges only */
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
    margin-left: -1px;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
    box-shadow: none;
}

/* =========================================================================
   FORMS (§6)
   ========================================================================= */

label,
.form-label,
.col-form-label,
.form-check-label {
    text-transform: none;
}

.form-label,
.col-form-label,
legend.form-label,
fieldset > legend {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bz-text);
    margin-bottom: var(--bz-space-label);
}

.col-form-label {
    padding-top: calc(var(--bz-control-h) / 2 - 0.7em);
    padding-bottom: 0;
}

.form-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--bz-text-muted);
}

[required] + label:not(.btn):after,
label:has(+ [required]):after,
label:has(+ div [required]):after,
legend:has(+ [required]):after,
legend:has(+ div [required]):after {
    content: "*";
    color: var(--bz-danger);
    vertical-align: super;
    line-height: 0;
    margin-left: 2px;
}

label > p:last-child {
    display: inline-block;
}

.form-control,
.form-select,
.input-group-text {
    --bs-border-color: var(--bz-border);
    font-size: 15px;
    line-height: 1.4;
    color: var(--bz-text);
    background-color: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-control);
    padding: 9px 12px;
    min-height: var(--bz-control-h);
    transition: border-color var(--bz-transition-fast), box-shadow var(--bz-transition-fast),
        background-color var(--bz-transition-fast);
}

.form-control-sm,
.form-select-sm {
    font-size: 14px;
    padding: 5px 10px;
    min-height: var(--bz-control-h-sm);
    border-radius: var(--bz-radius-control);
}

.form-control-lg,
.form-select-lg {
    font-size: 16px;
    padding: 12px 14px;
    min-height: 48px;
}

textarea.form-control {
    min-height: 96px;
}

.form-control::placeholder {
    color: var(--bz-text-disabled);
    opacity: 1;
}

.form-control:hover:not(:disabled):not(:focus):not(.is-invalid),
.form-select:hover:not(:disabled):not(:focus):not(.is-invalid) {
    border-color: var(--bz-control-border);
}

.form-control:focus,
.form-select:focus,
.accordion-button:focus,
.page-link:focus,
.navbar-toggler:focus {
    color: var(--bz-text);
    background-color: var(--bz-surface);
    border-color: var(--bz-brand);
    box-shadow: var(--bz-focus-halo) !important;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--bz-surface-muted);
    border-color: var(--bz-border);
    color: var(--bz-text-disabled);
}

.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='%234a4a52' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 14px 12px;
    padding-right: 36px;
}

.input-group-text {
    color: var(--bz-text-muted);
    background-color: var(--bz-surface-subtle);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid,
.form-control.is-valid,
.was-validated .form-control:valid,
.form-select.is-valid,
.was-validated .form-select:valid {
    background-image: none;
    padding-right: 12px;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgb(180 35 24 / 16%) !important;
}

.invalid-feedback,
.valid-feedback {
    font-size: 13px;
}

/* Colour picker — one outlined well, the swatch fills it edge to edge */
.form-control-color {
    width: var(--bz-control-h);
    height: var(--bz-control-h);
    padding: 0;
    overflow: hidden;
}

.form-control-color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.form-control-color::-webkit-color-swatch {
    border: 0;
    border-radius: 0;
}

.form-control-color::-moz-color-swatch {
    border: 0;
    border-radius: 0;
}

.form-control-color.is-valid,
.was-validated .form-control-color:valid {
    padding-right: 0;
    width: var(--bz-control-h);
}

.input-group > .form-control-color {
    flex-grow: 0;
    width: var(--bz-control-h);
}

.input-group > .form-control-color::-webkit-color-swatch,
.input-group > .form-control-color::-moz-color-swatch {
    border-radius: 0;
}

/* File picker — dashed drop-well on the subtle surface */
.form-control[type="file"] {
    background-color: var(--bz-surface-subtle);
    border-style: dashed;
    border-color: var(--bz-control-border);
    padding: 0;
    overflow: hidden;
}

.form-control[type="file"]:hover:not(:disabled) {
    background-color: var(--bz-surface-muted);
}

.form-control[type="file"]:focus {
    border-style: solid;
    border-color: var(--bz-brand);
}

.form-control[type="file"]::file-selector-button {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--bz-brand-hover);
    background-color: var(--bz-brand-soft);
    border: 0;
    border-radius: var(--bz-radius-pill);
    padding: 4px 12px;
    margin: 7px 12px 7px 12px;
    cursor: pointer;
    transition: background-color var(--bz-transition-fast);
}

.form-control[type="file"]:hover::file-selector-button {
    background-color: #dfe0ff;
}

/* Checkboxes and radios */
.form-check {
    min-height: 24px;
    padding-left: 26px;
}

.form-check .form-check-input {
    margin-left: -26px;
}

.form-check-input {
    --bs-form-check-bg: var(--bz-surface);
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border: 1px solid var(--bz-control-border);
    background-color: var(--bz-surface);
    transition: background-color var(--bz-transition-fast), border-color var(--bz-transition-fast),
        box-shadow var(--bz-transition-fast);
}

.form-check-input[type="checkbox"] {
    border-radius: 4px;
}

.form-check-input:hover:not(:disabled) {
    border-color: var(--bz-brand);
}

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

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

.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input:disabled {
    background-color: var(--bz-surface-muted);
    border-color: var(--bz-border);
    opacity: 1;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
    color: var(--bz-text-disabled);
    opacity: 1;
}

.form-check-label {
    font-size: 15px;
}

th .form-check-input[type="checkbox"],
td .form-check-input[type="checkbox"] {
    margin-top: 0;
}

/* Switches — 42×24 track, 18px white thumb, 3px inset, 18px travel */
.form-switch {
    padding-left: 52px;
}

.form-switch .form-check-input,
.row.form-switch .form-check-input,
.form-switch.form-check-reverse .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    margin-top: 0;
    margin-left: -52px;
    font-size: 1rem;
    border: 0;
    border-radius: var(--bz-radius-pill);
    background-color: var(--bz-text-disabled);
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    background-size: contain;
    transition: background-position var(--bz-transition-base), background-color var(--bz-transition-base),
        box-shadow var(--bz-transition-fast);
}

.form-switch .form-check-input:hover:not(:disabled) {
    background-color: var(--bz-control-border);
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    border: 0;
    box-shadow: var(--bz-focus-halo);
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-color: var(--bz-brand);
    background-position: right center;
}

.form-switch .form-check-input:checked:hover:not(:disabled) {
    background-color: var(--bz-brand-hover);
}

.form-switch .form-check-input:disabled {
    background-color: var(--bz-border);
    opacity: 1;
}

.form-switch.form-check-reverse {
    padding-left: 0;
    padding-right: 52px;
}

.form-switch.form-check-reverse .form-check-input {
    margin-left: 0;
    margin-right: -52px;
}

.form-switch.form-check-reverse.row .form-check-input {
    margin-left: 0;
    margin-right: 0;
}

.row.form-switch {
    padding-left: 0;
    padding-right: 0;
}

.row.form-switch .form-check-input {
    margin-left: 0;
}

/* Row-based switches: label and 24px track share one line */
.row.form-switch > .col-form-label,
.row.form-switch > div > .col-form-label {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 24px;
    margin-bottom: 0;
}

.row.form-switch > div:has(> .form-check-input) {
    display: flex;
    align-items: center;
    min-height: 24px;
}

div:has(+ div > .form-check-input:disabled) {
    color: var(--bz-text-disabled);
}

/* =========================================================================
   CARDS AND CONTAINERS (§6)
   ========================================================================= */

.card {
    --bs-card-bg: var(--bz-surface);
    --bs-card-border-color: var(--bz-border);
    --bs-card-border-radius: var(--bz-radius-card);
    --bs-card-inner-border-radius: calc(var(--bz-radius-card) - 1px);
    --bs-card-spacer-y: 20px;
    --bs-card-spacer-x: 22px;
    --bs-card-cap-padding-y: 16px;
    --bs-card-cap-padding-x: 22px;
    --bs-card-cap-bg: var(--bz-surface);
    --bs-card-cap-color: var(--bz-text);
    --bs-card-title-spacer-y: 4px;
    box-shadow: none;
}

.card-header {
    border-bottom: 1px solid var(--bz-divider);
}

.card-footer {
    border-top: 1px solid var(--bz-divider);
}

.card-header.bg-white,
.card-footer.bg-white {
    background-color: var(--bz-surface) !important;
}

/* Existing pages use `.border.bg-white` as their content container — give
   those the default card treatment. */
.border.bg-white {
    --bs-border-color: var(--bz-border);
    border-radius: var(--bz-radius-card);
}

.border.bg-white > .table-responsive:last-child {
    border-bottom-left-radius: calc(var(--bz-radius-card) - 1px);
    border-bottom-right-radius: calc(var(--bz-radius-card) - 1px);
}

/* Content that hangs beneath a tab strip is its own card, 18px below */
.nav-tabs + .border.border-top-0.bg-white,
.border.border-top-0.bg-white {
    border-top: 1px solid var(--bz-border) !important;
    margin-top: var(--bz-space-card);
}

.shadow,
.shadow-sm,
.shadow-lg {
    box-shadow: none !important;
}

/* =========================================================================
   ACCORDIONS — rendered as stacked cards (settings pages)
   ========================================================================= */

.accordion {
    --bs-accordion-bg: var(--bz-surface);
    --bs-accordion-color: var(--bz-text);
    --bs-accordion-border-color: var(--bz-border);
    --bs-accordion-border-radius: var(--bz-radius-card);
    --bs-accordion-inner-border-radius: calc(var(--bz-radius-card) - 1px);
    --bs-accordion-btn-padding-x: 22px;
    --bs-accordion-btn-padding-y: 16px;
    --bs-accordion-btn-color: var(--bz-text);
    --bs-accordion-btn-bg: var(--bz-surface);
    --bs-accordion-active-bg: var(--bz-surface);
    --bs-accordion-active-color: var(--bz-text);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-body-padding-x: 22px;
    --bs-accordion-body-padding-y: 20px;
    --bs-accordion-btn-icon-width: 16px;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239a9aa4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%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='none' stroke='%239a9aa4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: flex;
    flex-direction: column;
    gap: var(--bz-space-card);
}

.d-flex > .accordion,
.d-flex > .flex-grow-1 {
    min-width: 0;
}

.accordion-item,
.accordion-item:first-of-type,
.accordion-item:last-of-type,
.accordion-item:not(:first-of-type) {
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-card);
}

.accordion-item:first-of-type > .accordion-header .accordion-button,
.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed,
.accordion-header .accordion-button {
    border-radius: calc(var(--bz-radius-card) - 1px);
}

.accordion-button {
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    transition: background-color var(--bz-transition-fast);
}

.accordion-button:hover {
    background-color: var(--bz-surface-subtle);
}

.accordion-button:not(.collapsed) {
    box-shadow: inset 0 -1px 0 var(--bz-divider);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.accordion-button:focus-visible {
    outline: 2px solid var(--bz-brand);
    outline-offset: -2px;
}

.accordion-item:last-of-type > .accordion-collapse {
    border-bottom-left-radius: calc(var(--bz-radius-card) - 1px);
    border-bottom-right-radius: calc(var(--bz-radius-card) - 1px);
}

/* =========================================================================
   DROPDOWNS (§6 submenus / overlay style)
   ========================================================================= */

.dropdown-menu {
    --bs-dropdown-bg: var(--bz-surface);
    --bs-dropdown-color: var(--bz-text);
    --bs-dropdown-border-color: var(--bz-border);
    --bs-dropdown-border-radius: var(--bz-radius-overlay);
    --bs-dropdown-inner-border-radius: var(--bz-radius-control);
    --bs-dropdown-padding-x: 6px;
    --bs-dropdown-padding-y: 6px;
    --bs-dropdown-spacer: 6px;
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-item-padding-x: 12px;
    --bs-dropdown-item-padding-y: 8px;
    --bs-dropdown-item-border-radius: var(--bz-radius-control);
    --bs-dropdown-link-color: var(--bz-text);
    --bs-dropdown-link-hover-color: var(--bz-text);
    --bs-dropdown-link-hover-bg: var(--bz-surface-muted);
    --bs-dropdown-link-active-color: var(--bz-brand-hover);
    --bs-dropdown-link-active-bg: var(--bz-brand-soft);
    --bs-dropdown-link-disabled-color: var(--bz-text-disabled);
    --bs-dropdown-divider-bg: var(--bz-divider);
    --bs-dropdown-divider-margin-y: 6px;
    --bs-dropdown-header-color: var(--bz-text-muted);
    --bs-dropdown-header-padding-x: 12px;
    --bs-dropdown-header-padding-y: 8px;
    --bs-dropdown-min-width: 200px;
    box-shadow: var(--bz-shadow-overlay);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    white-space: normal;
    transition: background-color var(--bz-transition-fast), color var(--bz-transition-fast);
}

.dropdown-item > .bz-icon {
    width: 16px;
    height: 16px;
    color: var(--bz-text-secondary);
}

.dropdown-item.active > .bz-icon,
.dropdown-item:active > .bz-icon {
    color: var(--bz-brand);
}

.dropdown-item.active:focus,
.dropdown-item.active:hover {
    background-color: var(--bz-brand-soft);
    color: var(--bz-brand-hover);
}

.dropdown-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
}

.dropdown-toggle {
    min-width: 2.5rem;
}

.dropdown-toggle::after {
    width: 12px;
    height: 12px;
    border: 0;
    vertical-align: -1px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e") center / contain no-repeat;
}

/* =========================================================================
   NAVIGATION
   ========================================================================= */

.nav-link {
    text-transform: none;
    white-space: nowrap;
}

/* Vertical local navigation (settings, billing) — navigation rows */
.nav-pills {
    --bs-nav-pills-border-radius: var(--bz-radius-control);
    --bs-nav-pills-link-active-color: var(--bz-brand-hover);
    --bs-nav-pills-link-active-bg: var(--bz-brand-soft);
    --bs-nav-link-color: var(--bz-text);
    --bs-nav-link-hover-color: var(--bz-text);
    --bs-nav-link-font-size: 15px;
    --bs-nav-link-padding-x: 12px;
    --bs-nav-link-padding-y: 8px;
    gap: 2px;
}

.nav-pills.flex-column {
    min-width: 220px;
}

.nav-pills .nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    line-height: 1.5;
    transition: background-color var(--bz-transition-fast), color var(--bz-transition-fast);
}

.nav-pills .nav-link > .bz-icon {
    width: 18px;
    height: 18px;
    color: var(--bz-text-secondary);
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: var(--bz-surface-muted);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    font-weight: 600;
}

.nav-pills .nav-link.active > .bz-icon {
    color: var(--bz-brand);
}

.nav-pills .nav-link.active:hover,
.nav-pills .show > .nav-link:hover {
    background-color: var(--bz-brand-soft);
}

.nav-pills .nav-link .badge {
    margin-left: auto;
}

/* Tab strips — one white bordered container, solid indigo active tab */
.nav-tabs {
    --bs-nav-tabs-border-width: 0;
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-active-color: #fff;
    --bs-nav-tabs-link-active-bg: var(--bz-brand);
    --bs-nav-tabs-link-active-border-color: var(--bz-brand);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-link-color: var(--bz-text-muted);
    --bs-nav-link-hover-color: var(--bz-text);
    --bs-nav-link-font-size: 13px;
    --bs-nav-link-font-weight: 600;
    --bs-nav-link-padding-x: 14px;
    --bs-nav-link-padding-y: 9px;
    display: inline-flex;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-card);
    border-bottom: 1px solid var(--bz-border);
    box-shadow: none;
    overflow: visible;
}

.nav-tabs .nav-item {
    display: flex;
}

.nav-tabs .nav-item:not(:first-child) {
    margin-left: 0;
    border-left: 1px solid var(--bz-divider);
}

.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    line-height: 1.4;
    transition: background-color var(--bz-transition-fast), color var(--bz-transition-fast);
}

.nav-tabs .nav-link > .bz-icon {
    width: 16px;
    height: 16px;
}

.nav-tabs .nav-link:hover:not(.active) {
    background-color: var(--bz-surface-muted);
    color: var(--bz-text);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #fff;
    background-color: var(--bz-brand);
}

.nav-tabs .nav-item:first-child .nav-link {
    border-top-left-radius: calc(var(--bz-radius-card) - 1px);
    border-bottom-left-radius: calc(var(--bz-radius-card) - 1px);
}

.nav-tabs .nav-item:last-child .nav-link {
    border-top-right-radius: calc(var(--bz-radius-card) - 1px);
    border-bottom-right-radius: calc(var(--bz-radius-card) - 1px);
}

/* Tab submenus: open on hover with a 6px gap that stays inside the hover
   region, so the pointer can travel into the menu without it closing. */
.nav-tabs .nav-item.dropdown {
    position: relative;
}

.nav-tabs .nav-item.dropdown > .dropdown-menu {
    margin-top: 6px;
}

.nav-tabs .dropdown-item {
    white-space: nowrap;
}

.nav-tabs .nav-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -7px;
    height: 7px;
}

@media (hover: hover) and (min-width: 768px) {
    .nav-tabs .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        top: 100%;
        left: 0;
    }
}

/* Segmented switches built as `.btn-group.nav.nav-tabs` (billing periods) */
.btn-group.nav-tabs {
    gap: 0;
}

.btn-group.nav-tabs .nav-item > .btn {
    border: 0;
    border-radius: 0;
    min-height: 38px;
}

.btn-group.nav-tabs .nav-item:first-child > .btn {
    border-top-left-radius: calc(var(--bz-radius-card) - 1px);
    border-bottom-left-radius: calc(var(--bz-radius-card) - 1px);
}

.btn-group.nav-tabs .nav-item:last-child > .btn {
    border-top-right-radius: calc(var(--bz-radius-card) - 1px);
    border-bottom-right-radius: calc(var(--bz-radius-card) - 1px);
}

.tab-content {
    padding-top: var(--bz-space-card);
}

/* =========================================================================
   NAVBAR — the application header (§5, §6)
   ========================================================================= */

.navbar {
    --bs-navbar-color: var(--bz-text);
    --bs-navbar-hover-color: var(--bz-text);
    --bs-navbar-disabled-color: var(--bz-text-disabled);
    --bs-navbar-active-color: var(--bz-brand-hover);
    --bs-navbar-brand-color: var(--bz-brand);
    --bs-navbar-brand-hover-color: var(--bz-brand-hover);
    --bs-navbar-brand-margin-end: 24px;
    --bs-navbar-brand-padding-y: 0;
    --bs-navbar-nav-link-padding-x: 12px;
    --bs-navbar-toggler-border-color: var(--bz-border);
    --bs-navbar-toggler-border-radius: var(--bz-radius-control);
    --bs-navbar-toggler-padding-x: 8px;
    --bs-navbar-toggler-padding-y: 6px;
    --bs-navbar-toggler-focus-width: 0;
}

.main-header {
    position: relative;
    min-height: var(--bz-header-h);
    padding: 0 20px;
    background: var(--bz-surface);
    border-bottom: 1px solid var(--bz-border);
}

.navbar-brand {
    display: flex;
    align-items: center;
    height: var(--bz-header-h);
}

.navbar-brand > img {
    /* Wordmark: same 20px box as the Event Editor's .breeze-brand .wordmark */
    display: block;
    height: 20px;
    width: auto;
    aspect-ratio: 534 / 118;
    vertical-align: unset;
}

.navbar-nav {
    gap: 4px;
}

.navbar-nav .nav-item.me-3 {
    margin-right: 0 !important;
}

.navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: var(--bz-radius-control);
    transition: background-color var(--bz-transition-fast), color var(--bz-transition-fast);
}

.navbar-nav .nav-link > .bz-icon {
    width: 18px;
    height: 18px;
    color: var(--bz-text-secondary);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-item.dropdown:hover > .nav-link,
.navbar-nav .nav-item.dropdown.show > .nav-link {
    color: var(--bz-text);
    background-color: var(--bz-surface-muted);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:hover,
.navbar-nav .nav-link.show:hover {
    color: var(--bz-brand-hover);
    background-color: var(--bz-brand-soft);
    font-weight: 600;
}

.navbar-nav .nav-link.active > .bz-icon {
    color: var(--bz-brand);
}

.navbar-toggler {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bz-text-secondary);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-control);
}

.navbar-toggler:hover {
    background-color: var(--bz-surface-muted);
    border-color: var(--bz-control-border);
    color: var(--bz-text);
}

.navbar-toggler > .bz-icon {
    width: 16px;
    height: 16px;
}

/* Header controls are 36px */
.main-header .form-select {
    min-height: var(--bz-control-h-header);
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 14px;
}

.main-header .btn {
    min-height: var(--bz-control-h-header);
    --bs-btn-padding-y: 6px;
}

.main-header .btn-icon {
    width: var(--bz-control-h-header);
    padding: 0;
}

/* Notifications bell: icon button */
.notifications-dropdown > .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bz-control-h-header);
    height: var(--bz-control-h-header);
    padding: 0;
    line-height: 1;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-control);
    color: var(--bz-text-secondary);
}

.notifications-dropdown > .nav-link:hover,
.notifications-dropdown.show > .nav-link {
    background-color: var(--bz-surface-muted);
    border-color: var(--bz-control-border);
    color: var(--bz-text);
}

.notifications-dropdown > .nav-link > .bz-icon {
    vertical-align: middle;
}

.notifications-dropdown > .nav-link > .bz-icon.text-primary {
    color: var(--bz-brand) !important;
}

.notifications-dropdown > .nav-link .badge {
    font-size: 10px;
    padding: 2px 5px;
    min-width: 16px;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        padding: 12px 0 16px;
    }

    .navbar-nav {
        gap: 2px;
        margin-bottom: 12px !important;
    }

    .navbar-nav .nav-link {
        display: flex;
    }

    .navbar-nav .dropdown-menu {
        box-shadow: none;
        border-color: var(--bz-divider);
        margin: 4px 0 8px;
    }
}

/* =========================================================================
   TABLES (§6)
   ========================================================================= */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bz-text);
    --bs-table-border-color: var(--bz-divider);
    --bs-table-striped-bg: var(--bz-surface-subtle);
    --bs-table-striped-color: var(--bz-text);
    --bs-table-hover-bg: var(--bz-surface-muted);
    --bs-table-hover-color: var(--bz-text);
    --bs-table-active-bg: var(--bz-brand-soft);
    --bs-table-active-color: var(--bz-brand-hover);
    font-size: 14px;
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: 13px 16px;
    vertical-align: middle;
    border-bottom-width: 1px;
}

.table > thead > tr > th,
.table > thead > tr > td {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    color: var(--bz-text-muted);
    background-color: var(--bz-surface-subtle);
    border-bottom: 1px solid var(--bz-border);
    white-space: nowrap;
}

.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--bz-surface-subtle);
}

.table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--bz-surface-muted);
}

.table td:has(.img-thumbnail) {
    padding: 8px 12px;
}

.img-thumbnail {
    background-color: var(--bz-surface-muted);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-control);
    padding: 2px;
}

th,
.table th {
    text-transform: none;
}

/* Row actions inside tables are 32px */
.table .btn:not(.btn-sm) {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 5px;
    min-height: var(--bz-control-h-sm);
}

/* =========================================================================
   PAGINATION
   ========================================================================= */

.pagination {
    --bs-pagination-padding-x: 10px;
    --bs-pagination-padding-y: 5px;
    --bs-pagination-font-size: 13px;
    --bs-pagination-color: var(--bz-text-secondary);
    --bs-pagination-bg: var(--bz-surface);
    --bs-pagination-border-color: var(--bz-border);
    --bs-pagination-border-radius: var(--bz-radius-control);
    --bs-pagination-hover-color: var(--bz-text);
    --bs-pagination-hover-bg: var(--bz-surface-muted);
    --bs-pagination-hover-border-color: var(--bz-control-border);
    --bs-pagination-focus-color: var(--bz-text);
    --bs-pagination-focus-bg: var(--bz-surface-muted);
    --bs-pagination-focus-box-shadow: var(--bz-focus-halo);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--bz-brand);
    --bs-pagination-active-border-color: var(--bz-brand);
    --bs-pagination-disabled-color: var(--bz-text-disabled);
    --bs-pagination-disabled-bg: var(--bz-surface);
    --bs-pagination-disabled-border-color: var(--bz-divider);
    gap: 4px;
    padding: 16px 0;
}

.page-item {
    text-transform: none;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--bz-control-h-sm);
    min-height: var(--bz-control-h-sm);
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--bz-radius-control) !important;
    transition: background-color var(--bz-transition-fast), border-color var(--bz-transition-fast);
}

.page-item:not(:first-child) .page-link {
    margin-left: 0;
}

.page-link > .bz-icon {
    width: 14px;
    height: 14px;
}

/* =========================================================================
   BADGES, PILLS, ALERTS
   ========================================================================= */

.badge {
    --bs-badge-font-size: 12px;
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: 10px;
    --bs-badge-padding-y: 3px;
    --bs-badge-border-radius: var(--bz-radius-pill);
    line-height: 1.4;
    text-transform: none;
    vertical-align: middle;
}

.badge.text-bg-secondary,
.badge.bg-secondary,
.badge.text-bg-light,
.badge.bg-light {
    color: var(--bz-text-secondary) !important;
    background-color: var(--bz-surface-muted) !important;
}

.badge.text-bg-success,
.badge.bg-success {
    color: var(--bz-success) !important;
    background-color: var(--bz-success-soft) !important;
}

.badge.text-bg-warning,
.badge.bg-warning {
    color: var(--bz-warning) !important;
    background-color: var(--bz-warning-soft) !important;
}

.badge.text-bg-danger,
.badge.bg-danger:not(.rounded-pill.position-absolute) {
    color: var(--bz-danger) !important;
    background-color: var(--bz-danger-soft) !important;
}

.badge.text-bg-info,
.badge.bg-info {
    color: var(--bz-accent-teal) !important;
    background-color: var(--bz-accent-teal-soft) !important;
}

.badge.text-bg-primary,
.badge.bg-primary {
    color: var(--bz-brand-hover) !important;
    background-color: var(--bz-brand-soft) !important;
}

/* Unread count on the bell stays a solid marker */
.badge.rounded-pill.position-absolute.bg-danger {
    color: #fff !important;
    background-color: var(--bz-danger) !important;
}

.badge-beta {
    color: var(--bz-accent-warm);
    background-color: var(--bz-accent-warm-soft);
}

.alert {
    --bs-alert-border-radius: var(--bz-radius-card);
    --bs-alert-padding-x: 16px;
    --bs-alert-padding-y: 12px;
    font-size: 14px;
}

/* =========================================================================
   MODALS AND DIALOGS (§6 overlay style)
   ========================================================================= */

.modal {
    --bs-modal-bg: var(--bz-surface);
    --bs-modal-border-color: transparent;
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--bz-radius-overlay);
    --bs-modal-inner-border-radius: var(--bz-radius-overlay);
    --bs-modal-box-shadow: var(--bz-shadow-overlay);
    --bs-modal-padding: 20px;
    --bs-modal-header-padding: 20px 20px 12px;
    --bs-modal-header-border-width: 0;
    --bs-modal-footer-border-color: var(--bz-divider);
    --bs-modal-footer-border-width: 1px;
    --bs-modal-footer-gap: 8px;
    --bs-modal-title-line-height: 1.4;
}

.modal-content {
    box-shadow: var(--bz-shadow-overlay);
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
}

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

.modal-header .btn-close {
    width: 30px;
    height: 30px;
    padding: 0;
    margin: -2px -2px -2px auto;
}

.modal-footer {
    padding: 12px 20px 20px;
}

.modal-backdrop {
    --bs-backdrop-bg: #121214;
    --bs-backdrop-opacity: 0.45;
}

dialog {
    color: var(--bz-text);
    background-color: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-overlay);
    padding: 20px;
    box-shadow: var(--bz-shadow-overlay);
}

dialog::backdrop {
    background: rgb(18 18 20 / 45%);
}

.popover {
    --bs-popover-bg: var(--bz-surface);
    --bs-popover-border-color: var(--bz-border);
    --bs-popover-border-radius: var(--bz-radius-overlay);
    --bs-popover-body-padding-x: 16px;
    --bs-popover-body-padding-y: 16px;
    --bs-popover-header-bg: var(--bz-surface);
    --bs-popover-header-color: var(--bz-text);
    --bs-popover-box-shadow: var(--bz-shadow-overlay);
    box-shadow: var(--bz-shadow-overlay);
}

.tooltip {
    --bs-tooltip-bg: var(--bz-text);
    --bs-tooltip-color: #fff;
    --bs-tooltip-border-radius: 6px;
    --bs-tooltip-font-size: 12px;
    --bs-tooltip-padding-x: 8px;
    --bs-tooltip-padding-y: 5px;
}

.offcanvas {
    --bs-offcanvas-bg: var(--bz-surface);
    --bs-offcanvas-border-color: var(--bz-border);
}

.list-group {
    --bs-list-group-bg: var(--bz-surface);
    --bs-list-group-border-color: var(--bz-divider);
    --bs-list-group-border-radius: var(--bz-radius-card);
    --bs-list-group-item-padding-x: 16px;
    --bs-list-group-item-padding-y: 10px;
    --bs-list-group-action-hover-bg: var(--bz-surface-muted);
    --bs-list-group-active-bg: var(--bz-brand-soft);
    --bs-list-group-active-color: var(--bz-brand-hover);
    --bs-list-group-active-border-color: var(--bz-divider);
}

.progress {
    --bs-progress-bg: var(--bz-surface-muted);
    --bs-progress-bar-bg: var(--bz-brand);
    --bs-progress-border-radius: var(--bz-radius-pill);
    --bs-progress-height: 8px;
}

/* =========================================================================
   ICONS — one SVG outline set (see App\Helpers\IconsHelper and <x-icon>)
   ========================================================================= */

.bz-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.2em;
    color: inherit;
}

.bz-icon--action {
    cursor: pointer;
    color: var(--bz-text-secondary);
    transition: color var(--bz-transition-fast);
}

.bz-icon--action:hover {
    color: var(--bz-brand);
}

.bz-icon--spin {
    animation: bz-spin 900ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .bz-icon--spin { animation-duration: 2400ms; }
}

/* Chevrons that open a collapsed row rotate instead of swapping glyphs */
.js-toggle-arrow {
    transition: transform var(--bz-transition-base);
}

.js-toggle-arrow.is-open {
    transform: rotate(90deg);
}

/* Legacy brand-mark sizing (kept for the public gallery/microsite skins, which
   still load Font Awesome; the app shell uses apple/windows/dropbox glyphs from IconsHelper). */
.bz-brand-mark {
    font-size: 16px;
    min-width: 16px;
    line-height: 1;
    text-align: center;
}

.status-dot--online {
    background: var(--bz-success-dot);
}

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

/* =========================================================================
   SUMMERNOTE
   ========================================================================= */

.note-editor.note-frame {
    border-color: var(--bz-border);
    border-radius: var(--bz-radius-control);
    overflow: hidden;
}

.note-editor .note-toolbar {
    background-color: var(--bz-surface-subtle);
    border-bottom: 1px solid var(--bz-divider);
    padding: 4px 6px;
}

.note-editor .note-toolbar > .note-btn-group {
    margin: 0 4px 0 0;
}

.note-btn-group .note-btn {
    border-color: var(--bz-border);
    min-height: 32px;
}

.note-btn.btn-outline-secondary {
    --bs-btn-color: var(--bz-text-secondary);
    --bs-btn-bg: var(--bz-surface);
    --bs-btn-border-color: var(--bz-border);
    --bs-btn-hover-color: var(--bz-text);
    --bs-btn-hover-bg: var(--bz-surface-muted);
    --bs-btn-hover-border-color: var(--bz-control-border);
    --bs-btn-active-color: var(--bz-brand-hover);
    --bs-btn-active-bg: var(--bz-brand-soft);
    --bs-btn-active-border-color: var(--bz-brand-soft);
}

.note-editor.note-frame .note-statusbar {
    background-color: var(--bz-surface-subtle);
    border-color: var(--bz-divider);
}

.note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar {
    border-color: var(--bz-border);
}

/* =========================================================================
   TOASTR
   ========================================================================= */

#toast-container > div {
    font-family: var(--bz-font-ui);
    font-size: 14px;
    color: var(--bz-text);
    background-color: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-left-width: 4px;
    border-radius: var(--bz-radius-card);
    box-shadow: var(--bz-shadow-overlay);
    opacity: 1;
    padding: 14px 16px 14px 48px;
    /* Leading status glyph: 20px outline icon in a 48px gutter, so it never
       scales to the toast's height or runs into the message text */
    background-repeat: no-repeat !important;
    background-position: 16px 14px !important;
    background-size: 20px 20px !important;
    line-height: 1.45;
}

#toast-container > div .toast-message { word-break: break-word; }
#toast-container > div .toast-close-button {
    top: 8px;
    right: 8px;
    color: var(--bz-text-secondary);
    text-shadow: none;
    opacity: .7;
    font-size: 18px;
    line-height: 1;
}
#toast-container > div .toast-close-button:hover { opacity: 1; color: var(--bz-text); }

#toast-container > div:hover {
    box-shadow: var(--bz-shadow-overlay);
    opacity: 1;
}

#toast-container > .toast-success {
    border-left-color: var(--bz-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3e%3c/svg%3e") !important;
}

#toast-container > .toast-error {
    border-left-color: var(--bz-danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='M12 8v5M12 16h.01'/%3e%3c/svg%3e") !important;
}

#toast-container > .toast-warning {
    border-left-color: var(--bz-warning);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 4 3 20h18L12 4z'/%3e%3cpath d='M12 10v4M12 17h.01'/%3e%3c/svg%3e") !important;
}

#toast-container > .toast-info {
    border-left-color: var(--bz-accent-teal);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='M12 11v5M12 8h.01'/%3e%3c/svg%3e") !important;
}

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

/* =========================================================================
   STATUS
   ========================================================================= */

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bz-success-dot);
    margin-right: 6px;
    vertical-align: middle;
}

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

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

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

.text-info {
    color: var(--bz-accent-teal) !important;
}