/* ============================================================
   PM Stay OS — stylesheet
   แปลงตรงจาก design system tokens.json (PM Stay OS v1, theme Ivory)
   ============================================================ */

:root{
  /* color */
  --canvas:#f3eee4; --surface:#fbf8f2; --surface-raised:#fffdf8; --surface-sunken:#ebe4d6;
  --line:#e3dbcc; --line-strong:#8f8672;
  --ink:#24271d; --ink-muted:#5c5a4d; --ink-subtle:#69655a; --ink-disabled:#b0aa9a;
  --moss-900:#2c3521; --moss-700:#3f4b2e; --moss-500:#66724b; --moss-200:#d6dac4; --moss-100:#e7e9db;
  --olive:#7d8553; --teak:#8a6a48; --on-primary:#f7f3ea; --sun:#d29a43;
  --focus-ring:#2f5d8a;
  --st-confirmed-bg:#e2e8d6; --st-confirmed-ink:#3b5230;
  --st-inhouse-bg:#3f4b2e;  --st-inhouse-ink:#f7f3ea;
  --st-pending-bg:#f3e6c8;  --st-pending-ink:#704c12;
  --st-cancelled-bg:#f4ded7;--st-cancelled-ink:#963726;
  --st-out-bg:#e8e3d8;      --st-out-ink:#56544a;
  --unit-treehouse:#8a6a48; --unit-mainhouse:#3f4b2e; --unit-room:#7d8553; --unit-tent:#5e6e78;
  --scrim:rgba(28,31,22,.44);
  /* type */
  --font-display:"Newsreader","Noto Serif Thai",Georgia,serif;
  --font-sans:"Sarabun","Thonburi",system-ui,sans-serif;
  /* spacing / radius / size / shadow */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s12:48px;
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --touch:44px; --btn-lg:52px; --field-h:52px; --chip-h:36px; --nav-h:64px;
  --sh-card:0 1px 2px rgba(58,50,32,.06),0 6px 18px rgba(58,50,32,.06);
  --sh-float:0 2px 6px rgba(42,38,26,.08),0 14px 34px rgba(42,38,26,.12);
  --sh-sheet:0 -10px 40px rgba(28,31,22,.16);
  --sh-button:0 1px 0 rgba(255,255,255,.12) inset,0 4px 12px rgba(44,53,33,.22);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);background:var(--canvas);color:var(--ink);
  font-size:16px;line-height:1.625;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + var(--s12) + env(safe-area-inset-bottom));
}
.app{max-width:560px;margin:0 auto}

/* ---------- type styles ---------- */
.t-display{font-family:var(--font-display);font-size:34px;line-height:40px;font-weight:400;letter-spacing:-.01em}
.t-title1{font-family:var(--font-display);font-size:26px;line-height:36px;font-weight:400}
.t-title2{font-family:var(--font-display);font-size:20px;line-height:30px;font-weight:500}
.t-numeral{font-family:var(--font-display);font-size:30px;line-height:34px;font-weight:400}
.t-overline{font-size:11px;line-height:16px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-subtle)}
.t-headline{font-size:17px;line-height:26px;font-weight:600}
.t-body{font-size:16px;line-height:26px;font-weight:400}
.t-label{font-size:15px;line-height:22px;font-weight:500}
.t-caption{font-size:14px;line-height:22px;font-weight:400;color:var(--ink-muted)}
.t-micro{font-size:12px;line-height:18px;font-weight:500}

/* ---------- layout ---------- */
.screen{display:none;padding:0 var(--s5)}
.screen.on{display:block}
.section{margin-top:var(--s6)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s3)}

/* header photo + overlap card (Home) */
.hero{position:relative;margin:0 calc(-1 * var(--s5))}
.hero img{width:100%;height:210px;object-fit:cover;display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(243,238,228,0) 40%,var(--canvas) 100%)}
.hero-top{padding:var(--s5) var(--s5) var(--s2);display:flex;justify-content:space-between;align-items:flex-start}
.overlap{margin-top:calc(-1 * var(--s8));position:relative;z-index:2}

