/* ==========================================================================
   DARK THEME — Complete AdminJS Override System
   Scoped to [data-theme="dark"] (set by theme-init.js)
   
   Architecture:
   1. Root & Body — eliminate all light surfaces
   2. Layout Containers — sidebar, content area, drawers
   3. Cards & Boxes — variant="card", variant="grey"
   4. Tables — headers, rows, hover states
   5. Forms — inputs, selects, textareas, react-select
   6. Navigation — tabs, breadcrumbs, pagination
   7. Overlays — modals, dropdowns, tooltips
   8. Dashboard — role-specific cards
   9. Badges & Status indicators
   10. Third-party — date pickers, phone inputs
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT & BODY
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  color-scheme: dark;

  /* ── Surfaces (layered: 0f → 13 → 16 → 1c → 22) ── */
  --ims-card-bg: #161619;
  --ims-surface-bg: #1a1a1e;
  --ims-surface-elevated: #1e1e23;
  --ims-modal-bg: #161619;
  --ims-hover-bg: #1e1e23;
  --ims-input-bg: #111114;
  --ims-input-disabled-bg: #0f0f12;
  --ims-filter-bg: #131316;
  --ims-code-bg: #111114;

  /* ── Text ── */
  --ims-text: #e4e4ec;
  --ims-text-secondary: #9898a6;
  --ims-text-muted: #6e6e7a;
  --ims-text-on-accent: #ffffff;
  --ims-text-heading: #f0f0f5;

  /* ── Borders (subtle, not harsh) ── */
  --ims-border: #232329;
  --ims-border-light: #1c1c22;
  --ims-border-strong: #2e2e36;

  /* ── Shadows (heavier in dark) ── */
  --ims-shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --ims-shadow-card-hover: 0 8px 24px rgba(0,0,0,0.5);
  --ims-shadow-modal: 0 20px 60px rgba(0,0,0,0.7);
  --ims-shadow-dropdown: 0 8px 24px rgba(0,0,0,0.6);

  /* ── Accent / Semantic ── */
  --ims-accent: #7c8cf5;
  --ims-accent-hover: #6b7cee;
  --ims-success: #34d399;
  --ims-warning: #fbbf24;
  --ims-danger: #f87171;
  --ims-info: #60a5fa;

  /* ── KPI / Tinted surfaces ── */
  --ims-kpi-green-bg: rgba(52, 211, 153, 0.10);
  --ims-kpi-yellow-bg: rgba(251, 191, 36, 0.08);
  --ims-kpi-red-bg: rgba(248, 113, 113, 0.08);
  --ims-kpi-blue-bg: rgba(96, 165, 250, 0.08);
  --ims-kpi-purple-bg: rgba(167, 139, 250, 0.08);

  /* ── Zone / Context ── */
  --ims-zone-selected-bg: rgba(96, 165, 250, 0.10);
  --ims-zone-unselected-bg: #1a1a1e;
  --ims-zone-warning-bg: rgba(251, 191, 36, 0.08);
  --ims-zone-hover-bg: #1e1e23;

  /* ── Table rows ── */
  --ims-row-alt-bg: #131316;
  --ims-row-hover-bg: #1e1e23;

  /* ── Icon ── */
  --ims-icon-secondary: #9898a6;
}

[data-theme="dark"] body,
[data-theme="dark"] #app {
  background: #0c0c0f !important;
  color: var(--ims-text);
}

[data-theme="dark"] [data-css="app"] {
  background: #0c0c0f !important;
}

/* --------------------------------------------------------------------------
   2. LAYOUT CONTAINERS
   -------------------------------------------------------------------------- */

/* Main content area */
[data-theme="dark"] [data-css="app"] > section,
[data-theme="dark"] [data-css="pages"],
[data-theme="dark"] main,
[data-theme="dark"] [class*="ContentWrapper"],
[data-theme="dark"] [class*="BaseContainer"] {
  background: #0f0f12;
}

/* Sidebar */
[data-theme="dark"] [data-css="sidebar"] {
  background: #0a0a0e !important;
  border-right: 1px solid #1e1e24;
}

/* Sidebar nav links */
[data-theme="dark"] [data-css="sidebar"] a[href] {
  border-color: rgba(255, 255, 255, 0.06) !important;
  background-image: linear-gradient(to left, transparent 50%, rgba(37, 107, 238, 0.08) 50%) !important;
}

