/* Shared component contract. Loaded after page CSS. */

/* New components should use these opt-in primitives. */
.theme-surface,
[data-theme-surface="1"] {
  background: var(--surface-1);
  color: var(--text-primary);
  border-color: var(--border-primary);
}
.theme-surface-muted,
[data-theme-surface="2"] {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-primary);
}
.theme-surface-raised,
[data-theme-surface="raised"] {
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-sm);
}
.theme-muted,
[data-theme-text="muted"] { color: var(--text-muted) !important; }
.theme-divider,
[data-theme-border] { border-color: var(--border-primary) !important; }

/* Native controls */
html[data-theme] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
  background-color: var(--control-bg);
  color: var(--control-text);
  border-color: var(--control-border);
  caret-color: var(--brand);
}
html[data-theme] :where(input, textarea)::placeholder { color: var(--control-placeholder); opacity: 1; }
html[data-theme] :where(input, select, textarea):hover:not(:disabled):not([readonly]) { border-color: var(--control-border-hover); }
html[data-theme] :where(input, select, textarea):focus { border-color: var(--brand); box-shadow: var(--shadow-focus); outline: none; }
html[data-theme] :where(input, select, textarea):disabled,
html[data-theme] :where(input, select, textarea)[readonly] { background-color: var(--control-disabled-bg); color: var(--control-disabled-text); opacity: .86; }
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"] { color-scheme: dark; }

/* Default buttons and links styled as controls. Intent classes override below. */
html[data-theme="dark"] :where(
  button,
  .btn,
  .nav-btn,
  [role="button"]
):not(.primary):not(.active):not([aria-pressed="true"]):not([class*="Primary"]):not([class*="primary"]):not([class*="Brand"]):not([class*="brand"]):not([class*="Accent"]):not([class*="accent"]):not([class*="Danger"]):not([class*="danger"]):not([class*="Success"]):not([class*="success"]):not([class*="Warning"]):not([class*="warning"]) {
  background-color: var(--control-bg) !important;
  color: var(--control-text) !important;
  border-color: var(--control-border) !important;
  box-shadow: none;
}

html[data-theme="dark"] :where(
  button,
  .btn,
  .nav-btn,
  [role="button"]
):not(:disabled):not([aria-disabled="true"]):not(.active):not([aria-pressed="true"]):not([class*="Primary"]):not([class*="primary"]):not([class*="Brand"]):not([class*="brand"]):not([class*="Accent"]):not([class*="accent"]):not([class*="Danger"]):not([class*="danger"]):not([class*="Success"]):not([class*="success"]):not([class*="Warning"]):not([class*="warning"]):hover {
  background-color: var(--control-bg-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--control-border-hover) !important;
  box-shadow: var(--shadow-xs);
}

html[data-theme="dark"] :where(
  button,
  .btn,
  .nav-btn,
  [role="button"]
):not(:disabled):active {
  transform: translateY(0);
  filter: brightness(.98);
}

html[data-theme] :where(button, .btn, [role="button"]):disabled,
html[data-theme] :where(button, .btn, [role="button"])[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] :where(button, a.btn, a.nav-btn, .btn, .nav-btn, [role="button"], input[type="submit"], input[type="button"]):is(
  .primary,
  .btnPrimary,
  .btnDark,
  .authBtnPrimary,
  [class*="Primary"],
  [class*="primary"],
  [class*="Brand"],
  [class*="brand"],
  [class*="Accent"],
  [class*="accent"],
  .active,
  [aria-pressed="true"]
) {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--brand-contrast) !important;
}

html[data-theme="dark"] :where(button, a.btn, a.nav-btn, .btn, .nav-btn, [role="button"], input[type="submit"], input[type="button"]):is(
  .primary,
  .btnPrimary,
  .btnDark,
  .authBtnPrimary,
  [class*="Primary"],
  [class*="primary"],
  [class*="Brand"],
  [class*="brand"],
  [class*="Accent"],
  [class*="accent"],
  .active,
  [aria-pressed="true"]
):hover:not(:disabled) {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: var(--brand-contrast) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-rgb), .18) !important;
}

