/* =====================================================================
   Tawfir Rewards — Design System
   ---------------------------------------------------------------------
   One stylesheet, loaded after Bootstrap. It defines the tokens, the
   application shell, reusable components (tw-*), and re-skins the
   Bootstrap / SweetAlert2 primitives the existing pages already use,
   so every screen speaks the same visual language.

   Principles (Apple HIG): clarity over decoration, hierarchy through
   type weight and space rather than colour, colour reserved for meaning,
   motion that communicates state, full light + dark support that follows
   the system appearance.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens — light
   --------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Typeface: the platform UI font (SF Pro on Apple, Segoe UI Variable on Windows) */
    --tw-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --tw-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --tw-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

    /* Type scale  (size / line-height) */
    --tw-text-display: 34px;  --tw-lh-display: 40px;   /* hero metric */
    --tw-text-title1: 28px;   --tw-lh-title1: 34px;    /* page title */
    --tw-text-title2: 20px;   --tw-lh-title2: 26px;    /* section title */
    --tw-text-title3: 15px;   --tw-lh-title3: 20px;    /* panel title */
    --tw-text-body: 14px;     --tw-lh-body: 20px;
    --tw-text-callout: 13px;  --tw-lh-callout: 18px;   /* secondary text */
    --tw-text-caption: 12px;  --tw-lh-caption: 16px;
    --tw-text-micro: 11px;    --tw-lh-micro: 14px;     /* group headings, axis */
    --tw-weight-regular: 400;
    --tw-weight-medium: 500;
    --tw-weight-semibold: 600;
    --tw-weight-bold: 700;

    /* Spacing — 4pt grid */
    --tw-space-1: 4px;  --tw-space-2: 8px;   --tw-space-3: 12px; --tw-space-4: 16px;
    --tw-space-5: 20px; --tw-space-6: 24px;  --tw-space-8: 32px; --tw-space-10: 40px;
    --tw-space-12: 48px;
    --tw-page-pad: 32px;           /* page gutter */
    --tw-gap: 20px;                /* grid gap between panels */

    /* Radius — restrained */
    --tw-radius-xs: 6px;           /* chips, small controls */
    --tw-radius-sm: 8px;           /* buttons, inputs */
    --tw-radius-md: 12px;          /* menus, popovers */
    --tw-radius-lg: 16px;          /* panels */
    --tw-radius-xl: 20px;          /* sheets / modals */
    --tw-radius-pill: 999px;

    /* Surfaces */
    --tw-bg: #f5f5f7;                         /* page plane */
    --tw-surface: #ffffff;                    /* panels, tables */
    --tw-surface-raised: #ffffff;             /* menus, modals */
    --tw-surface-sunken: #f2f2f5;             /* wells, read-only fields */
    --tw-sidebar: #fbfbfd;
    --tw-bar: rgba(245, 245, 247, 0.78);      /* translucent top bar */
    --tw-fill-1: rgba(118, 118, 128, 0.06);   /* hover wash */
    --tw-fill-2: rgba(118, 118, 128, 0.10);   /* secondary button, selected */
    --tw-fill-3: rgba(118, 118, 128, 0.16);   /* pressed */

    /* Separators */
    --tw-separator: rgba(60, 60, 67, 0.10);
    --tw-separator-strong: rgba(60, 60, 67, 0.18);
    --tw-control-border: rgba(60, 60, 67, 0.20);

    /* Labels (text) */
    --tw-label: #1d1d1f;
    --tw-label-2: #5e5e63;    /* secondary — 6.3:1 on white */
    --tw-label-3: #86868b;    /* tertiary / placeholder */
    --tw-label-4: #aeaeb2;    /* disabled */

    /* Brand & accent — Tawfir magenta (the Tawfir card colour, rgb 182 17 101).
       Text-on-accent 6.45:1, accent-on-page 5.92:1. */
    --tw-brand: #b61165;
    --tw-accent: #b61165;               /* links, active states, focus */
    --tw-accent-hover: #9e0e58;
    --tw-accent-pressed: #860b4a;
    --tw-accent-fill: #b61165;          /* filled controls (primary buttons, checked boxes) */
    --tw-accent-fill-hover: #9e0e58;
    --tw-accent-fill-pressed: #860b4a;
    --tw-accent-soft: rgba(182, 17, 101, 0.09);
    --tw-accent-ring: rgba(182, 17, 101, 0.26);
    --tw-on-accent: #ffffff;
    /* The four colours of the Tawfir mark — for brand moments only, never for status */
    --tw-mark-green: #35af78; --tw-mark-blue: #81b3e1; --tw-mark-yellow: #f9c629; --tw-mark-coral: #ec6564;

    /* Semantic — text-safe inks + soft fills (always paired with icon/label) */
    --tw-success: #1a7f37;  --tw-success-soft: rgba(52, 199, 89, 0.14);
    --tw-warning: #9a5b00;  --tw-warning-soft: rgba(255, 159, 10, 0.16);
    --tw-danger: #c9252c;   --tw-danger-soft: rgba(255, 59, 48, 0.12);
    --tw-info: #2f7fc6;     --tw-info-soft: rgba(47, 127, 198, 0.12);
    --tw-neutral-soft: rgba(118, 118, 128, 0.12);

    /* Chart roles — brand palette (magenta · mark blue · mark amber),
       validated for CVD separation and >= 3:1 contrast on #fff */
    --tw-series-1: #b61165;
    --tw-series-2: #2f7fc6;
    --tw-series-3: #c98500;
    --tw-series-muted: #c7c7cc;               /* comparison series (e.g. yesterday) */
    --tw-chart-grid: #ececef;
    --tw-chart-axis: #86868b;
    --tw-seq-100: #cde2fb; --tw-seq-300: #6da7ec; --tw-seq-500: #256abf; --tw-seq-700: #0d366b;

    /* Elevation — hairline + soft shadow; never heavy */
    --tw-shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.04);
    --tw-shadow-raised: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
    --tw-shadow-overlay: 0 2px 8px rgba(0, 0, 0, 0.06), 0 24px 64px rgba(0, 0, 0, 0.16);

    /* Motion */
    --tw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);        /* decelerate, spring-like */
    --tw-ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
    --tw-dur-fast: 120ms;
    --tw-dur-base: 200ms;
    --tw-dur-slow: 320ms;

    /* Shell geometry */
    --tw-sidebar-w: 252px;
    --tw-sidebar-rail: 68px;
    --tw-topbar-h: 56px;
    --tw-control-h: 36px;
    --tw-control-h-sm: 30px;
}

/* ---------------------------------------------------------------------
   2. Tokens — dark. Follows the system appearance unless the header switch
      pins light or dark (<html data-theme="light|dark">).
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --tw-bg: #0f0f10;
        --tw-surface: #1c1c1e;
        --tw-surface-raised: #2c2c2e;
        --tw-surface-sunken: #161618;
        --tw-sidebar: #161617;
        --tw-bar: rgba(15, 15, 16, 0.74);
        --tw-fill-1: rgba(120, 120, 128, 0.12);
        --tw-fill-2: rgba(120, 120, 128, 0.20);
        --tw-fill-3: rgba(120, 120, 128, 0.28);
        --tw-separator: rgba(255, 255, 255, 0.08);
        --tw-separator-strong: rgba(255, 255, 255, 0.14);
        --tw-control-border: rgba(255, 255, 255, 0.16);
        --tw-label: #f5f5f7;
        --tw-label-2: #a1a1a6;
        --tw-label-3: #7c7c80;
        --tw-label-4: #545458;
        --tw-brand: #ea5a9c;
        --tw-accent: #ea5a9c;           /* 5.2:1 on dark surfaces */
        --tw-accent-hover: #f06aa6;
        --tw-accent-pressed: #e0418a;
        --tw-accent-fill: #cc2076;      /* white text 5.2:1 */
        --tw-accent-fill-hover: #d42a7e;
        --tw-accent-fill-pressed: #b61165;
        --tw-accent-soft: rgba(234, 90, 156, 0.16);
        --tw-accent-ring: rgba(234, 90, 156, 0.36);
        --tw-success: #3fcf6a;  --tw-success-soft: rgba(48, 209, 88, 0.16);
        --tw-warning: #ffb340;  --tw-warning-soft: rgba(255, 159, 10, 0.18);
        --tw-danger: #ff6961;   --tw-danger-soft: rgba(255, 69, 58, 0.18);
        --tw-info: #5b9ee6;     --tw-info-soft: rgba(74, 146, 220, 0.18);
        --tw-neutral-soft: rgba(120, 120, 128, 0.22);
        /* validated against #1c1c1e */
        --tw-series-1: #d6408a;
        --tw-series-2: #4a92dc;
        --tw-series-3: #c98500;
        --tw-series-muted: #48484a;
        --tw-chart-grid: #2a2a2d;
        --tw-chart-axis: #7c7c80;
        --tw-seq-100: #184f95; --tw-seq-300: #256abf; --tw-seq-500: #5598e7; --tw-seq-700: #b7d3f6;
        --tw-shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.02);
        --tw-shadow-raised: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
        --tw-shadow-overlay: 0 2px 8px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.6);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --tw-bg: #0f0f10;
    --tw-surface: #1c1c1e;
    --tw-surface-raised: #2c2c2e;
    --tw-surface-sunken: #161618;
    --tw-sidebar: #161617;
    --tw-bar: rgba(15, 15, 16, 0.74);
    --tw-fill-1: rgba(120, 120, 128, 0.12);
    --tw-fill-2: rgba(120, 120, 128, 0.20);
    --tw-fill-3: rgba(120, 120, 128, 0.28);
    --tw-separator: rgba(255, 255, 255, 0.08);
    --tw-separator-strong: rgba(255, 255, 255, 0.14);
    --tw-control-border: rgba(255, 255, 255, 0.16);
    --tw-label: #f5f5f7;
    --tw-label-2: #a1a1a6;
    --tw-label-3: #7c7c80;
    --tw-label-4: #545458;
    --tw-brand: #ea5a9c;
    --tw-accent: #ea5a9c;           /* 5.2:1 on dark surfaces */
    --tw-accent-hover: #f06aa6;
    --tw-accent-pressed: #e0418a;
    --tw-accent-fill: #cc2076;      /* white text 5.2:1 */
    --tw-accent-fill-hover: #d42a7e;
    --tw-accent-fill-pressed: #b61165;
    --tw-accent-soft: rgba(234, 90, 156, 0.16);
    --tw-accent-ring: rgba(234, 90, 156, 0.36);
    --tw-success: #3fcf6a;  --tw-success-soft: rgba(48, 209, 88, 0.16);
    --tw-warning: #ffb340;  --tw-warning-soft: rgba(255, 159, 10, 0.18);
    --tw-danger: #ff6961;   --tw-danger-soft: rgba(255, 69, 58, 0.18);
    --tw-info: #5b9ee6;     --tw-info-soft: rgba(74, 146, 220, 0.18);
    --tw-neutral-soft: rgba(120, 120, 128, 0.22);
    /* validated against #1c1c1e */
    --tw-series-1: #d6408a;
    --tw-series-2: #4a92dc;
    --tw-series-3: #c98500;
    --tw-series-muted: #48484a;
    --tw-chart-grid: #2a2a2d;
    --tw-chart-axis: #7c7c80;
    --tw-seq-100: #184f95; --tw-seq-300: #256abf; --tw-seq-500: #5598e7; --tw-seq-700: #b7d3f6;
    --tw-shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.02);
    --tw-shadow-raised: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
    --tw-shadow-overlay: 0 2px 8px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.6);
}


