/* =====================================================================
   Say Affiliate Admin — design system
   Original stylesheet for the Say Affiliate Admin console. Built on top
   of vanilla Bootstrap 5 (unmodified, from wwwroot/lib/bootstrap) using
   Bootstrap's CSS-variable theming API — no third-party admin theme
   involved.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------- */
:root {
    --say-primary: #0A76BF;
    --say-primary-rgb: 10, 118, 191;
    --say-primary-dark: #075A94;
    --say-primary-light: #2A9DE6;
    --say-primary-tint: #E3F2FE;

    --say-accent: #F59E0B;
    --say-accent-rgb: 245, 158, 11;
    --say-accent-dark: #D97706;

    --say-info: #3B82F6;
    --say-info-rgb: 59, 130, 246;
    --say-info-dark: #2563EB;

    --say-success: #16A34A;
    --say-success-rgb: 22, 163, 74;
    --say-danger: #DC2626;
    --say-danger-rgb: 220, 38, 38;
    --say-warning: #F59E0B;
    --say-warning-rgb: 245, 158, 11;

    --say-ink-900: #0B1120;
    --say-ink-800: #131B2C;
    --say-ink-700: #1F2A3C;
    --say-ink-600: #334155;
    --say-ink-500: #64748B;
    --say-ink-400: #94A3B8;
    --say-ink-300: #CBD5E1;
    --say-ink-200: #E2E8F0;
    --say-ink-100: #F1F5F9;

    --say-surface: #FFFFFF;
    --say-bg: #EAF4FF;
    --say-border: #D6E6F6;

    --say-radius-sm: 8px;
    --say-radius: 12px;
    --say-radius-lg: 16px;
    --say-radius-xl: 20px;
    --say-radius-pill: 999px;

    --say-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --say-shadow: 0 6px 20px rgba(15, 23, 42, .08);
    --say-shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);

    --say-sidebar-width: 268px;
    --say-sidebar-collapsed-width: 84px;
    --say-topbar-height: 64px;

    --say-ease: 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    --say-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme="dark"] {
    --say-surface: #131B2C;
    --say-bg: #0B1120;
    --say-border: #232E45;
    --say-ink-900: #F1F5F9;
    --say-ink-800: #E2E8F0;
    --say-ink-700: #CBD5E1;
    --say-ink-600: #94A3B8;
    --say-ink-500: #7C8AA5;
    --say-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    --say-shadow-lg: 0 16px 40px rgba(0, 0, 0, .45);
}

/* ---------------------------------------------------------------------
   2. Bootstrap variable overrides — retheme stock Bootstrap components
   without touching Bootstrap's own CSS file.
   --------------------------------------------------------------------- */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bs-primary: var(--say-primary);
    --bs-primary-rgb: var(--say-primary-rgb);
    --bs-secondary: var(--say-ink-500);
    --bs-success: var(--say-success);
    --bs-success-rgb: var(--say-success-rgb);
    --bs-danger: var(--say-danger);
    --bs-danger-rgb: var(--say-danger-rgb);
    --bs-warning: var(--say-warning);
    --bs-warning-rgb: var(--say-warning-rgb);
    --bs-info: var(--say-info);
    --bs-info-rgb: var(--say-info-rgb);
    --bs-link-color: var(--say-primary);
    --bs-link-hover-color: var(--say-primary-dark);
    --bs-body-font-family: var(--say-font);
    --bs-border-radius: var(--say-radius);
    --bs-border-radius-sm: var(--say-radius-sm);
    --bs-border-radius-lg: var(--say-radius-lg);
    --bs-border-radius-xl: var(--say-radius-xl);
    --bs-border-radius-pill: var(--say-radius-pill);
}

[data-bs-theme="light"] {
    --bs-body-bg: var(--say-bg);
    --bs-body-color: var(--say-ink-700);
    --bs-border-color: var(--say-border);
    --bs-card-bg: var(--say-surface);
    --bs-card-border-color: var(--say-border);
    --bs-tertiary-bg: var(--say-ink-100);
    --bs-secondary-bg: var(--say-ink-100);
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--say-bg);
    --bs-body-color: var(--say-ink-700);
    --bs-border-color: var(--say-border);
    --bs-card-bg: var(--say-surface);
    --bs-card-border-color: var(--say-border);
    --bs-tertiary-bg: #1A2338;
    --bs-secondary-bg: #1A2338;
    --bs-emphasis-color: #F8FAFC;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--say-font);
    letter-spacing: -0.01em;
}

a { text-decoration: none; }

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

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--say-ink-300); border-radius: var(--say-radius-pill); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #2A3652; }

/* ---------------------------------------------------------------------
   3. Extended spacing / font-size utility scale
   This codebase uses spacing utilities beyond Bootstrap's default 0–5
   scale (e.g. p-6, gap-13, mb-14) and font sizes beyond fs-6. Values
   6–20 continue linearly at 0.25rem per step; fs-7 continues the type
   scale one step below fs-6.
   --------------------------------------------------------------------- */
:root {
    --say-spacer: 0.25rem;
}
@media (min-width: 0px) {
    :root { --say-spacer: 0.25rem; }
}

