:root {
    --color-sf-primary: #FF546B;
    --color-sf-primary-light-hover: #fff1f2;
    --color-sf-primary-light-active: #ffe4e6;
    --color-sf-primary-light-focus: #ffc9ce;
    --color-sf-primary-text-hover: #FF546B;
    --color-sf-primary-dark-hover: #e63b53;
    --color-sf-primary-dark-active: #c22843;
    --color-sf-primary-dark-focus: #c22843;
}


/* ── Typography — Match Tailwind Defaults ──────────────────── */

.e-grid,
.e-grid .e-rowcell,
.e-grid .e-headercell,
.e-grid .e-pager,
.e-input,
.e-input-group,
.e-ddl,
.e-dropdownbase,
.e-popup,
.e-switch-wrapper,
.e-numerictextbox,
.e-calendar,
.e-datepicker,
.e-schedule {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}


    /* ── Inputs ────────────────────────────────────────────────── */

    .e-input,
    .e-input::placeholder {
        font-size: 0.875rem !important;
    }

    .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
    .e-input-group.e-input-focus .e-input-group-icon {
        color: #FF546B !important;
    }

    .e-input-group.e-input-focus::before,
    .e-input-group.e-input-focus::after {
        background: #FF546B !important;
    }


    /* ── Dropdowns ─────────────────────────────────────────────── */

    .e-ddl .e-input,
    .e-dropdownbase .e-list-item {
        font-size: 0.875rem !important;
    }

    /* ── DropDownList — Match MultiSelect header styling ── */

    .e-dropdownbase .e-list-header {
        padding: 8px 12px !important;
        border-bottom: 1px solid #e5e7eb !important;
        background-color: #f9fafb !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
    }

        .e-dropdownbase .e-list-header table {
            width: 100% !important;
        }

        .e-dropdownbase .e-list-header th {
            font-weight: 600 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
        }

    /* Dark mode */
    .dark .e-dropdownbase .e-list-header {
        border-bottom-color: #374151 !important;
        background-color: #1f2937 !important;
        color: #9ca3af !important;
    }


    /* ── Switch ────────────────────────────────────────────────── */

    .e-switch-wrapper .e-switch-on {
        background-color: #FF546B !important;
    }


/* ── Buttons ───────────────────────────────────────────────── */

.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: #FF546B !important;
    border-color: #FF546B !important;
    color: white !important;
}

    .e-btn.e-primary:hover,
    .e-css.e-btn.e-primary:hover {
        background-color: #e63b53 !important;
        border-color: #e63b53 !important;
    }

/* ── Tabs ──────────────────────────────────────────────────── */

.e-tab .e-tab-header .e-toolbar-item.e-active .e-text-wrap::before {
    border-color: #FF546B !important;
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: #374151 !important;
}

.dark .e-tab .e-tab-header .e-toolbar-item.e-active .e-text-wrap::before {
    border-color: #ff7a87 !important;
}

.dark .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: #d1d5db !important;
}

/* ── Grid — Header ─────────────────────────────────────────── */

.e-grid .e-headercell {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 6px 12px !important;
}

.e-grid .e-headercelldiv {
    font-size: 0.75rem !important;
}

.dark .e-grid .e-headercell {
    background-color: #111827 !important;
    color: #9ca3af !important;
}


/* ── Grid — Rows ───────────────────────────────────────────── */

.e-grid .e-rowcell {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    padding: 6px 12px !important;
    color: #4b5563 !important;
}

.dark .e-grid .e-rowcell {
    color: #d1d5db !important;
    border-color: #1f2937 !important;
}

.e-grid .e-row:hover .e-rowcell {
    background-color: #f9fafb !important;
}

.dark .e-grid .e-row:hover .e-rowcell {
    background-color: rgba(255, 255, 255, 0.03) !important;
}


/* ── Grid — Selection ──────────────────────────────────────── */

.e-grid .e-selectionbackground {
    background-color: #fff1f2 !important;
}

.dark .e-grid .e-selectionbackground {
    background-color: rgba(255, 84, 107, 0.1) !important;
}


/* ── Grid — Borders ────────────────────────────────────────── */

.e-grid {
    border-color: #e5e7eb !important;
    overflow: visible;
}

.dark .e-grid {
    border-color: #374151 !important;
}


    /* ── Grid — Dark Background ────────────────────────────────── */

    .dark .e-grid,
    .dark .e-grid .e-rowcell,
    .dark .e-grid .e-pager {
        background-color: #111827 !important;
        color: #d1d5db !important;
    }


/* ── Grid — Toolbar ────────────────────────────────────────── */

.e-grid .e-toolbar {
    background-color: transparent !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 8px !important;
}

.dark .e-grid .e-toolbar {
    border-bottom-color: #374151 !important;
}

.e-grid .e-toolbar .e-search .e-input {
    font-size: 0.75rem !important;
}


/* ── Grid — Switch Inside Grid ─────────────────────────────── */

.e-grid .e-switch-wrapper {
    transform: scale(0.75);
    transform-origin: left center;
}


/* ── Grid — Action Menu Button ─────────────────────────────── */

