/* =============================================================================
   ParkPay Syncfusion theme — layered on top of the stock EJ2 32.x Bootstrap 5.3 theme
   (#sf-theme: lib/syncfusion/bootstrap5.3.css or bootstrap5.3-dark.css, swapped by parkpay-theme.js).
   Load AFTER #sf-theme. The 32.x theme is driven by --color-sf-* / --e-* custom properties, so we
   redefine the palette here instead of forking the 4 MB theme files. A handful of rules at the
   bottom patch the few places where the base theme hard-codes Bootstrap blue.
   Light values on :root; dark values on html[data-bs-theme=dark] (higher specificity, so the order
   of the swapped base file never matters).
   ============================================================================= */

:root {
    /* ---- Type & shape ---- */
    --e-font-name: "hkgrotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --e-radius: 2.5rem;          /* base theme uses calc(var(--e-radius) * .25 / .375 / .125) => 10px / 15px / 5px */

    /* ---- Brand ---- */
    --color-sf-primary: rgba(37, 99, 235, 1);
    --color-sf-primary-text-color: #fff;
    --color-sf-primary-light: #93C5FD;
    --color-sf-primary-lighter: #DBEAFE;
    --color-sf-primary-dark: #1E40AF;
    --color-sf-primary-darker: #1E40AF;
    --color-sf-primary-shadow: 37, 99, 235;
    --color-sf-primary-bg-color-hover: #1D4ED8;
    --color-sf-primary-border-color-hover: #1D4ED8;
    --color-sf-primary-bg-color-pressed: #1E40AF;
    --color-sf-primary-border-color-pressed: #1E40AF;
    --color-sf-primary-bg-color-disabled: rgba(37, 99, 235, .55);

    /* Syncfusion's "secondary" drives input icon buttons (hover/pressed) and secondary buttons: neutral gray neutral. */
    --color-sf-secondary: rgba(107, 114, 128, 1);
    --color-sf-secondary-shadow: 107, 114, 128;
    --color-sf-secondary-text-color: #fff;
    --color-sf-secondary-bg-color-hover: #DBEAFE;
    --color-sf-secondary-border-color-hover: #93C5FD;
    --color-sf-secondary-text-color-hover: #1E40AF;
    --color-sf-secondary-bg-color-pressed: #93C5FD;
    --color-sf-secondary-border-color-pressed: #3B82F6;
    --color-sf-secondary-text-color-pressed: #1E40AF;
    --color-sf-secondary-bg-color-disabled: rgba(107, 114, 128, .55);

    --color-sf-success: rgba(20, 184, 166, 1);
    --color-sf-success-shadow: 20, 184, 166;
    --color-sf-success-light: #CCFBF1;
    --color-sf-success-light-alt: #CCFBF1;
    --color-sf-success-dark: #115E59;
    --color-sf-success-bg-color-hover: #0D9488;
    --color-sf-success-border-color-hover: #0D9488;
    --color-sf-success-bg-color-pressed: #0F766E;
    --color-sf-success-border-color-pressed: #0F766E;
    --color-sf-success-bg-color-disabled: rgba(20, 184, 166, .55);

    --color-sf-info: rgba(6, 182, 212, 1);
    --color-sf-info-shadow: 6, 182, 212;
    --color-sf-info-light: #CFFAFE;
    --color-sf-info-light-alt: #CFFAFE;
    --color-sf-info-dark: #155E75;
    --color-sf-info-text: #fff;
    --color-sf-info-bg-color-hover: #0891B2;
    --color-sf-info-border-color-hover: #0891B2;
    --color-sf-info-bg-color-pressed: #0E7490;
    --color-sf-info-border-color-pressed: #0E7490;
    --color-sf-info-bg-color-disabled: rgba(6, 182, 212, .55);
    --color-sf-info-text-disabled: rgba(255, 255, 255, .7);

    --color-sf-warning: rgba(245, 158, 11, 1);
    --color-sf-warning-shadow: 245, 158, 11;
    --color-sf-warning-light: #FEF3C7;
    --color-sf-warning-light-alt: #FEF3C7;
    --color-sf-warning-dark: #B45309;
    --color-sf-warning-text: #111827;
    --color-sf-warning-bg-color-hover: #FBBF24;
    --color-sf-warning-border-color-hover: #FBBF24;
    --color-sf-warning-bg-color-pressed: #D97706;
    --color-sf-warning-border-color-pressed: #D97706;
    --color-sf-warning-bg-color-disabled: rgba(245, 158, 11, .55);

    --color-sf-danger: rgba(244, 63, 94, 1);
    --color-sf-danger-shadow: 244, 63, 94;
    --color-sf-danger-light: #FFE4E6;
    --color-sf-danger-light-alt: #FFE4E6;
    --color-sf-danger-dark: #9F1239;
    --color-sf-danger-bg-color-hover: #E11D48;
    --color-sf-danger-border-color-hover: #E11D48;
    --color-sf-danger-bg-color-pressed: #BE123C;
    --color-sf-danger-border-color-pressed: #BE123C;
    --color-sf-danger-bg-color-disabled: rgba(244, 63, 94, .55);

    /* ---- Surfaces ---- */
    --color-sf-content-bg-color: #FFFFFF;
    --color-sf-content-bg-color-alt1: #F9FAFB;
    --color-sf-content-bg-color-alt2: #F3F4F6;
    --color-sf-content-bg-color-alt3: #E5E7EB;
    --color-sf-content-bg-color-alt4: #D1D5DB;
    --color-sf-content-bg-color-alt5: #9CA3AF;
    --color-sf-content-bg-color-hover: #F9FAFB;
    --color-sf-content-bg-color-pressed: #E5E7EB;
    --color-sf-content-bg-color-focus: #DBEAFE;
    --color-sf-content-bg-color-selected: #2563EB;
    --color-sf-content-bg-color-dragged: #D1D5DB;
    --color-sf-content-bg-color-disabled: #F3F4F6;
    --color-sf-flyout-bg-color: #FFFFFF;
    --color-sf-flyout-bg-color-hover: #F9FAFB;
    --color-sf-flyout-bg-color-pressed: #2563EB;
    --color-sf-flyout-bg-color-focus: #DBEAFE;
    --color-sf-table-bg-color-hover: rgba(37, 99, 235, .07);
    --color-sf-table-bg-color-pressed: #E5E7EB;
    --color-sf-table-bg-color-selected: rgba(37, 99, 235, .14);

    /* ---- Text & icons ---- */
    --color-sf-content-text-color: #1F2937;
    --color-sf-content-text-color-alt1: rgba(31, 41, 55, .75);
    --color-sf-content-text-color-alt2: rgba(31, 41, 55, .55);
    --color-sf-content-text-color-alt3: rgba(31, 41, 55, .3);
    --color-sf-content-text-color-hover: #111827;
    --color-sf-content-text-color-focus: #111827;
    --color-sf-content-text-color-disabled: rgba(31, 41, 55, .55);
    --color-sf-placeholder-text-color: #9CA3AF;
    --color-sf-flyout-text-color-disabled: rgba(31, 41, 55, .45);
    --color-sf-icon-color: #6B7280;
    --color-sf-icon-color-hover: #1E40AF;
    --color-sf-icon-color-pressed: #1E40AF;
    --color-sf-icon-color-disabled: #D1D5DB;

    /* ---- Borders ---- */
    --color-sf-border-light: #E5E7EB;
    --color-sf-border: #D1D5DB;
    --color-sf-border-dark: #9CA3AF;
    --color-sf-border-hover: #93C5FD;
    --color-sf-border-pressed: #3B82F6;
    --color-sf-border-focus: #3B82F6;
    --color-sf-border-selected: #3B82F6;
    --color-sf-border-dragged: #D1D5DB;
    --color-sf-border-disabled: #E5E7EB;
    --color-sf-border-warning: #F59E0B;
    --color-sf-border-error: #F43F5E;
    --color-sf-border-success: #14B8A6;
    --color-sf-flyout-border: rgba(17, 24, 39, .12);
    --color-sf-tab-border: #E5E7EB;

    /* ---- Misc controls ---- */
    --color-sf-tooltip-bg-color: rgba(17, 24, 39, .94);
    --color-sf-tooltip-text-color: #F9FAFB;
    --color-sf-rating-pressed-color: #3B82F6;
    --color-sf-appbar-bg-color-alt2: #111827;

    --color-sf-msg-color: #374151;
    --color-sf-msg-bg-color: #F3F4F6;
    --color-sf-msg-border-color: #E5E7EB;
    --color-sf-msg-danger-color: #9F1239;
    --color-sf-msg-danger-bg-color: #FFE4E6;
    --color-sf-msg-danger-border-color: #FECDD3;
    --color-sf-msg-danger-bg-color-alt2: #F43F5E;
    --color-sf-msg-success-color: #115E59;
    --color-sf-msg-success-bg-color: #CCFBF1;
    --color-sf-msg-success-border-color: #99F6E4;
    --color-sf-msg-success-bg-color-alt2: #14B8A6;
    --color-sf-msg-warning-color: #B45309;
    --color-sf-msg-warning-bg-color: #FEF3C7;
    --color-sf-msg-warning-border-color: #FDE68A;
    --color-sf-msg-warning-bg-color-alt2: #F59E0B;
    --color-sf-msg-info-color: #155E75;
    --color-sf-msg-info-bg-color: #CFFAFE;
    --color-sf-msg-info-border-color: #A5F3FC;
    --color-sf-msg-info-bg-color-alt2: #06B6D4;
}