/* Bootstrap variable bridge — so untouched Bootstrap pieces inherit the system */
:root, [data-bs-theme] {
    --bs-body-font-family: var(--tw-font);
    --bs-body-font-size: var(--tw-text-body);
    --bs-body-line-height: 1.4286;
    --bs-body-color: var(--tw-label);
    --bs-body-bg: var(--tw-bg);
    --bs-secondary-color: var(--tw-label-2);
    --bs-tertiary-color: var(--tw-label-3);
    --bs-border-color: var(--tw-separator);
    --bs-border-color-translucent: var(--tw-separator);
    --bs-emphasis-color: var(--tw-label);
    --bs-link-color: var(--tw-accent);
    --bs-link-hover-color: var(--tw-accent-hover);
    --bs-link-color-rgb: 182, 17, 101;
    --bs-primary: var(--tw-accent);
    --bs-primary-rgb: 182, 17, 101;
    --bs-border-radius: var(--tw-radius-sm);
    --bs-focus-ring-color: var(--tw-accent-ring);
}

/* ---------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--tw-font);
    font-size: var(--tw-text-body);
    line-height: var(--tw-lh-body);
    color: var(--tw-label);
    background: var(--tw-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "calt";
}

h1, h2, h3, h4, h5, h6 { color: var(--tw-label); margin: 0; font-weight: var(--tw-weight-semibold); letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--tw-accent); text-decoration: none; }
a:hover { color: var(--tw-accent-hover); }
hr { border: 0; border-top: 1px solid var(--tw-separator); opacity: 1; margin: var(--tw-space-6) 0; }
::selection { background: var(--tw-accent-soft); }

:focus-visible {
    outline: 2px solid var(--tw-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--tw-fill-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--tw-fill-3); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Typography utilities */
.tw-display { font-family: var(--tw-font-display); font-size: var(--tw-text-display); line-height: var(--tw-lh-display); font-weight: var(--tw-weight-semibold); letter-spacing: -0.022em; }
.tw-title1 { font-family: var(--tw-font-display); font-size: var(--tw-text-title1); line-height: var(--tw-lh-title1); font-weight: var(--tw-weight-semibold); letter-spacing: -0.018em; }
.tw-title2 { font-family: var(--tw-font-display); font-size: var(--tw-text-title2); line-height: var(--tw-lh-title2); font-weight: var(--tw-weight-semibold); letter-spacing: -0.012em; }
.tw-title3 { font-size: var(--tw-text-title3); line-height: var(--tw-lh-title3); font-weight: var(--tw-weight-semibold); letter-spacing: -0.006em; }
.tw-body { font-size: var(--tw-text-body); line-height: var(--tw-lh-body); }
.tw-callout { font-size: var(--tw-text-callout); line-height: var(--tw-lh-callout); }
.tw-caption { font-size: var(--tw-text-caption); line-height: var(--tw-lh-caption); }
.tw-micro { font-size: var(--tw-text-micro); line-height: var(--tw-lh-micro); }
.tw-secondary { color: var(--tw-label-2) !important; }
.tw-tertiary { color: var(--tw-label-3) !important; }
.tw-strong { font-weight: var(--tw-weight-semibold); }
.tw-num { font-variant-numeric: tabular-nums; }
.tw-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; color: var(--tw-label-2); }
.form-control.tw-mono { color: var(--tw-label); }
.tw-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tw-positive { color: var(--tw-success) !important; }
.tw-negative { color: var(--tw-danger) !important; }

/* ---------------------------------------------------------------------
   4. Application shell
   --------------------------------------------------------------------- */
.tw-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--tw-sidebar-w) minmax(0, 1fr);
    transition: grid-template-columns var(--tw-dur-slow) var(--tw-ease);
}
.tw-app[data-sidebar="collapsed"] { grid-template-columns: var(--tw-sidebar-rail) minmax(0, 1fr); }
.tw-app.tw-no-transition, .tw-app.tw-no-transition * { transition: none !important; }

/* Sidebar */
.tw-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--tw-sidebar);
    border-right: 1px solid var(--tw-separator);
    overflow: hidden;
    z-index: 40;
}
.tw-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--tw-topbar-h);
    padding: 0 18px;
    flex-shrink: 0;
    color: var(--tw-label);
    white-space: nowrap;
}
.tw-sidebar-brand:hover { color: var(--tw-label); }
/* The Tawfir mark (transparent PNG — works on light and dark surfaces). */
.tw-brand-mark {
    width: 28px; height: 28px; flex-shrink: 0;
    display: block;
    object-fit: contain;
}
.tw-brand-name { font-family: var(--tw-font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.012em; line-height: 1.1; }
.tw-brand-name small { display: block; font-family: var(--tw-font); font-size: var(--tw-text-micro); font-weight: 500; color: var(--tw-label-3); letter-spacing: 0; }

.tw-sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 20px; }
.tw-nav-group { margin-top: 18px; }
.tw-nav-group:first-child { margin-top: 4px; }
.tw-nav-heading {
    padding: 0 10px 6px;
    font-size: var(--tw-text-micro);
    line-height: var(--tw-lh-micro);
    font-weight: var(--tw-weight-semibold);
    color: var(--tw-label-3);
    white-space: nowrap;
    transition: opacity var(--tw-dur-base) var(--tw-ease);
}
.tw-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tw-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--tw-radius-sm);
    color: var(--tw-label);
    font-size: var(--tw-text-body);
    font-weight: var(--tw-weight-regular);
    white-space: nowrap;
    transition: background-color var(--tw-dur-fast) var(--tw-ease), color var(--tw-dur-fast) var(--tw-ease);
}
.tw-nav-item .tw-icon { color: var(--tw-label-2); flex-shrink: 0; transition: color var(--tw-dur-fast) var(--tw-ease); }
.tw-nav-item:hover { background: var(--tw-fill-1); color: var(--tw-label); }
.tw-nav-item:active { background: var(--tw-fill-2); }
.tw-nav-item.is-active { background: var(--tw-accent-soft); color: var(--tw-accent); font-weight: var(--tw-weight-medium); }
.tw-nav-item.is-active .tw-icon { color: var(--tw-accent); }
.tw-nav-label { overflow: hidden; text-overflow: ellipsis; transition: opacity var(--tw-dur-base) var(--tw-ease); }

.tw-sidebar-foot { padding: 10px; border-top: 1px solid var(--tw-separator); flex-shrink: 0; }

/* Collapsed rail (desktop/laptop) */
.tw-app[data-sidebar="collapsed"] .tw-brand-name,
.tw-app[data-sidebar="collapsed"] .tw-nav-label { opacity: 0; pointer-events: none; }
.tw-app[data-sidebar="collapsed"] .tw-nav-heading { opacity: 0; height: 1px; padding: 0; margin: 0 10px 8px; background: var(--tw-separator); }
.tw-app[data-sidebar="collapsed"] .tw-nav-group { margin-top: 12px; }
.tw-app[data-sidebar="collapsed"] .tw-nav-item { justify-content: flex-start; padding: 0 13px; }

/* Main column */
.tw-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.tw-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--tw-topbar-h);
    display: flex;
    align-items: center;
    gap: var(--tw-space-3);
    padding: 0 calc(var(--tw-page-pad) - 8px) 0 calc(var(--tw-page-pad) - 12px);
    background: var(--tw-bar);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--tw-dur-base) var(--tw-ease);
}
.tw-topbar.is-scrolled { border-bottom-color: var(--tw-separator); }
.tw-breadcrumb { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--tw-text-callout); color: var(--tw-label-3); }
.tw-breadcrumb strong { color: var(--tw-label); font-weight: var(--tw-weight-medium); }
.tw-breadcrumb .tw-icon { color: var(--tw-label-4); }
.tw-topbar-spacer { flex: 1; }
.tw-topbar-meta { font-size: var(--tw-text-callout); color: var(--tw-label-3); white-space: nowrap; }

.tw-content { flex: 1; padding: var(--tw-space-6) var(--tw-page-pad) var(--tw-space-10); }
.tw-footer {
    padding: var(--tw-space-5) var(--tw-page-pad);
    font-size: var(--tw-text-caption);
    color: var(--tw-label-3);
    display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between;
}
.tw-footer a { color: var(--tw-label-2); }

.tw-scrim {
    display: none;
    position: fixed; inset: 0; z-index: 35;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity var(--tw-dur-base) var(--tw-ease);
}

