/* ==========================================================================
   Stock Management System — design tokens

   Shape, elevation, motion and type are systems, not per-component decisions.
   If a screen needs a value that is not here, the scale is wrong, not the screen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — light
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
	--ground:        #F1F5F9;
	--surface:       #FFFFFF;
	--surface-2:     #F8FAFC;
	--surface-sunk:  #EEF2F7;

	--ink:           #0F172A;
	--ink-muted:     #475569;
	--ink-subtle:    #64748B;

	--line:          #E2E8F0;
	--line-strong:   #CBD5E1;

	--primary:       #334155;
	--primary-ink:   #FFFFFF;

	/* ----------------------------------------------------------------------
	   COTE identity, extracted from the COTE TECH (U) LTD letterhead.

	   The letterhead's orange is #E8501F. It measures 3.75:1 on white, which
	   is fine for a printed rule and fails outright for interface text — and
	   white on a #E8501F button is the same 3.75:1, so adopting the brand hex
	   directly would have made every primary button in this application less
	   legible than the emerald it replaced (4.53:1).

	   So the orange is split in two. Both read as COTE; only one is safe for
	   text and for carrying white.

	     --brand-orange  the true letterhead colour. Rules, the logo ring,
	                     display type, focus rings, decorative fills. Anything
	                     large enough to live at 3:1.
	     --accent        the working orange, darkened to clear 4.5:1. Button
	                     fills under white text, links, any text below 18px.

	   Measured, light theme:
	     #C43F16 on #FFFFFF  5.16:1     white on #C43F16   5.16:1
	     #C43F16 on #F1F5F9  4.71:1     white on #A8330F   6.68:1
	     #E8501F on #FFFFFF  3.75:1  (UI/large only, needs 3:1)
	   ---------------------------------------------------------------------- */
	--brand-orange:  #E8501F;
	--brand-navy:    #1A1A4B;
	--brand-tint-cool: #EDEDF5;   /* letterhead "prepared for" panel   */
	--brand-tint-warm: #FDEDE4;   /* letterhead "prepared by"  panel   */
	--brand-rule:    #E8501F;

	/* Bootstrap builds .bg-primary-subtle and its focus glows from this
	   triplet, not from --bs-primary, so it has to be restated as numbers.
	   #C43F16 — the working orange. */
	--bs-primary-rgb: 196, 63, 22;

	--accent:        #C43F16;
	--accent-hover:  #A8330F;
	--accent-ink:    #FFFFFF;
	--accent-wash:   #FDEDE4;

	/* Semantic state is not brand. Success stays green even though the accent
	   is no longer green — these two tokens held the same hex by coincidence
	   before the rebrand, and separating them is the point, not an oversight. */
	--ok:            #047857;
	--ok-wash:       #ECFDF5;
	--warn:          #B45309;
	--warn-wash:     #FFFBEB;
	--danger:        #DC2626;
	--danger-wash:   #FEF2F2;
	--info:          #0369A1;
	--info-wash:     #F0F9FF;

	/* Focus takes the vivid brand orange rather than the darkened working one:
	   a ring is a large UI element at 3:1, and the brighter colour is easier to
	   catch in peripheral vision. 3.75:1 on white. */
	--focus:         #E8501F;
	--skeleton:      #E7ECF2;
	--skeleton-hi:   #F3F6F9;

	/* Elevation — four levels, each with a meaning.
	   e1 resting · e2 raised (responds) · e3 floating (temporary) · e4 modal */
	--e1: 0 1px 2px rgb(15 23 42 / .05);
	--e2: 0 1px 2px rgb(15 23 42 / .05), 0 4px 10px -4px rgb(15 23 42 / .10);
	--e3: 0 2px 4px rgb(15 23 42 / .05), 0 12px 28px -10px rgb(15 23 42 / .18);
	--e4: 0 4px 8px rgb(15 23 42 / .06), 0 28px 56px -20px rgb(15 23 42 / .28);

	/* Rings signal state; they are not elevation and never stack with it. */
	--ring-w: 3px;
	--ring-danger: 0 0 0 var(--ring-w) color-mix(in srgb, var(--danger) 14%, transparent);
	--ring-hairline: 0 0 0 1px var(--line-strong);
}