html[data-theme="dark"] :where(button, a.btn, .btn, [role="button"]):is(.btnDanger, [class*="Danger"], [class*="danger"], [data-tone="danger"]) {
  background-color: var(--danger-bg) !important;
  border-color: var(--danger-border) !important;
  color: var(--danger-text) !important;
}
html[data-theme="dark"] :where(button, a.btn, .btn, [role="button"]):is(.btnDanger, [class*="Danger"], [class*="danger"], [data-tone="danger"]):hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--danger-bg) 72%, var(--danger) 28%) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}

/* Tables */
html[data-theme="dark"] :where(table) {
  color: var(--text-primary);
  background-color: var(--table-bg);
  border-color: var(--table-border);
}
html[data-theme="dark"] :where(thead, thead tr, th) {
  background-color: var(--table-head-bg) !important;
  color: var(--table-head-text) !important;
  border-color: var(--table-border) !important;
}
html[data-theme="dark"] :where(tbody, tbody tr, td) {
  border-color: var(--table-border) !important;
}
html[data-theme="dark"] :where(tbody tr) { background-color: var(--table-row-bg); }
html[data-theme="dark"] :where(tbody tr:nth-child(even)) { background-color: var(--table-row-alt-bg); }
html[data-theme="dark"] :where(tbody tr:hover) { background-color: var(--table-row-hover-bg) !important; }
html[data-theme="dark"] :where(tbody tr.is-selected, tbody tr.selected, tbody tr[aria-selected="true"]) { background-color: var(--table-row-selected-bg) !important; }
html[data-theme="dark"] :where(th.sticky, td.sticky, [class*="stickyCol"], [class*="StickyCol"]) {
  background-color: inherit !important;
  box-shadow: var(--table-sticky-shadow);
}
html[data-theme="dark"] :where(.tableWrap, .tableShell, [data-theme-component="table"]) {
  background-color: var(--table-bg) !important;
  border-color: var(--table-border) !important;
}

/* Modal, drawer and overlay primitives */
html[data-theme="dark"] :where(
  .modalBack,
  .modalOverlay,
  .modalBackdrop,
  .accModalBackdrop,
  .aa-modal-backdrop,
  [class$="ModalBack"],
  [class$="ModalBackdrop"],
  [class$="Overlay"],
  [data-theme-component="overlay"]
) {
  background: var(--overlay) !important;
  backdrop-filter: blur(5px);
}
html[data-theme="dark"] :where(
  [role="dialog"],
  [aria-modal="true"],
  .modal,
  .modalCard,
  .modalBox,
  .modalWin,
  [data-theme-component="modal"]
) {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}
html[data-theme="dark"] :where(
  .modalHead,
  .modalHeader,
  .modalFoot,
  .modalFooter,
  [class$="ModalHead"],
  [class$="ModalHeader"],
  [class$="ModalFooter"]
) { border-color: var(--divider) !important; }

/* Status surfaces */
html[data-theme="dark"] :where(.alert, [role="alert"], [data-tone="info"]) {
  background-color: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}
html[data-theme="dark"] :where([class*="Success"], [class*="success"], [data-tone="success"]) {
  --local-status-bg: var(--success-bg);
  --local-status-border: var(--success-border);
  --local-status-text: var(--success-text);
}
html[data-theme="dark"] :where([class*="Warning"], [class*="warning"], [data-tone="warning"]) {
  --local-status-bg: var(--warning-bg);
  --local-status-border: var(--warning-border);
  --local-status-text: var(--warning-text);
}
html[data-theme="dark"] :where([class*="Error"], [class*="error"], [class*="Danger"], [class*="danger"], [data-tone="danger"]) {
  --local-status-bg: var(--danger-bg);
  --local-status-border: var(--danger-border);
  --local-status-text: var(--danger-text);
}
html[data-theme="dark"] :where(
  .alert,
  [role="alert"],
  [class*="Notice"],
  [class*="notice"],
  [class*="Alert"],
  [class*="alert"]
) {
  background-color: var(--local-status-bg, var(--surface-2)) !important;
  border-color: var(--local-status-border, var(--border-primary)) !important;
  color: var(--local-status-text, var(--text-secondary)) !important;
}

