/* base.css —— 變數、reset、版面骨架、側邊選單、主欄
   由 index.html 的 <style> 切出，**嚴格保留原有次序**。
   CSS 係層疊的：同權重的規則後寫的贏，所以四個檔案的載入次序
   必須同原本一致（base → components → receipt → screens），
   唔可以按字母或者其他規律重排。 */

:root{
  /* 沙田第一城 — 啡金主色調 */
  --brand:#8c6a2a; --brand-d:#6b4f1c; --brand-l:#f6ecd7;
  --gold:#c9a227; --gold-l:#fbf3de;
  --side:#3d2b12; --side-2:#2c1e0b; --side-3:#54401f;
  --ok:#3f7d3f; --ok-l:#eaf3e4;
  --warn:#a8791b; --warn-l:#fbf1da;
  --bad:#9e3327; --bad-l:#f9eae6;
  --ink:#2a2117; --ink-2:#6b5c48; --ink-3:#9b8b76;
  --line:#e2d6bd; --bg:#f7ecd4; --card:#fff;
  --r:12px; --sh:0 1px 2px rgba(90,66,20,.08), 0 8px 22px rgba(90,66,20,.07);
  --sidew:274px;
  /* 住戶編號輸入框與旁邊「解讀」框的共用高度 */
  --idh:68px;
  /* 頂欄實際高度，由 JS 量度後寫入；黏貼式表頭靠它定位 */
  --stick-top:68px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--stick-top) + 12px)}
