/**
 * AdabaCRM centralized theme system — 3.6.1
 *
 * One semantic token contract controls the Blue, Green, and Light themes.
 * This stylesheet is loaded after legacy component styles while the React
 * interface is migrated away from historical inline colour values.
 */

:root,
html[data-sgcrm-theme="light"],
body[data-sgcrm-theme="light"],
#sgcrm-root[data-sgcrm-theme="light"] {
  color-scheme: light;
  --crm-primary: #111827;
  --crm-primary-hover: #0f172a;
  --crm-primary-contrast: #ffffff;
  --crm-primary-soft: #eef1f5;
  --crm-secondary: #475569;
  --crm-bg: #f7f9fc;
  --crm-surface: #ffffff;
  --crm-surface-soft: #f3f6f9;
  --crm-surface-raised: #ffffff;
  --crm-text: #0f172a;
  --crm-text-muted: #526177;
  --crm-text-subtle: #6b7b90;
  --crm-border: #dce3ec;
  --crm-border-strong: #c7d1de;
  --crm-hover: #f0f3f7;
  --crm-active: #e8edf3;
  --crm-focus: rgba(17, 24, 39, .2);
  --crm-sidebar: #ffffff;
  --crm-sidebar-end: #f7f9fc;
  --crm-sidebar-text: #263548;
  --crm-sidebar-muted: #66758a;
  --crm-sidebar-hover: #eef2f6;
  --crm-sidebar-active: #111827;
  --crm-sidebar-active-text: #ffffff;
  --crm-modal: #ffffff;
  --crm-modal-backdrop: rgba(15, 23, 42, .58);
  --crm-input: #ffffff;
  --crm-input-disabled: #eef2f6;
  --crm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --crm-shadow-md: 0 12px 30px rgba(15, 23, 42, .09);
  --crm-shadow-lg: 0 28px 80px rgba(15, 23, 42, .18);
  --crm-success: #0b8f65;
  --crm-success-soft: #e4f6ef;
  --crm-warning: #b86200;
  --crm-warning-soft: #fff2dc;
  --crm-danger: #c93737;
  --crm-danger-soft: #fdeaea;
  --crm-info: #0866ff;
  --crm-info-soft: #e7f1ff;
}

html[data-sgcrm-theme="green"],
body[data-sgcrm-theme="green"],
#sgcrm-root[data-sgcrm-theme="green"],
html.sgcrm-green-mode,
body.sgcrm-green-mode,
#sgcrm-root.sgcrm-green-mode {
  color-scheme: light;
  --crm-primary: #15803d;
  --crm-primary-hover: #116b34;
  --crm-primary-contrast: #ffffff;
  --crm-primary-soft: #dcfce7;
  --crm-secondary: #39704d;
  --crm-bg: #f0fdf4;
  --crm-surface: #ffffff;
  --crm-surface-soft: #f1f9f3;
  --crm-surface-raised: #fbfffc;
  --crm-text: #102a1c;
  --crm-text-muted: #496554;
  --crm-text-subtle: #667a6d;
  --crm-border: #cfe5d6;
  --crm-border-strong: #afd2bb;
  --crm-hover: #e4f6e9;
  --crm-active: #d7efde;
  --crm-focus: rgba(21, 128, 61, .22);
  --crm-sidebar: #052e16;
  --crm-sidebar-end: #166534;
  --crm-sidebar-text: #f2fff6;
  --crm-sidebar-muted: #b7d8c2;
  --crm-sidebar-hover: rgba(255, 255, 255, .14);
  --crm-sidebar-active: #ffffff;
  --crm-sidebar-active-text: #101810;
  --crm-modal: #ffffff;
  --crm-modal-backdrop: rgba(5, 46, 22, .58);
  --crm-input: #ffffff;
  --crm-input-disabled: #ebf4ee;
  --crm-shadow-sm: 0 1px 2px rgba(5, 46, 22, .06);
  --crm-shadow-md: 0 12px 30px rgba(5, 46, 22, .10);
  --crm-shadow-lg: 0 28px 80px rgba(5, 46, 22, .20);
}

