/**
 * Living Theme System — clean, premium, enterprise-friendly.
 * Scoped under html[data-living-active="1"] so it never affects pages that don't opt-in.
 *
 * Design principles applied:
 * - Solid surfaces (no transparency / backdrop-blur) so the UI never looks patchy.
 * - Cyan/gold accents are reserved for icons, active states, and small highlights.
 * - Sunset = warm cream/peach (light, not dark) per reference screenshot.
 * - Sidebars/headers/tables stay neutral; tables remain highly readable.
 * - Transitions are short (≈400ms) and limited to color/border/shadow.
 */

/* ---------------------------------------------------------
 * Smooth transitions (kept short, no heavy glow animations)
 * --------------------------------------------------------- */
html[data-living-active="1"] body,
html[data-living-active="1"] body .main-header,
html[data-living-active="1"] body .left-sidebar,
html[data-living-active="1"] body .setting_sidebar,
html[data-living-active="1"] body .right_side,
html[data-living-active="1"] body .widget_section,
html[data-living-active="1"] body .sub_header,
html[data-living-active="1"] body .form-control,
html[data-living-active="1"] body .form-select,
html[data-living-active="1"] body .e-grid,
html[data-living-active="1"] body .e-gridheader,
html[data-living-active="1"] body .e-rowcell,
html[data-living-active="1"] body .e-headercell,
html[data-living-active="1"] body .card,
html[data-living-active="1"] body .modal-content,
html[data-living-active="1"] body .table {
  transition:
    background-color 400ms ease,
    color 400ms ease,
    border-color 400ms ease,
    box-shadow 400ms ease;
}

/* ---------------------------------------------------------
 * Theme tokens (default = Day)
 * Time-of-day journey:
 *   Morning  → soft sunrise (peach / rose / warm cream)
 *   Day      → clean bright daylight (cool airy whites)
 *   Dusk     → warm sunset (orange / peach / rose / amber)
 *   Night    → calm dark midnight (deep navy / moonlit indigo)
 * Adjacent themes were chosen so the JS lerp in living-theme.js
 * produces a natural in-between hue during the 1-hour blend
 * windows (late-day = day→dusk, evening = dusk→night, etc.).
 * --gradient-* tokens drive subtle ambient gradients on body /
 * header / sidebar / right_side so the mood reads instantly.
 * --------------------------------------------------------- */
html[data-living-active="1"] {
  --lt-app-bg: #f3f8ff;
  --lt-surface: #ffffff;
  --lt-surface-soft: #f5f9fe;
  --lt-sidebar-bg: #e8f0fb;
  --lt-header-bg: #ffffff;
  --lt-table-header-bg: #eaf2fc;
  --lt-table-row-alt: #fafcff;
  --lt-text: #1c2735;
  --lt-text-muted: #6b7785;
  --lt-accent: #38a6c9;
  --lt-accent-strong: #1f88a7;
  --lt-accent-soft: rgba(56, 166, 201, 0.12);
  --lt-border: #d8e3f0;
  --lt-shadow-sm: 0 1px 2px rgba(20, 60, 100, 0.05);
  --lt-shadow-md: 0 4px 14px rgba(20, 60, 100, 0.07);
  --lt-switch-track: #cfdbe8;
  --lt-radius: 12px;
  /* Gradient stops used for ambient backgrounds (top → bottom).
     `glow` is a warm/cool wash that bleeds into the sidebar edge. */
  --lt-grad-top: #fbfdff;
  --lt-grad-bot: #eaf3fc;
  --lt-grad-glow: rgba(56, 166, 201, 0.06);
  /* Time-of-day ambient color — used for decorative dividers
     (user-profile underline) and the floating gear button so
     each part of the day has its own visible signature. */
  --lt-time-accent: #38a6c9;
  --lt-time-accent-strong: #1f88a7;
}

/* Morning — soft sunrise: pale peach, rose-cream, warm sunlight slipping in */
html[data-living-active="1"][data-theme="morning"] {
  --lt-app-bg: #fff3e8;
  --lt-surface: #fffaf4;
  --lt-surface-soft: #fff0e3;
  --lt-sidebar-bg: #ffe7d2;
  --lt-header-bg: #fff4e8;
  --lt-table-header-bg: #ffe1c8;
  --lt-table-row-alt: #fff7ec;
  --lt-text: #2d2128;
  --lt-text-muted: #7d6c64;
  --lt-accent: #ee8a6c;
  --lt-accent-strong: #d36c4e;
  --lt-accent-soft: rgba(238, 138, 108, 0.14);
  --lt-border: #f1d4b8;
  --lt-shadow-sm: 0 1px 2px rgba(180, 110, 70, 0.06);
  --lt-shadow-md: 0 4px 16px rgba(180, 110, 70, 0.10);
  --lt-switch-track: #ecd0b8;
  /* Sunrise wash: pink dawn at top fading into warm cream */
  --lt-grad-top: #ffe1cf;
  --lt-grad-bot: #fff6ec;
  --lt-grad-glow: rgba(244, 163, 130, 0.16);
  --lt-time-accent: #f4a382;
  --lt-time-accent-strong: #d36c4e;
}

/* Day — clean bright daylight: airy whites with a touch of clear-sky cool */
html[data-living-active="1"][data-theme="day"] {
  --lt-app-bg: #f3f8ff;
  --lt-surface: #ffffff;
  --lt-surface-soft: #f5f9fe;
  --lt-sidebar-bg: #e8f0fb;
  --lt-header-bg: #ffffff;
  --lt-table-header-bg: #eaf2fc;
  --lt-table-row-alt: #fafcff;
  --lt-text: #1c2735;
  --lt-text-muted: #6b7785;
  --lt-accent: #38a6c9;
  --lt-accent-strong: #1f88a7;
  --lt-accent-soft: rgba(56, 166, 201, 0.12);
  --lt-border: #d8e3f0;
  --lt-shadow-sm: 0 1px 2px rgba(20, 60, 100, 0.05);
  --lt-shadow-md: 0 4px 14px rgba(20, 60, 100, 0.07);
  --lt-switch-track: #cfdbe8;
  /* Open-sky wash: high-noon white fading toward soft horizon blue */
  --lt-grad-top: #ffffff;
  --lt-grad-bot: #eaf3fc;
  --lt-grad-glow: rgba(56, 166, 201, 0.08);
  --lt-time-accent: #38a6c9;
  --lt-time-accent-strong: #1f88a7;
}

/* Dusk — warm sunset: orange, peach, rose, amber glow */
html[data-living-active="1"][data-theme="dusk"] {
  --lt-app-bg: #fff0e0;
  --lt-surface: #fff7ed;
  --lt-surface-soft: #ffe8d1;
  --lt-sidebar-bg: #ffdec0;
  --lt-header-bg: #fff3e3;
  --lt-table-header-bg: #ffd9b3;
  --lt-table-row-alt: #fff1df;
  --lt-text: #3a2418;
  --lt-text-muted: #7d5a48;
  --lt-accent: #f48648;
  --lt-accent-strong: #d8602a;
  --lt-accent-soft: rgba(244, 134, 72, 0.18);
  --lt-border: #f0c9a3;
  --lt-shadow-sm: 0 1px 2px rgba(160, 80, 30, 0.07);
  --lt-shadow-md: 0 4px 18px rgba(160, 80, 30, 0.11);
  --lt-switch-track: #ecc6a3;
  /* Sunset gradient: glowing peach at top sinking into rose-amber */
  --lt-grad-top: #ffd6b3;
  --lt-grad-bot: #ffb78a;
  --lt-grad-glow: rgba(244, 134, 72, 0.22);
  --lt-time-accent: #f48648;
  --lt-time-accent-strong: #d8602a;
}

/* Night — calm dark midnight: deep navy with a moonlit indigo lift */
html[data-living-active="1"][data-theme="night"] {
  --lt-app-bg: #0d1424;
  --lt-surface: #131c30;
  --lt-surface-soft: #18233a;
  --lt-sidebar-bg: #0e1626;
  --lt-header-bg: #131c30;
  --lt-table-header-bg: #1a253e;
  --lt-table-row-alt: #15203a;
  --lt-text: #dde8f3;
  --lt-text-muted: #8d9bb0;
  --lt-accent: #6b8fd0;
  --lt-accent-strong: #5275bc;
  --lt-accent-soft: rgba(107, 143, 208, 0.18);
  --lt-border: rgba(255, 255, 255, 0.08);
  --lt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --lt-shadow-md: 0 6px 22px rgba(0, 0, 0, 0.45);
  --lt-switch-track: rgba(255, 255, 255, 0.20);
  /* Midnight gradient: indigo glow above settling into deep navy floor */
  --lt-grad-top: #182542;
  --lt-grad-bot: #0a1120;
  --lt-grad-glow: rgba(107, 143, 208, 0.14);
  --lt-time-accent: #6b8fd0;
  --lt-time-accent-strong: #5275bc;
}

/* Alias legacy ERP typography vars (--heading-color / --primary-color from
   style.css) to the active theme's text tokens. This keeps every h1–h6
   that reads `color: var(--heading-color)` in lockstep with the time-of-day
   palette automatically — morning / day / dusk / night each set --lt-text
   to their own hue, and --heading-color resolves through the cascade.
   It also means that as soon as html[data-living-active="1"] is on the
   page (set inline in <head> by the layout, before first paint) the
   correct heading colour is in effect — no legacy navy-blue flash on
   refresh, and the value updates instantly whenever the theme changes. */
html[data-living-active="1"] {
  --heading-color: var(--lt-text);
  --primary-color: var(--lt-text-muted);
}

/* ---------------------------------------------------------
 * Shell — body / header / sidebar / iframe host
 * --------------------------------------------------------- */
html[data-living-active="1"] body {
  background-color: var(--lt-blend-bg, var(--lt-app-bg));
  background-image:
    radial-gradient(120% 80% at 0% 0%, var(--lt-grad-glow), transparent 60%),
    linear-gradient(180deg, var(--lt-grad-top) 0%, var(--lt-blend-bg, var(--lt-app-bg)) 55%, var(--lt-grad-bot) 100%);
  background-attachment: fixed;
  color: var(--lt-blend-text, var(--lt-text));
  transition:
    background-color 600ms ease,
    color 600ms ease;
}

html[data-living-active="1"] body .main-header {
  background-color: var(--lt-blend-header, var(--lt-header-bg));
  background-image: linear-gradient(
    90deg,
    var(--lt-blend-sidebar, var(--lt-sidebar-bg)) 0%,
    var(--lt-blend-header, var(--lt-header-bg)) 45%,
    var(--lt-blend-header, var(--lt-header-bg)) 100%
  );
  border-bottom: 1px solid var(--lt-border);
  box-shadow: var(--lt-shadow-sm);
}

html[data-living-active="1"] body .main-header .menu-toggle .toggler-icon span {
  background-color: var(--lt-text);
  opacity: 0.85;
}

html[data-living-active="1"] body .right-header .navbar-nav li a .fa-expand-arrows-alt,
html[data-living-active="1"] body .right-header .navbar-nav li a .fa-cog,
html[data-living-active="1"] body .right-header .navbar-nav li a .fa-bell {
  color: var(--lt-accent);
}

html[data-living-active="1"] body .left-sidebar {
  background-color: var(--lt-blend-sidebar, var(--lt-sidebar-bg));
  background-image: linear-gradient(
    180deg,
    var(--lt-blend-sidebar, var(--lt-sidebar-bg)) 0%,
    var(--lt-blend-bg, var(--lt-app-bg)) 100%
  );
  border-right: 1px solid var(--lt-border);
  box-shadow: none;
}

