/* One semantic palette for every production page. CAD/print canvas pixels and
   machining colours are deliberately independent of the interface theme. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f3f5;
  --surface: #ffffff;
  --surface-muted: #f7f8fa;
  --surface-raised: #eceff2;
  --surface-hover: #e6ebf0;
  --line: #dce1e6;
  --line-strong: #b8c2cc;
  --text: #20262d;
  --text-secondary: #475564;
  --muted: #5e6b78;
  --blue: #176fae;
  --blue-dark: #0d578b;
  --blue-soft: #e6f1f8;
  --primary-bg: #176fae;
  --primary-hover: #0d578b;
  --on-primary: #ffffff;
  --green: #23754f;
  --green-soft: #edf7f1;
  --green-hover: #dceee3;
  --success-bg: #23754f;
  --success-hover: #195a3d;
  --on-success: #ffffff;
  --orange: #a35b13;
  --orange-soft: #fff3e3;
  --orange-line: #d88935;
  --magenta: #a04d9e;
  --cyan: #167c87;
  --red: #b83936;
  --red-soft: #fceeed;
  --red-hover: #f9dfdd;
  --red-line: #d77d79;
  --overlay: rgb(255 255 255 / 96%);
  --overlay-soft: rgb(255 255 255 / 86%);
  --shadow: rgb(20 30 40 / 14%);
  --scrim: rgb(20 30 40 / 32%);
  --focus-halo: rgb(23 111 174 / 20%);
  --grid: #e1e6eb;
  --drawing-bg: #eef1f4;
  --drawing-paper: #fbfcfd;
  --drawing-grid: #edf0f2;
  --danger: var(--red);
  --hover: var(--blue-soft);
  --accent: var(--green);
  color: var(--text);
  background: var(--bg);
}

/* Blender-like neutral greys: darker controls frame a lighter working area. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #303030;
  --surface: #3b3b3b;
  --surface-muted: #303030;
  --surface-raised: #464646;
  --surface-hover: #515151;
  --chrome: #252525;
  --chrome-panel: #2d2d2d;
  --workspace-surface: #444444;
  --workspace-alternate: #404040;
  --input-surface: #242424;
  --button-surface: #3b3b3b;
  --separator: #1c1c1c;
  --line: #505050;
  --line-strong: #686868;
  --text: #ededed;
  --text-secondary: #d0d0d0;
  --muted: #bfbfbf;
  --blue: #8cbded;
  --blue-dark: #b1d3f3;
  --blue-soft: #304b65;
  --primary-bg: #c1dbf4;
  --primary-hover: #d5e7f8;
  --on-primary: #16232f;
  --green: #8dcbaa;
  --green-soft: #253b2e;
  --green-hover: #304a3b;
  --success-bg: #a3d3b7;
  --success-hover: #bee2cd;
  --on-success: #172c21;
  --orange: #e9b77a;
  --orange-soft: #3d3022;
  --orange-line: #84623b;
  --magenta: #d9a2d7;
  --cyan: #82c8cf;
  --red: #f0a19c;
  --red-soft: #402927;
  --red-hover: #52312f;
  --red-line: #87514d;
  --overlay: rgb(45 45 45 / 98%);
  --overlay-soft: rgb(45 45 45 / 92%);
  --shadow: rgb(0 0 0 / 32%);
  --scrim: rgb(0 0 0 / 62%);
  --focus-halo: rgb(140 189 237 / 24%);
  --grid: #505050;
  --drawing-bg: #444444;
}

/* Dark-only role styling; light mode and CAD / label canvas pixels stay intact. */
:root[data-theme="dark"] :where(
  .toolbar, .drawing-heading, .panel-table-toolbar, .stock-toolbar,
  .tabs, .drawing-footer, .status-bar,
  .milling-toolbar, .bevel-toolbar, .skeleton-toolbar,
  .milling-panel-heading, .bevel-panel-heading, .skeleton-panel-heading
) {
  background: var(--chrome);
  border-color: var(--separator);
}
:root[data-theme="dark"] :where(
  .parts-panel, .inspector-panel, .panel-compact-summary,
  .milling-controls, .bevel-controls, .skeleton-controls
) {
  background: var(--chrome-panel);
  border-color: var(--separator);
}
:root[data-theme="dark"] :where(
  .drawing-panel, .canvas-wrap, .panel-table-view, .panel-table-scroll,
  .panel-table, .settings-workspace, .materials-workspace, .stock-workspace,
  .repair-workspace, .sheet-gallery
) { background-color: var(--workspace-surface); }
:root[data-theme="dark"] .panel-list-row td { background: var(--workspace-surface); }
:root[data-theme="dark"] .panel-list-row:nth-child(odd) td { background: var(--workspace-alternate); }
:root[data-theme="dark"] .panel-table thead th {
  background: var(--surface-muted);
  border-bottom-color: var(--line-strong);
}
:root[data-theme="dark"] .panel-material-group th { background: #354352; }
:root[data-theme="dark"] .panel-list-row:hover td,
:root[data-theme="dark"] .panel-list-row:focus td { background: var(--surface-hover); }
:root[data-theme="dark"] .panel-list-row.active td { background: var(--blue-soft); }
:root[data-theme="dark"] :where(
  .search, .board-number-field, .milling-input, .milling-select,
  .bevel-input, .skeleton-input, .field input, .field select,
  .tool-row input, .tool-row select
) { background: var(--input-surface); }
:root[data-theme="dark"] :where(
  .command:not(.primary, .accent, .danger), .command-toggle,
  .icon-button, .face-button:not(.active),
  .milling-back, .bevel-back, .skeleton-back,
  .milling-mode:not(.active), .milling-direction:not(.active),
  .bevel-cut-style:not(.active)
) {
  background: var(--button-surface);
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}
:root[data-theme="dark"] :where(
  .command:not(.primary, .accent, .danger), .command-toggle,
  .icon-button, .face-button:not(.active),
  .milling-back, .bevel-back, .skeleton-back,
  .milling-mode:not(.active), .milling-direction:not(.active),
  .bevel-cut-style:not(.active)
):hover:not(:disabled) { background: var(--surface-hover); }
:root[data-theme="dark"] .panel-table-editor:focus,
:root[data-theme="dark"] .panel-table-editor:hover { background: var(--input-surface); }

input, select, textarea { color: var(--text); accent-color: var(--blue); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input, select, textarea, button, a { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px;
}
dialog { color: var(--text); background: var(--surface); }
dialog::backdrop { background: var(--scrim); }
* { scrollbar-color: var(--line-strong) var(--surface-muted); }

.brand-mark, .model-brand .brand-mark, .command.primary {
  border-color: var(--primary-bg); background: var(--primary-bg); color: var(--on-primary);
}
.command.primary:hover { background: var(--primary-hover); }
.command.accent, .button.primary, #cloudLoginButton {
  border-color: var(--success-bg); background: var(--success-bg); color: var(--on-success);
}
.command.accent:hover, .button.primary:hover, #cloudLoginButton:hover { background: var(--success-hover); }
.sheet-card { background: var(--surface); }
/* Keep paper white: these are physical label / technical drawing previews. */
.label-card { background: #ffffff; color: #18222c; color-scheme: light; }
.sheet-card canvas { background-color: var(--drawing-paper);
  background-image: linear-gradient(var(--drawing-grid) 1px, transparent 1px), linear-gradient(90deg, var(--drawing-grid) 1px, transparent 1px); }

[data-theme-picker],
[data-locale-picker] {
  display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
  width: fit-content; padding: 3px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface-muted); color: var(--muted);
}
[data-locale-picker] button {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 32px; height: 28px; min-height: 28px; margin: 0; padding: 0 8px;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  color: var(--muted); font: 600 12px/1.2 "Inter", "Segoe UI", sans-serif;
  letter-spacing: 0.02em; white-space: nowrap; cursor: pointer;
}
[data-locale-picker] button:hover { background: var(--surface-hover); color: var(--text); }
[data-locale-picker] button[aria-pressed="true"] {
  background: var(--surface-raised); color: var(--text); border-color: var(--line-strong);
}
.toolbar-locale,
.login-locale { display: inline-flex; align-items: center; }
.sidebar-appearance [data-locale-picker] { display: flex; width: 100%; margin-top: 6px; }
.sidebar-appearance [data-locale-picker] button { flex: 1 1 0; }
[data-theme-picker] button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: auto; min-width: 0; height: 28px; min-height: 28px; margin: 0; padding: 0 8px;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  color: var(--muted); font: 12px/1.2 "Microsoft YaHei UI", "Segoe UI", sans-serif;
  white-space: nowrap; cursor: pointer;
}
[data-theme-picker] button span { font-size: 15px; color: inherit; }
[data-theme-picker] button:hover { background: var(--surface-hover); color: var(--text); }
[data-theme-picker] button[aria-pressed="true"] {
  background: var(--surface-raised); color: var(--text); border-color: var(--line-strong);
}
.sidebar-appearance { flex: 0 0 auto; padding: 0 8px 10px; }
.sidebar-appearance [data-theme-picker] { display: flex; width: 100%; }
.sidebar-appearance [data-theme-picker] button { flex: 1 1 0; padding: 0 4px; gap: 4px; }
.parts-panel .side-navigation { min-height: 0; overflow-y: auto; }
.parts-panel .side-navigation-summary { flex-shrink: 0; }
.parts-panel .side-navigation { flex-shrink: 1; }
.login-appearance { display: flex; justify-content: center; padding-top: 22px; }

@media (max-width: 820px) {
  .sidebar-appearance { padding: 0 5px 8px; }
  .sidebar-appearance [data-theme-picker] button { flex-direction: column; height: 42px; padding: 3px 4px; }
}
@media print {
  [data-theme-picker], [data-locale-picker], .sidebar-appearance, .login-appearance, .login-locale { display: none !important; }
}