:root {
    --app-primary: #1E3A8A;
    --app-surface: #FFFFFF;
    /*--app-surface-alt: #FFFFFF;*/
    --app-text: #111827;
    --app-text-secondary: #4B5563;
    --app-bg: #FFFFFF; /*#F8FAFC*/
    --app-drawer-bg: #FFFFFF; /* match MudDrawer light */
    --sp-field-bg: #f8f8f8;
    --sp-field-bg-readonly: #eeeeee;
    --kendo-input-bg: var(--sp-field-bg);
    --sp-text-color: var(--app-text);
    --sp-text-color-muted: var(--app-text-secondary);
    /* Reduced height for shorter inputs */
    --sp-k-field-height: 40px;
}

    :root[data-theme='dark'] {
        --app-primary: #3C5CCF;
        --app-surface: #383843;
        /*--app-surface-alt: #27272F;*/
        --app-text: #F1F5F9;
        --app-text-secondary: #CBD5E1;
        --app-bg: #1A2230; /* match overall background */
        --app-drawer-bg: #1A2230; /* match MudDrawer dark */
        --sp-field-bg: #3d3f44;
        --sp-field-bg-readonly: #2f3135;
        --kendo-input-bg: var(--sp-field-bg);
        --sp-text-color: var(--app-text);
        --sp-text-color-muted: var(--app-text-secondary);
    }

body, .mud-layout, .mud-main-content {
    background: var(--app-bg) !important;
    color: var(--app-text);
}

/* Neutral app bar uses same background as body (updated to remove underline/gap) */
.app-bar-neutral.mud-appbar {
    background: var(--app-bg) !important;
    color: var(--app-text) !important;
    box-shadow: none;
    border-bottom: none !important; /* removed the line */
    margin-bottom: 0; /* ensure no gap */
    padding-bottom: 0;
}

:root[data-theme='dark'] .app-bar-neutral.mud-appbar {
    border-bottom: none !important;
}

.app-bar-neutral .mud-button-root,
.app-bar-neutral .mud-icon-button,
.app-bar-neutral .mud-typography,
.app-bar-neutral .mud-icon {
    color: var(--app-text) !important;
}

.app-bar-colored {
    background-color: var(--app-bg) !important;
    color: var(--app-primary-text) !important;
}

.drawer-colored {
    background-color: var(--app-bg) !important;
    color: var(--app-primary-text) !important;
}

/* Ensure Telerik TreeView background matches the MudDrawer background */
.telerik-treeview-custom {
    color: var(--app-text);
    background-color: var(--app-drawer-bg) !important;
}

/* Apply same background to inner Kendo elements used by the TreeView.
   Exclude selected items so the badge-info highlight is not overridden. */
.telerik-treeview-custom .k-treeview,
.telerik-treeview-custom .k-treeview-group,
.telerik-treeview-custom .k-treeview-item:not(.k-selected) > .k-treeview-top,
.telerik-treeview-custom .k-treeview-item:not(.k-selected) > .k-treeview-mid,
.telerik-treeview-custom .k-treeview-item:not(.k-selected) > .k-treeview-leaf,
.telerik-treeview-custom .k-treeview-item:not(.k-selected),
.telerik-treeview-custom .k-treeview-item:not(.k-selected) .k-treeview-leaf-text,
.telerik-treeview-custom .k-treeview-item:not(.k-selected) .k-treeview-item-text {
    /*background-color: var(--app-drawer-bg) !important;*/
    color: var(--app-text) !important;
}

/* Example Telerik tree + nav link overrides for dark */
:root[data-theme='dark'] .telerik-treeview-custom,
:root[data-theme='dark'] .mud-navmenu {
    color: var(--app-text);
    background-color: var(--app-drawer-bg) !important;
}

:root[data-theme='dark'] a.mud-nav-link {
    color: #eee !important;
}

