/**
 * TokuGo Design System
 * Single source of truth for all design tokens (colors, typography, radius,
 * shadows) and for mapping them onto Bootstrap 5.3.
 *
 * Token values are ported from the product design system (docs/design/vstyles.css,
 * a Tailwind v4 source file). Tailwind-only constructs (@theme, @utility,
 * @custom-variant) are not used here: this app ships plain CSS + Bootstrap.
 * All palette values use oklch. Bootstrap's *-rgb variables need numeric
 * triplets, so those carry sRGB conversions of the matching oklch token; keep
 * them in sync if a palette value changes.
 */

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */

:root {
    color-scheme: dark;

    --radius: 0.875rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) + 8px);

    --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

    /* Surfaces and text */
    --background: oklch(0.16 0.012 60);
    --foreground: oklch(0.97 0.006 80);
    --card: oklch(0.205 0.014 62);
    --card-foreground: oklch(0.97 0.006 80);
    --popover: oklch(0.205 0.014 62);
    --popover-foreground: oklch(0.97 0.006 80);
    --primary: oklch(0.74 0.185 52);
    --primary-foreground: oklch(0.16 0.012 60);
    --primary-glow: oklch(0.84 0.155 74);
    --secondary: oklch(0.26 0.016 62);
    --secondary-foreground: oklch(0.96 0.006 80);
    --muted: oklch(0.24 0.014 62);
    --muted-foreground: oklch(0.72 0.018 72);
    --accent: oklch(0.32 0.055 58);
    --accent-foreground: oklch(0.88 0.13 68);
    --destructive: oklch(0.62 0.22 27);
    --destructive-foreground: oklch(0.99 0 0);
    --border: oklch(0.99 0.02 70 / 12%);
    --input: oklch(0.99 0.02 70 / 16%);
    --ring: oklch(0.74 0.185 52);
    --ink: oklch(0.12 0.012 60);
    --conscious: oklch(0.7 0.14 155);
    --conscious-foreground: oklch(0.15 0.02 155);

    --gradient-primary: linear-gradient(135deg, oklch(0.74 0.185 52), oklch(0.85 0.155 80));
    --gradient-ink: linear-gradient(150deg, oklch(0.2 0.014 60), oklch(0.28 0.04 45));
    --shadow-card: 0 1px 2px oklch(0 0 0 / 40%), 0 14px 36px -18px oklch(0 0 0 / 65%);
    --shadow-glow: 0 18px 50px -20px oklch(0.74 0.185 52 / 60%);

    --chart-1: oklch(0.74 0.185 52);
    --chart-2: oklch(0.85 0.155 80);
    --chart-3: oklch(0.7 0.14 155);
    --chart-4: oklch(0.65 0.05 60);
    --chart-5: oklch(0.55 0.09 40);

    --sidebar: oklch(0.185 0.013 62);
    --sidebar-foreground: oklch(0.94 0.006 80);
    --sidebar-primary: oklch(0.74 0.185 52);
    --sidebar-primary-foreground: oklch(0.16 0.012 60);
    --sidebar-accent: oklch(0.3 0.05 58);
    --sidebar-accent-foreground: oklch(0.88 0.13 68);
    --sidebar-border: oklch(0.99 0.02 70 / 12%);
    --sidebar-ring: oklch(0.74 0.185 52);

    /* Value tracks: Savings / Rewards / Drops / Impact */
    --pillar-save: oklch(0.78 0.14 205);
    --pillar-earn: oklch(0.84 0.16 88);
    --pillar-flex: oklch(0.72 0.2 330);
    --pillar-earth: oklch(0.75 0.15 155);

    /* Dashboard semantics not defined by the product palette */
    --info: var(--pillar-save);
    --warning: var(--pillar-earn);
    --focus-ring: oklch(0.74 0.185 52 / 35%);

    /* ========================================================================
       SEMANTIC COLOURS (main / tinted background / readable text)
       ======================================================================== */
    --color-success: var(--conscious);
    --color-success-bg: color-mix(in oklch, var(--conscious) 22%, var(--card));
    --color-success-text: color-mix(in oklch, var(--conscious) 55%, var(--foreground));

    --color-warning: var(--warning);
    --color-warning-bg: color-mix(in oklch, var(--warning) 20%, var(--card));
    --color-warning-text: color-mix(in oklch, var(--warning) 60%, var(--foreground));

    --color-danger: var(--destructive);
    --color-danger-bg: color-mix(in oklch, var(--destructive) 24%, var(--card));
    --color-danger-text: color-mix(in oklch, var(--destructive) 45%, var(--foreground));

    --color-info: var(--info);
    --color-info-bg: color-mix(in oklch, var(--info) 20%, var(--card));
    --color-info-text: color-mix(in oklch, var(--info) 55%, var(--foreground));

    --color-secondary: var(--primary-glow);
    --color-secondary-bg: var(--accent);
    --color-secondary-text: var(--accent-foreground);

    --color-accent: var(--accent-foreground);

    /* ========================================================================
       LEGACY ALIASES - older names used by stylesheets and templates
       Prefer the tokens above in new code.
       ======================================================================== */
    --brand-primary: var(--primary);
    --brand-secondary: var(--info);

    --background-primary: var(--background);
    --background-secondary: var(--card);
    --background-tertiary: var(--secondary);

    --text-primary: var(--foreground);
    --text-secondary: color-mix(in oklch, var(--foreground) 55%, var(--muted-foreground));
    --text-muted: var(--muted-foreground);

    --border-color: var(--border);

    --sidebar-bg: var(--sidebar);
    --sidebar-bg-highlight: var(--sidebar-accent);
    --sidebar-text: var(--sidebar-foreground);
    --nav-hover: var(--primary-glow);

    --card-bg: var(--card);
    --card-header-bg: var(--card);
    --card-border: var(--border);
    --card-shadow-light: oklch(0 0 0 / 40%);
    --card-shadow-hover: oklch(0 0 0 / 65%);

    --input-bg: var(--secondary);
    --input-border: var(--input);
    --input-group-bg: var(--muted);
    --focus-shadow-color: var(--focus-ring);

    --list-border: var(--border);
    --footer-border: var(--border);
    --print-border: var(--border);

    --primary-color: var(--primary);
    --secondary-color: var(--info);
    --success-color: var(--color-success);
    --info-color: var(--color-info);
    --warning-color: var(--color-warning);
    --danger-color: var(--color-danger);
    --accent-color: var(--color-accent);
    --light-color: var(--secondary);
    --bright-colour: var(--foreground);

    /* ========================================================================
       STATUS / ROLE / CONTENT COLOURS - badges and indicators
       ======================================================================== */
    --status-active: var(--color-success);
    --status-active-bg: var(--color-success-bg);
    --status-active-text: var(--color-success-text);

    --status-inactive: var(--color-secondary);
    --status-inactive-bg: var(--color-secondary-bg);
    --status-inactive-text: var(--color-secondary-text);

    --status-pending: var(--color-warning);
    --status-pending-bg: var(--color-warning-bg);
    --status-pending-text: var(--color-warning-text);

    --role-admin: var(--color-danger);
    --role-admin-bg: var(--color-danger-bg);
    --role-admin-text: var(--color-danger-text);

    --role-manager: var(--color-warning);
    --role-manager-bg: var(--color-warning-bg);
    --role-manager-text: var(--color-warning-text);

    --role-staff: var(--color-info);
    --role-staff-bg: var(--color-info-bg);
    --role-staff-text: var(--color-info-text);

    --role-user: var(--color-secondary);
    --role-user-bg: var(--color-secondary-bg);
    --role-user-text: var(--color-secondary-text);

    --role-advertising: var(--pillar-flex);
    --role-advertising-bg: color-mix(in oklch, var(--pillar-flex) 22%, var(--card));
    --role-advertising-text: color-mix(in oklch, var(--pillar-flex) 55%, var(--foreground));

    --content-neutral: var(--color-secondary);
    --content-neutral-bg: var(--color-secondary-bg);
    --content-neutral-text: var(--color-secondary-text);
}

