/* ============================================================================
   QoR-ERP — theme token system (ported 1:1 from the QoR-ERP design)
   Apply a theme by setting data-theme="<id>" on an ancestor element.
   IDs: light, navy (alias dark-sidebar), dark, emerald, rose, carbon
   ========================================================================== */

/* ---------- 1. LIGHT (white sidebar, blue accent) ---------- */
[data-theme="light"]{
  --erp-canvas:#f4f6fa; --erp-surface:#ffffff; --erp-surface-2:#f5f7fa;
  --erp-border:#cbd5e1; --erp-text:#000000; --erp-text-muted:#18181b; --erp-text-faint:#3f3f46;
  --erp-accent:#2563eb; --erp-accent-soft:#eef4ff; --erp-topbar-bg:#ffffff;
  --erp-pos:#16a34a; --erp-neg:#dc2626; --erp-warn:#c2710c;
  --erp-pos-soft:#e7f6ec; --erp-neg-soft:#fdeaea; --erp-warn-soft:#fbf0e1;
  --erp-sidebar-bg:#ffffff; --erp-sidebar-title:#000000; --erp-sidebar-text:#18181b; --erp-sidebar-text-muted:#52525b;
  --erp-sidebar-hover:#f1f5f9; --erp-sidebar-active-bg:#eef4ff; --erp-sidebar-active-text:#2563eb;
  --erp-sidebar-border:#e7ebf0; --erp-sidebar-dot:#a1a1aa; --erp-sidebar-badge-bg:#eef4ff; --erp-sidebar-badge-text:#2563eb;
}
/* ---------- 2. NAVY (dark navy sidebar, light workspace) ---------- */
[data-theme="navy"],[data-theme="dark-sidebar"]{
  --erp-canvas:#f4f6fa; --erp-surface:#ffffff; --erp-surface-2:#f5f7fa;
  --erp-border:#cbd5e1; --erp-text:#000000; --erp-text-muted:#18181b; --erp-text-faint:#3f3f46;
  --erp-accent:#2563eb; --erp-accent-soft:#eef4ff; --erp-topbar-bg:#ffffff;
  --erp-pos:#16a34a; --erp-neg:#dc2626; --erp-warn:#c2710c;
  --erp-pos-soft:#e7f6ec; --erp-neg-soft:#fdeaea; --erp-warn-soft:#fbf0e1;
  --erp-sidebar-bg:#0f1729; --erp-sidebar-title:#ffffff; --erp-sidebar-text:#cbd5e1; --erp-sidebar-text-muted:#94a3b8;
  --erp-sidebar-hover:#1b2740; --erp-sidebar-active-bg:#2563eb; --erp-sidebar-active-text:#ffffff;
  --erp-sidebar-border:#1b2740; --erp-sidebar-dot:#64748b; --erp-sidebar-badge-bg:#1b2740; --erp-sidebar-badge-text:#93b4ff;
}
/* ---------- 3. DARK (cool blue, full dark) ---------- */
[data-theme="dark"]{
  --erp-canvas:#0b1120; --erp-surface:#121b30; --erp-surface-2:#1a2540;
  --erp-border:#22304c; --erp-text:#f8fafc; --erp-text-muted:#cbd5e1; --erp-text-faint:#94a3b8;
  --erp-accent:#3b82f6; --erp-accent-soft:#16294a; --erp-topbar-bg:#0e1626;
  --erp-pos:#34d399; --erp-neg:#f87171; --erp-warn:#fbbf24;
  --erp-pos-soft:#10271d; --erp-neg-soft:#2c1517; --erp-warn-soft:#2a2110;
  --erp-sidebar-bg:#0a0f1c; --erp-sidebar-title:#f8fafc; --erp-sidebar-text:#cbd5e1; --erp-sidebar-text-muted:#94a3b8;
  --erp-sidebar-hover:#16203a; --erp-sidebar-active-bg:#16294a; --erp-sidebar-active-text:#60a5fa;
  --erp-sidebar-border:#1a2540; --erp-sidebar-dot:#475569; --erp-sidebar-badge-bg:#16294a; --erp-sidebar-badge-text:#60a5fa;
}
/* ---------- 4. EMERALD (light, teal accent, white sidebar) ---------- */
[data-theme="emerald"]{
  --erp-canvas:#f1f6f4; --erp-surface:#ffffff; --erp-surface-2:#eef3f1;
  --erp-border:#c2d4cd; --erp-text:#000000; --erp-text-muted:#18181b; --erp-text-faint:#3f3f46;
  --erp-accent:#0d9488; --erp-accent-soft:#e2f3f0; --erp-topbar-bg:#ffffff;
  --erp-pos:#16a34a; --erp-neg:#dc2626; --erp-warn:#c2710c;
  --erp-pos-soft:#e7f6ec; --erp-neg-soft:#fdeaea; --erp-warn-soft:#fbf0e1;
  --erp-sidebar-bg:#ffffff; --erp-sidebar-title:#000000; --erp-sidebar-text:#18181b; --erp-sidebar-text-muted:#52525b;
  --erp-sidebar-hover:#eef3f1; --erp-sidebar-active-bg:#e2f3f0; --erp-sidebar-active-text:#0d9488;
  --erp-sidebar-border:#dde7e2; --erp-sidebar-dot:#a1a1aa; --erp-sidebar-badge-bg:#e2f3f0; --erp-sidebar-badge-text:#0d9488;
}
/* ---------- 5. ROSE (light, pink-magenta accent, white sidebar) ---------- */
[data-theme="rose"]{
  --erp-canvas:#faf4f5; --erp-surface:#ffffff; --erp-surface-2:#f9f0f2;
  --erp-border:#e6cdd5; --erp-text:#000000; --erp-text-muted:#18181b; --erp-text-faint:#3f3f46;
  --erp-accent:#db2777; --erp-accent-soft:#fce7f1; --erp-topbar-bg:#ffffff;
  --erp-pos:#16a34a; --erp-neg:#dc2626; --erp-warn:#c2710c;
  --erp-pos-soft:#e7f6ec; --erp-neg-soft:#fdeaea; --erp-warn-soft:#fbf0e1;
  --erp-sidebar-bg:#ffffff; --erp-sidebar-title:#000000; --erp-sidebar-text:#18181b; --erp-sidebar-text-muted:#52525b;
  --erp-sidebar-hover:#f9f0f2; --erp-sidebar-active-bg:#fce7f1; --erp-sidebar-active-text:#db2777;
  --erp-sidebar-border:#f1e1e5; --erp-sidebar-dot:#a1a1aa; --erp-sidebar-badge-bg:#fce7f1; --erp-sidebar-badge-text:#db2777;
}
/* ---------- 6. CARBON (warm charcoal dark, amber accent) ---------- */
[data-theme="carbon"]{
  --erp-canvas:#1a1714; --erp-surface:#24201b; --erp-surface-2:#2f2a22;
  --erp-border:#3a342b; --erp-text:#ffffff; --erp-text-muted:#e4e4e7; --erp-text-faint:#a1a1aa;
  --erp-accent:#f59e0b; --erp-accent-soft:#3a2c12; --erp-topbar-bg:#141210;
  --erp-pos:#4ade80; --erp-neg:#f87171; --erp-warn:#fbbf24;
  --erp-pos-soft:#15281a; --erp-neg-soft:#2c1716; --erp-warn-soft:#2e2410;
  --erp-sidebar-bg:#110f0c; --erp-sidebar-title:#ffffff; --erp-sidebar-text:#e4e4e7; --erp-sidebar-text-muted:#a1a1aa;
  --erp-sidebar-hover:#24201b; --erp-sidebar-active-bg:#3a2c12; --erp-sidebar-active-text:#fbbf24;
  --erp-sidebar-border:#2a251f; --erp-sidebar-dot:#71717a; --erp-sidebar-badge-bg:#3a2c12; --erp-sidebar-badge-text:#fbbf24;
}

