/* ============================================================================
   CDP MAHJONG — shared skin for the public timetable and the staff console.

   The palette is deliberately the same set index.html, cdp-session.html and
   cdp-tourn.css already use, so the mahjong pages read as part of the same
   site. It is COPIED rather than imported on purpose: cdp-tourn.css also
   carries bracket, standings and draw rules that mahjong has no use for,
   and a change made for a tournament should not be able to move a
   timetable. The two files are independent by design.

   Phones first. A customer checks availability standing in the cafe.
   ========================================================================== */

:root{
  --accent:#E38035; --accent-ink:#151210;
  --bg:#0E0C0B; --surface:#181513; --surface-2:#221D1A; --line:#332B26;
  --ink:#F2ECE4; --muted:#9C9086;
  --ok:#4FB489; --warn:#E4735A; --busy:#7E4A2A; --busy-ink:#FFD9B8;
  --jade:#2F7D63;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ppm:0.95;          /* pixels per minute on the timetable */
  --hdr:0px;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:.01em}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0}
input,select,textarea{font-family:inherit;font-size:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px 90px}

/* ---- laptop layout -------------------------------------------------
   The console is used at a desk far more than on a phone, and a single
   1000px-tall column there is all scrolling and no overview. From 900px
   up the panels sit side by side; below it everything stacks exactly as
   before, because courtside is still a phone. */
.cols{display:block}
@media(min-width:900px){
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .cols.wide-left{grid-template-columns:1.45fr 1fr}
  .cols > div > .sect:first-child{margin-top:4px}
}
/* a panel that would otherwise run away down the page */
.cap{max-height:300px;overflow:auto}
@media(min-width:900px){ .cap{max-height:340px} }

/* ---- header ---- */
header{display:flex;align-items:center;gap:10px;padding:14px 0;flex-wrap:wrap}
header h1{color:var(--accent);font-size:19px;text-transform:uppercase;letter-spacing:.05em}
.spacer{flex:1}
.back{color:var(--muted);text-decoration:none;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:6px 0}
.back:hover{color:var(--accent)}

.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.chip.on{color:var(--ok);border-color:var(--ok)}
.chip.on .dot{background:var(--ok);animation:pulse 2s infinite}
.chip.bad{color:var(--warn);border-color:var(--warn)}
.chip.bad .dot{background:var(--warn)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- nav ---- */
nav{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);
  margin-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
nav::-webkit-scrollbar{display:none}
nav button{background:none;color:var(--muted);padding:11px 13px;font-weight:700;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid transparent;white-space:nowrap}
nav button.sel{color:var(--accent);border-bottom-color:var(--accent)}
.tab{display:none}
.tab.active{display:block}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px;margin-bottom:12px}
.card.tight{padding:12px 14px}
.sect{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);margin:20px 0 9px}
.sect:first-child{margin-top:4px}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:11.5px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.empty{color:var(--muted);text-align:center;padding:30px 14px;
  border:1px dashed var(--line);border-radius:14px}
.warnbox{border:1px solid var(--warn);color:var(--warn);border-radius:12px;
  padding:11px 13px;font-size:13px;margin-bottom:12px}

/* ---- day bar ---- */
.daybar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
/* on a laptop the arrows must not end up a metre apart */
@media(min-width:900px){ .daybar{max-width:440px} }
.daybar .d{flex:1;text-align:center;font-weight:700;font-size:15px}
.daybar .d span{display:block;font-size:11.5px;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.07em}
.arw{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  width:40px;height:40px;border-radius:11px;font-size:17px;font-weight:700;flex:none}
.arw:hover{border-color:var(--accent)}
.arw:disabled{opacity:.3;cursor:not-allowed}

/* ---- the timetable ---- */
.tt{display:flex;gap:6px;margin-top:4px}
.tt-axis{width:40px;flex:none;position:relative}
.tt-axis .hr{position:absolute;left:0;right:0;font-family:var(--mono);font-size:11px;
  color:var(--muted);transform:translateY(-50%);text-align:right;padding-right:5px}