/* ============================================================================
   BOOTSTRAP BRIDGE - global variables
   Same selector as Bootstrap's own dark theme block, loaded later, so it wins.
   ============================================================================ */

:root,
[data-bs-theme="dark"] {
    color-scheme: dark;

    --bs-font-sans-serif: var(--font-sans);
    --bs-body-font-family: var(--font-sans);

    --bs-body-color: var(--foreground);
    --bs-body-color-rgb: 247, 245, 241;
    --bs-body-bg: var(--background);
    --bs-body-bg-rgb: 17, 12, 8;
    --bs-emphasis-color: var(--foreground);
    --bs-emphasis-color-rgb: 247, 245, 241;
    --bs-secondary-color: var(--muted-foreground);
    --bs-secondary-color-rgb: 172, 163, 153;
    --bs-secondary-bg: var(--secondary);
    --bs-secondary-bg-rgb: 42, 34, 28;
    --bs-tertiary-color: var(--muted-foreground);
    --bs-tertiary-color-rgb: 172, 163, 153;
    --bs-tertiary-bg: var(--muted);
    --bs-tertiary-bg-rgb: 36, 30, 25;
    --bs-heading-color: inherit;

    --bs-primary: var(--primary);
    --bs-primary-rgb: 255, 130, 22;
    --bs-secondary: var(--muted-foreground);
    --bs-secondary-rgb: 172, 163, 153;
    --bs-success: var(--conscious);
    --bs-success-rgb: 71, 183, 119;
    --bs-info: var(--info);
    --bs-info-rgb: 0, 208, 226;
    --bs-warning: var(--warning);
    --bs-warning-rgb: 246, 195, 48;
    --bs-danger: var(--destructive);
    --bs-danger-rgb: 238, 53, 51;
    --bs-dark: var(--ink);
    --bs-dark-rgb: 9, 5, 3;

    --bs-primary-text-emphasis: var(--accent-foreground);
    --bs-secondary-text-emphasis: var(--foreground);
    --bs-success-text-emphasis: var(--color-success-text);
    --bs-info-text-emphasis: var(--color-info-text);
    --bs-warning-text-emphasis: var(--color-warning-text);
    --bs-danger-text-emphasis: var(--color-danger-text);

    --bs-primary-bg-subtle: var(--accent);
    --bs-secondary-bg-subtle: var(--secondary);
    --bs-success-bg-subtle: var(--color-success-bg);
    --bs-info-bg-subtle: var(--color-info-bg);
    --bs-warning-bg-subtle: var(--color-warning-bg);
    --bs-danger-bg-subtle: var(--color-danger-bg);
    --bs-dark-bg-subtle: var(--ink);

    --bs-primary-border-subtle: color-mix(in oklch, var(--primary) 45%, transparent);
    --bs-secondary-border-subtle: var(--border);
    --bs-success-border-subtle: color-mix(in oklch, var(--conscious) 45%, transparent);
    --bs-info-border-subtle: color-mix(in oklch, var(--info) 45%, transparent);
    --bs-warning-border-subtle: color-mix(in oklch, var(--warning) 45%, transparent);
    --bs-danger-border-subtle: color-mix(in oklch, var(--destructive) 50%, transparent);

    --bs-link-color: var(--primary);
    --bs-link-color-rgb: 255, 130, 22;
    --bs-link-hover-color: var(--primary-glow);
    --bs-link-hover-color-rgb: 255, 186, 67;

    --bs-code-color: var(--accent-foreground);
    --bs-highlight-color: var(--ink);
    --bs-highlight-bg: var(--primary-glow);

    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-xl);
    --bs-border-radius-xxl: var(--radius-2xl);

    --bs-box-shadow: var(--shadow-card);
    --bs-box-shadow-sm: 0 1px 2px oklch(0 0 0 / 40%);
    --bs-box-shadow-lg: var(--shadow-card);

    --bs-focus-ring-color: var(--focus-ring);
    --bs-form-valid-color: var(--conscious);
    --bs-form-valid-border-color: var(--conscious);
    --bs-form-invalid-color: var(--destructive);
    --bs-form-invalid-border-color: var(--destructive);
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

