@import url("../fonts/fonts.css");

/* ===========================================================================
   Kholosh Finance Hub — design system
   ---------------------------------------------------------------------------
   Calm fintech. Warm off-white ground, floating white panels, generous air.
   One accent (deep navy ink) for primary actions and active nav. Red is
   reserved for destructive actions, alerts and badge counts. Green appears
   only on positive deltas. One polished light theme — no dark mode.
   =========================================================================== */

:root {
  /* --- surfaces --------------------------------------------------------- */
  --bg:            #F5F3F0;
  --bg-sunken:     #EFEDE9;
  --surface:       #FFFFFF;
  --surface-soft:  #F7F5F2;
  --surface-chip:  #F0EEEA;

  /* --- ink -------------------------------------------------------------- */
  --ink:           #1C2433;
  --ink-2:         #4A5567;
  --ink-3:         #7C8697;
  --ink-4:         #A8B0BC;
  --hairline:      #E7E3DD;
  --hairline-soft: #F0ECE6;

  /* --- the one accent --------------------------------------------------- */
  --accent:        #1C2433;
  --accent-hover:  #2A3547;
  --accent-soft:   #E8EAEE;
  --accent-ring:   rgba(28, 36, 51, .16);

  /* --- semantics (never decorative) ------------------------------------- */
  --danger:        #B4322C;
  --danger-soft:   #FBECEA;
  --positive:      #2F7D5B;
  --positive-soft: #EAF3EE;
  --warn:          #9A6B1E;
  --warn-soft:     #FBF2E2;
  --info-soft:     #ECEFF4;

  /* --- chart palette: five muted hues, no more --------------------------- */
  --c1: #2E3A53;
  --c2: #5B7B92;
  --c3: #8FA6A0;
  --c4: #C2A882;
  --c5: #A8807A;

  /* --- form ------------------------------------------------------------- */
  --radius-card:   22px;
  --radius-inner:  14px;
  --radius-pill:   999px;
  --pad-card:      28px;
  --shadow-card:   0 1px 2px rgba(28,36,51,.04), 0 8px 28px rgba(28,36,51,.06);
  --shadow-raise:  0 2px 6px rgba(28,36,51,.06), 0 18px 44px rgba(28,36,51,.10);
  --shadow-pop:    0 12px 40px rgba(28,36,51,.16);

  --sidebar-w:     236px;
  --font-ui:       "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display:  "Space Grotesk", "Manrope", -apple-system, sans-serif;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -.015em; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p  { margin: 0 0 12px; }
a  { color: var(--ink); text-decoration-color: var(--ink-4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink-2); }
svg.ico { flex: none; display: block; }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 20px 0; }

/* Money and every other figure uses tabular numerals so columns line up. */
.num, td.num, th.num, .stat-value, .money, input[type="number"], .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===========================================================================
   Shell: icon sidebar + main column (+ optional right rail)
   =========================================================================== */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  padding: 26px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sidebar__brand {
  display: flex; align-items: center; gap: 11px;
  padding: 0 12px; min-height: 38px; text-decoration: none; color: var(--ink);
}
/* An uploaded logo is whatever shape the owner uploaded, so it is bounded in
   both directions rather than trusted to be the right proportions. */
.sidebar__brand img { height: 31px; width: auto; max-width: 168px; object-fit: contain; flex: none; }

.brand-preview { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand-preview__frame {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; min-height: 62px;
  border: 1px dashed var(--hairline); border-radius: var(--radius-inner);
  background: var(--surface-soft);
}
.brand-preview__frame img { height: 31px; width: auto; max-width: 168px; object-fit: contain; }
.brand-preview__frame .wordmark {
  font-family: var(--font-display); font-weight: 500; font-size: 16px;
  letter-spacing: .19em; text-transform: uppercase; line-height: 1;
}
.brand-preview__note { font-size: 12.5px; color: var(--ink-3); }
.sidebar__brand .wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1;
}
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__section {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  padding: 16px 12px 6px;
}
.navlink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.navlink:hover { background: rgba(28,36,51,.045); color: var(--ink); }
.navlink.is-active {
  color: var(--ink);
  border-color: rgba(28,36,51,.18);
  background: transparent;
  font-weight: 600;
}
.navlink__badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 19px;
  height: 19px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  padding: 0 5px;
}
.sidebar__foot { margin-top: auto; padding-top: 14px; }