/* --------------------------------------------------------------------------
   2. Tokens — dark (designed, not inverted)
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
	--ground:        #0A0F1A;
	--surface:       #111A2B;
	--surface-2:     #0F1726;
	--surface-sunk:  #0C1421;

	--ink:           #E8EEF6;
	--ink-muted:     #A3B1C6;
	--ink-subtle:    #8496AE;

	--line:          #1F2C40;
	--line-strong:   #33465F;

	--primary:       #B3C2D6;
	--primary-ink:   #0A0F1A;

	/* ----------------------------------------------------------------------
	   COTE identity — dark.

	   The letterhead is a print artifact and has no answer here, so this is
	   designed rather than extracted, and marked as such.

	   #E8501F does technically clear 5.11:1 on this ground, but against a
	   near-black it reads muddy and loses the energy the mark depends on.
	   Lifting it to #FF7A4D restores the brightness and gains contrast
	   (7.43:1), so the working orange and the brand orange converge here —
	   there is no legibility reason to keep them apart on a dark ground.

	   Navy inverts its role completely: on paper it is the ink, here it can
	   only be a surface tint. The lavender/peach panel pair is preserved as a
	   cool/warm distinction rather than being inverted mechanically, because
	   the letterhead uses that warmth to separate "prepared for" from
	   "prepared by" and the meaning outlives the lightness.

	   Measured, dark theme:
	     #FF7A4D on #111A2B  6.75:1     #2A0E04 on #FF7A4D  7.00:1
	     #FF7A4D on #0A0F1A  7.43:1     #2A0E04 on #FF9B78  8.78:1
	   ---------------------------------------------------------------------- */
	--brand-orange:  #FF7A4D;
	--brand-navy:    #232358;
	--brand-tint-cool: #1A1A33;
	--brand-tint-warm: #2E1408;
	--brand-rule:    #FF7A4D;

	/* The Bootstrap bridge below is shared by both themes, so the light
	   triplet would otherwise paint light-orange glows onto a dark ground.
	   #FF7A4D — the dark-theme orange. */
	--bs-primary-rgb: 255, 122, 77;

	--accent:        #FF7A4D;
	--accent-hover:  #FF9B78;
	--accent-ink:    #2A0E04;
	--accent-wash:   #2E1408;

	/* Success stays green here too. See the note in the light block. */
	--ok:            #34D399;
	--ok-wash:       #0C2A22;
	--warn:          #FBBF24;
	--warn-wash:     #2C2110;
	--danger:        #F87171;
	--danger-wash:   #2E1517;
	--info:          #56B6F0;
	--info-wash:     #0B2537;

	--focus:         #FF7A4D;
	--skeleton:      #18243A;
	--skeleton-hi:   #22304A;

	--e1: 0 1px 2px rgb(0 0 0 / .45);
	--e2: 0 1px 2px rgb(0 0 0 / .45), 0 4px 12px -4px rgb(0 0 0 / .55);
	--e3: 0 2px 4px rgb(0 0 0 / .5), 0 14px 32px -12px rgb(0 0 0 / .7);
	--e4: 0 4px 10px rgb(0 0 0 / .5), 0 32px 64px -24px rgb(0 0 0 / .8);

	--ring-w: 3px;
	--ring-danger: 0 0 0 var(--ring-w) color-mix(in srgb, var(--danger) 22%, transparent);
	--ring-hairline: 0 0 0 1px var(--line-strong);
}

