/* 超級公司 · 全域營運作業系統 — CIS 視覺：磚紅 / 暖金 / 深色背景 / 禁圓角 */
:root{
  --bg:#15100f;
  --panel:#1f1816;
  --panel-2:#2a201d;
  --panel-3:#332622;
  --line:#4a3a2a;
  --line-soft:#352b25;
  --gold:#f5c428;
  --gold-dim:#b9962f;
  --brick:#b82020;
  --brick-lt:#cc2a22;
  --text:#e9ddd2;
  --muted:#9a8a7c;
  --muted-2:#6f6256;
  --pos:#6abf83;
  --neg:#e0563f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"PingFang TC","Heiti TC","Microsoft JhengHei",-apple-system,system-ui,sans-serif;
  font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--gold);text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--panel-3)}
::-webkit-scrollbar-track{background:var(--bg)}

/* ---------- 版面 ---------- */
#root{display:flex;min-height:100vh}
#sidebar{
  width:248px;flex:0 0 248px;background:var(--panel);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
#main{flex:1;min-width:0;padding:32px 40px 80px}

/* ---------- 品牌標頭 ---------- */
.brand{padding:22px 20px 18px;border-bottom:1px solid var(--line)}
.brand .mark{
  font-family:"Cinzel Decorative",serif;font-size:18px;letter-spacing:1px;
  background:linear-gradient(120deg,#f5c428,#e9a23b 55%,#c8851f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .sub{font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:2px}

/* ---------- 導航（分區配色版） ---------- */
.nav-section{padding:16px 10px 4px;border-top:1px solid var(--line-soft)}
.nav-section:first-of-type{border-top:none}
.nav-section .label{
  font-size:13px;letter-spacing:1.5px;color:var(--accent,var(--muted-2));
  padding:6px 12px 10px;font-weight:700;
  opacity:.95;
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
  color:var(--text);border-left:2px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  position:relative;
}
.nav-item .dot{
  width:6px;height:6px;background:var(--muted-2);flex:0 0 6px;
  transition:background .15s ease, transform .15s ease;
}
.nav-item.live .dot{background:var(--accent,var(--gold))}
.nav-item:hover{background:var(--panel-2)}
.nav-item:hover .dot{transform:scale(1.4)}
.nav-item.active{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent,var(--gold)) 12%, transparent),
    var(--panel-2) 70%);
  border-left-color:var(--accent,var(--brick-lt));
}
.nav-item.active .dot{background:var(--accent,var(--gold));transform:scale(1.5)}
.nav-item.active .name{color:var(--accent,var(--gold));font-weight:600}
.nav-item .name{flex:1;font-size:15px;transition:color .15s ease;letter-spacing:0.3px}
.nav-item .tag{
  font-size:9px;letter-spacing:1px;color:var(--muted-2);
  border:1px solid var(--line);padding:1px 5px;
}
.sidebar-foot{margin-top:auto;padding:14px 16px;border-top:1px solid var(--line);
  font-size:10px;color:var(--muted-2);letter-spacing:1px}

/* ---------- 頁面標題（用 current-accent 強調） ---------- */
.page-head{
  margin-bottom:24px;border-bottom:1px solid var(--line-soft);padding-bottom:14px;
  padding-left:14px;border-left:3px solid var(--current-accent,var(--gold));
  margin-left:-3px;
}
.page-head h1{
  font-size:22px;font-weight:700;letter-spacing:1px;color:var(--text);
}
.page-head .desc{color:var(--muted);font-size:12.5px;margin-top:6px}
.gold-rule{height:2px;background:var(--current-accent,var(--gold));width:42px;margin-top:10px;opacity:.8}