/* User menu */
.tw-user {
    display: flex; align-items: center; gap: 10px;
    height: 36px; padding: 0 6px 0 4px;
    border: 0; background: transparent;
    border-radius: var(--tw-radius-pill);
    color: var(--tw-label);
    cursor: pointer;
    transition: background-color var(--tw-dur-fast) var(--tw-ease);
}
.tw-user:hover { background: var(--tw-fill-1); }
.tw-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--tw-fill-2); color: var(--tw-label);
    font-size: 12px; font-weight: var(--tw-weight-semibold); letter-spacing: 0.02em;
    flex-shrink: 0;
}
.tw-avatar.is-lg { width: 40px; height: 40px; font-size: 14px; }
.tw-user-text { text-align: left; line-height: 1.15; }
.tw-user-text strong { display: block; font-size: var(--tw-text-callout); font-weight: var(--tw-weight-medium); }
.tw-user-text span { font-size: var(--tw-text-micro); color: var(--tw-label-3); }

/* Responsive shell ---------------------------------------------------- */
@media (max-width: 1279.98px) {
    :root { --tw-page-pad: 24px; --tw-gap: 16px; }
}
@media (max-width: 1023.98px) {
    /* Tablet: the sidebar becomes a drawer over the content */
    .tw-app, .tw-app[data-sidebar="collapsed"] { grid-template-columns: minmax(0, 1fr); }
    .tw-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: min(300px, 86vw);
        transform: translateX(-102%);
        transition: transform var(--tw-dur-slow) var(--tw-ease);
        box-shadow: var(--tw-shadow-overlay);
    }
    .tw-app[data-drawer="open"] .tw-sidebar { transform: none; }
    .tw-app[data-drawer="open"] .tw-scrim { display: block; opacity: 1; }
    .tw-app .tw-brand-name, .tw-app .tw-nav-label { opacity: 1 !important; pointer-events: auto !important; }
    .tw-app .tw-nav-heading { opacity: 1 !important; height: auto !important; padding: 0 10px 6px !important; margin: 0 !important; background: none !important; }
    .tw-app .tw-nav-item { height: 40px; }
    .tw-topbar-meta { display: none; }
}
@media (max-width: 767.98px) {
    :root { --tw-page-pad: 16px; --tw-gap: 12px; }
    .tw-user-text { display: none; }
}

/* ---------------------------------------------------------------------
   5. Page scaffolding
   --------------------------------------------------------------------- */
.tw-page { max-width: 1600px; margin: 0 auto; animation: tw-rise var(--tw-dur-slow) var(--tw-ease) both; }
.tw-page.is-narrow { max-width: 1120px; }

.tw-page-header {
    display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
    gap: var(--tw-space-4) var(--tw-space-6);
    margin: var(--tw-space-2) 0 var(--tw-space-6);
}
.tw-page-header-text { min-width: 0; }
.tw-eyebrow { font-size: var(--tw-text-callout); font-weight: var(--tw-weight-medium); color: var(--tw-label-3); margin-bottom: 2px; }
.tw-page-title { font-family: var(--tw-font-display); font-size: var(--tw-text-title1); line-height: var(--tw-lh-title1); font-weight: var(--tw-weight-semibold); letter-spacing: -0.018em; }
.tw-page-subtitle { margin-top: 4px; font-size: var(--tw-text-body); color: var(--tw-label-2); max-width: 720px; }
.tw-page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tw-space-2); }

.tw-stack { display: grid; gap: var(--tw-gap); }
.tw-grid { display: grid; gap: var(--tw-gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.tw-grid > * { min-width: 0; }   /* wide tables scroll inside their column instead of stretching the page */
.tw-col-12 { grid-column: span 12; } .tw-col-8 { grid-column: span 8; } .tw-col-7 { grid-column: span 7; }
.tw-col-6 { grid-column: span 6; } .tw-col-5 { grid-column: span 5; } .tw-col-4 { grid-column: span 4; } .tw-col-3 { grid-column: span 3; }
@media (max-width: 1279.98px) {
    .tw-col-lg-12 { grid-column: span 12; } .tw-col-lg-6 { grid-column: span 6; }
}
@media (max-width: 1023.98px) {
    .tw-col-8, .tw-col-7, .tw-col-6, .tw-col-5, .tw-col-4, .tw-col-lg-6 { grid-column: span 12; }
    .tw-col-3 { grid-column: span 6; }
}
@media (max-width: 575.98px) { .tw-col-3 { grid-column: span 12; } }

.tw-section-title { font-family: var(--tw-font-display); font-size: var(--tw-text-title2); line-height: var(--tw-lh-title2); font-weight: var(--tw-weight-semibold); letter-spacing: -0.012em; margin: var(--tw-space-8) 0 var(--tw-space-4); }

/* ---------------------------------------------------------------------
   6. Panel (the one container)
   --------------------------------------------------------------------- */
.tw-panel {
    background: var(--tw-surface);
    border: 1px solid var(--tw-separator);
    border-radius: var(--tw-radius-lg);
    box-shadow: var(--tw-shadow-panel);
    min-width: 0;
    display: flex; flex-direction: column;
}
.tw-panel-header {
    display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    gap: var(--tw-space-3);
    padding: var(--tw-space-5) var(--tw-space-6) 0;
}
.tw-panel-title { font-size: var(--tw-text-title3); line-height: var(--tw-lh-title3); font-weight: var(--tw-weight-semibold); letter-spacing: -0.006em; }
.tw-panel-subtitle { margin-top: 2px; font-size: var(--tw-text-callout); line-height: var(--tw-lh-callout); color: var(--tw-label-2); }
.tw-panel-actions { display: flex; align-items: center; gap: var(--tw-space-2); flex-wrap: wrap; }
.tw-panel-body { padding: var(--tw-space-5) var(--tw-space-6) var(--tw-space-6); flex: 1; min-width: 0; }
.tw-panel-body.is-flush { padding: var(--tw-space-3) 0 0; }
.tw-panel-footer { padding: var(--tw-space-3) var(--tw-space-6); border-top: 1px solid var(--tw-separator); font-size: var(--tw-text-callout); color: var(--tw-label-2); display: flex; align-items: center; justify-content: space-between; gap: var(--tw-space-3); }
.tw-panel + .tw-panel { margin-top: var(--tw-gap); }
.tw-stack > .tw-panel + .tw-panel, .tw-grid > .tw-panel + .tw-panel { margin-top: 0; }

/* Section inside a form panel */
.tw-fieldset { padding: var(--tw-space-5) var(--tw-space-6); border-top: 1px solid var(--tw-separator); }
.tw-fieldset:first-child { border-top: 0; }
.tw-fieldset-title { font-size: var(--tw-text-callout); font-weight: var(--tw-weight-semibold); color: var(--tw-label); margin-bottom: var(--tw-space-4); }
.tw-fieldset-title span { font-weight: var(--tw-weight-regular); color: var(--tw-label-3); margin-left: 6px; }

/* ---------------------------------------------------------------------
   7. Metrics (KPI)
   --------------------------------------------------------------------- */
.tw-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tw-gap); }
@media (max-width: 1279.98px) { .tw-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .tw-metrics { grid-template-columns: minmax(0, 1fr); } }