.main { flex: 1; min-width: 0; padding: 20px 26px 56px 6px; }
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 4px 20px;
}
.topbar__title { flex: 1; min-width: 0; }
.topbar__title h1 { font-size: 24px; }
.topbar__sub { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.topbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.avatar {
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-weight: 600; font-size: 13px; text-decoration: none;
  font-family: var(--font-display);
}

.layout-2col { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; align-items: start; }
/* The rail follows the page, but a rail taller than the window used to pin
   its top and hang its bottom below the fold: the button at the end of a long
   form could only be reached by scrolling the whole page past it. Capped to
   the window and scrolled inside itself instead. The padding is room for the
   cards' shadows, which the scroll box would otherwise clip. */
.rail {
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 3px 5px; margin: -3px -5px;
  scrollbar-width: thin;
}

/* ===========================================================================
   Cards — floating white panels, never nested more than one level
   =========================================================================== */
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
}
.card--flush { padding: 0; overflow: hidden; }
.card--sunken { background: var(--surface-soft); box-shadow: none; }
.card__head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.card__head h2, .card__head h3 { flex: 1; min-width: 0; }
.card__head--padded { padding: 24px 26px 0; margin-bottom: 14px; }
.card__note { color: var(--ink-3); font-size: 12.5px; margin-top: -6px; margin-bottom: 16px; }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row--tight { gap: 8px; }
.spacer { flex: 1; }