/* ---------- cards ---------- */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--s4)}
.card.float{box-shadow:var(--sh-float)}
.card + .card{margin-top:var(--s3)}
.hairline{border:0;border-top:1px solid var(--line);margin:var(--s3) 0}
.row{display:flex;align-items:center;gap:var(--s3)}
.row .grow{flex:1;min-width:0}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:var(--s2)}
.stats .t-numeral{color:var(--moss-700)}
.stats .t-caption{margin-top:2px}

/* quick actions */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.qa button{background:var(--surface);border:0;border-radius:var(--r-lg);box-shadow:var(--sh-card);
  padding:var(--s3) var(--s1);display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:inherit;font-size:12px;line-height:18px;font-weight:500;color:var(--ink);cursor:pointer}
.qa button:active{background:var(--moss-100)}
.qa img{width:28px;height:28px}

/* ---------- icons ---------- */
.ic{width:24px;height:24px;display:block}
.ic.off{filter:grayscale(1) opacity(.55)}
.ic.lg{width:36px;height:36px}

/* ---------- buttons ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--btn-lg);padding:0 var(--s5);border-radius:var(--r-md);
  font-family:inherit;font-size:15px;line-height:22px;font-weight:500;cursor:pointer;border:0;
  transition:transform .12s ease}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--moss-700);color:var(--on-primary);box-shadow:var(--sh-button)}
.btn-primary:active{background:var(--moss-900)}
.btn-secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-ghost{background:transparent;color:var(--moss-700);box-shadow:inset 0 0 0 1px var(--moss-500)}
.btn-danger{background:transparent;color:var(--st-cancelled-ink);box-shadow:inset 0 0 0 1px var(--st-cancelled-ink)}
.btn-sm{min-height:var(--touch);padding:0 var(--s4);font-size:14px}
.btn.block{width:100%}
.btn[disabled]{background:var(--surface-sunken);color:var(--ink-disabled);box-shadow:none;cursor:default}
:is(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- status chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:var(--chip-h);padding:0 var(--s3);
  border-radius:var(--r-pill);font-size:14px;font-weight:500;white-space:nowrap}
.chip svg{width:14px;height:14px}
.chip.wait{background:var(--st-pending-bg);color:var(--st-pending-ink)}
.chip.confirmed{background:var(--st-confirmed-bg);color:var(--st-confirmed-ink)}
.chip.checked_in{background:var(--st-inhouse-bg);color:var(--st-inhouse-ink)}
.chip.checked_out{background:var(--st-out-bg);color:var(--st-out-ink)}
.chip.cancelled{background:var(--st-cancelled-bg);color:var(--st-cancelled-ink)}

/* unit dot */
.udot{width:10px;height:10px;border-radius:50%;flex:none}
.udot.tree{background:var(--unit-treehouse)}
.udot.house{background:var(--unit-mainhouse)}
.udot.room{background:var(--unit-room)}
.udot.camp{background:var(--unit-tent)}

/* ---------- stay card ---------- */
.stay-dates{display:flex;align-items:center;gap:var(--s3);background:var(--surface-sunken);
  border-radius:var(--r-md);padding:var(--s2) var(--s3);margin-top:var(--s3)}
.sd-cell{flex:1;text-align:center}
.sd-cell .d{font-family:var(--font-display);font-size:26px;line-height:30px}
.sd-cell .m{font-size:13px;font-weight:500;color:var(--ink-muted)}
.sd-sep{text-align:center;color:var(--ink-muted);font-size:13px;font-weight:500;min-width:52px}
.sd-sep .n{color:var(--ink);font-weight:600}
.due-line{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s3);
  background:var(--moss-100);border-radius:var(--r-md);padding:var(--s2) var(--s3)}
