/* style.css — Super-Ops v2 外殼版型（tokens.css 為唯一色彩/字級來源） */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- 版面骨架：側欄 + 主區 ---- */
#root { display: flex; min-height: 100vh; }
.side {
  width: 224px; flex: none;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--sp-4) 0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.main { flex: 1; min-width: 0; padding: var(--sp-6); max-width: 1280px; }

/* ---- 品牌塊 ---- */
.brand {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 0 var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-3);
}
.brand small { display: block; font-family: var(--font-body); color: var(--ink-2); font-size: var(--fs-small); letter-spacing: 0; }

/* ---- 導航 ---- */
.nav-pkg { margin-bottom: var(--sp-2); }
.nav-pkg > .pkg-title {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  color: var(--ink-2); font-size: var(--fs-small); font-weight: 700;
}
.pkg-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.nav-item {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) calc(var(--sp-4) + 16px);
  background: none; border: 0; color: var(--ink);
  font-size: var(--fs-body); font-family: inherit; cursor: pointer;
  min-height: var(--touch-min);
  border-left: 2px solid transparent;
}
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: var(--surface-2); border-left-color: var(--gold); color: var(--gold); font-weight: 500; }
.side-foot { margin-top: auto; padding: var(--sp-3) var(--sp-4) 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); }
.side-foot button { margin-top: var(--sp-2); }

/* ---- 手機 ---- */
.burger { display: none; }
@media (max-width: 860px) {
  #root { display: block; }
  .side {
    position: fixed; z-index: var(--z-modal); height: 100vh;
    transform: translateX(-100%); transition: transform var(--t-normal) var(--ease-out);
  }
  .side.open { transform: translateX(0); }
  .main { padding: var(--sp-4); padding-top: calc(var(--sp-4) + 48px); }
  .burger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: var(--z-sticky);
    width: var(--touch-min); height: var(--touch-min);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-input);
    color: var(--ink); font-size: 1.2rem; cursor: pointer;
  }
  .backdrop {
    position: fixed; inset: 0; z-index: var(--z-backdrop);
    background: rgba(0,0,0,0.55);
  }
}

/* ---- 標題與卡片 ---- */
h1.page-title { font-size: var(--fs-h1); font-weight: 700; margin-bottom: var(--sp-4); text-wrap: balance; }
h2.sec-title { font-size: var(--fs-h2); font-weight: 700; margin: var(--sp-6) 0 var(--sp-3); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.card h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: var(--sp-2); }
.muted { color: var(--ink-2); }
.gold { color: var(--gold); }
.danger { color: var(--danger); }
.ok { color: var(--ok); }

/* ---- KPI 大字 ---- */
.kpi-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.kpi { flex: 1 1 150px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); }
.kpi .label { color: var(--ink-2); font-size: var(--fs-small); }
.kpi .num {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-kpi); font-weight: 600; color: var(--ink-num); line-height: 1.15;
}
.kpi .sub { color: var(--ink-2); font-size: var(--fs-small); }
.kpi.alert { border-color: var(--red); }
.kpi.alert .num { color: var(--red-bright); }

/* ---- 按鈕 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--touch-min); padding: 0 var(--sp-4);
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-input);
  font-size: var(--fs-body); font-family: inherit; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--line); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.btn.primary { background: var(--gold-dim); border-color: var(--gold); color: #fff; font-weight: 500; }
.btn.primary:hover { background: var(--gold); color: #1a1508; }
.btn.warn { border-color: var(--red); color: var(--red-bright); }
.btn.warn:hover { background: var(--red); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- 表單 ---- */
input, select, textarea {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-input);
  min-height: var(--touch-min); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body); font-family: inherit;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: var(--gold); }
input::placeholder { color: var(--ink-2); }
label.fld { display: block; margin-bottom: var(--sp-3); }
label.fld > span { display: block; color: var(--ink-2); font-size: var(--fs-small); margin-bottom: 4px; }
.fld-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.fld-row > label.fld { flex: 1 1 180px; }
input[data-num] { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---- 表格（數據密度高） ---- */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
th, td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
th { background: var(--surface-2); color: var(--ink-2); font-weight: 500; position: sticky; top: 0; }
td.num, th.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
tr:hover td { background: var(--surface-2); }

/* ---- 狀態膠囊 ---- */
.pill {
  display: inline-block; padding: 1px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-small); border: 1px solid var(--line); color: var(--ink-2);
}
.pill.ok { border-color: var(--ok); color: var(--ok); }
.pill.warn { border-color: var(--warn); color: var(--warn); }
.pill.bad { border-color: var(--red-bright); color: var(--red-bright); }

/* ---- 登入閘 ---- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.login-box { width: 100%; max-width: 360px; }
.login-box .brand { border: 0; text-align: center; font-size: 1.4rem; margin-bottom: var(--sp-6); }

/* ---- 警示列表 ---- */
.alert-line { display: flex; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.alert-line:last-child { border-bottom: 0; }

/* ---- toast ---- */
#toast {
  position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--surface-2); border: 1px solid var(--gold); border-radius: var(--r-input);
  padding: var(--sp-2) var(--sp-4); color: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity var(--t-normal) var(--ease-out);
}
#toast.show { opacity: 1; }

/* ---- 7 日趨勢長條 ---- */
.trend7 { display: flex; gap: var(--sp-2); align-items: flex-end; height: 100px; }
.trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.trend-bar { width: 100%; max-width: 48px; background: var(--gold-dim); border-radius: 3px 3px 0 0; }
.trend-col:last-child .trend-bar { background: var(--gold); }
.trend-lbl { font-size: var(--fs-small); color: var(--ink-2); font-family: var(--font-num); }

/* ---- POS ---- */
.pos-map {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--sp-3);
}
.pos-table {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--sp-3); min-height: 96px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  color: var(--ink); text-align: left;
  transition: background var(--t-fast) var(--ease-out);
}
.pos-table:hover { background: var(--surface-2); }
.pos-table:focus-visible { outline: 2px solid var(--gold); }
.pos-table .tno { font-weight: 700; }
.pos-table .tinfo { font-size: var(--fs-small); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.pos-table.seated { border-color: var(--gold-dim); background: rgba(200,144,26,0.07); }
.pos-table.fired { border-color: var(--warn); }

.pos-split { display: flex; gap: var(--sp-4); align-items: flex-start; }
.pos-menu { flex: 1.4; min-width: 0; }
.pos-order { flex: 1; min-width: 280px; position: sticky; top: var(--sp-4); }
@media (max-width: 860px) {
  .pos-split { flex-direction: column-reverse; }
  .pos-order { position: static; width: 100%; }
}
.pos-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-2); }
.pos-item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-input);
  min-height: var(--touch-min); padding: var(--sp-2) var(--sp-3);
  color: var(--ink); font-size: var(--fs-table); font-family: inherit; cursor: pointer; text-align: left;
}
.pos-item:hover { background: var(--surface-2); border-color: var(--gold-dim); }
.pos-item .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-2); }

dialog {
  background: transparent; border: 0; padding: 0;
  max-width: min(92vw, 420px); width: 100%;
}
dialog::backdrop { background: rgba(0,0,0,0.6); }
dialog .card { border-color: var(--gold-dim); }

@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
  #toast { transition: none; }
  .pos-table { transition: none; }
}