body {
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--foreground);
}

::selection {
    background-color: color-mix(in oklch, var(--primary) 35%, transparent);
    color: var(--foreground);
}

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

/* ============================================================================
   BOOTSTRAP BRIDGE - components
   ============================================================================ */

/* Buttons */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--radius-md);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

.btn-sm {
    --bs-btn-border-radius: var(--radius-sm);
}

.btn-primary {
    --bs-btn-color: var(--primary-foreground);
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--primary-foreground);
    --bs-btn-hover-bg: var(--primary-glow);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--primary-foreground);
    --bs-btn-active-bg: var(--primary-glow);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--primary-foreground);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--gradient-primary);
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover,
.btn-primary:active {
    filter: brightness(1.06);
}

.btn-secondary,
.btn-light {
    --bs-btn-color: var(--secondary-foreground);
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--accent-foreground);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-color: var(--accent-foreground);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--border);
    --bs-btn-disabled-color: var(--muted-foreground);
    --bs-btn-disabled-bg: var(--muted);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-dark {
    --bs-btn-color: var(--foreground);
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--foreground);
    --bs-btn-hover-bg: var(--secondary);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-color: var(--foreground);
    --bs-btn-active-bg: var(--secondary);
    --bs-btn-active-border-color: var(--border);
}

.btn-success {
    --bs-btn-color: var(--conscious-foreground);
    --bs-btn-bg: var(--conscious);
    --bs-btn-border-color: var(--conscious);
    --bs-btn-hover-color: var(--conscious-foreground);
    --bs-btn-hover-bg: color-mix(in oklch, var(--conscious) 85%, white);
    --bs-btn-hover-border-color: color-mix(in oklch, var(--conscious) 85%, white);
    --bs-btn-active-color: var(--conscious-foreground);
    --bs-btn-active-bg: color-mix(in oklch, var(--conscious) 85%, white);
    --bs-btn-active-border-color: color-mix(in oklch, var(--conscious) 85%, white);
    --bs-btn-disabled-color: var(--conscious-foreground);
    --bs-btn-disabled-bg: var(--conscious);
    --bs-btn-disabled-border-color: var(--conscious);
}