body{
  font-family:"PingFang HK","Microsoft JhengHei","Noto Sans TC","Heiti TC",system-ui,sans-serif;
  font-size:17px; line-height:1.65; color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
/* 柔和光斑背景（純 CSS，不需圖片） */
.bokeh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0 62px, transparent 63px),
    radial-gradient(circle at 78% 8%,  rgba(255,255,255,.42) 0 44px, transparent 45px),
    radial-gradient(circle at 92% 46%, rgba(255,255,255,.50) 0 78px, transparent 79px),
    radial-gradient(circle at 30% 78%, rgba(255,255,255,.45) 0 56px, transparent 57px),
    radial-gradient(circle at 62% 92%, rgba(255,255,255,.38) 0 90px, transparent 91px),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.30) 0 34px, transparent 35px),
    linear-gradient(160deg,#fdf6e6 0%, var(--bg) 55%, #eddcbc 100%)}
.serif{font-family:"Songti TC","STSong","Times New Roman",serif}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
h1,h2,h3,h4{line-height:1.35;font-weight:700}
table{border-collapse:collapse;width:100%}

/* ---------- 側邊選單 ---------- */
.shell{display:none;position:relative;z-index:1}
.shell.on{display:block}
.side{position:fixed;left:0;top:0;bottom:0;width:var(--sidew);background:var(--side);color:#e9dcc4;
  display:flex;flex-direction:column;z-index:200;box-shadow:2px 0 14px rgba(60,42,12,.18)}
/* 相片貼實左上角，唔留邊。原本 padding:14px 會喺相片上面同左右
   各留一條深啡色，睇落好似頂部有塊空位。 */
.side .brand{padding:0;background:var(--side-2);
  border-bottom:1px solid rgba(255,255,255,.08)}
/* 左上角只放屋苑相，完整顯示唔裁切。
   原圖 880×389，用 height:auto 讓佢自己按比例縮，成張相都見到。
   （之前用 object-fit:cover 固定 68px 高，會裁走上下。）
   貼實邊之後唔再要圓角同外框——貼住邊嘅圓角會露出底色，反而似冇對齊。 */
.side .brand .mark{display:block;width:100%;height:auto}
/* .side .brand 內的 b/small 同 .side .sect 已刪除（左上角只剩相片），
   相關樣式一併清走。.segs 補返上邊距，原本靠 .sect 撐開嗰段空間。 */
.segs{display:flex;gap:6px;margin:14px;background:rgba(0,0,0,.24);padding:5px;border-radius:10px}
.segs button{flex:1;padding:9px 6px;border-radius:7px;font-size:15px;font-weight:600;color:#cbb894;transition:.15s}
.segs button:hover{color:#fff}
.segs button.on{background:var(--brand-l);color:var(--brand-d)}
nav.modes{display:flex;flex-direction:column;gap:3px;padding:0 14px;overflow-y:auto;flex:1}
nav.modes button{color:#dfd0b2;padding:13px 14px;border-radius:9px;font-size:16.5px;font-weight:600;
  display:flex;align-items:center;gap:12px;transition:.15s;text-align:left;width:100%}
nav.modes button .ic{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
nav.modes button:hover{background:rgba(255,255,255,.09);color:#fff}
nav.modes button.on{background:linear-gradient(100deg,var(--brand),#a07c33);color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.22)}
nav.modes button.on .ic{background:rgba(255,255,255,.22)}
.side .foot{padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#b9a67f}
.side .foot .ver{font-size:12px;letter-spacing:.06em;margin-bottom:11px;text-align:center}
.side .foot button{width:100%;padding:11px;border-radius:9px;background:rgba(255,255,255,.10);
  color:#f0e4cb;font-weight:600;font-size:15px;transition:.15s;
  display:flex;align-items:center;justify-content:center;gap:8px}
.side .foot button+button{margin-top:8px}
.side .foot button .ic{font-size:17px;line-height:1}
/* 只有「登出」先變紅。改密碼唔係破壞性動作，變紅會令人以為撳錯咗嘢。 */
.side .foot button.pw:hover{background:rgba(255,255,255,.20);color:#fff}
.side .foot button.out:hover{background:var(--bad);color:#fff}

/* ---------- 主欄 ---------- */
.main{margin-left:var(--sidew);min-height:100vh;position:relative;z-index:1}
.topbar{display:flex;flex-direction:column;position:sticky;top:0;z-index:100}
.brandbar{background:#fff;border-bottom:1px solid var(--line);padding:9px 26px;display:flex;
  align-items:center;gap:16px}
.brandbar .l{font-size:14px;color:var(--ink-2);line-height:1.35}
.brandbar .l small{display:block;font-size:11.5px;color:var(--ink-3);letter-spacing:.06em}
.brandbar .c{flex:1;text-align:center}
.brandbar .c b{display:block;font-size:22px;color:var(--brand-d);letter-spacing:.16em;line-height:1.2}
.brandbar .c small{font-size:12px;color:var(--brand);letter-spacing:.22em}
.brandbar .r{text-align:right;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.brandbar .r b{display:block;font-size:19px;color:var(--brand-d);letter-spacing:.06em}
.titlebar{background:linear-gradient(100deg,var(--brand-d),var(--brand) 60%,#a07c33);color:#fff;
  padding:14px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.titlebar h1{font-size:25px;font-weight:700;letter-spacing:.04em}
.titlebar .sub{font-size:14px;opacity:.82;margin-top:2px}
.titlebar .clock{margin-left:auto;text-align:right;font-size:14px;opacity:.9;
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.5}
.userbox{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);padding:8px 15px;
  border-radius:24px;font-size:14.5px;color:#fff;white-space:nowrap}
.userbox b{font-weight:600}
.userbox .role{font-size:12px;opacity:.85}
.userbox .role.admin{background:var(--gold);color:var(--side-2);font-weight:700;padding:2px 9px;border-radius:20px;opacity:1}
.userbox button{color:#f4e6c6;font-size:13px;text-decoration:underline;padding:2px}
.userbox button:hover{color:#fff}
/* 客戶螢幕：金色頂欄上用實心白掣先夠搶眼，半透明嗰種喺漸變底色上會溶埋一齊 */
.dspbtn{display:flex;align-items:center;gap:10px;background:#fff;color:var(--brand-d);
  font-weight:700;font-size:16.5px;padding:10px 20px;border-radius:28px;white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.20);transition:.15s}
.dspbtn .ic{font-size:26px;line-height:1}
.dspbtn:hover{background:var(--gold);color:var(--side-2);box-shadow:0 5px 14px rgba(0,0,0,.26)}
@media(max-width:1000px){
  .side{position:static;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;bottom:auto}
  /* 窄螢幕時側欄變成橫排，相片唔可以再 width:100%（會霸晒成行），
     改為固定一個細闊度。 */
  .side .brand{padding:0;border-bottom:none}
  .side .brand .mark{width:132px}
  .side .foot .ver{display:none}
  .segs{margin:8px}
  nav.modes{flex-direction:row;flex-wrap:wrap;padding:8px;flex:1 0 100%}
  nav.modes button{width:auto}
  /* 窄螢幕側欄變橫排，兩個掣打橫並排，唔好上下疊高成行 */
  .side .foot{border-top:none;padding:8px;margin-left:auto;display:flex;gap:8px}
  .side .foot button{width:auto;padding:9px 14px}
  .side .foot button+button{margin-top:0}
  .main{margin-left:0}
  .brandbar .c b{font-size:18px}
}

/* ---------- Layout ---------- */
.wrap{max-width:1420px;margin:0 auto;padding:24px 26px 80px;position:relative;z-index:1}
.view{display:none}
.view.on{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);margin-bottom:20px}
.card>h2,.card>.ch{padding:15px 22px;border-bottom:1px solid var(--line);font-size:18px;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap;background:#fdf9f0;border-radius:16px 16px 0 0;color:var(--brand-d)}
.card>.ch h2{font-size:18px}
.card .body{padding:20px}
.muted{color:var(--ink-2)}
.tiny{font-size:14px}
.right{margin-left:auto}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}