.tw-metric {
    position: relative;
    display: flex; flex-direction: column;
    padding: var(--tw-space-5) var(--tw-space-6) var(--tw-space-4);
    background: var(--tw-surface);
    border: 1px solid var(--tw-separator);
    border-radius: var(--tw-radius-lg);
    box-shadow: var(--tw-shadow-panel);
    color: var(--tw-label);
    min-width: 0;
    animation: tw-rise var(--tw-dur-slow) var(--tw-ease) both;
    transition: border-color var(--tw-dur-base) var(--tw-ease), box-shadow var(--tw-dur-base) var(--tw-ease), transform var(--tw-dur-base) var(--tw-ease);
}
.tw-metrics > .tw-metric:nth-child(2) { animation-delay: 40ms; }
.tw-metrics > .tw-metric:nth-child(3) { animation-delay: 80ms; }
.tw-metrics > .tw-metric:nth-child(4) { animation-delay: 120ms; }
a.tw-metric:hover, button.tw-metric:hover { color: var(--tw-label); border-color: var(--tw-separator-strong); box-shadow: var(--tw-shadow-raised); }
.tw-metric-label { font-size: var(--tw-text-callout); font-weight: var(--tw-weight-medium); color: var(--tw-label-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tw-metric-value { margin-top: 6px; font-family: var(--tw-font-display); font-size: 30px; line-height: 36px; font-weight: var(--tw-weight-semibold); letter-spacing: -0.022em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-metric-value small { font-size: 15px; font-weight: var(--tw-weight-medium); color: var(--tw-label-3); letter-spacing: 0; margin-left: 4px; }
.tw-metric-foot { margin-top: 6px; display: flex; align-items: center; gap: 8px; font-size: var(--tw-text-caption); color: var(--tw-label-3); min-height: 18px; }
.tw-metric-spark { margin-top: var(--tw-space-3); height: 36px; }

.tw-delta {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 7px 1px 5px;
    border-radius: var(--tw-radius-pill);
    font-size: var(--tw-text-caption); font-weight: var(--tw-weight-semibold);
    font-variant-numeric: tabular-nums;
    background: var(--tw-neutral-soft); color: var(--tw-label-2);
}
.tw-delta.is-up { background: var(--tw-success-soft); color: var(--tw-success); }
.tw-delta.is-down { background: var(--tw-danger-soft); color: var(--tw-danger); }

/* Sparkline (SVG) */
.tw-spark { display: block; width: 100%; height: 100%; overflow: visible; }
.tw-spark-line { fill: none; stroke: var(--tw-series-1); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tw-spark-area { fill: var(--tw-series-1); opacity: 0.08; }
.tw-spark-base { stroke: var(--tw-chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Stat list (compact key/value rows) */
.tw-stat-list { display: grid; gap: 0; }
.tw-stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--tw-separator); }
.tw-stat-row:first-child { border-top: 0; padding-top: 0; }
.tw-stat-row dt { font-weight: var(--tw-weight-regular); color: var(--tw-label-2); font-size: var(--tw-text-callout); }
.tw-stat-row dd { margin: 0; font-weight: var(--tw-weight-semibold); font-variant-numeric: tabular-nums; }

/* Meter — thin progress bar with a label */
.tw-meter { height: 6px; border-radius: var(--tw-radius-pill); background: var(--tw-fill-2); overflow: hidden; }
.tw-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--tw-series-1); transition: width var(--tw-dur-slow) var(--tw-ease); }

/* ---------------------------------------------------------------------
   8. Buttons
   --------------------------------------------------------------------- */
.tw-btn, .btn {
    --_bg: var(--tw-fill-2);
    --_fg: var(--tw-label);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--tw-control-h);
    padding: 0 14px;
    border: 0;
    border-radius: var(--tw-radius-sm);
    background: var(--_bg);
    color: var(--_fg);
    font-family: inherit;
    font-size: var(--tw-text-body);
    font-weight: var(--tw-weight-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    box-shadow: none;
    transition: background-color var(--tw-dur-fast) var(--tw-ease), color var(--tw-dur-fast) var(--tw-ease), transform var(--tw-dur-fast) var(--tw-ease), opacity var(--tw-dur-fast) var(--tw-ease);
}
.tw-btn:hover, .btn:hover { background: var(--tw-fill-3); color: var(--_fg); }
.tw-btn:active, .btn:active { transform: scale(0.98); }
.tw-btn:focus-visible, .btn:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; box-shadow: none; }
.tw-btn[disabled], .btn[disabled], .tw-btn.is-disabled, .btn.disabled { opacity: 0.4; pointer-events: none; }
.tw-btn .tw-icon { margin-left: -2px; }

.tw-btn-primary, .btn-primary { --_bg: var(--tw-accent-fill); --_fg: var(--tw-on-accent); }
.tw-btn-primary:hover, .btn-primary:hover { background: var(--tw-accent-fill-hover); color: var(--tw-on-accent); }
.tw-btn-primary:active, .btn-primary:active { background: var(--tw-accent-fill-pressed) !important; color: var(--tw-on-accent) !important; }
.tw-btn-secondary, .btn-secondary, .btn-light { --_bg: var(--tw-fill-2); --_fg: var(--tw-label); }
.tw-btn-plain { --_bg: transparent; --_fg: var(--tw-accent); padding: 0 10px; }
.tw-btn-plain:hover { background: var(--tw-accent-soft); color: var(--tw-accent); }
.tw-btn-quiet { --_bg: transparent; --_fg: var(--tw-label-2); padding: 0 10px; }
.tw-btn-quiet:hover { background: var(--tw-fill-1); color: var(--tw-label); }
.tw-btn-danger, .btn-danger { --_bg: var(--tw-danger-soft); --_fg: var(--tw-danger); }
.tw-btn-danger:hover, .btn-danger:hover { background: var(--tw-danger); color: #fff; }
.tw-btn-sm, .btn-sm { height: var(--tw-control-h-sm); padding: 0 11px; font-size: var(--tw-text-callout); }

.tw-icon-btn {
    width: var(--tw-control-h); height: var(--tw-control-h); padding: 0;
    display: inline-grid; place-items: center;
    border: 0; border-radius: var(--tw-radius-sm);
    background: transparent; color: var(--tw-label-2);
    cursor: pointer;
    transition: background-color var(--tw-dur-fast) var(--tw-ease), color var(--tw-dur-fast) var(--tw-ease);
}
.tw-icon-btn:hover { background: var(--tw-fill-1); color: var(--tw-label); }
.tw-icon-btn:active { background: var(--tw-fill-2); }
.tw-icon-btn.is-sm { width: var(--tw-control-h-sm); height: var(--tw-control-h-sm); }
.tw-icon-btn.is-danger:hover { background: var(--tw-danger-soft); color: var(--tw-danger); }
.tw-icon-btn[disabled] { opacity: 0.35; pointer-events: none; }

.tw-btn-group { display: inline-flex; align-items: center; gap: var(--tw-space-2); flex-wrap: wrap; }
.tw-toolbar-divider { width: 1px; height: 20px; background: var(--tw-separator-strong); margin: 0 2px; }

/* Busy state for buttons */
.tw-btn.is-busy { pointer-events: none; }
.tw-btn.is-busy::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: tw-spin 700ms linear infinite; }

/* ---------------------------------------------------------------------
   9. Segmented control (closely related views)
   --------------------------------------------------------------------- */
.tw-segmented {
    display: inline-flex; padding: 2px; gap: 2px;
    background: var(--tw-fill-2);
    border-radius: 9px;
    max-width: 100%; overflow-x: auto; scrollbar-width: none;   /* long option sets scroll on phones */
}
.tw-segmented::-webkit-scrollbar { display: none; }
.tw-segmented button {
    height: 28px; padding: 0 12px;
    border: 0; border-radius: 7px;
    background: transparent;
    color: var(--tw-label-2);
    font-family: inherit; font-size: var(--tw-text-callout); font-weight: var(--tw-weight-medium);
    cursor: pointer; white-space: nowrap;
    transition: background-color var(--tw-dur-base) var(--tw-ease), color var(--tw-dur-base) var(--tw-ease), box-shadow var(--tw-dur-base) var(--tw-ease);
}
.tw-segmented button:hover { color: var(--tw-label); }
.tw-segmented button.is-active { background: var(--tw-surface); color: var(--tw-label); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tw-segmented button.is-active { background: #636366; } }
:root[data-theme="dark"] .tw-segmented button.is-active { background: #636366; }


/* Tabs (Bootstrap nav-tabs re-skinned as a quiet underline tab view) */
.nav-tabs, .tw-tabs {
    display: flex; gap: var(--tw-space-6);
    border-bottom: 1px solid var(--tw-separator);
    padding: 0; margin: 0 0 var(--tw-space-5); list-style: none;
    --bs-nav-tabs-border-width: 0;
}
.nav-tabs .nav-link, .tw-tabs button {
    position: relative;
    padding: 0 0 12px; margin: 0;
    border: 0 !important; border-radius: 0; background: transparent !important;
    color: var(--tw-label-2) !important;
    font-size: var(--tw-text-body); font-weight: var(--tw-weight-medium);
    cursor: pointer;
    transition: color var(--tw-dur-fast) var(--tw-ease);
}
.nav-tabs .nav-link:hover, .tw-tabs button:hover { color: var(--tw-label) !important; }
.nav-tabs .nav-link.active, .tw-tabs button.is-active { color: var(--tw-label) !important; }
.nav-tabs .nav-link::after, .tw-tabs button::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    border-radius: 2px; background: var(--tw-label);
    transform: scaleX(0); transition: transform var(--tw-dur-base) var(--tw-ease);
}
.nav-tabs .nav-link.active::after, .tw-tabs button.is-active::after { transform: scaleX(1); }
.tab-pane { color: inherit !important; }
.tab-content > .tab-pane.active { animation: tw-fade var(--tw-dur-base) var(--tw-ease); }

/* ---------------------------------------------------------------------
   10. Forms
   --------------------------------------------------------------------- */
.tw-form-grid { display: grid; gap: var(--tw-space-4) var(--tw-space-5); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.tw-form-grid > * { grid-column: span 4; min-width: 0; }
.tw-form-grid > .tw-span-2 { grid-column: span 2; }
.tw-form-grid > .tw-span-3 { grid-column: span 3; }
.tw-form-grid > .tw-span-6 { grid-column: span 6; }
.tw-form-grid > .tw-span-8 { grid-column: span 8; }
.tw-form-grid > .tw-span-12 { grid-column: span 12; }
@media (max-width: 1279.98px) {
    .tw-form-grid > .tw-span-2, .tw-form-grid > .tw-span-3 { grid-column: span 4; }
    .tw-form-grid > * { grid-column: span 6; }
    .tw-form-grid > .tw-span-8, .tw-form-grid > .tw-span-12 { grid-column: span 12; }
}
@media (max-width: 767.98px) { .tw-form-grid > * { grid-column: span 12 !important; } }

.tw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tw-field > label, .tw-label {
    font-size: var(--tw-text-callout); line-height: var(--tw-lh-callout);
    font-weight: var(--tw-weight-medium);
    color: var(--tw-label-2);
    margin: 0;
}
.tw-field > label .tw-required { color: var(--tw-danger); margin-left: 2px; }
.tw-hint { font-size: var(--tw-text-caption); line-height: var(--tw-lh-caption); color: var(--tw-label-3); }
.tw-field.is-invalid .form-control, .tw-field.is-invalid .form-select { border-color: var(--tw-danger); box-shadow: 0 0 0 3px var(--tw-danger-soft); }
.tw-field.is-invalid .tw-hint { color: var(--tw-danger); }
.tw-field-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--tw-space-3); min-height: var(--tw-control-h); }

.form-control, .form-select, .tw-input {
    display: block; width: 100%;
    height: var(--tw-control-h);
    padding: 0 12px;
    font-family: inherit; font-size: var(--tw-text-body); line-height: var(--tw-lh-body);
    color: var(--tw-label);
    background-color: var(--tw-surface);
    border: 1px solid var(--tw-control-border);
    border-radius: var(--tw-radius-sm);
    box-shadow: none;
    transition: border-color var(--tw-dur-fast) var(--tw-ease), box-shadow var(--tw-dur-fast) var(--tw-ease), background-color var(--tw-dur-fast) var(--tw-ease);
}
.form-control::placeholder { color: var(--tw-label-3); opacity: 1; }
.form-control:hover, .form-select:hover { border-color: var(--tw-separator-strong); border-color: color-mix(in srgb, var(--tw-control-border), var(--tw-label) 18%); }
.form-control:focus, .form-select:focus, .tw-input:focus {
    outline: none;
    color: var(--tw-label);
    background-color: var(--tw-surface);
    border-color: var(--tw-accent);
    box-shadow: 0 0 0 3px var(--tw-accent-ring);
}
.form-control[readonly], .form-control:disabled, .form-select:disabled {
    background-color: var(--tw-surface-sunken);
    color: var(--tw-label-2);
    border-color: transparent;
    box-shadow: none;
    opacity: 1;
    cursor: default;
}
.form-control[readonly]:focus { box-shadow: none; border-color: transparent; }
textarea.form-control { height: auto; min-height: 88px; padding: 8px 12px; }
.form-select {
    padding-right: 34px;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2386868b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m5 6.5 3-3 3 3M5 9.5l3 3 3-3'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px;
}
.form-control[type="file"] { padding: 0; line-height: calc(var(--tw-control-h) - 2px); overflow: hidden; }
.form-control[type="file"]::file-selector-button {
    height: 100%; margin: 0 12px 0 0; padding: 0 14px;
    border: 0; border-right: 1px solid var(--tw-separator);
    background: var(--tw-fill-1); color: var(--tw-label);
    font: inherit; font-weight: var(--tw-weight-medium);
    cursor: pointer;
}
.form-control[type="file"]:hover::file-selector-button { background: var(--tw-fill-2); }
input[type="date"].form-control { padding-right: 8px; }
input[type="number"].form-control { font-variant-numeric: tabular-nums; }
.text-right, .text-end { text-align: right !important; }

/* Checkbox */
.form-check { display: flex; align-items: center; gap: 8px; min-height: 0; padding: 0; margin: 0; }
.form-check-input, .tw-check {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; margin: 0; flex-shrink: 0; float: none;
    border: 1.5px solid var(--tw-control-border);
    border-radius: 5px;
    background: var(--tw-surface) no-repeat center / 12px 12px;
    cursor: pointer;
    transition: background-color var(--tw-dur-fast) var(--tw-ease), border-color var(--tw-dur-fast) var(--tw-ease), box-shadow var(--tw-dur-fast) var(--tw-ease);
}
.form-check-input:hover { border-color: var(--tw-label-3); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--tw-accent-ring); border-color: var(--tw-accent); outline: none; }
.form-check-input:checked {
    background-color: var(--tw-accent-fill); border-color: var(--tw-accent-fill);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m3.5 8.5 3 3 6-7'/%3e%3c/svg%3e");
}
.form-check-input:disabled { opacity: 0.4; cursor: default; }
.form-check-input[type="radio"], input[type="radio"] { border-radius: 50%; }
input[type="radio"] {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; margin: 0; vertical-align: middle;
    border: 1.5px solid var(--tw-control-border); background: var(--tw-surface); cursor: pointer;
    transition: border var(--tw-dur-fast) var(--tw-ease);
}
input[type="radio"]:checked { border: 5.5px solid var(--tw-accent-fill); }

/* Switch — an on/off checkbox (HIG toggle) */
.tw-switch.form-check-input, input.tw-switch {
    width: 38px; height: 22px;
    border: 0; border-radius: var(--tw-radius-pill);
    background: var(--tw-fill-3);
    background-image: none !important;
    position: relative;
    transition: background-color var(--tw-dur-base) var(--tw-ease);
}
.tw-switch::before {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    transition: transform var(--tw-dur-base) var(--tw-ease);
}
.tw-switch:checked { background: var(--tw-success) !important; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tw-switch:checked { background: #34c759 !important; } }
:root[data-theme="light"] .tw-switch:checked { background: #34c759 !important; }

.tw-switch:checked::before { transform: translateX(16px); }
.tw-switch:hover { border: 0; }

/* Choice (radio group laid out as options) */
.tw-choice-group { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; min-height: var(--tw-control-h); }
.tw-choice { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tw-text-body); color: var(--tw-label); cursor: pointer; }
.tw-choice label { cursor: pointer; margin: 0; }

/* Search */
.tw-search { position: relative; display: flex; align-items: center; min-width: 220px; }
.tw-search .tw-icon { position: absolute; left: 10px; color: var(--tw-label-3); pointer-events: none; }
.tw-search .form-control { padding-left: 34px; background: var(--tw-fill-1); border-color: transparent; }
.tw-search .form-control:hover { border-color: transparent; background: var(--tw-fill-2); }
.tw-search .form-control:focus { background: var(--tw-surface); border-color: var(--tw-accent); }
.tw-search-clear { position: absolute; right: 4px; }

/* Filter bar: one row above the content it filters */
.tw-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tw-space-3); margin-bottom: var(--tw-space-4); }
.tw-filterbar .tw-search { flex: 1 1 280px; max-width: 420px; }
.tw-filterbar-meta { margin-left: auto; font-size: var(--tw-text-callout); color: var(--tw-label-3); font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { .tw-filterbar .tw-search { max-width: none; } .tw-filterbar-meta { margin-left: 0; } }

/* ---------------------------------------------------------------------
   11. Tables
   --------------------------------------------------------------------- */
.tw-table-wrap { position: relative; overflow: auto; -webkit-overflow-scrolling: touch; }
.tw-table-wrap.is-fill { max-height: calc(100vh - 290px); min-height: 240px; }
.tw-table-wrap.is-modal { max-height: 60vh; }

.tw-table, .table {
    width: 100%;
    margin: 0;
    border-collapse: separate; border-spacing: 0;
    font-size: var(--tw-text-body);
    color: var(--tw-label);
    background: transparent;
    --bs-table-bg: transparent; --bs-table-color: var(--tw-label);
    --bs-table-border-color: var(--tw-separator);
    --bs-table-hover-bg: var(--tw-fill-1);
}
.tw-table > :not(caption) > * > *, .table > :not(caption) > * > * { box-shadow: none; background: transparent; }
.tw-table thead th, .table thead th {
    position: sticky; top: 0; z-index: 2;
    padding: 10px 12px;
    background: var(--tw-surface);
    border-bottom: 1px solid var(--tw-separator-strong) !important;
    font-size: var(--tw-text-caption); line-height: var(--tw-lh-caption);
    font-weight: var(--tw-weight-semibold);
    color: var(--tw-label-2);
    text-align: left;
    white-space: nowrap;
    vertical-align: bottom;
}
.tw-table tbody td, .table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--tw-separator);
    vertical-align: middle;
    white-space: nowrap;
}
.tw-table tbody tr:last-child td { border-bottom: 0; }
.tw-table th:first-child, .tw-table td:first-child { padding-left: var(--tw-space-6); }
.tw-table th:last-child, .tw-table td:last-child { padding-right: var(--tw-space-6); }
.tw-table tbody tr { transition: background-color var(--tw-dur-fast) var(--tw-ease); }
.tw-table.is-hover tbody tr:hover, .tw-table tbody tr.is-clickable:hover { background: var(--tw-fill-1); }
.tw-table tbody tr.is-clickable { cursor: pointer; }
.tw-table tbody tr.is-selected { background: var(--tw-accent-soft); }
.tw-table .num, .tw-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tw-table .col-index { width: 56px; color: var(--tw-label-3); font-variant-numeric: tabular-nums; }
.tw-table .col-actions { width: 1%; text-align: right; }
.tw-table .col-check { width: 1%; }
.tw-table .col-wrap { white-space: normal; min-width: 240px; }
.tw-table .cell-primary { font-weight: var(--tw-weight-medium); }
.tw-table .cell-sub { display: block; font-size: var(--tw-text-caption); color: var(--tw-label-3); font-weight: var(--tw-weight-regular); }
.tw-table.is-compact tbody td { padding-top: 8px; padding-bottom: 8px; }
.tw-row-actions { display: inline-flex; gap: 2px; justify-content: flex-end; }