html[data-sgcrm-theme="blue"],
body[data-sgcrm-theme="blue"],
#sgcrm-root[data-sgcrm-theme="blue"],
html.sgcrm-blue-mode,
body.sgcrm-blue-mode,
#sgcrm-root.sgcrm-blue-mode {
  color-scheme: light;
  --crm-primary: #0866ff;
  --crm-primary-hover: #0756d8;
  --crm-primary-contrast: #ffffff;
  --crm-primary-soft: #e7f1ff;
  --crm-secondary: #315f99;
  --crm-bg: #f2f6fc;
  --crm-surface: #ffffff;
  --crm-surface-soft: #edf4fd;
  --crm-surface-raised: #ffffff;
  --crm-text: #0b1f33;
  --crm-text-muted: #536a82;
  --crm-text-subtle: #70859a;
  --crm-border: #d4e0ee;
  --crm-border-strong: #bbcee3;
  --crm-hover: #eaf2fd;
  --crm-active: #dceaff;
  --crm-focus: rgba(8, 102, 255, .22);
  --crm-sidebar: #001435;
  --crm-sidebar-end: #003b85;
  --crm-sidebar-text: #f4f9ff;
  --crm-sidebar-muted: #b8d1ee;
  --crm-sidebar-hover: rgba(255, 255, 255, .13);
  --crm-sidebar-active: #ffffff;
  --crm-sidebar-active-text: #06182d;
  --crm-modal: #ffffff;
  --crm-modal-backdrop: rgba(0, 20, 53, .60);
  --crm-input: #ffffff;
  --crm-input-disabled: #edf2f8;
  --crm-shadow-sm: 0 1px 2px rgba(0, 20, 53, .06);
  --crm-shadow-md: 0 12px 30px rgba(0, 20, 53, .11);
  --crm-shadow-lg: 0 28px 80px rgba(0, 20, 53, .22);
}

html[data-sgcrm-theme],
body[data-sgcrm-theme],
#sgcrm-root[data-sgcrm-theme] {
  background: var(--crm-bg) !important;
  background-color: var(--crm-bg) !important;
  color: var(--crm-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-sgcrm-theme] body::before {
  background: var(--crm-bg) !important;
}

#sgcrm-root[data-sgcrm-theme] .sgcrm-page-scroll,
#sgcrm-root[data-sgcrm-theme] > div[style*="display: flex"][style*="height: 100%"],
#sgcrm-root[data-sgcrm-theme] > div[style*="display:flex"][style*="height:100%"] {
  background: var(--crm-bg) !important;
  background-color: var(--crm-bg) !important;
  color: var(--crm-text) !important;
}

#sgcrm-root[data-sgcrm-theme] ::selection {
  background: var(--crm-primary);
  color: var(--crm-primary-contrast);
}

#sgcrm-root[data-sgcrm-theme] :where(h1, h2, h3, h4, h5, h6, strong, label) {
  color: var(--crm-text);
}

#sgcrm-root[data-sgcrm-theme] :where(p, small, figcaption) {
  color: inherit;
}

#sgcrm-root[data-sgcrm-theme] :where(a) {
  color: var(--crm-primary);
}

/* Shared surfaces */
#sgcrm-root[data-sgcrm-theme] :where(
  .sg-adaba-page-card-shell,
  .sg-adaba-page-card-body,
  .sg-adaba-shell,
  .sg-adaba-body,
  .sg-adaba-panel,
  .sg-adaba-kpi-card,
  .sg-adaba-kpi-strip,
  .sg-adaba-status-card,
  .sg-adaba-product-item,
  .sg-adaba-rank-item,
  .sg-settings-list,
  .sg-settings-list-item,
  .sg-pa-kpi,
  .sg-pa-toolbar,
  .sg-pa-card,
  .sg-pa-pagination,
  .sg-pa-empty
) {
  background: var(--crm-surface) !important;
  background-color: var(--crm-surface) !important;
  color: var(--crm-text) !important;
  border-color: var(--crm-border) !important;
  box-shadow: var(--crm-shadow-sm) !important;
}

