/* ========================================
   ORDER MANAGER — Slate theme overrides
   Scope: orders.html only
   ======================================== */

:root {
    --om-brand: #334756;
    --om-brand-hover: #2b3d4b;
    --om-brand-soft: #eef4f6;
    --om-brand-border: #c8d4dc;
    --om-brand-muted: #6f8798;
    --om-brand-ring: rgba(51, 71, 86, 0.22);
    --om-action-ink: #ffffff;
    --om-action-border: transparent;
    --om-page-bg: #334756;
    --om-page-bg-2: #425c6f;
    --om-surface: #ffffff;
    --om-surface-soft: #f3f6f8;
    --om-surface-raised: #ffffff;
    --om-surface-tint: #f8fafb;
    --om-border-soft: rgba(51, 71, 86, 0.12);
    --om-border-strong: rgba(51, 71, 86, 0.20);
    --om-text: #1f2937;
    --om-text-soft: #475569;
    --om-text-muted: #7a8b99;
    --om-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(51, 71, 86, 0.08);
    --om-shadow-hover: 0 12px 34px rgba(51, 71, 86, 0.16);
    --om-status-new: #2563eb;
    --om-status-new-2: #38bdf8;
    --om-status-green: #059669;
    --om-status-green-2: #34d399;
    --om-status-ship: #0284c7;
    --om-status-ship-2: #22d3ee;
    --om-status-red: #dc2626;
    --om-status-red-2: #fb7185;
    --om-status-warn: #d97706;
    --om-status-warn-2: #fbbf24;
    --om-topbar-bg: rgba(255, 255, 255, 0.94);
    --om-sidebar-bg: #334756;
    --om-sidebar-border: rgba(255, 255, 255, 0.14);
    --om-sidebar-text: #ffffff;
    --om-sidebar-muted: rgba(255, 255, 255, 0.72);
    --om-sidebar-hover: rgba(255, 255, 255, 0.10);
    --om-sidebar-active-bg: rgba(255, 255, 255, 0.16);
    --om-sidebar-active-text: #ffffff;
    --om-sidebar-search-bg: rgba(255, 255, 255, 0.10);
    --om-text-on-brand: #ffffff;
    --sys-bg: var(--om-page-bg);

    --primary: var(--om-brand);
    --primary-light: #6f8798;
    --primary-dark: #243440;
    --primary-50: rgba(51, 71, 86, 0.06);
    --primary-100: rgba(51, 71, 86, 0.10);
    --primary-200: rgba(51, 71, 86, 0.18);
    --accent: #4b6475;
    --accent-light: #9fb3c1;

    --brand-50: #f3f6f8;
    --brand-100: #e2e9ee;
    --brand-200: #c8d4dc;
    --brand-300: #9fb3c1;
    --brand-400: #6f8798;
    --brand-500: #334756;
    --brand-600: #2b3d4b;
    --brand-700: #243440;
    --brand-800: #1c2a34;
    --brand-900: #14202a;
    --brand-gradient: linear-gradient(135deg, #334756 0%, #425c6f 100%);
    --border-focus: var(--om-brand);
    --ring-focus: 0 0 0 3px var(--om-brand-ring);

    --sidebar-bg: var(--om-sidebar-bg);
    --sidebar-border: var(--om-sidebar-border);
    --sidebar-divider: var(--om-sidebar-border);
    --sidebar-text: var(--om-sidebar-text);
    --sidebar-text-muted: var(--om-sidebar-muted);
    --sidebar-section-label: var(--om-sidebar-muted);
    --sidebar-hover: var(--om-sidebar-hover);
    --sidebar-active-bg: var(--om-sidebar-active-bg);
    --sidebar-active-text: var(--om-sidebar-active-text);
    --sidebar-accent: #334756;
    --sidebar-icon: var(--om-sidebar-muted);
    --sidebar-icon-active: var(--om-sidebar-active-text);
    --sidebar-shadow-rail: inset -1px 0 0 var(--om-sidebar-border);
}

body.dashboard-body {
    background:
        radial-gradient(900px 360px at 75% -120px, color-mix(in srgb, var(--om-brand) 16%, transparent), transparent 64%),
        linear-gradient(180deg, var(--om-page-bg-2), var(--om-page-bg)) !important;
    accent-color: var(--om-brand);
}

.app-layout,
.main-content {
    background: transparent !important;
}

.topbar-global {
    background: var(--om-topbar-bg) !important;
    border-bottom-color: color-mix(in srgb, var(--om-brand) 18%, transparent) !important;
}

.sidebar,
.ds-sidebar {
    background: var(--om-sidebar-bg) !important;
    color: var(--om-sidebar-text) !important;
    border-color: var(--om-sidebar-border) !important;
    box-shadow: inset -1px 0 0 var(--om-sidebar-border) !important;
}

.ds-sidebar__brand,
.ds-sidebar__footer,
.sidebar-header {
    border-color: var(--om-sidebar-border) !important;
}

.ds-sidebar__brand-logo {
    background: rgba(255, 255, 255, 0.14) !important;
    color: var(--om-sidebar-active-text) !important;
    box-shadow: inset 0 0 0 1px var(--om-sidebar-border) !important;
}

.ds-sidebar__brand-text,
.ds-sidebar__footer-name,
.sidebar .logo-text {
    color: var(--om-sidebar-active-text) !important;
}

.ds-sidebar__collapse,
.ds-sidebar__group-label,
.ds-sidebar__item,
.ds-sidebar__subitem,
.ds-sidebar__icon,
.ds-sidebar__footer-meta,
.sidebar-link,
.nav-section-title {
    color: var(--om-sidebar-muted) !important;
}

.ds-sidebar__item:hover,
.ds-sidebar__subitem:hover,
.sidebar-link:hover {
    background: var(--om-sidebar-hover) !important;
    color: var(--om-sidebar-active-text) !important;
}

.ds-sidebar__item[aria-current="page"],
.ds-sidebar__subitem[aria-current="page"],
.sidebar-link.active {
    background: var(--om-sidebar-active-bg) !important;
    color: var(--om-sidebar-active-text) !important;
}

.ds-sidebar__item[aria-current="page"] .ds-sidebar__icon,
.sidebar-link.active i {
    color: var(--om-sidebar-active-text) !important;
}

.ds-sidebar__search-btn,
.sidebar-search {
    background: var(--om-sidebar-search-bg) !important;
    color: var(--om-sidebar-muted) !important;
    border-color: var(--om-sidebar-border) !important;
}

.ds-sidebar__search-btn .ds-sidebar__kbd,
.sidebar-search kbd {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--om-sidebar-border) !important;
    color: var(--om-sidebar-active-text) !important;
}