/* Sortable header */
.tw-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tw-sort:hover { color: var(--tw-label); }
.tw-sort .tw-icon { opacity: 0.5; }
.tw-sort.is-sorted { color: var(--tw-label); }
.tw-sort.is-sorted .tw-icon { opacity: 1; }

/* Editable grid — spreadsheet-like: fields reveal chrome on hover / focus */
.tw-table.is-editable tbody td { padding-top: 6px; padding-bottom: 6px; }
.tw-table.is-editable .form-control, .tw-table.is-editable .form-select {
    height: 32px;
    background-color: transparent;
    border-color: transparent;
}
.tw-table.is-editable .form-select { background-image: none; padding-right: 12px; }
.tw-table.is-editable tr:hover .form-control:not([readonly]):not(:disabled),
.tw-table.is-editable tr:hover .form-select:not(:disabled) { border-color: var(--tw-control-border); background-color: var(--tw-surface); }
.tw-table.is-editable tr:hover .form-select:not(:disabled) {
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2386868b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m5 6.5 3-3 3 3M5 9.5l3 3 3-3'/%3e%3c/svg%3e");
}
.tw-table.is-editable .form-control:focus, .tw-table.is-editable .form-select:focus { background-color: var(--tw-surface); border-color: var(--tw-accent); }
.tw-table.is-editable .form-control[readonly], .tw-table.is-editable .form-select:disabled { background: transparent; color: var(--tw-label); padding-left: 12px; }
.tw-table.is-editable .form-control.is-index { color: var(--tw-label-3); padding: 0; font-variant-numeric: tabular-nums; }
.tw-table.is-editable tr.is-new td { background: var(--tw-accent-soft); }
.tw-table.is-editable .form-check { justify-content: flex-start; }

/* ---------------------------------------------------------------------
   12. Status pill
   --------------------------------------------------------------------- */
.tw-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 9px 0 8px;
    border-radius: var(--tw-radius-pill);
    font-size: var(--tw-text-caption); font-weight: var(--tw-weight-medium);
    background: var(--tw-neutral-soft); color: var(--tw-label-2);
    white-space: nowrap;
}
.tw-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tw-pill.is-plain::before { display: none; }
.tw-pill.is-success { background: var(--tw-success-soft); color: var(--tw-success); }
.tw-pill.is-warning { background: var(--tw-warning-soft); color: var(--tw-warning); }
.tw-pill.is-danger { background: var(--tw-danger-soft); color: var(--tw-danger); }
.tw-pill.is-info { background: var(--tw-info-soft); color: var(--tw-info); }

.tw-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--tw-radius-xs); background: var(--tw-fill-2); color: var(--tw-label-2); font-size: var(--tw-text-caption); font-weight: var(--tw-weight-medium); }

/* ---------------------------------------------------------------------
   13. Record navigator (First / Prev / n of N / Next / Last)
   --------------------------------------------------------------------- */
