/* ============================================================================
   Enamel Production Console — StahlGlas
   ----------------------------------------------------------------------------
   Industrial / utilitarian. The console is a shop-floor instrument, not a
   marketing page: dense, quiet, legible under fluorescent light. Every visual
   device earns its place by carrying meaning — the perforated "stamp" frames a
   batch number, mono + tabular numerals keep decimal points in a column, colour
   is reserved for state (below reorder, closed short, R&D) and spent nowhere else.
   ========================================================================== */

:root {
  /* ---- surface & ink ---- */
  --paper: #070e17;
  --surface: #142233cf;
  --surface-2: #0d1723;
  --surface-alt: #182738;
  /* table head, inert fills */
  --navy: #0b131f;
  /* sidebar */
  --navy-2: #121e2d;

  --ink: #ffffff;
  /* primary white text */
  --ink-2: #8fa2b2;
  /* secondary text */
  --ink-3: #597082;
  /* disabled or placeholder text */
  --on-navy: #ffffff;
  --on-navy-dim: #8fa2b2;

  --line: #1e3247;
  --line-strong: #2c4763;

  /* ---- accent & state ---- */
  --accent: #568cee;
  /* primary blue */
  --accent-deep: #4278db;
  --accent-soft: #44ccb9;
  --accent-weak: #122c42;

  --success: #55c298;
  --success-bg: rgba(31, 107, 78, 0.25);
  --warning: #e5a93c;
  --warning-bg: rgba(138, 98, 16, 0.25);
  --danger: #e57267;
  --danger-bg: rgba(166, 51, 40, 0.25);
  --steel: #7fb0d6;
  --steel-bg: rgba(51, 100, 143, 0.25);
  --teal: #44ccb9;
  --teal-bg: rgba(23, 109, 126, 0.25);
  --violet: #a391d6;
  --violet-bg: rgba(92, 78, 125, 0.25);

  /* Row tints sit one step lighter than the badge fills they carry, so a
     "Below Reorder Level" pill never dissolves into the row it flags. */
  --danger-tint: rgba(166, 51, 40, 0.15);
  --violet-tint: rgba(92, 78, 125, 0.15);

  /* ---- type ---- */
  --display: 'IBM Plex Sans Condensed', ui-sans-serif, system-ui, sans-serif;
  --body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- space & shape ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --e1: 0 4px 12px rgba(0, 0, 0, .3);
  --e2: 0 8px 24px rgba(0, 0, 0, .45);
  --e3: 0 28px 64px -20px rgba(0, 0, 0, .6);

  --sidebar-w: 254px;
  --ring: 0 0 0 3px rgba(86, 140, 238, .28);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* ---- scrollbars ----------------------------------------------------------
   Thin, unobtrusive, and tinted to whatever surface they sit on. The default
   chrome scrollbar is the loudest thing on an otherwise quiet screen. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  /* inset the thumb so it reads as a slim pill */
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-3);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  background-color: var(--paper);
  /* Faint blueprint grid — reads as drafting paper, costs nothing. */
  background-image:
    linear-gradient(rgba(86, 140, 238, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 140, 238, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1;
}

::selection {
  background: var(--accent-soft);
  color: #0b131f;
}

a {
  color: var(--accent);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-deep);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* ============================ shell ====================================== */
.app {
  display: block;
  width: 100%;
  min-height: 100vh;
  background-image: none;
}

.sidebar {
  background: var(--navy);
  color: var(--on-navy);
  padding: var(--s5) var(--s4) var(--s6);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 290px;
  z-index: 150;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #2f5171 transparent;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  border-right: 1px solid var(--line-strong);
}

.sidebar.open,
body.nav-open .sidebar {
  transform: translateX(0) !important;
}

.nav-overlay.open,
body.nav-open .nav-overlay {
  display: block !important;
}

.sidebar::-webkit-scrollbar-thumb {
  background: #2f5171;
  background-clip: content-box;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: #41688b;
  background-clip: content-box;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s1) var(--s4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s2);
}