/* --------------------------------------------------------------------------
   3. Shape, motion, type — theme-independent
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
	/* --- shape: five steps, applied by element size ---------------------
	   A child's radius is always smaller than its parent's, or the corners
	   fight. Never nest equal radii. */
	--r-sm:   4px;   /* inline marks: badges, focus rings, tags in dense text */
	--r-md:   8px;   /* controls: buttons, inputs, selects, menu items       */
	--r-lg:  14px;   /* surfaces: cards, tables, panels, popovers            */
	--r-xl:  22px;   /* overlays: modals, sheets, the command palette        */
	--r-pill: 999px; /* status only — a pill means state, not action         */

	/* --- motion: one curve, durations tied to meaning ------------------- */
	--ease:          cubic-bezier(.2, .7, .3, 1);
	--d-hover:       140ms;  /* colour and border only, never movement      */
	--d-press:        80ms;  /* smallest confirmation a click landed        */
	--d-pop:         150ms;  /* dropdown, picker, popover in                */
	--d-pop-out:     100ms;  /* exit faster than entry                      */
	--d-modal:       200ms;
	--d-modal-out:   140ms;
	--d-row:         180ms;  /* row insert / remove                         */
	--d-toast:       220ms;
	--d-fade:        120ms;  /* skeleton to content                         */
	--d-value:       300ms;  /* a total that recalculates ticks, not snaps  */
	--d-shimmer:     1.4s;   /* ambient skeleton sweep                      */

	/* --- type: eight steps, nothing between them ------------------------ */
	--t-display: 32px;
	--t-metric:  30px;
	--t-title:   20px;
	--t-body:    15px;
	--t-table:   14px;
	--t-label:   13px;
	--t-caption: 12px;
	--t-micro:   11px;

	--lh-tight: 1.1;
	--lh-snug:  1.3;
	--lh-body:  1.55;

	/* --- spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48 ------------------------ */
	--s1: 4px;  --s2: 8px;  --s3: 12px;
	--s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

	/* --- density: row, control and padding scale together --------------- */
	--row-h:      44px;
	--row-pad-y:  11px;
	--control-h:  40px;
	--control-sm: 34px;
	--card-pad:   16px;
	--field-h:    44px;

	/* --- Bootstrap inherits the palette rather than being restyled ------ */
	--bs-body-bg:          var(--ground);
	--bs-body-color:       var(--ink);
	--bs-secondary-color:  var(--ink-muted);
	--bs-tertiary-color:   var(--ink-subtle);
	--bs-border-color:     var(--line);
	--bs-emphasis-color:   var(--ink);
	--bs-link-color:       var(--accent);
	--bs-link-hover-color: var(--accent-hover);

	--bs-primary:          var(--accent);

	/* --bs-primary-rgb is deliberately NOT set here. Bootstrap composes its
	   alpha shades from that triplet rather than from --bs-primary, so it
	   cannot be written as var(--accent) — and this block is shared by both
	   themes, so a value here would paint one theme's orange onto the other.
	   Each theme declares its own in its token block above. */
	--bs-danger:           var(--danger);

	--bs-body-font-family: var(--font-sans);
	--bs-body-font-size:   var(--t-body);
	--bs-body-line-height: var(--lh-body);
	--bs-border-radius:    var(--r-md);
	--bs-border-radius-sm: var(--r-sm);
	--bs-border-radius-lg: var(--r-lg);

	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
	             system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
	             "Liberation Mono", monospace;
}

/* Compact scales the whole system on one ratio, not row height alone. */
[data-density="compact"] {
	--row-h:      36px;
	--row-pad-y:   7px;
	--control-h:  34px;
	--control-sm: 30px;
	--card-pad:   12px;
	--field-h:    38px;
}

/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */
body {
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

/* Law 3: focus is always visible. */
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
	box-shadow: none;
}

/* Law 11: figures are tabular wherever they stack. */
.num,
.metric,
td.num,
th.num,
.table tbody td.num {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.mono { font-family: var(--font-mono); }

.text-subtle { color: var(--ink-subtle) !important; }
.text-muted  { color: var(--ink-muted) !important; }

.micro {
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-subtle);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   5. Surfaces
   -------------------------------------------------------------------------- */
.card,
.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--e1);
}

.card-header {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding: var(--s3) var(--s4);
	font-weight: 620;
}

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

.page-title {
	font-size: var(--t-display);
	font-weight: 660;
	letter-spacing: -.02em;
	margin: 0;
	text-wrap: balance;
}
.page-sub {
	color: var(--ink-muted);
	font-size: var(--t-table);
	margin: 4px 0 0;
}
.page-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--s5);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
	font-weight: 560;
	border-radius: var(--r-md);
	min-height: var(--control-h);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	transition: background-color var(--d-hover) var(--ease),
	            border-color var(--d-hover) var(--ease),
	            color var(--d-hover) var(--ease),
	            box-shadow var(--d-hover) var(--ease),
	            transform var(--d-press) var(--ease);
}