html[data-bs-theme=dark] {
    --color-sf-primary: rgba(59, 130, 246, 1);
    --color-sf-primary-text-color: #0F1115;
    --color-sf-primary-text: #0F1115;
    --color-sf-primary-text-hover: #0F1115;
    --color-sf-primary-text-pressed: #0F1115;
    --color-sf-primary-light: #3B82F6;
    --color-sf-primary-lighter: #2E343F;
    --color-sf-primary-dark: #93C5FD;
    --color-sf-primary-darker: #BFDBFE;
    --color-sf-primary-shadow: 59, 130, 246;
    --color-sf-primary-bg-color-hover: #FDA05C;
    --color-sf-primary-border-color-hover: #FDA05C;
    --color-sf-primary-bg-color-pressed: #2563EB;
    --color-sf-primary-border-color-pressed: #2563EB;
    --color-sf-primary-bg-color-disabled: rgba(59, 130, 246, .45);
    --color-sf-primary-text-disabled: rgba(15, 17, 21, .6);

    --color-sf-secondary: rgba(156, 163, 175, 1);
    --color-sf-secondary-shadow: 156, 163, 175;
    --color-sf-secondary-text-color: #0F1115;
    --color-sf-secondary-bg-color-hover: #2E343F;
    --color-sf-secondary-border-color-hover: #3B82F6;
    --color-sf-secondary-text-color-hover: #93C5FD;
    --color-sf-secondary-bg-color-pressed: #1E40AF;
    --color-sf-secondary-border-color-pressed: #3B82F6;
    --color-sf-secondary-text-color-pressed: #DBEAFE;

    --color-sf-success: rgba(45, 212, 191, 1);
    --color-sf-success-shadow: 45, 212, 191;
    --color-sf-success-text: #04201C;
    --color-sf-success-light: #5EEAD4;
    --color-sf-success-dark: #5EEAD4;
    --color-sf-success-light-alt: #0B2A26;
    --color-sf-success-bg-color-hover: #5EEAD4;
    --color-sf-success-border-color-hover: #5EEAD4;
    --color-sf-success-bg-color-pressed: #14B8A6;
    --color-sf-success-border-color-pressed: #14B8A6;

    --color-sf-info: rgba(34, 211, 238, 1);
    --color-sf-info-shadow: 34, 211, 238;
    --color-sf-info-text: #04202A;
    --color-sf-info-light: #67E8F9;
    --color-sf-info-dark: #67E8F9;
    --color-sf-info-light-alt: #062A33;
    --color-sf-info-bg-color-hover: #67E8F9;
    --color-sf-info-border-color-hover: #67E8F9;
    --color-sf-info-bg-color-pressed: #06B6D4;
    --color-sf-info-border-color-pressed: #06B6D4;

    --color-sf-warning: rgba(251, 191, 36, 1);
    --color-sf-warning-shadow: 251, 191, 36;
    --color-sf-warning-light: #FCD34D;
    --color-sf-warning-dark: #FCD34D;
    --color-sf-warning-light-alt: #252A33;
    --color-sf-warning-bg-color-hover: #FCD34D;
    --color-sf-warning-border-color-hover: #FCD34D;
    --color-sf-warning-bg-color-pressed: #F59E0B;
    --color-sf-warning-border-color-pressed: #F59E0B;

    --color-sf-danger: rgba(251, 113, 133, 1);
    --color-sf-danger-shadow: 251, 113, 133;
    --color-sf-danger-text: #2A0710;
    --color-sf-danger-light: #FDA4AF;
    --color-sf-danger-dark: #FDA4AF;
    --color-sf-danger-light-alt: #33111A;
    --color-sf-danger-bg-color-hover: #FDA4AF;
    --color-sf-danger-border-color-hover: #FDA4AF;
    --color-sf-danger-bg-color-pressed: #F43F5E;
    --color-sf-danger-border-color-pressed: #F43F5E;

    --color-sf-content-bg-color: #181B21;
    --color-sf-content-bg-color-alt1: #1F232B;
    --color-sf-content-bg-color-alt2: #272C35;
    --color-sf-content-bg-color-alt3: #3E4552;
    --color-sf-content-bg-color-alt4: #111318;
    --color-sf-content-bg-color-alt5: #9CA3AF;
    --color-sf-content-bg-color-hover: #252A33;
    --color-sf-content-bg-color-pressed: #2E343F;
    --color-sf-content-bg-color-focus: #2E343F;
    --color-sf-content-bg-color-selected: #3B82F6;
    --color-sf-content-bg-color-dragged: #272C35;
    --color-sf-content-bg-color-disabled: #1C2027;
    --color-sf-flyout-bg-color: #1C2027;
    --color-sf-flyout-bg-color-hover: #272C35;
    --color-sf-flyout-bg-color-pressed: #3B82F6;
    --color-sf-flyout-bg-color-focus: #2E343F;
    --color-sf-overlay-bg-color: rgba(0, 0, 0, .55);
    --color-sf-table-bg-color-hover: rgba(59, 130, 246, .08);
    --color-sf-table-bg-color-pressed: #2E343F;
    --color-sf-table-bg-color-selected: rgba(59, 130, 246, .16);

    --color-sf-content-text-color: #E5E7EB;
    --color-sf-content-text-color-alt1: rgba(229, 231, 235, .75);
    --color-sf-content-text-color-alt2: rgba(229, 231, 235, .55);
    --color-sf-content-text-color-alt3: rgba(229, 231, 235, .3);
    --color-sf-content-text-color-hover: #F9FAFB;
    --color-sf-content-text-color-focus: #F9FAFB;
    --color-sf-content-text-color-selected: #0F1115;
    --color-sf-content-text-color-dragged: #F9FAFB;
    --color-sf-content-text-color-disabled: rgba(229, 231, 235, .5);
    --color-sf-placeholder-text-color: #6B7280;
    --color-sf-flyout-text-color-pressed: #0F1115;
    --color-sf-flyout-text-color-disabled: rgba(229, 231, 235, .45);
    --color-sf-icon-color: #9CA3AF;
    --color-sf-icon-color-hover: #93C5FD;
    --color-sf-icon-color-pressed: #BFDBFE;
    --color-sf-icon-color-disabled: #4B5563;

    --color-sf-border-light: #2E343F;
    --color-sf-border: #3E4552;
    --color-sf-border-dark: #4B5563;
    --color-sf-border-hover: #3B82F6;
    --color-sf-border-pressed: #3B82F6;
    --color-sf-border-focus: #3B82F6;
    --color-sf-border-selected: #3B82F6;
    --color-sf-border-dragged: #3E4552;
    --color-sf-border-disabled: #2E343F;
    --color-sf-border-warning: #FBBF24;
    --color-sf-border-error: #FB7185;
    --color-sf-border-success: #2DD4BF;
    --color-sf-flyout-border: rgba(229, 231, 235, .12);
    --color-sf-tab-border: #2E343F;

    --color-sf-tooltip-bg-color: rgba(249, 250, 251, .95);
    --color-sf-tooltip-text-color: #111827;
    --color-sf-rating-pressed-color: #93C5FD;
    --color-sf-appbar-bg-color-alt2: #F9FAFB;
    --color-sf-appbar-color-alt2: #111827;

    --color-sf-msg-color: #E5E7EB;
    --color-sf-msg-bg-color: #1C2027;
    --color-sf-msg-border-color: #2E343F;
    --color-sf-msg-danger-color: #FDA4AF;
    --color-sf-msg-danger-bg-color: #33111A;
    --color-sf-msg-danger-border-color: #7F1D36;
    --color-sf-msg-success-color: #5EEAD4;
    --color-sf-msg-success-bg-color: #0B2A26;
    --color-sf-msg-success-border-color: #115E59;
    --color-sf-msg-warning-color: #FCD34D;
    --color-sf-msg-warning-bg-color: #252A33;
    --color-sf-msg-warning-border-color: #B45309;
    --color-sf-msg-info-color: #67E8F9;
    --color-sf-msg-info-bg-color: #062A33;
    --color-sf-msg-info-border-color: #155E75;
}