html:not(.dark) body .sidebar,
html:not(.dark) body aside.sidebar,
html:not(.dark) body #sidebar,
html:not(.dark) body .ds-sidebar,
html:not(.dark) body aside.ds-sidebar,
html:not(.dark) body .ds-sidebar__brand,
html:not(.dark) body .ds-sidebar__nav,
html:not(.dark) body .ds-sidebar__footer,
html:not(.dark) body .ds-sidebar__search {
    background: var(--om-sidebar-bg) !important;
    background-image: none !important;
    border-color: var(--om-sidebar-border) !important;
    box-shadow: inset -1px 0 0 var(--om-sidebar-border) !important;
}

html:not(.dark) body .ds-sidebar__brand-text,
html:not(.dark) body .ds-sidebar__footer-name {
    color: var(--om-sidebar-active-text) !important;
}

html:not(.dark) body .ds-sidebar__item,
html:not(.dark) body .ds-sidebar__subitem,
html:not(.dark) body .ds-sidebar__group-label,
html:not(.dark) body .ds-sidebar__collapse,
html:not(.dark) body .ds-sidebar__footer-meta {
    color: var(--om-sidebar-muted) !important;
}

html:not(.dark) body .ds-sidebar__item:hover,
html:not(.dark) body .ds-sidebar__subitem:hover {
    background: var(--om-sidebar-hover) !important;
    color: var(--om-sidebar-active-text) !important;
}

html:not(.dark) body .ds-sidebar__item[aria-current="page"],
html:not(.dark) body .ds-sidebar__item.is-active,
html:not(.dark) body .ds-sidebar__subitem[aria-current="page"] {
    background: var(--om-sidebar-active-bg) !important;
    color: var(--om-sidebar-active-text) !important;
    box-shadow: none !important;
}

html:not(.dark) body .ds-sidebar__item[aria-current="page"] .ds-sidebar__icon,
html:not(.dark) body .ds-sidebar__item.is-active .ds-sidebar__icon,
html:not(.dark) body .ds-sidebar__icon {
    color: var(--om-sidebar-active-text) !important;
}

html:not(.dark) body .ds-sidebar__search-btn {
    background: var(--om-sidebar-search-bg) !important;
    border-color: var(--om-sidebar-border) !important;
    color: var(--om-sidebar-muted) !important;
}

html:not(.dark) body .app-layout,
html:not(.dark) body .main-content {
    background: transparent !important;
    background-image: none !important;
}

html:not(.dark) body .topbar-global {
    background: var(--om-topbar-bg) !important;
    background-image: none !important;
}