.brand-logo-wrap {
  background: transparent;
  border-radius: 0;
  padding: var(--s2) 0;
  width: 82%;
  max-width: 180px;
  box-shadow: none;
}

.brand-logo {
  width: 100%;
  height: auto;
  display: block;
}

.brand-text .tag {
  font-family: var(--display);
  font-size: 10px;
  color: var(--on-navy);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Level-1 Collapsible Sidebar Navigation */
.sidebar-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 12px 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.sidebar-toggle-btn {
  background: var(--navy-2);
  border: 1px solid var(--line-strong);
  color: var(--on-navy);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  font-family: var(--display);
  font-weight: 600;
}

.sidebar-toggle-btn:hover {
  background: var(--surface-alt);
  color: var(--accent);
  border-color: var(--accent);
}

.sidebar-menu-wrapper {
  display: block;
  margin-top: 8px;
}

.nav-section {
  margin-bottom: 4px;
}

.nav-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--on-navy-dim);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 4px;
}

.nav-section-header:hover {
  background: var(--navy-2);
  border-color: var(--line-strong);
  color: var(--on-navy);
}

.nav-section.open .nav-section-header {
  background: rgba(86, 140, 238, 0.15);
  border-color: var(--accent);
  color: #ffffff;
}

.nav-section-caret {
  font-size: 10px;
  transition: transform 0.2s ease;
  display: inline-block;
}

.nav-section.open .nav-section-caret {
  transform: rotate(90deg);
}

.nav-section-sub {
  display: none;
  padding-left: 6px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.nav-section.open .nav-section-sub {
  display: block;
}

.nav-group-label {
  font-family: var(--display);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-navy-dim);
  padding: var(--s4) var(--s3) var(--s1);
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 8px var(--s3);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--on-navy);
  text-decoration: none;
  position: relative;
  transition: background .12s, color .12s;
}

.nav-item:hover {
  background: var(--navy-2);
  color: #eef3f8;
}

.nav-item .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  flex-shrink: 0;
}

.nav-item.active {
  background: var(--accent-deep);
  color: #fff;
  font-weight: 600;
}

.nav-item.active .dot {
  opacity: 1;
}

/* A hairline rail marks the active route without shouting. */
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--accent-soft);
  border-radius: var(--r-pill);
}

/* Fills the grid column. Tables are the point of this app — capping the width
   would just throw away screen on a wide monitor. Prose is capped individually. */
.main {
  padding: var(--s5) var(--s6) var(--s7);
  min-width: 0;
  position: relative;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s4);
  margin-bottom: var(--s5);
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--s3);
  flex-wrap: wrap;
}

.topbar h1 {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 3px;
  letter-spacing: -.005em;
  font-weight: 600;
}

.topbar .sub {
  color: var(--ink-2);
  font-size: 12.5px;
  max-width: 78ch;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.whoami {
  text-align: right;
  line-height: 1.25;
}

.whoami .n {
  font-weight: 600;
  font-size: 12.5px;
}

.whoami .p {
  font-size: 11px;
  color: var(--ink-2);
  font-family: var(--mono);
}

/* ---- mobile header ---- */
.mobile-bar {
  display: none;
  align-items: center;
  gap: var(--s3);
  background: var(--navy);
  padding: 10px var(--s4);
  position: sticky;
  top: 0;
  z-index: 120;
  padding-top: calc(10px + env(safe-area-inset-top));
}

.mobile-bar img {
  height: 22px;
  width: auto;
}

.mobile-bar .spacer {
  flex: 1;
}

.hamburger {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid #2c4d67;
  background: transparent;
  color: #eef3f8;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.logout-mobile {
  background: transparent;
  border: 1px solid #2c4d67;
  color: var(--on-navy);
  padding: 9px var(--s3);
  font-size: 12px;
  min-height: 0;
}

.logout-mobile:hover {
  background: var(--navy-2);
  color: #fff;
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9, 24, 37, .6);
  z-index: 130;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ============================ primitives ================================= */
/* Perforated frame — the signature. Only ever wraps an identifier. */
.stamp {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  position: relative;
  background: var(--surface);
  letter-spacing: .02em;
  white-space: nowrap;
}

.stamp::before,
.stamp::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 4px);
  opacity: .55;
}

