/* Jiaherb back office — light theme (Jiaherb's brand is light). Tokens first; pages use only these. */
:root {
  --jh-page: #FAFAF7;
  --jh-surface: #FFFFFF;
  --jh-line: #E6E4DC;
  --jh-line-strong: #D5D2C6;
  --jh-text: #33372F;
  --jh-dim: #7A7F74;
  --jh-accent: #0B5740;        /* Jiaherb logo green: buttons, links, current nav — small areas only */
  --jh-accent-hover: #0E6B4F;
  --jh-accent-soft: #E6EFEA;
  --jh-error: #C0503F;
  --jh-error-soft: #FBE8E6;
  --jh-ok-bg: #E6F2E8;   --jh-ok-fg: #2F7A45;
  --jh-info-bg: #EFF5E3; --jh-info-fg: #5C7F2E;
  --jh-warn-bg: #FCEFE0; --jh-warn-fg: #A85F1A;
  --jh-stop-bg: #FBE8E6; --jh-stop-fg: #B03A2E;
  --jh-radius: 6px;
  --jh-ctl-h: 34px;
  --jh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --jh-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--jh-page); color: var(--jh-text); font: 14px/1.45 var(--jh-font); }
a { color: var(--jh-accent); }
h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.jh-dim { color: var(--jh-dim); }
.jh-mono { font-family: var(--jh-mono); font-size: 12.5px; }
.jh-error { color: var(--jh-error); margin: 8px 0; }

/* Brand */
.jh-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--jh-text); text-decoration: none; }
.jh-brand__mark { width: 28px; height: 28px; display: block; }

/* Top bar */
.jh-top { display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 56px; background: var(--jh-surface);
  border-bottom: 1px solid var(--jh-line); position: sticky; top: 0; z-index: 10; }
.jh-nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.jh-nav a { padding: 6px 12px; border-radius: var(--jh-radius); color: var(--jh-dim); text-decoration: none; white-space: nowrap; }
.jh-nav a:hover { background: var(--jh-page); color: var(--jh-text); }
.jh-nav a.is-current { background: var(--jh-accent-soft); color: var(--jh-accent); font-weight: 600; }
.jh-top__me { display: flex; align-items: center; gap: 12px; }
.jh-top__me form { margin: 0; }
.jh-main { padding: 24px; max-width: 1400px; margin: 0 auto; }

/* Controls */
.jh-ctl { height: var(--jh-ctl-h); padding: 0 10px; border: 1px solid var(--jh-line-strong); border-radius: var(--jh-radius);
  background: var(--jh-surface); color: var(--jh-text); font: inherit; min-width: 0; }
.jh-ctl:focus { outline: 2px solid var(--jh-accent-soft); border-color: var(--jh-accent); }
textarea.jh-ctl { height: auto; padding: 8px 10px; min-height: 80px; resize: vertical; width: 100%; }
select.jh-ctl { padding-right: 28px; }
.jh-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.jh-field > span { font-size: 12px; color: var(--jh-dim); }
.jh-check { display: inline-flex; align-items: center; gap: 6px; color: var(--jh-dim); }

.jh-btn { height: var(--jh-ctl-h); padding: 0 14px; border-radius: var(--jh-radius); border: 1px solid var(--jh-line-strong);
  background: var(--jh-surface); color: var(--jh-text); font: inherit; cursor: pointer; white-space: nowrap; }
.jh-btn:hover { border-color: var(--jh-dim); }
.jh-btn:disabled { opacity: .5; cursor: default; }
.jh-btn--primary { background: var(--jh-accent); border-color: var(--jh-accent); color: #fff; font-weight: 600; }
.jh-btn--primary:hover { background: var(--jh-accent-hover); border-color: var(--jh-accent-hover); }
.jh-btn--danger { color: var(--jh-error); border-color: #EBC3BC; }
.jh-btn--ghost { border-color: transparent; background: transparent; color: var(--jh-dim); }
.jh-btn--block { width: 100%; }

/* Toolbar + cards */
.jh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.jh-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.jh-toolbar .jh-ctl[type=search] { width: 300px; }
.jh-card { background: var(--jh-surface); border: 1px solid var(--jh-line); border-radius: 8px; padding: 16px; margin-bottom: 16px; }

/* Table */
.jh-table-wrap { background: var(--jh-surface); border: 1px solid var(--jh-line); border-radius: 8px; overflow: auto; }
.jh-table { width: 100%; border-collapse: collapse; }
.jh-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--jh-dim); background: #F5F4EF;
  padding: 8px 12px; border-bottom: 1px solid var(--jh-line); position: sticky; top: 0; white-space: nowrap; }
.jh-table td { padding: 8px 12px; border-bottom: 1px solid var(--jh-line); vertical-align: top; }
.jh-table tr:last-child td { border-bottom: 0; }
.jh-table tbody tr.is-clickable { cursor: pointer; }
.jh-table tbody tr.is-clickable:hover td { background: #F7F9F4; }
.jh-table tr.is-inactive td { color: var(--jh-dim); }
.jh-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.jh-empty { padding: 32px; text-align: center; color: var(--jh-dim); }
.jh-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 0; color: var(--jh-dim); }

/* Sheet-like price table: the whole row fits on one screen; grouped tier headers.
   The whole <thead> sticks (not each row with its own offset — that left a gap and overlapped the first row);
   the first two columns stick to the left when a narrow screen has to scroll. Headers are centred; so are
   the columns under them, except the product name. */