/* Loading, empty and separators */
html[data-theme="dark"] :where(hr, [class*="Divider"], [class*="divider"], [class*="Separator"], [class*="separator"]) { border-color: var(--divider) !important; }
html[data-theme="dark"] :where(.muted, [class*="Muted"], [class*="muted"], small) { color: var(--text-muted); }
html[data-theme="dark"] :where([class*="Empty"], [class*="empty"]) { color: var(--text-muted); }
html[data-theme="dark"] :where([class*="Skeleton"], [class*="skeleton"]) {
  background: linear-gradient(90deg, var(--skeleton-a), var(--skeleton-b), var(--skeleton-a)) !important;
  background-size: 220% 100% !important;
}

/* Media and chart containment */
html[data-theme="dark"] :where(.js-plotly-plot, .plot-container, .svg-container, [data-theme-component="chart"]) { color: var(--chart-label); }
html[data-theme="dark"] :where(.js-plotly-plot .main-svg) { background: transparent !important; }
html[data-theme="dark"] :where(svg text) { fill: currentColor; }
html[data-theme="dark"] :where(svg .gridlayer path, svg .gridlayer line, svg [class*="grid"] line) { stroke: var(--chart-grid) !important; }

/* Opt-out for elements that intentionally keep original colors (logos, product art, barcode export). */
[data-theme-preserve],
.theme-preserve-colors { color-scheme: only light; }

/* Typography compatibility for legacy blocks with hard-coded light-theme text. */
html[data-theme="dark"] body {
  background-color: var(--app-bg) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6, label, legend) {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] :where(
  [class$="Title"], [class$="Name"], [class$="Value"], [class$="Label"],
  [class*="__title"], [class*="__name"], [class*="__value"]
) { color: var(--text-primary) !important; }
html[data-theme="dark"] :where(
  [class$="Meta"], [class$="Hint"], [class$="Sub"], [class$="Subtitle"],
  [class$="Description"], [class$="Desc"], [class*="__meta"], [class*="__hint"]
) { color: var(--text-muted) !important; }

/* Authentication and standalone pages. */
html[data-theme="dark"] .authPageBody {
  background-image:
    radial-gradient(900px 420px at 18% 8%, rgba(37, 201, 201, .10), transparent 60%),
    radial-gradient(900px 520px at 86% 16%, rgba(75, 120, 210, .10), transparent 60%),
    linear-gradient(180deg, var(--surface-0), var(--app-bg)) !important;
}
html[data-theme="dark"] .authSide {
  background-image: radial-gradient(560px 280px at 100% 100%, rgba(37, 201, 201, .11), transparent 72%) !important;
  background-color: var(--surface-2) !important;
  border-color: var(--border-primary) !important;
}
html[data-theme="dark"] :where(.authBadge, .authRoleOption span) {
  background-color: var(--brand-soft) !important;
  border-color: rgba(var(--brand-rgb), .30) !important;
  color: var(--brand-hover) !important;
}
html[data-theme="dark"] .authBrandLogo { background: var(--surface-3) !important; border-color: var(--border-primary) !important; }
html[data-theme="dark"] :where(.authInput, .authDigitInput) { background: var(--control-bg) !important; color: var(--text-primary) !important; border-color: var(--control-border) !important; }

/* Last-resort support for legacy inline color declarations. */
html[data-theme="dark"] :where(
  [style*="background:#fff"], [style*="background: #fff"],
  [style*="background:#ffffff"], [style*="background: #ffffff"],
  [style*="background-color:#fff"], [style*="background-color: #fff"],
  [style*="background-color:#ffffff"], [style*="background-color: #ffffff"]
) { background-color: var(--surface-1) !important; }
html[data-theme="dark"] :where(
  [style*="color:#0f172a"], [style*="color: #0f172a"],
  [style*="color:#111827"], [style*="color: #111827"],
  [style*="color:#1f2937"], [style*="color: #1f2937"],
  [style*="color:#334155"], [style*="color: #334155"]
) { color: var(--text-primary) !important; }
html[data-theme="dark"] :where(
  [style*="color:#475569"], [style*="color: #475569"],
  [style*="color:#64748b"], [style*="color: #64748b"],
  [style*="color:#6b7280"], [style*="color: #6b7280"]
) { color: var(--text-muted) !important; }
html[data-theme="dark"] body[data-theme-control="hidden"] { background-color: transparent !important; }
html[data-theme] [data-theme-preserve].logo { background: #ffffff !important; color-scheme: only light; }