.theme-switch.k-switch {
    --kendo-switch-on-bg: var(--app-primary, #261B62);
    --kendo-switch-off-bg: #888;
    vertical-align: middle;
}

    .theme-switch.k-switch .k-switch-track {
        border-color: transparent;
    }

/* ---- MudBlazor button text color: light mode ---- */
/* Filled / colored buttons keep white text */
:root:not([data-theme='dark']) .mud-button-filled .mud-button-label,
:root:not([data-theme='dark']) .mud-button-outlined:not(.mud-button-outlined-default) .mud-button-label {
    color: #fff !important;
}

/* Text buttons & default-outlined buttons use dark readable text in light mode */
:root:not([data-theme='dark']) .mud-button-text .mud-button-label,
:root:not([data-theme='dark']) .mud-button-outlined.mud-button-outlined-default .mud-button-label {
    color: var(--app-text) !important;
}

/* Default (no Color) MudButton in light mode - readable dark text */
:root:not([data-theme='dark']) .mud-button-root:not(.mud-button-filled):not(.mud-button-outlined) .mud-button-label {
    color: var(--app-text) !important;
}

/* Disabled state */
.mud-button-root.mud-disabled,
.mud-button-root.mud-disabled .mud-button-label {
    color: #cccccc !important;
}


/* Edit Yearly Plan button color override */
.edit-yearly-plan-btn .mud-button-label {
    color: #007482 !important;
}

.edit-yearly-plan-btn:hover .mud-button-label,
.edit-yearly-plan-btn:focus .mud-button-label {
    color: #007482 !important;
}

.edit-yearly-plan-btn.mud-disabled .mud-button-label {
    color: #00748280 !important; /* Slightly muted when disabled */
}

/* Outlined / Filled inputs, selects, autocompletes, pickers */
.mud-input.mud-input-outlined,
.mud-input.mud-input-filled,
.mud-select.mud-select-outlined,
.mud-select.mud-select-filled,
.mud-autocomplete.mud-input-outlined,
.mud-autocomplete.mud-input-filled,
.mud-picker .mud-input.mud-input-outlined,
.mud-picker .mud-input.mud-input-filled {
    background-color: var(--sp-field-bg);
    transition: background-color .2s;
}

/* Extra specificity for dark mode if MudBlazor theme re-applies a white background */
:root[data-theme='dark'] .mud-input.mud-input-outlined,
:root[data-theme='dark'] .mud-input.mud-input-filled,
:root[data-theme='dark'] .mud-select.mud-select-outlined,
:root[data-theme='dark'] .mud-select.mud-select-filled,
:root[data-theme='dark'] .mud-autocomplete.mud-input-outlined,
:root[data-theme='dark'] .mud-autocomplete.mud-input-filled,
:root[data-theme='dark'] .mud-picker .mud-input.mud-input-outlined,
:root[data-theme='dark'] .mud-picker .mud-input.mud-input-filled {
    background-color: var(--sp-field-bg) !important;
}

/* ReadOnly */
.mud-input.mud-input-outlined.mud-readonly,
.mud-input.mud-input-filled.mud-readonly {
    background-color: var(--sp-field-bg-readonly);
}

:root[data-theme='dark'] .mud-input.mud-input-outlined.mud-readonly,
:root[data-theme='dark'] .mud-input.mud-input-filled.mud-readonly {
    background-color: var(--sp-field-bg-readonly) !important;
}

/* Disabled */
.mud-input.mud-input-outlined.mud-disabled,
.mud-input.mud-input-filled.mud-disabled {
    background-color: rgba(0,0,0,0.04);
}

:root[data-theme='dark'] .mud-input.mud-input-outlined.mud-disabled,
:root[data-theme='dark'] .mud-input.mud-input-filled.mud-disabled {
    background-color: #27292d !important;
}

/* Base outlined/filled text inputs, selects, autocomplete, pickers */
.mud-input-root.mud-input-outlined,
.mud-input-root.mud-input-filled,
.mud-input-root.mud-input-underline {
    background-color: var(--sp-field-bg);
    transition: background-color .2s;
    height: 40px !important; /* Set consistent shorter height */
    min-height: 40px !important;
    max-height: 40px !important;
}

/* Dark override (kept for safety if Mud overrides late) */
:root[data-theme='dark'] .mud-input-root.mud-input-outlined,
:root[data-theme='dark'] .mud-input-root.mud-input-filled,
:root[data-theme='dark'] .mud-input-root.mud-input-underline {
    background-color: var(--sp-field-bg) !important;
}

/* Readonly */
.mud-input-root.mud-readonly {
    background-color: var(--sp-field-bg-readonly);
}

:root[data-theme='dark'] .mud-input-root.mud-readonly {
    background-color: var(--sp-field-bg-readonly) !important;
}

/* Disabled */
.mud-input-root.mud-disabled {
    background-color: rgba(0,0,0,0.04);
}

:root[data-theme='dark'] .mud-input-root.mud-disabled {
    background-color: #27292d !important;
}

/* Keep validation highlight */
.mud-input-control [style*="lightyellow"] {
    background-color: lightyellow !important;
}

/* ---- MudBlazor button text color: dark mode ---- */
/* All MudBlazor buttons get white text in dark mode */
:root[data-theme='dark'] .mud-button-root,
:root[data-theme='dark'] .mud-button-root .mud-button-label {
    color: #fff !important;
}

:root[data-theme='dark'] .mud-button-root:hover .mud-button-label {
    color: #fff !important;
}

/* Responsive header typography for portal pages */
.portal-header-title.mud-typography-h4 {
    /* Desktop/base size keeps Mud h4 look; clamp gives gentle fluid scaling */
    font-size: clamp(1.55rem, 1.2rem + 1vw, 2rem);
    line-height: 1.15;
}

.portal-header-inline-label {
    font-size: 1.38rem;
    font-weight: 600;
}

@media (max-width: 640px) {
    .portal-header-title.mud-typography-h4 {
        font-size: 1.25rem; /* Smaller than default h4 */
    }

    .portal-header-subtitle.mud-typography-h6 {
        font-size: 0.80rem;
    }

    .portal-header-inline-label {
        font-size: 0.70rem;
    }
}

@media (max-width: 400px) {
    .portal-header-title.mud-typography-h4 {
        font-size: 1.15rem;
    }

    .portal-header-subtitle.mud-typography-h6 {
        font-size: 0.72rem;
    }

    .portal-header-inline-label {
        font-size: 0.65rem;
    }
}

@media (min-width: 1600px) {
    .portal-header-subtitle.mud-typography-h6 {
        font-size: 1.38rem;
    }
}

/* Responsive section headings (form cards, panels) */
.portal-section-title.mud-typography-h5 {
    font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
    line-height: 1.2;
}

@media (max-width: 640px) {
    .portal-section-title.mud-typography-h5 {
        font-size: 0.95rem;
    }
}

@media (max-width: 400px) {
    .portal-section-title.mud-typography-h5 {
        font-size: 0.85rem;
    }
}

/* Telerik input alignment with Mud input background */
.sp-k-field.k-autocomplete,
.sp-k-field.k-numerictextbox,
.sp-k-field .k-input,
.sp-k-field .k-input-inner,
.sp-k-field .k-picker,
.sp-k-field .k-picker .k-input-inner {
    background-color: var(--sp-field-bg) !important;
    transition: background-color .2s;
    border-radius: 4px;
}

    /* Hover / focus (optional subtle lift) */
    .sp-k-field.k-autocomplete:hover .k-input-inner,
    .sp-k-field.k-numerictextbox:hover .k-input-inner,
    .sp-k-field .k-input:focus,
    .sp-k-field .k-input-inner:focus {
        background-color: var(--sp-field-bg);
    }

/* Disabled / readonly */
.sp-k-field.k-disabled .k-input-inner,
.sp-k-field.k-disabled .k-input,
.sp-k-field.k-readonly .k-input-inner,
.sp-k-field.k-readonly .k-input {
    background-color: var(--sp-field-bg-readonly);
}

/* Dark theme overrides */
:root[data-theme='dark'] .sp-k-field.k-autocomplete,
:root[data-theme='dark'] .sp-k-field.k-numerictextbox,
:root[data-theme='dark'] .sp-k-field .k-input,
:root[data-theme='dark'] .sp-k-field .k-input-inner,
:root[data-theme='dark'] .sp-k-field .k-picker .k-input-inner {
    background-color: var(--sp-field-bg) !important;
}

:root[data-theme='dark'] .sp-k-field.k-disabled .k-input-inner,
:root[data-theme='dark'] .sp-k-field.k-readonly .k-input-inner {
    background-color: var(--sp-field-bg-readonly) !important;
}

/* Optional: make clear button / spin buttons inherit text color */
.sp-k-field .k-button,
:root[data-theme='dark'] .sp-k-field .k-button {
    color: inherit;
}

/* Override Kendo (Telerik) input background using its CSS vars (scoped to just these fields) */
.sp-k-field {
    /*--kendo-input-bg: var(--sp-field-bg);*/
  /*  --kendo-input-text: var(--app-text);*/
}

:root[data-theme='dark'] .sp-k-field {
    /*--kendo-input-bg: var(--sp-field-bg)*/;
    --kendo-input-text: var(--app-text);
}

.sp-k-field.k-readonly,
.sp-k-field.k-disabled {
    --kendo-input-bg: var(--sp-field-bg-readonly);
}

/* Fallback: force background if variables not applied (theme differences) */
.sp-k-field.k-input-solid .k-input-inner,
.sp-k-field.k-input-solid .k-input-inner input,
.sp-k-field.k-autocomplete.k-input-solid input.k-input-inner,
.sp-k-field.k-numerictextbox.k-input-solid input.k-input-inner {
    background-color: var(--sp-field-bg) !important;
}

/* Readonly/Disabled fallback */
.sp-k-field.k-readonly .k-input-inner,
.sp-k-field.k-disabled .k-input-inner {
    background-color: var(--sp-field-bg-readonly) !important;
}

/* Wrapper */
.sp-k-field {
    display: inline-flex;
    align-items: stretch;
    font-size: var(--sp-k-field-font-size);
    /*line-height:1.3;*/
}

    /* Numeric textbox host (ensure container does not shrink) */
    .sp-k-field.k-numerictextbox {
        height: var(--sp-k-field-height) !important;
        min-height: var(--sp-k-field-height) !important;
    }

    /* Action / clear / spin buttons same height */
    .sp-k-field .k-input-action,
    .sp-k-field .k-button {
        /*height: var(--sp-k-field-height);
    min-height: var(--sp-k-field-height);
    padding:06px;*/
        display: inline-flex;
        align-items: center;
    }

/* Dark theme keeps same metrics */
:root[data-theme='dark'] .sp-k-field .k-input-inner,
:root[data-theme='dark'] .sp-k-field.k-numerictextbox .k-input-inner {
    height: var(--sp-k-field-height);
    min-height: var(--sp-k-field-height);
}

/* Dark mode: keep white text */
:root[data-theme='dark'] .sp-k-field,
:root[data-theme='dark'] .sp-k-field input,
:root[data-theme='dark'] .sp-k-field .k-input-inner,
:root[data-theme='dark'] .sp-k-field .k-input-value-text {
    color: #fff !important;
    caret-color: #fff;
}

    :root[data-theme='dark'] .sp-k-field .k-input-button,
    :root[data-theme='dark'] .sp-k-field .k-icon,
    :root[data-theme='dark'] .sp-k-field .k-clear-value {
        color: #fff !important;
        fill: #fff !important;
    }

/* Light mode: use app text color (black/dark) */
:root:not([data-theme='dark']) .sp-k-field,
:root:not([data-theme='dark']) .sp-k-field input,
:root:not([data-theme='dark']) .sp-k-field .k-input-inner,
:root:not([data-theme='dark']) .sp-k-field .k-input-value-text {
    color: var(--app-text) !important;
    caret-color: var(--app-text);
}

    :root:not([data-theme='dark']) .sp-k-field .k-input-button,
    :root:not([data-theme='dark']) .sp-k-field .k-icon,
    :root:not([data-theme='dark']) .sp-k-field .k-clear-value,
    :root:not([data-theme='dark']) .sp-k-field .k-spinner-increase,
    :root:not([data-theme='dark']) .sp-k-field .k-spinner-decrease {
        color: var(--app-text) !important;
        fill: var(--app-text) !important;
        opacity: 1; /* ensure not faded */
    }

/* Restrict transparent background to dark mode only */
:root[data-theme='dark'] .sp-k-field.k-input,
:root[data-theme='dark'] .sp-k-field .k-input-inner {
    background: transparent;
}

/* Override for dropdownlist to maintain field background in dark mode */
.sp-k-field.k-dropdownlist {
    background-color: var(--sp-field-bg) !important;
}

    .sp-k-field.k-dropdownlist .k-input-inner {
        background-color: var(--sp-field-bg) !important;
    }

/* Light mode: ensure the numeric box uses the configured field background */
:root:not([data-theme='dark']) .sp-k-field.k-input,
:root:not([data-theme='dark']) .sp-k-field .k-input-inner {
    background: var(--sp-field-bg);
    background-color: var(--app-bg);
}

/* Base text color application */
.k-input,
.k-input-inner,
.k-textbox,
.k-picker,
.k-autocomplete,
.k-numerictextbox,
.k-combobox,
.k-dropdownlist,
.k-multiselect,
.k-grid,
.k-button,
.k-dialog,
.k-window,
.k-tabstrip,
.k-toolbar,
.k-list,
.k-list-item,
.k-list-item-text {
    color: var(--sp-text-color);
    min-height: 40px !important;
}

/* Icons / actions / spinners */
.k-input-button,
.k-icon,
.k-clear-value,
.k-spinner-increase,
.k-spinner-decrease {
    color: var(--sp-text-color);
    fill: var(--sp-text-color);
}

/* Popup containers (AutoComplete, DropDown, etc.) */
.k-animation-container,
.k-animation-container .k-list,
.k-popup,
.k-popup .k-list {
    color: var(--sp-text-color);
    background: var(--sp-field-bg);
}

.k-list-item {
    color: var(--sp-text-color);
    background: var(--sp-field-bg);
}

    .k-list-item:hover {
        background: rgba(0,0,0,0.1);
    }

:root[data-theme='dark'] .k-animation-container,
:root[data-theme='dark'] .k-animation-container .k-list,
:root[data-theme='dark'] .k-popup,
:root[data-theme='dark'] .k-popup .k-list {
    background: var(--sp-field-bg) !important;
    color: var(--sp-text-color) !important;
}

:root[data-theme='dark'] .k-list-item {
    background: var(--sp-field-bg) !important;
    color: var(--sp-text-color) !important;
}

    :root[data-theme='dark'] .k-list-item:hover {
        background: rgba(255,255,255,0.1) !important;
    }

/* Placeholders (light vs dark) */
:root:not([data-theme='dark']) .k-input-inner::placeholder,
:root:not([data-theme='dark']) .k-input-inner input::placeholder {
    color: rgba(0,0,0,0.45);
}

:root[data-theme='dark'] .k-input-inner::placeholder,
:root[data-theme='dark'] .k-input-inner input::placeholder {
    color: rgba(255,255,255,0.60);
}

/* Dark-only explicit white when a Kendo rule overrides unexpectedly */
:root[data-theme='dark'] .sp-k-field .k-input-inner,
:root[data-theme='dark'] .sp-k-field .k-input-value-text {
    color: var(--sp-text-color) !important;
    caret-color: var(--sp-text-color);
}

/* Hide only in this specific field (alternative to Spinners="false") */
.sp-k-field .k-input-spinner {
    display: none;
}

/* OR (if keeping spinners) improve visibility in dark mode */
body.dark-mode .k-input-spinner .k-button {
    color: #e0e0e0;
}

    body.dark-mode .k-input-spinner .k-button:hover {
        background: rgba(255,255,255,0.08);
    }

    body.dark-mode .k-input-spinner .k-button .k-icon {
        color: #e0e0e0;
    }

/* Dark mode DatePicker calendar icon (specific + safe scope) */
:root[data-theme='dark'] .k-datepicker .k-input-suffix .k-input-button .k-button-icon.k-svg-icon.k-svg-i-calendar,
:root[data-theme='dark'] .k-datepicker .k-input-suffix .k-input-button .k-svg-icon.k-svg-i-calendar {
    color: var(--app-text-secondary) !important; /* or var(--app-text) / var(--app-primary) */
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: .9;
    transition: color .15s ease, opacity .15s ease;
}

/* Hover / focus accent */
:root[data-theme='dark'] .k-datepicker .k-input-suffix .k-input-button:hover .k-button-icon.k-svg-i-calendar,
:root[data-theme='dark'] .k-datepicker .k-input-suffix .k-input-button:focus .k-button-icon.k-svg-i-calendar {
    color: var(--app-primary) !important;
    opacity:1;
}

/* Optional: unify button background (remove stark white/contrast) */
:root[data-theme='dark'] .k-datepicker .k-input-suffix .k-input-button.k-button {
    background: transparent;
    border-color: transparent;
}

/* If Telerik sets an inline SVG fill attribute, force override */
:root[data-theme='dark'] .k-datepicker .k-input-suffix .k-input-button .k-button-icon.k-svg-i-calendar svg path {
    fill: currentColor !important;
}
/* Dark mode: make picker action buttons (calendar, clear, etc.) match field background */
:root[data-theme='dark'] .sp-k-field .k-input-button,
:root[data-theme='dark'] .sp-k-field .k-clear-value,
:root[data-theme='dark'] .sp-k-field .k-input-suffix .k-input-button.k-button {
    background-color: var(--sp-field-bg) !important; /* same as field */
    color: var(--sp-text-color-muted) !important;
    fill: currentColor !important;
    border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}

    /* Icon itself (extra specificity if theme forces white) */
    :root[data-theme='dark'] .sp-k-field .k-input-button .k-button-icon,
    :root[data-theme='dark'] .sp-k-field .k-input-button .k-svg-icon,
    :root[data-theme='dark'] .sp-k-field .k-input-button .k-svg-icon svg path {
        color: var(--sp-text-color-muted) !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    /* Hover / focus: slight accent */
    :root[data-theme='dark'] .sp-k-field .k-input-button:hover,
    :root[data-theme='dark'] .sp-k-field .k-input-button:focus,
    :root[data-theme='dark'] .sp-k-field .k-clear-value:hover,
    :root[data-theme='dark'] .sp-k-field .k-clear-value:focus {
        background-color: #45484d !important; /* subtle lift over --sp-field-bg (#3d3f44) */
        color: var(--app-text) !important;
    }

    /* Active (mouse down) */
    :root[data-theme='dark'] .sp-k-field .k-input-button:active {
        background-color: #4d5055 !important;
    }

    /* Remove any contrast/primary backgrounds some Kendo themes inject */
    :root[data-theme='dark'] .sp-k-field .k-input-button.k-button.k-button-solid,
    :root[data-theme='dark'] .sp-k-field .k-input-button.k-button.k-button-flat {
        background-image: none;
    }
/* ---- Telerik DropDownList height align to MudBlazor dense input ---- */
.sp-k-field.k-dropdownlist {
    height: var(--sp-k-field-height) !important;
    min-height: var(--sp-k-field-height) !important;
}

    .sp-k-field.k-dropdownlist .k-input-inner {
        height: var(--sp-k-field-height) !important;
        min-height: var(--sp-k-field-height) !important;
    }

/* ---- Telerik NumericTextBox height align ---- */
.sp-k-field.k-numerictextbox {
    height: var(--sp-k-field-height) !important;
    min-height: var(--sp-k-field-height) !important;
}

    .sp-k-field.k-numerictextbox .k-input-inner {
        height: var(--sp-k-field-height) !important;
        min-height: var(--sp-k-field-height) !important;
    }

/* ---- Telerik TextArea allow multi-row height ---- */
.sp-k-field.k-textarea {
    height: auto !important;
    min-height: calc(var(--sp-k-field-height) *6) !important; /* Approximate for6 rows */
}

    .sp-k-field.k-textarea .k-input-inner {
        height: auto !important;
        min-height: calc(var(--sp-k-field-height) *6) !important;
    }

/* Light mode: make picker action buttons (calendar, clear, etc.) match field background */
:root:not([data-theme='dark']) .sp-k-field .k-input-button,
:root:not([data-theme='dark']) .sp-k-field .k-clear-value,
:root:not([data-theme='dark']) .sp-k-field .k-input-suffix .k-input-button.k-button {
    background-color: var(--sp-field-bg) !important; /* same as field */
    color: var(--sp-text-color-muted) !important;
    fill: currentColor !important;
    border-left: 1px solid rgba(0,0,0,0.08);
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}

    /* Icon itself (extra specificity if theme forces white) */
    :root:not([data-theme='dark']) .sp-k-field .k-input-button .k-button-icon,
    :root:not([data-theme='dark']) .sp-k-field .k-input-button .k-svg-icon,
    :root:not([data-theme='dark']) .sp-k-field .k-input-button .k-svg-icon svg path {
        color: var(--sp-text-color-muted) !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    /* Hover / focus: slight accent */
    :root:not([data-theme='dark']) .sp-k-field .k-input-button:hover,
    :root:not([data-theme='dark']) .sp-k-field .k-input-button:focus,
    :root:not([data-theme='dark']) .sp-k-field .k-clear-value:hover,
    :root:not([data-theme='dark']) .sp-k-field .k-clear-value:focus {
        background-color: #e8e8e8 !important; /* subtle lift over --sp-field-bg (#f5f5f5) */
        color: var(--app-text) !important;
    }

    /* Active (mouse down) */
    :root:not([data-theme='dark']) .sp-k-field .k-input-button:active {
        background-color: #dedede !important;
    }

    /* Remove any contrast/primary backgrounds some Kendo themes inject */
    :root:not([data-theme='dark']) .sp-k-field .k-input-button.k-button.k-button-solid,
    :root:not([data-theme='dark']) .sp-k-field .k-input-button.k-button.k-button-flat {
        background-image: none;
    }

.required-empty {
    border-color: red !important;
    background-color: #ffe6e6 !important;
}

    .required-empty .k-input-inner {
        background-color: #ffe6e6 !important;
    }

/* Light mode: Dark button (dark background, white text) */
.grid-delete-button.k-button {
    background-color: #007482 !important; /* Dark teal background */
    color: #ffffff !important; /* White text */
    border-color: #007482 !important; /* Border */
}

/* Dark mode: Light button (light background, dark text) */
:root[data-theme='dark'] .grid-delete-button.k-button {
    background-color: #007482 !important;  /* Teal background */
    color: #ffffff !important;  /* White text */
    border-color: #007482 !important;  /* Border */
}

/* Optional: Hover states for better UX */
.grid-delete-button.k-button:hover {
    opacity:0.8;
}

:root[data-theme='dark'] .grid-delete-button.k-button:hover {
    opacity:0.8;
}

/* Telerik Grid theming for light and dark modes */
.k-grid {
    background-color: var(--sp-field-bg) !important;
    color: var(--app-text);
    /*border-color: var(--app-text-secondary);*/
}

.k-grid-header {
    background-color: var(--app-bg);
    color: var(--app-text);
    /*border-bottom-color: var(--app-text-secondary);*/
}

    .k-grid-header .k-header {
        background-color: var(--app-bg);
        color: var(--app-text);
        /*border-color: var(--app-text-secondary);*/
    }

.k-grid tbody tr {
    background-color: var(--sp-field-bg);
    color: var(--app-text);
    /*border-color: var(--app-text-secondary);*/
}

    .k-grid tbody tr:hover {
        background-color: rgba(0,0,0,0.1); /* Subtle hover for light mode */
    }

    .k-grid tbody tr.k-alt { /* If alternating rows are enabled */
        background-color: var(--app-surface);
    }

.k-grid .k-pager-wrap .k-grid-content { /* Pager styling (though Pageable="false" in your grid) */
    background-color: var(--sp-field-bg)!important;
    color: var(--app-text)!important;
    /*border-top-color: var(--app-text-secondary);*/
}

/* Dark mode overrides */
:root[data-theme='dark'] .k-grid tbody tr:hover {
    background-color: rgba(255,255,255,0.1); /* Subtle hover for dark mode */
}

:root[data-theme='dark'] .k-grid tbody tr.k-alt {
    background-color: var(--app-surface);
}

.k-grid-content {
    background-color: var(--app-bg)!important;
}

:root[data-theme='dark'] .k-grid-content {
    background-color: var(--app-bg)!important;
}

.k-animation-container, .k-animation-container .k-list, .k-popup, .k-popup .k-list {
    color: var(--sp-text-color);
    background-color: var(--app-bg)!important;
}

/* Telerik Grid toolbar and footer theming to match app theme (light and dark) */
.k-grid .k-grid-toolbar,
.k-grid .k-toolbar {
 background-color: var(--app-bg) !important;
 color: var(--app-text) !important;
 border-color: rgba(0,0,0,0.08);
}

:root[data-theme='dark'] .k-grid .k-grid-toolbar,
:root[data-theme='dark'] .k-grid .k-toolbar {
 background-color: var(--app-bg) !important;
 color: var(--app-text) !important;
 border-color: rgba(255,255,255,0.08) !important;
}

/* Column footer row + grid footer */
.k-grid tfoot,
.k-grid .k-grid-footer,
.k-grid .k-footer,
.k-grid .k-footer-template {
 background-color: var(--app-bg) !important;
 color: var(--app-text) !important;
}

:root[data-theme='dark'] .k-grid tfoot,
:root[data-theme='dark'] .k-grid .k-grid-footer,
:root[data-theme='dark'] .k-grid .k-footer,
:root[data-theme='dark'] .k-grid .k-footer-template {
 background-color: var(--app-bg) !important;
 color: var(--app-text) !important;
}

/* Pager bar backgrounds */
.k-grid .k-pager-wrap .k-pager {
    background-color: var(--app-bg) !important;
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .k-grid .k-pager-wrap .k-pager {
    background-color: var(--app-bg) !important;
    color: var(--app-text) !important;
}

/* Ensure Telerik Pager matches grid header background (handles k-pager vs k-pager-wrap) */
.k-grid .k-grid-pager,
.k-grid .k-pager,
.k-pager.k-grid-pager,
.k-pager {
 background-color: var(--app-bg) !important;
 color: var(--app-text) !important;
}

/* Make pager buttons blend with background */
.k-pager .k-button,
.k-grid .k-pager .k-button {
 background-color: transparent !important;
 color: var(--app-text) !important;
}

/* Dark mode keeps same variables so above rules suffice, but keep explicit block for safety */
:root[data-theme='dark'] .k-grid .k-grid-pager,
:root[data-theme='dark'] .k-grid .k-pager,
:root[data-theme='dark'] .k-pager.k-grid-pager,
:root[data-theme='dark'] .k-pager {
 background-color: var(--app-bg) !important;
 color: var(--app-text) !important;
}

/*  Telerik PanelBar theming (light and dark) - root vs child items, selected vs unselected */
/* root items */
.k-panelbar > .k-panelbar-header > .k-link {
    color: var(--app-text) !important;
    background: var(--app-bg) !important;
}
 /* root selected items */
    .k-panelbar > .k-panelbar-header > .k-link.k-selected {
        color: var(--app-text) !important;
        background: var(--app-bg) !important; /*#007482 !important;*/
    }

/* Ensure expanded panel headers maintain theme color */
.k-panelbar > .k-panelbar-header.k-expanded > .k-link,
.k-panelbar > .k-panelbar-item.k-expanded > .k-link {
    color: var(--app-text) !important;
    background: var(--app-bg) !important;
}

/* Also target the focus state to maintain color during interactions */
.k-panelbar > .k-panelbar-header > .k-link:focus,
.k-panelbar > .k-panelbar-header > .k-link.k-focus {
    color: var(--app-text) !important;
    background: var(--app-bg) !important;
}

/* PanelBar border styling - light gray borders in both modes */
.k-panelbar,
.k-panelbar > .k-panelbar-header,
.k-panelbar > .k-panelbar-item,
.k-panelbar .k-link {
    border-color: lightgrey !important;
}

/* Dark mode: light gray borders instead of white */
:root[data-theme='dark'] .k-panelbar,
:root[data-theme='dark'] .k-panelbar > .k-panelbar-header,
:root[data-theme='dark'] .k-panelbar > .k-panelbar-item,
:root[data-theme='dark'] .k-panelbar .k-link,
:root[data-theme='dark'] .k-panelbar .k-panelbar-header > .k-link,
:root[data-theme='dark'] .k-panelbar .k-panelbar-item > .k-link {
    border-color: lightgrey !important;
}

/* PanelBar content area borders */
.k-panelbar .k-panelbar-content {
    border-color: lightgrey !important;
}

:root[data-theme='dark'] .k-panelbar .k-panelbar-content {
    border-color: lightgrey !important;
    background: var(--app-bg) !important;
}

/* Remove any bright white borders from expanded items */
:root[data-theme='dark'] .k-panelbar > .k-panelbar-header.k-expanded,
:root[data-theme='dark'] .k-panelbar > .k-panelbar-item.k-expanded,
:root[data-theme='dark'] .k-panelbar > .k-panelbar-header.k-expanded > .k-link,
:root[data-theme='dark'] .k-panelbar > .k-panelbar-item.k-expanded > .k-link {
    border-color: lightgrey !important;
}

/* ---- Telerik DropDownList theming for light and dark modes ---- */
/* Light mode */
.k-dropdownlist,
.k-dropdownlist .k-input-inner,
.k-dropdownlist .k-input-value-text {
    background-color: var(--sp-field-bg) !important;
    color: var(--app-text) !important;
}

.k-dropdownlist .k-input-button,
.k-dropdownlist .k-select {
    background-color: var(--sp-field-bg) !important;
    color: var(--app-text) !important;
}

.k-dropdownlist .k-icon,
.k-dropdownlist .k-svg-icon {
    color: var(--app-text) !important;
    fill: var(--app-text) !important;
}

/* Dark mode */
:root[data-theme='dark'] .k-dropdownlist,
:root[data-theme='dark'] .k-dropdownlist .k-input-inner,
:root[data-theme='dark'] .k-dropdownlist .k-input-value-text {
    background-color: var(--sp-field-bg) !important;
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .k-dropdownlist .k-input-button,
:root[data-theme='dark'] .k-dropdownlist .k-select {
    background-color: var(--sp-field-bg) !important;
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .k-dropdownlist .k-icon,
:root[data-theme='dark'] .k-dropdownlist .k-svg-icon {
    color: var(--app-text) !important;
    fill: var(--app-text) !important;
}

/* DropDownList popup/list theming - Light mode */
.k-dropdownlist-popup,
.k-dropdownlist-popup .k-list,
.k-dropdownlist-popup .k-list-content,
.k-dropdownlist-popup .k-list-item,
.k-dropdownlist-popup .k-list-item-text {
    /*background-color: var(--app-bg) !important;*/
    color: var(--app-text) !important;
}

.k-dropdownlist-popup .k-list-item:hover,
.k-dropdownlist-popup .k-list-item.k-hover {
    /*background-color: rgba(0,0,0,0.06) !important;*/
    color: var(--app-text) !important;
}

.k-dropdownlist-popup .k-list-item.k-selected {
    background-color: rgba(0,0,0,0.1) !important;
    color: var(--app-text) !important;
}

.k-dropdownlist-popup .k-list-item.k-selected:hover {
    background-color: rgba(0,0,0,0.12) !important;
    color: var(--app-text) !important;
}

/* DropDownList popup/list theming - Dark mode */
:root[data-theme='dark'] .k-dropdownlist-popup,
:root[data-theme='dark'] .k-dropdownlist-popup .k-list,
:root[data-theme='dark'] .k-dropdownlist-popup .k-list-content,
:root[data-theme='dark'] .k-dropdownlist-popup .k-list-item,
:root[data-theme='dark'] .k-dropdownlist-popup .k-list-item-text {
    /*background-color: var(--app-bg) !important;*/
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .k-dropdownlist-popup .k-list-item:hover,
:root[data-theme='dark'] .k-dropdownlist-popup .k-list-item.k-hover {
    /*background-color: rgba(255,255,255,0.08) !important;*/
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .k-dropdownlist-popup .k-list-item.k-selected {
    /*background-color: rgba(255,255,255,0.12) !important;*/
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .k-dropdownlist-popup .k-list-item.k-selected:hover {
    /*background-color: rgba(255,255,255,0.15) !important;*/
    color: var(--app-text) !important;
}

/* Popup container background fix */
.k-animation-container:has(.k-dropdownlist-popup),
.k-popup:has(.k-list) {
    background-color: var(--app-bg) !important;
}

:root[data-theme='dark'] .k-animation-container:has(.k-dropdownlist-popup),
:root[data-theme='dark'] .k-popup:has(.k-list) {
    background-color: var(--app-bg) !important;
}

/* ---- Telerik icon-only button (sp-icon-btn) for light/dark mode ---- */
.sp-icon-btn.k-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--app-text) !important;
    padding: 4px;
    min-width: auto;
    min-height: auto !important;
}

.sp-icon-btn.k-button .k-button-icon,
.sp-icon-btn.k-button .k-svg-icon,
.sp-icon-btn.k-button .k-icon {
    color: var(--app-text) !important;
    fill: currentColor !important;
}

.sp-icon-btn.k-button .k-button-text {
    color: var(--app-text) !important;
}

.sp-icon-btn.k-button:hover {
    background: rgba(0,0,0,0.06) !important;
    color: var(--app-primary) !important;
}

.sp-icon-btn.k-button:hover .k-button-icon,
.sp-icon-btn.k-button:hover .k-svg-icon,
.sp-icon-btn.k-button:hover .k-icon,
.sp-icon-btn.k-button:hover .k-button-text {
    color: var(--app-primary) !important;
    fill: currentColor !important;
}

:root[data-theme='dark'] .sp-icon-btn.k-button {
    background: transparent !important;
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .sp-icon-btn.k-button .k-button-icon,
:root[data-theme='dark'] .sp-icon-btn.k-button .k-svg-icon,
:root[data-theme='dark'] .sp-icon-btn.k-button .k-icon {
    color: var(--app-text) !important;
    fill: currentColor !important;
}

:root[data-theme='dark'] .sp-icon-btn.k-button .k-button-text {
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .sp-icon-btn.k-button:hover {
    background: rgba(255,255,255,0.08) !important;
    color: var(--app-primary) !important;
}

:root[data-theme='dark'] .sp-icon-btn.k-button:hover .k-button-icon,
:root[data-theme='dark'] .sp-icon-btn.k-button:hover .k-svg-icon,
:root[data-theme='dark'] .sp-icon-btn.k-button:hover .k-icon,
:root[data-theme='dark'] .sp-icon-btn.k-button:hover .k-button-text {
    color: var(--app-primary) !important;
    fill: currentColor !important;
}

/* ---- Telerik Button (k-button) theming for light/dark mode ---- */
/* Colored Telerik buttons (primary, success, error, etc.) keep white text in both modes */
.k-button-solid-primary,
.k-button-solid-success,
.k-button-solid-error,
.k-button-solid-warning,
.k-button-solid-info,
.k-button-solid-secondary,
.k-button-solid-tertiary {
    color: #fff !important;
}

.k-button-solid-primary .k-button-text,
.k-button-solid-success .k-button-text,
.k-button-solid-error .k-button-text,
.k-button-solid-warning .k-button-text,
.k-button-solid-info .k-button-text,
.k-button-solid-secondary .k-button-text,
.k-button-solid-tertiary .k-button-text {
    color: #fff !important;
}

/* Base Telerik button - light mode: dark text on light background */
:root:not([data-theme='dark']) .k-button-solid-base {
    color: var(--app-text) !important;
}

:root:not([data-theme='dark']) .k-button-solid-base .k-button-text {
    color: var(--app-text) !important;
}

/* Base Telerik button - dark mode: light text on dark background */
:root[data-theme='dark'] .k-button-solid-base {
    background-color: #3d3f44 !important;
    border-color: #555 !important;
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .k-button-solid-base .k-button-text {
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .k-button-solid-base .k-button-icon,
:root[data-theme='dark'] .k-button-solid-base .k-svg-icon {
    color: var(--app-text) !important;
    fill: currentColor !important;
}

:root[data-theme='dark'] .k-button-solid-base:hover {
    background-color: #4a4c52 !important;
}

/* Telerik colored buttons in dark mode - ensure white text on themed backgrounds */
:root[data-theme='dark'] .k-button-solid-primary,
:root[data-theme='dark'] .k-button-solid-success,
:root[data-theme='dark'] .k-button-solid-error,
:root[data-theme='dark'] .k-button-solid-warning,
:root[data-theme='dark'] .k-button-solid-info,
:root[data-theme='dark'] .k-button-solid-secondary,
:root[data-theme='dark'] .k-button-solid-tertiary {
    color: #fff !important;
}

:root[data-theme='dark'] .k-button-solid-primary .k-button-text,
:root[data-theme='dark'] .k-button-solid-success .k-button-text,
:root[data-theme='dark'] .k-button-solid-error .k-button-text,
:root[data-theme='dark'] .k-button-solid-warning .k-button-text,
:root[data-theme='dark'] .k-button-solid-info .k-button-text,
:root[data-theme='dark'] .k-button-solid-secondary .k-button-text,
:root[data-theme='dark'] .k-button-solid-tertiary .k-button-text {
    color: #fff !important;
}

:root[data-theme='dark'] .k-button-solid-primary .k-button-icon,
:root[data-theme='dark'] .k-button-solid-success .k-button-icon,
:root[data-theme='dark'] .k-button-solid-error .k-button-icon,
:root[data-theme='dark'] .k-button-solid-primary .k-svg-icon,
:root[data-theme='dark'] .k-button-solid-success .k-svg-icon,
:root[data-theme='dark'] .k-button-solid-error .k-svg-icon {
    color: #fff !important;
    fill: currentColor !important;
}

/* ---- Telerik CheckBox: make "Large" size visually bigger ---- */
/* Adjust --sp-checkbox-lg-size to taste (default Kendo large is ~24px) */
:root {
    --sp-checkbox-lg-size: 30px;
}

.k-checkbox-lg,
.k-checkbox.k-checkbox-lg {
    width: var(--sp-checkbox-lg-size) !important;
    height: var(--sp-checkbox-lg-size) !important;
    min-width: var(--sp-checkbox-lg-size) !important;
    min-height: var(--sp-checkbox-lg-size) !important;
}

/* Ensure the checkmark SVG icon scales with the larger box */
.k-checkbox-lg + .k-checkbox-label::before,
.k-checkbox.k-checkbox-lg::before {
    font-size: calc(var(--sp-checkbox-lg-size) - 6px);
}

/* Override the blanket min-height: 40px rule that may apply to .k-checkbox */
.k-checkbox {
    min-height: auto !important;
}

/* ---- Accountability page header bar ---- */
.acct-header-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 16px;
    width: 100%;
}

.acct-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.acct-header-user {
    color: var(--app-text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.acct-header-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.acct-header-badge--warn {
    background-color: #fff3cd;
    color: #7a4f00;
    border: 1px solid #f5c842;
}

:root[data-theme='dark'] .acct-header-badge--warn {
    background-color: #3a2e00;
    color: #ffd966;
    border-color: #8a6d00;
}

.acct-header-badge--info {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

:root[data-theme='dark'] .acct-header-badge--info {
    background-color: #1e3058;
    color: #93c5fd;
    border-color: #3b5a9a;
}

.acct-header-right {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 4px;
}

/* ---- Accountability summary tiles (TelerikCard layout) ---- */
.acct-tiles-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding-bottom: 16px;
}

/* Anchor wrappers inside the tile row must stretch to fill the grid cell */
.acct-tiles-row > a {
    display: flex;
    flex-direction: column;
}

.acct-tiles-row > a > .acct-tile,
.acct-tiles-row > .acct-tile {
    flex: 1;
    height: 100%;
}

.acct-tile {
    min-height: 285px;
    min-width: 0;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
    border-top: 4px solid var(--app-primary) !important;
    background-color: var(--app-surface) !important;
    transition: box-shadow .2s ease;
}

    .acct-tile:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.16) !important;
    }

.acct-tile-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-secondary) !important;
}

.acct-tile-value {
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.1rem);
    font-weight: 800;
    color: var(--app-primary);
    line-height: 1.1;
    padding: 4px 0 2px;
    word-break: break-word;
}

.opp-tile-value {
    font-size: clamp(2.4rem, 4vw + 0.5rem, 3.5rem);
    font-weight: 800;
    color: var(--app-primary);
    line-height: 1.1;
    padding: 8px 0 4px;
    word-break: break-word;
    text-align: center;
    width: 100%;
}

.acct-tile-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 2px;
}

.acct-tile-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.acct-tile-stat-label {
    font-size: 0.78rem;
    color: var(--app-text-secondary);
    white-space: nowrap;
}

.acct-tile-stat-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--app-primary);
    white-space: nowrap;
}

/* Dark mode card surface */
:root[data-theme='dark'] .acct-tile {
    background-color: var(--app-surface) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}

    :root[data-theme='dark'] .acct-tile:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.50) !important;
    }

/* ---- Accountability filter bar ---- */
.acct-filter-bar {
    padding-bottom: 16px;
}

.acct-filter-card {
    border-radius: 8px !important;
    border-top: 3px solid var(--app-primary) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    background-color: var(--app-surface) !important;
}

:root[data-theme='dark'] .acct-filter-card {
    background-color: var(--app-surface) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.30) !important;
}

.acct-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.acct-filter-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 130px;
    min-width: 130px;
    max-width: 220px;
}

