/* ────────────────────────────────────────────────────────────────────────────
   Pulse – Syncfusion Theme Overrides
   Loaded AFTER <SyncfusionThemeStyles/> to win the cascade.
   Dark mode rules are scoped to body[data-bs-theme="dark"].
   Light mode rules are scoped to body[data-bs-theme="light"].
   ──────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Dropdown popup container ────────────────────────────────────────── */

body[data-bs-theme="dark"] .e-popup.e-ddl-popup,
body[data-bs-theme="dark"] .e-popup.e-ddl-popup .e-content {
    background-color: #112639 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
    color: #c8d8e8 !important;
}

/* ─── 2. Filter bar (search input at top of dropdown) ────────────────────── */

body[data-bs-theme="dark"] .e-ddl-popup .e-filter-parent {
    background-color: #152e45 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    padding: 6px 8px !important;
}

body[data-bs-theme="dark"] .e-ddl-popup .e-input-group,
body[data-bs-theme="dark"] .e-ddl-popup .e-input-group.e-control-wrapper {
    background-color: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.14) !important;
}

body[data-bs-theme="dark"] .e-ddl-popup .e-input-group input.e-input,
body[data-bs-theme="dark"] .e-ddl-popup input.e-filter-input {
    background-color: transparent !important;
    color: #f0f6ff !important;
}

body[data-bs-theme="dark"] .e-ddl-popup input.e-filter-input::placeholder {
    color: rgba(130,153,174,.6) !important;
}

body[data-bs-theme="dark"] .e-ddl-popup .e-back-icon,
body[data-bs-theme="dark"] .e-ddl-popup .e-filter-parent .e-icons,
body[data-bs-theme="dark"] .e-ddl-popup .e-input-group .e-icons {
    color: #8299ae !important;
}

/* ─── 3. List items ──────────────────────────────────────────────────────── */

body[data-bs-theme="dark"] .e-ddl-popup .e-list-parent,
body[data-bs-theme="dark"] .e-ddl-popup .e-ul,
body[data-bs-theme="dark"] .e-popup.e-ddl-popup .e-list-parent {
    background-color: #112639 !important;
}

body[data-bs-theme="dark"] .e-ddl-popup .e-list-item,
body[data-bs-theme="dark"] .e-popup.e-ddl-popup .e-list-item {
    color: #c8d8e8 !important;
    background-color: #112639 !important;
    border-color: rgba(255,255,255,.04) !important;
}

body[data-bs-theme="dark"] .e-ddl-popup .e-list-item:hover,
body[data-bs-theme="dark"] .e-popup.e-ddl-popup .e-list-item:hover,
body[data-bs-theme="dark"] .e-ddl-popup .e-list-item.e-item-focus {
    background-color: rgba(255,255,255,.07) !important;
    color: #f0f6ff !important;
}

body[data-bs-theme="dark"] .e-ddl-popup .e-list-item.e-active,
body[data-bs-theme="dark"] .e-popup.e-ddl-popup .e-list-item.e-active {
    background-color: rgba(249,115,22,.15) !important;
    color: #f97316 !important;
    font-weight: 600 !important;
}

body[data-bs-theme="dark"] .e-ddl-popup .e-list-nrt,
body[data-bs-theme="dark"] .e-ddl-popup .e-list-group-item {
    background-color: #152e45 !important;
    color: #8299ae !important;
}

body[data-bs-theme="dark"] .e-ddl-popup ::-webkit-scrollbar { width: 4px !important; }
body[data-bs-theme="dark"] .e-ddl-popup ::-webkit-scrollbar-track { background: transparent !important; }
body[data-bs-theme="dark"] .e-ddl-popup ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18) !important;
    border-radius: 4px !important;
}

/* ─── 4. DatePicker / DateTimePicker popup ────────────────────────────────── */

