/* Enzalada dark mode: app-wide contrast and surface consistency.
   Loaded after module CSS to override legacy light-only component rules.
   Scope deliberately excludes light mode and native media previews. */
body.app-dark {
  color-scheme: dark;
  --dark-canvas:#090b0f;
  --dark-surface:#15191f;
  --dark-surface-2:#1c222a;
  --dark-surface-3:#252c36;
  --dark-line:#323b46;
  --dark-text:#f6f8fb;
  --dark-muted:#b8c2ce;
}
body.app-dark .app-main,
body.app-dark .app-page,
body.app-dark .app-page:not(#home-page) .panel,
body.app-dark .app-page:not(#home-page) .card,
body.app-dark .app-page:not(#home-page) .stat,
body.app-dark .app-page:not(#home-page) .table-wrap,
body.app-dark .app-page:not(#home-page) .supplier-card,
body.app-dark .app-page:not(#home-page) .supplier-sheet,
body.app-dark .app-page:not(#home-page) .modal,
body.app-dark .app-page:not(#home-page) .master-po-table-wrap,
body.app-dark .app-page:not(#home-page) .incoming-summary,
body.app-dark .app-page:not(#home-page) .incoming-overview-strip,
body.app-dark .app-page:not(#home-page) .incoming-stat,
body.app-dark .app-page:not(#home-page) .incoming-order-card,
body.app-dark .app-page:not(#home-page) .planner-setup,
body.app-dark .app-page:not(#home-page) .planner-card,
body.app-dark .app-page:not(#home-page) .product-master-card,
body.app-dark .app-page:not(#home-page) .product-stat {
  background:#15191f!important;
  color:#f6f8fb!important;
  border-color:#323b46!important;
}
/* Inner wrappers inherit their parent's surface; no floating black rectangles. */
body.app-dark .app-page:not(#home-page) :is(section,article,aside,fieldset,form,details,summary,table,thead,tbody,tfoot,tr,td,th,ul,ol,li,header,footer,div) {
  background-color:transparent!important;
  color:inherit;
  border-color:#323b46!important;
}
/* Subsections blend with the surrounding panel, including supplier metadata. */
body.app-dark .app-page:not(#home-page) :is(.panel-header,.card-header,.table-header,.filter-bar,.toolbar,.summary-bar,.incoming-dashboard-switch,.master-po-header,.master-po-filters,.planner-header,.product-master-toolbar,th,thead,tr:nth-child(even)) {
  background-color:transparent!important;
}
body.app-dark .app-page:not(#home-page) :is(button,[role="button"],.btn,.filter-tab,.tab-button,.pill,.chip),
body.app-dark .app-page:not(#home-page) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,[contenteditable="true"]) {
  background:#222831!important;
  color:#fff!important;
  border-color:#3a4552!important;
  box-shadow:none;
}
body.app-dark .app-page:not(#home-page) :is(button,[role="button"],.btn,.filter-tab,.tab-button):hover:not(:disabled) {
  background:#303846!important;
  color:#fff!important;
}
body.app-dark .app-page:not(#home-page) :is(button,[role="button"],.btn,.filter-tab,.tab-button).active,
body.app-dark .app-page:not(#home-page) :is(button,[role="button"],.btn,.filter-tab,.tab-button)[aria-selected="true"] {
  background:#344154!important;
  color:#fff!important;
}
body.app-dark .app-page:not(#home-page) :is(h1,h2,h3,h4,h5,h6,p,small,label,strong,b,em,a,td,th,dt,dd,legend,option) {
  color:#f6f8fb!important;
}
body.app-dark .app-page:not(#home-page) :is(input,textarea)::placeholder { color:#aeb9c7!important;opacity:1 }
body.app-dark .app-page:not(#home-page) :is(input[type="checkbox"],input[type="radio"]) { accent-color:#60a5fa; }
body.app-dark .app-page:not(#home-page) :is(button,input,select,textarea):focus-visible {
  outline:2px solid #7fb5ff!important;outline-offset:2px;
}
body.app-dark .app-page:not(#home-page) :is(button,input,select,textarea):disabled {
  color:#aeb9c7!important;opacity:.62;
}
/* Apply to popovers and dialogs mounted outside app-page as well. */
body.app-dark :is(.modal,.modal-content,.popover,.dropdown-menu,.dialog-content,.collab-popover,.enzalada-chat-panel) {
  background:#15191f!important;color:#fff!important;border-color:#323b46!important;
}
body.app-dark :is(.modal,.modal-content,.popover,.dropdown-menu,.dialog-content,.collab-popover,.enzalada-chat-panel) :is(button,input,select,textarea) {
  background:#222831!important;color:#fff!important;border-color:#3a4552!important;
}
/* Keep non-interactive layout spacers transparent where appropriate. */
body.app-dark .app-page:not(#home-page) :is(.spacer,.divider,.empty-space) {background:transparent!important}
/* The header and sidebar remain dark, and buttons always use light text. */
body.app-dark :is(.global-bar,.app-sidebar) button {color:#fff!important}

/* Defective, PO, incoming and product-master: legacy white filter/table surfaces. */
body.app-dark :is(#defective-page,#po-generator-page,#suppliers-incoming-page,#supplier-manager-page,#purchase-planning-page,#product-master-page) :is(.filters,.filter-panel,.filter-section,.filters-row,.table-controls,.table-container,.table-toolbar,.table-filters,.table-card,.table-body,.table-scroll,.summary-strip,.summary-card,.stats-card,.stat-card,.metric-card,.data-panel,.sheet,.sheet-header,.sheet-body,.list-header,.list-body,.list-card,.master-list,.master-table,.order-list,.order-row,.orders-container,.bulk-actions,.bulk-toolbar,.form-card,.form-panel,.preview-panel,.search-panel,.search-row,.filter-row,.tabs,.tab-bar,.tab-strip) {
  background:transparent!important;color:#f6f8fb!important;border-color:#323b46!important;
}
body.app-dark .app-page:not(#home-page) :is(button,[role="button"],input,select,textarea,option) {
  color:#fff!important;
}
body.app-dark .app-page:not(#home-page) :is(input,select,textarea) {
  background-color:#20262e!important;border-color:#3a4552!important;
}
body.app-dark .app-page:not(#home-page) :is(input[type="checkbox"],input[type="radio"]) {
  accent-color:#7db4ff;
}
body.app-dark .app-page:not(#home-page) :is(.empty-state,.loading-state,.placeholder,.hint,.help-text,.muted,.subtitle) {
  color:#c1cad5!important;
}
body.app-dark .app-page:not(#home-page) :is(.modal-overlay,.overlay,.backdrop) {
  background:rgba(0,0,0,.75)!important;
}
/* White inline backgrounds used by old components are overridden, but retain icon/photo imagery. */
body.app-dark .app-page:not(#home-page) :is([style*="background: white"],[style*="background:#fff"],[style*="background: #fff"],[style*="background-color: white"],[style*="background-color:#fff"],[style*="background-color: #fff"],[style*="background: rgb(255, 255, 255)"]) {
  background:transparent!important;color:#fff!important;
}
body.app-dark .app-page:not(#home-page) :is([style*="color: #111"],[style*="color:#111"],[style*="color: black"],[style*="color:#000"]) {
  color:#fff!important;
}

/* Final surface hierarchy: only actual outer cards/panels have a fill. */
body.app-dark .app-page:not(#home-page) :is(.panel,.card,.stat,.table-wrap,.supplier-card,.supplier-sheet,.master-po-table-wrap,.incoming-overview-strip,.incoming-order-card,.planner-setup,.planner-card,.product-master-card,.product-stat,.table-card,.summary-card,.stats-card,.stat-card,.metric-card,.form-card,.form-panel,.preview-panel) {
  background:#1b2028!important;color:#f6f8fb!important;border-color:#343b45!important;
}
/* Specific issue: supplier order headings and receiving metadata are inline content,
   not nested dark cards. Preserve the parent surface without black bars. */
body.app-dark .app-page:not(#home-page) :is(.supplier-order-header,.supplier-order-summary,.supplier-order-meta,.supplier-row,.supplier-info,.supplier-name,.incoming-order-header,.incoming-order-meta,.incoming-order-summary,.incoming-order-progress,.incoming-order-status,.incoming-order-details,.order-header,.order-meta,.order-summary,.order-progress,.order-status,.progress-track,.progress-label,.progress-info,.received-progress,.receiving-progress,.last-received,.supplier-line,.supplier-title) {
  background:transparent!important;
}
body.app-dark .app-page:not(#home-page) :is(hr,.divider,.section-divider) {
  background:transparent!important;border-color:#343b45!important;
}
body.app-dark .app-page:not(#home-page) :is(.badge,.status-badge,.status-pill,.tag,.pill):not(button) {
  background:#293440!important;color:#f6f8fb!important;border:1px solid #43505f!important;
}

/* Readability audit: badges and pills must never retain light fills with white text. */
body.app-dark .app-page:not(#home-page) :is(.badge,.pill,.chip,.tag,.status-badge,.status-pill,.pattern-badge,.pattern-pill,.confidence-badge,.location-badge,.origin-badge,.completion-badge,.status-chip),
body.app-dark .app-page:not(#home-page) :is(span,small,label,div)[style*="background: white"],
body.app-dark .app-page:not(#home-page) :is(span,small,label,div)[style*="background: #fff"],
body.app-dark .app-page:not(#home-page) :is(span,small,label,div)[style*="background-color: white"] {
  background:#303b49!important;color:#fff!important;border-color:#4a5869!important;
}
/* Checkboxes and their labels remain separate from the control surface. */
body.app-dark .app-page:not(#home-page) :is(label:has(input[type="checkbox"]),label:has(input[type="radio"])) {
  background:transparent!important;color:#f6f8fb!important;
}
body.app-dark .app-page:not(#home-page) :is(label:has(input[type="checkbox"]),label:has(input[type="radio"])) :is(span,small) {
  color:#f6f8fb!important;background:transparent!important;
}
/* Blank photo upload targets should be dark, with visible add icons and copy. */
body.app-dark #product-photos-page :is(.photo-placeholder,.photo-upload,.photo-dropzone,.photo-card,.photo-tile,.image-placeholder,.image-dropzone,.image-upload,.upload-placeholder,.no-photo,.photo-empty) {
  background:#20262f!important;color:#f6f8fb!important;border-color:#3d4857!important;
}
body.app-dark #product-photos-page :is(.photo-placeholder,.photo-upload,.photo-dropzone,.photo-card,.photo-tile,.image-placeholder,.image-dropzone,.image-upload,.upload-placeholder,.no-photo,.photo-empty) :is(span,small,p,strong) {
  color:#f6f8fb!important;
}
/* Recount controls and inventory metrics use the same panel palette. */
body.app-dark :is(#inventory-page,#inventory-recount-page) :is(.stat-card,.metric-card,.inventory-stat,.inventory-card,.recount-card,.recount-progress,.progress-summary,.progress-card,.batch-progress,.count-progress,.action-card,.export-card,.import-card) {
  background:#20262f!important;color:#f6f8fb!important;border-color:#3d4857!important;
}
body.app-dark :is(#inventory-page,#inventory-recount-page) :is(.stat-card,.metric-card,.inventory-stat,.inventory-card,.recount-card,.recount-progress,.progress-summary,.progress-card,.batch-progress,.count-progress,.action-card,.export-card,.import-card) :is(span,small,p,strong) {
  color:#f6f8fb!important;
}
/* Buttons rendered with inline light backgrounds need an explicit dark control fill. */
body.app-dark .app-page:not(#home-page) button:is([style*="background: white"],[style*="background: #fff"],[style*="background-color: white"],[style*="background-color: #fff"]) {
  background:#27313e!important;color:#fff!important;
}

/* Reports: restore legible dark hero and metric surfaces (light-only module CSS). */
body.app-dark #reports-page .reports-hero,
body.app-dark #reports-page .reports-hero > div,
body.app-dark #reports-page .reports-metrics > article,
body.app-dark #reports-page .reports-section,
body.app-dark #reports-page .reports-section > article {
  background:#1b2028!important;
  background-image:none!important;
  color:#f6f8fb!important;
  border-color:#343b45!important;
  box-shadow:none!important;
}
body.app-dark #reports-page .reports-hero :is(span,strong,small),
body.app-dark #reports-page .reports-metrics :is(span,strong,small),
body.app-dark #reports-page .reports-section :is(h2,h3,span,strong,small,p) {
  color:#f6f8fb!important;
  -webkit-text-fill-color:#f6f8fb!important;
  text-shadow:none!important;
}
body.app-dark #reports-page .reports-hero > div > strong {
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}