#sgcrm-root[data-sgcrm-theme] .sg-adaba-page-card-head {
  background: var(--crm-surface-soft) !important;
  border-color: var(--crm-border) !important;
  color: var(--crm-text) !important;
}

#sgcrm-root[data-sgcrm-theme] table {
  background: var(--crm-surface) !important;
  color: var(--crm-text) !important;
  border-color: var(--crm-border) !important;
}

#sgcrm-root[data-sgcrm-theme] table :where(th, td) {
  color: var(--crm-text) !important;
  border-color: var(--crm-border) !important;
}

#sgcrm-root[data-sgcrm-theme] table thead tr {
  background: var(--crm-surface-soft) !important;
}

#sgcrm-root[data-sgcrm-theme] table tbody tr:hover {
  background: var(--crm-hover) !important;
}

/* Forms */
#sgcrm-root[data-sgcrm-theme] :where(input, select, textarea),
body[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) :where(input, select, textarea) {
  background: var(--crm-input) !important;
  background-color: var(--crm-input) !important;
  border-color: var(--crm-border-strong) !important;
  color: var(--crm-text) !important;
  caret-color: var(--crm-primary) !important;
}

#sgcrm-root[data-sgcrm-theme] :where(input, textarea)::placeholder,
body[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) :where(input, textarea)::placeholder {
  color: var(--crm-text-subtle) !important;
  opacity: 1;
}

#sgcrm-root[data-sgcrm-theme] :where(input, select, textarea):focus,
body[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) :where(input, select, textarea):focus {
  border-color: var(--crm-primary) !important;
  box-shadow: 0 0 0 3px var(--crm-focus) !important;
  outline: none !important;
}

#sgcrm-root[data-sgcrm-theme] :where(input, select, textarea):disabled {
  background: var(--crm-input-disabled) !important;
  color: var(--crm-text-muted) !important;
  opacity: .78;
}

#sgcrm-root[data-sgcrm-theme] :where(option, optgroup) {
  background: var(--crm-input) !important;
  color: var(--crm-text) !important;
}

#sgcrm-root[data-sgcrm-theme] :where(button, [role="button"], a):focus-visible,
body[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) :where(button, [role="button"], a):focus-visible {
  outline: 3px solid var(--crm-focus) !important;
  outline-offset: 2px !important;
}

#sgcrm-root[data-sgcrm-theme] button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

/* Legacy inline colours are normalized by meaning, not by page. */
#sgcrm-root[data-sgcrm-theme] :is(
  [style*="color: rgb(15, 23, 42)"],
  [style*="color:#0f172a"],
  [style*="color: #0f172a"],
  [style*="color: rgb(17, 24, 39)"],
  [style*="color:#111827"],
  [style*="color: #111827"],
  [style*="color: rgb(30, 41, 59)"],
  [style*="color:#1e293b"],
  [style*="color: #1e293b"]
) {
  color: var(--crm-text) !important;
}

#sgcrm-root[data-sgcrm-theme] :is(
  [style*="color: rgb(51, 65, 85)"],
  [style*="color:#334155"],
  [style*="color: #334155"],
  [style*="color: rgb(71, 85, 105)"],
  [style*="color:#475569"],
  [style*="color: #475569"],
  [style*="color: rgb(100, 116, 139)"],
  [style*="color:#64748b"],
  [style*="color: #64748b"],
  [style*="color: rgb(107, 114, 128)"],
  [style*="color:#6b7280"],
  [style*="color: #6b7280"]
) {
  color: var(--crm-text-muted) !important;
}

#sgcrm-root[data-sgcrm-theme] :is(
  [style*="color: rgb(148, 163, 184)"],
  [style*="color:#94a3b8"],
  [style*="color: #94a3b8"]
) {
  color: var(--crm-text-subtle) !important;
}

