/* 鮮倉 後台 — Theme B「現代柔和 / 有機市集」(tokens 取自 design-system/colors_and_type.css) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  --green-100:#E6EFD9; --green-500:#4F7A3A; --green-600:#426A30;
  --amber-50:#FBEAD6; --amber-400:#E8742C;
  --sand-0:#FFFFFF; --sand-25:#FCFAF4; --sand-50:#F7F3EA; --sand-100:#F4EFE4;
  --sand-200:#F1EBDD; --sand-300:#EBE3D3; --sand-400:#D9CFBB;
  --ink-900:#2C2720; --ink-600:#6B6357; --ink-500:#8B8170;
  --info:#2F6DB0; --info-soft:#DBEAFE; --success:#3C7A4E; --success-soft:#DCEFE0;
  --warning:#B07A14; --warning-soft:#FFF3D6; --danger:#C44536; --danger-soft:#FBE0DB;
  --line-green:#06C755;
  --bg:var(--sand-50); --surface:var(--sand-0); --sidebar:var(--sand-200);
  --fg:var(--ink-900); --fg-2:var(--ink-600); --fg-muted:var(--ink-500);
  --primary:var(--green-500); --primary-hover:var(--green-600); --primary-soft:var(--green-100);
  --accent:var(--amber-400); --border:var(--sand-300); --border-strong:var(--sand-400);
  --font-sans:'Noto Sans TC',-apple-system,'PingFang TC','Microsoft JhengHei',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --r-md:13px; --r-lg:18px; --r-pill:999px;
  --shadow-sm:0 2px 8px rgba(120,90,40,.06); --shadow-md:0 4px 16px rgba(120,90,40,.06);
  --shadow-focus:0 0 0 3px rgba(79,122,58,.18);
}

* { box-sizing:border-box; }
body { margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--fg); font-size:14px; }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
button { font-family:inherit; cursor:pointer; }
a { color:var(--primary); }

/* ---- Login ---- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); padding:32px; width:100%; max-width:380px; }
.brand { display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.brand .logo { width:38px; height:38px; border-radius:11px; background:var(--primary); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:18px; }
.brand h1 { font-size:20px; margin:0; font-weight:800; }
.brand small { color:var(--fg-muted); display:block; font-weight:500; }

label { display:block; font-weight:600; font-size:13px; margin:14px 0 6px; }
input, select { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--sand-100); font-family:inherit; font-size:14px; color:var(--fg); }
input:focus, select:focus { outline:none; border-color:var(--primary); box-shadow:var(--shadow-focus); background:#fff; }

.btn { padding:10px 18px; border-radius:var(--r-pill); border:1px solid transparent; font-weight:600; font-size:14px; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); }
.btn-primary:active { transform:scale(.98); }
.btn-ghost { background:transparent; border-color:var(--border); color:var(--fg); }
.btn-ghost:hover { background:var(--sand-100); }
.btn-sm { padding:5px 12px; font-size:13px; }
.btn-block { width:100%; margin-top:20px; }
.err { color:var(--danger); font-size:13px; margin-top:12px; min-height:18px; }

/* ---- App shell ---- */
.app { display:grid; grid-template-columns:232px 1fr; min-height:100vh; }
.sidebar { background:var(--sidebar); border-right:1px solid var(--border); padding:18px 14px; }
.sidebar .brand { padding:0 8px 18px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-md);
  color:var(--fg-2); font-weight:600; border:none; background:none; width:100%; text-align:left; font-size:14px; }
.nav-item:hover { background:var(--sand-100); }
.nav-item.active { background:var(--primary-soft); color:var(--primary); }
.topbar { height:64px; background:var(--sand-25); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.topbar h2 { margin:0; font-size:18px; font-weight:800; }
.who { color:var(--fg-2); font-size:13px; }
.who b { color:var(--fg); }
.main { padding:24px 28px; }

/* ---- Cards / KPI ---- */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.kpi { padding:18px; }
.kpi .label { color:var(--fg-muted); font-weight:600; font-size:13px; }
.kpi .value { font-family:var(--font-mono); font-size:28px; font-weight:700; margin-top:6px; }
.kpi.warn .value { color:var(--warning); }
.kpi.accent .value { color:var(--accent); }

.panel { padding:0; margin-bottom:20px; overflow:hidden; }
.panel-head { padding:16px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.panel-head h3 { margin:0; font-size:15px; font-weight:800; }

table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:12px 18px; border-bottom:1px solid var(--border); font-size:13px; }
th { color:var(--fg-muted); font-weight:600; background:var(--sand-25); }
tr:last-child td { border-bottom:none; }
.right { text-align:right; }

.pill { display:inline-block; padding:3px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:600; }
.s-待確認 { background:var(--warning-soft); color:var(--warning); }
.s-備貨中 { background:var(--info-soft); color:var(--info); }
.s-已出貨 { background:var(--primary-soft); color:var(--primary); }
.s-已完成 { background:var(--success-soft); color:var(--success); }
.s-已取消 { background:var(--danger-soft); color:var(--danger); }
.tag { background:var(--sand-100); color:var(--fg-2); }
.cold { background:var(--info-soft); color:var(--info); }
.up { color:var(--accent); font-weight:600; }

.toolbar { display:flex; gap:10px; margin-bottom:16px; align-items:center; }
.toolbar select, .toolbar input { width:auto; }
.muted { color:var(--fg-muted); }
.hidden { display:none; }
@media (max-width:860px){ .app{grid-template-columns:1fr;} .sidebar{display:none;} .kpis{grid-template-columns:repeat(2,1fr);} }