.fs-7 { font-size: .8125rem !important; }

/* stylelint-disable */

/* extended spacing scale 6–20 (0.25rem per step) */
.m-6 { margin: 1.5rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.ms-6 { margin-left: 1.5rem !important; }
.me-6 { margin-right: 1.5rem !important; }
.mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.p-6 { padding: 1.5rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pb-6 { padding-bottom: 1.5rem !important; }
.ps-6 { padding-left: 1.5rem !important; }
.pe-6 { padding-right: 1.5rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.gap-6 { gap: 1.5rem !important; }
.m-7 { margin: 1.75rem !important; }
.mt-7 { margin-top: 1.75rem !important; }
.mb-7 { margin-bottom: 1.75rem !important; }
.ms-7 { margin-left: 1.75rem !important; }
.me-7 { margin-right: 1.75rem !important; }
.mx-7 { margin-left: 1.75rem !important; margin-right: 1.75rem !important; }
.my-7 { margin-top: 1.75rem !important; margin-bottom: 1.75rem !important; }
.p-7 { padding: 1.75rem !important; }
.pt-7 { padding-top: 1.75rem !important; }
.pb-7 { padding-bottom: 1.75rem !important; }
.ps-7 { padding-left: 1.75rem !important; }
.pe-7 { padding-right: 1.75rem !important; }
.px-7 { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
.py-7 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
.gap-7 { gap: 1.75rem !important; }
.m-8 { margin: 2rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.ms-8 { margin-left: 2rem !important; }
.me-8 { margin-right: 2rem !important; }
.mx-8 { margin-left: 2rem !important; margin-right: 2rem !important; }
.my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.p-8 { padding: 2rem !important; }
.pt-8 { padding-top: 2rem !important; }
.pb-8 { padding-bottom: 2rem !important; }
.ps-8 { padding-left: 2rem !important; }
.pe-8 { padding-right: 2rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.gap-8 { gap: 2rem !important; }
.m-9 { margin: 2.25rem !important; }
.mt-9 { margin-top: 2.25rem !important; }
.mb-9 { margin-bottom: 2.25rem !important; }
.ms-9 { margin-left: 2.25rem !important; }
.me-9 { margin-right: 2.25rem !important; }
.mx-9 { margin-left: 2.25rem !important; margin-right: 2.25rem !important; }
.my-9 { margin-top: 2.25rem !important; margin-bottom: 2.25rem !important; }
.p-9 { padding: 2.25rem !important; }
.pt-9 { padding-top: 2.25rem !important; }
.pb-9 { padding-bottom: 2.25rem !important; }
.ps-9 { padding-left: 2.25rem !important; }
.pe-9 { padding-right: 2.25rem !important; }
.px-9 { padding-left: 2.25rem !important; padding-right: 2.25rem !important; }
.py-9 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
.gap-9 { gap: 2.25rem !important; }
.m-10 { margin: 2.5rem !important; }
.mt-10 { margin-top: 2.5rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.ms-10 { margin-left: 2.5rem !important; }
.me-10 { margin-right: 2.5rem !important; }
.mx-10 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }
.my-10 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
.p-10 { padding: 2.5rem !important; }
.pt-10 { padding-top: 2.5rem !important; }
.pb-10 { padding-bottom: 2.5rem !important; }
.ps-10 { padding-left: 2.5rem !important; }
.pe-10 { padding-right: 2.5rem !important; }
.px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.gap-10 { gap: 2.5rem !important; }
.m-11 { margin: 2.75rem !important; }
.mt-11 { margin-top: 2.75rem !important; }
.mb-11 { margin-bottom: 2.75rem !important; }
.ms-11 { margin-left: 2.75rem !important; }
.me-11 { margin-right: 2.75rem !important; }
.mx-11 { margin-left: 2.75rem !important; margin-right: 2.75rem !important; }
.my-11 { margin-top: 2.75rem !important; margin-bottom: 2.75rem !important; }
.p-11 { padding: 2.75rem !important; }
.pt-11 { padding-top: 2.75rem !important; }
.pb-11 { padding-bottom: 2.75rem !important; }
.ps-11 { padding-left: 2.75rem !important; }
.pe-11 { padding-right: 2.75rem !important; }
.px-11 { padding-left: 2.75rem !important; padding-right: 2.75rem !important; }
.py-11 { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
.gap-11 { gap: 2.75rem !important; }
.m-12 { margin: 3rem !important; }
.mt-12 { margin-top: 3rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.ms-12 { margin-left: 3rem !important; }
.me-12 { margin-right: 3rem !important; }
.mx-12 { margin-left: 3rem !important; margin-right: 3rem !important; }
.my-12 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.p-12 { padding: 3rem !important; }
.pt-12 { padding-top: 3rem !important; }
.pb-12 { padding-bottom: 3rem !important; }
.ps-12 { padding-left: 3rem !important; }
.pe-12 { padding-right: 3rem !important; }
.px-12 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.gap-12 { gap: 3rem !important; }
.m-13 { margin: 3.25rem !important; }
.mt-13 { margin-top: 3.25rem !important; }
.mb-13 { margin-bottom: 3.25rem !important; }
.ms-13 { margin-left: 3.25rem !important; }
.me-13 { margin-right: 3.25rem !important; }
.mx-13 { margin-left: 3.25rem !important; margin-right: 3.25rem !important; }
.my-13 { margin-top: 3.25rem !important; margin-bottom: 3.25rem !important; }
.p-13 { padding: 3.25rem !important; }
.pt-13 { padding-top: 3.25rem !important; }
.pb-13 { padding-bottom: 3.25rem !important; }
.ps-13 { padding-left: 3.25rem !important; }
.pe-13 { padding-right: 3.25rem !important; }
.px-13 { padding-left: 3.25rem !important; padding-right: 3.25rem !important; }
.py-13 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
.gap-13 { gap: 3.25rem !important; }
.m-14 { margin: 3.5rem !important; }
.mt-14 { margin-top: 3.5rem !important; }
.mb-14 { margin-bottom: 3.5rem !important; }
.ms-14 { margin-left: 3.5rem !important; }
.me-14 { margin-right: 3.5rem !important; }
.mx-14 { margin-left: 3.5rem !important; margin-right: 3.5rem !important; }
.my-14 { margin-top: 3.5rem !important; margin-bottom: 3.5rem !important; }
.p-14 { padding: 3.5rem !important; }
.pt-14 { padding-top: 3.5rem !important; }
.pb-14 { padding-bottom: 3.5rem !important; }
.ps-14 { padding-left: 3.5rem !important; }
.pe-14 { padding-right: 3.5rem !important; }
.px-14 { padding-left: 3.5rem !important; padding-right: 3.5rem !important; }
.py-14 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.gap-14 { gap: 3.5rem !important; }
.m-15 { margin: 3.75rem !important; }
.mt-15 { margin-top: 3.75rem !important; }
.mb-15 { margin-bottom: 3.75rem !important; }
.ms-15 { margin-left: 3.75rem !important; }
.me-15 { margin-right: 3.75rem !important; }
.mx-15 { margin-left: 3.75rem !important; margin-right: 3.75rem !important; }
.my-15 { margin-top: 3.75rem !important; margin-bottom: 3.75rem !important; }
.p-15 { padding: 3.75rem !important; }
.pt-15 { padding-top: 3.75rem !important; }
.pb-15 { padding-bottom: 3.75rem !important; }
.ps-15 { padding-left: 3.75rem !important; }
.pe-15 { padding-right: 3.75rem !important; }
.px-15 { padding-left: 3.75rem !important; padding-right: 3.75rem !important; }
.py-15 { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
.gap-15 { gap: 3.75rem !important; }
.m-16 { margin: 4rem !important; }
.mt-16 { margin-top: 4rem !important; }
.mb-16 { margin-bottom: 4rem !important; }
.ms-16 { margin-left: 4rem !important; }
.me-16 { margin-right: 4rem !important; }
.mx-16 { margin-left: 4rem !important; margin-right: 4rem !important; }
.my-16 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.p-16 { padding: 4rem !important; }
.pt-16 { padding-top: 4rem !important; }
.pb-16 { padding-bottom: 4rem !important; }
.ps-16 { padding-left: 4rem !important; }
.pe-16 { padding-right: 4rem !important; }
.px-16 { padding-left: 4rem !important; padding-right: 4rem !important; }
.py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.gap-16 { gap: 4rem !important; }
.m-17 { margin: 4.25rem !important; }
.mt-17 { margin-top: 4.25rem !important; }
.mb-17 { margin-bottom: 4.25rem !important; }
.ms-17 { margin-left: 4.25rem !important; }
.me-17 { margin-right: 4.25rem !important; }
.mx-17 { margin-left: 4.25rem !important; margin-right: 4.25rem !important; }
.my-17 { margin-top: 4.25rem !important; margin-bottom: 4.25rem !important; }
.p-17 { padding: 4.25rem !important; }
.pt-17 { padding-top: 4.25rem !important; }
.pb-17 { padding-bottom: 4.25rem !important; }
.ps-17 { padding-left: 4.25rem !important; }
.pe-17 { padding-right: 4.25rem !important; }
.px-17 { padding-left: 4.25rem !important; padding-right: 4.25rem !important; }
.py-17 { padding-top: 4.25rem !important; padding-bottom: 4.25rem !important; }
.gap-17 { gap: 4.25rem !important; }
.m-18 { margin: 4.5rem !important; }
.mt-18 { margin-top: 4.5rem !important; }
.mb-18 { margin-bottom: 4.5rem !important; }
.ms-18 { margin-left: 4.5rem !important; }
.me-18 { margin-right: 4.5rem !important; }
.mx-18 { margin-left: 4.5rem !important; margin-right: 4.5rem !important; }
.my-18 { margin-top: 4.5rem !important; margin-bottom: 4.5rem !important; }
.p-18 { padding: 4.5rem !important; }
.pt-18 { padding-top: 4.5rem !important; }
.pb-18 { padding-bottom: 4.5rem !important; }
.ps-18 { padding-left: 4.5rem !important; }
.pe-18 { padding-right: 4.5rem !important; }
.px-18 { padding-left: 4.5rem !important; padding-right: 4.5rem !important; }
.py-18 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.gap-18 { gap: 4.5rem !important; }
.m-19 { margin: 4.75rem !important; }
.mt-19 { margin-top: 4.75rem !important; }
.mb-19 { margin-bottom: 4.75rem !important; }
.ms-19 { margin-left: 4.75rem !important; }
.me-19 { margin-right: 4.75rem !important; }
.mx-19 { margin-left: 4.75rem !important; margin-right: 4.75rem !important; }
.my-19 { margin-top: 4.75rem !important; margin-bottom: 4.75rem !important; }
.p-19 { padding: 4.75rem !important; }
.pt-19 { padding-top: 4.75rem !important; }
.pb-19 { padding-bottom: 4.75rem !important; }
.ps-19 { padding-left: 4.75rem !important; }
.pe-19 { padding-right: 4.75rem !important; }
.px-19 { padding-left: 4.75rem !important; padding-right: 4.75rem !important; }
.py-19 { padding-top: 4.75rem !important; padding-bottom: 4.75rem !important; }
.gap-19 { gap: 4.75rem !important; }
.m-20 { margin: 5rem !important; }
.mt-20 { margin-top: 5rem !important; }
.mb-20 { margin-bottom: 5rem !important; }
.ms-20 { margin-left: 5rem !important; }
.me-20 { margin-right: 5rem !important; }
.mx-20 { margin-left: 5rem !important; margin-right: 5rem !important; }
.my-20 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.p-20 { padding: 5rem !important; }
.pt-20 { padding-top: 5rem !important; }
.pb-20 { padding-bottom: 5rem !important; }
.ps-20 { padding-left: 5rem !important; }
.pe-20 { padding-right: 5rem !important; }
.px-20 { padding-left: 5rem !important; padding-right: 5rem !important; }
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.gap-20 { gap: 5rem !important; }

@media (min-width: 576px) {
    .px-sm-12 { padding-left: 3rem !important; padding-right: 3rem !important; }
}

/* ---------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------- */
.btn {
    font-weight: 600;
    font-size: .875rem;
    border-radius: var(--say-radius-sm);
    padding-block: .55rem;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding-block: .35rem; border-radius: 8px; }

.btn-primary {
    background: var(--say-primary);
    border-color: var(--say-primary);
    box-shadow: 0 2px 8px rgba(var(--say-primary-rgb), .28);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--say-primary-dark);
    border-color: var(--say-primary-dark);
    box-shadow: 0 6px 16px rgba(var(--say-primary-rgb), .35);
}

.btn-icon { width: 2.375rem; padding-left: 0; padding-right: 0; display: inline-flex; align-items: center; justify-content: center; }

/* Soft / "label" button variants used across the CMS (list toolbars, tags) */
.btn-label-primary   { background: rgba(var(--say-primary-rgb), .12); color: var(--say-primary-dark); border: 1px solid transparent; }
.btn-label-primary:hover   { background: rgba(var(--say-primary-rgb), .2); color: var(--say-primary-dark); }
.btn-label-secondary { background: var(--say-ink-100); color: var(--say-ink-600); border: 1px solid transparent; }
.btn-label-secondary:hover { background: var(--say-ink-200); color: var(--say-ink-700); }
.btn-label-success    { background: rgba(var(--say-success-rgb), .12); color: var(--say-success); border: 1px solid transparent; }
.btn-label-success:hover    { background: rgba(var(--say-success-rgb), .2); }
.btn-label-danger    { background: rgba(var(--say-danger-rgb), .1); color: var(--say-danger); border: 1px solid transparent; }
.btn-label-danger:hover    { background: rgba(var(--say-danger-rgb), .18); }
.btn-label-warning   { background: rgba(var(--say-warning-rgb), .14); color: var(--say-accent-dark); border: 1px solid transparent; }
.btn-label-warning:hover   { background: rgba(var(--say-warning-rgb), .22); }
[data-bs-theme="dark"] .btn-label-secondary { background: var(--bs-tertiary-bg); color: var(--say-ink-600); }

.hide-arrow.dropdown-toggle::after { display: none; }

/* ---------------------------------------------------------------------
   5. Cards
   --------------------------------------------------------------------- */
.card {
    border-radius: var(--say-radius-lg);
    box-shadow: var(--say-shadow-sm);
}
.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--say-border);
    font-weight: 600;
}
.shadow-xl { box-shadow: var(--say-shadow-lg) !important; }
.shadow-lg { box-shadow: var(--say-shadow) !important; }

/* ---------------------------------------------------------------------
   6. Tables / DataTables
   --------------------------------------------------------------------- */
.card-datatable { padding: 0 .25rem; }
table.dataTable, .table {
    --bs-table-bg: transparent;
}
.table thead th {
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--say-ink-500);
    border-bottom-width: 1px;
    background: var(--say-ink-100);
}
[data-bs-theme="dark"] .table thead th { background: var(--bs-tertiary-bg); }
.table tbody tr:hover { background: rgba(var(--say-primary-rgb), .04); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--say-radius-sm);
}
.dt-scroll-head thead th { background: var(--say-ink-100); }

/* ---------------------------------------------------------------------
   7. Forms
   --------------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--say-radius-sm);
    border-color: var(--say-border);
    padding-block: .55rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--say-primary-light);
    box-shadow: 0 0 0 .2rem rgba(var(--say-primary-rgb), .15);
}
.form-label { font-weight: 600; font-size: .85rem; color: var(--say-ink-700); }
.input-group-text { background: var(--say-ink-100); border-color: var(--say-border); color: var(--say-ink-600); }
[data-bs-theme="dark"] .input-group-text { background: var(--bs-tertiary-bg); }

.say-password-toggle { cursor: pointer; color: var(--say-ink-600); }
.say-eye-open.d-none, .say-eye-closed.d-none { display: none !important; }

/* ---------------------------------------------------------------------
   8. Badges / avatars
   --------------------------------------------------------------------- */
.badge { font-weight: 600; border-radius: var(--say-radius-sm); }

.avatar { width: 2.75rem; height: 2.75rem; display: inline-flex; flex-shrink: 0; }
.avatar img, .avatar .say-avatar-fallback { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar.rounded-pill, .avatar.rounded-pill img, .avatar.rounded-pill .say-avatar-fallback { border-radius: var(--say-radius-pill); }
.say-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--say-primary), var(--say-info));
    color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: 0;
}

/* ---------------------------------------------------------------------
   9. App shell — sidebar
   --------------------------------------------------------------------- */
.say-wrapper { min-height: 100vh; }

.say-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--say-sidebar-width);
    background: var(--say-ink-900);
    color: var(--say-ink-300);
    z-index: 1030;
    transition: width var(--say-ease), transform var(--say-ease);
}
[data-bs-theme="dark"] .say-sidebar { background: #070B14; }

.say-sidebar-wrapper { display: flex; flex-direction: column; height: 100%; }

.say-sidebar-header {
    height: var(--say-topbar-height);
    padding-inline: 1.25rem;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.say-brand { display: flex; align-items: center; gap: .65rem; color: #fff; }
.say-brand-mark {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--say-primary-light), var(--say-primary-dark));
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .8rem; color: #fff;
    box-shadow: 0 4px 12px rgba(var(--say-primary-rgb), .45);
}
.say-brand-text { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; }
.say-brand-text small { display: block; font-weight: 500; font-size: .65rem; color: var(--say-ink-400); text-transform: uppercase; letter-spacing: .08em; }

.say-sidebar-close {
    background: transparent; border: none; color: var(--say-ink-400);
    width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.say-sidebar-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.say-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem .75rem; list-style: none; margin: 0; }
.say-nav-item { margin-bottom: .15rem; }
.say-nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .75rem;
    border-radius: var(--say-radius-sm);
    color: var(--say-ink-300);
    font-size: .865rem; font-weight: 500;
    transition: background var(--say-ease), color var(--say-ease);
}
.say-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.say-nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; opacity: .85; }
.say-nav-text { flex: 1 1 auto; }
.say-nav-caret { transition: transform var(--say-ease); opacity: .6; }