/* ---------- 卡片 / 區塊（升級 hover 與 accent） ---------- */
.card{
  background:var(--panel);border:1px solid var(--line-soft);padding:20px;margin-bottom:18px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.card:hover{border-color:var(--line);box-shadow:0 4px 24px rgba(0,0,0,.25)}
.card > h2{
  font-size:13px;letter-spacing:1px;color:var(--gold-dim);
  margin-bottom:14px;font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.card > h2::before{
  content:"";width:3px;height:14px;background:var(--current-accent,var(--brick-lt));
  border-radius:0;
}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1280px){.grid.c4{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}

/* ---------- 數據格 (KPI) ---------- */
.kpi{background:var(--panel-2);border:1px solid var(--line-soft);padding:16px 18px}
.kpi .k-label{font-size:11px;color:var(--muted);letter-spacing:1px}
.kpi .k-value{
  font-size:23px;font-weight:700;margin-top:8px;
  font-variant-numeric:tabular-nums;letter-spacing:.3px;white-space:nowrap;
}
.kpi .k-sub{font-size:11px;color:var(--muted-2);margin-top:4px}
.kpi.feature{
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--current-accent,var(--gold)) 15%,#2a201d),
    #231a17);
  border-color:var(--current-accent,var(--line));
  border-width:1px;
}
.kpi.feature .k-value{font-size:27px}
.kpi{transition:border-color .2s ease, transform .15s ease}
.kpi:hover{border-color:color-mix(in srgb,var(--current-accent,var(--gold)) 40%,var(--line))}
.pos{color:var(--pos)}
.neg{color:var(--neg)}
.gold{color:var(--gold)}

/* ---------- 表單 ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--text);margin-bottom:5px}
.field .hint{font-size:11px;color:var(--muted-2);margin-top:4px;line-height:1.4}
input[type=text],input[type=number],input[type=date],input[type=month],input[type=password],input[type=email],input[type=time],select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);
  padding:9px 11px;color:var(--text);outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--current-accent,var(--gold-dim));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--current-accent,var(--gold)) 18%,transparent);
}
input[type=number]{font-variant-numeric:tabular-nums}
textarea{resize:vertical;min-height:60px}
.form-group{margin-bottom:18px}
.form-group .g-title{
  font-size:11px;letter-spacing:1px;color:var(--gold-dim);
  border-bottom:1px solid var(--line-soft);padding-bottom:6px;margin-bottom:12px;
}

/* ---------- 按鈕（更滑順的互動感） ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--panel-3);border:1px solid var(--line);
  color:var(--text);padding:9px 18px;cursor:pointer;letter-spacing:1px;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.btn:hover{border-color:var(--current-accent,var(--gold-dim));background:var(--panel-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg,var(--brick-lt),var(--brick));
  border-color:var(--brick-lt);color:#fff;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 2px 6px rgba(0,0,0,.2);
}
.btn.primary:hover{background:linear-gradient(180deg,#d83838,var(--brick-lt))}
.btn.ghost{background:transparent}
.btn.danger:hover{border-color:var(--neg);color:var(--neg);background:transparent}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ---------- 中控版快速導覽磚 ---------- */
.nav-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.nav-tile:hover{
  border-color:var(--gold,#c9922a) !important;
  background:#1f1f1f !important;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(201,146,42,0.15);
}
.nav-tile:active{transform:translateY(0)}

/* ---------- 表格 ---------- */
table.data{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.data th,table.data td{
  text-align:right;padding:8px 10px;border-bottom:1px solid var(--line-soft);
  font-size:12.5px;
}
table.data th{
  color:var(--muted);font-weight:600;font-size:11px;letter-spacing:1px;
  border-bottom:1px solid var(--line);
}
table.data td:first-child,table.data th:first-child{text-align:left}
table.data tr:hover td{background:var(--panel-2)}
table.data tr.total td{
  border-top:1px solid var(--gold-dim);font-weight:700;
  background:var(--panel-2);color:var(--gold);
}
table.data td.row-act{text-align:center}

/* ---------- 計算側欄 ---------- */
.calc-line{
  display:flex;justify-content:space-between;padding:7px 0;
  border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums;
}
.calc-line .cl-label{color:var(--muted);font-size:12.5px}
.calc-line .cl-val{font-size:13px}
.calc-line.sum{border-bottom:2px solid var(--line)}
.calc-line.sum .cl-label{color:var(--text)}
.calc-line.final{
  border-bottom:none;border-top:2px solid var(--gold-dim);margin-top:6px;padding-top:12px;
}
.calc-line.final .cl-label{color:var(--gold);font-size:14px;font-weight:700}
.calc-line.final .cl-val{font-size:22px;font-weight:700}

/* ---------- 提示 ---------- */
.alert{
  display:flex;gap:10px;padding:11px 14px;margin-bottom:9px;
  border:1px solid var(--line);background:var(--panel-2);font-size:12.5px;
}
.alert .a-icon{flex:0 0 auto;width:6px;background:var(--muted-2)}
.alert.warn .a-icon{background:var(--gold)}
.alert.bad .a-icon{background:var(--brick-lt)}
.alert.ok .a-icon{background:var(--pos)}

/* ---------- 進度條 ---------- */
.bar-track{background:var(--bg);height:10px;border:1px solid var(--line-soft);overflow:hidden}
.bar-fill{height:100%;background:var(--brick-lt)}
.cost-row{margin-bottom:11px}
.cost-row .cr-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.cost-row .cr-head .cr-val{color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- 迷你趨勢條 ---------- */
.spark{display:flex;align-items:flex-end;gap:5px;height:90px;padding-top:6px}
.spark .sb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:4px}
.spark .sb .bar{width:100%;background:var(--gold-dim);min-height:2px}
.spark .sb .bar.neg{background:var(--brick)}
.spark .sb .cap{font-size:9px;color:var(--muted-2);text-align:center}

/* ---------- 空狀態 / 後續模組 ---------- */
.empty{
  text-align:center;padding:48px 20px;color:var(--muted);
  border:1px dashed var(--line);background:var(--panel)
}
.empty .big{font-size:15px;color:var(--text);margin-bottom:8px}
.soon .phase-tag{
  display:inline-block;font-size:11px;letter-spacing:1px;color:var(--gold);
  border:1px solid var(--gold-dim);padding:3px 10px;margin-bottom:14px;
}
.soon ul{margin:10px 0 0 18px}
.soon li{margin-bottom:6px;color:var(--muted)}
.gate-box{
  margin-top:16px;padding:13px 15px;background:var(--panel-2);
  border-left:2px solid var(--brick-lt);font-size:12.5px;color:var(--muted);
}
.gate-box b{color:var(--text)}

.inline-note{font-size:11.5px;color:var(--muted-2);margin-top:10px;line-height:1.5}
.pill{display:inline-block;font-size:10px;letter-spacing:1px;padding:2px 8px;
  border:1px solid var(--line);color:var(--muted)}

/* ---------- 新手引導 3 步驟卡 ---------- */
.card.onboarding{
  background:linear-gradient(160deg,#221a17,#1b1513);
  border:1px solid var(--gold-dim);
}
.card.onboarding > h2{color:var(--gold)}
.card.onboarding .steps{display:grid;gap:12px;margin-top:14px}
@media(min-width:861px){.card.onboarding .steps{grid-template-columns:repeat(3,1fr)}}
.step{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--panel-2);border:1px solid var(--line-soft);padding:14px;
}
.step.done{opacity:.78;border-color:var(--gold-dim)}
.step .step-num{
  flex:0 0 auto;width:30px;height:30px;background:var(--brick);
  color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;letter-spacing:0;
}
.step.done .step-num{background:var(--pos);color:#15100f}
.step .step-body{flex:1;min-width:0}
.step .step-title{font-size:13px;color:var(--text);font-weight:700;margin-bottom:5px}
.step .step-desc{font-size:11.5px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.step .step-tag{
  display:inline-block;font-size:10px;letter-spacing:1px;color:var(--pos);
  border:1px solid var(--pos);padding:2px 8px;
}

/* ---------- 嚴重度摘要與摺疊提醒 ---------- */
.alert-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.alert-summary .sev{
  font-size:11px;letter-spacing:1px;padding:3px 10px;
  border:1px solid var(--line);
}
.sev.sev-bad{color:var(--neg);border-color:var(--neg)}
.sev.sev-warn{color:var(--gold);border-color:var(--gold-dim)}
.sev.sev-ok{color:var(--pos);border-color:var(--pos)}
details.more-alerts{margin-top:6px}
details.more-alerts > summary{
  cursor:pointer;list-style:none;
  padding:9px 12px;background:var(--panel-2);border:1px dashed var(--line);
  color:var(--muted);font-size:12px;letter-spacing:1px;
}
details.more-alerts > summary::-webkit-details-marker{display:none}
details.more-alerts[open] > summary{
  background:var(--panel-3);color:var(--gold-dim);border-style:solid;
}
details.more-alerts > summary::before{content:"▸ ";color:var(--gold-dim)}
details.more-alerts[open] > summary::before{content:"▾ "}

/* ---------- 每日登錄：進階明細收摺 ---------- */
details.advanced-fields{margin:8px 0 18px}
details.advanced-fields > summary{
  cursor:pointer;list-style:none;
  padding:11px 14px;background:var(--panel-2);border:1px dashed var(--line);
  color:var(--gold-dim);font-size:12px;letter-spacing:1px;
}
details.advanced-fields > summary::-webkit-details-marker{display:none}
details.advanced-fields > summary::before{content:"▸ ";color:var(--gold-dim)}
details.advanced-fields[open] > summary{
  background:var(--panel-3);border-style:solid;color:var(--gold);
}
details.advanced-fields[open] > summary::before{content:"▾ "}
details.advanced-fields[open]{padding-bottom:6px}

/* ---------- 精算總帳：segmented control ---------- */
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);padding:3px;gap:3px}
.seg-btn{
  background:transparent;border:none;color:var(--muted);
  padding:9px 18px;cursor:pointer;font-size:13px;letter-spacing:1px;
  transition:all .15s ease;
}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{background:var(--brick);color:#fff}

/* ---------- 精算總帳：階梯式 P&L ---------- */
.settle-stair{font-variant-numeric:tabular-nums}
.settle-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line-soft);
}
.settle-row .settle-label{font-size:13px;color:var(--text)}
.settle-row .settle-val{font-size:13.5px;font-weight:600}
.settle-row.subtotal{
  background:var(--panel-2);padding:11px 14px;margin:6px -14px;
  border-bottom:1px solid var(--line);
}
.settle-row.subtotal .settle-label{color:var(--gold-dim);font-weight:700}
.settle-row.subtotal .settle-val{color:var(--gold);font-size:15px}
.settle-row.final{
  background:linear-gradient(120deg,#2a201d,#231a17);
  padding:18px 14px;margin:14px -14px 0;
  border:1px solid var(--gold-dim);border-bottom:none;
}
.settle-row.final .settle-label{font-size:15px;color:var(--gold);font-weight:700;letter-spacing:1px}
.settle-row.final .settle-val{font-size:22px;font-weight:700}

/* ---------- 行動裝置（手機 / 平板） ---------- */
#topbar{display:none}
#nav-backdrop{display:none}
@media(max-width:860px){
  #topbar{
    display:flex;align-items:center;gap:12px;
    position:sticky;top:0;z-index:50;
    background:var(--panel);border-bottom:1px solid var(--line);
    padding:11px 14px;
  }
  #topbar .mb-burger{
    width:40px;height:36px;flex:0 0 auto;cursor:pointer;
    background:var(--panel-3);border:1px solid var(--line);
    color:var(--gold);font-size:17px;line-height:1;
  }
  #topbar .mb-title{
    font-family:"Cinzel Decorative",serif;font-size:14px;letter-spacing:1px;
    background:linear-gradient(120deg,#f5c428,#c8851f);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  #root{flex-direction:column}
  #sidebar{
    position:fixed;top:0;left:0;height:100vh;width:256px;flex-basis:auto;
    transform:translateX(-100%);transition:transform .25s ease;z-index:60;
  }
  body.nav-open #sidebar{transform:translateX(0)}
  body.nav-open #nav-backdrop{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:55;
  }
  #main{padding:18px 15px 64px;width:100%}
  .page-head h1{font-size:18px}
  .page-head .desc{font-size:12px}
  .card{padding:15px;overflow-x:auto}
  .card.soon{overflow-x:visible}
  .kpi .k-value{font-size:22px}
  .kpi.feature .k-value{font-size:24px}
  .btn{padding:10px 16px}
  table.data th,table.data td{padding:7px 9px;font-size:12px;white-space:nowrap}
  .calc-line.final .cl-val{font-size:19px}
}

