/* =============================================================================
   ParkPay brand system: "Harbour" — parking-sign blue primary with vibrant accents
   (orange, amber, coral, rose, magenta, violet, teal, cyan stay as accents/status colours; never green or orange as primary).
   Loaded after Velzon's bootstrap/app CSS. Defines:
     --pp-*   brand tokens (palette, solid accent fills (--pp-gradient-* names kept), surfaces, radii, shadows, fonts, bay states)
     --vz-*   Velzon/Bootstrap variables re-pointed at the brand (Velzon prefixes Bootstrap vars with --vz-)
   Scoped to html[data-theme-colors=parkpay] so it outranks Velzon's [data-theme=default]
   and [data-bs-theme=dark] blocks without !important. Dark mode = html[data-bs-theme=dark].
   Keep JS mirrors in sync: parkpay-theme.js (ParkPay.palette) and parkpay-grid.js (AG Grid params).
   ============================================================================= */

:root[data-theme-colors=parkpay] {
    /* ---- Core palette ---------------------------------------------------- */
    /* Primary: parking-sign blue (buttons, links, app bar, focus, selection). */
    --pp-primary: #2563EB;       --pp-primary-rgb: 37, 99, 235;
    --pp-primary-50: #EFF6FF;
    --pp-primary-100: #DBEAFE;
    --pp-primary-200: #BFDBFE;
    --pp-primary-300: #93C5FD;
    --pp-primary-400: #60A5FA;
    --pp-primary-500: #3B82F6;
    --pp-primary-600: #1D4ED8;
    --pp-primary-700: #1E40AF;
    --pp-primary-800: #1E3A8A;
    --pp-primary-900: #172554;
    /* Orange is an accent only (KPI tiles, charts). */
    --pp-orange: #F97316;        --pp-orange-rgb: 249, 115, 22;
    --pp-orange-50: #FFF7ED;
    --pp-orange-100: #FFEDD5;
    --pp-orange-200: #FED7AA;
    --pp-orange-300: #FDBA74;
    --pp-orange-400: #FB923C;
    --pp-orange-600: #EA580C;
    --pp-orange-700: #C2410C;
    --pp-orange-800: #C2410C;
    --pp-orange-900: #C2410C;

    --pp-amber: #F59E0B;         --pp-amber-rgb: 245, 158, 11;
    --pp-coral: #FB6F4C;         --pp-coral-rgb: 251, 111, 76;
    --pp-rose: #F43F5E;          --pp-rose-rgb: 244, 63, 94;
    --pp-magenta: #D946EF;       --pp-magenta-rgb: 217, 70, 239;
    --pp-violet: #8B5CF6;        --pp-violet-rgb: 139, 92, 246;
    --pp-indigo: #6366F1;        --pp-indigo-rgb: 99, 102, 241;
    --pp-teal: #14B8A6;          --pp-teal-rgb: 20, 184, 166;
    --pp-cyan: #06B6D4;          --pp-cyan-rgb: 6, 182, 212;
    --pp-slate: #6B7280;         --pp-slate-rgb: 107, 114, 128;

    /* ---- Gradients -------------------------------------------------------- */
    --pp-gradient-sunset: #2563EB;
    --pp-gradient-ember:  #F43F5E;
    --pp-gradient-citrus: #F59E0B;
    --pp-gradient-lagoon: #0D9488;
    --pp-gradient-orchid: #8B5CF6;
    --pp-gradient-berry:  #C026D3;
    --pp-gradient-dusk:   #111827;
    --pp-gradient-glow:   none;

    /* ---- Surfaces & text (light) ----------------------------------------- */
    --pp-bg: #F9FAFB;            --pp-bg-rgb: 249, 250, 251;
    --pp-surface: #FFFFFF;       --pp-surface-rgb: 255, 255, 255;
    --pp-surface-2: #F3F4F6;
    --pp-surface-3: #E5E7EB;
    --pp-border: #E5E7EB;
    --pp-border-strong: #D1D5DB;
    --pp-text: #1F2937;          --pp-text-rgb: 31, 41, 55;
    --pp-heading: #111827;
    --pp-text-muted: #6B7280;    --pp-text-muted-rgb: 107, 114, 128;
    --pp-on-accent: #FFFFFF;
    --pp-rail-bg: var(--pp-gradient-dusk);
    --pp-rail-text: rgba(229, 231, 235, .72);
    --pp-rail-text-active: #FFFFFF;
    --pp-appbar-bg: rgba(249, 250, 251, .82);
    --pp-tabbar-bg: rgba(255, 255, 255, .92);
    --pp-theme-color: #2563EB;   /* <meta name=theme-color>, mirrored in parkpay-theme.js */

    /* ---- Bay states (map, legends, chips, charts) ------------------------ */
    --pp-bay-vacant: #14B8A6;    --pp-bay-vacant-rgb: 20, 184, 166;
    --pp-bay-paid: #8B5CF6;      --pp-bay-paid-rgb: 139, 92, 246;   /* violet: distinct from the blue primary */
    --pp-bay-grace: #F59E0B;     --pp-bay-grace-rgb: 245, 158, 11;      /* occupied, unpaid, within grace */
    --pp-bay-alert: #F43F5E;     --pp-bay-alert-rgb: 244, 63, 94;       /* unpaid alert raised */
    --pp-bay-overstay: #D946EF;  --pp-bay-overstay-rgb: 217, 70, 239;
    --pp-bay-clamped: #1F2937;   --pp-bay-clamped-rgb: 31, 41, 55;      /* "ink": inverts in dark mode */
    --pp-bay-offline: #9CA3AF;   --pp-bay-offline-rgb: 156, 163, 175;   /* never shown as vacant */

    /* ---- Shape, depth, type ---------------------------------------------- */
    --pp-radius-sm: .5rem;
    --pp-radius: .75rem;
    --pp-radius-lg: 1.125rem;
    --pp-radius-xl: 1.5rem;
    --pp-radius-pill: 999px;
    --pp-shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
    --pp-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 6px 18px -6px rgba(17, 24, 39, .12);
    --pp-shadow-lg: 0 18px 40px -12px rgba(17, 24, 39, .25);
    --pp-shadow-glow: none;
    --pp-font-sans: "hkgrotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pp-font-display: "Poppins", "hkgrotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pp-touch: 44px;            /* minimum touch target */
    --pp-appbar-h: 60px;
    --pp-tabbar-h: 64px;
    --pp-rail-w: 264px;
    --pp-rail-w-collapsed: 80px;

    /* ---- Velzon / Bootstrap mapping -------------------------------------- */
    --vz-blue: var(--pp-indigo);
    --vz-indigo: var(--pp-indigo);
    --vz-purple: var(--pp-violet);
    --vz-pink: var(--pp-magenta);
    --vz-red: var(--pp-rose);
    --vz-orange: var(--pp-orange);
    --vz-yellow: var(--pp-amber);
    --vz-green: var(--pp-teal);
    --vz-teal: var(--pp-teal);
    --vz-cyan: var(--pp-cyan);

    --vz-primary: #2563EB;   --vz-primary-rgb: 37, 99, 235;
    --vz-secondary: #8B5CF6; --vz-secondary-rgb: 139, 92, 246;
    --vz-success: #14B8A6;   --vz-success-rgb: 20, 184, 166;
    --vz-info: #06B6D4;      --vz-info-rgb: 6, 182, 212;
    --vz-warning: #F59E0B;   --vz-warning-rgb: 245, 158, 11;
    --vz-danger: #F43F5E;    --vz-danger-rgb: 244, 63, 94;
    --vz-light: #F3F4F6;     --vz-light-rgb: 243, 244, 246;
    --vz-dark: #111827;      --vz-dark-rgb: 17, 24, 39;

    --vz-primary-text-emphasis: #1E40AF;
    --vz-secondary-text-emphasis: #6D28D9;
    --vz-success-text-emphasis: #0F766E;
    --vz-info-text-emphasis: #0E7490;
    --vz-warning-text-emphasis: #B45309;
    --vz-danger-text-emphasis: #BE123C;
    --vz-light-text-emphasis: #6B7280;
    --vz-dark-text-emphasis: #111827;

    --vz-primary-bg-subtle: #DBEAFE;
    --vz-secondary-bg-subtle: #EDE9FE;
    --vz-success-bg-subtle: #CCFBF1;
    --vz-info-bg-subtle: #CFFAFE;
    --vz-warning-bg-subtle: #FEF3C7;
    --vz-danger-bg-subtle: #FFE4E6;
    --vz-light-bg-subtle: #F9FAFB;
    --vz-dark-bg-subtle: #E5E7EB;

    --vz-primary-border-subtle: #BFDBFE;
    --vz-secondary-border-subtle: #DDD6FE;
    --vz-success-border-subtle: #99F6E4;
    --vz-info-border-subtle: #A5F3FC;
    --vz-warning-border-subtle: #FDE68A;
    --vz-danger-border-subtle: #FECDD3;
    --vz-light-border-subtle: #E5E7EB;
    --vz-dark-border-subtle: #D1D5DB;

    --vz-body-bg: var(--pp-bg);          --vz-body-bg-rgb: var(--pp-bg-rgb);
    --vz-body-color: var(--pp-text);     --vz-body-color-rgb: var(--pp-text-rgb);
    --vz-emphasis-color: var(--pp-heading);
    --vz-emphasis-color-rgb: 17, 24, 39;
    --vz-heading-color: var(--pp-heading);
    --vz-secondary-color: var(--pp-text-muted);
    --vz-secondary-color-rgb: var(--pp-text-muted-rgb);
    --vz-secondary-bg: var(--pp-surface); --vz-secondary-bg-rgb: var(--pp-surface-rgb);
    --vz-tertiary-color: rgba(31, 41, 55, .55);
    --vz-tertiary-bg: var(--pp-surface-2); --vz-tertiary-bg-rgb: 243, 244, 246;
    --vz-border-color: var(--pp-border);
    --vz-border-color-translucent: var(--pp-border-strong);
    --vz-link-color: #1D4ED8;            --vz-link-color-rgb: 29, 78, 216;
    --vz-link-hover-color: #1E40AF;      --vz-link-hover-color-rgb: 30, 64, 175;
    --vz-code-color: #C026D3;
    --vz-highlight-bg: #FEF3C7;
    --vz-form-valid-color: #0F766E;      --vz-form-valid-border-color: #14B8A6;
    --vz-form-invalid-color: #BE123C;    --vz-form-invalid-border-color: #F43F5E;
    --vz-focus-ring-color: rgba(37, 99, 235, .28);

    --vz-border-radius: .625rem;
    --vz-border-radius-sm: .5rem;
    --vz-border-radius-lg: .875rem;
    --vz-border-radius-xl: 1.25rem;
    --vz-border-radius-xxl: 2rem;
    --vz-box-shadow: var(--pp-shadow);
    --vz-box-shadow-lg: var(--pp-shadow-lg);
    --vz-card-shadow: var(--pp-shadow);
    --vz-element-shadow: none;

    --vz-font-family-primary: var(--pp-font-sans);
    --vz-font-family-secondary: var(--pp-font-display);
    --vz-font-sans-serif: var(--pp-font-sans);
    --vz-body-font-family: var(--pp-font-sans);
    --vz-headings-font-family: var(--pp-font-display);
    --vz-headings-font-weight: 600;
    --vz-font-base: 0.875rem;

    --vz-input-bg-custom: var(--pp-surface);
    --vz-input-border-custom: var(--pp-border-strong);
    --vz-header-bg: var(--pp-appbar-bg);
    --vz-header-border: var(--pp-border);
    --vz-footer-bg: transparent;
    --vz-footer-color: var(--pp-text-muted);
}