.btn-danger {
    --bs-btn-color: var(--destructive-foreground);
    --bs-btn-bg: var(--destructive);
    --bs-btn-border-color: var(--destructive);
    --bs-btn-hover-color: var(--destructive-foreground);
    --bs-btn-hover-bg: color-mix(in oklch, var(--destructive) 85%, black);
    --bs-btn-hover-border-color: color-mix(in oklch, var(--destructive) 85%, black);
    --bs-btn-active-color: var(--destructive-foreground);
    --bs-btn-active-bg: color-mix(in oklch, var(--destructive) 85%, black);
    --bs-btn-active-border-color: color-mix(in oklch, var(--destructive) 85%, black);
    --bs-btn-disabled-color: var(--destructive-foreground);
    --bs-btn-disabled-bg: var(--destructive);
    --bs-btn-disabled-border-color: var(--destructive);
}

.btn-warning {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: color-mix(in oklch, var(--warning) 85%, white);
    --bs-btn-hover-border-color: color-mix(in oklch, var(--warning) 85%, white);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: color-mix(in oklch, var(--warning) 85%, white);
    --bs-btn-active-border-color: color-mix(in oklch, var(--warning) 85%, white);
    --bs-btn-disabled-color: var(--ink);
    --bs-btn-disabled-bg: var(--warning);
    --bs-btn-disabled-border-color: var(--warning);
}

.btn-info {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: color-mix(in oklch, var(--info) 85%, white);
    --bs-btn-hover-border-color: color-mix(in oklch, var(--info) 85%, white);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: color-mix(in oklch, var(--info) 85%, white);
    --bs-btn-active-border-color: color-mix(in oklch, var(--info) 85%, white);
    --bs-btn-disabled-color: var(--ink);
    --bs-btn-disabled-bg: var(--info);
    --bs-btn-disabled-border-color: var(--info);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: color-mix(in oklch, var(--primary) 60%, transparent);
    --bs-btn-hover-color: var(--primary-foreground);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-color: var(--primary-foreground);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-border-color: color-mix(in oklch, var(--primary) 60%, transparent);
}

.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark {
    --bs-btn-color: var(--foreground);
    --bs-btn-border-color: var(--input);
    --bs-btn-hover-color: var(--foreground);
    --bs-btn-hover-bg: var(--secondary);
    --bs-btn-hover-border-color: var(--input);
    --bs-btn-active-color: var(--accent-foreground);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-disabled-color: var(--muted-foreground);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-outline-success {
    --bs-btn-color: var(--conscious);
    --bs-btn-border-color: color-mix(in oklch, var(--conscious) 60%, transparent);
    --bs-btn-hover-color: var(--conscious-foreground);
    --bs-btn-hover-bg: var(--conscious);
    --bs-btn-hover-border-color: var(--conscious);
    --bs-btn-active-color: var(--conscious-foreground);
    --bs-btn-active-bg: var(--conscious);
    --bs-btn-active-border-color: var(--conscious);
    --bs-btn-disabled-color: var(--conscious);
    --bs-btn-disabled-border-color: color-mix(in oklch, var(--conscious) 60%, transparent);
}

.btn-outline-danger {
    --bs-btn-color: var(--color-danger-text);
    --bs-btn-border-color: color-mix(in oklch, var(--destructive) 60%, transparent);
    --bs-btn-hover-color: var(--destructive-foreground);
    --bs-btn-hover-bg: var(--destructive);
    --bs-btn-hover-border-color: var(--destructive);
    --bs-btn-active-color: var(--destructive-foreground);
    --bs-btn-active-bg: var(--destructive);
    --bs-btn-active-border-color: var(--destructive);
    --bs-btn-disabled-color: var(--color-danger-text);
    --bs-btn-disabled-border-color: color-mix(in oklch, var(--destructive) 60%, transparent);
}

.btn-outline-warning {
    --bs-btn-color: var(--warning);
    --bs-btn-border-color: color-mix(in oklch, var(--warning) 60%, transparent);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning);
    --bs-btn-disabled-color: var(--warning);
    --bs-btn-disabled-border-color: color-mix(in oklch, var(--warning) 60%, transparent);
}