.stamp::before {
  left: 3px;
}

.stamp::after {
  right: 3px;
}

.stamp.sm {
  font-size: 11px;
  padding: 2px 8px;
}

.stamp.accent {
  border-color: var(--accent);
  color: var(--accent);
}

.stamp.teal {
  border-color: var(--teal);
  color: var(--teal);
}

.stamp.violet {
  border-color: var(--violet);
  color: var(--violet);
}

.stamp.dim {
  border-color: var(--line-strong);
  color: var(--ink-2);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--s5);
  box-shadow: var(--e1);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.card-head h2 {
  font-family: var(--display);
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  letter-spacing: .005em;
}

.card-head .section-note {
  margin: 0;
}

.card-body {
  padding: var(--s4);
}

.card-body.pad0 {
  padding: 0;
}

/* Vertical rhythm where a block element butts up against the next control. */
.card-body:not(.pad0)>.table-scroll {
  margin-bottom: var(--s4);
}

.callout+.field,
.callout+.callout,
.err-msg+.field,
.table-scroll+.callout {
  margin-top: var(--s3);
}

.field+.callout,
.field+.table-scroll {
  margin-top: var(--s1);
}

/* Horizontal scroll with shadows that appear only when there is more to see. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--surface) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(15, 35, 52, .14), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 35, 52, .14), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
}

/* ---- stat tiles ---- */
.stat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.stat-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 104px;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--e2);
  border-color: var(--accent-soft);
}

.stat-card:focus-visible {
  transform: translateY(-2px);
}

.stat-eyebrow {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  font-weight: 600;
  font-size: 10.5px;
}

.stat-num {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.stat-num .unit {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0;
}

.stat-card .section-note {
  margin: auto 0 0;
}

/* State is carried by a rail, not only by red text. */
.stat-card.is-alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--danger);
}

/* ---- forms ---- */
label {
  display: block;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .09em;
}

input,
select,
textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: var(--body);
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--accent-soft);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

input[type=checkbox] {
  width: auto;
  accent-color: var(--accent);
}

input[type=date],
input[type=datetime-local],
input[type=time],
input[type=month] {
  color-scheme: dark;
  cursor: pointer;
}

input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.85) brightness(1.2);
  opacity: 0.8;
  padding: 2px;
  border-radius: var(--r-sm);
  transition: opacity 0.15s, filter 0.15s;
}

input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=month]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  filter: invert(1) brightness(1.5);
}

input[type=file] {
  padding: 7px 9px;
  font-size: 12px;
}

input.invalid,
.invalid {
  border-color: var(--danger);
  background: var(--danger-bg);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--surface-2);
  color: var(--ink-2);
}

.field {
  margin-bottom: var(--s3);
}

.field-row {
  display: grid;
  gap: var(--s3);
  margin-bottom: 2px;
}

.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hint {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 5px;
}

.err-msg {
  font-size: 11.5px;
  color: var(--danger);
  margin-top: 5px;
  font-weight: 500;
}

.mono-input {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.req::after {
  content: " *";
  color: var(--danger);
}

.check-inline {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-top: 8px;
  font-size: 12.5px;
  text-transform: none;
}

/* ---- buttons ---- */
button,
.btn {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.2;
  padding: 10px var(--s4);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: background .12s, filter .12s, border-color .12s, transform .06s;
}

button:active,
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: #ffffff;
  color: #0b131f;
}

.btn-primary:hover {
  background: #dbe5ee;
}