:root[data-theme-colors=parkpay][data-bs-theme=dark] {
    color-scheme: dark;

    --pp-amber: #FBBF24;         --pp-amber-rgb: 251, 191, 36;
    --pp-coral: #FF8A6B;         --pp-coral-rgb: 255, 138, 107;
    --pp-rose: #FB7185;          --pp-rose-rgb: 251, 113, 133;
    --pp-magenta: #E879F9;       --pp-magenta-rgb: 232, 121, 249;
    --pp-violet: #A78BFA;        --pp-violet-rgb: 167, 139, 250;
    --pp-indigo: #818CF8;        --pp-indigo-rgb: 129, 140, 248;
    --pp-teal: #2DD4BF;          --pp-teal-rgb: 45, 212, 191;
    --pp-cyan: #22D3EE;          --pp-cyan-rgb: 34, 211, 238;
    --pp-slate: #9CA3AF;         --pp-slate-rgb: 156, 163, 175;

    --pp-gradient-dusk: #0F1115;
    --pp-gradient-glow:   none;

    --pp-bg: #0F1115;            --pp-bg-rgb: 15, 17, 21;
    --pp-surface: #181B21;       --pp-surface-rgb: 24, 27, 33;
    --pp-surface-2: #1F232B;
    --pp-surface-3: #272C35;
    --pp-border: #2E343F;
    --pp-border-strong: #3E4552;
    --pp-text: #E5E7EB;          --pp-text-rgb: 229, 231, 235;
    --pp-heading: #F9FAFB;
    --pp-text-muted: #9CA3AF;    --pp-text-muted-rgb: 156, 163, 175;
    --pp-appbar-bg: rgba(15, 17, 21, .78);
    --pp-tabbar-bg: rgba(24, 27, 33, .92);
    --pp-theme-color: #0F1115;

    --pp-bay-vacant: #2DD4BF;    --pp-bay-vacant-rgb: 45, 212, 191;
    --pp-bay-paid: #A78BFA;      --pp-bay-paid-rgb: 167, 139, 250;
    --pp-bay-grace: #FBBF24;     --pp-bay-grace-rgb: 251, 191, 36;
    --pp-bay-alert: #FB7185;     --pp-bay-alert-rgb: 251, 113, 133;
    --pp-bay-overstay: #E879F9;  --pp-bay-overstay-rgb: 232, 121, 249;
    --pp-bay-clamped: #F3F4F6;   --pp-bay-clamped-rgb: 243, 244, 246;
    --pp-bay-offline: #4B5563;   --pp-bay-offline-rgb: 75, 85, 99;

    --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --pp-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -10px rgba(0, 0, 0, .6);
    --pp-shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, .7);
    --pp-shadow-glow: none;

    --vz-primary: #3B82F6;   --vz-primary-rgb: 59, 130, 246;
    --vz-secondary: #A78BFA; --vz-secondary-rgb: 167, 139, 250;
    --vz-success: #2DD4BF;   --vz-success-rgb: 45, 212, 191;
    --vz-info: #22D3EE;      --vz-info-rgb: 34, 211, 238;
    --vz-warning: #FBBF24;   --vz-warning-rgb: 251, 191, 36;
    --vz-danger: #FB7185;    --vz-danger-rgb: 251, 113, 133;
    --vz-light: #1F232B;     --vz-light-rgb: 31, 35, 43;
    --vz-dark: #2E343F;      --vz-dark-rgb: 46, 52, 63;

    --vz-primary-text-emphasis: #93C5FD;
    --vz-secondary-text-emphasis: #C4B5FD;
    --vz-success-text-emphasis: #5EEAD4;
    --vz-info-text-emphasis: #67E8F9;
    --vz-warning-text-emphasis: #FCD34D;
    --vz-danger-text-emphasis: #FDA4AF;
    --vz-light-text-emphasis: #9CA3AF;
    --vz-dark-text-emphasis: #E5E7EB;

    /* Orange/amber at low alpha over dark gray reads as brown: use a neutral raised gray instead (the
       -border-subtle and -text-emphasis colours carry the hue). */
    --vz-primary-bg-subtle: #252A33;
    --vz-secondary-bg-subtle: rgba(167, 139, 250, .16);
    --vz-success-bg-subtle: rgba(45, 212, 191, .14);
    --vz-info-bg-subtle: rgba(34, 211, 238, .14);
    --vz-warning-bg-subtle: #252A33;
    --vz-danger-bg-subtle: rgba(251, 113, 133, .15);
    --vz-light-bg-subtle: #1C2027;
    --vz-dark-bg-subtle: #272C35;

    --vz-primary-border-subtle: rgba(37, 99, 235, .4);
    --vz-secondary-border-subtle: rgba(167, 139, 250, .4);
    --vz-success-border-subtle: rgba(45, 212, 191, .4);
    --vz-info-border-subtle: rgba(34, 211, 238, .4);
    --vz-warning-border-subtle: rgba(251, 191, 36, .4);
    --vz-danger-border-subtle: rgba(251, 113, 133, .4);
    --vz-light-border-subtle: #272C35;
    --vz-dark-border-subtle: #3E4552;

    --vz-emphasis-color-rgb: 249, 250, 251;
    --vz-tertiary-color: rgba(229, 231, 235, .6);
    --vz-tertiary-bg-rgb: 31, 35, 43;
    --vz-link-color: #93C5FD;            --vz-link-color-rgb: 147, 197, 253;
    --vz-link-hover-color: #BFDBFE;      --vz-link-hover-color-rgb: 191, 219, 254;
    --vz-code-color: #F0ABFC;
    --vz-highlight-bg: #3F3410;
    --vz-form-valid-color: #5EEAD4;      --vz-form-valid-border-color: #2DD4BF;
    --vz-form-invalid-color: #FDA4AF;    --vz-form-invalid-border-color: #FB7185;
    --vz-focus-ring-color: rgba(59, 130, 246, .35);
}