.tw-recnav { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--tw-fill-1); border-radius: 10px; }
.tw-recnav .tw-icon-btn { width: 30px; height: 30px; }
.tw-recnav-count { padding: 0 8px; font-size: var(--tw-text-callout); color: var(--tw-label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-recnav-count strong { color: var(--tw-label); font-weight: var(--tw-weight-semibold); }

/* Mode banner — tells people which mode a record form is in */
.tw-mode {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--tw-text-caption); font-weight: var(--tw-weight-semibold);
    color: var(--tw-label-2);
}
.tw-mode::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tw-label-3); }
.tw-mode.is-new::before { background: var(--tw-series-1); }
.tw-mode.is-edit::before { background: var(--tw-success); }
.tw-mode.is-find::before { background: var(--tw-warning); }

/* ---------------------------------------------------------------------
   14. Lists (recent activity)
   --------------------------------------------------------------------- */
.tw-list { list-style: none; margin: 0; padding: 0; }
.tw-list-item {
    display: flex; align-items: center; gap: var(--tw-space-3);
    padding: 11px var(--tw-space-6);
    color: var(--tw-label);
    border-top: 1px solid var(--tw-separator);
    transition: background-color var(--tw-dur-fast) var(--tw-ease);
}
.tw-list > li:first-child > .tw-list-item { border-top: 0; }
a.tw-list-item:hover, button.tw-list-item:hover { background: var(--tw-fill-1); color: var(--tw-label); }
button.tw-list-item { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.tw-list-main { flex: 1; min-width: 0; }
.tw-list-title { font-weight: var(--tw-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-list-sub { font-size: var(--tw-text-caption); color: var(--tw-label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-list-end { text-align: right; flex-shrink: 0; }
.tw-list-end strong { display: block; font-weight: var(--tw-weight-semibold); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   15. Empty, loading & skeleton states
   --------------------------------------------------------------------- */
.tw-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px;
    padding: var(--tw-space-10) var(--tw-space-6);
    color: var(--tw-label-2);
}
.tw-empty .tw-empty-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tw-fill-1); color: var(--tw-label-3); margin-bottom: 6px; }
.tw-empty-title { font-size: var(--tw-text-title3); font-weight: var(--tw-weight-semibold); color: var(--tw-label); }
.tw-empty-text { font-size: var(--tw-text-callout); max-width: 360px; }
.tw-empty.is-compact { padding: var(--tw-space-6); }
td > .tw-empty { white-space: normal; }

.tw-skeleton {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--tw-fill-1) 0%, var(--tw-fill-2) 40%, var(--tw-fill-1) 80%);
    background-size: 300% 100%;
    animation: tw-shimmer 1.4s var(--tw-ease-in-out) infinite;
}
.tw-skeleton.is-text { height: 12px; margin: 6px 0; }
.tw-skeleton.is-title { height: 28px; width: 55%; margin: 8px 0; }

/* Activity overlay (the Loader component) — appears only if work takes >150ms */
.tw-activity {
    position: fixed; inset: 0; z-index: 2000;
    display: grid; place-items: center;
    background: transparent;
    animation: tw-fade var(--tw-dur-base) var(--tw-ease) 150ms both;
    cursor: progress;
}
.tw-activity-card {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--tw-bar);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--tw-shadow-raised);
    border: 1px solid var(--tw-separator);
    font-size: var(--tw-text-callout); font-weight: var(--tw-weight-medium); color: var(--tw-label-2);
}
.tw-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--tw-fill-3);
    border-top-color: var(--tw-label-2);
    animation: tw-spin 800ms linear infinite;
}
.tw-progress-line { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2001; overflow: hidden; }
.tw-progress-line::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 40%; background: var(--tw-accent); border-radius: 2px; animation: tw-indeterminate 1.1s var(--tw-ease-in-out) infinite; }

/* ---------------------------------------------------------------------
   16. Charts
   --------------------------------------------------------------------- */
.tw-chart { position: relative; width: 100%; min-height: 120px; }
.tw-chart-summary { margin-bottom: var(--tw-space-4); }
.tw-chart-summary .tw-chart-headline { font-family: var(--tw-font-display); font-size: 24px; line-height: 30px; font-weight: var(--tw-weight-semibold); letter-spacing: -0.018em; }
.tw-chart-summary .tw-chart-caption { font-size: var(--tw-text-callout); color: var(--tw-label-2); }
.tw-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--tw-text-caption); color: var(--tw-label-2); }
.tw-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.tw-legend-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--tw-series-1); }
.tw-legend-swatch.is-line { height: 2px; width: 14px; border-radius: 2px; }
.tw-legend-swatch.is-s2 { background: var(--tw-series-2); }
.tw-legend-swatch.is-s3 { background: var(--tw-series-3); }
.tw-legend-swatch.is-muted { background: var(--tw-series-muted); }
.apexcharts-canvas { font-family: var(--tw-font) !important; }
.apexcharts-tooltip.apexcharts-theme-light, .apexcharts-tooltip.apexcharts-theme-dark {
    border: 1px solid var(--tw-separator) !important;
    border-radius: 10px !important;
    background: var(--tw-surface-raised) !important;
    color: var(--tw-label) !important;
    box-shadow: var(--tw-shadow-raised) !important;
    font-size: var(--tw-text-caption) !important;
}
.apexcharts-tooltip-title { background: transparent !important; border-bottom: 1px solid var(--tw-separator) !important; font-weight: 600 !important; color: var(--tw-label-2) !important; }
.apexcharts-tooltip-text-y-value { font-variant-numeric: tabular-nums; }
.apexcharts-xaxistooltip { display: none !important; }
.apexcharts-legend-text { color: var(--tw-label-2) !important; }

/* Horizontal bar list — an accessible, label-first ranking (no chart library) */
.tw-bars { display: grid; gap: 12px; }
.tw-bar-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2.2fr) auto; align-items: center; gap: 12px; font-size: var(--tw-text-callout); }
.tw-bar-label { color: var(--tw-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-bar-track { height: 8px; background: var(--tw-fill-1); border-radius: 4px; overflow: hidden; }
.tw-bar-fill { height: 100%; background: var(--tw-series-1); border-radius: 0 4px 4px 0; transform-origin: left; animation: tw-grow-x var(--tw-dur-slow) var(--tw-ease) both; }
.tw-bar-value { font-variant-numeric: tabular-nums; color: var(--tw-label-2); text-align: right; min-width: 64px; }
.tw-bar-share { color: var(--tw-label-3); font-size: var(--tw-text-caption); margin-left: 6px; }

/* ---------------------------------------------------------------------
   17. Modals (Bootstrap) & drawers
   --------------------------------------------------------------------- */
.modal { --bs-modal-bg: var(--tw-surface-raised); --bs-modal-color: var(--tw-label); --bs-modal-border-width: 0; }
.modal-backdrop { --bs-backdrop-bg: #000; }
.modal-backdrop.show { opacity: 0.28; }
.modal-content {
    border: 0;
    border-radius: var(--tw-radius-xl);
    background: var(--tw-surface-raised);
    box-shadow: var(--tw-shadow-overlay);
    overflow: hidden;
}
.modal.fade .modal-dialog { transform: scale(0.97) translateY(6px); transition: transform var(--tw-dur-slow) var(--tw-ease), opacity var(--tw-dur-slow) var(--tw-ease); opacity: 0; }
.modal.show .modal-dialog { transform: none; opacity: 1; }
.modal-header { padding: var(--tw-space-5) var(--tw-space-6) var(--tw-space-3); border-bottom: 0; display: flex; align-items: center; gap: var(--tw-space-3); flex-wrap: nowrap; }
.modal-title { font-size: 17px; line-height: 22px; font-weight: var(--tw-weight-semibold); letter-spacing: -0.01em; }
.modal-body { padding: var(--tw-space-2) var(--tw-space-6) var(--tw-space-5); }
.modal-body.is-flush { padding: 0; }
.modal-footer { padding: var(--tw-space-3) var(--tw-space-6) var(--tw-space-5); border-top: 0; gap: var(--tw-space-2); }
.modal-footer > * { margin: 0; }
.btn-close {
    width: 28px; height: 28px; padding: 0; margin: 0 0 0 auto !important;
    border-radius: 50%; opacity: 1;
    background: var(--tw-fill-2) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='%2386868b' stroke-width='1.8' stroke-linecap='round' d='M5 5l6 6M11 5l-6 6'/%3e%3c/svg%3e") center / 14px no-repeat;
    transition: background-color var(--tw-dur-fast) var(--tw-ease);
}
.btn-close:hover { background-color: var(--tw-fill-3); opacity: 1; }
.btn-close:focus { box-shadow: 0 0 0 3px var(--tw-accent-ring); }

/* Dropdowns / popovers */
.dropdown-menu {
    --bs-dropdown-bg: var(--tw-surface-raised);
    --bs-dropdown-color: var(--tw-label);
    --bs-dropdown-link-color: var(--tw-label);
    --bs-dropdown-link-hover-bg: var(--tw-fill-1);
    --bs-dropdown-link-active-bg: var(--tw-accent);
    --bs-dropdown-border-color: var(--tw-separator);
    padding: 6px;
    border-radius: var(--tw-radius-md);
    box-shadow: var(--tw-shadow-raised);
    min-width: 220px;
    font-size: var(--tw-text-body);
    animation: tw-pop var(--tw-dur-base) var(--tw-ease);
}
.dropdown-item { border-radius: 7px; padding: 7px 10px; display: flex; align-items: center; gap: 10px; }
.dropdown-item .tw-icon { color: var(--tw-label-2); }
.dropdown-header-card { padding: 10px 10px 12px; display: flex; align-items: center; gap: 12px; }
.dropdown-divider { border-top-color: var(--tw-separator); margin: 6px 4px; }

/* Media preview inside modals */
.tw-media-frame { display: grid; place-items: center; background: var(--tw-surface-sunken); border-radius: var(--tw-radius-md); overflow: hidden; }
.tw-media-frame img { max-width: 100%; height: auto; display: block; }
.tw-media-frame iframe { width: 100%; height: 60vh; border: 0; display: block; }

/* ---------------------------------------------------------------------
   18. Alerts, confirmations & toasts (SweetAlert2 re-skin)
   --------------------------------------------------------------------- */
.swal2-container { font-family: var(--tw-font) !important; }
.swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, 0.28) !important; }
.swal2-popup:not(.swal2-toast) {
    width: 340px !important;
    padding: 24px 22px 18px !important;
    border-radius: var(--tw-radius-xl) !important;
    background: var(--tw-surface-raised) !important;
    color: var(--tw-label) !important;
    box-shadow: var(--tw-shadow-overlay) !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon { transform: scale(0.62); margin: -6px auto -10px !important; border-width: 3px !important; }
.swal2-popup:not(.swal2-toast) .swal2-title { padding: 8px 0 0 !important; font-size: 17px !important; line-height: 22px; font-weight: 600 !important; color: var(--tw-label) !important; }
.swal2-popup:not(.swal2-toast) .swal2-html-container { margin: 6px 0 0 !important; font-size: var(--tw-text-callout) !important; line-height: 18px; color: var(--tw-label-2) !important; }
.swal2-popup:not(.swal2-toast) .swal2-actions { width: 100%; margin: 20px 0 0 !important; gap: 8px; flex-wrap: nowrap; }
.swal2-popup:not(.swal2-toast) .swal2-actions button { flex: 1; margin: 0 !important; }
.swal2-styled {
    height: 36px; padding: 0 16px !important;
    border-radius: var(--tw-radius-sm) !important;
    font-size: var(--tw-text-body) !important; font-weight: 500 !important;
    box-shadow: none !important;
    transition: background-color var(--tw-dur-fast) var(--tw-ease) !important;
}
.swal2-styled.swal2-confirm { background: var(--tw-accent-fill) !important; color: #fff !important; }
.swal2-styled.swal2-confirm:hover { background: var(--tw-accent-fill-hover) !important; }
.swal2-styled.swal2-cancel { background: var(--tw-fill-2) !important; color: var(--tw-label) !important; }
.swal2-styled.swal2-cancel:hover { background: var(--tw-fill-3) !important; }
.swal2-styled:focus-visible { outline: 2px solid var(--tw-accent) !important; outline-offset: 2px; }
.swal2-icon.swal2-success { border-color: var(--tw-success) !important; color: var(--tw-success) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--tw-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--tw-success-soft) !important; }
.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal2-icon.swal2-success .swal2-success-fix { background: var(--tw-surface-raised) !important; }
.swal2-icon.swal2-info, .swal2-icon.swal2-question { border-color: var(--tw-accent) !important; color: var(--tw-accent) !important; }
.swal2-icon.swal2-error { border-color: var(--tw-danger) !important; }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--tw-danger) !important; }
.swal2-icon.swal2-warning { border-color: var(--tw-warning) !important; color: var(--tw-warning) !important; }
.swal2-popup.swal2-toast {
    padding: 10px 14px !important;
    border-radius: 14px !important;
    background: var(--tw-surface-raised) !important;
    color: var(--tw-label) !important;
    box-shadow: var(--tw-shadow-raised) !important;
    border: 1px solid var(--tw-separator);
}
.swal2-popup.swal2-toast .swal2-title { font-size: var(--tw-text-body) !important; font-weight: 500 !important; color: var(--tw-label) !important; }
.swal2-timer-progress-bar { background: var(--tw-fill-3) !important; }