#sgcrm-root[data-sgcrm-theme] :is(
  [style*="background: rgb(255, 255, 255)"],
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background: white"]
) {
  background: var(--crm-surface) !important;
  background-color: var(--crm-surface) !important;
}

#sgcrm-root[data-sgcrm-theme] :is(
  [style*="background: rgb(248, 250, 252)"],
  [style*="background:#f8fafc"],
  [style*="background: #f8fafc"],
  [style*="background: rgb(241, 245, 249)"],
  [style*="background:#f1f5f9"],
  [style*="background: #f1f5f9"]
) {
  background: var(--crm-surface-soft) !important;
  background-color: var(--crm-surface-soft) !important;
}

#sgcrm-root[data-sgcrm-theme] button:is(
  [style*="background: rgb(11, 31, 77)"],
  [style*="background:#0b1f4d"],
  [style*="background: #0b1f4d"],
  [style*="background: rgb(22, 163, 74)"],
  [style*="background:#16a34a"],
  [style*="background: #16a34a"],
  [style*="background: rgb(37, 99, 235)"],
  [style*="background:#2563eb"],
  [style*="background: #2563eb"],
  [style*="background: rgb(8, 102, 255)"],
  [style*="background:#0866ff"],
  [style*="background: #0866ff"],
  [style*="background: rgb(0, 126, 142)"]
) {
  background: var(--crm-primary) !important;
  background-color: var(--crm-primary) !important;
  border-color: var(--crm-primary) !important;
  color: var(--crm-primary-contrast) !important;
}

#sgcrm-root[data-sgcrm-theme] button:is(
  [style*="background: rgb(11, 31, 77)"],
  [style*="background:#0b1f4d"],
  [style*="background: rgb(22, 163, 74)"],
  [style*="background:#16a34a"],
  [style*="background: rgb(37, 99, 235)"],
  [style*="background:#2563eb"],
  [style*="background: rgb(8, 102, 255)"],
  [style*="background:#0866ff"]
):hover {
  background: var(--crm-primary-hover) !important;
  background-color: var(--crm-primary-hover) !important;
}

#sgcrm-root[data-sgcrm-theme] button[aria-label="Create new order"] {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

/* Sidebar */
#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-panel,
#sgcrm-root[data-sgcrm-theme] .sgcrm-mobile-sidebar-shell .sgcrm-sidebar-panel,
#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-panel[data-sgcrm-dark-sidebar="1"] {
  background: linear-gradient(160deg, var(--crm-sidebar) 0%, var(--crm-sidebar-end) 100%) !important;
  background-color: var(--crm-sidebar) !important;
  border-right: 1px solid var(--crm-border) !important;
  color: var(--crm-sidebar-text) !important;
  box-shadow: 12px 0 40px rgba(15, 23, 42, .08) !important;
}

#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-panel::before {
  background: none !important;
  opacity: 0 !important;
}

#sgcrm-root[data-sgcrm-theme] :where(
  .sgcrm-sidebar-header,
  .sgcrm-sidebar-nav-scroll,
  .sgcrm-sidebar-footer
) {
  color: var(--crm-sidebar-text) !important;
}

#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-header {
  border-color: color-mix(in srgb, var(--crm-sidebar-text) 18%, transparent) !important;
}

#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-category-label {
  color: var(--crm-sidebar-muted) !important;
  font-weight: 750 !important;
  letter-spacing: .12em !important;
}

#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-nav-item,
#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-subnav-item,
#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-business-menu,
#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-signout {
  color: var(--crm-sidebar-text) !important;
  border-color: transparent !important;
}

#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-nav-item > span,
#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-nav-item svg,
#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-subnav-item,
#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-subnav-item * {
  color: inherit !important;
  stroke: currentColor !important;
}

#sgcrm-root[data-sgcrm-theme] .sgcrm-sidebar-nav-icon {
  color: inherit !important;
  border-color: color-mix(in srgb, var(--crm-sidebar-text) 18%, transparent) !important;
  background: color-mix(in srgb, var(--crm-sidebar-text) 8%, transparent) !important;
}