.acct-filter-field--wide {
    flex: 1 1 170px;
    min-width: 170px;
    max-width: 280px;
}

@media (max-width: 768px) {
    .acct-filter-field,
    .acct-filter-field--wide {
        flex: 1 1 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }
}

@media (max-width: 480px) {
    .acct-filter-field,
    .acct-filter-field--wide {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.acct-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-text-secondary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acct-filter-action {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.acct-filter-reset-btn {
    white-space: nowrap;
}

/* ---- Accountability grid card ---- */
.acct-grid-section {
    padding-bottom: 16px;
}

.acct-grid-card {
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
    border-top: 4px solid var(--app-primary) !important;
    background-color: var(--app-surface) !important;
}

.acct-grid-card-body {
    padding: 0 !important;
}

:root[data-theme='dark'] .acct-grid-card {
    background-color: var(--app-surface) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}

/* ---- Accountability assignments grid: header + cell theming ---- */
/* Scope via the wrapper div.acct-assignments-grid so other grids are unaffected.
   Target td/th (not tbody tr) to stay safe with ColumnVirtualization.
   Both locked (.k-grid-header-locked / .k-grid-content-locked) and
   non-locked (.k-grid-header-wrap / .k-grid-content) areas are covered.      */

/* ?? Header: light gray + bold ?? */
.acct-assignments-grid .k-grid-header-wrap th,
.acct-assignments-grid .k-grid-header-locked th {
    background-color: #f5f5f5 !important;
    font-weight: 700 !important;
    color: var(--app-text) !important;
}

/* Header text nodes (column-title span, cell-inner, custom wrap-header span) */
.acct-assignments-grid .k-grid-header-wrap .k-column-title,
.acct-assignments-grid .k-grid-header-wrap .k-cell-inner,
.acct-assignments-grid .k-grid-header-wrap .wrap-header,
.acct-assignments-grid .k-grid-header-locked .k-column-title,
.acct-assignments-grid .k-grid-header-locked .k-cell-inner,
.acct-assignments-grid .k-grid-header-locked .wrap-header {
    font-weight: 700 !important;
    color: var(--app-text) !important;
}

/* ?? Data cells: solid white, no alternating rows ?? */
.acct-assignments-grid .k-grid-content td,
.acct-assignments-grid .k-grid-content-locked td {
    background-color: #ffffff !important;
    color: var(--app-text) !important;
}

/* Override Telerik's alternating row tint on cells */
.acct-assignments-grid .k-grid-content tr.k-alt td,
.acct-assignments-grid .k-grid-content-locked tr.k-alt td {
    background-color: #ffffff !important;
}

/* Hover: subtle blue tint on both locked + non-locked cells in the same row */
.acct-assignments-grid .k-grid-content tr:hover td,
.acct-assignments-grid .k-grid-content-locked tr:hover td {
    background-color: #f0f4ff !important;
}

/* ?? Footer: match header gray + bold ?? */
.acct-assignments-grid .k-grid-footer-wrap td,
.acct-assignments-grid .k-grid-footer-locked td {
    background-color: #f0f2f5 !important;
    font-weight: 700 !important;
    color: var(--app-text) !important;
}

/* ?? Dark mode ?? */
:root[data-theme='dark'] .acct-assignments-grid .k-grid-header-wrap th,
:root[data-theme='dark'] .acct-assignments-grid .k-grid-header-locked th {
    background-color: #2a2d35 !important;
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .acct-assignments-grid .k-grid-header-wrap .k-column-title,
:root[data-theme='dark'] .acct-assignments-grid .k-grid-header-wrap .k-cell-inner,
:root[data-theme='dark'] .acct-assignments-grid .k-grid-header-wrap .wrap-header,
:root[data-theme='dark'] .acct-assignments-grid .k-grid-header-locked .k-column-title,
:root[data-theme='dark'] .acct-assignments-grid .k-grid-header-locked .k-cell-inner,
:root[data-theme='dark'] .acct-assignments-grid .k-grid-header-locked .wrap-header {
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .acct-assignments-grid .k-grid-content td,
:root[data-theme='dark'] .acct-assignments-grid .k-grid-content-locked td {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .acct-assignments-grid .k-grid-content tr.k-alt td,
:root[data-theme='dark'] .acct-assignments-grid .k-grid-content-locked tr.k-alt td {
    background-color: var(--app-surface) !important;
}

:root[data-theme='dark'] .acct-assignments-grid .k-grid-content tr:hover td,
:root[data-theme='dark'] .acct-assignments-grid .k-grid-content-locked tr:hover td {
    background-color: rgba(255,255,255,0.06) !important;
}

:root[data-theme='dark'] .acct-assignments-grid .k-grid-footer-wrap td,
:root[data-theme='dark'] .acct-assignments-grid .k-grid-footer-locked td {
    background-color: #2a2d35 !important;
    color: var(--app-text) !important;
}

/* ---- Drawer header branding ---- */
.sp-drawer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: var(--app-primary);
}

:root[data-theme='dark'] .sp-drawer-header {
    background: #0f1a2e;
    border-bottom-color: rgba(255,255,255,0.08);
}

.sp-drawer-logo-icon {
    color: #fff !important;
    font-size: 1.6rem !important;
    opacity: 0.92;
}

.sp-drawer-title {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    font-size: 1.05rem !important;
}

/* ---- Nav menu base ---- */
.sp-navmenu {
    padding: 6px 0;
}

/* Section label dividers */
.sp-nav-section-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--app-text-secondary);
    padding: 14px 20px 4px;
    opacity: 0.7;
}

/* Nav link base */
.sp-navmenu a.mud-nav-link {
    border-radius: 6px;
    margin: 1px 8px;
    padding: 7px 12px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--app-text) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    position: relative;
}

/* Nav link icon color */
.sp-navmenu a.mud-nav-link .mud-nav-link-icon {
    color: var(--app-text-secondary) !important;
    opacity: 0.85;
    transition: color 0.15s ease;
}

/* Hover state */
.sp-navmenu a.mud-nav-link:hover {
    background-color: rgba(30, 58, 138, 0.08) !important;
    color: var(--app-primary) !important;
}

.sp-navmenu a.mud-nav-link:hover .mud-nav-link-icon {
    color: var(--app-primary) !important;
    opacity: 1;
}

/* Active / current page */
.sp-navmenu a.mud-nav-link.active {
    background-color: rgba(30, 58, 138, 0.12) !important;
    color: var(--app-primary) !important;
    font-weight: 700;
}

.sp-navmenu a.mud-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--app-primary);
}