/* --- stat blocks: numbers as type, never inside a canvas ------------------ */
.stat__label {
  font-size: 12px; color: var(--ink-3); font-weight: 500;
  letter-spacing: .01em; margin-bottom: 8px;
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.stat-value--sm { font-size: 22px; }
.stat-value--lg { font-size: 38px; }
.stat__foot { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.delta { font-weight: 600; font-size: 12.5px; }
.delta--up { color: var(--positive); }
.delta--down { color: var(--danger); }
.delta--flat { color: var(--ink-3); }

/* --- soft rounded-square icon chip ---------------------------------------- */
.ichip {
  width: 42px; height: 42px; flex: none;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
}
.ichip--soft { background: var(--surface-chip); color: var(--ink-2); }
.ichip--sm { width: 34px; height: 34px; border-radius: 11px; }
.ichip--danger { background: var(--danger-soft); color: var(--danger); }
.ichip--warn { background: var(--warn-soft); color: var(--warn); }
.ichip--good { background: var(--positive-soft); color: var(--positive); }

/* ===========================================================================
   Buttons — pill shaped
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.btn:hover { border-color: var(--ink-4); }
.btn:active { transform: translateY(.5px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: rgba(28,36,51,.05); border-color: transparent; color: var(--ink); }
.btn--danger { background: var(--surface); border-color: rgba(180,50,44,.3); color: var(--danger); }
.btn--danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn--danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger-solid:hover { background: #9C2B26; }
.btn--sm { padding: 6px 13px; font-size: 12.5px; }
.btn--lg { padding: 12px 24px; font-size: 15px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ===========================================================================
   Forms — pill inputs and selects
   =========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field--inline { flex-direction: row; align-items: center; gap: 10px; }
label, .label {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.hint { font-size: 12px; color: var(--ink-3); }
.hint--danger { color: var(--danger); }

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], select, textarea {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  width: 100%;
  transition: border-color .14s ease, box-shadow .14s ease;
  appearance: none;
}
textarea { border-radius: var(--radius-inner); min-height: 96px; resize: vertical; line-height: 1.55; }
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234A5567' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 38px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
input[disabled], select[disabled], textarea[disabled] { background: var(--surface-soft); color: var(--ink-3); }
input::placeholder, textarea::placeholder { color: var(--ink-4); }

.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-weight: 500; font-size: 13.5px; }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 17px; height: 17px; flex: none; margin: 2px 0 0;
  accent-color: var(--accent); cursor: pointer;
}

.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__track {
  width: 40px; height: 23px; border-radius: var(--radius-pill);
  background: var(--ink-4); position: relative; transition: background .16s ease; flex: none;
}
.toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  transition: transform .16s ease;
}
.toggle input:checked + .toggle__track { background: var(--accent); }
.toggle input:checked + .toggle__track::after { transform: translateX(17px); }
.toggle input:focus-visible + .toggle__track { box-shadow: 0 0 0 3px var(--accent-ring); }

.search-wrap { position: relative; flex: 1; min-width: 180px; }
.search-wrap .ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.search-wrap input { padding-left: 42px; }

.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 18px;
}
.filters select, .filters input { width: auto; min-width: 130px; }

.order-lines { min-width: 260px; }
/* The restock line carries its reasoning; squeezed to a column's width it
   becomes a tower of three-word lines. It gets room and the numbers hold. */
.restock-product { min-width: 340px; max-width: 520px; }
.restock-product .cell-sub { line-height: 1.5; }
table.tbl td.num { white-space: nowrap; }
.order-line { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; line-height: 1.5; }
.order-line + .order-line { margin-top: 2px; }
.order-line__qty { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.order-line__name { font-weight: 500; }

.period { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.period__range { display: inline-flex; gap: 8px; align-items: center; }
.period__range input[type="date"] { width: auto; min-width: 146px; }
.period__sep { color: var(--ink-3); font-size: 12.5px; }

/* ===========================================================================
   Tables — hairline dividers, no boxes
   =========================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left; font-weight: 600; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 14px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--hairline);
}
table.tbl td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle;
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover td { background: var(--surface-soft); }
table.tbl th.num, table.tbl td.num { text-align: right; }
table.tbl th:first-child, table.tbl td:first-child { padding-left: 26px; }
table.tbl th:last-child, table.tbl td:last-child { padding-right: 26px; }
table.tbl--dense td { padding: 9px 14px; }
table.tbl--roomy td { padding: 16px 14px; }
.tbl tr.is-void td { color: var(--ink-4); }
.tbl tr.is-void td .primary-cell { text-decoration: line-through; }
tr.row-link { cursor: pointer; }
.cell-title { font-weight: 600; }
.cell-sub { color: var(--ink-3); font-size: 12.5px; }
.tfoot-total td { font-weight: 700; border-top: 1px solid var(--hairline); border-bottom: 0; }

/* ===========================================================================
   Chips, badges, banners
   =========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--surface-chip); color: var(--ink-2);
}
.chip--good { background: var(--positive-soft); color: var(--positive); }
.chip--bad  { background: var(--danger-soft);  color: var(--danger); }
.chip--warn { background: var(--warn-soft);    color: var(--warn); }
.chip--info { background: var(--info-soft);    color: var(--ink-2); }
.chip--accent { background: var(--accent); color: #fff; }

.banner {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 20px; border-radius: var(--radius-inner);
  background: var(--info-soft); color: var(--ink-2);
  font-size: 13.5px; margin-bottom: 18px;
}
.banner--warn { background: var(--warn-soft); color: #6E4A12; }
.banner--bad  { background: var(--danger-soft); color: #8A2621; }
.banner--good { background: var(--positive-soft); color: #245E45; }
.banner strong { color: inherit; }
.banner__body { flex: 1; min-width: 0; }
.banner ul { margin: 6px 0 0; padding-left: 18px; }
.banner li { margin-bottom: 3px; }
.banner__actions { flex-shrink: 0; align-self: flex-start; }
.banner--warn .btn--ghost, .banner--bad .btn--ghost { color: inherit; }
.banner-hidden { font-size: 12.5px; color: var(--ink-3); margin: 0 0 18px; }

.flash-stack { position: fixed; top: 18px; right: 18px; z-index: 60; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.flash {
  background: var(--surface); border-radius: var(--radius-inner);
  box-shadow: var(--shadow-pop); padding: 14px 18px;
  display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px;
  border-left: 3px solid var(--ink-4);
}
.flash--success { border-left-color: var(--positive); }
.flash--error   { border-left-color: var(--danger); }
.flash--warn    { border-left-color: var(--warn); }
.flash__close { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--ink-3); padding: 0; }

/* ===========================================================================
   Empty + loading states — designed, not blank
   =========================================================================== */
.empty { text-align: center; padding: 52px 24px; color: var(--ink-3); }
.empty__icon {
  width: 54px; height: 54px; border-radius: 17px; margin: 0 auto 16px;
  background: var(--surface-chip); color: var(--ink-4);
  display: grid; place-items: center;
}
.empty h3 { color: var(--ink); margin-bottom: 6px; }
.empty p { max-width: 400px; margin: 0 auto 18px; font-size: 13.5px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-chip) 0%, #F7F5F2 50%, var(--surface-chip) 100%);
  background-size: 200% 100%;
  animation: sk 1.3s ease-in-out infinite;
  border-radius: 8px; height: 14px;
}
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--accent-soft); border-top-color: var(--accent);
  animation: spin .7s linear infinite; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.is-busy { pointer-events: none; opacity: .6; }

/* ===========================================================================
   Charts
   =========================================================================== */
.chart-box { position: relative; height: 250px; }
.chart-box--sm { height: 170px; }
.chart-box--lg { height: 320px; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 14px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }

.meter { height: 6px; border-radius: var(--radius-pill); background: var(--surface-chip); overflow: hidden; }
.meter__fill { height: 100%; background: var(--accent); border-radius: inherit; }
.meter__fill--warn { background: var(--warn); }
.meter__fill--bad { background: var(--danger); }
.meter__fill--good { background: var(--positive); }

/* ===========================================================================
   Order entry line items
   =========================================================================== */
.lineitems { display: flex; flex-direction: column; gap: 10px; }
.lineitem {
  display: grid;
  grid-template-columns: minmax(0,1fr) 78px 116px auto;
  gap: 10px; align-items: center;
  padding: 12px 14px;
  background: var(--surface-soft);
  border-radius: var(--radius-inner);
}
.lineitem__tags { display: flex; gap: 6px; align-items: center; }
.tagbtn {
  border: 1px solid var(--hairline); background: var(--surface);
  border-radius: var(--radius-pill); padding: 4px 11px;
  font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink-3);
  font-family: var(--font-ui);
}
.tagbtn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tagbtn[disabled] { opacity: .35; cursor: not-allowed; }

.combo { position: relative; }
.combo__menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border-radius: var(--radius-inner);
  box-shadow: var(--shadow-pop); max-height: 280px; overflow-y: auto; padding: 6px;
}
.combo__opt {
  padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 13.5px;
  display: flex; gap: 10px; align-items: center;
}
.combo__opt:hover, .combo__opt.is-cursor { background: var(--surface-soft); }
.combo__opt .cell-sub { margin-left: auto; }
.combo__right { margin-left: auto; display: inline-flex; gap: 10px; align-items: baseline; }
.combo__right .cell-sub { margin-left: 0; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   Misc
   =========================================================================== */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; text-align: right; font-weight: 600; }