/* The smallest gesture that confirms a click landed. */
.btn:active { transform: translateY(1px); }
.btn:disabled:active, .btn.disabled:active { transform: none; }

.btn-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	box-shadow: var(--e1);
}
.btn-primary:hover,
.btn-primary:active {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--accent-ink);
	box-shadow: var(--e2);
}

.btn-secondary,
.btn-outline-secondary {
	background: var(--surface);
	border-color: var(--line-strong);
	color: var(--ink);
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
	background: var(--surface-sunk);
	border-color: var(--line-strong);
	color: var(--ink);
}

.btn-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--ink-muted);
}
.btn-ghost:hover { background: var(--surface-sunk); color: var(--ink); }

/* Law 8: destructive is visually separated. */
.btn-danger-soft {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
	color: var(--danger);
}
.btn-danger-soft:hover {
	background: var(--danger-wash);
	border-color: var(--danger);
	color: var(--danger);
}

.btn:disabled, .btn.disabled { opacity: .5; }

.btn-icon {
	min-width: 40px;
	padding-inline: 10px;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form-label {
	font-size: var(--t-label);
	font-weight: 560;
	margin-bottom: 5px;
	color: var(--ink);
}
.form-label .req { color: var(--danger); margin-left: 2px; }

.form-control,
.form-select {
	background: var(--surface);
	border: 1px solid var(--line-strong);
	color: var(--ink);
	min-height: var(--field-h);
	transition: border-color var(--d-hover) var(--ease), box-shadow var(--d-hover) var(--ease);
	font-size: var(--t-body);
	border-radius: var(--r-md);
}
.form-control:focus,
.form-select:focus {
	background: var(--surface);
	border-color: var(--focus);
	color: var(--ink);
}
.form-control::placeholder { color: var(--ink-subtle); opacity: 1; }

.form-control:disabled,
.form-control[readonly] {
	background: var(--surface-sunk);
	color: var(--ink-muted);
}

.form-control.is-invalid,
.form-select.is-invalid {
	border-color: var(--danger);
	box-shadow: var(--ring-danger);
}
.form-control.is-valid,
.form-select.is-valid { border-color: var(--ok); }

.form-hint {
	font-size: var(--t-caption);
	color: var(--ink-subtle);
	margin-top: 5px;
}

/* Law 6: errors sit with their field. */
.field-error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: var(--t-caption);
	color: var(--danger);
	margin-top: 5px;
}

/* Computed values read as output, never as disabled inputs (Phase 5). */
.output {
	display: block;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: var(--t-body);
	color: var(--ink);
	padding: 9px 0;
	text-align: right;
}
.output-lg { font-size: var(--t-title); font-weight: 660; }

/* --------------------------------------------------------------------------
   8. Chips — status always carries an icon and a word (Law 2)
   -------------------------------------------------------------------------- */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--t-caption);
	font-weight: 560;
	line-height: 1.4;
	padding: 3px 9px;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	white-space: nowrap;
}
.chip i { font-size: var(--t-micro); }

.chip-ok     { color: var(--ok);     background: var(--ok-wash);     border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.chip-warn   { color: var(--warn);   background: var(--warn-wash);   border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.chip-danger { color: var(--danger); background: var(--danger-wash); border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.chip-info   { color: var(--info);   background: var(--info-wash);   border-color: color-mix(in srgb, var(--info) 32%, transparent); }
.chip-neutral{ color: var(--ink-muted); background: var(--surface-sunk); border-color: var(--line); }

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table {
	--bs-table-bg: var(--surface);
	--bs-table-color: var(--ink);
	--bs-table-border-color: var(--line);
	margin-bottom: 0;
	font-size: var(--t-table);
}

.table > thead > tr > th {
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-subtle);
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
	padding: 10px var(--s3);
	white-space: nowrap;
	vertical-align: middle;
}

.table > tbody > tr > td {
	padding: var(--row-pad-y) var(--s3);
	vertical-align: middle;
	border-bottom: 1px solid var(--line);
	height: var(--row-h);
}

.table > tbody > tr { transition: background-color var(--d-hover) var(--ease); }
.table > tbody > tr:hover > td { background: var(--surface-2); }

/* A row added to an order should not make the totals jump. */
@keyframes row-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}
.table > tbody > tr.row-entering { animation: row-in var(--d-row) var(--ease); }

.table-wrap {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
}
/* Law 12: wide tables scroll inside their own container. */
.table-scroll { overflow-x: auto; }

.row-actions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	align-items: center;
}