/* ---------------------------------------------------------------------
   19. Sign-in
   --------------------------------------------------------------------- */
.tw-auth {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: var(--tw-space-8) var(--tw-space-4);
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--tw-accent-soft), transparent 60%),
        var(--tw-bg);
}
.tw-auth-card {
    width: 100%; max-width: 380px;
    padding: var(--tw-space-10) var(--tw-space-8) var(--tw-space-8);
    background: var(--tw-surface);
    border: 1px solid var(--tw-separator);
    border-radius: 22px;
    box-shadow: var(--tw-shadow-raised);
    animation: tw-rise 480ms var(--tw-ease) both;
}
.tw-auth-card .tw-brand-mark { width: 44px; height: 44px; margin: 0 auto var(--tw-space-4); }
.tw-auth-hero {
    display: block; width: 100%; aspect-ratio: 620 / 246; object-fit: cover;
    border-radius: 14px; margin-bottom: var(--tw-space-6);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 12px 32px rgba(182, 17, 101, 0.22);
}
.tw-auth-title { text-align: center; font-family: var(--tw-font-display); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.018em; }
.tw-auth-sub { text-align: center; color: var(--tw-label-2); font-size: var(--tw-text-body); margin: 6px 0 var(--tw-space-8); }
.tw-auth-form { display: grid; gap: var(--tw-space-4); }
.tw-auth-form .form-control { height: 42px; font-size: 15px; }
.tw-auth-form .tw-btn { height: 42px; width: 100%; font-size: 15px; margin-top: var(--tw-space-2); }
.tw-auth-foot { margin-top: var(--tw-space-6); text-align: center; font-size: var(--tw-text-caption); color: var(--tw-label-3); }

/* ---------------------------------------------------------------------
   20. Icons
   --------------------------------------------------------------------- */