/* ---- Patches for the few hard-coded Bootstrap-blue spots in the base theme ---- */
.e-daterangepicker .e-start-btn,
.e-daterangepicker .e-end-btn,
.e-bigger.e-daterangepicker .e-start-btn,
.e-bigger.e-daterangepicker .e-end-btn,
.e-device.e-daterangepicker .e-start-btn,
.e-device.e-daterangepicker .e-end-btn { color: var(--color-sf-primary); }
.e-spreadsheet .e-selection { background-color: rgba(var(--color-sf-primary-shadow), .12); }
.e-richtexteditor .e-rte-content .e-content .e-rte-checklist li.e-rte-checklist-checked::before,
.e-richtexteditor .e-rte-iframe-content .e-content .e-rte-checklist li.e-rte-checklist-checked::before { border-color: var(--color-sf-primary); }

/* ---- Brand polish ---- */
/* Inputs: a touch taller and rounder so they sit nicely next to Velzon form controls and are thumb-friendly. */
.e-input-group:not(.e-float-icon-left):not(.e-float-input),
.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input) {
    min-height: 44px;
    background: var(--color-sf-content-bg-color);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus,
.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-input-focus {
    box-shadow: 0 0 0 .25rem rgba(var(--color-sf-primary-shadow), .22);
}
.e-input-group input.e-input,
.e-input-group.e-control-wrapper input.e-input { min-height: 42px; }

/* Primary buttons: solid brand orange, darker on hover. */
.e-btn.e-primary:not(:disabled):not(.e-flat):not(.e-outline),
.e-css.e-btn.e-primary:not(:disabled):not(.e-flat):not(.e-outline) {
    background: #2563EB;
    border-color: #2563EB;
    font-weight: 600;
    box-shadow: none;
}
.e-btn.e-primary:not(:disabled):not(.e-flat):not(.e-outline):hover,
.e-css.e-btn.e-primary:not(:disabled):not(.e-flat):not(.e-outline):hover { background: #1D4ED8; border-color: #1D4ED8; }
.e-btn { min-height: 40px; }

/* Calendar: selected day is solid orange, today gets an orange ring. */
.e-calendar .e-content td.e-selected span.e-day,
.e-calendar .e-content td.e-selected:hover span.e-day,
.e-calendar .e-content td.e-selected.e-focused-date span.e-day {
    background: #2563EB;
    color: #fff;
    border: 0;
}
.e-calendar .e-content td.e-today:not(.e-selected) span.e-day {
    box-shadow: inset 0 0 0 2px var(--color-sf-primary);
    color: var(--color-sf-primary);
    font-weight: 700;
}
.e-calendar .e-header .e-title { font-family: "Poppins", var(--e-font-name); font-weight: 600; }

/* Popups & dialogs: rounded, soft shadow. */
.e-popup.e-popup-open,
.e-dialog { border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(17, 24, 39, .35); }
html[data-bs-theme=dark] .e-popup.e-popup-open,
html[data-bs-theme=dark] .e-dialog { box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .8); }
.e-dialog .e-dlg-header { font-family: "Poppins", var(--e-font-name); font-weight: 600; }
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover { background: rgba(var(--color-sf-primary-shadow), .14); color: var(--color-sf-primary-dark); font-weight: 600; }
html[data-bs-theme=dark] .e-dropdownbase .e-list-item.e-active,
html[data-bs-theme=dark] .e-dropdownbase .e-list-item.e-active.e-hover { color: #93C5FD; background: #2A2F38; }
/* Neutral gray highlights on dark: an orange tint over dark gray reads as brown. */
html[data-bs-theme=dark] .e-dropdownbase .e-list-item.e-hover,
html[data-bs-theme=dark] .e-dropdownbase .e-list-item.e-item-focus { background: #2A2F38; }
html[data-bs-theme=dark] { --color-sf-table-bg-color-hover: #22262E; --color-sf-table-bg-color-selected: #2A2F38; }

/* MultiSelect chips use the soft brand tint. */
.e-multi-select-wrapper .e-chips { background: rgba(var(--color-sf-primary-shadow), .14); border-radius: 999px; }
.e-multi-select-wrapper .e-chips > .e-chipcontent { color: var(--color-sf-primary-dark); font-weight: 600; }
html[data-bs-theme=dark] .e-multi-select-wrapper .e-chips > .e-chipcontent { color: #93C5FD; }

/* Tabs: solid underline indicator. */
.e-tab .e-tab-header .e-indicator { background: #2563EB; height: 3px; border-radius: 3px; }
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon { color: var(--color-sf-primary); }

/* Toasts: rounded with a coloured accent edge. */
.e-toast-container .e-toast { border-radius: 14px; border-left: 4px solid var(--color-sf-primary); }
.e-toast-container .e-toast.e-toast-success { border-left-color: var(--color-sf-success); }
.e-toast-container .e-toast.e-toast-warning { border-left-color: var(--color-sf-warning); }
.e-toast-container .e-toast.e-toast-danger { border-left-color: var(--color-sf-danger); }
.e-toast-container .e-toast.e-toast-info { border-left-color: var(--color-sf-info); }

/* Switch / checkbox / radio pick up the brand via --color-sf-primary; solid orange switch track. */
.e-switch-wrapper .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper .e-switch-inner.e-switch-active { background: #2563EB; border-color: transparent; }

/* Charts: transparent backgrounds so cards show through (colours come from ParkPay.palette). */
.e-chart, .e-accumulationchart { background: transparent; }