.say-nav-item.has-submenu > .say-nav-link.active,
.say-nav-item.has-submenu.active > .say-nav-link {
    background: rgba(var(--say-primary-rgb), .18);
    color: #fff;
}
.say-nav-item.has-submenu.active > .say-nav-link .say-nav-caret { transform: rotate(90deg); }

.say-submenu {
    list-style: none;
    margin: .2rem 0 .4rem 2.35rem;
    padding-inline-start: .75rem;
    border-left: 1px solid rgba(255, 255, 255, .1);
    display: none;
}
.say-submenu.show { display: block; }
.say-submenu .say-nav-link { padding-block: .45rem; font-size: .82rem; }
.say-submenu .say-nav-link.active, .say-submenu .say-nav-link.menu-current {
    color: #fff;
    font-weight: 600;
    position: relative;
}
.say-submenu .say-nav-link.active::before, .say-submenu .say-nav-link.menu-current::before {
    content: "";
    position: absolute; left: -.8125rem; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--say-primary-light);
}

.say-sidebar-footer { flex-shrink: 0; padding: .9rem 1rem; border-top: 1px solid rgba(255, 255, 255, .06); }
.say-sidebar-footer .say-avatar-fallback,
.say-sidebar-footer img { width: 100%; height: 100%; }
.say-sidebar-footer h6 { color: #fff; }
.say-sidebar-footer .text-muted { color: var(--say-ink-400) !important; font-size: .74rem; }

/* Collapsed (desktop icon-only) state */
.say-sidebar.is-collapsed { width: var(--say-sidebar-collapsed-width); }
.say-sidebar.is-collapsed .say-brand-text,
.say-sidebar.is-collapsed .say-nav-text,
.say-sidebar.is-collapsed .say-nav-caret,
.say-sidebar.is-collapsed .say-submenu,
.say-sidebar.is-collapsed .say-sidebar-footer .flex-grow-1,
.say-sidebar.is-collapsed .say-sidebar-footer h6,
.say-sidebar.is-collapsed .say-sidebar-footer .text-muted { display: none !important; }
.say-sidebar.is-collapsed .say-nav-link { justify-content: center; }

/* Mobile slide-in */
@media (max-width: 1199.98px) {
    .say-sidebar { transform: translateX(-100%); }
    .say-sidebar.is-open { transform: translateX(0); box-shadow: var(--say-shadow-lg); }
}

.say-backdrop {
    position: fixed; inset: 0; background: rgba(10, 14, 25, .5);
    z-index: 1025; opacity: 0; pointer-events: none; transition: opacity var(--say-ease);
}
.say-backdrop.is-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1200px) { .say-backdrop { display: none; } }