.stepper { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
.stepper__item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  background: var(--surface-chip);
}
.stepper__item.is-current { background: var(--accent); color: #fff; }
.stepper__item.is-done { background: var(--positive-soft); color: var(--positive); }

.list-rows { display: flex; flex-direction: column; }
.list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline-soft);
  min-height: 48px; text-decoration: none; color: inherit;
}
.list-row:last-child { border-bottom: 0; }
.list-row__body { flex: 1; min-width: 0; }
.list-row__title { font-weight: 600; }
.list-row__sub { color: var(--ink-3); font-size: 12.5px; }
.list-row__value { font-weight: 600; text-align: right; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.text-muted { color: var(--ink-3); }
.text-danger { color: var(--danger); }
.text-positive { color: var(--positive); }
.text-warn { color: var(--warn); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }

/* --- auth / wizard shell -------------------------------------------------- */
.bare {
  min-height: 100vh; display: grid; place-items: center;
  padding: 32px 20px; background: var(--bg);
}
.bare__card { width: 100%; max-width: 420px; }
.bare__card--wide { max-width: 720px; }
.bare__brand { text-align: center; margin-bottom: 28px; }
.bare__brand img { height: 46px; width: auto; margin-bottom: 10px; }
.bare__brand .wordmark {
  font-family: var(--font-display); font-weight: 500;
  font-size: 17px; letter-spacing: .24em; text-transform: uppercase;
}

.qr-box {
  background: #fff; border-radius: var(--radius-inner); padding: 14px;
  display: inline-block; border: 1px solid var(--hairline);
}
.code-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; letter-spacing: .04em;
}
.code-grid span {
  background: var(--surface-soft); padding: 9px 12px;
  border-radius: 10px; text-align: center;
}