html[data-living-active="1"] body .left-sidebar .righimg h6,
html[data-living-active="1"] body .left-sidebar ul li,
html[data-living-active="1"] body .left-sidebar ul li a,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item .e-list-text,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item .e-list-text a {
  color: var(--lt-text);
}

html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-active > .e-text-content .e-list-text,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-active > .e-text-content .e-list-text a {
  color: var(--lt-accent);
}

html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-active > .e-fullrow,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-hover > .e-fullrow {
  background-color: var(--lt-accent-soft);
  border-color: transparent;
}

html[data-living-active="1"] body .sidebar-search .form-control {
  background-color: var(--lt-surface-soft);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body #right-widget.right-sidewidget,
html[data-living-active="1"] body .right-sidewidget {
  background-color: transparent;
}

/* ---------------------------------------------------------
 * ERP content surfaces (used inside iframe via syncIframe)
 * --------------------------------------------------------- */
html[data-living-active="1"] body .right_side {
  background-color: var(--lt-blend-bg, var(--lt-app-bg));
  background-image:
    radial-gradient(140% 90% at 100% 0%, var(--lt-grad-glow), transparent 65%),
    linear-gradient(180deg, var(--lt-grad-top) 0%, var(--lt-blend-bg, var(--lt-app-bg)) 60%, var(--lt-grad-bot) 100%);
  color: var(--lt-blend-text, var(--lt-text));
}

html[data-living-active="1"] body .sub_header .header_heading h1,
html[data-living-active="1"] body .sub_header .header_heading h2,
html[data-living-active="1"] body .sub_header .header_heading h3,
html[data-living-active="1"] body .sub_header .header_heading h4,
html[data-living-active="1"] body .sub_header .header_heading h5,
html[data-living-active="1"] body .sub_header .header_heading h6 {
  color: var(--lt-text);
}

html[data-living-active="1"] body .sub_header .header_heading p,
html[data-living-active="1"] body .sub_header .header_heading small,
html[data-living-active="1"] body .sub_header .header_heading .subtitle,
html[data-living-active="1"] body .sub_header .header_heading .text-muted {
  color: var(--lt-text-muted);
}

/* Section divider under page headings — replaces the legacy
   white→gray gradient so the bar follows the active theme. The
   1px top edge picks up the time-of-day signature (same colour as
   the user-profile underline and gear button), and the soft fade
   below uses --lt-accent-soft so it stays readable on every
   background (light cream, deep blue, etc.) while still feeling
   like a gentle drop-shadow into the surface. */
html[data-living-active="1"] body .divider {
  background-image: linear-gradient(
    180deg,
    var(--lt-grad-glow, var(--lt-accent-soft)) 0%,
    var(--lt-accent-soft) 35%,
    transparent 100%
  );
  border-top: 1px solid var(--lt-blend-time-accent, var(--lt-time-accent));
  border-bottom: none;
  transition:
    border-color 400ms ease,
    background-image 400ms ease;
}

html[data-living-active="1"] body .widget_section .form-wrapper {
  border-color: var(--lt-border);
  background-color: transparent;
}

html[data-living-active="1"] body .widget_section .form-wrapper legend,
html[data-living-active="1"] body .widget_section .form-wrapper .form-label,
html[data-living-active="1"] body .form-label {
  color: var(--lt-text);
}

html[data-living-active="1"] body .right_side .form-control,
html[data-living-active="1"] body .right_side .form-select,
html[data-living-active="1"] body .e-input-group input.e-input,
html[data-living-active="1"] body .e-input-group.e-control-wrapper input.e-input {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .right_side .form-control::placeholder {
  color: var(--lt-text-muted);
}

html[data-living-active="1"] body .widget_section .nav-tabs .nav-link {
  background-color: var(--lt-surface-soft);
  color: var(--lt-text-muted);
  border-color: transparent;
}

html[data-living-active="1"] body .widget_section .nav-tabs .nav-link.active {
  background-color: var(--lt-surface);
  color: var(--lt-accent);
  border-color: var(--lt-border);
}

/* Tables — subtle neutral headers (no strong cyan/gold tint) */
html[data-living-active="1"] body .e-grid,
html[data-living-active="1"] body .e-gridheader {
  background-color: var(--lt-surface);
  color: var(--lt-text);
}

html[data-living-active="1"] body .e-grid .e-headercell,
html[data-living-active="1"] body .e-grid .e-headercelldiv {
  background-color: var(--lt-table-header-bg);
  color: var(--lt-text);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .e-grid .e-rowcell {
  background-color: var(--lt-surface);
  color: var(--lt-text);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .e-grid .e-altrow .e-rowcell {
  background-color: var(--lt-table-row-alt);
}

html[data-living-active="1"] body .table {
  color: var(--lt-text);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .table > :not(caption) > * > * {
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .table > thead {
  background-color: var(--lt-table-header-bg);
}

/* Buttons — uses ERP .readmore for the primary action */
html[data-living-active="1"] body .readmore,
html[data-living-active="1"] body .widget_section .readmore {
  background-color: var(--lt-accent);
  color: #ffffff;
  border-color: var(--lt-accent);
  box-shadow: none;
  font-family: var(--font-Ginger);
  font-size: 16px;
}

html[data-living-active="1"] body .readmore:hover {
  background-color: var(--lt-accent-strong);
  color: #ffffff;
}
html[data-living-active="1"] body .readmore::before {
  background-color: var(--lt-accent-strong) !important;
}
html[data-living-active="1"] body .readmore:hover::before {
  background-color: var(--lt-accent) !important;
}

html[data-living-active="1"] body .widget_section .btn_custom {
  padding: 8px 0;
}

/* Active nav-tab triangle (the ::after pointer beneath an active
   tab) — style.css ties it to the old #ecf0f5 tab fill via the
   triangle's border colour. Route both the tab's background and
   the triangle's colour through the theme so the pointer always
   matches the active tab. */
html[data-living-active="1"] body .right_side .widget_section .nav-tabs .nav-link.active::after,
html[data-living-active="1"] body .widget_section .nav-tabs .nav-link.active::after {
  color: var(--lt-surface);
  border-top-color: var(--lt-surface);
  transition: color 400ms ease, border-top-color 400ms ease;
}

html[data-living-active="1"] body .right_side .widget_section .nav-tabs .nav-link.active,
html[data-living-active="1"] body .widget_section .nav-tabs .nav-item.show .nav-link {
  background-color: var(--lt-surface);
  color: var(--lt-accent);
}

html[data-living-active="1"] body .right_side .widget_section .nav-tabs .nav-link {
  background-color: var(--lt-surface-soft);
  color: var(--lt-text-muted);
  border-color: transparent;
}

html[data-living-active="1"] body .modal-content {
  background-color: var(--lt-surface);
  border: 1px solid var(--lt-border);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-md);
}

/* ---------------------------------------------------------
 * Setting sidebar — outer drawer chrome
 * --------------------------------------------------------- */
html[data-living-active="1"] body .setting_sidebar {
  display: flex;
  flex-direction: column;
  /* Constrain inside the viewport (original style.css uses height:100%;top:70px which clipped the footer). */
  /* height: calc(100vh - 70px);
  max-height: calc(100vh - 70px); */
  background-color: var(--lt-surface);
  border-left: 1px solid var(--lt-border);
  box-shadow: var(--lt-shadow-md);
  color: var(--lt-text);
  font-family: 'Source Sans Pro', sans-serif;
}

html[data-living-active="1"] body .setting_sidebar .settingPanelToggle {
  background-color: var(--lt-blend-time-accent, var(--lt-time-accent));
  color: #ffffff;
  box-shadow: var(--lt-shadow-sm);
  transition:
    background-color 400ms ease,
    color 400ms ease,
    box-shadow 400ms ease;
}

html[data-living-active="1"] body .setting_sidebar .settingPanelToggle:hover {
  background-color: var(--lt-time-accent-strong);
}

html[data-living-active="1"] body .setting_sidebar .settingPanelToggle .fa-cog,
html[data-living-active="1"] body .setting_sidebar .settingPanelToggle .fa,
html[data-living-active="1"] body .setting_sidebar .settingPanelToggle .fas {
  color: #ffffff;
}

html[data-living-active="1"] body .setting_sidebar .living-setting-panel-root {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

html[data-living-active="1"] body .setting_sidebar .living-setting-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Header row inside the drawer */
html[data-living-active="1"] body .setting_sidebar .setting-panel-header {
  background-color: var(--lt-surface);
  color: var(--lt-text);
  border: none;
  border-bottom: 1px solid var(--lt-border);
  padding: 1rem 1.1rem;
  font-size: 1rem;
}

html[data-living-active="1"] body .setting_sidebar .living-setting-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

html[data-living-active="1"] body .setting_sidebar .living-setting-header-row .setting-panel-header-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--lt-text);
}

/* Native button/input controls don't inherit font-family — force app font everywhere in the panel. */
html[data-living-active="1"] body .setting_sidebar,
html[data-living-active="1"] body .setting_sidebar button,
html[data-living-active="1"] body .setting_sidebar input,
html[data-living-active="1"] body .setting_sidebar label,
html[data-living-active="1"] body .setting_sidebar a,
html[data-living-active="1"] body .setting_sidebar span,
html[data-living-active="1"] body .setting_sidebar p,
html[data-living-active="1"] body .setting_sidebar .living-theme-tile,
html[data-living-active="1"] body .setting_sidebar .living-theme-size-btn,
html[data-living-active="1"] body .setting_sidebar .living-theme-panel-close,
html[data-living-active="1"] body .setting_sidebar .living-theme-restore-btn {
  font-family: 'Source Sans Pro', sans-serif;
}

html[data-living-active="1"] body .setting_sidebar h1,
html[data-living-active="1"] body .setting_sidebar h2,
html[data-living-active="1"] body .setting_sidebar h3,
html[data-living-active="1"] body .setting_sidebar h4,
html[data-living-active="1"] body .setting_sidebar h5,
html[data-living-active="1"] body .setting_sidebar h6,
html[data-living-active="1"] body .setting_sidebar .living-theme-section-title {
  font-family: 'Montserrat', sans-serif;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-panel-close {
  border: none;
  background: transparent;
  color: var(--lt-text-muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 250ms ease, color 250ms ease;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-panel-close:hover {
  background-color: var(--lt-surface-soft);
  color: var(--lt-text);
}

html[data-living-active="1"] body .setting_sidebar .border-bottom {
  border-color: var(--lt-border) !important;
}

/* ---------------------------------------------------------
 * Setting panel — Auto theme row + toggle
 * --------------------------------------------------------- */
html[data-living-active="1"] body .setting_sidebar .living-theme-panel {
  padding: 0 0 0.5rem;
  color: var(--lt-text);
}

html[data-living-active="1"] body .setting_sidebar .living-theme-auto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem 0.4rem;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-auto-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--lt-text);
}

html[data-living-active="1"] body .setting_sidebar .living-theme-auto-label i {
  color: var(--lt-accent);
  font-size: 1rem;
  line-height: 1;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-auto-hint {
  font-size: 0.78rem;
  color: var(--lt-text-muted);
  padding: 0 1.1rem 0.7rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--lt-border);
  margin: 0;
}

/* Toggle switch — compact (36 × 20) */
html[data-living-active="1"] body .setting_sidebar .living-theme-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--lt-switch-track);
  border-radius: 999px;
  transition: background-color 300ms ease;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-switch-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  top: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-living-active="1"] body .setting_sidebar .living-theme-switch input:checked + .living-theme-switch-slider {
  background-color: var(--lt-accent);
}

html[data-living-active="1"] body .setting_sidebar .living-theme-switch input:checked + .living-theme-switch-slider::before {
  transform: translateX(16px);
}

/* ---------------------------------------------------------
 * Setting panel — Section titles + Theme grid + Size row
 * --------------------------------------------------------- */
html[data-living-active="1"] body .setting_sidebar .living-theme-section-title {
  font-weight: 500;
  font-size: 0.95rem;
  padding: 1rem 1.1rem 0.5rem;
  color: var(--lt-text);
}

html[data-living-active="1"] body .setting_sidebar .living-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  padding: 0 1.1rem 0.85rem;
}

/* Theme tile: [icon] Label  — icon and text inline, centered in tile */
html[data-living-active="1"] body .setting_sidebar .living-theme-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.7rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--lt-border);
  background-color: var(--lt-surface);
  color: var(--lt-text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-tile i {
  font-size: 1rem;
  color: inherit;
  line-height: 1;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-tile span {
  line-height: 1;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-tile:hover {
  border-color: var(--lt-accent);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-sm);
}

html[data-living-active="1"] body .setting_sidebar .living-theme-tile.is-active {
  border-color: var(--lt-accent);
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
}

html[data-living-active="1"][data-theme="dusk"] body .setting_sidebar .living-theme-tile.is-active {
  color: var(--lt-accent-strong);
}

html[data-living-active="1"][data-theme="night"] body .setting_sidebar .living-theme-tile {
  background-color: var(--lt-surface-soft);
}

html[data-living-active="1"] body .setting_sidebar .living-theme-tile.living-theme-tile--auto:not(.is-active) {
  opacity: 0.85;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-size-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  padding: 0 1.1rem 1rem;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-size-btn {
  padding: 0.65rem 0.55rem;
  border-radius: 10px;
  border: 1px solid var(--lt-border);
  background-color: var(--lt-surface);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--lt-text);
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-size-btn:hover:not(.is-active) {
  border-color: var(--lt-accent);
}

html[data-living-active="1"] body .setting_sidebar .living-theme-size-btn.is-active {
  background-color: var(--lt-accent);
  border-color: var(--lt-accent);
  color: #ffffff;
  box-shadow: var(--lt-shadow-sm);
}

html[data-living-active="1"][data-theme="dusk"] body .setting_sidebar .living-theme-size-btn.is-active {
  color: #ffffff;
}

/* ---------------------------------------------------------
 * Restore Default — pinned footer button
 * --------------------------------------------------------- */
html[data-living-active="1"] body .setting_sidebar .living-theme-panel-footer {
  flex-shrink: 0;
  display: block;
  padding: 0.9rem 1.1rem 1.1rem;
  margin-top: auto;
  border-top: 1px solid var(--lt-border);
  background-color: var(--lt-surface);
}

html[data-living-active="1"] body .setting_sidebar .living-theme-restore-btn,
html[data-living-active="1"] body .setting_sidebar .living-theme-restore-btn.readmore {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0.7rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 10px;
  background-color: var(--lt-accent);
  color: #ffffff;
  border: 1px solid var(--lt-accent);
  box-shadow: var(--lt-shadow-sm);
  text-decoration: none;
  line-height: 1;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-restore-btn.readmore:hover {
  background-color: var(--lt-accent-strong);
  border-color: var(--lt-accent-strong);
  color: #ffffff;
}

html[data-living-active="1"] body .setting_sidebar .living-theme-restore-btn.readmore i {
  font-size: 0.85rem;
  line-height: 1;
}

/* ---------------------------------------------------------
 * Compact density (Theme Size: Compact) — scoped, opt-in
 * --------------------------------------------------------- */

html[data-living-active="1"][data-theme-size="compact"] body .left-sidebar .e-treeview .e-list-item,
html[data-living-active="1"][data-theme-size="compact"] body .left-sidebar ul li {
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 14px;
}

html[data-living-active="1"][data-theme-size="compact"] body .left-sidebar .e-treeview .e-list-item .e-list-text,
html[data-living-active="1"][data-theme-size="compact"] body .left-sidebar .e-treeview .e-list-item .e-list-text a {
  font-size: 0.92rem;
}

html[data-living-active="1"][data-theme-size="compact"] body .widget_section .e-row {
  height: 34px !important;
}

html[data-living-active="1"][data-theme-size="compact"] body .main-header {
  min-height: 52px;
}

/* ---------------------------------------------------------
 * Theme-aware text & icon refinements (all themes)
 * Headings stay readable; decorative icons/links pick up
 * --lt-accent; semantic colors (.text-success / .text-danger /
 * .text-warning, Excel green, PDF red, delete red) are NOT
 * overridden.
 * --------------------------------------------------------- */

/* Headings inside ERP content — readable in every theme */
html[data-living-active="1"] body .right_side h1,
html[data-living-active="1"] body .right_side h2,
html[data-living-active="1"] body .right_side h3,
html[data-living-active="1"] body .right_side h4,
html[data-living-active="1"] body .right_side h5,
html[data-living-active="1"] body .right_side h6,
html[data-living-active="1"] body .widget_section h1,
html[data-living-active="1"] body .widget_section h2,
html[data-living-active="1"] body .widget_section h3,
html[data-living-active="1"] body .widget_section h4,
html[data-living-active="1"] body .widget_section h5,
html[data-living-active="1"] body .widget_section h6 {
  color: var(--lt-text);
}

/* Secondary / muted text */
html[data-living-active="1"] body .right_side .text-muted,
html[data-living-active="1"] body .right_side small.text-muted,
html[data-living-active="1"] body .widget_section .text-muted,
html[data-living-active="1"] body .right_side .sub_header .header_heading p,
html[data-living-active="1"] body .right_side .description,
html[data-living-active="1"] body .right_side .subtitle {
  color: var(--lt-text-muted);
}

/* Anchor links inside ERP content (e.g. voucher numbers) — theme accent.
   Excludes buttons, treeview list items, dropdown items, and Bootstrap colored utilities. */
html[data-living-active="1"] body .right_side
  a:not(.btn):not(.readmore):not(.nav-link):not(.e-list-text):not(.dropdown-item):not(.text-success):not(.text-danger):not(.text-warning):not(.text-dark):not(.text-white),
html[data-living-active="1"] body .widget_section
  a:not(.btn):not(.readmore):not(.nav-link):not(.e-list-text):not(.dropdown-item):not(.text-success):not(.text-danger):not(.text-warning):not(.text-dark):not(.text-white) {
  color: var(--lt-accent);
  text-decoration: none;
}

html[data-living-active="1"] body .right_side
  a:not(.btn):not(.readmore):not(.nav-link):not(.e-list-text):not(.dropdown-item):not(.text-success):not(.text-danger):not(.text-warning):not(.text-dark):not(.text-white):hover,
html[data-living-active="1"] body .widget_section
  a:not(.btn):not(.readmore):not(.nav-link):not(.e-list-text):not(.dropdown-item):not(.text-success):not(.text-danger):not(.text-warning):not(.text-dark):not(.text-white):hover {
  color: var(--lt-accent-strong);
  text-decoration: underline;
}

/* Decorative "view" icon — theme accent */
html[data-living-active="1"] body .right_side .fa-eye,
html[data-living-active="1"] body .widget_section .fa-eye,
html[data-living-active="1"] body .e-grid .fa-eye {
  color: var(--lt-accent);
}

/* Edit pencil — keep neutral/blue but track theme on light surfaces */
html[data-living-active="1"] body .right_side .fa-edit,
html[data-living-active="1"] body .right_side .fa-pencil-alt,
html[data-living-active="1"] body .right_side .fa-pen,
html[data-living-active="1"] body .widget_section .fa-edit,
html[data-living-active="1"] body .widget_section .fa-pencil-alt,
html[data-living-active="1"] body .widget_section .fa-pen {
  color: var(--lt-accent-strong);
}

/* Syncfusion grid: sort + filter indicators tinted with accent */
html[data-living-active="1"] body .e-grid .e-sortfilterdiv,
html[data-living-active="1"] body .e-grid .e-sortfilter,
html[data-living-active="1"] body .e-grid .e-icon-ascending,
html[data-living-active="1"] body .e-grid .e-icon-descending,
html[data-living-active="1"] body .e-grid .e-filtermenudiv,
html[data-living-active="1"] body .e-grid .e-filterdiv {
  color: var(--lt-accent);
}

html[data-living-active="1"] body .e-grid .e-headercell .e-sortnumber {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
}

/* Status pills / badges — soft accent.
   Bootstrap colored badges (.bg-success / .bg-danger / .bg-warning / .badge-info etc.)
   are higher specificity and will continue to win, preserving semantic meaning. */
html[data-living-active="1"] body .right_side .badge:not([class*="bg-"]):not([class*="badge-"]),
html[data-living-active="1"] body .widget_section .badge:not([class*="bg-"]):not([class*="badge-"]),
html[data-living-active="1"] body .right_side .status-pill,
html[data-living-active="1"] body .right_side .pill {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.25em 0.75em;
  font-weight: 600;
  font-size: 0.78em;
}

/* Bootstrap .text-primary / .text-info redirect to the active theme accent
   (these are color utilities, not semantic warnings/errors). */
html[data-living-active="1"] body .right_side .text-primary,
html[data-living-active="1"] body .right_side .text-info,
html[data-living-active="1"] body .widget_section .text-primary,
html[data-living-active="1"] body .widget_section .text-info,
html[data-living-active="1"] body .left-sidebar .text-primary,
html[data-living-active="1"] body .left-sidebar .text-info {
  color: var(--lt-accent);
}

/* "AI Assistant"-style outline buttons inside content */
html[data-living-active="1"] body .right_side .btn-outline-primary,
html[data-living-active="1"] body .right_side .btn-outline-info {
  color: var(--lt-accent);
  border-color: var(--lt-accent);
  background-color: transparent;
}

html[data-living-active="1"] body .right_side .btn-outline-primary:hover,
html[data-living-active="1"] body .right_side .btn-outline-info:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
  border-color: var(--lt-accent);
}

/* =========================================================
 * Component coverage — pull every interactive surface onto
 * the active theme palette so no element keeps its default
 * white / cyan / dark look. All driven through --lt-* tokens,
 * so morning / day / dusk / night automatically follow.
 * ========================================================= */

/* ---------- Card (Bootstrap) ---------- */
html[data-living-active="1"] body .card,
html[data-living-active="1"] body .right_side .card {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-sm);
}

html[data-living-active="1"] body .card-header,
html[data-living-active="1"] body .card-footer {
  background-color: var(--lt-surface-soft);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .card-title {
  color: var(--lt-text);
}

/* ---------- Bootstrap button variants ---------- */
html[data-living-active="1"] body .right_side .btn-primary,
html[data-living-active="1"] body .widget_section .btn-primary {
  background-color: var(--lt-accent);
  border-color: var(--lt-accent);
  color: #ffffff;
}

html[data-living-active="1"] body .right_side .btn-primary:hover,
html[data-living-active="1"] body .widget_section .btn-primary:hover {
  background-color: var(--lt-accent-strong);
  border-color: var(--lt-accent-strong);
  color: #ffffff;
}

html[data-living-active="1"] body .right_side .btn-secondary,
html[data-living-active="1"] body .right_side .btn-light,
html[data-living-active="1"] body .widget_section .btn-secondary,
html[data-living-active="1"] body .widget_section .btn-light {
  background-color: var(--lt-surface-soft);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .right_side .btn-secondary:hover,
html[data-living-active="1"] body .right_side .btn-light:hover,
html[data-living-active="1"] body .widget_section .btn-secondary:hover,
html[data-living-active="1"] body .widget_section .btn-light:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
  border-color: var(--lt-accent);
}

/* ---------- Syncfusion button ---------- */
html[data-living-active="1"] body .e-btn,
html[data-living-active="1"] body .e-css.e-btn {
  background-color: var(--lt-surface-soft);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .e-btn:hover,
html[data-living-active="1"] body .e-css.e-btn:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
  border-color: var(--lt-accent);
}

html[data-living-active="1"] body .e-btn.e-primary {
  background-color: var(--lt-accent);
  border-color: var(--lt-accent);
  color: #ffffff;
}

html[data-living-active="1"] body .e-btn.e-primary:hover {
  background-color: var(--lt-accent-strong);
  border-color: var(--lt-accent-strong);
}

html[data-living-active="1"] body .e-btn.e-flat {
  background-color: transparent;
  color: var(--lt-text);
}

html[data-living-active="1"] body .e-btn.e-flat:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
}

/* ---------- Syncfusion toolbar ---------- */
html[data-living-active="1"] body .e-toolbar,
html[data-living-active="1"] body .e-toolbar .e-toolbar-items {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .e-toolbar .e-tbar-btn,
html[data-living-active="1"] body .e-toolbar .e-toolbar-item .e-tbar-btn {
  background-color: transparent;
  color: var(--lt-text);
  border-color: transparent;
}

html[data-living-active="1"] body .e-toolbar .e-tbar-btn:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
}

html[data-living-active="1"] body .e-toolbar .e-tbar-btn .e-icons,
html[data-living-active="1"] body .e-toolbar .e-tbar-btn .e-btn-icon {
  color: inherit;
}

html[data-living-active="1"] body .e-toolbar .e-toolbar-item.e-separator {
  border-color: var(--lt-border);
}

/* Optional action-bar container in custom templates */
html[data-living-active="1"] body .right_side .toolbar,
html[data-living-active="1"] body .right_side .action-bar {
  background-color: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  color: var(--lt-text);
}

/* ---------- Grid row hover + selection ---------- */
html[data-living-active="1"] body .e-grid .e-row:hover .e-rowcell {
  background-color: var(--lt-accent-soft);
  color: var(--lt-text);
}

html[data-living-active="1"] body .e-grid .e-row.e-rowselected .e-rowcell,
html[data-living-active="1"] body .e-grid .e-row.e-rowselected:hover .e-rowcell {
  background-color: var(--lt-accent-soft);
  color: var(--lt-text);
}

html[data-living-active="1"] body .e-grid .e-gridcontent,
html[data-living-active="1"] body .e-grid .e-content {
  background-color: var(--lt-surface);
}

/* Grid row action icons (eye/edit/delete column container) keep semantic
   colors on .fa-trash, but ensure the cell background is themed. */
html[data-living-active="1"] body .e-grid .e-rowcell .fa-trash,
html[data-living-active="1"] body .e-grid .e-rowcell .fa-trash-alt {
  color: #dc3545;
}

/* ---------- Syncfusion pager ---------- */
html[data-living-active="1"] body .e-pager {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .e-pager .e-pagercontainer {
  background-color: transparent;
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .e-pager .e-numericitem,
html[data-living-active="1"] body .e-pager .e-link,
html[data-living-active="1"] body .e-pager .e-icons,
html[data-living-active="1"] body .e-pager .e-pagenomsg,
html[data-living-active="1"] body .e-pager .e-pagecountmsg,
html[data-living-active="1"] body .e-pager .e-pagesizes,
html[data-living-active="1"] body .e-pager .e-pagerexternalmsg {
  background-color: transparent;
  color: var(--lt-text);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .e-pager .e-numericitem:hover,
html[data-living-active="1"] body .e-pager .e-link:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
}

html[data-living-active="1"] body .e-pager .e-currentitem,
html[data-living-active="1"] body .e-pager .e-numericitem.e-currentitem {
  background-color: var(--lt-accent);
  color: #ffffff !important;
  border-color: var(--lt-accent);
}

html[data-living-active="1"] body .e-pager .e-disable,
html[data-living-active="1"] body .e-pager .e-numericitem.e-disabled,
html[data-living-active="1"] body .e-pager .e-link.e-disabled {
  color: var(--lt-text-muted);
  opacity: 0.55;
}

/* ---------- Bootstrap pagination ---------- */
html[data-living-active="1"] body .pagination .page-link {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .pagination .page-link:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
  border-color: var(--lt-accent);
}

html[data-living-active="1"] body .pagination .page-item.active .page-link {
  background-color: var(--lt-accent);
  border-color: var(--lt-accent);
  color: #ffffff;
}

html[data-living-active="1"] body .pagination .page-item.disabled .page-link {
  background-color: var(--lt-surface);
  color: var(--lt-text-muted);
  border-color: var(--lt-border);
}

/* ---------- Bootstrap dropdown menu ---------- */
html[data-living-active="1"] body .dropdown-menu {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-md);
}

html[data-living-active="1"] body .dropdown-item {
  color: var(--lt-text);
}

html[data-living-active="1"] body .dropdown-item:hover,
html[data-living-active="1"] body .dropdown-item:focus {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
}

html[data-living-active="1"] body .dropdown-item.active,
html[data-living-active="1"] body .dropdown-item:active {
  background-color: var(--lt-accent);
  color: #ffffff;
}

html[data-living-active="1"] body .dropdown-divider {
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .dropdown-header {
  color: var(--lt-text-muted);
}

/* ---------- Syncfusion popup / dropdownbase / context menu ---------- */
html[data-living-active="1"] body .e-popup,
html[data-living-active="1"] body .e-popup-open,
html[data-living-active="1"] body .e-ddl.e-popup,
html[data-living-active="1"] body .e-dropdownbase,
html[data-living-active="1"] body .e-contextmenu-wrapper ul,
html[data-living-active="1"] body .e-menu-container ul {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-md);
}

html[data-living-active="1"] body .e-dropdownbase .e-list-item,
html[data-living-active="1"] body .e-list-group-item,
html[data-living-active="1"] body .e-contextmenu-wrapper ul .e-menu-item,
html[data-living-active="1"] body .e-menu-container ul .e-menu-item {
  background-color: transparent;
  color: var(--lt-text);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .e-dropdownbase .e-list-item.e-hover,
html[data-living-active="1"] body .e-dropdownbase .e-list-item.e-active,
html[data-living-active="1"] body .e-list-item.e-item-focus,
html[data-living-active="1"] body .e-contextmenu-wrapper ul .e-menu-item.e-focused,
html[data-living-active="1"] body .e-menu-container ul .e-menu-item.e-focused {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
}

html[data-living-active="1"] body .e-dropdownbase .e-list-item.e-active {
  font-weight: 600;
}

/* ---------- Select2 dropdown ---------- */
html[data-living-active="1"] body .select2-container--default .select2-selection--single,
html[data-living-active="1"] body .select2-container--default .select2-selection--multiple {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .select2-container--default .select2-selection__rendered {
  color: var(--lt-text);
}

html[data-living-active="1"] body .select2-container--default .select2-selection__placeholder {
  color: var(--lt-text-muted);
}

html[data-living-active="1"] body .select2-dropdown {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-md);
}

html[data-living-active="1"] body .select2-search--dropdown .select2-search__field {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .select2-container--default .select2-results__option {
  background-color: transparent;
  color: var(--lt-text);
}

html[data-living-active="1"] body .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-living-active="1"] body .select2-container--default .select2-results__option--highlighted {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
}

html[data-living-active="1"] body .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--lt-accent-soft);
  color: var(--lt-text);
}

/* Multi-select chips */
html[data-living-active="1"] body .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--lt-accent-soft);
  border-color: var(--lt-accent);
  color: var(--lt-accent-strong);
}

/* ---------- Modal chrome (Bootstrap) ---------- */
html[data-living-active="1"] body .modal-header,
html[data-living-active="1"] body .modal-footer {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .modal-title,
html[data-living-active="1"] body .modal-header h5 {
  color: var(--lt-text);
}

html[data-living-active="1"][data-theme="night"] body .modal-header .btn-close,
html[data-living-active="1"][data-theme="night"] body .modal-content .btn-close {
  filter: invert(1) grayscale(1) brightness(1.4);
}

/* ---------- Syncfusion dialog ---------- */
html[data-living-active="1"] body .e-dialog,
html[data-living-active="1"] body .e-dlg-container .e-dialog {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-md);
}

html[data-living-active="1"] body .e-dialog .e-dlg-header,
html[data-living-active="1"] body .e-dialog .e-dlg-header-content,
html[data-living-active="1"] body .e-dialog .e-dlg-content,
html[data-living-active="1"] body .e-dialog .e-footer-content {
  background-color: var(--lt-surface);
  color: var(--lt-text);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .e-dialog .e-dlg-header-content {
  border-bottom: 1px solid var(--lt-border);
}

html[data-living-active="1"] body .e-dialog .e-footer-content {
  border-top: 1px solid var(--lt-border);
}

html[data-living-active="1"] body .e-dlg-overlay {
  background-color: rgba(15, 25, 40, 0.45);
}

/* ---------- Form check / radio (Bootstrap) ---------- */
html[data-living-active="1"] body .form-check-input {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .form-check-input:checked {
  background-color: var(--lt-accent);
  border-color: var(--lt-accent);
}

html[data-living-active="1"] body .form-check-input:focus {
  border-color: var(--lt-accent);
  box-shadow: 0 0 0 0.2rem var(--lt-accent-soft);
}

html[data-living-active="1"] body .form-check-label {
  color: var(--lt-text);
}

/* ---------- Syncfusion checkbox / radio ---------- */
html[data-living-active="1"] body .e-checkbox-wrapper .e-frame,
html[data-living-active="1"] body .e-css.e-checkbox-wrapper .e-frame,
html[data-living-active="1"] body .e-radio-wrapper .e-radio + label::before {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .e-checkbox-wrapper .e-frame.e-check,
html[data-living-active="1"] body .e-css.e-checkbox-wrapper .e-frame.e-check {
  background-color: var(--lt-accent);
  border-color: var(--lt-accent);
  color: #ffffff;
}

html[data-living-active="1"] body .e-checkbox-wrapper .e-label,
html[data-living-active="1"] body .e-radio-wrapper label {
  color: var(--lt-text);
}

/* ---------- Tooltips ---------- */
html[data-living-active="1"] body .tooltip .tooltip-inner {
  background-color: var(--lt-text);
  color: var(--lt-surface);
}

html[data-living-active="1"] body .tooltip .tooltip-arrow::before {
  border-top-color: var(--lt-text);
}

html[data-living-active="1"] body .e-tooltip-wrap .e-tip-content {
  background-color: var(--lt-text);
  color: var(--lt-surface);
}

html[data-living-active="1"] body .e-tooltip-wrap .e-arrow-tip-inner,
html[data-living-active="1"] body .e-tooltip-wrap .e-arrow-tip-outer {
  border-top-color: var(--lt-text);
  border-bottom-color: var(--lt-text);
}

/* ---------- Right header dropdown menu icons (search/notification etc) ---------- */
html[data-living-active="1"] body .right-header .navbar-nav li a .fa-search,
html[data-living-active="1"] body .right-header .navbar-nav li a .fa-envelope-open,
html[data-living-active="1"] body .right-header .navbar-nav li a .fa-question-circle {
  color: var(--lt-accent);
}

html[data-living-active="1"] body .right-header .navbar-nav li a .indicator {
  background-color: var(--lt-accent);
  border-color: var(--lt-accent);
  color: #ffffff;
}

/* ---------- Per-theme refinements ---------- */
/* Night: keep dropdown panels visibly distinct from the deep surface */
html[data-living-active="1"][data-theme="night"] body .dropdown-menu,
html[data-living-active="1"][data-theme="night"] body .e-popup,
html[data-living-active="1"][data-theme="night"] body .select2-dropdown,
html[data-living-active="1"][data-theme="night"] body .modal-content,
html[data-living-active="1"][data-theme="night"] body .e-dialog {
  background-color: var(--lt-surface-soft);
}

/* Dusk (Sunset): warmer hovered row background so it doesn't read cyan */
html[data-living-active="1"][data-theme="dusk"] body .e-grid .e-row:hover .e-rowcell,
html[data-living-active="1"][data-theme="dusk"] body .e-grid .e-row.e-rowselected .e-rowcell {
  background-color: var(--lt-accent-soft);
  color: var(--lt-text);
}

/* Morning: gentle peach hover so the sunrise feel is preserved */
html[data-living-active="1"][data-theme="morning"] body .e-grid .e-row:hover .e-rowcell {
  background-color: var(--lt-accent-soft);
}

/* Day: clean accent hover, same calm treatment */
html[data-living-active="1"][data-theme="day"] body .e-grid .e-row:hover .e-rowcell {
  background-color: var(--lt-accent-soft);
}

/* =========================================================
 * Logo swap + Icon container coverage + Pagination polish
 * (driven by --lt-* tokens; Night gets stronger overrides)
 * ========================================================= */

/* ---------- Logo: show white logo on dark surfaces ---------- */
html[data-living-active="1"][data-theme="night"] body .color-logo {
  display: none;
}

html[data-living-active="1"][data-theme="night"] body .white-logo {
  display: block;
}

/* Light themes keep the color logo (explicit so blends never flicker) */
html[data-living-active="1"][data-theme="morning"] body .color-logo,
html[data-living-active="1"][data-theme="day"] body .color-logo,
html[data-living-active="1"][data-theme="dusk"] body .color-logo {
  display: block;
}

html[data-living-active="1"][data-theme="morning"] body .white-logo,
html[data-living-active="1"][data-theme="day"] body .white-logo,
html[data-living-active="1"][data-theme="dusk"] body .white-logo {
  display: none;
}

/* ---------- Toolbar icon containers — transparent so dark theme shows through ---------- */
html[data-living-active="1"] body .e-toolbar,
html[data-living-active="1"] body .e-toolbar .e-toolbar-items,
html[data-living-active="1"] body .e-toolbar .e-toolbar-item,
html[data-living-active="1"] body .e-grid .e-toolbar,
html[data-living-active="1"] body .e-grid .e-toolbar .e-toolbar-items,
html[data-living-active="1"] body .e-grid .e-toolbar .e-toolbar-item {
  background-color: transparent;
}

html[data-living-active="1"] body .e-toolbar .e-tbar-btn,
html[data-living-active="1"] body .e-toolbar .e-toolbar-item .e-tbar-btn,
html[data-living-active="1"] body .e-grid .e-toolbar .e-tbar-btn {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--lt-text);
  box-shadow: none;
}

html[data-living-active="1"] body .e-toolbar .e-tbar-btn:hover,
html[data-living-active="1"] body .e-grid .e-toolbar .e-tbar-btn:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .e-toolbar .e-tbar-btn .e-icons,
html[data-living-active="1"] body .e-toolbar .e-tbar-btn .e-btn-icon,
html[data-living-active="1"] body .e-grid .e-toolbar .e-tbar-btn .e-icons,
html[data-living-active="1"] body .e-grid .e-toolbar .e-tbar-btn .e-btn-icon {
  color: inherit;
  background-color: transparent;
}

/* ---------- Grid row action buttons (eye / edit / delete cells) ---------- */
html[data-living-active="1"] body .e-grid .e-rowcell .e-btn,
html[data-living-active="1"] body .e-grid .e-rowcell .btn,
html[data-living-active="1"] body .e-grid .e-rowcell .e-css.e-btn,
html[data-living-active="1"] body .e-grid .e-rowcell .e-unboundcelldiv .e-btn,
html[data-living-active="1"] body .e-grid .e-rowcell button.e-flat,
html[data-living-active="1"] body .e-grid .e-rowcell .action-icon,
html[data-living-active="1"] body .e-grid .e-rowcell a.icon-btn,
html[data-living-active="1"] body .e-grid .e-rowcell .icon-btn {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--lt-text);
}

html[data-living-active="1"] body .e-grid .e-rowcell .e-btn:hover,
html[data-living-active="1"] body .e-grid .e-rowcell .btn:hover,
html[data-living-active="1"] body .e-grid .e-rowcell .icon-btn:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
  border-color: transparent;
}

/* Inner icons inside row action cells inherit color from the row text token,
   keeping fa-eye/fa-edit color rules from earlier sections intact. */
html[data-living-active="1"] body .e-grid .e-rowcell .e-btn .e-icons,
html[data-living-active="1"] body .e-grid .e-rowcell .e-btn .e-btn-icon,
html[data-living-active="1"] body .e-grid .e-rowcell .btn .e-icons,
html[data-living-active="1"] body .e-grid .e-rowcell .btn .fa,
html[data-living-active="1"] body .e-grid .e-rowcell .btn .fas,
html[data-living-active="1"] body .e-grid .e-rowcell .btn .far {
  background-color: transparent;
}

/* ---------- Grid borders / cell separators — theme-aware ---------- */
html[data-living-active="1"] body .e-grid,
html[data-living-active="1"] body .e-grid .e-headercell,
html[data-living-active="1"] body .e-grid .e-rowcell,
html[data-living-active="1"] body .e-grid .e-gridcontent,
html[data-living-active="1"] body .e-grid .e-gridheader,
html[data-living-active="1"] body .e-grid .e-table th,
html[data-living-active="1"] body .e-grid .e-table td,
html[data-living-active="1"] body .e-grid .e-table tr,
html[data-living-active="1"] body .e-grid .e-pager {
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .e-grid .e-row {
  border-color: var(--lt-border);
}

/* ---------- Sidebar search icon button + input borders ---------- */
html[data-living-active="1"] body .sidebar-search .form-control,
html[data-living-active="1"] body .sidebar-search input.form-control {
  background-color: var(--lt-surface-soft);
  border: 1px solid var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .sidebar-search .form-control::placeholder {
  color: var(--lt-text-muted);
}

html[data-living-active="1"] body .sidebar-search .btn,
html[data-living-active="1"] body .sidebar-search button {
  background-color: var(--lt-surface-soft);
  border: 1px solid var(--lt-border);
  color: var(--lt-accent);
}

html[data-living-active="1"] body .sidebar-search .btn:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
  border-color: var(--lt-accent);
}

html[data-living-active="1"] body .sidebar-search .btn .fa-search,
html[data-living-active="1"] body .sidebar-search button .fa-search {
  color: inherit;
}

/* ---------- Pagination — page-size dropdown + jump buttons ---------- */
html[data-living-active="1"] body .e-pager .e-pagesizes,
html[data-living-active="1"] body .e-pager .e-pagesize,
html[data-living-active="1"] body .e-pager .e-parentmsgbar,
html[data-living-active="1"] body .e-pager .e-mfirst,
html[data-living-active="1"] body .e-pager .e-mprev,
html[data-living-active="1"] body .e-pager .e-mnext,
html[data-living-active="1"] body .e-pager .e-mlast,
html[data-living-active="1"] body .e-pager .e-first,
html[data-living-active="1"] body .e-pager .e-prev,
html[data-living-active="1"] body .e-pager .e-next,
html[data-living-active="1"] body .e-pager .e-last,
html[data-living-active="1"] body .e-pager .e-nextpage,
html[data-living-active="1"] body .e-pager .e-prevpage,
html[data-living-active="1"] body .e-pager .e-nextpagedisabled,
html[data-living-active="1"] body .e-pager .e-prevpagedisabled {
  background-color: transparent;
  color: var(--lt-text);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .e-pager .e-pagesizes .e-input,
html[data-living-active="1"] body .e-pager .e-pagesizes input.e-input,
html[data-living-active="1"] body .e-pager .e-pagesizes select,
html[data-living-active="1"] body .e-pager .e-pagesizes .e-dropdownlist,
html[data-living-active="1"] body .e-pager .e-pagesizes .e-input-group,
html[data-living-active="1"] body .e-pager .e-pagesizes .e-input-group input.e-input,
html[data-living-active="1"] body .e-pager .e-pagesizes .e-input-group.e-control-wrapper {
  background-color: var(--lt-surface);
  color: var(--lt-text);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .e-pager .e-pagesizes .e-input-group::before,
html[data-living-active="1"] body .e-pager .e-pagesizes .e-input-group::after {
  background-color: var(--lt-accent);
}

html[data-living-active="1"] body .e-pager .e-mfirst:hover,
html[data-living-active="1"] body .e-pager .e-mprev:hover,
html[data-living-active="1"] body .e-pager .e-mnext:hover,
html[data-living-active="1"] body .e-pager .e-mlast:hover,
html[data-living-active="1"] body .e-pager .e-first:hover,
html[data-living-active="1"] body .e-pager .e-prev:hover,
html[data-living-active="1"] body .e-pager .e-next:hover,
html[data-living-active="1"] body .e-pager .e-last:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
}

html[data-living-active="1"] body .e-pager .e-pagercontainer {
  background-color: transparent;
  border: 1px solid var(--lt-border);
  border-radius: 8px;
  overflow: hidden;
}

/* ---------- Form-control borders sitewide (uses --lt-border for every theme) ---------- */
html[data-living-active="1"] body input.form-control,
html[data-living-active="1"] body select.form-control,
html[data-living-active="1"] body textarea.form-control,
html[data-living-active="1"] body .form-select,
html[data-living-active="1"] body .input-group .form-control,
html[data-living-active="1"] body .input-group-text {
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .input-group-text {
  background-color: var(--lt-surface-soft);
  color: var(--lt-text);
}

html[data-living-active="1"] body .form-control:focus,
html[data-living-active="1"] body .form-select:focus,
html[data-living-active="1"] body input.e-input:focus {
  border-color: var(--lt-accent);
  box-shadow: 0 0 0 0.15rem var(--lt-accent-soft);
}

/* ---------- Night-only: stronger overrides because Syncfusion ships
   hardcoded light backgrounds for some toolbar / grid buttons ---------- */
html[data-living-active="1"][data-theme="night"] body .e-toolbar,
html[data-living-active="1"][data-theme="night"] body .e-toolbar .e-toolbar-items,
html[data-living-active="1"][data-theme="night"] body .e-toolbar .e-toolbar-item,
html[data-living-active="1"][data-theme="night"] body .e-toolbar .e-tbar-btn,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-toolbar,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-toolbar .e-toolbar-items,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-toolbar .e-toolbar-item,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-toolbar .e-tbar-btn,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-rowcell .e-btn,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-rowcell .btn,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-rowcell .e-unboundcell,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-rowcell .e-unboundcelldiv,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-numericitem,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-link,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-first,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-prev,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-next,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-last,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-mfirst,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-mprev,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-mnext,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-mlast {
  background-color: transparent !important;
  color: var(--lt-text) !important;
  border-color: var(--lt-border) !important;
}

html[data-living-active="1"][data-theme="night"] body .e-toolbar .e-tbar-btn:hover,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-toolbar .e-tbar-btn:hover,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-rowcell .e-btn:hover,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-rowcell .btn:hover,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-numericitem:hover,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-link:hover {
  background-color: var(--lt-accent-soft) !important;
  color: var(--lt-accent-strong) !important;
}

html[data-living-active="1"][data-theme="night"] body .e-pager .e-currentitem,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-numericitem.e-currentitem {
  background-color: var(--lt-accent) !important;
  color: #ffffff !important;
  border-color: var(--lt-accent) !important;
}

/* Night: grid + pager container surface */
html[data-living-active="1"][data-theme="night"] body .e-grid,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-gridheader,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-gridcontent,
html[data-living-active="1"][data-theme="night"] body .e-grid .e-content,
html[data-living-active="1"][data-theme="night"] body .e-pager {
  background-color: var(--lt-surface);
}

html[data-living-active="1"][data-theme="night"] body .e-grid .e-rowcell {
  background-color: var(--lt-surface);
}

html[data-living-active="1"][data-theme="night"] body .e-grid .e-altrow .e-rowcell {
  background-color: var(--lt-table-row-alt);
}

/* Night: pager dropdown input pops above the pager surface */
html[data-living-active="1"][data-theme="night"] body .e-pager .e-pagesizes .e-input-group,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-pagesizes .e-input-group.e-control-wrapper,
html[data-living-active="1"][data-theme="night"] body .e-pager .e-pagesizes input.e-input {
  background-color: var(--lt-surface-soft);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

/* =========================================================
 * Universal coverage pass
 *   1. Software text utilities (Bootstrap + plain elements)
 *   2. Pop-ups: alert, toast, popover, modal body, SweetAlert,
 *      Syncfusion toast/spinner/notify
 *   3. Left-sidebar icons (FA, tree chevrons, footer icons)
 *   4. Icon backgrounds & borders (generic icon containers)
 *
 * All driven via --lt-* tokens — works for manual themes and
 * Auto-time blending. Semantic Bootstrap colors are preserved.
 * ========================================================= */

/* ---------- (1) Text utilities & inline elements ---------- */
html[data-living-active="1"] body .text-body,
html[data-living-active="1"] body .text-dark,
html[data-living-active="1"] body .text-secondary {
  color: var(--lt-text);
}

html[data-living-active="1"] body .text-muted {
  color: var(--lt-text-muted);
}

/* On Night, Bootstrap's .text-light is unreadable on dark surfaces — adapt */
html[data-living-active="1"][data-theme="night"] body .text-light {
  color: var(--lt-text);
}

/* Page-level inline text (no aggressive override — only where styles often miss) */
html[data-living-active="1"] body .right_side label,
html[data-living-active="1"] body .right_side dt,
html[data-living-active="1"] body .right_side dd,
html[data-living-active="1"] body .right_side caption,
html[data-living-active="1"] body .widget_section label,
html[data-living-active="1"] body .widget_section dt,
html[data-living-active="1"] body .widget_section dd {
  color: var(--lt-text);
}

html[data-living-active="1"] body .right_side hr,
html[data-living-active="1"] body .widget_section hr,
html[data-living-active="1"] body .modal-content hr,
html[data-living-active="1"] body .left-sidebar hr {
  border-color: var(--lt-border);
  opacity: 1;
}

/* ---------- (2a) Bootstrap alert ---------- */
html[data-living-active="1"] body .alert {
  background-color: var(--lt-surface-soft);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

/* Semantic alert variants — readable on both light + dark themes */
html[data-living-active="1"] body .alert-success {
  background-color: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.30);
  color: #198754;
}

html[data-living-active="1"][data-theme="night"] body .alert-success {
  color: #5fd99a;
}

html[data-living-active="1"] body .alert-danger {
  background-color: rgba(220, 53, 69, 0.12);
  border-color: rgba(220, 53, 69, 0.30);
  color: #dc3545;
}

html[data-living-active="1"][data-theme="night"] body .alert-danger {
  color: #ff7d8a;
}

html[data-living-active="1"] body .alert-warning {
  background-color: rgba(255, 193, 7, 0.12);
  border-color: rgba(255, 193, 7, 0.30);
  color: #b58900;
}

html[data-living-active="1"][data-theme="night"] body .alert-warning {
  color: #ffd166;
}

html[data-living-active="1"] body .alert-info,
html[data-living-active="1"] body .alert-primary {
  background-color: var(--lt-accent-soft);
  border-color: var(--lt-border);
  color: var(--lt-accent-strong);
}

/* ---------- (2b) Toast (Bootstrap + Syncfusion) ---------- */
html[data-living-active="1"] body .toast {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-md);
}

html[data-living-active="1"] body .toast-header {
  background-color: var(--lt-surface-soft);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .toast-body {
  color: var(--lt-text);
  background-color: var(--lt-surface);
}

html[data-living-active="1"] body .e-toast,
html[data-living-active="1"] body .e-toast-container .e-toast {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-md);
}

html[data-living-active="1"] body .e-toast .e-toast-title,
html[data-living-active="1"] body .e-toast .e-toast-message,
html[data-living-active="1"] body .e-toast .e-toast-content {
  color: var(--lt-text);
}

/* ---------- (2c) Popover (Bootstrap) ---------- */
html[data-living-active="1"] body .popover {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-md);
}

html[data-living-active="1"] body .popover-header {
  background-color: var(--lt-surface-soft);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .popover-body {
  color: var(--lt-text);
  background-color: var(--lt-surface);
}

html[data-living-active="1"] body .popover .popover-arrow::before {
  border-top-color: var(--lt-border);
  border-bottom-color: var(--lt-border);
  border-left-color: var(--lt-border);
  border-right-color: var(--lt-border);
}

html[data-living-active="1"] body .popover .popover-arrow::after {
  border-top-color: var(--lt-surface);
  border-bottom-color: var(--lt-surface);
  border-left-color: var(--lt-surface);
  border-right-color: var(--lt-surface);
}

/* ---------- (2d) Modal body / close button text contrast ---------- */
html[data-living-active="1"] body .modal-body {
  background-color: var(--lt-surface);
  color: var(--lt-text);
}

html[data-living-active="1"] body .modal-content .form-label,
html[data-living-active="1"] body .modal-content label {
  color: var(--lt-text);
}

/* ---------- (2e) SweetAlert2 (if loaded by ERP) ---------- */
html[data-living-active="1"] body .swal2-popup {
  background-color: var(--lt-surface);
  color: var(--lt-text);
  border: 1px solid var(--lt-border);
  box-shadow: var(--lt-shadow-md);
}

html[data-living-active="1"] body .swal2-title,
html[data-living-active="1"] body .swal2-html-container,
html[data-living-active="1"] body .swal2-content {
  color: var(--lt-text);
}

html[data-living-active="1"] body .swal2-actions .swal2-confirm,
html[data-living-active="1"] body .swal2-styled.swal2-confirm {
  background-color: var(--lt-accent);
  color: #ffffff;
  border-color: var(--lt-accent);
}

html[data-living-active="1"] body .swal2-actions .swal2-cancel,
html[data-living-active="1"] body .swal2-styled.swal2-cancel {
  background-color: var(--lt-surface-soft);
  color: var(--lt-text);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .swal2-backdrop-show {
  background-color: rgba(15, 25, 40, 0.45);
}

/* ---------- (2f) Syncfusion notify / spinner backdrop ---------- */
html[data-living-active="1"] body .e-spinner-pane {
  background-color: rgba(15, 25, 40, 0.35);
}

html[data-living-active="1"] body .e-spinner-inner .e-spin-material,
html[data-living-active="1"] body .e-spinner-inner svg circle {
  stroke: var(--lt-accent);
}

/* ---------- (3) Left sidebar icons ---------- */
/* FA icons in nav links + footer (Change Password key, Logout, etc.) */
html[data-living-active="1"] body .left-sidebar .fa,
html[data-living-active="1"] body .left-sidebar .fas,
html[data-living-active="1"] body .left-sidebar .far,
html[data-living-active="1"] body .left-sidebar .fab,
html[data-living-active="1"] body .left-sidebar .nav-link i,
html[data-living-active="1"] body .left-sidebar .side-footer ul li .fa,
html[data-living-active="1"] body .left-sidebar .side-footer ul li .fas {
  color: var(--lt-text);
}

html[data-living-active="1"] body .left-sidebar .nav-link:hover i,
html[data-living-active="1"] body .left-sidebar .side-footer ul li a:hover .fas {
  color: var(--lt-accent);
}

/* Syncfusion treeview expand / collapse chevrons */
html[data-living-active="1"] body .left-sidebar .e-treeview .e-icons,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-icon-collapsible,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-icon-expandable,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item div.e-icons {
  color: var(--lt-text-muted);
  background-color: transparent;
}

html[data-living-active="1"] body .left-sidebar .e-treeview .e-icon-collapsible::before,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-icon-expandable::before,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item div.e-icons::before {
  color: var(--lt-text-muted);
}

/* Active / hovered tree items: chevron + icon switch to accent */
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-active .e-icons,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-hover .e-icons,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-active .e-icon-collapsible::before,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-active .e-icon-expandable::before,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-hover .e-icon-collapsible::before,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-hover .e-icon-expandable::before {
  color: var(--lt-accent);
}

/* Optional menu-item leading icons (.e-list-icon used by some treeview configs) */
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-icon,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-img {
  color: var(--lt-text);
}

html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-active .e-list-icon,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item.e-hover .e-list-icon {
  color: var(--lt-accent);
}

/* User-block: keep avatar background transparent so the original
   image/initials show through, and replace the legacy --nav-color
   divider with a time-of-day-aware underline. */
html[data-living-active="1"] body .left-sidebar .righimg {
  background-color: transparent;
  border-bottom: 1px solid var(--lt-blend-time-accent, var(--lt-time-accent));
  transition: border-color 400ms ease;
}

/* ---------- (4) Generic icon containers / chips inside content ---------- */
html[data-living-active="1"] body .right_side .icon-btn,
html[data-living-active="1"] body .right_side .icon-wrapper,
html[data-living-active="1"] body .right_side button.btn-icon,
html[data-living-active="1"] body .right_side a.btn-icon,
html[data-living-active="1"] body .widget_section .icon-btn,
html[data-living-active="1"] body .widget_section .icon-wrapper {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--lt-text);
}

html[data-living-active="1"] body .right_side .icon-btn:hover,
html[data-living-active="1"] body .widget_section .icon-btn:hover,
html[data-living-active="1"] body .right_side button.btn-icon:hover,
html[data-living-active="1"] body .right_side a.btn-icon:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-accent-strong);
  border-color: var(--lt-border);
}

/* Bootstrap close button (X) inside themed popups */
html[data-living-active="1"] body .modal-content .btn-close,
html[data-living-active="1"] body .toast .btn-close,
html[data-living-active="1"] body .alert .btn-close,
html[data-living-active="1"] body .offcanvas .btn-close {
  filter: none;
}

html[data-living-active="1"][data-theme="night"] body .modal-content .btn-close,
html[data-living-active="1"][data-theme="night"] body .toast .btn-close,
html[data-living-active="1"][data-theme="night"] body .alert .btn-close,
html[data-living-active="1"][data-theme="night"] body .offcanvas .btn-close {
  filter: invert(1) grayscale(1) brightness(1.4);
}

/* Bootstrap offcanvas (slide-in panel) */
html[data-living-active="1"] body .offcanvas {
  background-color: var(--lt-surface);
  color: var(--lt-text);
  border-color: var(--lt-border);
}

html[data-living-active="1"] body .offcanvas-header {
  background-color: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html[data-living-active="1"] body .offcanvas-body {
  background-color: var(--lt-surface);
  color: var(--lt-text);
}

html[data-living-active="1"] body .offcanvas-backdrop {
  background-color: rgba(15, 25, 40, 0.45);
}

/* =========================================================
 * Coverage patches — header right side, sidebar footer +
 * scrollbars, form-text helpers. All driven by --lt-* tokens
 * so morning / day / dusk / night flow automatically.
 * ========================================================= */

/* Right-header nav links: ensure non-icon text follows theme,
   and provide a sensible default for any icon not explicitly
   mapped earlier (search, envelope, cog, bell, etc.). */
html[data-living-active="1"] body .main-header .right-header .nav-link,
html[data-living-active="1"] body .main-header .right-header .navbar-nav li a,
html[data-living-active="1"] body .main-header .right-header .navbar-nav li a > span,
html[data-living-active="1"] body .main-header .right-header .dropdown-toggle {
  color: var(--lt-text);
}

html[data-living-active="1"] body .main-header .right-header .navbar-nav li a:hover,
html[data-living-active="1"] body .main-header .right-header .navbar-nav li a:hover .fa,
html[data-living-active="1"] body .main-header .right-header .navbar-nav li a:hover .fas,
html[data-living-active="1"] body .main-header .right-header .navbar-nav li a:hover .far {
  color: var(--lt-accent-strong);
}

/* Catch-all FA icons inside the header so any future icon picks
   up the active accent instead of staying default cyan/black. */
html[data-living-active="1"] body .main-header .right-header .navbar-nav li a .fa,
html[data-living-active="1"] body .main-header .right-header .navbar-nav li a .fas,
html[data-living-active="1"] body .main-header .right-header .navbar-nav li a .far,
html[data-living-active="1"] body .main-header .right-header .navbar-nav li a .fab {
  color: var(--lt-accent);
}

/* Sidebar footer (Change Password / Logout) — link color +
   the small border-top divider above the block. */
html[data-living-active="1"] body .left-sidebar .side-footer {
  border-top: 1px solid var(--lt-border);
}

html[data-living-active="1"] body .left-sidebar .side-footer ul li a,
html[data-living-active="1"] body .left-sidebar .side-footer ul li .nav-link {
  color: var(--lt-text);
}

html[data-living-active="1"] body .left-sidebar .side-footer ul li a:hover,
html[data-living-active="1"] body .left-sidebar .side-footer ul li .nav-link:hover {
  color: var(--lt-accent);
}

/* User-name heading inside the avatar block follows theme */
html[data-living-active="1"] body .left-sidebar .righimg h6 {
  color: var(--lt-text);
}

/* Sidebar treeview: anchor text inherits the row text token so
   active/hover row tinting stays consistent across themes. */
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item .e-list-text a,
html[data-living-active="1"] body .left-sidebar .e-treeview .e-list-item .e-list-text {
  color: inherit;
}

/* Themed scrollbars on the chrome surfaces (sidebar, settings drawer,
   right widget). Webkit only — graceful degrade elsewhere. */
html[data-living-active="1"] body .left-sidebar,
html[data-living-active="1"] body .setting_sidebar,
html[data-living-active="1"] body .setting_sidebar .living-setting-panel-body,
html[data-living-active="1"] body .right-sidewidget {
  scrollbar-color: var(--lt-border) transparent;
  scrollbar-width: thin;
}

html[data-living-active="1"] body .left-sidebar::-webkit-scrollbar,
html[data-living-active="1"] body .setting_sidebar::-webkit-scrollbar,
html[data-living-active="1"] body .setting_sidebar .living-setting-panel-body::-webkit-scrollbar,
html[data-living-active="1"] body .right-sidewidget::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-living-active="1"] body .left-sidebar::-webkit-scrollbar-track,
html[data-living-active="1"] body .setting_sidebar::-webkit-scrollbar-track,
html[data-living-active="1"] body .setting_sidebar .living-setting-panel-body::-webkit-scrollbar-track,
html[data-living-active="1"] body .right-sidewidget::-webkit-scrollbar-track {
  background-color: transparent;
}

html[data-living-active="1"] body .left-sidebar::-webkit-scrollbar-thumb,
html[data-living-active="1"] body .setting_sidebar::-webkit-scrollbar-thumb,
html[data-living-active="1"] body .setting_sidebar .living-setting-panel-body::-webkit-scrollbar-thumb,
html[data-living-active="1"] body .right-sidewidget::-webkit-scrollbar-thumb {
  background-color: var(--lt-border);
  border-radius: 999px;
}

html[data-living-active="1"] body .left-sidebar::-webkit-scrollbar-thumb:hover,
html[data-living-active="1"] body .setting_sidebar::-webkit-scrollbar-thumb:hover,
html[data-living-active="1"] body .setting_sidebar .living-setting-panel-body::-webkit-scrollbar-thumb:hover,
html[data-living-active="1"] body .right-sidewidget::-webkit-scrollbar-thumb:hover {
  background-color: var(--lt-accent);
}

/* Sub-section helpers and "form-text" hint strings inside content
   need to track theme too — Bootstrap defaults them to a fixed gray. */
html[data-living-active="1"] body .right_side .form-text,
html[data-living-active="1"] body .widget_section .form-text,
html[data-living-active="1"] body .modal-content .form-text,
html[data-living-active="1"] body .right_side .invalid-feedback,
html[data-living-active="1"] body .widget_section .invalid-feedback {
  color: var(--lt-text-muted);
}

/* Bootstrap nav-pills inside content (some screens use them as
   sub-navigation) — track theme accent. */
html[data-living-active="1"] body .right_side .nav-pills .nav-link,
html[data-living-active="1"] body .widget_section .nav-pills .nav-link {
  color: var(--lt-text);
  background-color: transparent;
}

html[data-living-active="1"] body .right_side .nav-pills .nav-link.active,
html[data-living-active="1"] body .widget_section .nav-pills .nav-link.active {
  background-color: var(--lt-accent);
  color: #ffffff;
}

/* Day/Morning: the search box + sidebar surface are tinted now;
   keep the search input on the theme surface (not stark white) so
   it stays consistent with the active mood while still standing
   apart from the sidebar tint. */
html[data-living-active="1"][data-theme="morning"] body .sidebar-search .form-control,
html[data-living-active="1"][data-theme="day"] body .sidebar-search .form-control {
  background-color: var(--lt-surface);
}

html[data-living-active="1"][data-theme="morning"] body .sidebar-search .btn,
html[data-living-active="1"][data-theme="day"] body .sidebar-search .btn {
  background-color: var(--lt-surface);
}

/* =============================================================
 * Employee Portal coverage
 *
 * The Employee dashboard uses `.emp-header` (combined with
 * `.main-header`) and `.emp-sidebar` (combined with `.left-sidebar`).
 * Most of the work is already done by the `.main-header` and
 * `.left-sidebar` rules higher up in this file — their specificity
 * (html[data-living-active="1"] body .main-header / .left-sidebar)
 * beats style.css's plain `.emp-*` rules, so the themed header bg,
 * sidebar gradient, profile underline, transitions and toggler bars
 * all carry over for free.
 *
 * The overrides below patch the remaining hard-coded navy / yellow /
 * white chrome that style.css sets directly on `.emp-*` descendants
 * (logo swap, profile-hover, footer surface, nav-link borders &
 * hover, notification badge) so the Employee Portal feels identical
 * to the ERP dashboard at every hour of the day. No layout, spacing,
 * sizing or font changes — only colour, gradient, border and shadow
 * tokens are routed through the Living Theme variables.
 * ============================================================= */

/* Logo swap — color logo on light themes (style.css forces the white
   logo always; here we route it through the active theme so the navy
   logo shows on the cream / day / dusk surfaces and the white logo
   shows only on the dark Night surface). */
html[data-living-active="1"] body .emp-header .color-logo { display: block; }
html[data-living-active="1"] body .emp-header .white-logo { display: none; }

html[data-living-active="1"][data-theme="night"] body .emp-header .color-logo { display: none; }
html[data-living-active="1"][data-theme="night"] body .emp-header .white-logo { display: block; }

/* Header right-side icons — `.fa-envelope-open` and `.fa-bell` are
   colored white / yellow in style.css with `.emp-header ...` prefixes
   that out-specify the generic `.main-header` rules above. Bring them
   back onto the theme accent for consistency with ERP. */
html[data-living-active="1"] body .emp-header .right-header .navbar-nav li a .fa-envelope-open,
html[data-living-active="1"] body .emp-header .right-header .navbar-nav li a .fa-bell,
html[data-living-active="1"] body .emp-header .right-header .navbar-nav li a .fa-cog,
html[data-living-active="1"] body .emp-header .right-header .navbar-nav li a .fa-expand-arrows-alt {
  color: var(--lt-accent);
  transition: color 400ms ease;
}

/* Notification indicator badge — keep semantic red, but match the
   ring to the active header surface so the badge "floats" above the
   themed header instead of using the old white-on-navy ring. */
html[data-living-active="1"] body .emp-header .right-header .navbar-nav li a .indicator {
  border-color: var(--lt-blend-header, var(--lt-header-bg));
  color: #ffffff;
  background-color: #dc3545;
}

/* Profile block hover — style.css uses #043988 (deep navy). Route it
   through the soft accent so light themes don't suddenly flash a
   navy panel under the user's name. */
html[data-living-active="1"] body .emp-sidebar .righimg:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-text);
}

