/* ── Base ─────────────────────────────────────────────────────────────────── */

body {
    /* Use the color-scheme variables (which have dark mode variants)
       not --bg-app from theme.css which is light-only */
    background-color: var(--color-background-primary);
    color: var(--color-text-primary);
    font-family: 'Inter', system-ui, sans-serif;
}

.card {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
}

.btn-primary {
    border-radius: var(--border-radius-md);
    font-weight: 600;
}

/* ── Syncfusion: grid ─────────────────────────────────────────────────────── */

.e-grid,
.e-grid .e-table,
.e-grid .e-gridheader,
.e-grid .e-gridcontent,
.e-grid .e-gridheader table,
.e-grid .e-gridcontent table {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-tertiary) !important;
}

.e-grid .e-headercell,
.e-grid .e-columnheader,
.e-grid .e-headercell .e-headercelldiv {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-secondary) !important;
    -webkit-text-fill-color: var(--color-text-secondary) !important;
    border-color: var(--color-border-tertiary) !important;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.e-grid .e-rowcell {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    border-color: var(--color-border-tertiary) !important;
}

.e-grid .e-altrow .e-rowcell {
    background-color: var(--color-background-secondary) !important;
}

.e-grid .e-row:hover .e-rowcell,
.e-grid .e-row.e-altrow:hover .e-rowcell {
    background-color: var(--color-background-tertiary) !important;
}

.e-grid .e-rowcell a {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    text-decoration: none;
}

.e-grid .e-detailrow .e-detailcell {
    background-color: var(--color-background-secondary) !important;
    border-color: var(--color-border-tertiary) !important;
}

.e-grid .e-detailheadercell {
    background-color: var(--color-background-secondary) !important;
    border-color: var(--color-border-tertiary) !important;
}

.e-grid .e-filterbarcell,
.e-grid .e-filterbar,
.e-grid .e-filterbarcell input {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    border-color: var(--color-border-tertiary) !important;
}

.e-grid .e-pager {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border-tertiary) !important;
}

.e-pager .e-numericitem {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-secondary) !important;
    -webkit-text-fill-color: var(--color-text-secondary) !important;
    border-color: var(--color-border-tertiary) !important;
}

.e-pager .e-numericitem:hover {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

.e-pager .e-prevpagedisabled,
.e-pager .e-prevpage,
.e-pager .e-nextpage,
.e-pager .e-nextpagedisabled,
.e-pager .e-lastpagedisabled,
.e-pager .e-lastpage,
.e-pager .e-firstpage,
.e-pager .e-firstpagedisabled {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-secondary) !important;
    -webkit-text-fill-color: var(--color-text-secondary) !important;
    border-color: var(--color-border-tertiary) !important;
}