.btn-outline-info {
    --bs-btn-color: var(--info);
    --bs-btn-border-color: color-mix(in oklch, var(--info) 60%, transparent);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--info);
    --bs-btn-hover-border-color: var(--info);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--info);
    --bs-btn-active-border-color: var(--info);
    --bs-btn-disabled-color: var(--info);
    --bs-btn-disabled-border-color: color-mix(in oklch, var(--info) 60%, transparent);
}

.btn-check:checked + .btn-outline-primary {
    color: var(--primary-foreground);
}

.btn-link {
    --bs-btn-color: var(--primary);
    --bs-btn-hover-color: var(--primary-glow);
    --bs-btn-active-color: var(--primary-glow);
    --bs-btn-disabled-color: var(--muted-foreground);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--secondary);
    border-color: var(--input);
    color: var(--foreground);
    border-radius: var(--radius-sm);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--secondary);
    border-color: var(--ring);
    color: var(--foreground);
    box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

.form-control::placeholder {
    color: var(--muted-foreground);
    opacity: 1;
}

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

.form-control-color {
    background-color: var(--secondary);
}

.form-label {
    color: var(--foreground);
    font-weight: 500;
}

.form-text {
    color: var(--muted-foreground);
}

.form-check-input {
    background-color: var(--secondary);
    border-color: var(--input);
}

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

.form-check-input:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--primary);
}

.form-range::-webkit-slider-runnable-track {
    background-color: var(--secondary);
}

.form-range::-moz-range-track {
    background-color: var(--secondary);
}

.input-group-text {
    background-color: var(--muted);
    border-color: var(--input);
    color: var(--muted-foreground);
    border-radius: var(--radius-sm);
}

/* Cards */
.card {
    --bs-card-bg: var(--card);
    --bs-card-color: var(--card-foreground);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-cap-bg: color-mix(in oklch, var(--secondary) 45%, transparent);
    --bs-card-cap-color: var(--card-foreground);
    --bs-card-title-color: var(--card-foreground);
    --bs-card-subtitle-color: var(--muted-foreground);
    box-shadow: var(--shadow-card);
}

.card-header {
    font-weight: 600;
}

/* Tables */
.table,
.table-dark,
.table-light {
    --bs-table-color: var(--foreground);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border);
    --bs-table-striped-color: var(--foreground);
    --bs-table-striped-bg: color-mix(in oklch, var(--muted) 55%, transparent);
    --bs-table-active-color: var(--accent-foreground);
    --bs-table-active-bg: var(--accent);
    --bs-table-hover-color: var(--foreground);
    --bs-table-hover-bg: var(--muted);
    border-color: var(--border);
    color: var(--foreground);
}

.table > thead th {
    color: var(--muted-foreground);
    font-weight: 600;
}

.table-dark > thead th,
.table > thead.table-dark th,
.table > thead.table-light th {
    background-color: var(--muted);
}

/* Modals */
.modal {
    --bs-modal-bg: var(--popover);
    --bs-modal-color: var(--popover-foreground);
    --bs-modal-border-color: var(--border);
    --bs-modal-border-radius: var(--radius-xl);
    --bs-modal-inner-border-radius: calc(var(--radius-xl) - 1px);
    --bs-modal-box-shadow: var(--shadow-card);
    --bs-modal-header-border-color: var(--border);
    --bs-modal-footer-border-color: var(--border);
}

.modal-backdrop {
    --bs-backdrop-bg: var(--ink);
    --bs-backdrop-opacity: 0.7;
}

/* Dropdowns */
.dropdown-menu {
    --bs-dropdown-bg: var(--popover);
    --bs-dropdown-color: var(--popover-foreground);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-border-radius: var(--radius-md);
    --bs-dropdown-inner-border-radius: calc(var(--radius-md) - 1px);
    --bs-dropdown-box-shadow: var(--shadow-card);
    --bs-dropdown-divider-bg: var(--border);
    --bs-dropdown-link-color: var(--popover-foreground);
    --bs-dropdown-link-hover-color: var(--accent-foreground);
    --bs-dropdown-link-hover-bg: var(--accent);
    --bs-dropdown-link-active-color: var(--primary-foreground);
    --bs-dropdown-link-active-bg: var(--primary);
    --bs-dropdown-link-disabled-color: var(--muted-foreground);
    --bs-dropdown-header-color: var(--muted-foreground);
    box-shadow: var(--shadow-card);
}