/* Sidebar footer (logout row) — style.css paints it solid #00317D
   with #1c4686 borders. Route both through the theme tokens: the
   panel reasserts the sidebar bg at the bottom (so the gradient
   fade doesn't make the logout block look washed out), with a
   theme-aware divider on top. */
html[data-living-active="1"] body .emp-sidebar .side-footer {
  background-color: var(--lt-blend-sidebar, var(--lt-sidebar-bg));
  border-color: var(--lt-border);
  border-top: 1px solid var(--lt-border);
  box-shadow: 0 -1px 0 var(--lt-accent-soft);
  transition: background-color 400ms ease, border-color 400ms ease;
}

html[data-living-active="1"] body .emp-sidebar .side-footer ul li a {
  color: var(--lt-text);
}

html[data-living-active="1"] body .emp-sidebar .side-footer ul li a:hover {
  color: var(--lt-accent);
}

/* Emp navigation rows — the per-row divider is hard-coded #1c4686 in
   style.css, the hover is #043988. Route both through the theme so
   the menu rows fade in mood with the time of day. */
html[data-living-active="1"] body .emp-sidebar .emp_navigation li a {
  color: var(--lt-text);
  background-color: transparent;
  border-bottom: 1px solid var(--lt-border);
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

html[data-living-active="1"] body .emp-sidebar .emp_navigation li a:hover,
html[data-living-active="1"] body .emp-sidebar .emp_navigation li a:focus {
  color: var(--lt-accent-strong);
  background-color: var(--lt-accent-soft);
  outline: none;
}

/* If a script ever marks a row active (`.active` on <li> or <a>),
   keep it on the same soft-accent pill instead of falling back to
   the legacy navy. */
html[data-living-active="1"] body .emp-sidebar .emp_navigation li.active > a,
html[data-living-active="1"] body .emp-sidebar .emp_navigation li > a.active {
  color: var(--lt-accent);
  background-color: var(--lt-accent-soft);
}

/* Sidebar nav bitmap/SVG icons — do not let Android WebView forced-dark
   or legacy filters recolor assets (black icons were showing as white). */
html[data-living-active="1"] body .emp-sidebar .emp_navigation li a img {
  filter: none !important;
  -webkit-filter: none !important;
}

html[data-living-active="1"] {
  color-scheme: light;
}

html[data-living-active="1"][data-theme="night"] {
  color-scheme: dark;
}

/* Iframe host (`<main id="right-widget" class="right-sidewidget">`)
   stays transparent so the themed body gradient shows through. The
   inner iframe itself gets a themed fallback so that the brief moment
   before a child page paints its own body doesn't flash white. */
html[data-living-active="1"] body #right-widget.right-sidewidget,
html[data-living-active="1"] body .right-sidewidget {
  background-color: transparent;
  color: var(--lt-text);
}

html[data-living-active="1"] body #right-widget #inneriframe,
html[data-living-active="1"] body .right-sidewidget #inneriframe {
  background-color: var(--lt-blend-bg, var(--lt-app-bg));
  transition: background-color 600ms ease;
}