.e-pager .e-prevpage:hover,
.e-pager .e-nextpage:hover,
.e-pager .e-lastpage:hover,
.e-pager .e-firstpage:hover {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

.e-pager .e-prevpagedisabled,
.e-pager .e-nextpagedisabled,
.e-pager .e-lastpagedisabled,
.e-pager .e-firstpagedisabled {
    opacity: 0.35 !important;
}

.e-grid .e-pager .e-currentitem {
    background-color: var(--color-text-info) !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* ── Syncfusion: inputs ───────────────────────────────────────────────────── */

.e-input-group,
.e-input-group.e-control-wrapper,
.e-float-input,
.e-float-input.e-control-wrapper {
    background-color: var(--color-background-primary) !important;
    border-color: var(--color-border-secondary) !important;
    color: var(--color-text-primary) !important;
}

.e-input-group input,
.e-input-group textarea,
.e-float-input input,
.e-float-input textarea,
.e-input {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

.e-float-input label,
.e-float-input.e-control-wrapper label {
    color: var(--color-text-tertiary) !important;
}

/* ── Syncfusion: dropdowns / pickers ─────────────────────────────────────── */

.e-dropdownlist,
.e-ddl.e-input-group input,
.e-combobox input {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

.e-popup.e-ddl-popup,
.e-popup.e-list-parent,
.e-dropdownbase .e-list-parent {
    background-color: var(--color-background-primary) !important;
    border-color: var(--color-border-secondary) !important;
}

.e-dropdownbase .e-list-item,
.e-list-item {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    background-color: var(--color-background-primary) !important;
}

.e-dropdownbase .e-list-item.e-hover,
.e-dropdownbase .e-list-item.e-active {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
}

/* Dropdown footer / header templates */
.e-ddl-footer,
.e-ddl-header,
.e-popup.e-ddl-popup .e-ddl-footer,
.e-popup.e-ddl-popup .e-ddl-header {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-tertiary) !important;
}

/* Date / time pickers + standalone calendar */
.e-calendar,
.e-calendar .e-content,
.e-calendar .e-header,
.e-calendar .e-footer-container,
.e-bigger.e-small .e-calendar,
.e-datepicker.e-popup,
.e-datetimepicker.e-popup,
.e-datetimepicker .e-content,
.e-daterangepicker.e-popup,
.e-date-range-wrapper {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-primary) !important;
}

/* Calendar day-of-week header row */
.e-calendar .e-week-header th,
.e-calendar .e-content th {
    color: var(--color-text-tertiary) !important;
    -webkit-text-fill-color: var(--color-text-tertiary) !important;
}

/* Calendar navigation header buttons */
.e-calendar .e-header .e-title,
.e-calendar .e-header button {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

.e-calendar .e-header .e-prev,
.e-calendar .e-header .e-next {
    background-color: transparent !important;
}

.e-calendar .e-cell span,
.e-calendar td.e-focused-date .e-day,
.e-calendar td span.e-day {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

.e-calendar td.e-today span.e-day {
    color: var(--color-text-info) !important;
    -webkit-text-fill-color: var(--color-text-info) !important;
}

.e-calendar td.e-selected span.e-day {
    background-color: var(--color-text-info) !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* ── Syncfusion: dialogs ─────────────────────────────────────────────────── */

.e-dialog,
.e-dialog .e-dlg-content,
.e-dialog .e-footer-content {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-secondary) !important;
}

.e-dialog .e-dlg-header,
.e-dialog .e-title-text {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

.e-dlg-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* ── Syncfusion: buttons ─────────────────────────────────────────────────── */

.e-btn:not(.e-primary):not(.e-danger) {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    border-color: var(--color-border-secondary) !important;
}

.e-btn:not(.e-primary):not(.e-danger):hover {
    background-color: var(--color-background-tertiary) !important;
}

/* ── Syncfusion: numeric textbox ─────────────────────────────────────────── */

.e-numerictextbox {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

/* ── iOS Safari: force -webkit-text-fill-color for inline var() colors ────── */
/* Catches elements using inline style="color:var(--color-text-primary)" etc. */

[style*="color:var(--color-text-primary)"],
[style*="color: var(--color-text-primary)"] {
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

[style*="color:var(--color-text-secondary)"],
[style*="color: var(--color-text-secondary)"] {
    -webkit-text-fill-color: var(--color-text-secondary) !important;
}

[style*="color:var(--color-text-tertiary)"],
[style*="color: var(--color-text-tertiary)"] {
    -webkit-text-fill-color: var(--color-text-tertiary) !important;
}

[style*="color:var(--color-text-success)"],
[style*="color: var(--color-text-success)"] {
    -webkit-text-fill-color: var(--color-text-success) !important;
}

[style*="color:var(--color-text-danger)"],
[style*="color: var(--color-text-danger)"] {
    -webkit-text-fill-color: var(--color-text-danger) !important;
}

[style*="color:var(--color-text-info)"],
[style*="color: var(--color-text-info)"] {
    -webkit-text-fill-color: var(--color-text-info) !important;
}

[style*="color:var(--color-text-warning)"],
[style*="color: var(--color-text-warning)"] {
    -webkit-text-fill-color: var(--color-text-warning) !important;
}