.stat-card,
.revenue-card,
.table-card,
.funnel-section,
.plan-usage-banner,
.system-switcher,
.switcher-card {
    background: var(--om-surface) !important;
    border-color: color-mix(in srgb, var(--om-brand) 14%, #e5e7eb) !important;
}

thead,
.table-card-header,
.funnel-bar-wrap,
.plan-usage-bar {
    background: var(--om-surface-soft) !important;
}

.om-palette {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 4px 8px;
    border: 1px solid rgba(51, 71, 86, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.om-palette-code {
    min-width: 58px;
    color: #4b5563;
    font-family: 'Space Grotesk', 'SF Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.om-swatch {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: var(--swatch);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.om-swatch:hover { transform: translateY(-1px); }
.om-swatch:focus-visible { outline: 3px solid var(--om-brand-ring); outline-offset: 2px; }
.om-swatch.is-active { box-shadow: 0 0 0 3px var(--om-brand-ring), inset 0 0 0 1px rgba(0, 0, 0, 0.16); }

.topbar-brand::after,
.stat-card::before,
.orders-chart::before {
    background: linear-gradient(90deg, var(--om-brand), #4b6475) !important;
}

.plan-usage-banner {
    border-left-color: var(--om-brand) !important;
}

.plan-badge {
    background: var(--om-brand-soft) !important;
    color: var(--om-brand) !important;
    border-color: var(--om-brand-border) !important;
}

.plan-usage-fill,
.funnel-shipped,
.funnel-delivered,
.switcher-toggle,
.plan-upgrade-btn,
.edit-modal-header,
.save-edit-btn,
.btn-primary,
.primary-btn,
.add-order-btn,
.bulk-action-btn.primary {
    background: var(--brand-gradient) !important;
    color: var(--om-action-ink) !important;
    border-color: var(--om-action-border) !important;
}

.plan-upgrade-btn:hover,
.save-edit-btn:hover,
.btn-primary:hover,
.primary-btn:hover,
.add-order-btn:hover,
.bulk-action-btn.primary:hover {
    background: var(--om-brand-hover) !important;
    color: var(--om-action-ink) !important;
}

.topbar-btn:hover,
.lang-toggle:hover,
.switcher-card:hover,
.switcher-card.active {
    border-color: var(--om-brand-border) !important;
    background: var(--primary-50) !important;
}

.switcher-card.active {
    box-shadow: 0 0 0 3px var(--primary-100) !important;
}

.ord-phone {
    background: linear-gradient(135deg, #f3f6f8, #e2e9ee) !important;
    color: var(--om-brand) !important;
    border-color: var(--om-brand-border) !important;
}

.ord-location {
    background: linear-gradient(135deg, #f7f8fa, #eef4f6) !important;
    color: var(--om-brand-muted) !important;
    border-color: rgba(51, 71, 86, 0.12) !important;
}

.ord-action-btn.act-edit,
.ord-action-btn.act-view {
    background: var(--primary-100) !important;
    color: var(--om-brand) !important;
}

.ord-action-btn.act-edit:hover,
.ord-action-btn.act-view:hover {
    background: var(--om-brand) !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(51, 71, 86, 0.28) !important;
}

.ord-check,
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--om-brand);
}

.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--om-brand) !important;
    box-shadow: 0 0 0 3px var(--om-brand-ring) !important;
}

body.dark {
    --om-page-bg: #3a363f;
    --om-page-bg-2: #343336;
    --om-surface: #4f4a54;
    --om-surface-soft: #5a5560;
    --om-topbar-bg: rgba(44, 43, 45, 0.94);
    --om-sidebar-bg: #4f4a54;
    --sidebar-active-bg: #635e69;
    --sidebar-active-text: #ffffff;
    --sidebar-accent: #9fb3c1;
    --sidebar-icon-active: #ffffff;
    --bp-accent: #9fb3c1;
    --bp-accent-hover: #c8d4dc;
    --bp-accent-soft: rgba(159, 179, 193, 0.18);
    --bp-accent-text: #c8d4dc;
}

body.dark .om-palette {
    background: rgba(63, 62, 64, 0.86);
    border-color: #635e69;
}

body.dark .om-palette-code { color: #c8d4dc; }

body.dark .topbar-btn:hover,
body.dark .switcher-card.active {
    background: rgba(159, 179, 193, 0.14) !important;
    color: #e2e9ee !important;
    border-color: rgba(159, 179, 193, 0.32) !important;
}

body.dark .stat-card:hover {
    border-color: rgba(159, 179, 193, 0.34) !important;
    box-shadow: 0 6px 24px rgba(51, 71, 86, 0.34), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

body.dark .ord-phone,
body.dark .ord-location,
body.dark .ord-action-btn.act-edit,
body.dark .ord-action-btn.act-view {
    background: rgba(159, 179, 193, 0.14) !important;
    color: #c8d4dc !important;
    border-color: rgba(159, 179, 193, 0.22) !important;
}

/* ============================================================
   ORDER MANAGER — Cohesive global polish
   Applies the slate palette to every operational surface.
   ============================================================ */
body.dashboard-body {
    color: var(--om-text) !important;
}

.panel-header,
.section-title-row,
.table-card-header,
.funnel-header,
.spy-panel-head,
.lp-card-head,
.cf-topbar,
.eo2-sec-head,
.dom-section-head,
.carrier-section-head {
    color: var(--om-text) !important;
}

.panel-header h1,
.panel-header h2,
.section-title-row h2,
.table-card-header h3,
.funnel-header h3,
.spy-panel-head h1,
.lp-card-title h3,
.eo2-sec-title,
.switcher-info strong,
.stat-card-value,
.ord-price,
.dom-title,
.cf-title {
    color: var(--om-text) !important;
}

.panel-header p,
.breadcrumb,
.stat-card-label,
.stat-card-change,
.funnel-subtitle,
.switcher-info span,
.ord-location-sub,
.ord-location-address,
.ord-location-label,
.eo2-sec-sub,
.eo2-field label,
.lp-field-label,
.lp-field-hint,
.spy-kpi-label,
.spy-empty-tag,
.muted,
.text-muted {
    color: var(--om-text-muted) !important;
}

.stat-card,
.revenue-card,
.table-card,
.funnel-section,
.plan-usage-banner,
.switcher-card,
.credits-card,
.user-card,
.dropdown-menu,
.user-dropdown,
.spy-panel,
.spy-kpi,
.spy-filter-bar,
.lp-card,
.cf-card,
.cf-panel,
.eo2-modal,
.eo2-section,
.eo2-nav,
.eo2-nav-card,
.eo2-rcard,
.eo2-carrier,
.dom-card,
.dom-panel,
.carrier-card,
.integration-card,
.market-card,
.store-card,
.pixel-card,
.call-card,
.call-queue,
.appearance-panel,
.appear-section,
.modal,
.edit-modal {
    background: var(--om-surface-raised) !important;
    border-color: var(--om-border-soft) !important;
    color: var(--om-text) !important;
    box-shadow: var(--om-shadow-card) !important;
}

.stat-card:hover,
.revenue-card:hover,
.table-card:hover,
.switcher-card:hover,
.spy-kpi:hover,
.lp-card:hover,
.eo2-section:hover,
.eo2-rcard:hover,
.eo2-carrier:hover,
.dom-card:hover,
.carrier-card:hover,
.integration-card:hover,
.market-card:hover,
.store-card:hover,
.pixel-card:hover {
    border-color: var(--om-border-strong) !important;
    box-shadow: var(--om-shadow-hover) !important;
}

.table-card-header,
thead,
.funnel-bar-wrap,
.plan-usage-bar,
.eo2-body,
.eo2-topbar,
.eo2-nav-card,
.eo2-stepper,
.appearance-panel-header,
.dropdown-item:hover,
tbody tr:hover td {
    background: var(--om-surface-soft) !important;
}

table,
tbody,
td,
th,
.table-responsive {
    color: var(--om-text-soft) !important;
    border-color: var(--om-border-soft) !important;
}

th,
thead th {
    color: var(--om-text-muted) !important;
    background: var(--om-surface-soft) !important;
}

tbody tr,
tbody td {
    background: var(--om-surface-raised) !important;
}

tbody tr:nth-child(even) td {
    background: var(--om-surface-tint) !important;
}

.form-input,
.appear-color-input,
.appear-hex-input,
.lp-input,
.lp-hex,
.cf-input,
.cf-select,
.search-input,
.filter-input,
.sidebar-search input,
.spy-filter-search input,
.edit-field input,
.edit-field select,
.edit-field textarea,
.eo2-field input,
.eo2-field select,
.eo2-field textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="password"],
select,
textarea {
    background: var(--om-surface-raised) !important;
    border-color: var(--om-border-soft) !important;
    color: var(--om-text) !important;
}

.form-input::placeholder,
.lp-input::placeholder,
.cf-input::placeholder,
.search-input::placeholder,
.filter-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--om-text-muted) !important;
}

.topbar-btn,
.topbar-system-card,
.eo2-iconbtn,
.eo2-btn-ghost,
.btn-secondary,
.btn-cancel,
.appear-reset-btn,
.dropdown-item,
.lp-add-btn,
.cf-btn-secondary,
.spy-chip,
.eo2-chip,
.tab-btn,
.filter-chip,
.status-filter,
.pagination-btn {
    background: var(--om-surface-raised) !important;
    border-color: var(--om-border-soft) !important;
    color: var(--om-text-soft) !important;
}

.topbar-btn:hover,
.topbar-system-card:hover,
.eo2-iconbtn:hover,
.eo2-btn-ghost:hover,
.btn-secondary:hover,
.btn-cancel:hover,
.appear-reset-btn:hover,
.dropdown-item:hover,
.lp-add-btn:hover,
.cf-btn-secondary:hover,
.spy-chip:hover,
.eo2-chip:hover,
.tab-btn:hover,
.filter-chip:hover,
.status-filter:hover,
.pagination-btn:hover {
    background: var(--om-surface-soft) !important;
    border-color: var(--om-border-strong) !important;
    color: var(--om-brand) !important;
}

.btn-primary,
.primary-btn,
.add-order-btn,
.save-edit-btn,
.edit-modal-footer .btn-save,
.eo2-btn-primary,
.cf-btn-primary,
.lp-primary-btn,
.appear-save-btn,
.switcher-toggle,
.bulk-action-btn.primary,
.spy-chip.active,
.tab-btn.active,
.filter-chip.active,
.eo2-chip.active,
.eo2-nav-link.active,
.eo2-sec-num,
.lp-style-card.is-active,
.lp-segmented button.is-active,
.active-badge {
    background: var(--brand-gradient) !important;
    border-color: transparent !important;
    color: var(--om-action-ink) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--om-brand) 24%, transparent) !important;
}