/* =============================================================
 * Profile / section heading backgrounds + light-grey row borders
 *
 * Several detail pages (Employee Profile, Leave Details, Junior
 * Leaves, Consignment Details, etc.) paint their section heading
 * bars and zebra rows with hard-coded greys (#f2f2f2, #f0f0f0,
 * #f7f7f7) and Bootstrap's `--bs-gray-200` for their dividers.
 * Those wash out the active theme — bright on Night, mismatched
 * on Dusk/Morning. Route them through the same `--lt-*` tokens
 * the rest of the UI already uses.
 * ============================================================= */

/* The "Personal Info" / "Employment Info" / etc. section heading
   bars in the Employee Profile page (and any other view using the
   same .personal-info pattern). Only re-paint the existing shadow
   and the existing heading bar bg / divider — no new borders or
   border-radii, so the layout is byte-for-byte unchanged. */
html[data-living-active="1"] body .right_side .user-widget .details-ofemp .form-wrapper .personal-info,
html[data-living-active="1"] body .user-widget .details-ofemp .form-wrapper .personal-info,
html[data-living-active="1"] body .details-ofemp .personal-info {
  box-shadow: 0 6px 18px var(--lt-accent-soft);
  transition: box-shadow 400ms ease;
}

html[data-living-active="1"] body .right_side .user-widget .details-ofemp .form-wrapper .personal-info h5,
html[data-living-active="1"] body .user-widget .details-ofemp .form-wrapper .personal-info h5,
html[data-living-active="1"] body .details-ofemp .personal-info h5 {
  background-color: var(--lt-table-header-bg);
  color: var(--lt-text);
  transition: background-color 400ms ease, color 400ms ease;
}