/* Navs */
.nav {
    --bs-nav-link-color: var(--muted-foreground);
    --bs-nav-link-hover-color: var(--foreground);
    --bs-nav-link-disabled-color: color-mix(in oklch, var(--muted-foreground) 60%, transparent);
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--radius-sm);
    --bs-nav-pills-link-active-color: var(--accent-foreground);
    --bs-nav-pills-link-active-bg: var(--accent);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--border);
    --bs-nav-tabs-border-radius: var(--radius-sm);
    --bs-nav-tabs-link-hover-border-color: var(--border) var(--border) var(--border);
    --bs-nav-tabs-link-active-color: var(--foreground);
    --bs-nav-tabs-link-active-bg: var(--card);
    --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--card);
}

.navbar {
    --bs-navbar-color: var(--muted-foreground);
    --bs-navbar-hover-color: var(--foreground);
    --bs-navbar-active-color: var(--foreground);
    --bs-navbar-brand-color: var(--foreground);
    --bs-navbar-brand-hover-color: var(--foreground);
    --bs-navbar-toggler-border-color: var(--border);
}

/* Pagination */
.pagination {
    --bs-pagination-color: var(--foreground);
    --bs-pagination-bg: var(--card);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-border-radius: var(--radius-sm);
    --bs-pagination-hover-color: var(--accent-foreground);
    --bs-pagination-hover-bg: var(--accent);
    --bs-pagination-hover-border-color: var(--border);
    --bs-pagination-focus-color: var(--accent-foreground);
    --bs-pagination-focus-bg: var(--accent);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--focus-ring);
    --bs-pagination-active-color: var(--primary-foreground);
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-disabled-color: var(--muted-foreground);
    --bs-pagination-disabled-bg: var(--muted);
    --bs-pagination-disabled-border-color: var(--border);
}

/* List groups */
.list-group {
    --bs-list-group-color: var(--card-foreground);
    --bs-list-group-bg: var(--card);
    --bs-list-group-border-color: var(--border);
    --bs-list-group-border-radius: var(--radius);
    --bs-list-group-action-color: var(--foreground);
    --bs-list-group-action-hover-color: var(--foreground);
    --bs-list-group-action-hover-bg: var(--muted);
    --bs-list-group-action-active-color: var(--accent-foreground);
    --bs-list-group-action-active-bg: var(--accent);
    --bs-list-group-active-color: var(--accent-foreground);
    --bs-list-group-active-bg: var(--accent);
    --bs-list-group-active-border-color: var(--border);
    --bs-list-group-disabled-color: var(--muted-foreground);
    --bs-list-group-disabled-bg: var(--card);
}

/* Alerts */
.alert {
    --bs-alert-border-radius: var(--radius);
}

/* Progress */
.progress,
.progress-stacked {
    --bs-progress-bg: var(--muted);
    --bs-progress-bar-bg: var(--primary);
    --bs-progress-bar-color: var(--primary-foreground);
    --bs-progress-border-radius: 999px;
}

/* Breadcrumbs */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--muted-foreground);
    --bs-breadcrumb-item-active-color: var(--foreground);
}

/* Toasts, popovers, tooltips, accordions */
.toast {
    --bs-toast-color: var(--popover-foreground);
    --bs-toast-bg: color-mix(in oklch, var(--popover) 94%, transparent);
    --bs-toast-border-color: var(--border);
    --bs-toast-border-radius: var(--radius);
    --bs-toast-box-shadow: var(--shadow-card);
    --bs-toast-header-color: var(--muted-foreground);
    --bs-toast-header-bg: var(--popover);
    --bs-toast-header-border-color: var(--border);
}

.popover {
    --bs-popover-bg: var(--popover);
    --bs-popover-border-color: var(--border);
    --bs-popover-border-radius: var(--radius-md);
    --bs-popover-box-shadow: var(--shadow-card);
    --bs-popover-header-bg: var(--secondary);
    --bs-popover-header-color: var(--foreground);
    --bs-popover-body-color: var(--popover-foreground);
}

.tooltip {
    --bs-tooltip-bg: var(--ink);
    --bs-tooltip-color: var(--foreground);
    --bs-tooltip-border-radius: var(--radius-sm);
}