.btn-primary:hover,
.primary-btn:hover,
.add-order-btn:hover,
.save-edit-btn:hover,
.edit-modal-footer .btn-save:hover,
.eo2-btn-primary:hover,
.cf-btn-primary:hover,
.lp-primary-btn:hover,
.appear-save-btn:hover,
.bulk-action-btn.primary:hover {
    background: var(--om-brand-hover) !important;
    color: var(--om-action-ink) !important;
}

.link-badge,
.switcher-badge,
.plan-badge,
.setup-tag,
.sg-step-status,
.spy-empty-tag,
.badge,
.pill,
.tag,
.ord-phone,
.ord-location,
.eo2-chip,
.lp-section-tag,
.cf-badge {
    background: var(--om-brand-soft) !important;
    border-color: var(--om-brand-border) !important;
    color: var(--om-brand) !important;
}

.ord-id {
    background: #ef4444 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

.ord-img,
.ord-img-placeholder,
.eo2-nav-prod img,
.eo2-nav-prod-emoji,
.stat-card-icon,
.lp-card-icon,
.sys-card-icon,
.switcher-icon {
    background: var(--om-brand-soft) !important;
    border-color: var(--om-brand-border) !important;
    color: var(--om-brand) !important;
    box-shadow: none !important;
}

.stat-card-icon.green,
.ord-action-btn.act-print,
.stat-card-change.positive,
.funnel-confirmed,
.funnel-delivered {
    color: #15803d !important;
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
}

.stat-card-icon.amber,
.ord-action-btn.act-note,
.deliv-toggle.tag-home,
.stat-card-change.negative {
    color: #b45309 !important;
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

.stat-card-icon.red,
.badge-cancelled,
.badge-returned,
.danger,
.btn-danger {
    color: #b91c1c !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

.ord-action-btn.act-edit,
.ord-action-btn.act-view,
.stat-card-icon.blue,
.stat-card-icon.purple,
.stat-card-icon.cyan,
.funnel-shipped,
.funnel-new,
.deliv-toggle.tag-desk {
    background: var(--om-brand-soft) !important;
    border-color: var(--om-brand-border) !important;
    color: var(--om-brand) !important;
}

.ord-action-btn:hover,
.ord-action-btn.act-edit:hover,
.ord-action-btn.act-view:hover,
.ord-action-btn.act-note:hover,
.ord-action-btn.act-print:hover {
    background: var(--om-brand) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--om-brand) 28%, transparent) !important;
}

.edit-modal-header,
.eo2-topbar,
.lp-modal-header,
.cf-modal-header {
    background: var(--brand-gradient) !important;
    color: var(--om-action-ink) !important;
    border-color: transparent !important;
}

.edit-modal-header h3,
.eo2-topbar strong,
.lp-modal-header h3,
.cf-modal-header h3 {
    color: var(--om-action-ink) !important;
}

.revenue-card::before,
.table-card::before,
.stat-card::before,
.section-title-row h2::after,
.topbar-brand::after {
    background: linear-gradient(90deg, var(--om-brand), var(--accent)) !important;
}

body.dark {
    --om-surface-raised: #4f4a54;
    --om-surface-tint: #444346;
    --om-border-soft: rgba(255, 255, 255, 0.10);
    --om-border-strong: rgba(255, 255, 255, 0.18);
    --om-text: #f4f4f5;
    --om-text-soft: #d4d4d8;
    --om-text-muted: #a1a1aa;
    --om-shadow-card: 0 8px 22px rgba(0, 0, 0, 0.22);
    --om-shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.34);
}