#sgcrm-root[data-sgcrm-theme] :is(
  .sgcrm-sidebar-nav-item:hover,
  .sgcrm-sidebar-nav-item:focus-visible,
  .sgcrm-sidebar-subnav-item:hover,
  .sgcrm-sidebar-subnav-item:focus-visible,
  .sgcrm-sidebar-business-menu:hover,
  .sgcrm-sidebar-signout:hover
) {
  background: var(--crm-sidebar-hover) !important;
  color: var(--crm-sidebar-active-text) !important;
}

#sgcrm-root[data-sgcrm-theme] :is(
  .sgcrm-sidebar-nav-item:hover,
  .sgcrm-sidebar-nav-item:focus-visible,
  .sgcrm-sidebar-subnav-item:hover,
  .sgcrm-sidebar-subnav-item:focus-visible
) * {
  color: inherit !important;
  stroke: currentColor !important;
}

#sgcrm-root[data-sgcrm-theme] :is(
  .sgcrm-sidebar-nav-item:has(> span[style*="rgb(22, 163, 74)"]),
  .sgcrm-sidebar-nav-item:has(> span[style*="rgb(8, 102, 255)"]),
  .sgcrm-sidebar-nav-item[style*="background: rgb(10, 15, 22)"],
  .sgcrm-sidebar-nav-item[style*="background:#0a0f16"],
  .sgcrm-sidebar-subnav-item[style*="rgb(22, 163, 74)"],
  .sgcrm-sidebar-subnav-item[style*="rgb(8, 102, 255)"]
) {
  background: var(--crm-sidebar-active) !important;
  background-color: var(--crm-sidebar-active) !important;
  color: var(--crm-sidebar-active-text) !important;
  border-color: color-mix(in srgb, var(--crm-sidebar-active-text) 12%, transparent) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12) !important;
}

#sgcrm-root[data-sgcrm-theme] :is(
  .sgcrm-sidebar-nav-item:has(> span[style*="rgb(22, 163, 74)"]),
  .sgcrm-sidebar-nav-item:has(> span[style*="rgb(8, 102, 255)"]),
  .sgcrm-sidebar-nav-item[style*="background: rgb(10, 15, 22)"],
  .sgcrm-sidebar-nav-item[style*="background:#0a0f16"]
) :where(span, svg, .sgcrm-sidebar-nav-icon) {
  color: inherit !important;
  stroke: currentColor !important;
}

/* Light sidebar needs a visible neutral active treatment. */
#sgcrm-root[data-sgcrm-theme="light"] .sgcrm-sidebar-nav-item:hover,
#sgcrm-root[data-sgcrm-theme="light"] .sgcrm-sidebar-subnav-item:hover {
  background: var(--crm-sidebar-hover) !important;
  color: var(--crm-text) !important;
}

/* Modal, drawer, menu, and popover foundations — including React portals. */
#sgcrm-root[data-sgcrm-theme] .sgcrm-modal-overlay,
body[data-sgcrm-theme] > .sgcrm-modal-overlay,
body[data-sgcrm-theme] .sgcrm-ic-backdrop {
  background: var(--crm-modal-backdrop) !important;
}

#sgcrm-root[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog),
body[data-sgcrm-theme] > :where(.sgcrm-modal-box, dialog),
body[data-sgcrm-theme] .sgcrm-ic-panel,
#sgcrm-root[data-sgcrm-theme] .sgcrm-floating-action-menu {
  background: var(--crm-modal) !important;
  background-color: var(--crm-modal) !important;
  color: var(--crm-text) !important;
  border-color: var(--crm-border) !important;
  box-shadow: var(--crm-shadow-lg) !important;
}

#sgcrm-root[data-sgcrm-theme] .sgcrm-modal-box :where(h1, h2, h3, h4, h5, label, strong, p, span, small, li, td, th),
body[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) :where(h1, h2, h3, h4, h5, label, strong, p, span, small, li, td, th) {
  color: var(--crm-text);
}