/* thumbnail frame — fixed box, object-fit, real placeholder */
.thumb {
	width: 44px;
	height: 44px;
	border-radius: var(--r-md);
	object-fit: cover;
	background: var(--surface-sunk);
	border: 1px solid var(--line);
	display: block;
}
.thumb-empty {
	display: grid;
	place-items: center;
	color: var(--ink-subtle);
	font-size: var(--t-table);
}

/* --------------------------------------------------------------------------
   10. Toolbar and bulk-action bar
   -------------------------------------------------------------------------- */
.toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	align-items: center;
	padding: var(--s3);
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}
.toolbar .spacer { flex: 1 1 auto; }
.toolbar .form-control,
.toolbar .form-select { min-height: 38px; font-size: var(--t-table); }

.bulk-bar {
	display: none;
	align-items: center;
	gap: var(--s3);
	padding: var(--s3);
	background: var(--accent-wash);
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.bulk-bar.active { display: flex; }
.bulk-bar .count { font-weight: 620; }

/* --------------------------------------------------------------------------
   11. States — empty, skeleton, error (Phase 8)
   -------------------------------------------------------------------------- */
.state {
	text-align: center;
	padding: var(--s7) var(--s4);
}
.state-icon {
	font-size: var(--t-display);
	color: var(--ink-subtle);
	margin-bottom: var(--s3);
}
.state-title { font-weight: 620; font-size: var(--t-body); margin-bottom: 5px; }
.state-desc {
	color: var(--ink-subtle);
	font-size: var(--t-table);
	max-width: 46ch;
	margin: 0 auto var(--s4);
}

.skeleton {
	background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-hi) 37%, var(--skeleton) 63%);
	background-size: 400% 100%;
	animation: skeleton-sweep var(--d-shimmer) var(--ease) infinite;
	border-radius: var(--r-sm);
}
@keyframes skeleton-sweep {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
.skeleton-line { height: 12px; margin: 9px 0; }
.skeleton-row  { height: var(--row-h); margin: 0; border-radius: 0; border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   12. Inline confirmation (replaces fading toasts) + undo
   -------------------------------------------------------------------------- */
.notice {
	display: flex;
	align-items: flex-start;
	gap: var(--s2);
	padding: 11px var(--s3);
	border-radius: var(--r-md);
	border: 1px solid transparent;
	font-size: var(--t-table);
	margin-bottom: var(--s3);
}
.notice .notice-body { flex: 1 1 auto; }
.notice .btn { min-height: 32px; padding: 3px 11px; font-size: var(--t-label); }
.notice-ok     { background: var(--ok-wash);     border-color: color-mix(in srgb, var(--ok) 30%, transparent);     color: var(--ok); }
.notice-warn   { background: var(--warn-wash);   border-color: color-mix(in srgb, var(--warn) 32%, transparent);   color: var(--warn); }
.notice-danger { background: var(--danger-wash); border-color: color-mix(in srgb, var(--danger) 32%, transparent); color: var(--danger); }
.notice-info   { background: var(--info-wash);   border-color: color-mix(in srgb, var(--info) 32%, transparent);   color: var(--info); }
.notice strong { color: inherit; }

.undo-stack {
	position: fixed;
	bottom: var(--s4);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1080;
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	width: min(460px, calc(100vw - 32px));
}
.undo-toast {
	display: flex;
	align-items: center;
	gap: var(--s3);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	box-shadow: var(--e3);
	padding: 11px var(--s3);
	font-size: var(--t-table);
	color: var(--ink);
}
.undo-toast .msg { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   13. Modals
   -------------------------------------------------------------------------- */
.modal-content {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	box-shadow: var(--e4);
}
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-size: var(--t-title); font-weight: 640; }
.modal-backdrop.show { opacity: .55; }

/* --------------------------------------------------------------------------
   14. Utility
   -------------------------------------------------------------------------- */
.hidden { display: none !important; }

kbd {
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	background: var(--surface-sunk);
	border: 1px solid var(--line-strong);
	border-bottom-width: 2px;
	border-radius: var(--r-sm);
	padding: 1px 5px;
	color: var(--ink-muted);
}

.divider { height: 1px; background: var(--line); margin: var(--s4) 0; }

.visually-hidden-focusable:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	z-index: 2000;
	width: auto !important; height: auto !important;
	padding: 10px 16px;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	box-shadow: var(--e2);
}

/* ==========================================================================
   15. Dashboard — Phase 3
   ========================================================================== */

.dash-attention {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--s3);
	margin-bottom: var(--s4);
}