/* Final high-specificity pass: older order styles use late !important rules. */
html:not(.dark) body .topbar-btn,
html:not(.dark) body button.topbar-btn,
html:not(.dark) body .topbar-system-card,
html:not(.dark) body .system-switcher .switcher-card,
html:not(.dark) body .appearance-panel .appear-reset-btn,
html:not(.dark) body .appearance-panel .appear-action-btn {
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--om-text-soft) !important;
    border-color: var(--om-border-soft) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) body .topbar-btn:hover,
html:not(.dark) body button.topbar-btn:hover,
html:not(.dark) body .topbar-system-card:hover,
html:not(.dark) body .system-switcher .switcher-card:hover {
    background: var(--om-surface-soft) !important;
    color: var(--om-brand) !important;
    border-color: var(--om-border-strong) !important;
}

html:not(.dark) body .stat-card,
html:not(.dark) body .revenue-card,
html:not(.dark) body .table-card,
html:not(.dark) body .funnel-section,
html:not(.dark) body .plan-usage-banner,
html:not(.dark) body .spy-kpi,
html:not(.dark) body .lp-card,
html:not(.dark) body .cf-card,
html:not(.dark) body .eo2-section,
html:not(.dark) body .eo2-nav-card,
html:not(.dark) body .dom-card,
html:not(.dark) body .carrier-card,
html:not(.dark) body .integration-card {
    background: var(--om-surface-raised) !important;
    color: var(--om-text) !important;
    border: 1px solid var(--om-border-soft) !important;
    box-shadow: var(--om-shadow-card) !important;
}