.sp-navmenu a.mud-nav-link.active .mud-nav-link-icon {
    color: var(--app-primary) !important;
    opacity: 1;
}

/* Dark mode nav link adjustments */
:root[data-theme='dark'] .sp-navmenu a.mud-nav-link {
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .sp-navmenu a.mud-nav-link:hover {
    background-color: rgba(100, 130, 220, 0.12) !important;
    color: #93b4ff !important;
}

:root[data-theme='dark'] .sp-navmenu a.mud-nav-link:hover .mud-nav-link-icon {
    color: #93b4ff !important;
}

:root[data-theme='dark'] .sp-navmenu a.mud-nav-link.active {
    background-color: rgba(100, 130, 220, 0.18) !important;
    color: #93b4ff !important;
}

:root[data-theme='dark'] .sp-navmenu a.mud-nav-link.active::before {
    background-color: #93b4ff;
}

:root[data-theme='dark'] .sp-navmenu a.mud-nav-link.active .mud-nav-link-icon {
    color: #93b4ff !important;
}

/* ---- App footer (plain, no card) ---- */
.app-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.app-footer-language {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 6px;
}

.app-footer-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--app-text-secondary);
    white-space: nowrap;
}

.app-footer-divider {
    width: 200px;
    border-top: 1px solid var(--app-text-secondary);
    opacity: 0.25;
    margin-bottom: 6px;
}

