:root{
  --green:#33502E; --sage:#A8BA9C; --leaf:#EEF3EA; --ink:#1E2A1B; --muted:#5C7A52;
  --line:#D5DDCF; --bg:#FAFBF8; --card:#fff; --danger:#a33;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#E8EEE4; --bg:#141912; --card:#1C2319; --line:#2E3A2A; --leaf:#232C20; --muted:#9DB592; --green:#4F7A44;--danger:#FF8A80;--accent:#9DC28F; --sage:#4B6342; }
}
*{box-sizing:border-box}
body{margin:0;font-family:Tahoma,"Leelawadee UI","Noto Sans Thai",system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:15px}
.hidden{display:none!important}
.muted{color:var(--muted)}
.spacer{flex:1}
button{font:inherit;cursor:pointer;border:1px solid var(--green);background:var(--green);color:#fff;border-radius:8px;padding:8px 14px;min-height:40px}
button.ghost{background:transparent;color:var(--green)}
button:hover{filter:brightness(1.08)}
input{font:inherit;font-size:16px;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);min-height:48px}
label{display:block;margin:12px 0;font-size:13px;color:var(--muted)}
label.inline{display:flex;gap:8px;align-items:center;margin:0}
label.inline input{width:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.narrow{max-width:380px;margin:12vh auto 0}
.brand{text-align:center;margin-bottom:8px}
.logo{display:block;font-family:Georgia,serif;letter-spacing:8px;font-size:28px;color:var(--green)}
.logo.small{display:inline;font-size:18px;letter-spacing:5px}
.sub{font-size:11px;letter-spacing:3px;color:var(--muted)}
h1{font-size:18px;margin:16px 0 4px}
.msg{min-height:1.2em;color:var(--danger);font-size:13px;margin:8px 16px}
.narrow .msg{margin:8px 0}
.bar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:5}
#views button{background:transparent;color:var(--green);border-color:transparent}
#views button.active{background:var(--leaf);border-color:var(--line)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px}
.toolbar strong{margin-left:8px}
.legend{display:flex;flex-wrap:wrap;gap:12px;padding:0 16px 8px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-2px}

