:root{
  --cream:#F6EFE2; --paper:#fffdf8; --ink:#2a241d; --muted:#6d6450;
  --cognac:#B5916A; --gold:#C6A368; --line:#e7dfce; --line2:#efe8d8;
  --shadow:0 1px 3px rgba(40,30,20,.10);
}
*{ box-sizing:border-box; } html,body{ margin:0; }
[hidden]{ display:none !important; }
body{ font-family:"Be Vietnam Pro",system-ui,sans-serif; color:var(--ink); background:var(--cream); -webkit-text-size-adjust:100%; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:6px; }

/* ---- header ---- */
.top{ display:flex; align-items:center; gap:10px; padding:9px 16px; background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.top .mono{ opacity:.92; }
.ttl{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.top h1{ font-family:"EB Garamond",serif; font-size:21px; margin:0; font-weight:600; }
.summary .upd{ margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; }
.add-btn{ margin-left:auto; border:0; background:var(--cognac); color:#fff; border-radius:22px; min-height:44px; padding:0 18px; font:inherit; font-weight:600; font-size:14px; cursor:pointer; box-shadow:0 2px 8px rgba(181,145,106,.35); white-space:nowrap; }
.add-btn:active{ transform:scale(.97); }

/* ---- mode tabs ---- */
.modes{ display:flex; gap:6px; padding:7px 16px 4px; background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:49px; z-index:9; }
.modes button{ flex:0 0 auto; border:1px solid var(--line); background:#fff; border-radius:22px; min-height:44px; padding:0 18px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer; }
.modes button.on{ background:var(--ink); color:var(--cream); border-color:var(--ink); font-weight:600; }
.modes button{ transition:background-color .18s ease, color .18s ease; }
.modes button:hover:not(.on){ background:var(--cream); border-color:var(--cognac); }

/* today's summary strip — one compact line, mode-aware content */
.summary{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:7px 16px 2px; background:var(--paper); }
.summary:empty{ display:none; }
.sum-lab{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-right:1px; }
.su{ display:inline-flex; align-items:baseline; gap:4px; background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:4px 11px; font-size:12px; color:var(--muted); }
.su b{ font-size:14px; color:var(--ink); font-weight:700; }
.su small{ color:inherit; opacity:.75; font-size:11px; }
.su.in b{ color:#3a7ca5; } .su.out b{ color:#a8642a; }
.su.owe{ background:#fbecd0; border-color:#eccf9a; color:#8a6a2a; } .su.owe b{ color:#8a6a2a; }
.su.owe.zero{ background:#e3eddc; border-color:#cfe0c2; color:#5a8a4a; } .su.owe.zero b{ color:#5a8a4a; }
.su.od-pill{ background:#fbe4e0; border-color:#eebfb6; color:#b3493a; } .su.od-pill b{ color:#b3493a; }

/* ---- control bars ---- */
.ctrlbar{ display:flex; align-items:center; gap:6px; padding:7px 16px; flex-wrap:nowrap; }
.ctrlbar .nav{ flex:0 0 auto; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:#fff; font-size:18px; cursor:pointer; color:var(--ink); }
/* min-width so the native dd/mm/yyyy value never clips its year on the busy Lịch toolbar */
.ctrlbar input[type=date]{ flex:1 1 auto; min-width:118px; max-width:240px; font:inherit; font-size:14px; min-height:44px; padding:0 8px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
.today-btn{ flex:0 0 auto; border:1px solid var(--line); background:#fff; border-radius:10px; min-height:44px; padding:0 11px; font:inherit; font-size:13px; color:var(--ink); cursor:pointer; white-space:nowrap; }
/* narrow phones (≤374px): ease the date floor + button so the one-row toolbar still fits */
@media(max-width:374px){ .ctrlbar{ gap:5px; } .ctrlbar input[type=date]{ min-width:100px; font-size:13px; } .today-btn{ padding:0 8px; } }

.loading{ text-align:center; color:var(--muted); padding:48px 16px; }

/* ---- legend ---- */
.legend{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:1px 16px 7px; font-size:12px; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:18px; height:12px; border-radius:3px; display:inline-block; }
.legend i.dot{ width:13px; height:13px; border-radius:50%; }
.legend.legend-col{ flex-direction:column; align-items:flex-start; gap:13px; font-size:14px; color:var(--ink); padding:4px 0 0; }
.legend.legend-col i{ width:20px; height:13px; } .legend.legend-col i.dot{ width:14px; height:14px; }
.lg-tip{ margin:16px 0 0; font-size:12.5px; color:var(--muted); line-height:1.4; }
.nav-q{ font-weight:700; color:var(--cognac); }

/* ---- tape chart: frozen room column + scrollable date grid ----
   Room column is a non-scrolling sibling (NOT position:sticky) so it can't vanish during
   iOS momentum scroll. Heights mirror app.js: head 41 / floor 30 / room 46 → panes align. */
.tapewrap{ display:flex; align-items:flex-start; padding:2px 16px 16px; }
.roomcol{ flex:0 0 auto; background:var(--paper); border-right:1px solid var(--line); }
/* Row heights are responsive: BASE = mobile (portrait → compact, more rooms per screen);
   desktop (landscape → roomier) restores 41/30/46 in the @media block below. The roomcol
   pane height MUST equal its grid counterpart at every breakpoint (iOS two-pane align). */
.rc-corner{ height:38px; background:var(--cream); border-bottom:1px solid var(--line); }
.rc-floor{ height:26px; display:flex; align-items:flex-end; padding:0 10px 4px; background:var(--cream); color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line2); white-space:nowrap; overflow:hidden; }
.rc-room{ height:42px; display:flex; flex-direction:column; justify-content:center; padding:0 10px; border-bottom:1px solid var(--line2); overflow:hidden; }
.rc-room b{ font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-room small{ color:var(--muted); font-weight:400; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tape{ flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.grid{ display:grid; width:100%; align-items:stretch; }
.gh{ height:38px; display:flex; flex-direction:column; justify-content:center; gap:1px; text-align:center; border-bottom:1px solid var(--line); background:var(--cream); }
.gh .wd{ font-size:10px; color:var(--muted); }
.gh .dd{ font-size:12px; font-weight:500; }
.gh.today{ background:rgba(198,163,104,.22); box-shadow:inset 2px 0 0 var(--gold); }
.gh.today .wd, .gh.today .dd{ color:#9c7b34; font-weight:700; }
.gh.we .wd, .gh.we .dd{ color:#bf5b4b; }
.floorspacer{ height:26px; background:var(--cream); border-bottom:1px solid var(--line2); }
.cell{ border-right:1px solid var(--line2); border-bottom:1px solid var(--line2); height:42px; }
.cell.today{ background:rgba(198,163,104,.10); box-shadow:inset 2px 0 0 var(--gold); }
.cell.we{ background:rgba(191,91,75,.022); }
.bar{ border-radius:9px; color:#fff; font-size:12px; line-height:1.25; padding:5px 9px; margin:5px 3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; box-shadow:0 1px 5px rgba(0,0,0,.20); align-self:center; font-weight:500; z-index:1; }
.bar.inhouse{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.9), 0 1px 6px rgba(0,0,0,.28); }
.legend i.ring{ width:18px; height:12px; border-radius:3px; background:#c8b89a; box-shadow:inset 0 0 0 2px #fff; }
/* derived stay-state badge */
.stay{ font-size:10.5px; padding:1px 7px; border-radius:10px; font-weight:600; vertical-align:middle; white-space:nowrap; }
.stay-now{ background:#2a241d; color:#F6EFE2; }
.stay-soon{ background:#e9e0cd; color:#6b5e44; }
.stay-past{ background:#ece6da; color:#9a9384; }

/* ---- panes (day / table) ---- */
.pane{ max-width:760px; margin:0 auto; padding:6px 14px 24px; }
.pane.wide{ max-width:1180px; }
.floorhd{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cognac); margin:18px 4px 7px; padding-bottom:5px; border-bottom:1px solid var(--line); }
.dayhd{ text-align:center; font-family:"EB Garamond",serif; font-size:20px; margin:8px 0 4px; }
.dayhd small{ display:block; font-size:12px; font-family:"Be Vietnam Pro"; color:var(--muted); text-transform:capitalize; }
.daystat{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:0 0 12px; }
.droomwrap{ display:grid; grid-template-columns:1fr; gap:8px; }
.droom{ display:flex; gap:11px; align-items:center; padding:12px; background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.droom .chip{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.droom .rm{ font-weight:600; min-width:58px; } .droom .rm small{ display:block; color:var(--muted); font-weight:400; font-size:10.5px; }
.droom .who{ flex:1; font-size:14px; } .droom .who small{ color:var(--muted); }
.droom.free{ background:transparent; box-shadow:none; border-style:dashed; }
.droom.free .who{ color:#b3a892; }
.droom.free .chip{ background:transparent !important; box-shadow:inset 0 0 0 2px #d8cfbe; }

/* ---- table (desktop) ---- */
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; background:var(--paper); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.tbl th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:10px 12px; border-bottom:2px solid var(--line); background:var(--cream); white-space:nowrap; }
.tbl th[data-sort]{ cursor:pointer; user-select:none; }
.tbl th[data-sort]:hover{ color:var(--cognac); }
.tbl td{ padding:9px 12px; border-bottom:1px solid var(--line2); white-space:nowrap; }
.tbl tr{ cursor:pointer; }
.tbl tbody tr:nth-child(even){ background:rgba(231,223,206,.32); }
.tbl tbody tr:hover{ background:var(--cream); }
.tbl .past td{ opacity:.5; }
.tbl .gname{ font-weight:600; }
.empty{ text-align:center; color:var(--muted); padding:36px; }
/* status pill */
.st{ font-size:11px; padding:3px 10px; border-radius:20px; font-weight:600; white-space:nowrap; }
.td-dash{ color:var(--muted); }

/* ---- booking cards (mobile table) ---- */
.bcard{ display:flex; gap:11px; align-items:center; padding:13px; background:var(--paper); border:1px solid var(--line); border-radius:12px; margin-bottom:8px; box-shadow:var(--shadow); cursor:pointer; }
.bcard .chip{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.bcard .b1{ flex:1; min-width:0; } .bcard .b1 b{ font-size:14.5px; } .bcard .b1 small{ display:block; color:var(--muted); font-size:12px; }
.bcard .b2{ text-align:right; } .bcard .b2 small{ display:block; color:var(--muted); font-size:11.5px; margin-top:3px; }
.bcard.past{ opacity:.55; }

/* ---- modals ---- */
.modal{ position:fixed; inset:0; z-index:50; background:rgba(30,22,14,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal .card{ background:var(--paper); border-radius:18px; padding:22px; max-width:380px; width:100%; position:relative; max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal .x{ position:absolute; top:2px; right:4px; border:0; background:none; font-size:26px; cursor:pointer; color:var(--muted); line-height:1; min-width:44px; min-height:44px; padding:6px 12px; border-radius:50%; }
.modal .x:hover{ background:var(--cream); color:var(--ink); }
.modal h3{ font-family:"EB Garamond",serif; margin:2px 0 14px; font-size:22px; padding-right:24px; }
.row{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-top:1px solid var(--line2); font-size:14px; align-items:center; }
.row span{ color:var(--muted); } .row b{ text-align:right; }
.row a{ color:var(--cognac); text-decoration:none; font-weight:600; }
/* status editor in popup */
.editbar{ margin-top:14px; border-top:1px solid var(--line); padding-top:13px; }
.eb-lab{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:9px; }
.eb-btns{ display:flex; align-items:stretch; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:opacity .2s; }
.eb-btns button{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; border:0; border-right:1px solid var(--line); border-radius:0; background:#fff; color:var(--ink); min-height:44px; padding:8px 6px; font:inherit; font-size:12px; line-height:1.2; cursor:pointer; transition:background-color .18s ease; }
.eb-btns button:last-child{ border-right:0; }
.eb-btns button.on{ background:var(--c); color:#fff; font-weight:600; }
.eb-msg{ font-size:13px; min-height:1em; margin-top:9px; } .eb-msg.ok{ color:#5a8a4a; } .eb-msg.err{ color:#bf5b4b; }

/* ---- form ---- */
.form form{ display:flex; flex-direction:column; gap:11px; }
.form label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); font-weight:500; }
.form input, .form select{ font:inherit; font-size:16px; color:var(--ink); padding:11px; border:1px solid var(--line); border-radius:10px; background:#fff; width:100%; }
.form .two{ display:flex; gap:10px; } .form .two label{ flex:1; min-width:0; }
/* room field: label + live availability count, then a compact dropdown */
.fld{ display:flex; flex-direction:column; gap:4px; }
.flab{ font-size:12px; color:var(--muted); font-weight:500; display:inline-flex; align-items:center; gap:7px; }
.flab .avail{ display:inline-block; font-weight:600; font-size:11px; padding:2px 9px; border-radius:12px; background:#e3eddc; color:#4d7a3e; border:1px solid #cfe0c2; }
.flab .avail:empty{ display:none; }
.flab .avail.none{ background:#fbe4e0; color:#b3493a; border-color:#eebfb6; }
.form select:disabled{ opacity:.5; }
.form .submit{ position:sticky; bottom:-22px; margin:6px -22px -22px; border:0; background:var(--ink); color:var(--cream); border-radius:0 0 18px 18px; padding:15px; font:inherit; font-weight:600; font-size:15px; cursor:pointer; box-shadow:0 -10px 18px -8px var(--paper); }
.form .submit:disabled{ opacity:.5; }
.form-msg{ margin:0; font-size:13px; min-height:1em; } .form-msg.err{ color:#bf5b4b; } .form-msg.ok{ color:#5a8a4a; }

/* ---- desktop ---- */
@media(min-width:760px){
  .top{ padding:13px 28px; } .top h1{ font-size:24px; }
  .modes{ top:58px; padding:10px 28px 6px; } .legend{ padding:2px 28px 10px; }
  .tapewrap{ padding:2px 28px 16px; } .pane{ padding:8px 28px 30px; }
  .modal .card{ max-width:440px; }
  /* landscape → roomier rows + bigger, more legible labels (mobile keeps the compact base) */
  .rc-corner, .gh{ height:41px; }
  .rc-floor, .floorspacer{ height:30px; }
  .rc-room, .cell{ height:46px; }
  .rc-room b{ font-size:16px; } .rc-room small{ font-size:12px; }
  /* toolbar reads as a left-aligned cluster, not a stretched date field in a thin strip */
  .ctrlbar{ padding:10px 28px; justify-content:flex-start; }
  .ctrlbar input[type=date]{ flex:0 0 auto; width:172px; }
  /* Bảng table + Theo-ngày fill the width instead of a centered narrow card */
  .pane.wide, .pane.day{ max-width:none; }
  .droomwrap{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
  /* dashboard strip under the Lịch grid uses the space a sparse 8-room grid leaves below */
  .tapestats{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:14px 28px 8px; margin:2px 28px 0; border-top:1px solid var(--line); }
  .tapestats .sum-lab{ margin-right:3px; }
}
@media(max-width:759px){ .tapestats{ display:none; } }
/* ---- mobile: stack form 2-col rows ---- */
@media(max-width:520px){
  .form .two{ flex-direction:column; gap:11px; }
}
@media(max-width:759px){ .modes{ overflow-x:auto; -webkit-overflow-scrolling:touch; } }

/* ====== PER-HOTEL: Phú Quốc — sea-green identity + denser tape (25 rooms) ======
   Đà Nẵng keeps the default cognac/gold. Theme is a retint of the brand accent so staff know
   which hotel they're in at a glance; the engine is shared. */
body[data-hotel="pq"]{ --cognac:#3E8E7E; --gold:#4FA08D; }
body[data-hotel="pq"] .gh.today{ background:rgba(62,142,126,.16); }
body[data-hotel="pq"] .cell.today{ background:rgba(62,142,126,.08); }
body[data-hotel="pq"] .modes button.on{ background:#2f5d54; border-color:#2f5d54; }
/* 25 rooms → keep the tape compact even on desktop (don't restore to 46/30/41). Pairs MUST
   stay equal (roomcol pane == grid pane) for the iOS two-pane alignment. */
@media(min-width:760px){
  body[data-hotel="pq"] .rc-room, body[data-hotel="pq"] .cell{ height:42px; }
  body[data-hotel="pq"] .rc-corner, body[data-hotel="pq"] .gh{ height:38px; }
  body[data-hotel="pq"] .rc-floor, body[data-hotel="pq"] .floorspacer{ height:26px; }
}