.e-grid .e-dropdown-btn.e-flat {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

    .e-grid .e-dropdown-btn.e-flat:hover,
    .e-grid .e-dropdown-btn.e-flat:focus {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .e-grid .e-dropdown-btn.e-flat .e-caret {
        display: none !important;
    }


/* ── Grid — Sort/Filter Icons ──────────────────────────────── */

.e-grid .e-sortfilter .e-icon-ascending,
.e-grid .e-sortfilter .e-icon-descending {
    color: #FF546B !important;
}


/* ── Pager ──────────────────────────────────────────────────── */

.e-pager,
.e-pager .e-pagercontainer {
    font-size: 0.75rem !important;
}

    .e-pager .e-currentitem {
        background-color: #FF546B !important;
        color: white !important;
    }


/* ── Filter Dialogs ────────────────────────────────────────── */

.e-filter-popup .e-dlg-content {
    font-size: 0.875rem !important;
}

.e-filter-popup .e-btn.e-primary,
.e-excelfilter .e-btn.e-primary,
.e-checkboxfilter .e-btn.e-primary {
    background-color: #FF546B !important;
    border-color: #FF546B !important;
    color: white !important;
}

    .e-filter-popup .e-btn.e-primary:hover,
    .e-excelfilter .e-btn.e-primary:hover,
    .e-checkboxfilter .e-btn.e-primary:hover {
        background-color: #e63b53 !important;
        border-color: #e63b53 !important;
    }


/* ── DatePicker / Calendar ─────────────────────────────────── */

/* Selected date */
.e-calendar .e-content td.e-selected span.e-day,
.e-calendar .e-content td.e-selected:hover span.e-day,
.e-bigger .e-calendar .e-content td.e-selected span.e-day {
    background-color: #FF546B !important;
    color: #ffffff !important;
    border-color: #FF546B !important;
}

/* Today circle outline */
.e-calendar .e-content td.e-today span.e-day {
    border-color: #FF546B !important;
    color: #FF546B !important;
}

/* Today + selected */
.e-calendar .e-content td.e-today.e-selected span.e-day {
    background-color: #FF546B !important;
    color: #ffffff !important;
    border-color: #FF546B !important;
}

/* Today + focused (initial popup open) */
.e-calendar .e-content td.e-today.e-focused-date span.e-day,
.e-calendar .e-content td.e-focused-date.e-today span.e-day {
    border-color: #FF546B !important;
    color: #FF546B !important;
    background-color: #fff1f2 !important;
}

/* Focused date (keyboard navigation) */
.e-calendar .e-content td.e-focused-date span.e-day {
    background-color: #fff1f2 !important;
    color: #FF546B !important;
    border-color: #FF546B !important;
}

/* Hover on calendar dates */
.e-calendar .e-content td:hover span.e-day {
    background-color: #fff1f2 !important;
    color: #FF546B !important;
}

/* Dark mode — hover & focused */
.dark .e-calendar .e-content td:hover span.e-day,
.dark .e-calendar .e-content td.e-focused-date span.e-day {
    background-color: rgba(255, 84, 107, 0.15) !important;
    color: #ff7a87 !important;
    border-color: #FF546B !important;
}

/* Dark mode — today outline */
.dark .e-calendar .e-content td.e-today span.e-day,
.dark .e-calendar .e-content td.e-today.e-focused-date span.e-day {
    border-color: #FF546B !important;
    color: #ff7a87 !important;
}

/* Dark mode — selected */
.dark .e-calendar .e-content td.e-selected span.e-day,
.dark .e-calendar .e-content td.e-today.e-selected span.e-day {
    background-color: #FF546B !important;
    color: #ffffff !important;
    border-color: #FF546B !important;
}

/* Calendar navigation arrows */
.e-calendar .e-header .e-prev:hover,
.e-calendar .e-header .e-next:hover {
    color: #FF546B !important;
}

/* Month/Year title hover */
.e-calendar .e-header .e-title:hover {
    color: #FF546B !important;
}

/* Year/decade picker selected */
.e-calendar .e-content.e-year td.e-selected span,
.e-calendar .e-content.e-decade td.e-selected span {
    background-color: #FF546B !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
}

/* DatePicker input focus underline */
.e-datepicker.e-input-group.e-input-focus::before,
.e-datepicker.e-input-group.e-input-focus::after {
    background: #FF546B !important;
}

/* DatePicker icon hover */
.e-datepicker .e-input-group-icon.e-date-icon:hover {
    color: #FF546B !important;
}

/* Calendar week grid overflow */
.calendar-week-grid td.day-cell > div {
    max-width: 100%;
    overflow: hidden;
}

    .calendar-week-grid td.day-cell > div > div {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ── DatePicker — Initial focus ring on popup open ── */

.e-calendar .e-content td:focus,
.e-calendar .e-content td.e-focused-date,
.e-calendar .e-content td.e-today:focus {
    outline: none !important;
    box-shadow: none !important;
}

    .e-calendar .e-content td:focus span.e-day,
    .e-calendar .e-content td.e-focused-date span.e-day {
        outline: 2px solid #FF546B !important;
        outline-offset: -2px !important;
        background-color: #fff1f2 !important;
        color: #FF546B !important;
        border-color: #FF546B !important;
        box-shadow: none !important;
    }

.dark .e-calendar .e-content td:focus span.e-day,
.dark .e-calendar .e-content td.e-focused-date span.e-day {
    outline: 2px solid #FF546B !important;
    outline-offset: -2px !important;
    background-color: rgba(255, 84, 107, 0.15) !important;
    color: #ff7a87 !important;
    border-color: #FF546B !important;
    box-shadow: none !important;
}

/* ── Scheduler ─────────────────────────────────────────────── */

.e-schedule .e-appointment {
    border-radius: 4px !important;
    border: none !important;
}

.e-schedule .e-month-view .e-appointment {
    height: 20px !important;
    line-height: 20px !important;
}

.e-schedule .e-header-cells {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
}

.dark .e-schedule {
    background-color: #111827 !important;
}

    .dark .e-schedule .e-header-cells,
    .dark .e-schedule .e-work-cells {
        background-color: #111827 !important;
        border-color: #1f2937 !important;
        color: #d1d5db !important;
    }

.e-schedule .e-timeline-view .e-resource-cells {
    font-size: 0.75rem !important;
}


/* ── Timeline ──────────────────────────────────────────────── */

.absence-timeline .e-timeline-item .e-dot,
.holiday-timeline .e-timeline-item .e-dot {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.absence-timeline .e-timeline-item,
.holiday-timeline .e-timeline-item {
    padding: 0 16px !important;
}

.e-timeline .e-dot {
    display: none !important;
}

.e-timeline .e-connector {
    display: none !important;
}

/* ── Chart — Card background ───────────────────────────────── */

/* The chart container itself sits inside our white/dark card; the chart
   should be transparent so the card surface shows through and rounded
   corners aren't broken. */
.e-chart {
    background: transparent !important;
}

    .e-chart svg {
        background: transparent !important;
    }

    /* ── Chart — Axis lines & ticks ────────────────────────────── */

    /* X-axis line, Y-axis line, and tick marks. Light = gray-300, Dark = gray-700. */
    .e-chart .e-axis-line,
    .e-chart .e-major-tick-lines,
    .e-chart .e-minor-tick-lines {
        stroke: #d1d5db !important;
    }

.dark .e-chart .e-axis-line,
.dark .e-chart .e-major-tick-lines,
.dark .e-chart .e-minor-tick-lines {
    stroke: #374151 !important;
}

/* ── Chart — Gridlines ─────────────────────────────────────── */

/* Horizontal & vertical gridlines behind the bars.
   Lighter than axis lines so they recede visually. */
.e-chart .e-major-grid-lines,
.e-chart .e-minor-grid-lines {
    stroke: #f3f4f6 !important;
}

.dark .e-chart .e-major-grid-lines,
.dark .e-chart .e-minor-grid-lines {
    stroke: #1f2937 !important;
}

/* ── Chart — Axis labels & titles ──────────────────────────── */

/* Axis tick labels (the "Earnings" / "100" text). */
.e-chart text.e-axis-label,
.e-chart text.e-cartesian-axis-label,
.e-chart .e-axis-label,
.e-chart .e-cartesian-axis-label {
    fill: #6b7280 !important;
}

.dark .e-chart text.e-axis-label,
.dark .e-chart text.e-cartesian-axis-label,
.dark .e-chart .e-axis-label,
.dark .e-chart .e-cartesian-axis-label {
    fill: #9ca3af !important;
}

/* Axis titles ("Item Type", "Amount"). Slightly darker than tick labels. */
.e-chart text.e-axis-title,
.e-chart .e-axis-title {
    fill: #374151 !important;
}

.dark .e-chart text.e-axis-title,
.dark .e-chart .e-axis-title {
    fill: #d1d5db !important;
}

/* ── Chart — Legend ────────────────────────────────────────── */

.e-chart text.e-legend-text {
    fill: #4b5563 !important;
}

.dark .e-chart text.e-legend-text {
    fill: #d1d5db !important;
}

/* ── Chart — Tooltip ───────────────────────────────────────── */

.e-chart .e-tooltip-text,
.e-chart .e-tooltip-text-style {
    fill: #ffffff !important;
}

/* ── Chart — Crosshair (zoom guides) ───────────────────────── */

.e-chart .e-crosshair-line {
    stroke: #9ca3af !important;
}

.dark .e-chart .e-crosshair-line {
    stroke: #6b7280 !important;
}

/* ── Chart — Scrollbar (when zoomed) ───────────────────────── */

.e-chart .e-scrollbar .e-scrollbar-back {
    fill: #f3f4f6 !important;
}

.dark .e-chart .e-scrollbar .e-scrollbar-back {
    fill: #1f2937 !important;
}

.e-chart .e-scrollbar .e-scrollbar-thumb {
    fill: #d1d5db !important;
}

.dark .e-chart .e-scrollbar .e-scrollbar-thumb {
    fill: #4b5563 !important;
}