#sgcrm-root[data-sgcrm-theme] .sgcrm-modal-box :where([style*="color:#64748b"], [style*="color: #64748b"], [style*="color: rgb(100, 116, 139)"]),
body[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) :where([style*="color:#64748b"], [style*="color: #64748b"], [style*="color: rgb(100, 116, 139)"]) {
  color: var(--crm-text-muted) !important;
}

#sgcrm-root[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) hr,
body[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) hr {
  border-color: var(--crm-border) !important;
}

#sgcrm-root[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) button[aria-label*="close" i],
#sgcrm-root[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) button[title*="close" i],
body[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) button[aria-label*="close" i],
body[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) button[title*="close" i] {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background: var(--crm-surface-soft) !important;
  color: var(--crm-text) !important;
  border: 1px solid var(--crm-border) !important;
}

/* System Health inherits the same design contract. */
body[data-sgcrm-theme] .sgcrm-ic-panel {
  background: var(--crm-bg) !important;
  color: var(--crm-text) !important;
}

body[data-sgcrm-theme] .sgcrm-ic-head {
  background: linear-gradient(135deg, var(--crm-sidebar), var(--crm-sidebar-end)) !important;
  color: var(--crm-sidebar-text) !important;
}

body[data-sgcrm-theme] .sgcrm-ic-head :where(.sgcrm-ic-title, .sgcrm-ic-sub, .sgcrm-ic-eyebrow) {
  color: var(--crm-sidebar-text) !important;
}

body[data-sgcrm-theme] :where(
  .sgcrm-ic-tabs,
  .sgcrm-ic-card,
  .sgcrm-ic-row,
  .sgcrm-ic-metric,
  .sgcrm-ic-kpi
) {
  background: var(--crm-surface) !important;
  color: var(--crm-text) !important;
  border-color: var(--crm-border) !important;
}

body[data-sgcrm-theme] :where(
  .sgcrm-ic-section-title,
  .sgcrm-ic-card-title,
  .sgcrm-ic-row-title,
  .sgcrm-ic-metric strong,
  .sgcrm-ic-kpi b
) {
  color: var(--crm-text) !important;
}

body[data-sgcrm-theme] :where(
  .sgcrm-ic-card-detail,
  .sgcrm-ic-row-meta,
  .sgcrm-ic-muted,
  .sgcrm-ic-metric span,
  .sgcrm-ic-kpi span,
  .sgcrm-ic-field label
) {
  color: var(--crm-text-muted) !important;
}

body[data-sgcrm-theme] :where(.sgcrm-ic-input, .sgcrm-ic-select, .sgcrm-ic-textarea) {
  background: var(--crm-input) !important;
  color: var(--crm-text) !important;
  border-color: var(--crm-border-strong) !important;
  caret-color: var(--crm-primary) !important;
}

body[data-sgcrm-theme] :where(.sgcrm-ic-input, .sgcrm-ic-select, .sgcrm-ic-textarea):focus {
  border-color: var(--crm-primary) !important;
  box-shadow: 0 0 0 3px var(--crm-focus) !important;
}

body[data-sgcrm-theme] .sgcrm-ic-input::placeholder,
body[data-sgcrm-theme] .sgcrm-ic-textarea::placeholder {
  color: var(--crm-text-subtle) !important;
  opacity: 1;
}

body[data-sgcrm-theme] .sgcrm-ic-tab {
  color: var(--crm-text-muted) !important;
}

body[data-sgcrm-theme] .sgcrm-ic-tab:hover,
body[data-sgcrm-theme] .sgcrm-ic-tab:focus-visible {
  background: var(--crm-hover) !important;
  color: var(--crm-primary) !important;
}

body[data-sgcrm-theme] .sgcrm-ic-tab.is-active {
  background: var(--crm-primary-soft) !important;
  border-color: var(--crm-border-strong) !important;
  color: var(--crm-primary) !important;
}

body[data-sgcrm-theme] .sgcrm-ic-btn.primary {
  background: var(--crm-primary) !important;
  border-color: var(--crm-primary) !important;
  color: var(--crm-primary-contrast) !important;
}