.tt-cols{flex:1;display:flex;gap:6px;min-width:0}
.tt-col{flex:1 1 0;min-width:0;position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tt-col.off{background:repeating-linear-gradient(45deg,#181513,#181513 7px,#1f1a17 7px,#1f1a17 14px)}
.tt-line{position:absolute;left:0;right:0;height:1px;background:var(--line);opacity:.65}
.tt-line.half{opacity:.28}
.tt-head{display:flex;gap:6px;margin-bottom:6px}
.tt-head .sp{width:40px;flex:none}
.tt-head .h{flex:1 1 0;min-width:0;text-align:center;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--line);border-radius:9px;padding:6px 2px;background:var(--surface)}
.tt-head .h b{display:block;color:var(--ink);font-size:13px;letter-spacing:0;text-transform:none}
.tt-head .h.off{color:var(--warn);border-color:var(--warn)}

.blk{position:absolute;left:3px;right:3px;border-radius:7px;padding:4px 6px;
  overflow:hidden;font-size:11.5px;line-height:1.25;border:1px solid transparent;
  display:flex;flex-direction:column;justify-content:flex-start}
.blk b{font-weight:700;font-size:12px;display:block;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.blk .t{font-family:var(--mono);font-size:10px;opacity:.85;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;display:block}
.blk.busy{background:var(--busy);color:var(--busy-ink);border-color:#9c5c34}
.blk.sewa{background:#7E4A2A;border-color:#9c5c34;color:#FFD9B8}
.blk.fnb{background:#2F5D4A;border-color:#3d7a61;color:#CFF0E2}
.blk.paket{background:#3A4C72;border-color:#4d6597;color:#D6E2FA}
.blk.split{background:#5F4A76;border-color:#7a5f97;color:#E6D9F5}
.blk.blokir{background:#3A322C;border-color:#4d423a;color:#A79A8E;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(0,0,0,.22) 5px,rgba(0,0,0,.22) 10px)}
.blk.now{box-shadow:0 0 0 2px var(--ok) inset}
.blk button,button.blk{width:auto;text-align:left;font-family:inherit}
.tt-now{position:absolute;left:0;right:0;height:2px;background:var(--ok);z-index:5}
.tt-now::before{content:'';position:absolute;left:0;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--ok)}

/* the rate printed on a free hour of the public grid. Muted on purpose:
   the customer is looking for a gap first and a price second. */
.price{position:absolute;right:5px;font-family:var(--mono);font-size:9.5px;
  color:var(--muted);opacity:.85;pointer-events:none;letter-spacing:-.01em}

/* One WhatsApp button, in the right place for the width: beside the price
   list on a laptop, under everything on a phone. */
.wa-wide{display:none}
@media(min-width:900px){
  .wa-wide{display:block}
  #wafoot{display:none}
}

/* the member line under the phone field */
.memchip{font-size:12.5px;border:1px solid var(--line);border-radius:10px;
  padding:8px 11px;color:var(--muted);background:var(--surface-2);min-height:36px}
.memchip.known{border-color:var(--ok);color:var(--ok)}
.memchip.fresh{border-color:var(--accent);color:var(--accent)}
.memchip b{color:var(--ink)}
.memchip.known b{color:var(--ok)}

/* ---- a price rule, kept to two rows ---- */
.bcard .f{margin-bottom:0}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}
/* Five fields in one row fits 1180px but not the 560px column Pengaturan
   actually gives it, and a clipped "5000(" is worse than a second row. */
@media(min-width:900px){ .bgrid{grid-template-columns:repeat(3,1fr)} }
.brow2{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.brow2 .dgrid{flex:1 1 210px;margin:0}
.bacts{display:flex;gap:6px;flex:none}

/* the seven day chips on a price rule: one even row, never 6 + 1 */
.dgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dgrid .btn{padding:7px 0;min-width:0;text-align:center;font-size:11.5px}

/* the line where the rate changes */
.pchg{position:absolute;left:0;right:0;height:1px;background:var(--accent);opacity:.45}

/* a tappable empty strip in the console grid */
.free{position:absolute;left:3px;right:3px;border-radius:7px;background:transparent;
  border:1px dashed transparent}
.free:hover{border-color:var(--accent);background:rgba(227,128,53,.08)}

/* ---- legend ---- */
.legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.legend i{display:inline-flex;align-items:center;gap:5px;font-style:normal;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.legend i s{width:9px;height:9px;border-radius:3px;display:inline-block;text-decoration:none}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 5px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap}
/* a money cell that wraps between "Rp" and the number reads as two figures,
   so report rows keep every number on one line and shrink instead */
table td:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:116px}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:430px){
  table{font-size:12.5px}
  th,td{padding:7px 3px}
  th{font-size:9.5px;letter-spacing:.04em}
}
tfoot td{font-weight:700;border-bottom:0;border-top:2px solid var(--line)}

/* ---- stat tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:620px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.tile b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:19px;letter-spacing:-.01em;margin-bottom:1px}
.tile span{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted)}
.tile.good b{color:var(--ok)}
.tile.bad b{color:var(--warn)}

/* ---- buttons + forms ---- */
.btn{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:10px 14px;font-weight:700;font-size:14px}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:8px}
.btn.bad{color:var(--warn);border-color:var(--warn)}
.btn.wide{width:100%;display:block;text-align:center;text-decoration:none}
.btn.wa{background:var(--jade);border-color:var(--jade);color:#EAFBF3}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.f{margin-bottom:11px}
.f label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:5px}
.f input[type=text],.f input[type=tel],.f input[type=number],.f input[type=date],
.f input[type=time],.f input[type=month],.f input[type=email],.f input[type=password],
.f select,.f textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:10px 11px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--accent)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.hint{font-size:11.5px;color:var(--muted);margin-top:4px}

/* type picker */
.tpick{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tpick button{background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  border-radius:10px;padding:9px 8px;font-size:12px;font-weight:700;text-align:left;
  text-transform:uppercase;letter-spacing:.04em}
.tpick button small{display:block;font-size:10.5px;font-weight:600;text-transform:none;
  letter-spacing:0;opacity:.75;margin-top:2px}
.tpick button.sel{color:var(--ink);border-color:var(--accent);background:rgba(227,128,53,.12)}

/* ---- sheet (booking form) ---- */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:60;display:none;
  align-items:flex-end;justify-content:center}
.sheet.open{display:flex}
.sheet .inner{width:100%;max-width:560px;max-height:92dvh;overflow:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:18px 18px 0 0;
  padding:16px 16px calc(20px + env(safe-area-inset-bottom))}
@media(min-width:620px){
  .sheet{align-items:center}
  .sheet .inner{border-radius:18px}
}
.sheet h2{font-size:17px;margin-bottom:2px}
.sheet .close{background:none;color:var(--muted);font-size:24px;line-height:1;padding:0 4px}
.money{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;margin:12px 0;font-size:13.5px}
.money div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:2.5px 0}
.money div span{min-width:0}
/* "Rp" and the number must never split across two lines — it reads as two figures */
.money div b{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.money .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:7px;font-weight:700}
.money .tot b{color:var(--accent);font-size:16px}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(120%);
  opacity:0;pointer-events:none;
  background:var(--surface-2);border:1px solid var(--accent);color:var(--ink);
  padding:10px 16px;border-radius:999px;font-size:13.5px;font-weight:600;z-index:90;
  transition:transform .22s,opacity .22s;max-width:92vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}

.foot{margin-top:24px;color:#6b6058;font-size:12px;line-height:1.6;text-align:center}

/* ---- dated price rules -------------------------------------------- */
.btagbox{display:flex;align-items:center;min-height:32px}
.btag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  padding:3px 7px;border-radius:6px;white-space:nowrap}
.btag.any{background:var(--surface-2);color:var(--muted)}
.btag.live{background:rgba(47,125,99,.18);color:var(--ok)}
.btag.soon{background:rgba(227,128,53,.16);color:var(--accent)}
.btag.off{background:var(--surface-2);color:var(--dim);text-decoration:line-through}
.bcard.old{opacity:.55}
/* the rule name is the field most often too long for its column */
.bcard .bgrid > .f:first-child{grid-column:span 2}
/* a date input carries a wide intrinsic minimum; without this it pushes
   the two-column grid past the phone's edge */
.bgrid > .f{min-width:0}
.bgrid input{width:100%;min-width:0}
.bgrid > .f.wide2{grid-column:span 2}
.bdates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px;
  padding-top:9px;border-top:1px solid var(--line)}
.bdates > .f{min-width:0;margin-bottom:0}
.bdates input{width:100%;min-width:0}
.bdates.hide{display:none}
@media(min-width:900px){ .bdates{grid-template-columns:repeat(3,1fr)} }
/* the day chips must not be squeezed by the buttons beside them: seven
   three-letter chips need ~250px before the row is better off wrapping */
.brow2 .dgrid{flex:1 1 250px}
.dgrid .btn{min-width:0;padding-inline:4px}
/* the price check sits at the foot of the left column, which is already the
   taller one; a shorter cap keeps Pengaturan on one laptop screen-and-a-bit */
#bprev.cap{max-height:240px}

/* ---- a free hour is a tap target ----------------------------------- */
.freeh{position:absolute;left:0;right:0;display:block;border-radius:7px;
  text-decoration:none;z-index:1;transition:background .12s,box-shadow .12s}
.freeh:hover,.freeh:focus-visible{background:rgba(47,125,99,.13);
  box-shadow:inset 0 0 0 1px rgba(47,125,99,.5)}
.freeh:focus-visible{outline:2px solid var(--ok);outline-offset:-2px}
/* the figure must never eat the tap meant for the hour under it */
.price{pointer-events:none;z-index:2}

/* ---- unpaid holds -------------------------------------------------- */
.holdbox{border:1px solid var(--line);border-radius:11px;background:var(--surface);
  padding:10px 12px;margin:0 0 11px}
.chkline{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  text-transform:none;letter-spacing:0;cursor:pointer}
.chkline input{width:auto;margin:0}
.holdbox .hint{margin:6px 0 0}
.holdbox .row{margin-top:9px}
.warnbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:0 10px 10px 0;background:var(--surface);
  padding:9px 12px;margin:0 0 10px;font-size:13px;color:var(--muted)}
.blk.held{outline:1px dashed rgba(227,128,53,.75);outline-offset:-2px}
.blk.lapsed{opacity:.42}
.hbadge{font-size:10.5px;font-weight:700;letter-spacing:.05em;white-space:nowrap;
  padding:2px 7px;border-radius:6px;background:rgba(227,128,53,.16);color:var(--accent)}
.hbadge.off{background:var(--surface-2);color:var(--dim);text-decoration:line-through}
.btn.ok{border-color:rgba(47,125,99,.7);color:var(--ok)}
/* the two hold states need a key, or a dashed block is just a mystery */
.legend i s.lg-held{background:#7E4A2A;outline:1px dashed rgba(227,128,53,.9);outline-offset:-1px}
.legend i s.lg-lapsed{background:#7E4A2A;opacity:.42}