/* ---- Brand utilities ------------------------------------------------------ */
.pp-gradient-sunset { background: var(--pp-gradient-sunset) !important; color: #fff; }
.pp-gradient-ember  { background: var(--pp-gradient-ember)  !important; color: #fff; }
.pp-gradient-citrus { background: var(--pp-gradient-citrus) !important; color: #fff; }
.pp-gradient-lagoon { background: var(--pp-gradient-lagoon) !important; color: #fff; }
.pp-gradient-orchid { background: var(--pp-gradient-orchid) !important; color: #fff; }
.pp-gradient-berry  { background: var(--pp-gradient-berry)  !important; color: #fff; }
.pp-text-gradient { color: var(--pp-primary); }

/* Bay-state chips / swatches: <span class="pp-bay pp-bay--vacant">Vacant</span> */
.pp-bay {
    --pp-bay-rgb: var(--pp-bay-offline-rgb);
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .65rem; border-radius: var(--pp-radius-pill);
    font-size: .75rem; font-weight: 600; line-height: 1.2;
    color: rgb(var(--pp-bay-rgb));
    background: rgba(var(--pp-bay-rgb), .14);
    border: 1px solid rgba(var(--pp-bay-rgb), .28);
}
.pp-bay::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: rgb(var(--pp-bay-rgb)); }
.pp-bay--vacant   { --pp-bay-rgb: var(--pp-bay-vacant-rgb); }
.pp-bay--paid     { --pp-bay-rgb: var(--pp-bay-paid-rgb); }
.pp-bay--grace    { --pp-bay-rgb: var(--pp-bay-grace-rgb); }
/* Public "occupied" (a car, no paid time: the space a customer pays for) uses the grace amber. */
.pp-bay--occupied { --pp-bay-rgb: var(--pp-bay-grace-rgb); }
.pp-bay--alert    { --pp-bay-rgb: var(--pp-bay-alert-rgb); }
.pp-bay--overstay { --pp-bay-rgb: var(--pp-bay-overstay-rgb); }
.pp-bay--clamped  { --pp-bay-rgb: var(--pp-bay-clamped-rgb); }
.pp-bay--offline  { --pp-bay-rgb: var(--pp-bay-offline-rgb); border-style: dashed; }
:root[data-bs-theme=light] .pp-bay--clamped,
:root:not([data-bs-theme=dark]) .pp-bay--clamped { color: var(--pp-heading); }
:root:not([data-bs-theme=dark]) .pp-bay--grace,
:root:not([data-bs-theme=dark]) .pp-bay--occupied { color: #B45309; }
:root:not([data-bs-theme=dark]) .pp-bay--vacant { color: #0F766E; }
:root:not([data-bs-theme=dark]) .pp-bay--offline { color: #6B7280; }