.jh-main--wide { max-width: none; }
.jh-sheet-wrap { max-height: calc(100vh - 210px); }
.jh-sheet { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.jh-sheet td, .jh-sheet th { background: var(--jh-surface); padding: 6px 8px; text-align: center; }
.jh-sheet thead { position: sticky; top: 0; z-index: 3; }
.jh-sheet thead th { position: relative; top: auto; background: #F5F4EF; font-size: 11.5px; line-height: 1.25;
  white-space: normal; vertical-align: middle; text-align: center; }
.jh-sheet thead tr:first-child th[colspan] { border-bottom: 1px solid var(--jh-line); }
.jh-sheet th.jh-group { color: var(--jh-text); white-space: nowrap; }
.jh-sheet .jh-group, .jh-sheet .jh-group-start, .jh-sheet .jh-sep { border-left: 1px solid var(--jh-line-strong); }
.jh-sheet td { vertical-align: middle; }
.jh-sheet td.num, .jh-sheet th.num { text-align: center; }   /* under their centred headers (beats .jh-table .num) */
.jh-sheet td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.jh-sheet th.num { min-width: 44px; max-width: 70px; }
.jh-sheet td.is-unknown { color: #C4C6BE; }
.jh-sheet td.is-word { color: var(--jh-dim); font-size: 12px; }
.jh-sheet td.is-rule { color: var(--jh-dim); font-style: italic; }
.jh-sheet .jh-badge { font-size: 11px; padding: 1px 6px; }
.jh-sheet .jh-mono { font-size: 12px; }
.jh-sheet .jh-left { text-align: left; }
.jh-stick { position: sticky; z-index: 1; }
.jh-sheet thead th.jh-stick { position: sticky; z-index: 4; }
.jh-stick--0 { left: 0; min-width: 70px; }
.jh-stick--1 { left: 70px; min-width: 170px; max-width: 260px; border-right: 1px solid var(--jh-line-strong); }
.jh-sheet tbody tr.is-clickable:hover td { background: #F7F9F4; }

/* Status badge: soft fill + mid-tone text + icon, never colour alone */
.jh-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px;
  font-weight: 600; white-space: nowrap; background: #F1F0EB; color: var(--jh-dim); }
.jh-badge--ok { background: var(--jh-ok-bg); color: var(--jh-ok-fg); }
.jh-badge--info { background: var(--jh-info-bg); color: var(--jh-info-fg); }
.jh-badge--warn { background: var(--jh-warn-bg); color: var(--jh-warn-fg); }
.jh-badge--stop { background: var(--jh-stop-bg); color: var(--jh-stop-fg); }
.jh-badge--muted { background: #F1F0EB; color: var(--jh-dim); }

/* Side panel (closes on × only) */
.jh-veil { position: fixed; inset: 0; background: rgba(51, 55, 47, .18); z-index: 50; }
.jh-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); background: var(--jh-surface); z-index: 51;
  border-left: 1px solid var(--jh-line); display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.06); }
.jh-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--jh-line); }
.jh-panel__close { width: 32px; height: 32px; border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--jh-dim); cursor: pointer; }
.jh-panel__body { padding: 20px; overflow: auto; flex: 1; }
.jh-panel__foot { padding: 12px 20px; border-top: 1px solid var(--jh-line); display: flex; gap: 8px; justify-content: flex-end; }
.jh-modal { position: fixed; left: 50%; top: 20vh; transform: translateX(-50%); width: min(440px, calc(100vw - 32px));
  background: var(--jh-surface); border-radius: 10px; z-index: 61; padding: 20px; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.jh-modal + .jh-veil, .jh-veil--top { z-index: 60; }
.jh-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.jh-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.jh-pricegrid { border-collapse: collapse; width: 100%; margin-bottom: 8px; }
.jh-pricegrid th, .jh-pricegrid td { padding: 4px 6px; text-align: left; font-size: 12px; }
.jh-pricegrid th { color: var(--jh-dim); font-weight: 600; }
.jh-pricegrid .jh-ctl { width: 100%; height: 30px; }
.jh-pricegrid .jh-ctl.is-bad { border-color: var(--jh-error); background: var(--jh-error-soft); }

/* Toasts */
.jh-toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: min(420px, calc(100vw - 32px)); }
.jh-toast { background: var(--jh-surface); border: 1px solid var(--jh-line); border-left: 4px solid var(--jh-accent);
  border-radius: var(--jh-radius); padding: 10px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.jh-toast--error { border-left-color: var(--jh-error); }

/* Login */
.jh-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.jh-login__card { width: 100%; max-width: 380px; background: var(--jh-surface); border: 1px solid var(--jh-line); border-radius: 12px; padding: 28px; }
.jh-login__card { text-align: left; }
.jh-login__logo { display: block; width: 120px; height: auto; margin: 0 auto 8px; }
.jh-login__card h1 { margin-top: 18px; }
.jh-login__card form { margin-top: 18px; }
.jh-login__card .jh-ctl { width: 100%; }

@media (max-width: 720px) {
  .jh-top { padding: 0 16px; gap: 12px; }
  .jh-top__me .jh-dim { display: none; }
  .jh-main { padding: 16px; }
  .jh-toolbar .jh-ctl[type=search] { width: 100%; }
}