/* ---------- 7. ASH / LIGHT ASH (sleek platinum light ash, cool slate accent) ---------- */
[data-theme="ash"],[data-theme="light-ash"]{
  --erp-canvas:#e5e7eb; --erp-surface:#ffffff; --erp-surface-2:#f1f3f5;
  --erp-border:#cbd5e1; --erp-text:#000000; --erp-text-muted:#1e293b; --erp-text-faint:#475569;
  --erp-accent:#475569; --erp-accent-soft:#e2e8f0; --erp-topbar-bg:#ffffff;
  --erp-pos:#16a34a; --erp-neg:#dc2626; --erp-warn:#c2710c;
  --erp-pos-soft:#e7f6ec; --erp-neg-soft:#fdeaea; --erp-warn-soft:#fbf0e1;
  --erp-sidebar-bg:#ffffff; --erp-sidebar-title:#000000; --erp-sidebar-text:#1e293b; --erp-sidebar-text-muted:#64748b;
  --erp-sidebar-hover:#f1f5f9; --erp-sidebar-active-bg:#e2e8f0; --erp-sidebar-active-text:#0f172a;
  --erp-sidebar-border:#cbd5e1; --erp-sidebar-dot:#94a3b8; --erp-sidebar-badge-bg:#e2e8f0; --erp-sidebar-badge-text:#334155;
}