/* Attention figures are links: a metric that flags a problem routes to it. */
.stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: var(--s4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--line-strong);
	border-radius: var(--r-lg);
	text-decoration: none;
	color: var(--ink);
	box-shadow: var(--e1);
	transition: border-color var(--d-hover) var(--ease),
	            transform var(--d-hover) var(--ease),
	            box-shadow var(--d-hover) var(--ease);
}
.stat:hover {
	color: var(--ink);
	border-color: var(--line-strong);
	transform: translateY(-2px);
	box-shadow: var(--e2);
}

.stat-danger { border-left-color: var(--danger); }
.stat-warn   { border-left-color: var(--warn); }
.stat-info   { border-left-color: var(--info); }

.stat-label { font-size: var(--t-label); color: var(--ink-muted); font-weight: 550; }
.stat-value {
	font-size: var(--t-metric);
	font-weight: 660;
	letter-spacing: -.02em;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	text-align: left;
}
.stat-foot {
	font-size: var(--t-caption);
	color: var(--ink-subtle);
	display: flex;
	align-items: center;
	gap: 6px;
}
.stat-foot i { font-size: var(--t-micro); opacity: .6; transition: transform var(--d-hover) var(--ease); }
.stat:hover .stat-foot i { transform: translateX(3px); }

.dash-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s4);
}
@media (min-width: 1100px) {
	.dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.money-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s4);
	flex-wrap: wrap;
}

.metric {
	font-size: var(--t-metric);
	font-weight: 660;
	letter-spacing: -.025em;
	font-variant-numeric: tabular-nums;
	margin: 0;
	line-height: 1.1;
}
.metric-sub {
	margin: 6px 0 0;
	font-size: var(--t-label);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.delta i { font-size: var(--t-micro); }
.delta-up   { color: var(--ok); }
.delta-down { color: var(--danger); }

.spark-wrap { color: var(--accent); flex: 1 1 160px; max-width: 260px; min-width: 120px; }
.spark { width: 100%; height: 44px; display: block; }

.money-split {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s3);
	margin-top: var(--s4);
	padding-top: var(--s4);
	border-top: 1px solid var(--line);
}
.money-split .num { text-align: left; font-size: var(--t-title); font-weight: 620; margin-top: 3px; }

/* ==========================================================================
   16. Catalog + record pages — Phase 4
   ========================================================================== */

.search-inline { position: relative; flex: 1 1 220px; max-width: 320px; }
.search-inline input { padding-left: 34px; }
.search-inline > i {
	position: absolute;
	left: 12px; top: 50%;
	transform: translateY(-50%);
	color: var(--ink-subtle);
	font-size: var(--t-caption);
	pointer-events: none;
}

.record-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s4);
	align-items: start;
}
@media (min-width: 900px) {
	.record-grid { grid-template-columns: 320px minmax(0, 1fr); }
}

/* Fixed frame with object-fit, because uploads have no fixed aspect ratio. */
.photo-frame {
	aspect-ratio: 1;
	width: 100%;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--surface-sunk);
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--ink-subtle);
	font-size: var(--t-label);
}
.photo-placeholder i { font-size: var(--t-metric); opacity: .55; }

.record-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--s3);
}

.form-actions {
	display: flex;
	gap: var(--s2);
	align-items: center;
	margin-top: var(--s4);
	padding-top: var(--s4);
	border-top: 1px solid var(--line);
}