/* ============================================================ */
/* POS 前台模式（平板）— 全螢幕點餐 / 結帳                       */
/* ============================================================ */
body.pos-mode #sidebar,
body.pos-mode #topbar,
body.pos-mode #nav-backdrop { display:none !important; }
body.pos-mode #main { padding:0; margin:0; width:100vw; max-width:none; }
body.pos-mode #root { display:block; }

.pos-shell{
  display:flex; flex-direction:column;
  height:100vh; width:100vw;
  background:#0f0a09; color:var(--text);
  font-size:14px;
}

/* Topbar */
.pos-topbar{
  display:flex; align-items:center; justify-content:space-between;
  height:56px; padding:0 18px;
  background:linear-gradient(180deg,#1a1311 0%, #150f0d 100%);
  border-bottom:2px solid var(--brick);
  flex:0 0 56px;
}
.pos-brand{ display:flex; align-items:baseline; gap:10px; }
.pos-brand-mark{
  font-family:"Cinzel Decorative",serif; font-size:22px; letter-spacing:2px;
  background:linear-gradient(120deg,#f5c428,#c8851f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pos-brand-sub{ font-size:12px; color:var(--muted); letter-spacing:1.5px; }
.pos-status{ display:flex; gap:18px; font-size:13px; color:var(--muted); }
.pos-status-item b{ color:var(--gold); margin-left:4px; }
.pos-topbar-actions{ display:flex; gap:8px; }

.pos-btn{
  background:var(--panel-2); border:1px solid var(--line);
  color:var(--text); padding:8px 14px; cursor:pointer;
  font-size:13px; letter-spacing:1px; transition:all .15s ease;
}
.pos-btn:hover{ background:var(--panel-3); border-color:var(--gold-dim); }
.pos-btn.ghost{ background:transparent; }
.pos-btn.primary{
  background:linear-gradient(180deg,#A01818,#7a1212);
  border-color:#c92020; color:#fff; font-weight:bold;
}
.pos-btn.primary:hover{ background:linear-gradient(180deg,#b81e1e,#8c1414); }
.pos-btn.primary:disabled{ opacity:.4; cursor:not-allowed; }
.pos-btn.danger{
  background:transparent; border-color:#7a3030; color:#e0563f;
}
.pos-btn.danger:hover{ background:#3a1818; color:#fff; }
.pos-btn.big{ padding:14px 24px; font-size:16px; font-weight:bold; }
.pos-btn.small{ padding:5px 10px; font-size:12px; }

/* Body */
.pos-body{
  flex:1; display:grid;
  grid-template-columns: 260px 1fr 380px;
  min-height:0;
}

/* 左：桌位 */
.pos-tables{
  background:#171110;
  border-right:1px solid var(--line-soft);
  padding:14px 12px;
  overflow-y:auto;
}
.pos-section-title{
  font-size:11px; letter-spacing:2px; color:var(--gold-dim);
  margin-bottom:10px; text-transform:uppercase;
}
.pos-table-grid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:8px;
}
.pos-table-cell{
  border:1px solid var(--line);
  background:var(--panel);
  padding:10px 8px; cursor:pointer;
  text-align:center; transition:all .15s ease;
  min-height:80px; display:flex; flex-direction:column; justify-content:center;
}
.pos-table-cell:hover{ border-color:var(--gold-dim); }
.pos-table-cell.active{ border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.pos-table-cell.empty{ background:var(--panel); }
.pos-table-cell.busy{
  background:linear-gradient(180deg,#3a1614,#2a1010); border-color:#7a2020;
}
.pos-table-cell.pay{
  background:linear-gradient(180deg,#3a2a10,#2a1f08); border-color:var(--gold-dim);
}
.pt-no{ font-size:15px; font-weight:bold; color:var(--text); }
.pt-seats{ font-size:10px; color:var(--muted); margin-top:2px; }
.pt-amt{ font-size:12px; color:var(--gold); margin-top:4px; font-weight:bold; }
.pt-status{ font-size:10px; color:var(--muted-2); margin-top:3px; }

.pos-table-legend{
  display:flex; gap:12px; font-size:11px; color:var(--muted);
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft);
}
.pos-table-legend i.dot{
  display:inline-block; width:8px; height:8px; margin-right:4px;
  vertical-align:middle;
}
.pos-table-legend i.empty{ background:var(--panel); border:1px solid var(--line); }
.pos-table-legend i.busy{ background:#7a2020; }
.pos-table-legend i.pay{ background:var(--gold-dim); }

/* 中：菜單 */
.pos-menu{
  display:flex; flex-direction:column;
  background:#13100e;
  min-height:0;
}
.pos-menu-search{
  padding:14px; border-bottom:1px solid var(--line-soft);
  background:#1a1411;
}
.pos-menu-search input{
  width:100%; padding:10px 12px;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  font-size:14px; outline:none;
}
.pos-menu-search input:focus{ border-color:var(--gold-dim); }
.pos-cats{
  display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;
}
.pos-cat-pill{
  background:var(--panel); border:1px solid var(--line); color:var(--muted);
  padding:6px 12px; cursor:pointer; font-size:12px; letter-spacing:1px;
  transition:all .15s ease;
}
.pos-cat-pill em{ font-style:normal; color:var(--muted-2); margin-left:3px; font-size:10px; }
.pos-cat-pill:hover{ border-color:var(--gold-dim); color:var(--text); }
.pos-cat-pill.active{
  background:var(--brick); border-color:var(--brick-lt); color:#fff;
}
.pos-cat-pill.active em{ color:rgba(255,255,255,.7); }

.pos-menu-grid{
  flex:1; overflow-y:auto; padding:14px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px; align-content:start;
}
.pos-menu-card{
  background:linear-gradient(180deg,#1f1816,#19130f);
  border:1px solid var(--line); padding:12px 10px;
  cursor:pointer; text-align:left;
  transition:all .15s ease;
  display:flex; flex-direction:column; gap:4px;
}
.pos-menu-card:hover{
  border-color:var(--gold); transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.pos-menu-card:active{ transform:translateY(0); }
.pmc-cat{ font-size:10px; color:var(--gold-dim); letter-spacing:1.5px; }
.pmc-name{ font-size:13px; color:var(--text); font-weight:bold; line-height:1.3; min-height:34px; }
.pmc-price{ font-size:14px; color:var(--gold); font-weight:bold; margin-top:auto; }

.pos-empty{
  padding:40px 20px; text-align:center; color:var(--muted-2);
  font-size:13px; letter-spacing:1px;
}

/* 右：訂單 */
.pos-order{
  background:#1a1411;
  border-left:1px solid var(--line-soft);
  padding:16px; overflow-y:auto;
  display:flex; flex-direction:column; gap:12px;
}
.pos-order-head{ border-bottom:1px solid var(--line-soft); padding-bottom:10px; }
.poh-title{ font-size:16px; font-weight:bold; color:var(--gold); letter-spacing:1px; }
.poh-sub{ font-size:11px; color:var(--muted); margin-top:3px; }

.pos-member-row{
  display:flex; gap:6px;
}
.pos-member-select{
  flex:1; padding:8px;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  font-size:12px; outline:none;
}
.pos-member-bound{
  background:#2a2010; border:1px solid var(--gold-dim);
  padding:8px 10px; font-size:12px; color:var(--text);
}
.pos-link{
  background:transparent; border:none; color:var(--gold);
  cursor:pointer; text-decoration:underline; font-size:12px;
  padding:0 4px;
}

.pos-lines{
  flex:1; min-height:120px; max-height:240px; overflow-y:auto;
  border:1px solid var(--line-soft);
  background:#13100e;
  padding:6px;
}
.pos-line{
  display:grid; grid-template-columns: 1fr auto auto auto;
  gap:8px; align-items:center;
  padding:8px 6px;
  border-bottom:1px dotted var(--line-soft);
}
.pos-line:last-child{ border-bottom:none; }
.pl-name{ font-size:13px; color:var(--text); }
.pl-qty{ display:flex; align-items:center; gap:4px; }
.pos-qty-btn{
  width:24px; height:24px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--gold);
  cursor:pointer; font-size:14px; line-height:1;
}
.pos-qty-btn:hover{ background:var(--panel-3); }
.pl-qty span{ min-width:24px; text-align:center; font-weight:bold; }
.pl-amt{ font-size:13px; color:var(--gold); font-weight:bold; min-width:80px; text-align:right; }
.pl-del{
  width:22px; height:22px; background:transparent; border:none;
  color:var(--neg); cursor:pointer; font-size:16px;
}
.pl-del:hover{ color:#fff; background:var(--neg); }

.pos-totals{
  display:flex; flex-direction:column; gap:4px;
  padding:10px 0; border-top:1px solid var(--line-soft);
}
.ptr{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--muted);
}
.ptr b{ color:var(--text); font-weight:normal; }
.ptr input{
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  padding:2px 6px; outline:none; font-size:12px;
}
.ptr.total{
  font-size:18px; padding-top:8px; margin-top:4px;
  border-top:1px dashed var(--line); color:var(--text);
}
.ptr.total b{ color:var(--gold); font-size:22px; font-weight:bold; }

.pos-pay-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
}
.pos-pay-pill{
  padding:10px 6px; font-size:12px;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  cursor:pointer; transition:all .15s ease;
}
.pos-pay-pill:hover{ border-color:var(--gold-dim); }
.pos-pay-pill.active{
  background:var(--brick); border-color:var(--brick-lt); color:#fff; font-weight:bold;
}

.pos-cash-row{
  display:grid; grid-template-columns: 60px 1fr auto; gap:8px;
  align-items:center;
}
.pos-cash-row label{ font-size:12px; color:var(--muted); }
.pos-cash-row input{
  padding:8px 10px; background:var(--panel);
  border:1px solid var(--line); color:var(--text); outline:none;
  font-size:14px; font-weight:bold;
}
.pos-cash-row input:focus{ border-color:var(--gold); }
.pos-change{ font-size:12px; color:var(--muted); }
.pos-change b{ color:var(--pos); font-size:14px; margin-left:4px; }

.pos-note{
  width:100%; min-height:50px; resize:vertical;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  padding:8px 10px; font-size:12px; outline:none;
  font-family:inherit;
}
.pos-note:focus{ border-color:var(--gold-dim); }

.pos-action-row{
  display:flex; gap:8px;
}
.pos-action-row .pos-btn.big{ flex:1; }

/* === 開桌設定：人數 + 鍋底選擇（修反白 2026-06-04）=== */
.pos-setup-block{ margin-bottom:18px; }
.pos-setup-seats{
  display:flex; align-items:center; gap:12px;
}
.pos-setup-seats .open-seats-num{
  font-size:20px; font-weight:700; color:var(--text);
  min-width:36px; text-align:center; font-variant-numeric:tabular-nums;
}
.pos-setup-hint{ font-size:13px; color:var(--muted); margin-left:4px; }
.pos-setup-label{
  font-size:13px; color:var(--gold-dim); letter-spacing:1px;
  margin-bottom:10px; font-weight:600;
}
.pos-base-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.pos-base-card{
  display:flex; flex-direction:column; gap:6px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; padding:12px 14px; cursor:pointer;
  color:var(--text); text-align:left; font-family:inherit;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.pos-base-card:hover{
  border-color:var(--gold-dim); background:var(--panel-3);
}
.pos-base-card:active{ transform:translateY(1px); }
.pos-base-card.active{
  border-color:var(--brick-lt);
  background:linear-gradient(180deg, rgba(160,24,24,0.18), var(--panel-3));
  box-shadow:0 0 0 1px var(--brick-lt) inset;
}
.pos-base-card .pbc-name{
  font-size:14px; font-weight:600; color:var(--text); line-height:1.35;
}
.pos-base-card.active .pbc-name{ color:#fff; }
.pos-base-card .pbc-meta{ font-size:12px; color:var(--muted); }
.pos-base-card .pbc-price{
  font-size:14px; font-weight:700; color:var(--gold);
  font-variant-numeric:tabular-nums;
}

/* Modal — 訂單歷史 */
.pos-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:30px;
}
.pos-modal{
  background:#1a1411; border:1px solid var(--gold-dim);
  width:100%; max-width:900px; max-height:80vh;
  display:flex; flex-direction:column;
}
.pos-modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--line);
  background:#221915;
}
.pos-modal-head h3{
  font-size:14px; letter-spacing:2px; color:var(--gold);
  font-weight:bold;
}
.pos-modal-body{
  flex:1; overflow-y:auto; padding:14px 18px;
}
.pos-hist-table{
  width:100%; border-collapse:collapse; font-size:12px;
}
.pos-hist-table th{
  background:var(--panel-2); color:var(--gold-dim);
  padding:8px 10px; text-align:left; letter-spacing:1px;
  font-weight:normal; border-bottom:1px solid var(--line);
}
.pos-hist-table td{
  padding:8px 10px; border-bottom:1px solid var(--line-soft);
  color:var(--text);
}
.pos-hist-table td.small{ font-size:11px; color:var(--muted); }
.pos-hist-table td.num{ text-align:right; font-weight:bold; color:var(--gold); }
.pos-hist-table th.num{ text-align:right; }

/* 平板響應 — 縱向時收合 */
@media (max-width: 1100px){
  .pos-body{ grid-template-columns: 220px 1fr 340px; }
  .pos-table-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  .pos-body{ grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .pos-tables{ max-height:140px; }
  .pos-table-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* POS v5.1 — 招待 / 客訴 / 座位加減 */
.pt-seats { display:flex; align-items:center; justify-content:center; gap:6px; }
.pt-seat-btn {
  width:18px; height:18px; padding:0; line-height:1;
  background:var(--panel-2); border:1px solid var(--line); color:var(--gold);
  cursor:pointer; font-size:11px;
}
.pt-seat-btn:hover { background:var(--panel-3); border-color:var(--gold); }

.pos-line { display:flex; flex-direction:column; gap:4px; padding:8px 6px;
  border-bottom:1px dotted var(--line-soft); }
.pl-row-top { display:flex; justify-content:space-between; align-items:center; }
.pl-row-bot { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.pl-comp-btn {
  padding:3px 8px; background:var(--panel-2); border:1px solid var(--line);
  color:var(--muted); cursor:pointer; font-size:11px;
}
.pl-comp-btn:hover { border-color:var(--gold-dim); color:var(--text); }
.pl-comp-btn.active { background:var(--brick); border-color:var(--brick-lt); color:#fff; }

.line-tag { display:inline-block; margin-left:6px; padding:1px 6px; font-size:10px;
  letter-spacing:1px; vertical-align:middle; }
.line-tag.gift { background:#2a201d; color:var(--gold); border:1px solid var(--gold-dim); }
.line-tag.claim { background:#3a1818; color:var(--neg); border:1px solid var(--neg); }

.pos-line.line-comp .pl-name,
.pos-line.line-claim .pl-name { color:var(--muted-2); }
.pos-line.line-comp { background:rgba(201,146,42,.05); }
.pos-line.line-claim { background:rgba(224,86,63,.05); }

/* P1-14 a11y 最小修法 ─────────────────────────────────────────── */
/* 1) 尊重「減少動畫」系統設定（前庭障礙 / 暈眩症用戶） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* 2) 鍵盤使用者 focus ring */
:focus-visible {
  outline: 2px solid var(--gold, #d6a53a);
  outline-offset: 2px;
}
/* :focus（非鍵盤）保留無 outline 行為避免滑鼠點擊時跳框 */
:focus:not(:focus-visible) { outline: none; }

/* P1-15 promptModal ─────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999;
}
.modal-box {
  background: #1a1411; border: 1px solid var(--gold, #d6a53a);
  padding: 28px 32px; min-width: 360px; max-width: 90vw;
  border-radius: 4px; box-shadow: 0 12px 48px rgba(0,0,0,.6);
}
.modal-box h3 {
  color: var(--gold, #d6a53a); margin: 0 0 16px;
  font-size: 16px; letter-spacing: 1px; font-weight: 700;
}
.modal-note { color: var(--muted, #999); font-size: 13px; margin-bottom: 12px; }
.modal-box input,
.modal-box textarea {
  width: 100%; padding: 10px 12px;
  background: #0e0a08; border: 1px solid #3a302a; color: #f5c428;
  font-size: 15px; font-family: inherit; box-sizing: border-box;
  resize: vertical;
}
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* POS 菜單後台 modal ─────────────────────────────────────────── */
.pos-admin-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid var(--line); background: #221915;
}
.pos-admin-table td { vertical-align: middle; }
.pos-admin-table input.pma-input {
  width: 100%; box-sizing: border-box;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 6px 8px; font-size: 12px; font-family: inherit;
}
.pos-admin-table input.pma-input:focus { outline: none; border-color: var(--gold); }
.pos-admin-table input.pma-input.num { text-align: right; }
.pma-lock { font-size: 11px; color: var(--gold-dim); }