/* --- modal ---------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(28,36,51,.34);
  display: grid; place-items: center; padding: 20px; z-index: 70;
}
.modal {
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop); padding: 28px;
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
}
[hidden] { display: none !important; }

/* --- markdown (SOP pages) -------------------------------------------------- */
.md h2 { margin: 26px 0 10px; font-size: 18px; }
.md h3 { margin: 20px 0 8px; font-size: 15px; }
.md ul, .md ol { margin: 0 0 14px; padding-left: 22px; }
.md li { margin-bottom: 5px; }
.md code { background: var(--surface-soft); padding: 2px 6px; border-radius: 6px; font-size: 12.5px; }
.md blockquote {
  margin: 0 0 14px; padding: 10px 16px;
  border-left: 3px solid var(--hairline); color: var(--ink-2);
}

/* --- chat ------------------------------------------------------------------ */
.chat { display: flex; flex-direction: column; height: 100%; min-height: 420px; }
.chat__log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.msg { display: flex; gap: 11px; align-items: flex-start; }
.msg__bubble {
  border-radius: 16px; padding: 11px 15px; font-size: 13.5px;
  max-width: 88%; line-height: 1.55;
}
.msg--user { flex-direction: row-reverse; }
.msg--user .msg__bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg--bot .msg__bubble { background: var(--surface-soft); border-bottom-left-radius: 5px; }
.chat__form { display: flex; gap: 10px; margin-top: 16px; align-items: flex-end; }
.chat__form textarea { min-height: 44px; max-height: 140px; border-radius: 22px; padding: 11px 18px; }
.chat__compose { border-top: 1px solid var(--hairline); padding: 18px 24px 20px; }
.chat__compose .chat__form { margin-top: 0; }
.chat__log { padding: 20px 24px; max-height: 58vh; }
.chat__log--static { max-height: none; overflow: visible; }
.msg .cell-sub { margin-top: 4px; }

/* --- procedures ------------------------------------------------------------ */
.md p { margin: 0 0 14px; line-height: 1.65; }
.md p:last-child { margin-bottom: 0; }
.md h2:first-child, .md h3:first-child { margin-top: 0; }
.md hr { border: 0; border-top: 1px solid var(--hairline); margin: 22px 0; }
.md table { margin-bottom: 16px; }
.sop-code {
  background: var(--surface-soft); border-radius: 12px; padding: 14px 16px;
  overflow-x: auto; font-size: 12.5px; margin: 0 0 16px;
}
.sop-code code { background: none; padding: 0; }
.sop-note {
  margin: 0 0 14px; padding: 12px 16px; border-radius: 12px;
  background: var(--surface-soft); border-left: 3px solid var(--accent); color: var(--ink-2);
}

/* --- range inputs, for the what-if panel ------------------------------------ */
input[type="range"] {
  flex: 1; appearance: none; height: 4px; border-radius: 2px;
  background: var(--hairline); outline: none; padding: 0; border: 0;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 3px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 3px solid var(--surface);
}
output.num { min-width: 52px; text-align: right; font-size: 13px; color: var(--ink-2); }

