/*
 * theme.css — BANIZ INVENTORY TRACKER design-system values.
 * Swiss ledger: hairline grid, flat fields, one deep pine-green, tabular-mono
 * figures. Zero radius, zero shadow, one weight of Archivo for display.
 */

:root {
  --canvas: #f6f5f0;
  --surface: #fbfbf8;
  --surface-2: #edeade;
  --border: #dcd8c8;
  --border-strong: #b7b09a;
  --ink: #15181c;
  --muted: #666768;
  --accent: #1f4b43;
  --accent-hover: #163a34;
  --accent-ink: #f6f5f0;
  --accent-text: #1f4b43;
  --accent-strong: #1f4b43;
  --accent-soft: #e4ebe7;
  --accent-border: #bdd0c9;
  --success: #2f7d4f;
  --success-ink: #ffffff;
  --success-soft: #e1ecdf;
  --success-strong: #2a6b45;
  --warning: #a05a1e;
  --warning-ink: #ffffff;
  --warning-soft: #f0e2d1;
  --warning-strong: #8a4c17;
  --danger: #a12f26;
  --danger-ink: #ffffff;
  --danger-soft: #f2ddd9;
  --danger-strong: #8f281f;
  --chart-1: #1f4b43;
  --chart-2: #96552f;
  --chart-3: #3a5a78;
  --chart-4: #a1791f;
  --chart-5: #6a4a6a;
  --chart-6: #2f7a72;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 700;
  --display-tracking: -0.015em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 2px 12px color-mix(in srgb, var(--ink) 14%, transparent);
  --shadow-btn: none;
  --card-pad: 1.25rem;
  --caps: uppercase;
  --caps-tracking: 0.07em;
  --btn-weight: 600;
  --measure: 68ch;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #12171a;
  --surface: #1a2023;
  --surface-2: #212a2b;
  --border: #303a3a;
  --border-strong: #48534f;
  --ink: #eeeee6;
  --muted: #9aa19b;
  --accent: #4a9481;
  --accent-hover: #5da88f;
  --accent-ink: #0c1412;
  --accent-text: #6cb39f;
  --accent-strong: #86cdb6;
  --accent-soft: #1f3530;
  --accent-border: #3a5952;
  --success: #4a9d6c;
  --success-ink: #0c1412;
  --success-soft: #1c3223;
  --success-strong: #7fc79b;
  --warning: #c98a4a;
  --warning-ink: #1a120a;
  --warning-soft: #33240f;
  --warning-strong: #dba573;
  --danger: #c96257;
  --danger-ink: #1a0f0d;
  --danger-soft: #33201c;
  --danger-strong: #e08c82;
  --chart-1: #4a9481;
  --chart-2: #c98a5c;
  --chart-3: #6f92b3;
  --chart-4: #cfa74e;
  --chart-5: #a682a6;
  --chart-6: #5db3a6;
}

/*
 * app.css — BANIZ INVENTORY TRACKER's own stylesheet. Swiss ledger: a flat
 * ground, a hairline grid, no shadow chrome. Motion is deliberately minimal —
 * no entrance animation on load; interaction states only (accordion open,
 * drawer slide, hover).
 */

/* ---- Mobile drawer: side-rail's phone form, a full-width slide-UP panel ---- */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  pointer-events: none;
  visibility: hidden;
}
.mobile-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.mobile-drawer.is-open .mobile-drawer-backdrop {
  opacity: 1;
}
.mobile-drawer-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--border);
  transform: translateY(100%);
  transition: transform 240ms var(--ease-out);
}
.mobile-drawer.is-open .mobile-drawer-panel {
  transform: translateY(0);
}
html.reduced-motion .mobile-drawer-backdrop,
html.reduced-motion .mobile-drawer-panel {
  transition-duration: 0.01ms;
}

/* ---- Ledger table numerals: tabular mono figures, right aligned ---- */
.ledger-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- Coloured left border on a history / recent-transaction row, by type ---- */
.tx-row {
  border-left-width: 3px;
  border-left-style: solid;
}

/* ---- Section head with a hairline rule, used above chart pairs and lists ---- */
.ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}
.ledger-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Quantity stepper used in Stock In / Stock Out forms ---- */
.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  height: 2.5rem;
}
.qty-stepper button {
  width: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface);
  transition: background-color 150ms var(--ease);
}
.qty-stepper button:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.qty-stepper input {
  width: 3.5rem;
  border: 0;
  border-left: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
  text-align: center;
  font-family: var(--font-mono);
  background: var(--surface);
  color: var(--ink);
}
.qty-stepper input:focus {
  outline: none;
}

/* Variant/size nested rows in Add Product & Product detail — indentation IS the hierarchy. */
.tree-line {
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}