/* DataTables controls, restyled minimally to match the toolbar. */
.dt-container .dt-length,
.dt-container .dt-info,
.dt-container .dt-paging { padding: var(--s3); font-size: var(--t-label); color: var(--ink-muted); }
.dt-container .dt-paging .page-link { color: var(--ink-muted); background: var(--surface); border-color: var(--line); }
.dt-container .dt-paging .active > .page-link { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dt-container select.dt-input { min-height: 32px; padding: 2px 8px; }

/* ==========================================================================
   17. Order builder — Phase 5
   ========================================================================== */

.order-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s4);
	align-items: start;
}
@media (min-width: 1100px) {
	.order-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* Sticky totals keep the running figure visible on long orders. */
@media (min-width: 1100px) {
	.order-side { position: sticky; top: 72px; }
}

.order-table > tbody > tr > td { vertical-align: top; padding-top: var(--s3); }
.order-table .output { padding-top: 10px; }

.total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s3);
	padding: 5px 0;
	font-size: var(--t-table);
	color: var(--ink-muted);
}
.total-row .output { padding: 0; }

.total-grand {
	border-top: 1px solid var(--line);
	margin-top: var(--s2);
	padding-top: var(--s3);
	color: var(--ink);
	font-weight: 620;
}
.total-due { color: var(--ink); font-weight: 620; }

.order-actions { margin-top: var(--s3); }

.payment-status { display: flex; align-items: center; gap: var(--s2); min-height: 30px; }

/* --- searchable product picker ------------------------------------------ */
.picker { position: relative; }

.picker-menu {
	animation: pop-in var(--d-pop) var(--ease);
	position: absolute;
	top: calc(100% + 4px);
	left: 0; right: 0;
	z-index: 20;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	box-shadow: var(--e3);
	padding: 5px;
	max-height: 280px;
	overflow-y: auto;
	display: none;
}
.picker-menu.open { display: block; }

.picker-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-radius: var(--r-md);
	padding: 8px 10px;
	font-size: var(--t-table);
	color: var(--ink);
	cursor: pointer;
}
.picker-item:hover,
.picker-item.cursor { background: var(--accent-wash); }
.picker-name { font-weight: 550; }
.picker-meta { display: flex; align-items: center; gap: 8px; font-size: var(--t-caption); color: var(--ink-subtle); }
.picker-empty { padding: var(--s3); font-size: var(--t-label); color: var(--ink-subtle); text-align: center; }

.line-warning { margin-top: 6px; }

/* Payment modal summary — figures stated before any input is accepted. */
.payment-summary {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	margin: 0;
}
.payment-summary > div {
	background: var(--surface-2);
	display: flex;
	justify-content: space-between;
	gap: var(--s3);
	padding: 9px var(--s3);
	font-size: var(--t-table);
}
.payment-summary dt { margin: 0; color: var(--ink-subtle); font-weight: 500; }
.payment-summary dd { margin: 0; font-weight: 560; }
.payment-summary .payment-due { background: var(--surface-sunk); }
.payment-summary .payment-due dt,
.payment-summary .payment-due dd { color: var(--ink); font-weight: 640; }

/* Report controls — Phase 6 */
.report-controls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4);
	align-items: center;
	justify-content: space-between;
}
.report-dates {
	display: flex;
	align-items: center;
	gap: var(--s2);
	flex-wrap: wrap;
}
.report-dates .form-control { width: auto; min-height: 38px; }
.report-dates .form-label { font-size: var(--t-label); color: var(--ink-muted); }

/* ==========================================================================
   18. Settings — Phase 7
   ========================================================================== */

.settings-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s4);
	align-items: start;
}
@media (min-width: 1100px) {
	.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.settings-grid > section:first-child { grid-row: span 2; }
}

.strength { display: flex; align-items: center; gap: var(--s2); margin-top: 8px; }
.strength-bar {
	flex: 1 1 auto;
	height: 5px;
	border-radius: var(--r-pill);
	background: var(--surface-sunk);
	overflow: hidden;
}
.strength-bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: var(--r-pill);
	transition: width var(--d-pop) var(--ease), background-color var(--d-pop) var(--ease);
}
.strength-bar span.weak { background: var(--danger); }
.strength-bar span.fair { background: var(--warn); }
.strength-bar span.good { background: var(--ok); }
.strength-text { font-size: var(--t-caption); color: var(--ink-muted); min-width: 84px; }

textarea.form-control { min-height: auto; }

/* ==========================================================================
   19. Audit trail — Phase 1 (Honda build)
   ========================================================================== */