/* ---------- 8. QOR BRAND (official QoR Forest Green #006837 & Crimson Red #d3122a, light mint canvas) ---------- */
[data-theme="qor"],[data-theme="qor-brand"]{
  --erp-canvas:#f2f6f4; --erp-surface:#ffffff; --erp-surface-2:#e6efe9;
  --erp-border:#b8d5c7; --erp-text:#000000; --erp-text-muted:#11241a; --erp-text-faint:#3c5649;
  --erp-accent:#006837; --erp-accent-soft:#e2f2eb; --erp-topbar-bg:#ffffff;
  --erp-pos:#006837; --erp-neg:#d3122a; --erp-warn:#d97706;
  --erp-pos-soft:#e2f2eb; --erp-neg-soft:#fdeaea; --erp-warn-soft:#fef3c7;
  --erp-sidebar-bg:#ffffff; --erp-sidebar-title:#006837; --erp-sidebar-text:#11241a; --erp-sidebar-text-muted:#4c685b;
  --erp-sidebar-hover:#eef7f2; --erp-sidebar-active-bg:#006837; --erp-sidebar-active-text:#ffffff;
  --erp-sidebar-border:#b8d5c7; --erp-sidebar-dot:#006837; --erp-sidebar-badge-bg:#e2f2eb; --erp-sidebar-badge-text:#006837;
}

/* ---------- 9. SAP BTP RISE (SAP Fiori Horizon Design System) ---------- */
[data-theme="sap-btp"],[data-theme="sap-rise"],[data-theme="sap-horizon"]{
  --erp-canvas:#f5f6f8; --erp-surface:#ffffff; --erp-surface-2:#f0f3f6;
  --erp-border:#d9e1e8; --erp-text:#1d2d3e; --erp-text-muted:#324558; --erp-text-faint:#556b82;
  --erp-accent:#0a6ed1; --erp-accent-soft:#eef6fc; --erp-topbar-bg:#1d2d3e;
  --erp-pos:#107e3e; --erp-neg:#bb0000; --erp-warn:#e28a00;
  --erp-pos-soft:#e5f6ed; --erp-neg-soft:#fdebeb; --erp-warn-soft:#fff8e6;
  --erp-sidebar-bg:#ffffff; --erp-sidebar-title:#1d2d3e; --erp-sidebar-text:#1d2d3e; --erp-sidebar-text-muted:#556b82;
  --erp-sidebar-hover:#edf4fb; --erp-sidebar-active-bg:#eef6fc; --erp-sidebar-active-text:#0a6ed1;
  --erp-sidebar-border:#d9e1e8; --erp-sidebar-dot:#0a6ed1; --erp-sidebar-badge-bg:#eef6fc; --erp-sidebar-badge-text:#0a6ed1;
}

/* Accent as an RGB triplet — needed for the shell's rgba(var(--accent-rgb), a) usages. */
[data-theme="light"],[data-theme="navy"],[data-theme="dark-sidebar"]{ --erp-accent-rgb:37,99,235; }
[data-theme="dark"]{    --erp-accent-rgb:59,130,246; }
[data-theme="emerald"]{ --erp-accent-rgb:13,148,136; }
[data-theme="rose"]{    --erp-accent-rgb:219,39,119; }
[data-theme="carbon"]{  --erp-accent-rgb:245,158,11; }
[data-theme="ash"],[data-theme="light-ash"]{ --erp-accent-rgb:71,85,105; }
[data-theme="qor"],[data-theme="qor-brand"]{ --erp-accent-rgb:0,104,55; }
[data-theme="sap-btp"],[data-theme="sap-rise"],[data-theme="sap-horizon"]{ --erp-accent-rgb:10,110,209; }