.btn-accent {
  background: linear-gradient(135deg, #44ccb9, #568cee);
  color: #0b131f;
  box-shadow: var(--e1);
}

.btn-accent:hover {
  filter: brightness(1.05);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--accent-soft);
}

.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger-bg);
}

.btn-sm {
  padding: 5px 10px;
  font-size: 11.5px;
}

.btn-row {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s2);
  flex-wrap: wrap;
}

button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
}

/* ---- tables ---- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

thead th {
  text-align: left;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 10px var(--s3);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  font-weight: 600;
}

tbody td {
  padding: 10px var(--s3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--surface-2);
}

/* Numeric and action columns shrink to their content; the label column absorbs the slack,
   so a value never floats an inch away from what it describes. */
td.num,
th.num,
td.actions,
th.actions {
  width: 1%;
  white-space: nowrap;
}

td.num,
th.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

td.actions {
  text-align: right;
}

td.actions form {
  display: inline;
}

td.actions>*+* {
  margin-left: var(--s1);
}

td .mono-input {
  font-size: 12px;
}

td input,
td select {
  padding: 6px 8px;
  font-size: 12px;
}

td.num input {
  text-align: right;
}

.num-strong {
  font-weight: 600;
}

/* ---- badges ---- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}

.badge-success {
  background: var(--success-bg);
  color: var(--success);
}

.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.badge-steel {
  background: var(--steel-bg);
  color: var(--steel);
}

.badge-teal {
  background: var(--teal-bg);
  color: var(--teal);
}

.badge-violet {
  background: var(--violet-bg);
  color: var(--violet);
}

.badge-dim {
  background: var(--surface-alt);
  color: var(--ink-2);
}

/* ---- callouts, notes ---- */
.callout {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
}

.callout.result {
  border-style: solid;
  border-color: var(--success);
  background: var(--success-bg);
}

.callout .row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: 4px 0;
  font-size: 12.5px;
}

.callout .row.total {
  border-top: 1px solid var(--line-strong);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 600;
}

.callout .row .val {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pill-note {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--accent-weak);
  border-left: 3px solid var(--accent-soft);
  padding: 10px var(--s3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: var(--s3);
}

.pill-note b {
  color: var(--ink);
  font-weight: 600;
}

.pill-note.danger {
  background: var(--danger-bg);
  border-left-color: var(--danger);
}

/* Tables may run the full width; sentences may not. */
.pill-note>span {
  max-width: 118ch;
}

.section-note {
  font-size: 11.5px;
  color: var(--ink-2);
  margin: 2px 0 var(--s3);
}

.section-note.inline {
  display: inline;
  margin: 0 0 0 4px;
}

.section-heading {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--ink-2);
  font-size: 11px;
  margin: 0 0 var(--s2);
}

/* ---- tabs & toolbar ---- */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}

.tab {
  padding: 9px var(--s4);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.tab:hover {
  color: var(--ink);
}

.tab.active {
  color: var(--ink);
  border-color: var(--accent);
}

.two-col-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--s3);
  flex-wrap: wrap;
  gap: var(--s2);
}

.search-mini {
  max-width: 260px;
}

/* ---- flow strip ---- */
.flow-strip {
  display: flex;
  align-items: center;
  margin-bottom: var(--s4);
  overflow-x: auto;
  padding-bottom: var(--s1);
}

.flow-step {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 6px 11px;
  background: var(--surface-alt);
  border-radius: var(--r-pill);
  white-space: nowrap;
  color: var(--ink-2);
}

.flow-step.done {
  background: var(--success);
  color: #fff;
}

.flow-step.current {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--e1);
}

.flow-arrow {
  color: var(--line-strong);
  padding: 0 5px;
  font-size: 12px;
}

/* ---- row states ---- */
.low-stock,
.low-stock:hover {
  background: var(--danger-tint) !important;
}

.rnd-row,
.rnd-row:hover {
  background: var(--violet-tint) !important;
}