.accordion {
    --bs-accordion-color: var(--card-foreground);
    --bs-accordion-bg: var(--card);
    --bs-accordion-border-color: var(--border);
    --bs-accordion-border-radius: var(--radius);
    --bs-accordion-inner-border-radius: calc(var(--radius) - 1px);
    --bs-accordion-btn-color: var(--foreground);
    --bs-accordion-btn-bg: var(--card);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--focus-ring);
    --bs-accordion-active-color: var(--accent-foreground);
    --bs-accordion-active-bg: var(--accent);
}

/* ============================================================================
   UTILITY OVERRIDES
   ============================================================================ */

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

.text-white {
    color: var(--foreground) !important;
}

/* .text-dark reads as "primary text" on dark surfaces... */
.text-dark {
    color: var(--foreground) !important;
}

/* ...but stays dark on bright fills */
.bg-primary.text-dark, .bg-primary .text-dark,
.bg-warning.text-dark, .bg-warning .text-dark,
.bg-info.text-dark, .bg-info .text-dark,
.bg-success.text-dark, .bg-success .text-dark,
.bg-light.text-dark, .bg-light .text-dark {
    color: var(--ink) !important;
}

.bg-light {
    background-color: var(--muted) !important;
}

.text-bg-primary { color: var(--primary-foreground) !important; }
.text-bg-success { color: var(--conscious-foreground) !important; }
.text-bg-warning,
.text-bg-info { color: var(--ink) !important; }

/* ============================================================================
   BADGE SYSTEM
   ============================================================================ */

.badge {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    border: 1px solid transparent !important;
}

/* Status Badges */
.badge-status-active {
    background-color: var(--status-active-bg) !important;
    color: var(--status-active-text) !important;
    border-color: color-mix(in oklch, var(--status-active) 45%, transparent) !important;
}

.badge-status-inactive {
    background-color: var(--status-inactive-bg) !important;
    color: var(--status-inactive-text) !important;
    border-color: color-mix(in oklch, var(--status-inactive) 45%, transparent) !important;
}

.badge-status-pending {
    background-color: var(--status-pending-bg) !important;
    color: var(--status-pending-text) !important;
    border-color: color-mix(in oklch, var(--status-pending) 45%, transparent) !important;
}

/* Role Badges */
.badge-role-admin {
    background-color: var(--role-admin-bg) !important;
    color: var(--role-admin-text) !important;
    border-color: color-mix(in oklch, var(--role-admin) 45%, transparent) !important;
}

.badge-role-manager {
    background-color: var(--role-manager-bg) !important;
    color: var(--role-manager-text) !important;
    border-color: color-mix(in oklch, var(--role-manager) 45%, transparent) !important;
}

.badge-role-staff {
    background-color: var(--role-staff-bg) !important;
    color: var(--role-staff-text) !important;
    border-color: color-mix(in oklch, var(--role-staff) 45%, transparent) !important;
}

.badge-role-user {
    background-color: var(--role-user-bg) !important;
    color: var(--role-user-text) !important;
    border-color: color-mix(in oklch, var(--role-user) 45%, transparent) !important;
}

.badge-role-advertising {
    background-color: var(--role-advertising-bg) !important;
    color: var(--role-advertising-text) !important;
    border-color: color-mix(in oklch, var(--role-advertising) 45%, transparent) !important;
}

/* Generic content badges */
.badge-content-neutral {
    background-color: var(--content-neutral-bg) !important;
    color: var(--content-neutral-text) !important;
    border-color: color-mix(in oklch, var(--content-neutral) 45%, transparent) !important;
}

/* Bootstrap badge colours: tinted pills with readable text */
.badge.bg-primary {
    background-color: color-mix(in oklch, var(--primary) 22%, var(--card)) !important;
    color: var(--accent-foreground) !important;
    border-color: color-mix(in oklch, var(--primary) 45%, transparent) !important;
}

.badge.bg-success {
    background-color: var(--color-success-bg) !important;
    color: var(--color-success-text) !important;
    border-color: color-mix(in oklch, var(--conscious) 45%, transparent) !important;
}

.badge.bg-warning {
    background-color: var(--color-warning-bg) !important;
    color: var(--color-warning-text) !important;
    border-color: color-mix(in oklch, var(--warning) 45%, transparent) !important;
}

.badge.bg-danger {
    background-color: var(--color-danger-bg) !important;
    color: var(--color-danger-text) !important;
    border-color: color-mix(in oklch, var(--destructive) 50%, transparent) !important;
}

.badge.bg-info {
    background-color: var(--color-info-bg) !important;
    color: var(--color-info-text) !important;
    border-color: color-mix(in oklch, var(--info) 45%, transparent) !important;
}

.badge.bg-secondary,
.badge.bg-light,
.badge.bg-dark {
    background-color: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
    border-color: var(--border) !important;
}