/* Desktop collapse toggle button */
.say-sidebar-collapse-btn {
    position: fixed; top: 18px;
    inset-inline-start: calc(var(--say-sidebar-width) + 14px);
    z-index: 1031;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--say-border);
    background: var(--say-surface); color: var(--say-primary);
    align-items: center; justify-content: center;
    box-shadow: var(--say-shadow-sm);
    transition: left var(--say-ease), background-color .2s, color .2s, transform .15s;
}
.say-sidebar-collapse-btn:hover { background: var(--say-primary); color: #fff; transform: scale(1.06); }
.say-sidebar.is-collapsed ~ .say-sidebar-collapse-btn,
.say-wrapper:has(.say-sidebar.is-collapsed) .say-sidebar-collapse-btn {
    left: calc(var(--say-sidebar-collapsed-width) + 14px);
}
.say-sidebar-collapse-btn svg { transition: transform var(--say-ease); }
.say-wrapper:has(.say-sidebar.is-collapsed) .say-sidebar-collapse-btn svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------------
   10. App shell — topbar / content / footer
   --------------------------------------------------------------------- */
.say-topbar {
    height: var(--say-topbar-height);
    background: var(--say-surface);
    border-bottom: 1px solid var(--say-border);
    position: sticky; top: 0; z-index: 1020;
}
.say-topbar-toggle {
    width: 34px; height: 24px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;
}
.say-topbar-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--say-ink-700); }