.app-footer-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 0.72rem;
    color: var(--app-text-secondary);
    text-align: center;
}

/* ---- Performance-to-Plan tables (Accountability_New) ---- */
.perf-table-wrap {
    border-radius: 8px;
    overflow: hidden;
}

.perf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    color: var(--app-text);
}

.perf-table thead tr th {
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(128, 128, 128, 0.25);
    font-weight: 600;
    text-align: center;
    color: var(--app-text);
}

/* Column background tints — light mode */
.perf-col-prev {
    background-color: var(--app-surface);
    color: var(--app-text);
    text-align: center;
}

.perf-col-curr {
    background-color: #e2efda;
    color: #1a3a0a;
    text-align: center;
}

.perf-col-plan {
    background-color: #dde8f0;
    color: #0a2040;
    text-align: center;
}

.perf-col-diff {
    background-color: var(--app-surface);
    color: var(--app-text);
    text-align: center;
}

/* Column background tints — dark mode */
:root[data-theme='dark'] .perf-col-prev,
:root[data-theme='dark'] .perf-col-diff {
    background-color: var(--app-surface);
    color: var(--app-text);
}

:root[data-theme='dark'] .perf-col-curr {
    background-color: #1e3a1a;
    color: #c6e8b0;
}

:root[data-theme='dark'] .perf-col-plan {
    background-color: #182840;
    color: #9dc4e8;
}