.empty {
  padding: var(--s6) var(--s4);
  text-align: center;
  color: var(--ink-2);
  font-size: 12.5px;
}

.numbered-rule {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}

.numbered-rule:last-child {
  border-bottom: none;
}

.numbered-rule .n {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  width: 22px;
}

.tag-chip {
  display: inline-block;
  background: var(--surface-alt);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  font-size: 11px;
  margin: 2px 3px 0 0;
  color: var(--ink-2);
}

/* ---- flash ---- */
.flash {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  border-radius: var(--r-sm);
  padding: 11px var(--s3);
  font-size: 12.5px;
  margin-bottom: var(--s4);
  border: 1px solid transparent;
  border-left-width: 3px;
}

.flash b {
  font-weight: 600;
}

.flash.ok {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

.flash.err {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

/* ---- start/stop process card ---- */
.process-card {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--e1);
}

.process-card .ph {
  background: var(--surface-alt);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 11px var(--s4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
}

.process-card .ph .stage {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.timer-display {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* ---- modal ---- */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9, 24, 37, .55);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal-backdrop.active {
  display: flex;
  animation: fade .14s ease-out;
}

.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s5);
  width: 460px;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--e3);
  animation: rise .18s cubic-bezier(.2, .8, .2, 1);
}

.modal h3 {
  font-family: var(--display);
  margin: 0 0 var(--s3);
  font-size: 18px;
  font-weight: 600;
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.99)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ============================ responsive ================================= */
@media (max-width:1180px) {
  .grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cols-4,
  .cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main {
    padding: var(--s5) var(--s4) var(--s7);
  }
}