.say-content {
    margin-inline-start: var(--say-sidebar-width);
    transition: margin-inline-start var(--say-ease);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.say-wrapper:has(.say-sidebar.is-collapsed) .say-content { margin-inline-start: var(--say-sidebar-collapsed-width); }
@media (max-width: 1199.98px) { .say-content { margin-inline-start: 0; } }

.say-content-body { flex: 1 0 auto; padding: 1.75rem 1.25rem 2.5rem; }
@media (min-width: 1200px) { .say-content-body { padding-top: 2.25rem; } }

.say-footer { flex-shrink: 0; padding: 1rem 0; text-align: center; color: var(--say-ink-500); font-size: .82rem; border-top: 1px solid var(--say-border); }

/* ---------------------------------------------------------------------
   11. Theme toggle
   --------------------------------------------------------------------- */
.say-theme-toggle .say-theme-icons { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.say-theme-toggle svg { position: absolute; transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1), opacity .45s ease; }
[data-bs-theme="light"] .say-theme-toggle .say-icon-moon { opacity: 0; transform: rotate(90deg) scale(0); }
[data-bs-theme="light"] .say-theme-toggle .say-icon-sun  { opacity: 1; transform: rotate(0) scale(1); }
[data-bs-theme="dark"]  .say-theme-toggle .say-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-bs-theme="dark"]  .say-theme-toggle .say-icon-sun  { opacity: 0; transform: rotate(-90deg) scale(0); }