/* Per-row divider inside the same blocks — style.css uses
   `var(--bs-gray-200)` which renders as a bright line on every
   dark theme. Route through the active theme border. */
html[data-living-active="1"] body .right_side .user-widget .details-ofemp .form-wrapper .personal-info .repeat-container,
html[data-living-active="1"] body .user-widget .details-ofemp .form-wrapper .personal-info .repeat-container,
html[data-living-active="1"] body .details-ofemp .personal-info .repeat-container {
  border-bottom-color: var(--lt-border);
  transition: border-color 400ms ease;
}

/* Section heading inside the `emp-trans-details` block (transfer
   /service history pages) — colour comes from `--heading-color`,
   which now points at `--lt-text`. Re-anchor the border-top to
   the theme border. */
html[data-living-active="1"] body .widget_section .form-wrapper .emp-trans-details {
  border-top: 1px solid var(--lt-border);
}

html[data-living-active="1"] body .widget_section .form-wrapper .emp-trans-details h5 {
  color: var(--lt-accent-strong);
}

/* Junior-leave details — zebra rows + hover state, used inside
   the Teams / Approvals views. */
html[data-living-active="1"] body .right_side .widget_section.junior-leave-details .details:nth-child(2n) {
  background-color: var(--lt-table-row-alt);
}