/* --- demo banner ------------------------------------------------------------ */
.demo-bar {
  position: sticky; top: 0; z-index: 60;
  background: var(--warn-soft); color: #6E4A12;
  padding: 9px 20px; font-size: 12.5px; text-align: center;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.demo-bar strong { font-weight: 600; }

/* --- splitting a bank line -------------------------------------------------- */
.split-panel { margin-top: 16px; }
.split-row {
  display: grid; gap: 8px; margin-bottom: 8px;
  grid-template-columns: 130px 1fr 140px 1fr;
}
.split-row--asset {
  grid-template-columns: 1fr 150px 140px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 780px) {
  .split-row, .split-row--asset { grid-template-columns: 1fr; }
}

/* --- small shared bits ----------------------------------------------------- */
.card--link { display: block; color: inherit; text-decoration: none; transition: border-color .15s ease; }
.card--link:hover { border-color: var(--accent); }
.row--muted { opacity: .55; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.inline { display: inline; }

/* ===========================================================================
   Responsive — the sidebar collapses and order entry stays good on a phone
   =========================================================================== */
.sidebar__toggle { display: none; }

@media (max-width: 1180px) {
  .layout-2col { grid-template-columns: 1fr; }
  /* One column: the rail is just more page, and scrolls with it. */
  .rail { position: static; max-height: none; overflow: visible; padding: 0; margin: 0; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  :root { --pad-card: 22px; --sidebar-w: 210px; }
}

@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 80;
    width: 268px; background: var(--bg);
    box-shadow: var(--shadow-pop);
    transform: translateX(-100%);
    transition: transform .2s ease;
    height: 100dvh;
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(28,36,51,.34); z-index: 75;
  }
  .sidebar__toggle { display: inline-flex; }
  .main { padding: 14px 16px 44px; }
  .topbar { padding-bottom: 16px; gap: 10px; }
  .topbar__title h1 { font-size: 20px; }
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
  :root { --pad-card: 20px; --radius-card: 18px; }
  table.tbl th:first-child, table.tbl td:first-child { padding-left: 16px; }
  table.tbl th:last-child, table.tbl td:last-child { padding-right: 16px; }

  /* Sales entry must stay genuinely usable one-handed. */
  .lineitem { grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; }
  .lineitem__product { grid-column: 1 / -1; }
  .lineitem__tags { grid-column: 1 / -1; justify-content: flex-start; }
  .btn { padding: 11px 18px; }
  .btn--sm { padding: 8px 14px; }
  input[type="text"], input[type="password"], input[type="email"], input[type="number"],
  input[type="date"], input[type="search"], input[type="tel"], select, textarea {
    font-size: 16px;  /* stops iOS zooming on focus */
    padding: 11px 16px;
  }
  .flash-stack { left: 12px; right: 12px; max-width: none; }
}

@media print {
  .sidebar, .topbar__actions, .btn, .filters, .flash-stack { display: none !important; }
  /* Paper has no scrollbars: a capped rail would print only its first screen. */
  .rail { position: static; max-height: none; overflow: visible; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid var(--hairline); break-inside: avoid; }
  .main { padding: 0; }
}

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

/* The bulk action bar: pinned to the bottom while lines are ticked. */
.bulk-bar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 40px);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 10px 18px;
  box-shadow: var(--shadow-pop); z-index: 40;
}
.bulk-bar select, .bulk-bar input[type="text"] { min-width: 150px; }

/* ---- the review queue row -------------------------------------------------
   Two lines: what happened, then what to do about it. The controls used to
   share a seven-column table row, which squeezed the category select down to
   about one character — wide enough to show "C" and nothing else, so there
   was no telling COGS from CapEx without opening the dropdown. */
.qrow > td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.qrow__check { width: 30px; padding-top: 16px !important; }