@media (max-width:1000px) {
  .app {
    grid-template-columns: 1fr;
    background-image: none;
  }

  .mobile-bar {
    display: flex;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    height: 100dvh;
    z-index: 140;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
    box-shadow: var(--e3);
  }

  body.nav-open .sidebar {
    transform: none;
  }

  body.nav-open .nav-overlay {
    display: block;
  }

  body.nav-open {
    overflow: hidden;
  }

  /* Logout lives in the mobile bar below 1000px, so the topbar keeps only the title. */
  .topbar-right {
    display: none;
  }

  .grid2,
  .grid3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width:760px) {
  .grid4 {
    grid-template-columns: 1fr;
  }

  .main {
    padding: var(--s4) var(--s3) var(--s7);
  }

  .cols-2,
  .cols-3,
  .cols-4,
  .cols-5 {
    grid-template-columns: 1fr;
  }

  .topbar h1 {
    font-size: 21px;
  }

  .topbar {
    align-items: flex-start;
  }

  .search-mini {
    max-width: 100%;
  }

  .two-col-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .two-col-actions>* {
    width: 100%;
  }

  /* Thumb-sized targets on the floor, where people wear gloves. */
  button,
  .btn {
    padding: 12px var(--s4);
    min-height: 44px;
  }

  .btn-sm {
    min-height: 36px;
    padding: 8px 12px;
  }

  .modal {
    padding: var(--s4);
  }

  .stat-card .card-body {
    min-height: 0;
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .stat-card:hover {
    transform: none;
  }
}

@media print {
  body {
    background: #fff;
  }

  .sidebar,
  .mobile-bar,
  .notif-wrap,
  .btn-row,
  .two-col-actions,
  .nav-overlay {
    display: none !important;
  }

  .app {
    grid-template-columns: 1fr;
  }

  .main {
    max-width: none;
    padding: 0;
  }

  .card {
    break-inside: avoid;
    box-shadow: none;
    border-color: #999;
  }

  .table-scroll {
    overflow: visible;
    background: none;
  }
}

/* Fix for Laravel Default Pagination SVGs */
nav svg, .w-5 {
  width: 20px;
}
nav svg, .h-5 {
  height: 20px;
}

/* ---- Pass/Fail Toggle Buttons ---- */
.pass-fail-toggle {
  display: inline-flex;
  width: fit-content;
  background: var(--surface-2, #0d1723);
  border: 1px solid var(--line-strong, #2c4763);
  border-radius: var(--r-sm, 6px);
  padding: 2px;
  gap: 2px;
  user-select: none;
}

.pass-fail-toggle .btn-toggle {
  border: none;
  background: transparent;
  color: var(--ink-2, #8fa2b2);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.pass-fail-toggle .btn-toggle:hover {
  color: var(--ink, #ffffff);
  background: rgba(255, 255, 255, 0.05);
}

.pass-fail-toggle .btn-toggle.btn-pass.active {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.pass-fail-toggle .btn-toggle.btn-fail.active {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* ── Server-side pagination bar ───────────────────────────────────────────────
   Matches the client-side pagination bar the layout builds for unpaginated lists,
   so a list paginated in SQL and one paginated in the browser look identical. */
.pager-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
}

.pager-info {
  font-size: 11.5px;
}

.pager-info strong {
  color: var(--ink);
}

.pager-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Anchors need the button box explicitly — .btn-* is authored for <button>. */
.pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.pager-btn.is-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.pager-dots {
  padding: 0 2px;
  font-size: 11px;
  color: var(--ink-2);
}

/* Shop-floor tablets: keep the tap targets finger-sized and let the bar stack. */
@media (max-width: 640px) {
  .pager-bar {
    justify-content: center;
  }

  .pager-info {
    width: 100%;
    text-align: center;
  }

  .pager-btn {
    min-width: 34px;
    min-height: 34px;
    font-size: 12px;
  }
}


/* ── Per-table search ─────────────────────────────────────────────────────────
   Sits above its own list, right-aligned, and narrows only that table. Paired
   with the pagination bar below the list, so a long table is bracketed by the
   two controls that operate on it. */
.table-search-bar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 14px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}

.table-search-input {
  width: 100%;
  max-width: 260px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--body);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}

.table-search-input::placeholder {
  color: var(--ink-3);
}

.table-search-input:hover {
  border-color: var(--accent-soft);
}

.table-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* Shop-floor tablets: full width and 16px so focusing it does not zoom the page. */
@media (max-width: 640px) {
  .table-search-bar {
    justify-content: stretch;
  }

  .table-search-input {
    max-width: none;
    font-size: 16px;
    padding: 9px 11px;
  }
}

/* ── Searchable drop-downs (Tom Select) ───────────────────────────────────────
   Re-skins the library's base styling with the console's own tokens so an
   enhanced <select> is indistinguishable from the plain inputs beside it.

   Two things about the base stylesheet decide how this is written:

   1. It sets `.ts-control,.ts-wrapper.single.input-active .ts-control{background:#fff}`.
      That second selector is four classes, so a plain `.ts-wrapper.single .ts-control`
      loses to it the moment the field is focused — which is what turned the open
      control into a white box. Every state is therefore matched at equal or higher
      specificity below.

   2. The base sheet draws no caret (that lives in the theme file we deliberately did
      not vendor), so an enhanced select would lose the arrow that marks it as a
      drop-down. One is drawn here, using the library's own --ts-pr-caret to reserve
      the space its !important padding rule would otherwise overwrite.

   Overlay surfaces must also be opaque: --surface is #142233cf, i.e. ~81% alpha. It
   is right for a control sitting on a card, but a drop-down floating over content
   needs --surface-2 or the page shows straight through the list. */
.ts-wrapper {
  width: 100%;
  --ts-pr-caret: 1.6rem;
}

/* Matches the base sheet's own state selectors so the console's surface wins in all
   of them: idle, typing (.input-active), focused, and open. */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.single.dropdown-active .ts-control,
.ts-wrapper.multi.dropdown-active .ts-control,
.ts-wrapper.focus .ts-control {
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
  line-height: 20px;
  min-height: 40px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}

.ts-wrapper:not(.disabled) .ts-control:hover {
  border-color: var(--accent-soft);
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.single.dropdown-active .ts-control {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* Flatten the seam between the control and the list hanging off it. */
.ts-wrapper.dropdown-active .ts-control {
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.ts-wrapper.disabled .ts-control,
.ts-wrapper.disabled .ts-control * {
  background: var(--surface-2);
  color: var(--ink-2);
  opacity: 1;
  cursor: not-allowed;
}

/* The caret the base sheet omits. Pointer-events off so it never swallows a click
   meant for the control underneath it. */
.ts-wrapper.single .ts-control:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-2);
  pointer-events: none;
}

.ts-wrapper.single.dropdown-active .ts-control:after {
  border-top-color: var(--accent);
}

/* The typed text and the resting value both live inside the control. */
.ts-control > input,
.ts-wrapper.single .ts-control > input {
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink);
}

.ts-control > input::placeholder {
  color: var(--ink-3);
}

.ts-wrapper .ts-control > .item {
  color: var(--ink);
}

/* Opaque — see the note above about --surface carrying alpha. */
.ts-dropdown {
  margin-top: 0;
  border: 1px solid var(--accent);
  border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
  box-shadow: var(--e2);
  z-index: 60;
}

/* Dropdowns render against <body> (see enhance() in the console layout) to escape the
   overflow of .table-scroll, which otherwise clips them at the edge of the table. Out there
   they share a stacking context with the modal backdrop (200), so they need to clear it —
   1200 matches what the in-modal rule below already asked for. */
body > .ts-dropdown {
  position: absolute;
  z-index: 1200;
}

.ts-dropdown .ts-dropdown-content {
  max-height: 280px;
}

.ts-dropdown .option {
  padding: 9px 11px;
  line-height: 1.35;
  color: var(--ink);
}

/* Keyboard/pointer highlight. Restrained on purpose — the console reserves a solid
   accent fill for state, not for a transient hover. */
.ts-dropdown .active,
.ts-dropdown .option[data-selectable].active {
  background: var(--accent-weak);
  color: var(--ink);
}

/* The value currently held, so it is findable in a long list. */
.ts-dropdown .option[aria-selected="true"] {
  color: var(--accent);
  font-weight: 600;
}

/* Substring hit while typing. */
.ts-dropdown [data-selectable] .highlight {
  background: var(--accent-weak);
  border-radius: 2px;
  color: var(--ink);
}

.ts-dropdown .no-results,
.ts-dropdown .optgroup-header {
  padding: 9px 11px;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface-2);
}

/* Multi-select chips */
.ts-wrapper.multi .ts-control > div {
  background: var(--accent-weak);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 12px;
}

.ts-wrapper.multi .ts-control > div.active {
  background: var(--accent-deep);
  color: var(--on-navy);
}

.ts-wrapper.plugin-remove_button .item .remove {
  border-left-color: var(--line-strong);
  color: var(--ink-2);
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, .25);
  color: var(--ink);
}

/* A drop-down opened inside a modal must float above the modal's own layer. */
.modal .ts-dropdown {
  z-index: 1200;
}

/* Shop-floor tablets: 16px stops iOS/Android zooming the page on focus, and the
   taller rows keep the tap target finger-sized. */
@media (max-width: 640px) {

  .ts-wrapper.single .ts-control,
  .ts-wrapper.multi .ts-control,
  .ts-wrapper.single.input-active .ts-control,
  .ts-wrapper.single.dropdown-active .ts-control,
  .ts-wrapper.focus .ts-control,
  .ts-control > input,
  .ts-dropdown,
  .ts-dropdown .option {
    font-size: 16px;
  }

  .ts-wrapper.single .ts-control,
  .ts-wrapper.multi .ts-control {
    min-height: 46px;
  }

  .ts-dropdown .option {
    padding: 12px 11px;
  }

  .ts-dropdown .ts-dropdown-content {
    max-height: 55vh;
  }
}