html:not(.dark) body .stat-card:hover,
html:not(.dark) body .revenue-card:hover,
html:not(.dark) body .table-card:hover,
html:not(.dark) body .spy-kpi:hover,
html:not(.dark) body .lp-card:hover,
html:not(.dark) body .eo2-section:hover {
    border-color: var(--om-border-strong) !important;
    box-shadow: var(--om-shadow-hover) !important;
}

html:not(.dark) body .link-badge,
html:not(.dark) body .link-badge-cyan,
html:not(.dark) body .link-badge-count,
html:not(.dark) body .spy-link-badge,
html:not(.dark) body .switcher-badge,
html:not(.dark) body .plan-badge,
html:not(.dark) body .setup-tag,
html:not(.dark) body .sg-step-status,
html:not(.dark) body .lp-section-tag,
html:not(.dark) body .cf-badge,
html:not(.dark) body .badge,
html:not(.dark) body .pill,
html:not(.dark) body .tag {
    background: var(--om-brand-soft) !important;
    color: var(--om-brand) !important;
    border: 1px solid var(--om-brand-border) !important;
    box-shadow: none !important;
}

html:not(.dark) body .active-badge,
html:not(.dark) body .sg-step-status.done {
    background: #ecfdf5 !important;
    color: #15803d !important;
    border-color: #bbf7d0 !important;
}

html:not(.dark) body .switcher-icon,
html:not(.dark) body .sys-card-icon,
html:not(.dark) body .stat-card-icon,
html:not(.dark) body .lp-card-icon,
html:not(.dark) body .ord-img-placeholder,
html:not(.dark) body .eo2-sec-num {
    background: var(--om-brand-soft) !important;
    color: var(--om-brand) !important;
    border-color: var(--om-brand-border) !important;
}

html:not(.dark) body .table-card-header,
html:not(.dark) body thead,
html:not(.dark) body thead th,
html:not(.dark) body .eo2-topbar,
html:not(.dark) body .eo2-body,
html:not(.dark) body .spy-filter-bar {
    background: var(--om-surface-soft) !important;
    color: var(--om-text) !important;
    border-color: var(--om-border-soft) !important;
}

html:not(.dark) body .btn-primary,
html:not(.dark) body .primary-btn,
html:not(.dark) body .add-order-btn,
html:not(.dark) body .save-edit-btn,
html:not(.dark) body .edit-modal-footer .btn-save,
html:not(.dark) body .eo2-btn-primary,
html:not(.dark) body .cf-btn-primary,
html:not(.dark) body .lp-primary-btn,
html:not(.dark) body .appear-save-btn,
html:not(.dark) body .bulk-action-btn.primary {
    background: var(--brand-gradient) !important;
    color: var(--om-action-ink) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--om-brand) 24%, transparent) !important;
}

html:not(.dark) body.dashboard-body .topbar-global .topbar-btn,
html:not(.dark) body.dashboard-body .topbar-global button.topbar-btn,
html:not(.dark) body.dashboard-body .topbar-global .topbar-system-link,
html:not(.dark) body.dashboard-body .topbar-global .topbar-system-card {
    background: rgba(255, 255, 255, 0.86) !important;
    color: var(--om-text-soft) !important;
    border: 1px solid var(--om-border-soft) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) body.dashboard-body .topbar-global .topbar-btn:hover,
html:not(.dark) body.dashboard-body .topbar-global button.topbar-btn:hover,
html:not(.dark) body.dashboard-body .topbar-global .topbar-system-link:hover,
html:not(.dark) body.dashboard-body .topbar-global .topbar-system-card:hover {
    background: var(--om-surface-soft) !important;
    color: var(--om-brand) !important;
    border-color: var(--om-border-strong) !important;
}