.due-line.paid{background:var(--st-confirmed-bg)}
.due-line b{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--moss-700)}

/* ---------- segmented control ---------- */
.seg{display:flex;background:var(--surface-sunken);border-radius:var(--r-md);padding:4px;gap:4px}
.seg button{flex:1;min-height:40px;border:0;border-radius:var(--r-sm);background:transparent;
  font-family:inherit;font-size:15px;font-weight:500;color:var(--ink-muted);cursor:pointer;transition:background .22s}
.seg button.on{background:var(--surface-raised);color:var(--ink);box-shadow:var(--sh-card)}

/* ---------- calendar ---------- */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}
.cal-nav{display:flex;gap:var(--s2)}
.cal-nav button{width:var(--touch);height:var(--touch);border-radius:var(--r-sm);border:0;
  background:var(--surface);box-shadow:var(--sh-card);font-size:17px;color:var(--moss-700);cursor:pointer}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{text-align:center;font-size:12px;font-weight:500;color:var(--ink-subtle);padding:6px 0}
.cal-day{position:relative;aspect-ratio:1;border:0;border-radius:var(--r-sm);background:transparent;
  font-family:inherit;font-size:15px;color:var(--ink);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cal-day:disabled{color:var(--ink-disabled);cursor:default}
.cal-day.closed{background:repeating-linear-gradient(45deg,var(--surface-sunken) 0 4px,var(--canvas) 4px 8px);color:var(--ink-subtle)}
.cal-day.today::before{content:"";position:absolute;top:5px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--sun)}
.cal-day.sel{background:var(--moss-700)!important;color:var(--on-primary);font-weight:600}
.cal-day.inrange{background:var(--moss-200)}
.cal-day:not(:disabled):not(.sel):active{background:var(--moss-100)}
.cal-bars{display:flex;gap:2px;height:5px;align-items:flex-end}
.cal-bars i{width:5px;border-radius:2px;display:block}
.cal-bars i.tree{background:var(--unit-treehouse);height:5px}
.cal-bars i.house{background:var(--unit-mainhouse);height:5px}
.cal-bars i.room{background:var(--unit-room);height:3px}
.cal-legend{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3);font-size:12px;color:var(--ink-muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}

/* ---------- forms ---------- */
.field{margin-top:var(--s4)}
.field label{display:block;font-size:15px;font-weight:500;margin-bottom:6px}
.input,select.input,textarea.input{width:100%;min-height:var(--field-h);border-radius:var(--r-md);
  border:0;box-shadow:inset 0 0 0 1px var(--line-strong);background:var(--surface);
  font-family:inherit;font-size:16px;color:var(--ink);padding:12px var(--s4)}
textarea.input{min-height:84px;resize:vertical}
.input::placeholder{color:var(--ink-subtle)}
.stepper{display:flex;align-items:center;gap:var(--s3)}
.stepper button{width:var(--touch);height:var(--touch);border-radius:var(--r-sm);border:0;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);font-size:19px;color:var(--moss-700);cursor:pointer}
.stepper b{font-family:var(--font-display);font-size:24px;min-width:40px;text-align:center;font-weight:500}
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.opt{min-height:var(--btn-lg);border-radius:var(--r-md);border:0;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s2)}
.opt.on{background:var(--moss-700);color:var(--on-primary)}
.opt.full{grid-column:1/-1}
.opt[disabled]{background:var(--surface-sunken);color:var(--ink-disabled);box-shadow:none;cursor:default}
.chips-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.fchip{height:var(--chip-h);padding:0 var(--s4);border-radius:var(--r-pill);border:0;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-family:inherit;
  font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.fchip.on{background:var(--moss-200);box-shadow:inset 0 0 0 1px var(--moss-500)}

/* step progress */
.stepdots{display:flex;gap:6px;justify-content:center;margin:var(--s3) 0}
.stepdots i{width:8px;height:8px;border-radius:50%;background:var(--moss-200)}
.stepdots i.on{background:var(--moss-700);width:22px;border-radius:4px}

/* ---------- bottom sheet ---------- */
.sheet-ov{position:fixed;inset:0;background:var(--scrim);z-index:100;display:none;align-items:flex-end;justify-content:center}
.sheet-ov.show{display:flex}
.sheet{background:var(--surface-raised);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-sheet);
  padding:var(--s5) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom));
  animation:rise .32s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.sheet-grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto var(--s4)}