/* ---------------------------------------------------------------------
   12. Auth pages (login, forgot/reset password)
   --------------------------------------------------------------------- */
.say-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 15% 15%, rgba(var(--say-primary-rgb), .16), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(var(--say-info-rgb), .14), transparent 45%),
        var(--say-bg);
    padding: 2rem 1rem;
}
.say-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--say-surface);
    border-radius: var(--say-radius-xl);
    box-shadow: var(--say-shadow-lg);
    padding: 2.75rem 2.25rem;
}
@media (min-width: 576px) { .say-auth-card { padding: 2.75rem 3rem; } }
.say-auth-brand { display: flex; flex-direction: column; align-items: center; gap: .85rem; margin-bottom: 1.75rem; }
.say-auth-brand .say-brand-mark { width: 52px; height: 52px; border-radius: 14px; font-size: 1.1rem; }

/* ---------------------------------------------------------------------
   13. Misc
   --------------------------------------------------------------------- */
.dropdown-menu { border-radius: var(--say-radius); border-color: var(--say-border); box-shadow: var(--say-shadow); }
.dropdown-item { border-radius: 8px; margin: 0 .3rem; width: calc(100% - .6rem); font-size: .875rem; }
.dropdown-item:hover { background: var(--say-ink-100); }
[data-bs-theme="dark"] .dropdown-item:hover { background: var(--bs-tertiary-bg); }

.modal-content { border-radius: var(--say-radius-lg); border: none; box-shadow: var(--say-shadow-lg); }
.modal-header { border-bottom-color: var(--say-border); }
.modal-footer { border-top-color: var(--say-border); }

.page-header h2, .page-header h1 { color: var(--say-ink-800); }