html:not(.dark) body.dashboard-body .sidebar .link-badge,
html:not(.dark) body.dashboard-body .sidebar .link-badge.link-badge-cyan,
html:not(.dark) body.dashboard-body .sidebar .link-badge.link-badge-count,
html:not(.dark) body.dashboard-body .ds-sidebar .link-badge,
html:not(.dark) body.dashboard-body .ds-sidebar .link-badge.link-badge-cyan,
html:not(.dark) body.dashboard-body .ds-sidebar .link-badge.link-badge-count {
    background: rgba(255, 255, 255, 0.13) !important;
    color: var(--om-sidebar-active-text) !important;
    border: 1px solid var(--om-sidebar-border) !important;
    box-shadow: none !important;
}

html:not(.dark) body.dashboard-body .stats-grid .stat-card,
html:not(.dark) body.dashboard-body .stat-card,
html:not(.dark) body.dashboard-body .overview-grid .stat-card {
    background: var(--om-surface-raised) !important;
    color: var(--om-text) !important;
    border: 1px solid var(--om-border-soft) !important;
    box-shadow: var(--om-shadow-card) !important;
}

html:not(.dark) body.dashboard-body #panel-overview .stats-grid .stat-card,
html:not(.dark) body.dashboard-body #panel-overview .stats-grid.stats-8 .stat-card,
html:not(.dark) body.dashboard-body #panel-overview .panel .stats-grid .stat-card {
    display: flex !important;
    background: var(--om-surface-raised) !important;
    color: var(--om-text) !important;
    border: 1px solid var(--om-border-soft) !important;
    border-radius: 14px !important;
    box-shadow: var(--om-shadow-card) !important;
}

html:not(.dark) body.dashboard-body #panel-overview .stats-grid .stat-card::before,
html:not(.dark) body.dashboard-body #panel-overview .stats-grid.stats-8 .stat-card::before {
    display: block !important;
    content: "" !important;
    background: linear-gradient(90deg, var(--om-brand), var(--accent)) !important;
}

/* [DISABLED] — these rules forced white text on panel headers in light mode,
   making content invisible against the new light theme. Now use ink variables. */
html:not(.dark) body.dashboard-body #panel-all-orders > .panel-header,
html:not(.dark) body.dashboard-body #panel-new-orders > .panel-header,
html:not(.dark) body.dashboard-body #panel-confirmation > .panel-header,
html:not(.dark) body.dashboard-body #panel-shipping > .panel-header,
html:not(.dark) body.dashboard-body #panel-returns > .panel-header,
html:not(.dark) body.dashboard-body #panel-delivery > .panel-header,
html:not(.dark) body.dashboard-body .main-content > .panel > .panel-header {
    color: var(--buld-ink-1, #1D1D1F) !important;
}

html:not(.dark) body.dashboard-body #panel-all-orders > .panel-header h1,
html:not(.dark) body.dashboard-body #panel-all-orders > .panel-header p,
html:not(.dark) body.dashboard-body #panel-new-orders > .panel-header h1,
html:not(.dark) body.dashboard-body #panel-new-orders > .panel-header p,
html:not(.dark) body.dashboard-body #panel-confirmation > .panel-header h1,
html:not(.dark) body.dashboard-body #panel-confirmation > .panel-header p,
html:not(.dark) body.dashboard-body #panel-shipping > .panel-header h1,
html:not(.dark) body.dashboard-body #panel-shipping > .panel-header p,
html:not(.dark) body.dashboard-body #panel-returns > .panel-header h1,
html:not(.dark) body.dashboard-body #panel-returns > .panel-header p,
html:not(.dark) body.dashboard-body #panel-delivery > .panel-header h1,
html:not(.dark) body.dashboard-body #panel-delivery > .panel-header p,
html:not(.dark) body.dashboard-body .main-content > .panel > .panel-header h1,
html:not(.dark) body.dashboard-body .main-content > .panel > .panel-header p {
    color: var(--buld-ink-1, #1D1D1F) !important;
    text-shadow: none !important;
}

html:not(.dark) body.dashboard-body .main-content > .panel > .panel-header p {
    color: var(--buld-ink-3, #6E6E73) !important;
    opacity: 1 !important;
}

/* Strong command buttons */
html:not(.dark) body.dashboard-body .panel-header .add-order-btn,
html:not(.dark) body.dashboard-body #addOrderBtn,
html:not(.dark) body.dashboard-body #addOrderBtn2,
html:not(.dark) body.dashboard-body button.add-order-btn,
html:not(.dark) body.dashboard-body .panel-header .btn-primary,
html:not(.dark) body.dashboard-body .panel-header .primary-btn,
html:not(.dark) body.dashboard-body .table-card-header .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 12px 26px rgba(2, 132, 199, 0.30), 0 2px 6px rgba(15, 23, 42, 0.22) !important;
}

html:not(.dark) body.dashboard-body .panel-header .add-order-btn:hover,
html:not(.dark) body.dashboard-body #addOrderBtn:hover,
html:not(.dark) body.dashboard-body #addOrderBtn2:hover,
html:not(.dark) body.dashboard-body button.add-order-btn:hover,
html:not(.dark) body.dashboard-body .panel-header .btn-primary:hover,
html:not(.dark) body.dashboard-body .panel-header .primary-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

html:not(.dark) body.dashboard-body .panel-header .btn-outline,
html:not(.dark) body.dashboard-body .header-actions .btn-outline,
html:not(.dark) body.dashboard-body #exportBtn {
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--om-brand) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
}