.audit-diff {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 3px 10px;
	align-items: baseline;
	font-size: var(--t-caption);
}
.audit-diff .mono { font-size: var(--t-caption); }
.audit-diff .was { color: var(--ink-subtle); text-decoration: line-through; }
.audit-diff i { font-size: var(--t-micro); color: var(--ink-subtle); margin: 0 2px; }

/* ==========================================================================
   20. The builder — Phase 2 (Honda build)
   ========================================================================== */
.builder-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s4);
	align-items: start;
}
@media (min-width: 1000px) {
	.builder-layout { grid-template-columns: 280px minmax(0, 1fr); }
}

.type-list { display: flex; flex-direction: column; }

.type-row {
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s3) var(--s4);
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: var(--ink);
	position: relative;
}
.type-row:last-child { border-bottom: 0; }
.type-row:hover { background: var(--surface-2); color: var(--ink); }
.type-row.active { background: var(--accent-wash); color: var(--ink); font-weight: 600; }
.type-row.active::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--accent);
}
.type-row > i { font-size: var(--t-title); color: var(--ink-subtle); width: 22px; text-align: center; }
.type-row.active > i { color: var(--accent); }
.type-name { flex: 1 1 auto; }

.type-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--s4);
}

.drag-handle { cursor: grab; color: var(--ink-subtle); }
.drag-handle:active { cursor: grabbing; }
#attributeBody tr.dragging { opacity: .4; }

.preview-form {
	max-width: 460px;
	background: var(--surface-2);
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-lg);
	padding: var(--s4);
}

/* Goods received — Phase 3 (Honda build) */
.receive-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s4);
	align-items: start;
}
@media (min-width: 1100px) {
	.receive-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
#serials { font-size: var(--t-label); line-height: 1.7; }

/* Unit record — Phase 3 (Honda build) */
.identity {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--s4);
	margin: 0;
}
.identity dt {
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-subtle);
	margin: 0 0 4px;
}
.identity dd { margin: 0; font-size: var(--t-body); font-weight: 600; letter-spacing: .02em; }

.timeline { list-style: none; margin: 0; padding: var(--s4); }
.timeline li {
	display: flex;
	gap: var(--s3);
	padding-bottom: var(--s4);
	position: relative;
}
.timeline li:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 5px; top: 16px; bottom: 0;
	width: 1px;
	background: var(--line);
}
.tl-dot {
	width: 11px; height: 11px;
	border-radius: 50%;
	flex: none;
	margin-top: 4px;
	border: 2px solid var(--surface);
	box-shadow: var(--ring-hairline);
	background: var(--ink-subtle);
}
.tl-in { background: var(--ok); }
.tl-out { background: var(--warn); }
.tl-adjust, .tl-transfer { background: var(--info); }

/* Serialised line picker — Phase 4 (Honda build) */
.unit-slot { margin-top: 6px; }
.unit-slot .form-select { font-size: var(--t-label); min-height: 34px; }

/* Resilience — Phase 8 (Honda build) */
.cron-snippet {
	background: var(--surface-sunk);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--s3);
	font-family: var(--font-mono);
	font-size: var(--t-caption);
	line-height: 1.7;
	color: var(--ink-muted);
	overflow-x: auto;
	margin: 0;
}
.variance-plus { color: var(--ok); font-weight: 620; }
.variance-minus { color: var(--danger); font-weight: 620; }

/* ==========================================================================
   Motion primitives — one curve, exit always faster than entry
   ========================================================================== */
@keyframes pop-in {
	from { opacity: 0; transform: translateY(-4px) scale(.99); }
	to   { opacity: 1; transform: none; }
}

/* Bootstrap's modal, retimed onto the system curve. */
.modal.fade .modal-dialog {
	transition: transform var(--d-modal) var(--ease), opacity var(--d-modal) var(--ease);
	transform: scale(.98);
}
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.fade { transition: opacity var(--d-modal) var(--ease); }

.undo-toast { animation: pop-in var(--d-toast) var(--ease); }

/* Skeleton hands over to content without a jump. */
@keyframes settle-in { from { opacity: 0; } to { opacity: 1; } }
.settling { animation: settle-in var(--d-fade) var(--ease); }