/* ============================================================================
   DEBUGGING UTILITIES
   ============================================================================ */

[data-debug="contrast"] .badge {
    outline: 2px dashed var(--destructive) !important;
    outline-offset: 2px !important;
}

[data-debug="contrast"] .text-white {
    background-color: color-mix(in oklch, var(--destructive) 10%, transparent) !important;
}

/* ============================================================================
   COMPONENT-SPECIFIC FIXES
   ============================================================================ */

.table .badge {
    min-width: 60px !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* Avatar circles for team member display */
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: var(--gradient-primary);
    color: var(--primary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-transform: uppercase;
}

/* ============================================================================
   Z-INDEX HIERARCHY - GLOBAL REFERENCE
   ============================================================================ */

/*
 * IMPORTANT: This is the single source of truth for z-index values across the app.
 * DO NOT add z-index values elsewhere without consulting this hierarchy.
 *
 * Z-Index Layers (from bottom to top):
 * ----------------------------------------
 * 0-9:      Normal content flow (cards, buttons, etc.)
 * 10-99:    Elevated content (hover states, dropdowns within cards)
 * 999:      Sidebar navigation
 * 1000:     Fixed header (top-header)
 * 1030:     Dropdown menus (Bootstrap default)
 * 1040:     Bulk action bars and floating UI elements
 * 1050:     Modal backdrops
 * 1055:     Modals (must be above backdrop)
 * 1060:     Popovers (Bootstrap default)
 * 1070:     Tooltips (Bootstrap default)
 * 9999:     Toast notifications (always on top)
 *
 * Rules:
 * 1. Modal backdrop MUST be lower than modal (1050 < 1055)
 * 2. Do NOT set z-index on .modal-dialog or .modal-content (inherit from .modal)
 * 3. Do NOT use transform or isolation on modals (creates stacking context issues)
 * 4. Floating action bars should be below modals (1040 < 1050)
 * 5. Header and sidebar MUST be below modal backdrop (999-1000 < 1050)
 * 6. Modals are automatically moved to body root via JavaScript (dashboard.js)
 */

/* ============================================================================
   MODAL Z-INDEX FIX
   ============================================================================ */

.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1055 !important;
}

.modal-dialog {
    position: relative;
    /* Do NOT set z-index here - let it inherit from .modal */
}

.modal-content {
    position: relative;
    /* Do NOT set z-index here - let it inherit from .modal */
}

.modal-backdrop.show {
    z-index: 1050 !important;
    opacity: 0.7 !important;
}

.modal.show {
    display: block !important;
}

.modal.show .modal-dialog {
    pointer-events: auto !important;
}

.modal.show .modal-content {
    pointer-events: auto !important;
}

/* ========================================================================
   GOOGLE PLACE AUTOCOMPLETE - Dark theme overrides
   The <gmp-place-autocomplete> Web Component exposes Material Design
   CSS custom properties for styling its surface and dropdown.
   ======================================================================== */
gmp-place-autocomplete {
    display: block;
    width: 100%;
    color-scheme: dark;
    --gmp-mat-color-surface: var(--secondary);
    --gmp-mat-color-surface-container-low: var(--card);
    --gmp-mat-color-surface-container-high: var(--popover);
    --gmp-mat-color-on-surface: var(--foreground);
    --gmp-mat-color-on-surface-variant: var(--muted-foreground);
    --gmp-mat-color-primary: var(--primary);
    --gmp-mat-color-outline-decorative: var(--input);
    --gmp-mat-color-hover-surface: var(--accent);
}

/* ============================================================================
   PRINT - force a light, ink-friendly rendering for PDF export
   ============================================================================ */

@media print {
    @page {
        size: A4;
        margin: 14mm;
    }

    .no-print {
        display: none !important;
    }

    :root,
    .print-sheet {
        --background: #fff;
        --foreground: #111;
        --muted: #ececec;
        --muted-foreground: #4a4a4a;
        --border: #d4d4d4;
        --card: #fff;
        --card-foreground: #111;
        --popover: #fff;
        --popover-foreground: #111;
        --secondary: #f3f3f3;
        --secondary-foreground: #111;
        --shadow-card: none;
        --shadow-glow: none;
    }

    html,
    body,
    .print-sheet {
        background: #fff !important;
        color: #111 !important;
    }

    .print-sheet .print-block {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-sheet .print-page-break {
        break-before: page;
        page-break-before: always;
    }

    .badge {
        border: 1px solid #111 !important;
        background-color: transparent !important;
        color: #111 !important;
    }
}