html:not(.dark) body.dashboard-body .panel-header .btn-outline:hover,
html:not(.dark) body.dashboard-body .header-actions .btn-outline:hover,
html:not(.dark) body.dashboard-body #exportBtn:hover {
    background: #ffffff !important;
    color: var(--om-brand-hover) !important;
    transform: translateY(-1px) !important;
}

/* Order status colors: readable, consistent, and easy to scan. */
html body.dashboard-body .badge.badge-new,
html body.dashboard-body .badge-new,
html body.dashboard-body select.badge-new,
html body.dashboard-body .status-select.badge-new {
    background: linear-gradient(135deg, var(--om-status-new), var(--om-status-new-2)) !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
}

html body.dashboard-body .badge.badge-pending,
html body.dashboard-body .badge-pending,
html body.dashboard-body select.badge-pending,
html body.dashboard-body .status-select.badge-pending,
html body.dashboard-body .badge.badge-postponed,
html body.dashboard-body .badge-postponed {
    background: linear-gradient(135deg, var(--om-status-warn), var(--om-status-warn-2)) !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
}

html body.dashboard-body .badge.badge-confirmed,
html body.dashboard-body .badge-confirmed,
html body.dashboard-body select.badge-confirmed,
html body.dashboard-body .status-select.badge-confirmed,
html body.dashboard-body .badge.badge-delivered,
html body.dashboard-body .badge-delivered,
html body.dashboard-body select.badge-delivered,
html body.dashboard-body .status-select.badge-delivered {
    background: linear-gradient(135deg, var(--om-status-green), var(--om-status-green-2)) !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.30) !important;
}

html body.dashboard-body .badge.badge-shipped,
html body.dashboard-body .badge-shipped,
html body.dashboard-body select.badge-shipped,
html body.dashboard-body .status-select.badge-shipped,
html body.dashboard-body .badge.badge-transit,
html body.dashboard-body .badge-transit,
html body.dashboard-body select.badge-transit,
html body.dashboard-body .status-select.badge-transit {
    background: linear-gradient(135deg, var(--om-status-ship), var(--om-status-ship-2)) !important;
    border-color: #0369a1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28) !important;
}

html body.dashboard-body .badge.badge-returned,
html body.dashboard-body .badge-returned,
html body.dashboard-body select.badge-returned,
html body.dashboard-body .status-select.badge-returned,
html body.dashboard-body .badge.badge-cancelled,
html body.dashboard-body .badge-cancelled,
html body.dashboard-body select.badge-cancelled,
html body.dashboard-body .status-select.badge-cancelled,
html body.dashboard-body .badge.badge-noanswer,
html body.dashboard-body .badge-noanswer,
html body.dashboard-body .badge.badge-noanswer1,
html body.dashboard-body .badge-noanswer1,
html body.dashboard-body .badge.badge-noanswer2,
html body.dashboard-body .badge-noanswer2,
html body.dashboard-body .badge.badge-noanswer3,
html body.dashboard-body .badge-noanswer3,
html body.dashboard-body select.badge-noanswer,
html body.dashboard-body select.badge-noanswer1,
html body.dashboard-body select.badge-noanswer2,
html body.dashboard-body select.badge-noanswer3 {
    background: linear-gradient(135deg, var(--om-status-red), var(--om-status-red-2)) !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.30) !important;
}

html body.dashboard-body .badge,
html body.dashboard-body [class*="badge-"] {
    font-weight: 800 !important;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.18) !important;
}

html body.dashboard-body select.badge,
html body.dashboard-body select[class*="badge-"] {
    min-width: 116px !important;
    border-radius: 8px !important;
    padding: 7px 28px 7px 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

html body.dashboard-body select.badge option,
html body.dashboard-body select[class*="badge-"] option {
    background: #ffffff !important;
    color: #111827 !important;
}

.funnel-new { background: var(--om-status-new) !important; }
.funnel-confirmed,
.funnel-delivered { background: var(--om-status-green) !important; }
.funnel-shipped,
.funnel-transit { background: var(--om-status-ship) !important; }
.funnel-returned,
.funnel-cancelled,
.funnel-noanswer { background: var(--om-status-red) !important; }