/* Label rows (row headers like "Previous LRMAC $") */
.perf-lbl-row td {
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(128, 128, 128, 0.25);
    font-weight: 500;
    font-size: 0.78rem;
    color: var(--app-text-secondary);
}

/* Value rows (the bold numbers) */
.perf-val-row td {
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(128, 128, 128, 0.25);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--app-text);
}

/* Negative difference indicator */
.perf-neg {
    color: #c00 !important;
}

:root[data-theme='dark'] .perf-neg {
    color: #ff6b6b !important;
}

/* ---- Dashboard shared styles (Dashboard.razor, Advanced_Dashboard.razor) ---- */

/* Flex row containers — use !important so Kendo/Mud rules cannot override display */
.dash-cards-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    align-items: stretch;
}

.dash-cards-row-3 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    align-items: stretch;
}

/* Target every direct child (> *) so TelerikCard wrappers are caught too */
.dash-cards-row > *,
.dash-cards-row > .acct-grid-card {
    flex: 1 1 400px;
    min-width: 300px;
    max-width: 100%;
    box-sizing: border-box;
}

.dash-cards-row-3 > *,
.dash-cards-row-3 > .acct-grid-card {
    flex: 1 1 340px;
    min-width: 280px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure text inside cards follows the active theme (overrides Kendo card defaults) */
.dash-cards-row .acct-grid-card,
.dash-cards-row .acct-grid-card .k-card-body,
.dash-cards-row-3 .acct-grid-card,
.dash-cards-row-3 .acct-grid-card .k-card-body {
    color: var(--app-text) !important;
}

:root[data-theme='dark'] .dash-cards-row .acct-grid-card,
:root[data-theme='dark'] .dash-cards-row .acct-grid-card .k-card-body,
:root[data-theme='dark'] .dash-cards-row-3 .acct-grid-card,
:root[data-theme='dark'] .dash-cards-row-3 .acct-grid-card .k-card-body {
    color: var(--app-text) !important;
    background-color: var(--app-surface) !important;
}

.dash-accent {
    color: var(--app-primary) !important;
}

.dash-danger {
    color: #dc2626 !important;
}

:root[data-theme='dark'] .dash-danger {
    color: #ff6b6b !important;
}

.dash-stat-table {
    width: 100%;
    border-collapse: collapse;
}

.dash-stat-table td {
    padding: 1px 4px;
    line-height: 1.2;
}

/* Tighten MudText margins inside stat tables; inherit color from card context */
.dash-stat-table .mud-typography {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.3;
    color: inherit;
}

.dash-stat-table .text-right {
    text-align: right;
}

.dash-cards-row .acct-grid-card .k-card-body,
.dash-cards-row-3 .acct-grid-card .k-card-body {
    padding: 12px 16px !important;
}

.dash-cards-row .portal-section-title,
.dash-cards-row-3 .portal-section-title {
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
    color: var(--app-text) !important;
}

/* Dashboard navigation button — font weight only; colour comes from MudButton Color.Primary */
.dash-nav-btn {
    font-weight: 600 !important;
}

/* Dark mode: override any remaining hardcoded inline colors inside stat tables */
:root[data-theme='dark'] .dash-stat-table *[style*="color:#007482"],
:root[data-theme='dark'] .dash-stat-table *[style*="color: #007482"] {
    color: var(--app-primary) !important;
}

:root[data-theme='dark'] .dash-stat-table *[style*="color:red"],
:root[data-theme='dark'] .dash-stat-table *[style*="color: red"] {
    color: #ff6b6b !important;
}

/* ---- Reporting page styles ---- */
.rpt-link-click {
    color: var(--app-primary);
    cursor: pointer;
}

.rpt-link-click:hover {
    text-decoration: underline;
}

.pastDueRowFormatting {
    color: #dc2626;
}

:root[data-theme='dark'] .pastDueRowFormatting {
    color: #ff6b6b;
}

.nearingPastdueRowFormatting {
    color: #d97706;
}

:root[data-theme='dark'] .nearingPastdueRowFormatting {
    color: #fbbf24;
}

.locationFormatting,
.notificationsFormatting {
    color: var(--app-primary);
    font-weight: 600;
}

/* Accountability grid — highlighted columns (light yellow background) */
.acct-col-highlight,
.acct-col-highlight.k-header {
    background-color: #ffffcc !important;
}