.sheet h3{font-family:var(--font-display);font-size:26px;line-height:36px;font-weight:400;margin-bottom:var(--s1)}
.sheet .sub{color:var(--ink-muted);font-size:14px;margin-bottom:var(--s4)}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}.btn{transition:none}.seg button{transition:none}}

/* sticky footer */
.flowfoot{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,253,248,0),var(--surface-raised) 30%);
  padding-top:var(--s4);margin-top:var(--s5);display:flex;align-items:center;gap:var(--s4)}
.flowfoot .total{flex:1}
.flowfoot .total b{font-family:var(--font-display);font-size:24px;font-weight:500}

/* ---------- bottom nav ---------- */
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--s3) + env(safe-area-inset-bottom));
  width:min(92%,520px);height:var(--nav-h);background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-float);display:flex;z-index:50}
.nav button{flex:1;border:0;background:none;font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:12px;line-height:18px;font-weight:500;color:var(--ink-subtle);border-radius:var(--r-xl)}
.nav button.on{color:var(--moss-700)}
.nav img{width:24px;height:24px}
.nav button:not(.on) img{filter:grayscale(1) opacity(.55)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(16px);bottom:calc(var(--nav-h) + var(--s8));
  background:var(--moss-900);color:var(--on-primary);border-radius:var(--r-md);padding:12px 18px;
  font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:88%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- login ---------- */
.login{position:fixed;inset:0;background:var(--canvas);z-index:300;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s6);text-align:center}
.login.show{display:flex}
.login .mark{font-family:var(--font-display);font-size:34px;letter-spacing:-.01em}
.login .err{color:var(--st-cancelled-ink);font-size:14px;font-weight:500;max-width:320px;min-height:22px}

/* ---------- empty / skeleton ---------- */
.empty{background:var(--surface-sunken);border-radius:var(--r-md);padding:var(--s4);
  text-align:center;color:var(--ink-subtle);font-size:14px}
.skel{background:var(--surface-sunken);border-radius:var(--r-md);height:72px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}

/* ---------- copy sheet ---------- */
.msgbox{background:var(--surface-sunken);border-radius:var(--r-md);padding:var(--s3) var(--s4);
  font-size:14px;line-height:1.7;white-space:pre-wrap;margin:var(--s3) 0;max-height:40vh;overflow:auto}

/* ---------- report (print) ---------- */
.rp-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:var(--s3)}
.rp-table th{text-align:left;border-bottom:2px solid var(--line-strong);padding:6px 6px;font-weight:600;white-space:nowrap}
.rp-table td{border-bottom:1px solid var(--line);padding:7px 6px;vertical-align:top}
.rp-table .num{text-align:right;white-space:nowrap}
.rp-sum{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.rp-sum div{background:var(--surface-sunken);border-radius:var(--r-sm);padding:6px 12px;font-size:12.5px;font-weight:500}
.rp-sum b{display:block;font-family:var(--font-display);font-size:17px;font-weight:500;color:var(--moss-700)}
#reportWrap{display:none}
#reportWrap.show{display:block;position:fixed;inset:0;background:var(--surface-raised);z-index:400;overflow:auto;padding:var(--s5)}
@media print{
  body.printing > *:not(#reportWrap){display:none!important}
  #reportWrap{position:static!important;display:block!important;padding:0}
  .noprint{display:none!important}
  @page{size:A4;margin:12mm}
}