[data-theme="dark"] [data-css="sidebar"] a[href]:hover {
  border-color: rgba(37, 107, 238, 0.4) !important;
  box-shadow: 0 2px 8px rgba(37, 107, 238, 0.12) !important;
}

[data-theme="dark"] [data-css="sidebar"] a[href][class*="selected"],
[data-theme="dark"] [data-css="sidebar"] a[href][aria-current="page"] {
  border-color: rgba(37, 107, 238, 0.5) !important;
  background-image: linear-gradient(to right, rgba(37, 107, 238, 0.12), rgba(37, 107, 238, 0.04)) !important;
  background-size: 100% 100% !important;
  border-left: 3px solid #256BEE !important;
}

/* Sidebar section labels */
[data-theme="dark"] [data-css="sidebar"] [data-css="sidebar-pages"] > nav > section > label,
[data-theme="dark"] [data-css="sidebar"] [data-css="sidebar-resources"] > nav > section > label {
  color: #8a8a96 !important;
}

/* Category colors in dark mode — lighter to maintain contrast */
[data-theme="dark"] [data-category="inventory"] nav > section > label { color: #64B5F6 !important; border-bottom-color: rgba(100, 181, 246, 0.2) !important; }
[data-theme="dark"] [data-category="inventory"] a[href] { border-color: rgba(100, 181, 246, 0.15) !important; background-image: linear-gradient(to left, transparent 50%, rgba(100, 181, 246, 0.06) 50%) !important; }
[data-theme="dark"] [data-category="sales"] nav > section > label { color: #9FA8DA !important; border-bottom-color: rgba(159, 168, 218, 0.2) !important; }
[data-theme="dark"] [data-category="sales"] a[href] { border-color: rgba(159, 168, 218, 0.15) !important; background-image: linear-gradient(to left, transparent 50%, rgba(159, 168, 218, 0.06) 50%) !important; }
[data-theme="dark"] [data-category="orders"] nav > section > label { color: #81C784 !important; border-bottom-color: rgba(129, 199, 132, 0.2) !important; }
[data-theme="dark"] [data-category="orders"] a[href] { border-color: rgba(129, 199, 132, 0.15) !important; background-image: linear-gradient(to left, transparent 50%, rgba(129, 199, 132, 0.06) 50%) !important; }
[data-theme="dark"] [data-category="admin"] nav > section > label { color: #FFB74D !important; border-bottom-color: rgba(255, 183, 77, 0.2) !important; }
[data-theme="dark"] [data-category="admin"] a[href] { border-color: rgba(255, 183, 77, 0.15) !important; background-image: linear-gradient(to left, transparent 50%, rgba(255, 183, 77, 0.06) 50%) !important; }

/* Filter drawer / side panel */
[data-theme="dark"] [data-css="filter-drawer"],
[data-theme="dark"] [class*="FilterDrawer"] {
  background: #131316 !important;
  border-left: 1px solid #1e1e24;
}

/* --------------------------------------------------------------------------
   3. CARDS & BOXES
   -------------------------------------------------------------------------- */

/* AdminJS Box variants */
[data-theme="dark"] [variant="card"],
[data-theme="dark"] [variant="white"],
[data-theme="dark"] [variant="container"] {
  background: var(--ims-card-bg) !important;
  border: 1px solid var(--ims-border);
  color: var(--ims-text);
  box-shadow: var(--ims-shadow-card);
}

[data-theme="dark"] [variant="grey"] {
  background: var(--ims-surface-bg) !important;
  border: 1px solid var(--ims-border);
  color: var(--ims-text);
}

/* Action headers and resource views */
[data-theme="dark"] [class*="ActionHeader"],
[data-theme="dark"] [class*="RecordInList"],
[data-theme="dark"] [class*="BaseActionComponent"],
[data-theme="dark"] [class*="PropertyBody"] {
  color: #e2e2e8;
}

/* Empty state containers */
[data-theme="dark"] [class*="InfoBox"],
[data-theme="dark"] [class*="NoRecords"],
[data-theme="dark"] [class*="EmptyState"] {
  background: #16161a;
  color: #8a8a96;
}

/* --------------------------------------------------------------------------
   4. TABLES
   -------------------------------------------------------------------------- */

[data-theme="dark"] table {
  background: #16161a;
  border-collapse: collapse;
}

[data-theme="dark"] table th {
  background: #111114 !important;
  color: #a0a0ac !important;
  border-bottom: 1px solid #222228;
  font-weight: 600;
}

[data-theme="dark"] table td {
  background: #16161a;
  color: #d0d0d8;
  border-bottom: 1px solid #1e1e24;
}

[data-theme="dark"] table tr:hover td {
  background: #1c1c22 !important;
}

[data-theme="dark"] table tr:active td {
  background: #222228 !important;
}

/* Table container wrapper */
[data-theme="dark"] [class*="TableWrapper"],
[data-theme="dark"] [class*="RecordsTable"] {
  background: #16161a;
  border: 1px solid #222228;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   5. FORMS — Inputs, Selects, Textareas
   -------------------------------------------------------------------------- */

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #111114 !important;
  border-color: #2a2a32 !important;
  color: #e2e2e8 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: #256BEE !important;
  box-shadow: 0 0 0 3px rgba(37, 107, 238, 0.15) !important;
  outline: none;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #5a5a66 !important;
}

[data-theme="dark"] input[disabled],
[data-theme="dark"] select[disabled],
[data-theme="dark"] textarea[disabled] {
  background: #0f0f12 !important;
  color: #5a5a66 !important;
  opacity: 0.7;
}

/* Labels */
[data-theme="dark"] label {
  color: #c0c0cc !important;
}

/* React-Select (used in filters and multi-select fields) */
[data-theme="dark"] [class*="-control"] {
  background: #111114 !important;
  border-color: #2a2a32 !important;
}

[data-theme="dark"] [class*="-singleValue"] {
  color: #e2e2e8 !important;
}

[data-theme="dark"] [class*="-placeholder"] {
  color: #5a5a66 !important;
}

[data-theme="dark"] [class*="-menu"] {
  background: #16161a !important;
  border: 1px solid #2a2a32 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] [class*="-option"] {
  background: transparent !important;
  color: #d0d0d8 !important;
}

[data-theme="dark"] [class*="-option"]:hover,
[data-theme="dark"] [class*="-option--is-focused"] {
  background: #222228 !important;
}

[data-theme="dark"] [class*="-option--is-selected"] {
  background: rgba(37, 107, 238, 0.15) !important;
  color: #7EB6FF !important;
}

[data-theme="dark"] [class*="-multiValue"] {
  background: #222228 !important;
  border: 1px solid #2a2a32;
}

[data-theme="dark"] [class*="-multiValue__label"] {
  color: #d0d0d8 !important;
}

[data-theme="dark"] [class*="-indicatorSeparator"] {
  background-color: #2a2a32 !important;
}

[data-theme="dark"] [class*="-input"] {
  color: #e2e2e8 !important;
}

/* --------------------------------------------------------------------------
   6. NAVIGATION — Tabs, Breadcrumbs, Pagination
   -------------------------------------------------------------------------- */

/* Tabs */
[data-theme="dark"] [class*="Tab"][aria-selected="true"],
[data-theme="dark"] [role="tab"][aria-selected="true"] {
  border-bottom-color: #256BEE !important;
  color: #e2e2e8 !important;
}

[data-theme="dark"] [class*="Tab"],
[data-theme="dark"] [role="tab"] {
  color: #8a8a96;
}

/* Breadcrumbs */
[data-theme="dark"] [class*="Breadcrumbs"],
[data-theme="dark"] [class*="breadcrumb"] {
  color: #8a8a96;
}

[data-theme="dark"] [class*="Breadcrumbs"] a,
[data-theme="dark"] [class*="breadcrumb"] a {
  color: #7EB6FF;
}

/* Pagination */
[data-theme="dark"] [class*="Pagination"] {
  color: #a0a0ac;
}

[data-theme="dark"] [class*="Pagination"] button {
  background: #16161a !important;
  border-color: #2a2a32 !important;
  color: #d0d0d8 !important;
}

[data-theme="dark"] [class*="Pagination"] button:hover {
  background: #222228 !important;
}

/* Links */
[data-theme="dark"] a:not([class*="sidebar"]):not([class*="nav"]) {
  color: #7EB6FF;
}

/* --------------------------------------------------------------------------
   7. OVERLAYS — Modals, Dropdowns, Tooltips
   -------------------------------------------------------------------------- */

/* Modals */
[data-theme="dark"] [class*="Modal"],
[data-theme="dark"] [role="dialog"],
[data-theme="dark"] [class*="DrawerContent"] {
  background: #16161a !important;
  border: 1px solid #222228;
  color: #e2e2e8;
}

/* Modal overlay */
[data-theme="dark"] [class*="ModalOverlay"],
[data-theme="dark"] [class*="Overlay"] {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* Dropdown menus */
[data-theme="dark"] [class*="DropDown"],
[data-theme="dark"] [class*="dropdown"],
[data-theme="dark"] ul[role="listbox"],
[data-theme="dark"] [class*="MenuList"] {
  background: #16161a !important;
  border: 1px solid #2a2a32 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] [class*="DropDown"] li:hover,
[data-theme="dark"] li[role="option"]:hover {
  background: #222228 !important;
}

/* Tooltip */
[data-theme="dark"] [class*="Tooltip"],
[data-theme="dark"] [role="tooltip"] {
  background: #222228 !important;
  color: #e2e2e8 !important;
  border: 1px solid #2a2a32;
}

/* --------------------------------------------------------------------------
   8. DASHBOARD — Role-specific cards
   -------------------------------------------------------------------------- */

/* All dashboard backgrounds → transparent (dark bg shows through) */
[data-theme="dark"] .dashboard-manager,
[data-theme="dark"] .dashboard-sales,
[data-theme="dark"] .dashboard-warehouse,
[data-theme="dark"] .dashboard-finance,
[data-theme="dark"] .dashboard-auditor,
[data-theme="dark"] .dashboard-super-admin,
[data-theme="dark"] .dashboard-admin {
  background: transparent !important;
}

/* Default dashboard area */
[data-theme="dark"] [data-css="default-dashboard"] {
  background: #0f0f12 !important;
}

[data-theme="dark"] [data-css="default-dashboard"] section:last-of-type {
  background: transparent !important;
}

/* Dashboard cards — common */
[data-theme="dark"] [class*="dashboard-"] [class*="card"],
[data-theme="dark"] .dashboard-warehouse .warehouse-action-btn,
[data-theme="dark"] .dashboard-auditor .audit-stat,
[data-theme="dark"] .dashboard-auditor .audit-card {
  background: #16161a !important;
  border-color: #222228 !important;
  color: #e2e2e8 !important;
}

[data-theme="dark"] [class*="dashboard-"] [class*="card"]:hover {
  border-color: #2a2a32 !important;
}

/* Sales dashboard gradient cards — darkened */
[data-theme="dark"] .dashboard-sales .card-success { background: linear-gradient(135deg, #0d3322 0%, #1a4030 100%) !important; }
[data-theme="dark"] .dashboard-sales .card-info { background: linear-gradient(135deg, #0d2440 0%, #162d4a 100%) !important; }
[data-theme="dark"] .dashboard-sales .card-warning { background: linear-gradient(135deg, #3d1a1a 0%, #4a2020 100%) !important; }
[data-theme="dark"] .dashboard-sales .card-primary { background: linear-gradient(135deg, #1a1a40 0%, #252550 100%) !important; }

/* Finance dashboard */
[data-theme="dark"] .dashboard-finance .finance-positive {
  background: linear-gradient(to right, #16161a 0%, #1a2e1a 100%) !important;
  border-left-color: #4CAF50 !important;
  color: #e2e2e8 !important;
}

[data-theme="dark"] .dashboard-finance .finance-negative {
  background: linear-gradient(to right, #16161a 0%, #2e1a1a 100%) !important;
  border-left-color: #f44336 !important;
  color: #e2e2e8 !important;
}

/* Sales action buttons in dark mode */
[data-theme="dark"] .dashboard-sales .sales-action-btn {
  background: linear-gradient(135deg, #3040D6 0%, #4a2d82 100%) !important;
}

/* Product cards */
[data-theme="dark"] .dashboard-sales .product-card {
  background: #16161a !important;
  border-color: #222228 !important;
  color: #e2e2e8 !important;
}

[data-theme="dark"] .dashboard-sales .product-card:hover {
  border-color: #256BEE !important;
}

/* --------------------------------------------------------------------------
   9. BADGES & STATUS INDICATORS
   -------------------------------------------------------------------------- */

[data-theme="dark"] [class*="Badge"] {
  border: 1px solid transparent;
}

[data-theme="dark"] [class*="Badge"][class*="success"],
[data-theme="dark"] [class*="badge-success"] {
  background: rgba(46, 125, 50, 0.15) !important;
  color: #66BB6A !important;
  border-color: rgba(46, 125, 50, 0.3) !important;
}

[data-theme="dark"] [class*="Badge"][class*="error"],
[data-theme="dark"] [class*="Badge"][class*="danger"],
[data-theme="dark"] [class*="badge-error"] {
  background: rgba(198, 40, 40, 0.15) !important;
  color: #EF5350 !important;
  border-color: rgba(198, 40, 40, 0.3) !important;
}

[data-theme="dark"] [class*="Badge"][class*="info"],
[data-theme="dark"] [class*="badge-info"] {
  background: rgba(37, 107, 238, 0.15) !important;
  color: #64B5F6 !important;
  border-color: rgba(37, 107, 238, 0.3) !important;
}

[data-theme="dark"] [class*="Badge"][class*="warning"],
[data-theme="dark"] [class*="badge-warning"] {
  background: rgba(255, 152, 0, 0.15) !important;
  color: #FFB74D !important;
  border-color: rgba(255, 152, 0, 0.3) !important;
}

[data-theme="dark"] [class*="Badge"][class*="default"],
[data-theme="dark"] [class*="badge-default"] {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #a0a0ac !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* --------------------------------------------------------------------------
   10. THIRD-PARTY — Date pickers, phone inputs
   -------------------------------------------------------------------------- */

/* Date picker */
[data-theme="dark"] .adminjs_DatePicker .react-datepicker-wrapper {
  border-color: #2a2a32 !important;
}

[data-theme="dark"] .react-datepicker,
[data-theme="dark"] .adminjs_DatePicker .react-datepicker {
  background: #16161a !important;
  border-color: #2a2a32 !important;
  color: #e2e2e8 !important;
}

[data-theme="dark"] .react-datepicker__header,
[data-theme="dark"] .adminjs_DatePicker .react-datepicker__header {
  background: #111114 !important;
  border-bottom-color: #222228 !important;
}

[data-theme="dark"] .react-datepicker__current-month,
[data-theme="dark"] .react-datepicker__day-name {
  color: #e2e2e8 !important;
}

[data-theme="dark"] .react-datepicker__day {
  color: #d0d0d8 !important;
}

[data-theme="dark"] .react-datepicker__day:hover {
  background: #256BEE !important;
  color: #fff !important;
}

[data-theme="dark"] .react-datepicker__day--selected {
  background: #256BEE !important;
  color: #fff !important;
}

[data-theme="dark"] .react-datepicker__day--outside-month {
  color: #5a5a66 !important;
}

/* Phone input */
[data-theme="dark"] .adminjs_PhoneInput .form-control,
[data-theme="dark"] .adminjs_PhoneInput .flag-dropdown {
  background: #111114 !important;
  border-color: #2a2a32 !important;
  color: #e2e2e8 !important;
}

[data-theme="dark"] .adminjs_PhoneInput .country-list {
  background: #16161a !important;
}

[data-theme="dark"] .adminjs_PhoneInput .country-list .country:hover,
[data-theme="dark"] .adminjs_PhoneInput .country-list .country.highlight {
  background: #222228 !important;
}

/* --------------------------------------------------------------------------
   11. BUTTONS
   -------------------------------------------------------------------------- */

/* Secondary / default buttons */
[data-theme="dark"] button[class*="default"],
[data-theme="dark"] [class*="Button"][variant="default"] {
  background: #1a1a1f !important;
  border-color: #2a2a32 !important;
  color: #d0d0d8 !important;
}

[data-theme="dark"] button[class*="default"]:hover,
[data-theme="dark"] [class*="Button"][variant="default"]:hover {
  background: #222228 !important;
  border-color: #35353e !important;
}

/* Danger buttons */
[data-theme="dark"] button[class*="danger"],
[data-theme="dark"] [class*="Button"][variant="danger"] {
  background: rgba(198, 40, 40, 0.15) !important;
  color: #EF5350 !important;
  border-color: rgba(198, 40, 40, 0.3) !important;
}

/* --------------------------------------------------------------------------
   12. MISCELLANEOUS
   -------------------------------------------------------------------------- */

/* Headings */
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 {
  color: #f0f0f5 !important;
}

/* Horizontal rules and separators */
[data-theme="dark"] hr,
[data-theme="dark"] [class*="Separator"] {
  border-color: #222228 !important;
}

/* Scrollbar styling for Webkit */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f0f12;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2a2a32;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #3a3a44;
}

/* Rich text editor */
[data-theme="dark"] [class*="RichText"] [contenteditable] {
  background: #111114 !important;
  color: #e2e2e8 !important;
}

/* Property value display (show pages) */
[data-theme="dark"] [class*="ValueGroup"] {
  color: #d0d0d8;
}

/* Section (grouped properties in forms) */
[data-theme="dark"] [class*="Section"] > [class*="SectionTitle"],
[data-theme="dark"] section > h3 {
  color: #a0a0ac;
  border-bottom-color: #222228;
}

/* Notification toasts */
[data-theme="dark"] [class*="MessageBox"],
[data-theme="dark"] [class*="Notification"] {
  background: #1a1a1f !important;
  border-color: #2a2a32 !important;
  color: #e2e2e8 !important;
}

/* Login page */
[data-theme="dark"] [data-css="login"] {
  background: #0f0f12 !important;
}

[data-theme="dark"] [data-css="login"] [variant="card"] {
  background: #16161a !important;
}

/* SVG icons — ensure visibility */
[data-theme="dark"] svg[fill="#0C1E29"] {
  fill: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] svg[stroke="#3B3552"] {
  stroke: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   13. CATCH-ALL — Override remaining inline white backgrounds
   Targets common AdminJS Box bg="white" prop output and inline styles
   -------------------------------------------------------------------------- */

/* AdminJS Box bg="white" renders as background-color on the element */
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background: rgb(255, 255, 255)"] {
  background-color: var(--ims-card-bg) !important;
}

/* Dashboard wrapper backgrounds that were gradient-based */
[data-theme="dark"] .dashboard-manager [style*="background"],
[data-theme="dark"] .dashboard-warehouse [style*="background: white"] {
  background: var(--ims-card-bg) !important;
}

/* Ensure select/input elements inside custom pages inherit dark backgrounds */
[data-theme="dark"] [data-css="pages"] select,
[data-theme="dark"] [data-css="pages"] input[type="text"],
[data-theme="dark"] [data-css="pages"] input[type="search"],
[data-theme="dark"] [data-css="pages"] input[type="number"] {
  background-color: var(--ims-input-bg) !important;
  border-color: var(--ims-border) !important;
  color: var(--ims-text) !important;
}

/* Modal/dialog containers rendered by custom components */
[data-theme="dark"] [style*="position: fixed"][style*="background-color: var(--ims-modal-bg)"],
[data-theme="dark"] [style*="position: fixed"] > [style*="border-radius"] {
  color: var(--ims-text);
}

/* KPI and metric cards with light accent backgrounds */
[data-theme="dark"] [style*="background-color: rgb(240, 253, 244)"] { background-color: var(--ims-kpi-green-bg) !important; }
[data-theme="dark"] [style*="background-color: rgb(255, 251, 235)"] { background-color: var(--ims-kpi-yellow-bg) !important; }
[data-theme="dark"] [style*="background-color: rgb(254, 242, 242)"] { background-color: var(--ims-kpi-red-bg) !important; }
[data-theme="dark"] [style*="background-color: rgb(238, 242, 255)"] { background-color: var(--ims-kpi-blue-bg) !important; }
[data-theme="dark"] [style*="background-color: rgb(239, 246, 255)"] { background-color: var(--ims-kpi-blue-bg) !important; }
[data-theme="dark"] [style*="background-color: rgb(250, 245, 255)"] { background-color: rgba(139, 92, 246, 0.12) !important; }
[data-theme="dark"] [style*="background-color: rgb(240, 249, 255)"] { background-color: rgba(14, 165, 233, 0.12) !important; }

/* Warning/info accent backgrounds */
[data-theme="dark"] [style*="background-color: rgb(255, 243, 224)"] { background-color: var(--ims-kpi-yellow-bg) !important; }
[data-theme="dark"] [style*="background-color: rgb(255, 243, 205)"] { background-color: rgba(255, 152, 0, 0.15) !important; }

/* Fix grey surface backgrounds that look too light in dark mode */
[data-theme="dark"] [style*="background-color: rgb(245, 245, 245)"],
[data-theme="dark"] [style*="background-color: rgb(249, 250, 251)"],
[data-theme="dark"] [style*="background-color: rgb(250, 250, 250)"] {
  background-color: var(--ims-surface-bg) !important;
}

/* --------------------------------------------------------------------------
   14. ENHANCED GLOBAL OVERRIDES — Modern SaaS feel
   -------------------------------------------------------------------------- */

/* Links */
[data-theme="dark"] a:not([data-css="sidebar"] a) {
  color: var(--ims-accent);
}

/* Badges — keep text legible */
[data-theme="dark"] [class*="Badge"] {
  border: 1px solid rgba(255,255,255,0.08);
}

/* Tooltips */
[data-theme="dark"] [class*="Tooltip"],
[data-theme="dark"] [role="tooltip"] {
  background: #1e1e23 !important;
  color: #e4e4ec !important;
  border: 1px solid #2e2e36 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Chip / Tag components */
[data-theme="dark"] [class*="Tag"],
[data-theme="dark"] [class*="Chip"] {
  background: #1e1e23 !important;
  border-color: #2e2e36 !important;
  color: #d0d0d8 !important;
}

/* Drawer / panel backgrounds */
[data-theme="dark"] [class*="Drawer"] {
  background: #131316 !important;
  border-color: #232329 !important;
}

/* Progress bars */
[data-theme="dark"] [class*="ProgressBar"] {
  background: #1a1a1e !important;
}

/* Tab underline active states */
[data-theme="dark"] [class*="Tab"][aria-selected="true"],
[data-theme="dark"] [class*="Tab"].active {
  border-bottom-color: var(--ims-accent) !important;
  color: var(--ims-text) !important;
}

/* Disabled inputs */
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled {
  background: var(--ims-input-disabled-bg) !important;
  color: var(--ims-text-muted) !important;
  border-color: var(--ims-border-light) !important;
}

/* Focus rings — accent color */
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--ims-accent) !important;
  box-shadow: 0 0 0 2px rgba(124, 140, 245, 0.15) !important;
  outline: none !important;
}

/* Placeholder text */
[data-theme="dark"] ::placeholder {
  color: var(--ims-text-muted) !important;
  opacity: 1;
}

/* Code/pre blocks */
[data-theme="dark"] code,
[data-theme="dark"] pre {
  background: var(--ims-code-bg) !important;
  color: #d0d0d8 !important;
  border-color: #232329 !important;
}

/* --------------------------------------------------------------------------
   15. CATCH-ALL TEXT COLOR OVERRIDES
   Handles color="#666" etc passed as AdminJS component props
   -------------------------------------------------------------------------- */

[data-theme="dark"] [style*="color: rgb(102, 102, 102)"] { color: var(--ims-text-secondary) !important; }
[data-theme="dark"] [style*="color: rgb(153, 153, 153)"] { color: var(--ims-text-muted) !important; }
[data-theme="dark"] [style*="color: rgb(51, 51, 51)"] { color: var(--ims-text) !important; }
[data-theme="dark"] [style*="color: rgb(26, 26, 26)"] { color: var(--ims-text) !important; }
[data-theme="dark"] [style*="color: rgb(108, 117, 125)"] { color: var(--ims-text-secondary) !important; }
[data-theme="dark"] [style*="color: rgb(73, 80, 87)"] { color: var(--ims-text-secondary) !important; }
[data-theme="dark"] [color="grey60"] { color: var(--ims-text-secondary) !important; }
[data-theme="dark"] [color="grey80"] { color: var(--ims-text) !important; }

/* --------------------------------------------------------------------------
   17. PRODUCT IMAGES — Handle white-background product photos in dark mode
   Use a light container bg so images always show correctly,
   regardless of their original white background
   -------------------------------------------------------------------------- */

/* Product card image containers in stock-overview */
[data-theme="dark"] .product-card-image-container {
  background-color: #f0f0f0 !important;
}

/* For product images inside the card — no blend mode needed in dark,
   the slightly lightened container provides enough contrast */
[data-theme="dark"] img.product-card-img {
  mix-blend-mode: normal;
}

/* --------------------------------------------------------------------------
   16. ANIMATIONS & TRANSITIONS — Smooth theme transitions
   -------------------------------------------------------------------------- */

[data-theme="dark"] [style*="background"],
[data-theme="dark"] [style*="color"],
[data-theme="dark"] [style*="border"] {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}