html[data-living-active="1"] body .right_side .widget_section.junior-leave-details .details:hover {
  background-color: var(--lt-accent-soft);
}

/* Consignment details panel (Imprest / approvals views). */
html[data-living-active="1"] body .right_side .widget_section .consignment-details {
  background-color: var(--lt-table-header-bg);
  color: var(--lt-text);
}

/* Click-hover row hover state used across leave/grid views. */
html[data-living-active="1"] body .right_side .leave-details .widget_section .form-wrapper a.text-decoration-none:hover,
html[data-living-active="1"] body .right_side .widget_section .click-hover:hover {
  background-color: var(--lt-accent-soft);
  color: var(--lt-text);
}

/* Striped panels inside leave-details forms. */
html[data-living-active="1"] body .right_side .leave-details .widget_section .form-wrapper a.text-decoration-none:nth-child(2n) {
  background-color: var(--lt-table-row-alt);
}

/* =============================================================
 * Breadcrumb chevrons + last-step accent (the ::after arrows
 * between crumbs and the active crumb colour). On dark themes the
 * old hard-coded #000 and #1258c1 disappear or mismatch.
 * ============================================================= */
html[data-living-active="1"] body .breadcrumbs-list .arrow_box a,
html[data-living-active="1"] body .breadcrumbs-list .arrow_box a .fas {
  color: var(--lt-text);
  transition: color 400ms ease;
}

