/* Shared controls, loaded after page styles. Page CSS owns layout, not control appearance. */
:root {
  --control-height: 44px;
  --control-radius: 9px;
  --control-font: 13px;
  --button-font: 14px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --disabled-opacity: .55;
  --dialog-backdrop: rgba(7, 25, 22, .76);
  --nav-selected-bg: var(--white);
  --nav-selected-text: var(--ink);
}
html[data-theme="dark"] {
  --nav-selected-bg: #375d52;
  --nav-selected-text: #fff;
}

/* Scanner inputs are parts of a larger focusable control.
   Workstation inputs, checkboxes and file uploads keep their specialised layout. */
body.ui-controls :is(input, select, textarea):not(:where(
  .station-box input, .scan-input-wrap input,
  [type="checkbox"], [type="radio"], [type="file"], [type="hidden"]
)) {
  min-width: 0;
  max-width: 100%;
  min-height: var(--control-height);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--white);
  color: var(--ink);
  font: 500 var(--control-font)/1.4 var(--body);
}
body.ui-controls :is(input, select):not(:where(
  .station-box input, .scan-input-wrap input,
  [type="checkbox"], [type="radio"], [type="file"], [type="hidden"]
)) { height: var(--control-height); }
body.ui-controls textarea { resize: vertical; }
body.ui-controls input[readonly] { color: var(--muted); background: var(--paper); }
body.ui-controls input[type="file"]:not(:where(.part-preview-input, .part-pdf-input, .turning-file, [hidden])) {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--white);
  color: var(--ink);
  font: 500 var(--control-font)/1.4 var(--body);
}
body.ui-controls input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 10px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 650 var(--control-font)/1.4 var(--body);
  cursor: pointer;
}
.ui-controls :is(.stack-form, .auth-form, .user-create-form, .user-edit-grid,
  .work-report-form, .work-report-caption, .work-detail-heading, .spec-search,
  .turning-location-filters, .turning-product-bar, .turning-picking-controls,
  .laser-check-form, .laser-ledger-toolbar) label:not(:where(.part-preview-upload, .part-pdf-upload, .labels-product-choice)) {
  gap: 7px;
  color: var(--muted);
  font: 650 12px/1.4 var(--body);
  letter-spacing: normal;
}
.ui-controls :is(.journal-filters, .pallet-search) label > span {
  color: var(--muted);
  font: 650 12px/1.4 var(--body);
  letter-spacing: normal;
  text-transform: none;
}
.ui-controls .turning-panel > label[data-sticky-toolbar] {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font: 650 12px/1.4 var(--body);
}
.ui-controls .pallet-search:focus-within { border-color: var(--line); box-shadow: var(--shadow); }
body.ui-controls :is(.primary-button, .secondary-button, .export-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-height);
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font: 700 var(--button-font)/1.35 var(--body);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  box-shadow: none;
}
body.ui-controls :is(.primary-button, .export-button) { color: var(--on-action); background: var(--action); }
body.ui-controls :is(.primary-button, .export-button):hover { background: var(--action-hover); }
body.ui-controls .secondary-button { color: var(--ink); border-color: var(--line); background: var(--white); }
body.ui-controls .secondary-button:hover { border-color: var(--brand-text); background: var(--paper); }
body.ui-controls button:disabled { opacity: var(--disabled-opacity); cursor: default; }

/* Compact copy actions keep the adjacent text and its icon on one row. */
.ui-controls .copy-text-row { display: flex; align-items: flex-start; gap: 4px; }
.ui-controls .copy-text-row.copy-text-inline { display: inline-flex; max-width: 100%; vertical-align: middle; }
.ui-controls .copy-text-row > bdi { min-width: 0; overflow-wrap: anywhere; }
.ui-controls .copy-text-button {
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ui-controls .copy-text-button:hover { color: var(--ink); border-color: var(--line); background: var(--paper); }
.ui-controls .copy-text-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* One keyboard indicator, including dialogs and QR controls. */
.ui-controls :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible,
.ui-controls :is(.part-preview-upload, .part-pdf-upload):focus-within {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}
.ui-controls :is(.topbar, .part-confirmation-head, .spec-dialog-head, .auth-identity) :focus-visible { outline-color: #ffb58f; }
.ui-controls .scan-input-wrap input:focus-visible { outline: none; }
.ui-controls .spec-record-toggle:focus-visible { outline-offset: -3px; }

.ui-controls .nav-tabs :is(.nav-tab, .nav-page-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--control-radius);
  color: #b9c6c3;
  background: transparent;
  font: 650 14px/1.3 var(--body);
  text-decoration: none;
  white-space: nowrap;
}
.ui-controls .nav-tabs :is(.nav-tab, .nav-page-link):hover { color: var(--on-brand); background: rgba(255,255,255,.08); }
.ui-controls .nav-tabs :is(.nav-tab.active, .nav-page-link[aria-current="page"]) {
  color: var(--nav-selected-text);
  background: var(--nav-selected-bg);
}
body.ui-controls .work-report-form .primary-button { align-self: flex-end; }
body.ui-controls .spec-dialog-close { width: 44px; height: 44px; border-radius: var(--control-radius); }
.ui-controls :is(.part-confirmation-dialog, .specification-dialog, .turning-scanner-dialog, .turning-action-dialog)::backdrop {
  background: var(--dialog-backdrop);
  backdrop-filter: blur(5px);
}

/* Table layouts and operation colours stay with their pages; headings share one treatment. */
body.ui-controls :is(.turning-table, .cutting-table, .journal-table, .laser-table, .work-table) thead th {
  padding: 12px;
  background: var(--forge);
  color: var(--on-brand);
  font: 650 12px/1.4 var(--body);
  text-transform: none;
  letter-spacing: normal;
}
.ui-controls .labels-search-toolbar { padding: 8px; border-radius: var(--control-radius); }
.ui-controls .labels-search-toolbar .labels-selection-actions { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .ui-controls *, .ui-controls *::before, .ui-controls *::after {
    scroll-behavior: auto;
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}