body[data-sgcrm-theme] .sgcrm-ic-btn.primary:hover {
  background: var(--crm-primary-hover) !important;
}

body[data-sgcrm-theme] .sgcrm-ic-hero {
  background: linear-gradient(135deg, var(--crm-primary-soft), var(--crm-surface)) !important;
  border-color: var(--crm-border-strong) !important;
}

body[data-sgcrm-theme] .sgcrm-ic-hero strong {
  color: var(--crm-text) !important;
}

/* Semantic status colours remain stable in every theme. */
#sgcrm-root[data-sgcrm-theme] :where(.success, .is-success, [data-status="success"], [data-status="paid"], [data-status="delivered"]),
body[data-sgcrm-theme] :where(.sgcrm-ic-badge, .sgcrm-ic-notice) {
  --crm-status-color: var(--crm-success);
  --crm-status-soft: var(--crm-success-soft);
}

#sgcrm-root[data-sgcrm-theme] :where(.warning, .is-warning, [data-status="warning"], [data-status="pending"], [data-status="attention"]),
body[data-sgcrm-theme] :where(.sgcrm-ic-badge.warn) {
  --crm-status-color: var(--crm-warning);
  --crm-status-soft: var(--crm-warning-soft);
}

#sgcrm-root[data-sgcrm-theme] :where(.danger, .error, .is-danger, [data-status="failed"], [data-status="rejected"], [data-status="cancelled"]),
body[data-sgcrm-theme] :where(.sgcrm-ic-badge.bad, .sgcrm-ic-notice.error) {
  --crm-status-color: var(--crm-danger);
  --crm-status-soft: var(--crm-danger-soft);
}

/* Mobile/tablet guarantees */
@media (max-width: 900px) {
  #sgcrm-root[data-sgcrm-theme] .sgcrm-mobile-topbar,
  #sgcrm-root[data-sgcrm-theme] .sgcrm-bottom-nav {
    background: color-mix(in srgb, var(--crm-surface) 96%, transparent) !important;
    color: var(--crm-text) !important;
    border-color: var(--crm-border) !important;
    box-shadow: 0 -12px 30px rgba(15, 23, 42, .10) !important;
    backdrop-filter: blur(18px);
  }

  #sgcrm-root[data-sgcrm-theme] .sgcrm-bottom-nav-item {
    color: var(--crm-text-muted) !important;
  }

  #sgcrm-root[data-sgcrm-theme] .sgcrm-bottom-nav-item[aria-current="page"] {
    color: var(--crm-primary) !important;
  }
}

@media (max-width: 768px) {
  #sgcrm-root[data-sgcrm-theme] .sgcrm-modal-overlay,
  body[data-sgcrm-theme] > .sgcrm-modal-overlay {
    align-items: stretch !important;
    padding: max(env(safe-area-inset-top), 0px) 0 max(env(safe-area-inset-bottom), 0px) !important;
  }

  #sgcrm-root[data-sgcrm-theme] .sgcrm-modal-box,
  body[data-sgcrm-theme] > .sgcrm-modal-box,
  #sgcrm-root[data-sgcrm-theme] dialog,
  body[data-sgcrm-theme] > dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  #sgcrm-root[data-sgcrm-theme] :where(button, [role="button"], input, select),
  body[data-sgcrm-theme] :where(.sgcrm-modal-box, dialog) :where(button, [role="button"], input, select) {
    min-height: 44px;
  }

  #sgcrm-root[data-sgcrm-theme] .sgcrm-page-scroll {
    background: var(--crm-bg) !important;
  }
}