@media (max-width: 991.98px) {
    .table { font-size: .78rem !important; }
    .table thead th { font-size: .65rem !important; }
}
@media (max-width: 575.98px) {
    .table { font-size: .74rem !important; }
    .table thead th { font-size: .6rem !important; }
}

/* =====================================================================
   14. Visual refresh — Modern SaaS polish
   Elevated tokens, the content-card system used across every page
   (.pure-card family), and refinements to buttons, tables, forms,
   headers, sidebar and page transitions.
   ===================================================================== */

/* 14.1 — Softer, deeper, subtly tinted elevation + gradient tokens */
:root {
    --say-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --say-shadow: 0 4px 12px rgba(15, 23, 42, .06), 0 12px 28px rgba(15, 23, 42, .07);
    --say-shadow-lg: 0 12px 24px rgba(15, 23, 42, .10), 0 28px 56px rgba(15, 23, 42, .14);
    --say-ring: 0 0 0 .2rem rgba(var(--say-primary-rgb), .16);
    --say-gradient-primary: linear-gradient(135deg, var(--say-primary-light) 0%, var(--say-primary) 55%, var(--say-primary-dark) 100%);
}
[data-bs-theme="dark"] {
    --say-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --say-shadow: 0 6px 20px rgba(0, 0, 0, .40);
    --say-shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
}

/* 14.2 — Content card system (.pure-card + helpers used in all views) */
.pure-card {
    position: relative;
    background: var(--say-surface);
    border: 1px solid var(--say-border);
    border-radius: var(--say-radius-lg);
    box-shadow: var(--say-shadow-sm);
    transition: box-shadow var(--say-ease), transform var(--say-ease), border-color var(--say-ease);
    overflow: hidden;
}
.pure-card:hover { box-shadow: var(--say-shadow); border-color: rgba(var(--say-primary-rgb), .22); }

.card-bg { background: var(--say-surface) !important; }
.shadow-custom { box-shadow: var(--say-shadow-sm) !important; }
.rounded-custom { border-radius: var(--say-radius-lg) !important; }

.pure-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--say-border);
    background: linear-gradient(180deg, rgba(var(--say-primary-rgb), .035), transparent);
}
.pure-card-title {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.01em;
    color: var(--say-ink-800);
    margin: 0;
}
.pure-card-body { padding: 1.5rem; }

/* 14.3 — Buttons: gradient primary + gentle lift */
.btn { letter-spacing: -.01em; }
.btn-primary {
    background-image: var(--say-gradient-primary);
    border: none;
}
.btn-primary:hover, .btn-primary:focus {
    background-image: var(--say-gradient-primary);
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--say-primary-rgb), .38);
}
.btn:not(.btn-icon):not(.btn-link):hover { transform: translateY(-1px); }
.btn-label-primary:hover, .btn-label-secondary:hover,
.btn-label-success:hover, .btn-label-danger:hover, .btn-label-warning:hover {
    box-shadow: var(--say-shadow-sm);
}

/* 14.4 — Tables: crisp header, rounded body, smooth row hover */
.card-datatable .table,
.table-responsive .table { border-collapse: separate; border-spacing: 0; }
.table thead th {
    background: linear-gradient(180deg, var(--say-ink-100), rgba(var(--say-primary-rgb), .015));
    border-bottom: 1px solid var(--say-border);
}
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: rgba(var(--say-primary-rgb), .05); }
.table tbody td { border-bottom-color: var(--say-ink-100); vertical-align: middle; }

/* 14.5 — Forms: refined focus ring + hover affordance */
.form-control:hover, .form-select:hover { border-color: var(--say-ink-300); }
.form-control:focus, .form-select:focus { box-shadow: var(--say-ring); }
.form-check-input:checked { background-color: var(--say-primary); border-color: var(--say-primary); }
.form-check-input:focus { box-shadow: var(--say-ring); border-color: var(--say-primary-light); }

/* 14.6 — Badges softened to pills */
.badge { border-radius: var(--say-radius-pill); padding: .38em .7em; letter-spacing: .01em; }
.badge-label-success { background: rgba(var(--say-success-rgb), .13); color: var(--say-success); }
.badge-label-danger  { background: rgba(var(--say-danger-rgb), .12);  color: var(--say-danger); }

/* 14.7 — Page header + breadcrumb polish */
.page-header h2, .page-header h1 { letter-spacing: -.02em; }
.breadcrumb { font-size: .8rem; margin-bottom: 0; }
.breadcrumb-item a { color: var(--say-ink-500); transition: color .15s ease; }
.breadcrumb-item a:hover { color: var(--say-primary); }
.breadcrumb-item.active { color: var(--say-primary-dark); font-weight: 600; }

/* 14.8 — Sidebar active accent bar */
.say-nav-item.has-submenu > .say-nav-link.active,
.say-nav-item.has-submenu.active > .say-nav-link,
.say-nav > .say-nav-item > .say-nav-link.active {
    background: rgba(var(--say-primary-rgb), .18);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--say-primary-light);
}
.say-nav-link:hover .say-nav-icon { opacity: 1; }