.qrow__top {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.qrow__date { color: var(--ink-3); font-size: 12.5px; min-width: 82px; }
.qrow__desc {
  font-weight: 600; flex: 1 1 320px; min-width: 0;
  overflow-wrap: anywhere;
}
.qrow__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.qrow__amount { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qrow__why { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; }

.qrow__actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
/* The whole point of the change: room to read the selected value. */
.qrow__actions .qrow__cat { min-width: 210px; width: auto; }
.qrow__actions .qrow__sub { min-width: 200px; width: auto; flex: 0 1 240px; }
.qrow__remember { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.qrow__spacer { flex: 1 1 auto; }

@media (max-width: 720px) {
  .qrow__amount { margin-left: 0; }
  .qrow__actions .qrow__cat,
  .qrow__actions .qrow__sub { flex: 1 1 100%; min-width: 0; }
}


/* ---- filing a debit as something other than a cost ----------------------- */
.qrow__file {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--hairline);
  font-size: 12.5px;
}
.qrow__file-lead { color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.qrow__file-form { display: inline-flex; align-items: center; gap: 6px; }
.qrow__owner { min-width: 130px; }

/* ---- an order paid in several charges ------------------------------------ */
.group-suggest {
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 8px;
}
.group-suggest summary { cursor: pointer; font-size: 13.5px; }
.group-form { margin-top: 12px; }
.group-part {
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px;
}
.group-part > select { min-width: 110px; }
.group-part > input[type="text"] { min-width: 180px; }
.group-part > input[type="number"] { min-width: 120px; }
.group-asset {
  display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 100%;
  padding: 8px 10px; background: var(--surface-2, rgba(0,0,0,.03)); border-radius: 8px;
}
.group-asset input[type="text"] { min-width: 170px; }


/* ---- bulk order entry ----------------------------------------------------
   One card per sale: the order number and tags on a header strip, a hairline,
   then the inputs with their own small labels. Cards sit apart so a full
   evening stays countable, and a joined row hangs indented under its parent
   wearing the same number. */
.bulkrows { display: flex; flex-direction: column; gap: 14px; }

.bulkrow {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 0;
  background: var(--surface);
  overflow: visible;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bulkrow:focus-within {
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 7%, transparent);
}
.bulkrow.is-joined {
  margin-top: -8px;
  margin-left: 34px;
  border-style: dashed;
}

.bulkrow__top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-soft);
  border-radius: 13px 13px 0 0;
}
.bulkrow__spacer { flex: 1 1 auto; }
.bulkrow__no {
  display: inline-flex;
  justify-content: center;
  min-width: 40px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bulkrow__no.is-joined {
  background: transparent;
  color: var(--ink-3);
  border: 1px dashed var(--hairline);
  font-weight: 600;
}
.bulkrow__joinlabel { font-size: 11.5px; color: var(--ink-3); }

.bulkrow__fields {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 14px 14px 4px;
}
.bulkrow > [data-meta] { padding: 0 14px 12px; }
.bulkrow > [data-meta]:empty { padding-bottom: 14px; }

.bfield { display: flex; flex-direction: column; gap: 5px; }
.bfield > label {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.bfield--grow { flex: 1 1 auto; min-width: 0; }
.bfield--qty { width: 84px; }
.bfield--price { width: 148px; }

.bulkrow__details {
  margin: 0 14px 14px;
  padding: 12px;
  background: var(--surface-soft);
  border-radius: 10px;
}
.bulkrow__join { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 10px; }
.bulkrow__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 8px;
}
.bulkrow__grid.is-muted { opacity: .45; }

/* The More… button wears a dot once the row carries any detail. */
[data-details-btn].has-details { position: relative; }
[data-details-btn].has-details::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent, currentColor);
}

@media (max-width: 900px) {
  .bulkrow.is-joined { margin-left: 16px; }
  .bulkrow__fields { flex-wrap: wrap; }
  .bfield--grow { flex-basis: 100%; }
  .bfield--qty { width: 40%; }
  .bfield--price { flex: 1 1 auto; }
  .bulkrow__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ---- inline stock adjust (owner only) ------------------------------------ */
.adjust { position: relative; margin-top: 2px; }
.adjust > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  color: var(--ink-3);
  text-decoration: underline dotted;
}
.adjust > summary::-webkit-details-marker { display: none; }
.adjust[open] > summary { color: var(--ink); }
.adjust__form {
  position: absolute;
  right: -4px;
  top: calc(100% + 6px);
  z-index: 60;
  display: flex;
  gap: 6px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
}
/* A caret tying the popover to its "adjust" link, so it reads as attached
   rather than floating over whichever row is below. */
.adjust__form::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 16px;
  width: 8px;
  height: 8px;
  background: var(--surface);
  border-left: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  transform: rotate(45deg);
}
.adjust__form input[type="number"] { width: 84px; }
.linkish { background: none; border: 0; padding: 0; color: var(--ink-3); text-decoration: underline dotted; cursor: pointer; font: inherit; font-size: inherit; }
.linkish:hover { color: var(--ink); }