/* 公開資訊板。獨立於系統其他樣式：呢一頁會擺上互聯網，
   唔應該連內部畫面嘅樣式一齊送出去，亦方便日後單獨改動。
   配色仍然跟屋苑嘅啡金主調，同櫃檯畫面認得出係同一套系統。 */

:root{
  --brand:#8c6a2a; --brand-d:#6b4f1c; --brand-l:#f6ecd7;
  --gold:#c9a227; --side-2:#2c1e0b;
  --ok:#3f7d3f; --ok-l:#eaf3e4;
  --bad:#9e3327; --bad-l:#f9eae6;
  --ink:#2a2117; --ink-2:#6b5c48; --ink-3:#9b8b76;
  --line:#e2d6bd; --bg:#f7ecd4;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Helvetica Neue",Arial,"PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;
  line-height:1.5; -webkit-text-size-adjust:100%;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}

.top{background:var(--side-2);color:#fff;padding:20px 0 22px}
.top .brand b{font-size:19px;letter-spacing:.14em;color:var(--gold)}
.top .brand span{margin-left:9px;font-size:12px;letter-spacing:.18em;color:#8a7550}
.top h1{margin:10px 0 4px;font-size:27px;font-weight:700;letter-spacing:.04em}
.top .sub{margin:3px 0 0;font-size:14px;color:#d8c7a4}
.top .sub + .sub{font-size:13px;color:#b9a67f}

#main{padding:20px 16px 8px}
.loading{padding:40px 0;text-align:center;color:var(--ink-2)}


.day{background:#fff;border:1px solid var(--line);border-radius:12px;
  margin-bottom:16px;overflow:hidden}
.day h2{margin:0;padding:12px 16px;font-size:17px;background:var(--brand-l);
  color:var(--brand-d);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* 假日收費唔同，用淺紅底突出——同櫃檯畫面嘅日期列一致 */
.day.hol h2{background:var(--bad-l);color:var(--bad);border-bottom-color:#dda79e}
.day h2 .tag{font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px;
  background:var(--bad);color:#fff}
.day h2 .cnt{margin-left:auto;font-size:13px;font-weight:700;color:var(--ok)}
.day h2 .cnt.none{color:var(--bad)}

/* 手機打橫捲，唔壓縮欄位——壓到太窄反而睇唔到 */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:420px}
th,td{border:1px solid var(--line);padding:0;text-align:center}
thead th{background:#fff;font-size:13px;padding:8px 6px;color:var(--brand-d);
  position:sticky;top:0}
.hcol{width:118px;background:#fff;font-size:12.5px;color:var(--ink-2);
  font-weight:600;padding:6px 4px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
td{height:46px}
td b{display:block;font-size:13.5px;font-weight:700}
td small{display:block;font-size:11.5px;opacity:.75;margin-top:1px}

td.free{background:var(--ok-l);color:var(--ok)}
td.busy{background:#f0ece4;color:var(--ink-3)}
td.hold{background:#e7ecef;color:#5d6f7a}
td.past{background:#fafafa;color:#c9c2b6}
td.na{background:repeating-linear-gradient(135deg,#fbfbfb,#fbfbfb 6px,#f4f2ee 6px,#f4f2ee 12px)}

.foot{padding:6px 16px 34px;color:var(--ink-2);font-size:13.5px}
.foot p{margin:10px 0}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.legend .k{font-size:12px;padding:3px 11px;border-radius:20px;border:1px solid var(--line)}
.legend .free{background:var(--ok-l);color:var(--ok)}
.legend .busy{background:#f0ece4;color:var(--ink-3)}
.legend .hold{background:#e7ecef;color:#5d6f7a}
.legend .past{background:#fafafa;color:#b6ada0}
.stamp{font-size:12px;color:var(--ink-3)}

@media(max-width:560px){
  .top h1{font-size:22px}
  .hcol{width:96px;font-size:11.5px}
  td{height:42px}
}