/* ============================================================================
   Bridge: map the app shell's legacy CSS variables onto the --erp-* tokens so
   the existing layout, topbar, dashboard and components re-skin automatically
   with whichever QoR theme is active on the shell.
   ========================================================================== */
.bs25-shell[data-theme]{
  --accent:            var(--erp-accent);
  --accent-rgb:        var(--erp-accent-rgb);
  --accent-light:      var(--erp-accent-soft);
  --bg-page:           var(--erp-canvas);
  --bg-card:           var(--erp-surface);
  --text-primary:      var(--erp-text);
  --text-secondary:    var(--erp-text-muted);
  --text-muted:        var(--erp-text-faint);
  --border:            var(--erp-border);
  --success:           var(--erp-pos);
  --warn:              var(--erp-warn);
  --danger:            var(--erp-neg);
  --sidebar-bg:        var(--erp-sidebar-bg);
  --sidebar-header-bg: var(--erp-sidebar-bg);
  --sidebar-border:    var(--erp-sidebar-border);
}

/* ============================================================================
   Grid Theme Integration (VirtualAliGrid & AliGrid)
   Ensures grid components adapt automatically to active QoR themes
   ========================================================================== */

/* AliGrid Token Binding */
/* AliGrid Token Binding */
.ali-grid-container {
  --ali-grid-border:        var(--erp-border, #dee2e6) !important;
  --ali-grid-header-bg:     var(--erp-surface-2, #f8f9fa) !important;
  --ali-grid-focus:         var(--erp-accent, #2563eb) !important;
  --ali-grid-readonly-bg:   var(--erp-surface, #ffffff) !important;
  --ali-row-hover:          var(--erp-accent-soft, rgba(37, 99, 235, 0.1)) !important;
  --ali-row-even:           var(--erp-surface, #ffffff) !important;
  --ali-row-even-readonly:  var(--erp-surface, #ffffff) !important;
  --ali-header-text:        var(--erp-text, #000000) !important;
  --ali-cell-text:          var(--erp-text, #000000) !important;
  --ali-readonly-text:      var(--erp-text, #000000) !important;
  --ali-header-bottom:      1px solid var(--erp-border, #dee2e6) !important;
  background-color:         var(--erp-surface, #ffffff) !important;
  color:                    var(--erp-text, #000000) !important;
}

.ali-grid-toolbar {
  background: var(--erp-surface-2, #f8fafc) !important;
  border-color: var(--erp-border, #e2e8f0) !important;
  color: var(--erp-text, #000000) !important;
}

/* Generic Grid Body Item Rows & Cells — lighter surface background to contrast with grid headers */
.ali-grid-container tbody td,
.ali-grid-container tbody tr td,
.ali-td-readonly,
.ali-cell,
.ali-cell.ali-readonly,
.excel-cell,
.grid-body .excel-cell,
.variant-grid input {
  background-color: var(--erp-surface, #ffffff) !important;
  color: var(--erp-text, #000000) !important;
  border-color: var(--erp-border, #e2e8f0) !important;
  font-weight: 400 !important;
}

.ali-toolbar-btn, .ali-toolbar-icon-btn, .ali-gear-btn {
  background: var(--erp-surface, #ffffff) !important;
  color: var(--erp-text, #000000) !important;
  border-color: var(--erp-border, #e2e8f0) !important;
}

.ali-toolbar-btn:hover, .ali-toolbar-icon-btn:hover, .ali-gear-btn:hover {
  background: var(--erp-accent-soft, #eef4ff) !important;
  border-color: var(--erp-accent, #2563eb) !important;
  color: var(--erp-accent, #2563eb) !important;
}

/* VirtualAliGrid Token Binding */
.grid-container {
  border-color: var(--erp-border, #cfd6df) !important;
  background: var(--erp-surface, #ffffff) !important;
  color: var(--erp-text, #000000) !important;
}

.grid-header, .grid-header .excel-cell, .header-cell, .ali-grid-head th {
  background: var(--erp-surface-2, #e2ecf8) !important;
  color: var(--erp-text, #000000) !important;
  border-color: var(--erp-border, #b8c2ce) !important;
  box-shadow: none !important;
}

.grid-header *, .header-cell *, .header-content, .header-text, .ali-grid-head th * {
  color: var(--erp-text, #000000) !important;
}

.footer-cell {
  background: var(--erp-surface-2, #f5f7fa) !important;
  color: var(--erp-text, #0f172a) !important;
}

.selector-col .excel-cell, .selector-col .header-cell, .selector-col .footer-cell {
  background: var(--erp-surface-2, #f1f5f9) !important;
  color: var(--erp-text, #0f172a) !important;
  box-shadow: none !important;
}

.sub-total-row .footer-cell {
  background: var(--erp-accent-soft, #dce8f6) !important;
  color: var(--erp-text, #0f172a) !important;
  border-top: 1px solid var(--erp-border, #b7c9df) !important;
}

.grand-total-row .footer-cell {
  background: var(--erp-accent-soft, #bfd6ee) !important;
  color: var(--erp-accent, #2563eb) !important;
  border-top: 2px solid var(--erp-accent, #2563eb) !important;
}

.selected-row .excel-cell {
  background: var(--erp-accent-soft, rgba(37, 99, 235, 0.15)) !important;
  color: var(--erp-text, #0f172a) !important;
}

.toolbar-actions .grid-toolbar-btn {
  border-color: var(--erp-border, #9aa8ba) !important;
  color: var(--erp-text, #344256) !important;
  background: var(--erp-surface, #f4f6f9) !important;
}

.toolbar-actions .grid-toolbar-btn:hover {
  border-color: var(--erp-accent, #2563eb) !important;
  color: var(--erp-accent, #2563eb) !important;
  background: var(--erp-accent-soft, #e7ecf3) !important;
}

/* ============================================================================
   Read-only & Disabled Form Field Theme Integration (Outer Form Controls Only)
   ========================================================================== */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly],
input:disabled,
input[readonly],
select:disabled,
select[readonly],
textarea:disabled,
textarea[readonly],
.sap-readonly .sap-input[readonly],
.sap-input:disabled,
.sap-input[readonly],
.erp-mc-input:disabled,
.erp-mc-input[readonly],
.erp-readonly-field,
.erp-display-field,
.pr-header-control:disabled,
.pr-header-control[readonly],
.pr-header-control.form-control[disabled],
.pr-header-control.form-control[readonly] {
  background-color: var(--erp-surface-2, #f5f7fa) !important;
  border-color: var(--erp-border, #cbd5e1) !important;
  color: var(--erp-text, #000000) !important;
  opacity: 1 !important;
}

/* ============================================================================
   Generic Level Grid Column Alignment & Scroll Sync Fix (VirtualAliGrid & AliGrid)
   Prevents header column and body item column displacement during vertical & horizontal scrolling
   ========================================================================== */

/* 1. Reserve stable scrollbar gutter so vertical scrollbar does not displace header/item columns */
.grid-container,
.ali-grid-container,
.ali-grid-body-wrap,
.mobile-grid {
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

/* 2. Ensure grid header and grid body rows use identical box-sizing and width rendering */
.grid-header,
.grid-body,
.ali-grid-header-wrap,
.ali-grid-body-wrap {
  box-sizing: border-box;
  width: 100%;
}

.grid-header .row,
.grid-body .row,
.ali-grid-head tr,
.ali-grid-body tr {
  box-sizing: border-box;
}

/* 3. Generic Left Sticky Columns (Selector / Checkbox / Fixed columns) */
.fixed-col,
.selector-col,
.ali-freeze-left {
  position: sticky !important;
  left: 0 !important;
  z-index: 10 !important;
  background-clip: padding-box;
}

.grid-header .fixed-col,
.grid-header .selector-col,
.ali-grid-head .ali-freeze-left,
.header-cell.fixed-col {
  z-index: 25 !important;
}

/* 4. Generic Right Sticky Columns (Actions column edit/delete/add) */
.actions-header-col,
.actions-col,
.actions-cell,
.ali-freeze-right {
  position: sticky !important;
  right: 0 !important;
  z-index: 10 !important;
  background-clip: padding-box;
}

.grid-header .actions-header-col,
.ali-grid-head .ali-freeze-right {
  z-index: 25 !important;
}

/* 5. Ensure data cell borders and widths stay aligned without layout shifts */
.grid-wrapper .excel-cell,
.ali-grid-container .ali-cell {
  box-sizing: border-box !important;
}