html[data-living-active="1"] body .breadcrumbs-list .arrow_box::after {
  color: var(--lt-text-muted);
}

html[data-living-active="1"] body .breadcrumbs-list .arrow_box a:hover,
html[data-living-active="1"] body .breadcrumbs-list .arrow_box a:hover .fas {
  color: var(--lt-accent-strong);
}

html[data-living-active="1"] body .breadcrumbs-list .arrow_box:last-child a,
html[data-living-active="1"] body .breadcrumbs-list .arrow_box:last-child .fas {
  color: var(--lt-accent);
}

/* Soft veil behind the breadcrumb bar — style.css uses an opaque
   light grey that hides the theme. Replace with a translucent
   surface so the underlying gradient still shows through. */
html[data-living-active="1"] body .breadcrumbs-list::after {
  background-color: var(--lt-surface-soft, var(--lt-surface));
  opacity: 0.65;
}

/* =============================================================
 * Surfaces that still resolve through `--heading-color` (legacy
 * navy) as a *background* — the alias `--heading-color: var(--lt-text)`
 * gives them dark text-tone on light themes (looks correct) but
 * inverts on Night (becomes near-white). Re-anchor each one to
 * `--lt-accent` so the chrome stays in the theme family.
 * ============================================================= */

/* Salary toggle group active state. */
html[data-living-active="1"] body .salary_buttons .btn-check:checked + .salary-btn,
html[data-living-active="1"] body .salary_buttons .btn-check:active + .salary-btn,
html[data-living-active="1"] body .salary_buttons .salary-btn:active,
html[data-living-active="1"] body .salary-btn.active,
html[data-living-active="1"] body .salary_buttons .show > .salary-btn.dropdown-toggle {
  background-color: var(--lt-accent);
  color: #ffffff;
  border-color: var(--lt-accent);
}