/* 14.9 — Content entrance animation */
@keyframes sayFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.say-content-body > .container-fluid { animation: sayFadeUp .35s var(--say-ease) both; }
@media (prefers-reduced-motion: reduce) {
    .say-content-body > .container-fluid { animation: none; }
    .btn, .pure-card { transition: none; }
}

/* 14.10 — Avatars get a soft ring */
.avatar img, .avatar .say-avatar-fallback { box-shadow: 0 0 0 2px var(--say-surface), 0 0 0 3px var(--say-border); }

/* 14.11 — Sidebar redesign */
.say-sidebar,
[data-bs-theme="dark"] .say-sidebar {
    --sb-text: #B4C0D4;
    --sb-muted: #7C8BA5;
    --sb-line: rgba(255, 255, 255, .07);
    --sb-hover: rgba(255, 255, 255, .055);
    background:
        radial-gradient(130% 260px at 0 0, rgba(var(--say-primary-rgb), .2), transparent 72%),
        linear-gradient(180deg, #0C2747 0%, #081A33 100%);
    border-inline-end: 1px solid var(--sb-line);
    color: var(--sb-text);
}
.say-sidebar-header { border-bottom-color: var(--sb-line); }
.say-brand-text small { color: var(--sb-muted); }

.say-nav { padding: .9rem .7rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
.say-nav::-webkit-scrollbar { width: 6px; }
.say-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 6px; }
.say-nav-label {
    padding: .1rem .55rem .55rem;
    color: var(--sb-muted);
    font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.say-nav-item { margin-bottom: .2rem; }

.say-nav-link {
    position: relative;
    padding: .4rem .5rem;
    border-radius: 12px;
    color: var(--sb-text);
    transition: background-color .18s ease, color .18s ease;
}
.say-nav-link:hover { background: var(--sb-hover); color: #fff; }
.say-nav-link:focus-visible { outline: 2px solid var(--say-primary-light); outline-offset: 1px; }

.say-nav-icon {
    flex: 0 0 32px; width: 32px; height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    opacity: 1;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.say-nav-link:hover .say-nav-icon { background: rgba(255, 255, 255, .1); }

/* Open menu: quiet. Current page: filled icon tile. */
.say-nav-item.has-submenu > .say-nav-link.active,
.say-nav-item.has-submenu.active > .say-nav-link,
.say-nav > ul > .say-nav-item > .say-nav-link.active {
    background: var(--sb-hover);
    color: #fff;
    box-shadow: none;
}
.say-nav > ul > .say-nav-item > .say-nav-link.active .say-nav-icon,
.say-nav-item.has-submenu:has(.menu-current) > .say-nav-link .say-nav-icon {
    background: linear-gradient(135deg, var(--say-primary-light), var(--say-primary-dark));
    color: #fff;
    box-shadow: 0 6px 14px rgba(var(--say-primary-rgb), .42);
}

.say-submenu {
    margin: .2rem 0 .45rem 1.5rem;
    padding-inline-start: .6rem;
    border-left-color: var(--sb-line);
}
.say-submenu.show { animation: saySubmenuIn .2s ease both; }
@keyframes saySubmenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.say-submenu .say-nav-link { padding: .42rem .65rem; border-radius: 9px; color: var(--sb-muted); }
.say-submenu .say-nav-link:hover { color: #fff; }
.say-submenu .say-nav-link.active,
.say-submenu .say-nav-link.menu-current { background: rgba(var(--say-primary-rgb), .17); color: #fff; }
.say-submenu .say-nav-link.active::before,
.say-submenu .say-nav-link.menu-current::before { left: calc(-.6rem - 3.5px); box-shadow: 0 0 0 3px rgba(var(--say-primary-rgb), .25); }

/* Footer as a profile card */
.say-sidebar-footer { padding: .7rem; border-top-color: var(--sb-line); }
.say-sidebar-footer > .d-flex {
    padding: .5rem;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--sb-line);
    border-radius: 14px;
}
.say-sidebar-footer .text-muted { color: var(--sb-muted) !important; }
.say-sidebar-footer .avatar .say-avatar-fallback,
.say-sidebar-footer .avatar img { box-shadow: 0 0 0 2px rgba(var(--say-primary-rgb), .55); }
.say-sidebar-footer .btn-label-secondary { background: rgba(255, 255, 255, .07); color: var(--sb-text); }
.say-sidebar-footer .btn-label-secondary:hover { background: rgba(255, 255, 255, .15); color: #fff; }

/* Collapsed rail */
.say-sidebar.is-collapsed .say-nav-label { display: none; }
.say-sidebar.is-collapsed .say-nav-link { padding: .4rem; }
.say-sidebar.is-collapsed .say-sidebar-footer > .d-flex,
.say-sidebar.is-collapsed .say-sidebar-footer > .d-flex > .d-flex { flex-direction: column; justify-content: center; }
.say-sidebar.is-collapsed .say-sidebar-footer > .d-flex > .overflow-hidden { overflow: visible !important; }

@media (prefers-reduced-motion: reduce) {
    .say-submenu.show { animation: none; }
    .say-nav-link, .say-nav-icon { transition: none; }
}