(no body rows), so it's ~64px tall on its own. Sticky
on the th alone gets bounded by that tiny table as its containing block
and stops working the moment you scroll past 64px - it needs to be the
TABLE that sticks to .wrap's top so the th's have something tall enough
to stick within. (The classic "sticky thead th" pattern works because
thead and tbody normally share one tall table; here they're deliberately
separate tables, so that assumption doesn't hold.) */
/* Rounds only its TOP corners, not all four - table.boardavail sits flush
underneath it (no gap) to form what reads as one combined header unit,
and a fully-rounded boardhead would round ITS bottom corners too, right
above boardavail's own square top corners: two mismatched curves stacked
at the same seam, which is exactly the "two borders, only one rounded"
look. Squaring off the shared seam on both sides (see table.boardavail's
matching top-corner reset below) makes the pair read as a single rounded
card instead.
overflow:hidden is the other half of this fix, at EVERY corner (not just
the shared seam): with border-collapse:separate, a table's border-radius
only bends the outer 1px border STROKE - it does nothing to the actual
cell backgrounds underneath (th.bedcol's own background, .we's tint,
etc.), which stay sharp rectangles and visibly poke past the curve at
each corner unless something clips them. overflow:hidden makes the table
itself that clip boundary. Safe with position:sticky here specifically
because the overflow lives ON the sticky element, not on an ancestor of
it - it's an ancestor's overflow that breaks sticky, not its own. */
table.boardhead{position:sticky;top:0;z-index:4;border:1px solid var(--line);
border-radius:var(--r) var(--r) 0 0;background:var(--paper);overflow:hidden}
table.boardhead th{background:var(--paper);
font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:9px;letter-spacing:.05em;
text-transform:uppercase;color:var(--maroon-deep);padding:7px 2px 8px;text-align:center;
line-height:1.25;border-bottom:1px solid var(--line)}
table.boardhead th .dd{display:block;margin-top:4px}
table.boardhead th .dnum{display:inline-flex;align-items:center;justify-content:center;
width:21px;height:21px;border-radius:50%;font-family:'IBM Plex Sans',sans-serif;
font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:0;text-transform:none}
table.boardhead th.we{background:var(--we)}
table.boardhead th.today .dnum{background:var(--maroon);color:#fff}
/* Rounded-rect, not circle: a circular hover fill around a glyph this small
claims a lot more visual real estate than the glyph itself needs. Stays
transparent in both states - hover reads via the arrow itself darkening,
not a background fill - so there's no shape at all until you look for it. */
.arrow{width:20px;height:22px;padding:0;border:0;background:transparent;color:var(--maroon);
border-radius:5px;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
cursor:pointer}
.arrow:hover:not(:disabled){color:var(--maroon-deep)}
.arrow:disabled{opacity:.3;cursor:not-allowed}
tr.bedrow{height:var(--row-h)}
/* Extra left indent (on top of .bedcol's own 10px) so a bed code reads as
nested under its room name above, rather than flush with the left edge
like a heading of its own. */
td.bedlbl{font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding-left:20px}
td.bedlbl .pos{color:var(--slate);font-size:9px;margin-left:7px}
/* -- one bordered, rounded card per room --
Border AND rounding live on .roomrow and .roomtbl directly, not on
.roomcard itself, for two independent reasons: (1) a wrapping border here
would sit outside .roomtbl and shift its left edge by the border width,
breaking pixel alignment with .boardhead/.boardavail; (2) .roomcard must
never get `overflow` set to anything but visible - overflow:hidden here
silently breaks position:sticky on .roomrow below (top:81px) and on
every .bedcol inside .roomtbl, because it becomes a new "nearest
scrolling ancestor" that those sticky elements latch onto instead of
.wrap, even though .roomcard itself never actually scrolls.
Cost 30 minutes to find once; don't reintroduce it. */
.roomcard{background:#fff;border-radius:var(--r);margin:10px 0}
/* .roomrow is the full WIDTH (same as .roomtbl below it) so its colored bar
covers every column - and, being desktop-only-sized to fit the viewport
(see computeBoardDays in app.js), that full width is normally also the
entire visible area, so a plain (non-horizontally-sticky) flex row here
already keeps the room name on screen without any extra trick. It only
needs to stick vertically: top so the name stays readable while its beds
scroll past underneath - releasing automatically once the card scrolls
out, since it's bounded by its own containing block, .roomcard, no JS
needed. top is header height + the "available" bar height stacked below
it (see table.boardhead / table.boardavail) - measured, not guessed; if
either of those change height, this has to move with them.
(This used to need a second, narrower "-inner" wrapper with its own
`position:sticky;left:0` so the name could slide within the full-width
bar as you scrolled sideways - removed along with the rest of the
horizontal-scroll machinery now that the board doesn't need it. If
mobile support brings horizontal overflow back, that wrapper is the
piece to reintroduce, the same way .bedcol's own comment describes for
the bed-code column.) */
.roomrow{cursor:pointer;background:var(--sand);border:1px solid var(--line);border-bottom:0;
border-radius:var(--r) var(--r) 0 0;position:sticky;top:81px;z-index:3;
display:flex;align-items:center;gap:9px;padding:9px 12px}
.roomrow:hover{background:var(--we-soft)}
.roomrow .cv{width:10px;flex:0 0 auto;color:var(--maroon);font-size:9px}
.roomrow .rc-name{font-weight:600;font-size:13px;color:var(--ink);white-space:nowrap}
.roomrow .rc-meta{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--slate);white-space:nowrap}
.roomrow .rc-chip{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--maroon-deep);
background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px;
white-space:nowrap}
/* Left-aligned, not pushed to the far edge with margin-left:auto: .roomrow is as wide
as the full date range, same as .roomtbl beneath it, which on a narrow window (or a
phone, if the rail's mobile stack ever gets an occupancy view) can still run wider
than the screen - right-aligning here would put the chip/tag off in that overflow
instead of next to the name where it's always visible. */
/* overflow:hidden for the same reason as table.boardhead/boardavail above:
.wrap table{border-collapse:separate} (this table included) means its own
cells - the last bed row, the AVAILABLE row's tinted backgrounds - paint
as sharp rectangles that ignore this table's own border-radius unless
something clips them. Safe on the table itself, unlike on .roomcard (see
that class's own comment) - this table has no sticky descendants of its
own to break. */
table.roomtbl{background:#fff;border:1px solid var(--line);border-top:0;
border-radius:0 0 var(--r) var(--r);overflow:hidden}
td.n{text-align:center;color:#DAD0BE;font-family:'IBM Plex Mono',monospace}
td.n.we{background:var(--we-soft)}
td.pip{padding:0}
td.pip.we{background:var(--we-soft)}
.pipbar{height:9px;margin:4px 3px;border-radius:2px;background:var(--line-soft)}
.pipbar.f{background:var(--maroon)}
.pipbar.h{background:var(--green)}
td.blk{padding:0 7px;text-align:left;cursor:pointer;
border-top:2px solid transparent;border-bottom:2px solid transparent}
td.blk:hover{filter:brightness(.955)}
/* Only a not-yet-arrived (status Booked) block is draggable - see board.js.
grab/grabbing overrides the plain pointer cursor .blk gets by default. */
td.blk.movable{cursor:grab}
td.blk.movable:active{cursor:grabbing}
td.blk.dragging{opacity:.35}
/* Highlighted while a drag is over it - JS only ever adds this to a row in
the SAME room as the drag's source (see app.js dragover), so its mere
presence already means "this bed, this room, would work". A soft tinted
band across the row plus a slim top/bottom accent line, not a dashed box
around every individual cell - reads as one continuous target, and the
background transition makes it track the mouse smoothly instead of
snapping cell to cell. */
tr.drop-ok td{background:rgba(46,107,79,.1);
border-top:1.5px solid var(--green);border-bottom:1.5px solid var(--green);
transition:background .12s ease}
tr.drop-ok td.bedcol{background:rgba(46,107,79,.16)}
/* Keeping a long booking bar's name visible while scrolling past its start
is handled in JS (app.js stickyNames()), not CSS position:sticky - sticky
inside a colspan'd | turned out to size and position inconsistently
between rows (measured: some cells landed at their natural position,
others partway across, others at the fully-stuck offset, with no CSS
difference between them) rather than a browser-support gap, so it wasn't
safe to build on. A `transform: translateX()` recomputed on scroll has no
such ambiguity - it's just arithmetic. */
.nm{font-weight:600;font-size:11px;display:inline-block;max-width:100%;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
td.st-Booked{background:var(--fill-booked);border-top-color:var(--maroon)}
td.st-In-house{background:var(--fill-inhouse);border-top-color:var(--green)}
td.st-Departed{background:var(--fill-departed);border-top-color:var(--slate)}
td.st-Cancelled,td.st-No-show{background:var(--fill-cxl);border-top-color:var(--line);color:var(--slate)}
td.st-Cancelled .nm,td.st-No-show .nm{text-decoration:line-through}
.pre{color:var(--slate);font-weight:400;font-size:9px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle;
box-sizing:content-box}
.dot.p{background:var(--green)}
/* Not-collected needs to catch the eye more than paid does - money still owed
is the thing worth noticing at a glance, so it gets a halo on top of the
same inset white ring (kept for contrast against the colored booking-block
backgrounds it sits on), not just the same-weight dot as .p.
The halo is a real `border`, not a `box-shadow` spread: .nm (the name
label it sits inside) needs `overflow:hidden` for its own ellipsis
truncation, which clips anything a box-shadow paints outside the box's
own edges - a border doesn't have that problem, since it's part of the
element's actual layout box rather than painted beyond it. */
.dot.u{background:var(--maroon);background-clip:padding-box;
border:3px solid rgba(225,0,0,.32);box-shadow:0 0 0 1px #fff inset}
/* -- "available" row: one property-wide bar right under the date header,
plus the same row shape reused as the last row of every room card's own
table, so free-bed count is visible both at a glance and per room without
scrolling to a footer. */
table.boardavail{position:sticky;top:54px;z-index:3;border:1px solid var(--line);
border-top:0;border-radius:0 0 var(--r) var(--r);margin-bottom:4px;overflow:hidden}
tr.availrow{height:26px;border-top:1px solid var(--line)}
tr.availrow td{background:#FCFAF6;font-family:'IBM Plex Mono',monospace;text-align:center;
font-size:11px;color:var(--slate)}
tr.availrow td.we{background:#F8F3E8}
tr.availrow td.availlbl{text-align:left;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
background:var(--paper);color:var(--maroon-deep)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--slate);margin-top:11px}
.legend .sw{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;
vertical-align:-1px;border:1px solid rgba(0,0,0,.09)}
.legend .sw.dep{background:var(--fill-departed)}
.legend .sw.inh{background:var(--fill-inhouse)}
.legend .sw.bkd{background:var(--fill-booked)}
/* ---------- lists ---------- */
table.list{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
table.list th{text-align:left;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:9.5px;
letter-spacing:.12em;text-transform:uppercase;color:var(--slate);padding:9px 10px;
border-bottom:1px solid var(--line);background:var(--sand);position:sticky;top:0}
table.list th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
table.list th[data-sort]:hover{color:var(--maroon-deep)}
table.list td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.list tr[data-open]{cursor:pointer}
table.list tr:hover td{background:#FCFAF6}
table.list td.num{font-family:'IBM Plex Mono',monospace;text-align:right;white-space:nowrap}
.tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;
padding:2px 6px;border-radius:2px;white-space:nowrap;background:var(--sand);
color:var(--maroon-deep);border:1px solid var(--line)}
.tag.g{background:var(--fill-inhouse);border-color:#BFD6C7;color:var(--green)}
.tag.a{background:#FBF0D8;border-color:#E8D097;color:var(--amber)}
.tag.r{background:var(--fill-booked);border-color:#E2BEC2;color:var(--maroon)}
.tag.s{background:var(--fill-departed);color:var(--slate)}
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:104px 1fr 92px;align-items:center;gap:10px;font-size:12.5px}
.bar .t{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{background:var(--sand);height:15px;border-radius:2px;overflow:hidden}
.bar .fill{height:100%;background:var(--maroon)}
.bar .fill.g{background:var(--gold)}
.bar .v{font-family:'IBM Plex Mono',monospace;text-align:right;font-size:11.5px}
.empty{text-align:center;padding:70px 20px;border:1px dashed var(--line);
border-radius:var(--r);background:#fff}
.empty h4{font-family:'Instrument Serif',serif;font-weight:400;font-size:22px;margin:0 0 8px}
.empty p{color:var(--slate);margin:0 0 16px}
/* ---------- rooms manager ---------- */
.roomsmgr{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
.roomsmgr-list{display:flex;flex-direction:column;gap:6px}
.roomsmgr-item{border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;
cursor:pointer;background:#fff}
.roomsmgr-item:hover{background:var(--sand)}
.roomsmgr-item.on{border-color:var(--maroon);background:var(--fill-booked)}
.roomsmgr-item.archived{opacity:.6}
.roomsmgr-item.archived.on{opacity:1}
.rmi-name{font-weight:600;font-size:13px}
.rmi-meta{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--slate);margin-top:2px}
.roomsmgr-form{min-height:260px}
.roomsmgr-form h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:20px;
text-transform:none;letter-spacing:0;color:var(--ink);margin-bottom:16px}
.bedrow-edit{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bedrow-edit .bedcode{flex:0 0 34px;font-size:11px;color:var(--maroon-deep);
background:var(--sand);border-radius:var(--r);padding:6px 0;text-align:center}
.bedrow-edit input{flex:1}
@media(max-width:820px){.roomsmgr{grid-template-columns:1fr}}
/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(30,14,16,.42);z-index:40;display:none}
.scrim.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(470px,100vw);background:var(--paper);
border-left:1px solid var(--line);z-index:50;transform:translateX(100%);
transition:transform .22s ease;display:flex;flex-direction:column}
.drawer.on{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer .dh{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;
align-items:center;justify-content:space-between;background:#fff}
.drawer .dh h3{font-family:'Instrument Serif',serif;font-size:23px;margin:0;font-weight:400}
.drawer .db{padding:20px 22px;overflow:auto;flex:1}
.drawer .df{padding:14px 22px;border-top:1px solid var(--line);background:#fff;
display:flex;gap:8px;justify-content:flex-end}
.x{background:none;border:0;font-size:22px;cursor:pointer;color:var(--slate);line-height:1;padding:0 4px}
.x:hover{color:var(--ink)}
.bedpick{display:flex;flex-wrap:wrap;gap:5px}
.bedpick label{font-family:'IBM Plex Mono',monospace;font-size:11px;cursor:pointer;
border:1px solid var(--line);border-radius:var(--r);padding:5px 8px;background:#fff;
display:flex;align-items:center;gap:5px}
.bedpick label.sel{background:var(--maroon);color:#fff;border-color:var(--maroon)}
.bedpick label.busy{opacity:.34;cursor:not-allowed;text-decoration:line-through}
.bedpick input{width:auto;margin:0;display:none}
.roomlbl{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--slate);margin:12px 0 6px}
.grow{border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 2px;margin-bottom:10px;background:var(--paper)}
.grow.noshow{background:var(--sand)}
.grow.noshow .gwho{color:var(--slate)}
.grow.noshow input:disabled,.grow.noshow select:disabled{opacity:.5}
.gwho{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;
text-transform:uppercase;color:var(--maroon-deep);margin-bottom:8px}
.calc{background:var(--sand);border:1px solid var(--line);border-radius:var(--r);
padding:12px 14px;margin:14px 0}
.calc div{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;
font-size:12px;padding:2.5px 0}
.calc div.tot{border-top:1px solid var(--line);margin-top:6px;padding-top:7px;
font-weight:600;font-size:13.5px}
.calc span.k{color:var(--slate)}
.warn{background:#FBF0D8;border:1px solid #E8D097;color:#7A5310;padding:9px 11px;
border-radius:var(--r);font-size:12.5px;margin-bottom:12px}
.err{background:var(--fill-booked);border:1px solid #E2BEC2;color:var(--maroon-deep);
padding:9px 11px;border-radius:var(--r);font-size:12.5px;margin-bottom:12px}
/* ---------- hover card ---------- */
#pop{position:fixed;z-index:70;pointer-events:none;opacity:0;background:#fff;
border:1px solid var(--line);border-radius:var(--r);box-shadow:0 6px 22px rgba(30,14,16,.16);
padding:11px 13px;min-width:214px;max-width:280px;transition:opacity .09s ease}
#pop.on{opacity:1}
/* .bookingcard reuses this same read-only content in the Board/Today
Details view (see drawer.js's openDetails()) - shared rules, not
duplicated ones, so the click-details and hover-preview never drift. */
#pop .pg, .bookingcard .pg{font-family:'Instrument Serif',Georgia,serif;font-size:18px;line-height:1.15;
margin-bottom:2px;word-break:break-word}
#pop .pc, .bookingcard .pc{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--slate);margin-bottom:9px}
#pop dl, .bookingcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;
font-size:11.5px;align-items:baseline}
#pop dt, .bookingcard dt{color:var(--slate);white-space:nowrap}
#pop dd, .bookingcard dd{margin:0;font-family:'IBM Plex Mono',monospace;text-align:right}
#pop .sep, .bookingcard .sep{grid-column:1/-1;border-top:1px solid var(--line-soft);margin:5px 0 2px}
#pop .owe, .bookingcard .owe{color:var(--amber);font-weight:600}
#pop .set, .bookingcard .set{color:var(--green)}
#pop .nt, .bookingcard .nt{grid-column:1/-1;color:var(--slate);font-size:11px;text-align:left;
font-family:'IBM Plex Sans',sans-serif;margin-top:5px;font-style:italic}
/* ---------- calendar-month date picker ---------- */
#datepicker{position:fixed;z-index:71;opacity:0;pointer-events:none;background:#fff;
border:1px solid var(--line-soft);border-radius:20px;box-shadow:0 12px 32px rgba(30,14,16,.18);
padding:18px 20px 12px;width:296px;transition:opacity .09s ease,transform .09s ease;
transform:translateY(-2px)}
#datepicker.on{opacity:1;pointer-events:auto;transform:translateY(0)}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dp-title{font-family:'IBM Plex Sans',sans-serif;font-size:16px;font-weight:600;color:var(--ink)}
.dp-navs{display:flex;gap:2px}
.dp-arrow{background:none;border:none;cursor:pointer;font-size:17px;line-height:1;
color:var(--maroon);width:26px;height:26px;border-radius:50%}
.dp-arrow:hover{background:var(--sand);color:var(--maroon-deep)}
.dp-grid{border-collapse:collapse;width:100%}
.dp-grid th{font-family:'IBM Plex Sans',sans-serif;font-size:10.5px;font-weight:600;
color:var(--slate);text-transform:uppercase;letter-spacing:.03em;padding:0 0 8px;width:36px}
.dp-grid td{padding:2px 0;text-align:center}
.dp-grid button{width:34px;height:34px;border:none;background:none;border-radius:50%;
font-family:'IBM Plex Sans',sans-serif;font-size:13.5px;color:var(--ink);cursor:pointer}
.dp-grid button:hover:not(:disabled){background:var(--sand)}
.dp-grid button:disabled{color:var(--line);cursor:default}
.dp-grid button.dp-today{color:var(--maroon);font-weight:700}
.dp-grid button.dp-sel{background:var(--maroon);color:#fff;font-weight:600}
.dp-grid button.dp-sel:hover:not(:disabled){background:var(--maroon-deep)}
.dp-foot{margin-top:8px;display:flex;align-items:center;border-top:1px solid var(--line-soft);
padding-top:8px}
.dp-foot-sp{flex:1}
.dp-todaybtn{background:none;border:none;cursor:pointer;font-family:'IBM Plex Sans',sans-serif;
font-size:12.5px;font-weight:600;color:var(--slate);padding:7px 10px;border-radius:var(--r)}
.dp-todaybtn:hover{background:var(--sand);color:var(--ink)}
.dp-textbtn{background:none;border:none;cursor:pointer;font-family:'IBM Plex Sans',sans-serif;
font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
color:var(--slate);padding:7px 10px;border-radius:var(--r)}
.dp-textbtn:hover{background:var(--sand);color:var(--ink)}
.dp-textbtn.dp-ok{color:var(--maroon)}
.dp-textbtn.dp-ok:hover{color:var(--maroon-deep)}
@media(max-width:820px){
.shell{flex-direction:column}
.rail,.rail.folded{width:100%;flex:none;padding-bottom:10px}
nav{display:flex;flex-wrap:wrap;padding:10px}
nav button{width:auto}
.rail .foot{display:none}
main{padding:20px 16px 50px}
.r2,.r3{grid-template-columns:1fr}
/* Folding is a desktop-rail concept - below this width the rail already
collapses to a horizontal bar, so there's no vertical space to reclaim
and no "top-left" for a folded icon to live in. A folded state carried
over (via localStorage) from a wider screen still needs to show
everything here, not stay stuck icon-only. */
.rail-toggle{display:none}
.rail.folded .brand-full{display:block;width:160px}
.rail.folded .brand-icon{display:none}
.rail.folded .brand .sub,
.rail.folded nav button .label{display:block}
}
|