@media (max-width: 480px) {
  #sgcrm-root[data-sgcrm-theme] :where(
    .sg-adaba-kpi-grid,
    .sgcrm-ic-grid,
    .sgcrm-ic-metrics,
    .sgcrm-ic-form
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #sgcrm-root[data-sgcrm-theme] table {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sgcrm-root[data-sgcrm-theme],
  #sgcrm-root[data-sgcrm-theme] *,
  body[data-sgcrm-theme] .sgcrm-ic-panel,
  body[data-sgcrm-theme] .sgcrm-ic-panel * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ------------------------------------------------------------------
 * 3.6.2 compatibility bindings — map legacy hardcoded "active pill"
 * inline styles (green #ecfdf3 / #16a34a) to the active theme accent.
 * React normalises inline hex to rgb(), so we match the literal value.
 * ------------------------------------------------------------------ */
#sgcrm-root button[style*="rgb(236, 253, 243)"] {
  background: var(--crm-primary-soft) !important;
  border-color: var(--crm-primary) !important;
  color: var(--crm-primary) !important;
}


/* ------------------------------------------------------------------
 * 3.6.2 sidebar surface bindings — the sidebar chrome is owned by the
 * theme tokens, not by runtime inline styles or legacy dark-mode CSS.
 * New tokens: --crm-sidebar-card / --crm-sidebar-card-border /
 * --crm-logo-filter (per theme below).
 * ------------------------------------------------------------------ */
html[data-sgcrm-theme="light"], body[data-sgcrm-theme="light"], #sgcrm-root[data-sgcrm-theme="light"] {
  --crm-sidebar-card: #ffffff;
  --crm-sidebar-card-border: #dce3ec;
  --crm-logo-filter: none;
}
html[data-sgcrm-theme="green"], body[data-sgcrm-theme="green"], #sgcrm-root[data-sgcrm-theme="green"] {
  --crm-sidebar-card: rgba(255, 255, 255, .09);
  --crm-sidebar-card-border: rgba(255, 255, 255, .18);
  --crm-logo-filter: brightness(0) invert(1);
}
html[data-sgcrm-theme="blue"], body[data-sgcrm-theme="blue"], #sgcrm-root[data-sgcrm-theme="blue"] {
  --crm-sidebar-card: rgba(255, 255, 255, .09);
  --crm-sidebar-card-border: rgba(255, 255, 255, .18);
  --crm-logo-filter: brightness(0) invert(1);
}

#sgcrm-root .sgcrm-sidebar-panel {
  background: linear-gradient(170deg, var(--crm-sidebar) 0%, var(--crm-sidebar-end) 100%) !important;
}
#sgcrm-root .sgcrm-sidebar-nav-scroll,
#sgcrm-root .sgcrm-sidebar-panel > div:not(.sgcrm-sidebar-header) {
  background: transparent !important;
}
#sgcrm-root .sgcrm-sidebar-header {
  background: var(--crm-sidebar-card) !important;
  border-color: var(--crm-sidebar-card-border) !important;
}
#sgcrm-root .sgcrm-sidebar-header img {
  filter: var(--crm-logo-filter) !important;
  opacity: 1 !important;
}


/* ------------------------------------------------------------------
 * 3.6.2 sidebar submenu / flyout bindings — the dropdown panel and its
 * links follow the sidebar tokens in every theme.
 * ------------------------------------------------------------------ */
#sgcrm-root .sgcrm-sidebar-panel div:has(> .sgcrm-sidebar-subnav-item) {
  background: var(--crm-sidebar) !important;
  border: 1px solid var(--crm-sidebar-card-border) !important;
  box-shadow: var(--crm-shadow-lg) !important;
  border-radius: 14px !important;
  overflow: hidden;
}
#sgcrm-root .sgcrm-sidebar-panel div:has(> .sgcrm-sidebar-subnav-item) > div:not(.sgcrm-sidebar-subnav-item) {
  color: var(--crm-sidebar-muted) !important;
  background: transparent !important;
}
#sgcrm-root .sgcrm-sidebar-subnav-item {
  color: var(--crm-sidebar-text) !important;
  background: transparent !important;
}
#sgcrm-root .sgcrm-sidebar-subnav-item:hover,
#sgcrm-root .sgcrm-sidebar-subnav-item:focus-visible {
  background: var(--crm-sidebar-hover) !important;
  color: var(--crm-sidebar-text) !important;
}
#sgcrm-root .sgcrm-sidebar-subnav-item * {
  color: inherit !important;
}