.calwrap{overflow-x:auto;padding:0 16px 24px}
.cal{display:grid;min-width:680px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.cal .head,.cal .roomrow{display:grid;grid-template-columns:150px 1fr}
.cal .dayhead{display:grid}
.cal .dh{font-size:11px;text-align:center;padding:6px 0;border-left:1px solid var(--line);color:var(--muted)}
.cal .dh.today{background:var(--leaf);color:var(--green);font-weight:bold}
.cal .dh.wknd{background:color-mix(in srgb,var(--leaf) 60%,transparent)}
.cal .roomname{padding:8px;font-size:12px;border-top:1px solid var(--line);background:var(--leaf);position:sticky;left:0;z-index:2}
.cal .lane{position:relative;display:grid;border-top:1px solid var(--line)}
.cal .cell{border-left:1px solid var(--line);min-height:34px}
.cal .cell.today{background:var(--leaf)}
.bk{position:relative;z-index:1;margin:3px 2px;padding:3px 6px;border-radius:6px;font-size:12px;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#fff;cursor:pointer;border:0;text-align:left;min-height:28px}
.bk small{opacity:.85}

dialog{border:1px solid var(--line);border-radius:14px;padding:20px 22px;max-width:460px;width:92vw;background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.4)}
.close{position:absolute;right:10px;top:10px;min-height:32px;padding:2px 10px}
dl{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;margin:12px 0}
dt{color:var(--muted);font-size:13px}dd{margin:0;word-break:break-word}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
@media (max-width:640px){
  .cal .head,.cal .roomrow{grid-template-columns:96px 1fr}
  .toolbar strong{width:100%;margin:4px 0 0}
}

/* ---- Day view (phone-first list) */
.daylist{padding:0 16px 32px;max-width:720px;margin:0 auto}
.daylist h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:20px 0 8px}
.daylist h2 span{background:var(--leaf);border-radius:10px;padding:1px 8px;margin-left:6px;color:var(--green)}
.item{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:var(--card);color:var(--ink);border:1px solid var(--line);border-left:6px solid var(--green);border-radius:10px;padding:12px 14px;margin-bottom:8px;min-height:56px}
.item small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.item b{font-size:15px}
.item .when{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.empty{color:var(--muted);padding:12px 2px}

@media (max-width:640px){
  .bar{padding:8px 12px;gap:6px}
  #views button{padding:6px 10px;min-height:36px}
  .bar .logo.small{font-size:15px;letter-spacing:3px}
  #signOut{padding:6px 10px;min-height:36px;white-space:nowrap}
  .toolbar{padding:10px 12px}
  .toolbar label.inline{order:5}
  #printSheet{order:6}
  .legend,.calwrap{padding-left:12px;padding-right:12px}
  .cal .roomname{font-size:11px;padding:6px}
}

/* ---- brand graphics */
body:has(#login:not(.hidden)){background:var(--bg) url(assets/login-pattern.svg) center/cover no-repeat fixed}
.brand{background:var(--green);border-radius:10px;padding:18px 12px;margin:-8px -8px 8px}
.brand img{display:block;width:100%;max-width:260px;height:auto;margin:0 auto}
@media (prefers-color-scheme: dark){ .brand{background:#26391F} }

/* ---- accessibility + states (from UX review) */
:root{color-scheme:light dark}
:focus-visible{outline:3px solid #2D7FF9;outline-offset:2px}
.status{min-height:1.2em;color:var(--muted);font-size:13px;margin:8px 16px}
.status.err{color:var(--danger)}
.status button{margin-left:8px;min-height:32px;padding:2px 10px}
label.check{display:flex;align-items:center;gap:8px;margin:8px 0}
label.check input{width:auto;min-height:0}
.close{min-height:44px;min-width:44px}
.bk{min-height:32px}
@media (pointer:coarse){.bk{min-height:44px}.cal .cell{min-height:48px}}
a.tel{color:var(--green);font-weight:bold}
.badge{display:inline-block;font-size:10px;font-weight:bold;letter-spacing:.04em;color:#fff;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px}

/* ---- Print tab */
body.printmode .toolbar{display:none}
.printtab{max-width:620px;margin:0 auto;padding:4px 16px 40px}
.quick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.quick input{width:auto;min-height:44px}
.quick button{min-height:44px}
.pdate{font-size:20px;margin:12px 0 2px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0}
.pcard h3{margin:0 0 4px;font-size:16px}
.pcard button{min-height:48px;font-size:16px;width:100%;margin-top:6px}
.plist{list-style:none;padding:0;margin:8px 0}
.plist li{border-top:1px solid var(--line)}
.plist label.check{margin:0;padding:10px 0;align-items:flex-start;color:var(--ink);font-size:15px}
.plist input{width:22px;height:22px;margin-top:2px}
.plist small{display:block;color:var(--muted);font-size:12px}
button:disabled{opacity:.5;cursor:not-allowed}

/* ---- New booking */
#views .cta{background:var(--green);color:#fff;border-color:var(--green)}
#views .cta.active{outline:2px solid var(--sage)}
.newbk{max-width:620px;margin:0 auto;padding:8px 16px 48px}
.steps{display:flex;gap:6px;list-style:none;padding:0;margin:8px 0 16px;font-size:12px}
.steps li{flex:1;text-align:center;padding:8px 4px;border-radius:8px;background:var(--leaf);color:var(--muted)}
.steps li.on{background:var(--green);color:#fff;font-weight:bold}
.steps li.done{color:var(--green)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.grid2 .span2{grid-column:1 / -1}
.grid2 button{min-height:48px;font-size:16px;margin-top:8px}
.room{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 8px;min-height:60px}
.room small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.room .price{font-weight:bold;white-space:nowrap}
.room.sel{border-color:var(--green);background:var(--leaf)}
.room[disabled]{opacity:.55;cursor:not-allowed}
#nbNext,.pcard .row button,.done button{min-height:48px;font-size:16px;width:100%;margin-top:8px}
.pcard .row{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.summary{background:var(--leaf);border-radius:10px;padding:12px 14px;margin:0 0 12px}
.notice{background:var(--leaf);border:1px dashed var(--line);border-radius:8px;padding:10px 12px;color:var(--muted);font-size:13px}
.done h3{color:var(--green)}
.room.whole{border-style:dashed;border-color:var(--sage)}
.room.whole.sel{border-style:solid}
#views .cta.active{background:var(--green);color:#fff;border-color:var(--green);outline:2px solid var(--sage)}