.tw-flip { transform: rotate(180deg); }
.tw-spin { animation: tw-spin 800ms linear infinite; }
.tw-icon { display: inline-block; flex-shrink: 0; vertical-align: -0.2em; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------------
   21. Motion
   --------------------------------------------------------------------- */
@keyframes tw-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tw-pop { from { opacity: 0; transform: scale(0.97) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes tw-spin { to { transform: rotate(360deg); } }
@keyframes tw-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes tw-indeterminate { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes tw-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
    .tw-skeleton { animation: none; }
}

/* ---------------------------------------------------------------------
   22. Blazor framework UI
   --------------------------------------------------------------------- */
#blazor-error-ui {
    display: none;
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
    z-index: 3000;
    padding: 12px 16px 12px 18px;
    border-radius: 14px;
    background: var(--tw-surface-raised); color: var(--tw-label);
    box-shadow: var(--tw-shadow-overlay);
    border: 1px solid var(--tw-separator);
    font-size: var(--tw-text-callout);
    gap: 12px; align-items: center;
}
#blazor-error-ui .reload { font-weight: 600; margin-left: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; margin-left: 12px; color: var(--tw-label-3); }
.blazor-error-boundary { padding: 16px 20px; border-radius: var(--tw-radius-md); background: var(--tw-danger-soft); color: var(--tw-danger); }
.blazor-error-boundary::after { content: "Something went wrong while showing this section."; }
h1:focus { outline: none; }
.validation-message { color: var(--tw-danger); font-size: var(--tw-text-caption); }

/* ---------------------------------------------------------------------
   23. Print
   --------------------------------------------------------------------- */
@media print {
    .tw-sidebar, .tw-topbar, .tw-footer, .tw-page-actions, .tw-filterbar { display: none !important; }
    .tw-app { display: block; }
    .tw-content { padding: 0; }
    .tw-panel { box-shadow: none; break-inside: avoid; }
    .tw-table-wrap.is-fill { max-height: none; overflow: visible; }
}

/* =====================================================================
   20. Brand colour layer
   ---------------------------------------------------------------------
   A warmer, more branded skin on top of the neutral system: a magenta
   sidebar, a soft brand wash behind page headers, colour-coded KPI
   badges drawn from the four colours of the Tawfir mark, and tinted
   table headers. Colour here is decorative identity only — status
   colours (success / warning / danger) keep their meaning.
   ===================================================================== */
:root {
    /* Sidebar */
    --tw-side-bg: linear-gradient(180deg, #a3115c 0%, #7a0c45 52%, #4f0831 100%);
    --tw-side-ink: rgba(255, 255, 255, 0.92);
    --tw-side-ink-2: rgba(255, 255, 255, 0.74);      /* group headings, icons — 4.8:1 on the lightest stop */
    --tw-side-hover: rgba(255, 255, 255, 0.10);
    --tw-side-press: rgba(255, 255, 255, 0.16);
    --tw-side-active-bg: #ffffff;
    --tw-side-active-ink: #9c0f57;
    --tw-side-rule: rgba(255, 255, 255, 0.14);

    /* Page wash */
    --tw-wash:
        radial-gradient(760px 320px at 6% 0, rgba(182, 17, 101, 0.16), transparent 75%),
        radial-gradient(760px 340px at 94% 0, rgba(129, 179, 225, 0.30), transparent 75%),
        radial-gradient(640px 260px at 52% 0, rgba(249, 198, 41, 0.12), transparent 75%);
    --tw-bar: rgba(247, 242, 246, 0.80);

    /* Table header */
    --tw-thead-bg: #fbf3f7;
    --tw-thead-ink: #7d0c47;

    /* KPI tints: ink (icon, 4.5:1+ on its soft fill) and soft fill */
    --tw-tint-1: #b61165; --tw-tint-1-soft: rgba(182, 17, 101, 0.11);
    --tw-tint-2: #2468a8; --tw-tint-2-soft: rgba(129, 179, 225, 0.26);
    --tw-tint-3: #19794f; --tw-tint-3-soft: rgba(53, 175, 120, 0.17);
    --tw-tint-4: #8f5b00; --tw-tint-4-soft: rgba(249, 198, 41, 0.26);
    --tw-tint-5: #b8383a; --tw-tint-5-soft: rgba(236, 101, 100, 0.16);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tw-side-bg: linear-gradient(180deg, #5c0a35 0%, #3f0826 55%, #26061a 100%);
        --tw-side-active-bg: rgba(255, 255, 255, 0.16);
        --tw-side-active-ink: #ffffff;
        --tw-wash:
            radial-gradient(760px 320px at 6% 0, rgba(214, 64, 138, 0.20), transparent 75%),
            radial-gradient(760px 340px at 94% 0, rgba(74, 146, 220, 0.16), transparent 75%);
        --tw-bar: rgba(20, 14, 18, 0.78);
        --tw-thead-bg: #241a20;
        --tw-thead-ink: #f0a9ca;
        --tw-tint-1: #f07fb4; --tw-tint-1-soft: rgba(214, 64, 138, 0.22);
        --tw-tint-2: #8cc0ee; --tw-tint-2-soft: rgba(74, 146, 220, 0.22);
        --tw-tint-3: #6fd6a4; --tw-tint-3-soft: rgba(53, 175, 120, 0.22);
        --tw-tint-4: #f5cf5a; --tw-tint-4-soft: rgba(249, 198, 41, 0.18);
        --tw-tint-5: #f49392; --tw-tint-5-soft: rgba(236, 101, 100, 0.20);
    }
}
:root[data-theme="dark"] {
    --tw-side-bg: linear-gradient(180deg, #5c0a35 0%, #3f0826 55%, #26061a 100%);
    --tw-side-active-bg: rgba(255, 255, 255, 0.16);
    --tw-side-active-ink: #ffffff;
    --tw-wash:
        radial-gradient(760px 320px at 6% 0, rgba(214, 64, 138, 0.20), transparent 75%),
        radial-gradient(760px 340px at 94% 0, rgba(74, 146, 220, 0.16), transparent 75%);
    --tw-bar: rgba(20, 14, 18, 0.78);
    --tw-thead-bg: #241a20;
    --tw-thead-ink: #f0a9ca;
    --tw-tint-1: #f07fb4; --tw-tint-1-soft: rgba(214, 64, 138, 0.22);
    --tw-tint-2: #8cc0ee; --tw-tint-2-soft: rgba(74, 146, 220, 0.22);
    --tw-tint-3: #6fd6a4; --tw-tint-3-soft: rgba(53, 175, 120, 0.22);
    --tw-tint-4: #f5cf5a; --tw-tint-4-soft: rgba(249, 198, 41, 0.18);
    --tw-tint-5: #f49392; --tw-tint-5-soft: rgba(236, 101, 100, 0.20);
}


/* --- Sidebar --------------------------------------------------------- */
.tw-sidebar { background: var(--tw-side-bg); border-right: 0; color: var(--tw-side-ink); scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.tw-sidebar *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); background-clip: content-box; }
.tw-sidebar-brand, .tw-sidebar-brand:hover { color: #ffffff; }
.tw-sidebar-brand .tw-brand-mark {
    width: 34px; height: 34px; padding: 4px;
    background: #ffffff; border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.16);
}
.tw-sidebar .tw-brand-name small { color: var(--tw-side-ink-2); }
.tw-sidebar .tw-nav-heading { color: var(--tw-side-ink-2); letter-spacing: 0.02em; }
.tw-sidebar .tw-nav-item { color: var(--tw-side-ink); }
.tw-sidebar .tw-nav-item .tw-icon { color: var(--tw-side-ink-2); }
.tw-sidebar .tw-nav-item:hover { background: var(--tw-side-hover); color: #ffffff; }
.tw-sidebar .tw-nav-item:hover .tw-icon { color: #ffffff; }
.tw-sidebar .tw-nav-item:active { background: var(--tw-side-press); }
.tw-sidebar .tw-nav-item.is-active {
    background: var(--tw-side-active-bg); color: var(--tw-side-active-ink);
    font-weight: var(--tw-weight-semibold);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(40, 0, 20, 0.22);
}
.tw-sidebar .tw-nav-item.is-active .tw-icon { color: var(--tw-side-active-ink); }
.tw-sidebar .tw-nav-item:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }
.tw-sidebar .tw-sidebar-foot { border-top-color: var(--tw-side-rule); }
.tw-sidebar .tw-skeleton, .tw-sidebar .tw-skeleton-line { background: rgba(255, 255, 255, 0.14); }
.tw-app[data-sidebar="collapsed"] .tw-sidebar .tw-nav-heading { background: var(--tw-side-rule); }

/* --- Page wash and headers -------------------------------------------- */
.tw-main { background: var(--tw-wash), var(--tw-bg); background-repeat: no-repeat; }
.tw-eyebrow { color: var(--tw-accent); font-weight: var(--tw-weight-semibold); }

/* --- KPI cards: colour-coded badge + faint corner tint ---------------- */
.tw-metric { --tw-tint: var(--tw-tint-1); --tw-tint-soft: var(--tw-tint-1-soft); overflow: hidden; }
.tw-metrics > .tw-metric:nth-child(4n+2) { --tw-tint: var(--tw-tint-2); --tw-tint-soft: var(--tw-tint-2-soft); }
.tw-metrics > .tw-metric:nth-child(4n+3) { --tw-tint: var(--tw-tint-3); --tw-tint-soft: var(--tw-tint-3-soft); }
.tw-metrics > .tw-metric:nth-child(4n+4) { --tw-tint: var(--tw-tint-4); --tw-tint-soft: var(--tw-tint-4-soft); }
.tw-metrics + .tw-metrics > .tw-metric:nth-child(4n+1) { --tw-tint: var(--tw-tint-5); --tw-tint-soft: var(--tw-tint-5-soft); }
.tw-metric::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(260px 140px at 100% 0%, var(--tw-tint-soft), transparent 70%);
    opacity: 0.9;
}
.tw-metric > * { position: relative; }
.tw-metric-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tw-metric-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-metric-badge {
    width: 30px; height: 30px; flex-shrink: 0;
    display: inline-grid; place-items: center;
    border-radius: 9px;
    background: var(--tw-tint-soft);
    color: var(--tw-tint);
}

/* Sparklines take their card's colour */
.tw-metric .tw-spark-line { stroke: var(--tw-tint); }
.tw-metric .tw-spark-area { fill: var(--tw-tint); opacity: 0.12; }

/* --- Tables ------------------------------------------------------------ */
.tw-table thead th, .table thead th { background: var(--tw-thead-bg); color: var(--tw-thead-ink); }
.tw-table thead th .tw-sort { color: inherit; }

/* --- Segmented control: active segment carries the brand -------------- */
.tw-segmented button.is-active { color: var(--tw-accent); font-weight: var(--tw-weight-semibold); }

/* --- Appearance switch (header) -------------------------------------- */
.tw-theme-switch {
    display: inline-flex; align-items: center; gap: 2px; padding: 2px;
    border-radius: var(--tw-radius-pill);
    background: var(--tw-fill-2);
}
.tw-theme-switch button {
    width: 28px; height: 26px; display: inline-grid; place-items: center;
    border: 0; border-radius: var(--tw-radius-pill); background: transparent;
    color: var(--tw-label-2); cursor: pointer;
    transition: background-color var(--tw-dur-fast) var(--tw-ease), color var(--tw-dur-fast) var(--tw-ease);
}
.tw-theme-switch button:hover { color: var(--tw-label); }
.tw-theme-switch button:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 1px; }
.tw-theme-switch button[aria-checked="true"] {
    background: var(--tw-surface); color: var(--tw-accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

/* --- Member filter (multi-select popover) ------------------------------ */
.tw-mfilter { position: relative; }
.tw-mfilter .tw-btn.is-filtered { border-color: var(--tw-accent); color: var(--tw-accent); background: var(--tw-accent-soft); }
.tw-mfilter-scrim { position: fixed; inset: 0; z-index: 60; }
.tw-mfilter-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 61;
    width: min(640px, calc(100vw - 32px));
    display: flex; flex-direction: column; max-height: min(640px, calc(100vh - 120px));
    background: var(--tw-surface-raised); border: 1px solid var(--tw-separator);
    border-radius: var(--tw-radius-md); box-shadow: var(--tw-shadow-overlay);
    animation: tw-rise var(--tw-dur-base) var(--tw-ease) both;
}
.tw-mfilter-head { padding: 14px 18px 10px; display: grid; gap: 2px; border-bottom: 1px solid var(--tw-separator); }
.tw-mfilter-body { padding: 12px 18px; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.tw-mfilter-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.tw-mfilter-group.is-wide { grid-column: span 2; }
.tw-mfilter-group legend {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    font-size: var(--tw-text-caption); font-weight: var(--tw-weight-semibold); color: var(--tw-label-2);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
}
.tw-mfilter-clear { border: 0; background: none; padding: 0; color: var(--tw-accent); font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; }
.tw-mfilter-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 12px; }
.tw-mfilter-options.is-scroll { max-height: 176px; overflow-y: auto; padding-right: 4px; }
.tw-mfilter-option {
    display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 6px;
    border-radius: var(--tw-radius-xs); cursor: pointer; font-size: var(--tw-text-callout);
}
.tw-mfilter-option:hover { background: var(--tw-fill-1); }
.tw-mfilter-option .form-check-input { margin: 0; flex-shrink: 0; }
.tw-mfilter-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-mfilter-count { color: var(--tw-label-3); font-size: var(--tw-text-caption); font-variant-numeric: tabular-nums; }
.tw-mfilter-search { height: 32px; margin-bottom: 6px; }
.tw-mfilter-age { display: flex; align-items: center; gap: 8px; }
.tw-mfilter-age .form-control { width: 90px; height: 32px; }
.tw-mfilter-foot { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--tw-separator); }
@media (max-width: 640px) {
    .tw-mfilter-pop { position: fixed; top: 72px; left: 16px; right: 16px; width: auto; }
    .tw-mfilter-body { grid-template-columns: minmax(0, 1fr); }
    .tw-mfilter-group.is-wide { grid-column: auto; }
}

/* --- Hosting-charge warning banner (billing) ---------------------------- */
.tw-billing-banner {
    display: flex; align-items: flex-start; gap: 12px; margin: 0 0 var(--tw-space-5);
    padding: 12px 16px; border-radius: var(--tw-radius-md);
    background: var(--tw-warning-soft); color: var(--tw-label); border: 1px solid color-mix(in srgb, var(--tw-warning) 35%, transparent);
}
.tw-billing-banner .tw-icon { color: var(--tw-warning); margin-top: 1px; }
.tw-billing-banner strong { display: block; font-size: var(--tw-text-body); }
.tw-billing-banner span { font-size: var(--tw-text-callout); color: var(--tw-label-2); }

/* --- Sign-in: same wash ----------------------------------------------- */
.tw-auth { background: var(--tw-wash), radial-gradient(1200px 600px at 50% -10%, var(--tw-accent-soft), transparent 60%), var(--tw-bg); }

@media print {
    .tw-main { background: #ffffff; }
    .tw-metric::before { display: none; }
    .tw-table thead th, .table thead th { background: #ffffff; color: #000000; }
}