html[data-living-active="1"] body .salary_buttons .readmore.salary-btn {
  background-color: var(--lt-text-muted);
  color: #ffffff;
}

/* Salary-section radio / checkbox checked state. */
html[data-living-active="1"] body .right_side .salary-section .form-check-input:checked {
  background-color: var(--lt-accent);
  border-color: var(--lt-accent);
}

/* Calendar today / selected day. */
html[data-living-active="1"] body .right_side .clander_widget .e-content td.e-today.e-selected span.e-day,
html[data-living-active="1"] body .right_side .clander_widget .e-content td.e-selected span.e-day {
  background-color: var(--lt-accent) !important;
  border-color: var(--lt-accent) !important;
  color: #ffffff !important;
}

/* Popup-menu / menu-popup Syncfusion dialog header bars (used by
   the in-app menu picker and a few approval popups). */
html[data-living-active="1"] body .popup_menu.e-dialog .e-dlg-content h5 {
  background-color: var(--lt-accent);
  color: #ffffff;
}

html[data-living-active="1"] body .menu-popup.e-dialog .e-dlg-header-content {
  background-color: var(--lt-accent);
}

html[data-living-active="1"] body .menu-popup.e-dialog .e-dlg-header {
  color: #ffffff;
}

/* Hover tooltip on collapsed sidebar items. */
html[data-living-active="1"] body .left-sidebar ul li:hover .tool {
  background-color: var(--lt-accent);
  color: #ffffff;
}

/* Setting-panel "Light / Dark" select group selected state and the
   small theme swatch focus ring — these were the only two spots
   left in setting_sidebar that still resolved through the legacy
   navy variable. */
html[data-living-active="1"] body .setting_sidebar .selectgroup .selectgroup-input-radio:focus + .selectgroup-button,
html[data-living-active="1"] body .setting_sidebar .selectgroup .selectgroup-input-radio:checked + .selectgroup-button {
  background-color: var(--lt-accent);
  color: #ffffff;
  border-color: var(--lt-accent);
}

/* =============================================================
 * Self-healing safety net for legacy "white text on navy heading"
 * pairs that survive as INLINE styles inside view files.
 *
 * The pre-theme design painted .modal-header backgrounds with the
 * legacy --heading-color (deep navy) and added child elements with
 * `style="color: #fff"` for invoice numbers, status labels, etc.
 * Now that Living Theme re-paints .modal-header to var(--lt-surface)
 * (a LIGHT cream on Morning/Day/Dusk), the inline white text on
 * those children becomes invisible.
 *
 * External CSS can't override an inline `style="…color:#fff…"`
 * unless we use `!important` AND a selector that wins. The block
 * below targets the inline declaration via attribute-substring
 * selectors, scoped tightly to `.modal-header` so the override
 * never reaches white text that is legitimately painted on a
 * solid coloured button or badge elsewhere on the page.
 *
 * This block is purely defensive — view files that still ship the
 * old `style="color:#fff"` inside a modal-header will read
 * correctly on every theme without needing per-view edits.
 * ============================================================= */
html[data-living-active="1"] body .modal-header [style*="color: #fff"],
html[data-living-active="1"] body .modal-header [style*="color:#fff"],
html[data-living-active="1"] body .modal-header [style*="color: #ffffff"],
html[data-living-active="1"] body .modal-header [style*="color:#ffffff"],
html[data-living-active="1"] body .modal-header [style*="color: white"],
html[data-living-active="1"] body .modal-header [style*="color:white"] {
  color: var(--lt-text) !important;
}

/* Same defensive override for Syncfusion dialog headers and the
   legacy popup-modal header bar — both surfaces are themed to a
   light/cream tone on Morning/Day/Dusk. */
html[data-living-active="1"] body .e-dialog .e-dlg-header-content [style*="color: #fff"],
html[data-living-active="1"] body .e-dialog .e-dlg-header-content [style*="color:#fff"],
html[data-living-active="1"] body .e-dialog .e-dlg-header-content [style*="color: #ffffff"],
html[data-living-active="1"] body .e-dialog .e-dlg-header-content [style*="color:#ffffff"],
html[data-living-active="1"] body .e-dialog .e-dlg-header-content [style*="color: white"],
html[data-living-active="1"] body .e-dialog .e-dlg-header-content [style*="color:white"] {
  color: var(--lt-text) !important;
}