body[data-bs-theme="dark"] .e-popup.e-datetimepicker,
body[data-bs-theme="dark"] .e-popup.e-datepicker,
body[data-bs-theme="dark"] .e-daterangepicker.e-popup {
    background-color: #112639 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}

body[data-bs-theme="dark"] .e-calendar,
body[data-bs-theme="dark"] .e-bigger.e-small .e-calendar,
body[data-bs-theme="dark"] .e-calendar .e-content,
body[data-bs-theme="dark"] .e-calendar .e-header,
body[data-bs-theme="dark"] .e-calendar .e-header .e-content {
    background-color: #112639 !important;
    color: #c8d8e8 !important;
}

body[data-bs-theme="dark"] .e-calendar .e-header .e-title,
body[data-bs-theme="dark"] .e-calendar .e-header a { color: #f0f6ff !important; }

body[data-bs-theme="dark"] .e-calendar .e-header .e-date-icon-prev,
body[data-bs-theme="dark"] .e-calendar .e-header .e-date-icon-next { color: #8299ae !important; }

body[data-bs-theme="dark"] .e-calendar .e-content td .e-day {
    color: #c8d8e8 !important;
    background-color: transparent !important;
}

body[data-bs-theme="dark"] .e-calendar .e-content td:hover .e-day,
body[data-bs-theme="dark"] .e-calendar .e-content td.e-focused-date .e-day {
    background-color: rgba(255,255,255,.07) !important;
    color: #f0f6ff !important;
}

body[data-bs-theme="dark"] .e-calendar .e-content td.e-today .e-day {
    border-color: #f97316 !important;
    color: #f97316 !important;
    background-color: transparent !important;
}

body[data-bs-theme="dark"] .e-calendar .e-content td.e-today:hover .e-day {
    background-color: rgba(249,115,22,.15) !important;
}

body[data-bs-theme="dark"] .e-calendar .e-content td.e-selected .e-day,
body[data-bs-theme="dark"] .e-calendar .e-content td.e-start-date .e-day,
body[data-bs-theme="dark"] .e-calendar .e-content td.e-end-date .e-day {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

body[data-bs-theme="dark"] .e-calendar .e-content td.e-other-month .e-day { color: #4d6475 !important; }

body[data-bs-theme="dark"] .e-calendar .e-content th { color: #8299ae !important; }

body[data-bs-theme="dark"] .e-datetimepicker .e-list-parent .e-list-item {
    color: #c8d8e8 !important;
    background-color: #112639 !important;
}
body[data-bs-theme="dark"] .e-datetimepicker .e-list-parent .e-list-item:hover {
    background-color: rgba(255,255,255,.07) !important;
    color: #f0f6ff !important;
}
body[data-bs-theme="dark"] .e-datetimepicker .e-list-parent .e-list-item.e-active {
    background-color: rgba(249,115,22,.15) !important;
    color: #f97316 !important;
}

/* ─── 5. Numeric TextBox spin buttons ─────────────────────────────────────── */

body[data-bs-theme="dark"] .e-numerictextbox.e-input-group .e-spin-up,
body[data-bs-theme="dark"] .e-numerictextbox.e-input-group .e-spin-down {
    color: #8299ae !important;
    background-color: transparent !important;
}
body[data-bs-theme="dark"] .e-numerictextbox.e-input-group .e-spin-up:hover,
body[data-bs-theme="dark"] .e-numerictextbox.e-input-group .e-spin-down:hover {
    color: #f0f6ff !important;
    background-color: rgba(255,255,255,.07) !important;
}

/* ─── 6. Tooltip popup ────────────────────────────────────────────────────── */

body[data-bs-theme="dark"] .e-tooltip-wrap.e-popup {
    background-color: #1b3a55 !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #f0f6ff !important;
}
body[data-bs-theme="dark"] .e-tooltip-wrap .e-tip-content { color: #f0f6ff !important; }
body[data-bs-theme="dark"] .e-tooltip-wrap .e-arrow-tip-outer.e-tip-top  { border-bottom-color: #1b3a55 !important; }
body[data-bs-theme="dark"] .e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom { border-top-color: #1b3a55 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Syncfusion component overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Dropdown popup container ────────────────────────────────────────── */

body[data-bs-theme="light"] .e-popup.e-ddl-popup,
body[data-bs-theme="light"] .e-popup.e-ddl-popup .e-content {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,.14) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
    color: #334155 !important;
}

/* ─── 2. Filter bar ──────────────────────────────────────────────────────── */

body[data-bs-theme="light"] .e-ddl-popup .e-filter-parent {
    background-color: #f8fafc !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    padding: 6px 8px !important;
}

body[data-bs-theme="light"] .e-ddl-popup .e-input-group,
body[data-bs-theme="light"] .e-ddl-popup .e-input-group.e-control-wrapper {
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,.2) !important;
}

body[data-bs-theme="light"] .e-ddl-popup .e-input-group input.e-input,
body[data-bs-theme="light"] .e-ddl-popup input.e-filter-input {
    background-color: transparent !important;
    color: #0f172a !important;
}

body[data-bs-theme="light"] .e-ddl-popup input.e-filter-input::placeholder { color: rgba(100,116,139,.6) !important; }

body[data-bs-theme="light"] .e-ddl-popup .e-back-icon,
body[data-bs-theme="light"] .e-ddl-popup .e-filter-parent .e-icons,
body[data-bs-theme="light"] .e-ddl-popup .e-input-group .e-icons { color: #64748b !important; }

/* ─── 3. List items ──────────────────────────────────────────────────────── */

body[data-bs-theme="light"] .e-ddl-popup .e-list-parent,
body[data-bs-theme="light"] .e-ddl-popup .e-ul,
body[data-bs-theme="light"] .e-popup.e-ddl-popup .e-list-parent { background-color: #ffffff !important; }

body[data-bs-theme="light"] .e-ddl-popup .e-list-item,
body[data-bs-theme="light"] .e-popup.e-ddl-popup .e-list-item {
    color: #334155 !important;
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,.04) !important;
}

body[data-bs-theme="light"] .e-ddl-popup .e-list-item:hover,
body[data-bs-theme="light"] .e-popup.e-ddl-popup .e-list-item:hover,
body[data-bs-theme="light"] .e-ddl-popup .e-list-item.e-item-focus {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

body[data-bs-theme="light"] .e-ddl-popup .e-list-item.e-active,
body[data-bs-theme="light"] .e-popup.e-ddl-popup .e-list-item.e-active {
    background-color: rgba(249,115,22,.1) !important;
    color: #c2520a !important;
    font-weight: 600 !important;
}

body[data-bs-theme="light"] .e-ddl-popup .e-list-nrt,
body[data-bs-theme="light"] .e-ddl-popup .e-list-group-item {
    background-color: #f8fafc !important;
    color: #64748b !important;
}

/* ─── 4. DatePicker / DateTimePicker popup ────────────────────────────────── */

body[data-bs-theme="light"] .e-popup.e-datetimepicker,
body[data-bs-theme="light"] .e-popup.e-datepicker,
body[data-bs-theme="light"] .e-daterangepicker.e-popup {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

body[data-bs-theme="light"] .e-calendar,
body[data-bs-theme="light"] .e-bigger.e-small .e-calendar,
body[data-bs-theme="light"] .e-calendar .e-content,
body[data-bs-theme="light"] .e-calendar .e-header,
body[data-bs-theme="light"] .e-calendar .e-header .e-content {
    background-color: #ffffff !important;
    color: #334155 !important;
}

body[data-bs-theme="light"] .e-calendar .e-header .e-title,
body[data-bs-theme="light"] .e-calendar .e-header a { color: #0f172a !important; }

body[data-bs-theme="light"] .e-calendar .e-header .e-date-icon-prev,
body[data-bs-theme="light"] .e-calendar .e-header .e-date-icon-next { color: #64748b !important; }

body[data-bs-theme="light"] .e-calendar .e-content td .e-day {
    color: #334155 !important;
    background-color: transparent !important;
}

body[data-bs-theme="light"] .e-calendar .e-content td:hover .e-day,
body[data-bs-theme="light"] .e-calendar .e-content td.e-focused-date .e-day {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

body[data-bs-theme="light"] .e-calendar .e-content td.e-today .e-day {
    border-color: #f97316 !important;
    color: #f97316 !important;
    background-color: transparent !important;
}

body[data-bs-theme="light"] .e-calendar .e-content td.e-today:hover .e-day {
    background-color: rgba(249,115,22,.1) !important;
}

body[data-bs-theme="light"] .e-calendar .e-content td.e-selected .e-day,
body[data-bs-theme="light"] .e-calendar .e-content td.e-start-date .e-day,
body[data-bs-theme="light"] .e-calendar .e-content td.e-end-date .e-day {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

body[data-bs-theme="light"] .e-calendar .e-content td.e-other-month .e-day { color: #94a3b8 !important; }
body[data-bs-theme="light"] .e-calendar .e-content th { color: #64748b !important; }

body[data-bs-theme="light"] .e-datetimepicker .e-list-parent .e-list-item {
    color: #334155 !important;
    background-color: #ffffff !important;
}
body[data-bs-theme="light"] .e-datetimepicker .e-list-parent .e-list-item:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
body[data-bs-theme="light"] .e-datetimepicker .e-list-parent .e-list-item.e-active {
    background-color: rgba(249,115,22,.1) !important;
    color: #c2520a !important;
}

/* ─── 5. Numeric TextBox spin buttons ─────────────────────────────────────── */

body[data-bs-theme="light"] .e-numerictextbox.e-input-group .e-spin-up,
body[data-bs-theme="light"] .e-numerictextbox.e-input-group .e-spin-down {
    color: #64748b !important;
    background-color: transparent !important;
}
body[data-bs-theme="light"] .e-numerictextbox.e-input-group .e-spin-up:hover,
body[data-bs-theme="light"] .e-numerictextbox.e-input-group .e-spin-down:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

/* ─── 6. Tooltip popup ────────────────────────────────────────────────────── */

body[data-bs-theme="light"] .e-tooltip-wrap.e-popup {
    background-color: #1e293b !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    color: #f1f5f9 !important;
}
body[data-bs-theme="light"] .e-tooltip-wrap .e-tip-content { color: #f1f5f9 !important; }
body[data-bs-theme="light"] .e-tooltip-wrap .e-arrow-tip-outer.e-tip-top    { border-bottom-color: #1e293b !important; }
body[data-bs-theme="light"] .e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom { border-top-color: #1e293b !important; }