/* Hotel Umoja — admin / PMS / POS styles.
   Dense, clean, simple. Same palette as public site. */
:root{
  --ink:#0e1b25;
  --muted:#5b6b78;
  --line:#e6e8eb;
  --bg:#f4f5f7;
  --panel:#ffffff;
  --accent:#0b4f6c;
  --accent-2:#c98b3f;
  --ok:#1f7a4d;
  --warn:#a26a00;
  --bad:#9a2727;
  --side:#0a1820;
  --side-soft:#13232d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;-webkit-font-smoothing:antialiased;
  /* Safari on iOS quietly enlarges body text when a phone is turned to landscape,
     which reflows a dense table into something that no longer fits its column. */
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}

/* Shell layout */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
/* -webkit-sticky first: older Safari only understands the prefixed value and
   drops the whole declaration otherwise, which unpins the sidebar as you scroll. */
/* 100dvh after 100vh: on iOS Safari 100vh counts the space under the address bar
   as well, so the sidebar ran taller than the screen and its sign-out sat below
   the fold. Browsers that don't know dvh keep the vh line above. */
aside.side{background:var(--side);color:#cfd6da;display:flex;flex-direction:column;
  position:-webkit-sticky;position:sticky;top:0;height:100vh;height:100dvh}
.side .brand{padding:22px 22px 16px;border-bottom:1px solid #1b2a33}
.side .brand .logo{font-family:Georgia,serif;font-size:18px;letter-spacing:.16em;font-weight:600;color:#fff}
.side .brand small{display:block;font-size:9px;letter-spacing:.3em;color:#c98b3f;margin-top:3px}
.side .nav{padding:14px 0;flex:1;overflow-y:auto}
.side .grp{padding:14px 22px 6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#5a6970;font-weight:700}
.side a.item{display:flex;align-items:center;gap:10px;padding:9px 22px;color:#cfd6da;font-size:13px;border-left:3px solid transparent}
.side a.item:hover{background:var(--side-soft);color:#fff}
.side a.item.active{background:var(--side-soft);color:#fff;border-left-color:var(--accent-2)}
.side a.item .ic{width:14px;height:14px;background:currentColor;mask-size:contain;mask-repeat:no-repeat;opacity:.85}
.side .user{padding:14px 22px;border-top:1px solid #1b2a33;display:flex;gap:10px;align-items:center;font-size:12px}
.side .user .av{width:32px;height:32px;border-radius:50%;background:#1f3540;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.side .user .info{flex:1}
.side .user .info b{color:#fff;display:block;font-weight:600}
.side .user .info span{color:#9aa6ad;font-size:11px}
/* Account actions under the signed-in user. Sign-out lives here so it is on every admin page. */
.side .useracts{display:flex;gap:8px;padding:0 22px 16px}
.side .useracts form{flex:1;margin:0}
.side .uact{flex:1;display:block;width:100%;text-align:center;padding:7px 8px;border-radius:3px;
  border:1px solid #2b3f4a;background:#16262f;color:#c6d2d8;font-size:11.5px;font-weight:600;
  text-decoration:none;cursor:pointer;font-family:inherit}
.side .uact:hover{background:#1f3540;color:#fff}
.side .uact.out{border-color:#5d3a3a;color:#e8b4b4}
.side .uact.out:hover{background:#5d3a3a;color:#fff}

/* Main */
main.main{padding:0;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:14px 28px;display:flex;align-items:center;gap:18px}
.topbar h1{margin:0;font-family:Georgia,serif;font-weight:500;font-size:22px}
.topbar .crumbs{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.topbar .grow{flex:1}
.topbar .search{display:flex;align-items:center;gap:8px;background:var(--bg);padding:7px 12px;border-radius:3px;width:260px}
.topbar .search input{background:transparent;border:0;outline:none;width:100%;font-size:13px}
.topbar .iconbtn{width:36px;height:36px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;border-radius:3px}

.content{padding:26px 28px 60px;flex:1}
.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.page-title h2{margin:0;font-family:Georgia,serif;font-weight:500;font-size:26px}
.page-title .sub{color:var(--muted);font-size:13px;margin-top:4px}

/* ---------------------------------------------------------------------------
   Dropdowns.

   Safari draws its own bevelled, rounded control for a <select> and ignores most
   of what you ask for — the flat white background, the 3px corners, the padding —
   so a dropdown next to a text input came out a different height, a different
   shape and a different colour. Chrome and Firefox honour enough of it that the
   difference never showed there.

   Switching the native appearance off is what makes the styling apply, but it
   also removes the arrow, so one is drawn back on as a background image. A
   select with `size` or `multiple` is a list box, not a dropdown, and must keep
   its rows and lose the arrow — hence the :not().

   Kept above the rules that use it so anything more specific below wins outright
   rather than tying on specificity and being decided by source order.
   --------------------------------------------------------------------------- */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-color:#fff;color:inherit;font-family:inherit;line-height:1.35}
select:not([size]):not([multiple]){
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%235b6b78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:10px 7px;
  padding-right:30px;cursor:pointer}
select[size],select[multiple]{background-image:none;padding-right:9px}
select:disabled{background-color:#f4f6f7;color:var(--muted);opacity:1}

/* ---------------------------------------------------------------------------
   Text fields.

   Safari does to an <input> and a <textarea> exactly what it does to a <select>
   above: it draws its own control — rounded corners, an inset shadow, its own
   idea of how tall a field is — and treats the border, background and padding
   asked for here as suggestions. Next to a styled dropdown or a button the
   result is a field of a different shape and height, which is what "the boxes
   don't look right on Safari" is. Chrome honours enough of it that the same
   markup looks correct there, so the difference only ever showed on Safari.

   Deliberately scoped away from the inputs that ARE their own widget. A
   checkbox, radio, colour swatch, file picker or slider with appearance:none is
   drawn as nothing at all — a control the user can neither see nor find.

   Every :not() adds specificity, which puts this chain above a plain `.field
   input`. It therefore sets only what the fix actually needs: colour and size
   are left to the class rules below, where they belong and can still win.
   --------------------------------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),
textarea{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  font-family:inherit;
  /* Safari paints the background out under the border, so a white field shows a
     pale halo just outside its own edge on a tinted row. */
  background-clip:padding-box;
}

/* Safari renders a date or time value inside its own centred box that collapses
   to no height at all when the field is empty. A date input therefore came out
   shorter than the text input beside it, with its value floating off-centre —
   the 20 date pickers and 5 time pickers in the admin all had it. */
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value,
input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;min-height:1.35em}

/* Buttons get the same native treatment — a bevel, rounded ends and the system
   font — which is why a submit button never quite matched the .btn beside it.
   .tabs button and .linkbtn strip their own background but couldn't strip that. */
button,input[type=submit],input[type=button],input[type=reset]{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  font-family:inherit;cursor:pointer}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:var(--accent);color:#fff;
  border:0;border-radius:3px;font-weight:600;font-size:13px}
.btn:hover{opacity:.92}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.gold{background:var(--accent-2)}
.btn.danger{background:var(--bad)}
.btn.sm{padding:6px 12px;font-size:12px}
.btn.lg{padding:13px 22px;font-size:14px}
/* A button that can't be pressed has to look like one. Kept after the variants so it wins
   over .ghost/.gold/.danger, and the hover lift is cancelled so nothing invites the click. */
.btn:disabled,.btn[disabled]{background:#eef0f2;color:var(--muted);border:1px solid var(--line);
  cursor:not-allowed;box-shadow:none}
.btn:disabled:hover,.btn[disabled]:hover{opacity:1}

/* A <select> wearing .btn — the station picker on the kitchen display, the period
   picker on Reports, the housekeeper filter. These used to force the native widget
   back with appearance:auto, which on Safari meant a full bevelled control sitting
   beside a flat ghost button and looking nothing like it. inline-flex is for
   buttons; a select needs inline-block or Safari collapses its height. */
select.btn{display:inline-block;padding-right:30px;cursor:pointer}
select.btn.sm{padding:6px 28px 6px 12px}

/* Cards & panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px}
.panel .head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.panel .head h3{margin:0;font-family:Georgia,serif;font-weight:500;font-size:16px}
.panel .head .tools{display:flex;gap:8px;align-items:center}
.panel .head .tools select{padding:7px 30px 7px 10px;border:1px solid var(--line);border-radius:3px;background-color:#fff;font-family:inherit;font-size:13px;outline:none}
.panel .head .tools select:focus{border-color:var(--accent)}
.panel .body{padding:18px}
.panel .body.flush{padding:0}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--line);padding:18px;border-radius:4px}
.kpi .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kpi .val{font-family:Georgia,serif;font-size:28px;color:var(--ink);margin-top:6px;line-height:1.1}
.kpi .delta{font-size:12px;margin-top:6px;color:var(--ok);font-weight:600}
.kpi .delta.neg{color:var(--bad)}

/* Layout helpers */
.row2{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Tables */
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th,table.t td{padding:11px 18px;text-align:left;border-bottom:1px solid var(--line)}
table.t thead th{background:#fafbfc;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
table.t tbody tr:hover{background:#fafbfc}
table.t a{color:var(--accent);font-weight:600}
table.t .right{text-align:right}

/* Status pills */
.tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;background:#eef1f3;color:var(--muted)}
.tag.ok{background:#e3f1ea;color:var(--ok)}
.tag.warn{background:#fbeed4;color:var(--warn)}
.tag.bad{background:#f5dada;color:var(--bad)}
.tag.info{background:#dbe7ee;color:var(--accent)}
.tag.dark{background:#1b2a33;color:#cfd6da}

/* Forms */
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border:1px solid var(--line);font-family:inherit;font-size:13px;background-color:#fff;border-radius:3px;outline:none;line-height:1.35}
/* Room for the arrow drawn above; without it the text runs under it. */
.field select{padding-right:30px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field .hint{font-size:12px;color:var(--muted);margin-top:4px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formgrid .span-2{grid-column:span 2}

/* Calendar (reservations) */
/* The column count comes from the chosen date range, so the page sets grid-template-columns inline;
   this is only the fallback for a 14-day window. */
.cal{display:grid;grid-template-columns:160px repeat(14,minmax(54px,1fr));border:1px solid var(--line);background:#fff;border-radius:4px;overflow:hidden;font-size:12px}
.cal .h, .cal .row-h{padding:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fafbfc;color:var(--muted);font-weight:600;text-align:center}
.cal .row-h{text-align:left;padding-left:14px;background:#fff;color:var(--ink);font-family:Georgia,serif;font-weight:500}
.cal .c{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:48px;position:relative}
.cal .c.we{background:#fafbfc}
/* z-index keeps a multi-night bar on top of the cells it reaches over — without it a weekend
   cell's background paints across the middle of the stay. */
.cal .bk{position:absolute;z-index:1;top:6px;left:4px;right:4px;bottom:6px;background:var(--accent);color:#fff;border-radius:3px;font-size:11px;padding:4px 6px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .bk.in{background:#1f7a4d}
.cal .bk.out{background:#a26a00}
a.bk{display:block;text-decoration:none;color:#fff}
a.bk:hover{filter:brightness(1.12);box-shadow:0 1px 5px rgba(0,0,0,.28)}
a.bk:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* Floor / housekeeping grid */
.rooms-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.rm{background:#fff;border:1px solid var(--line);padding:14px;border-radius:4px;border-top:4px solid var(--line)}
.rm.clean{border-top-color:var(--ok)}
.rm.dirty{border-top-color:var(--bad)}
.rm.occupied{border-top-color:var(--accent)}
.rm.inspected{border-top-color:var(--accent-2)}
.rm.out{border-top-color:#888;opacity:.7}
.rm .no{font-family:Georgia,serif;font-size:22px}
.rm .type{font-size:12px;color:var(--muted);margin-bottom:8px}
.rm .st{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* POS */
.pos-shell{display:grid;grid-template-columns:1fr 380px;gap:14px;min-height:calc(100vh - 200px)}
.pos-left{background:#fff;border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column}
.pos-cats{display:flex;gap:6px;padding:12px;border-bottom:1px solid var(--line);overflow-x:auto}
.pos-cats button{border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:3px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.pos-cats button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pos-products{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px}
.pos-p{background:#fafbfc;border:1px solid var(--line);border-radius:4px;padding:14px;text-align:left;font-family:inherit}
.pos-p .nm{font-weight:600;font-size:13px}
.pos-p .pr{margin-top:6px;color:var(--accent);font-weight:700;font-size:14px}
.pos-p .st{font-size:11px;color:var(--muted);margin-top:4px}
.pos-right{background:#fff;border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column}
.pos-right .head{padding:14px 16px;border-bottom:1px solid var(--line)}
.pos-right .items{flex:1;overflow-y:auto}
.pos-item{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px}
.pos-item .nm{font-weight:600}
.pos-item .mod{font-size:12px;color:var(--muted)}
.pos-item .pr{font-weight:700}
.pos-totals{padding:14px 16px;border-top:1px solid var(--line);background:#fafbfc}
.pos-totals .r{display:flex;justify-content:space-between;padding:3px 0;font-size:13px}
.pos-totals .r.tot{font-weight:800;font-size:17px;border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.pos-pay{padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pos-pay button{padding:14px;border-radius:3px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:13px}
.pos-pay button.primary{background:var(--accent);color:#fff;border-color:var(--accent);grid-column:span 2}

/* Floor plan */
.floor{background:#fafbfc;border:1px solid var(--line);padding:30px;border-radius:4px;min-height:480px;position:relative}
.tbl{position:absolute;background:#fff;border:2px solid var(--ink);width:80px;height:80px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700}
.tbl.sq{border-radius:6px;width:96px;height:74px}
/* A dirty table is a button (clicking it clears it), the rest are links. Buttons don't inherit
   type, so say so — otherwise one tile on the floor renders in the browser's default font. */
button.tbl{font-family:inherit;font-size:inherit;color:inherit;padding:0;cursor:pointer}
.tbl.open{border-color:var(--ok);background:#e3f1ea}
.tbl.tab{border-color:var(--accent-2);background:#fbeed4}
.tbl.dirty{border-color:var(--muted);background:#eef1f3}
.tbl .n{font-family:Georgia,serif;font-size:18px}
.tbl .s{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
/* Who has the table. A waiter scans this floor for their own tables first, so theirs get a ring
   the eye catches before it reads any of the labels. */
.tbl .w{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;max-width:74px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl.mine{box-shadow:0 0 0 3px rgba(31,122,77,.35)}
.tbl.mine .w{color:#1f7a4d;font-weight:800}

/* Booking detail / folio */
.folio{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.guest-card{padding:18px;background:#fff;border:1px solid var(--line);border-radius:4px}
.guest-card .av{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;margin-bottom:10px}

/* Audit log */
.audit-row{display:grid;grid-template-columns:130px 110px 1fr 110px;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.audit-row .who{color:var(--accent);font-weight:600}
.audit-row .what{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

/* Sparkline / chart stand-in */
.barchart{display:flex;align-items:flex-end;gap:6px;height:160px;padding:10px 0}
.barchart .b{flex:1;background:var(--accent);border-radius:2px 2px 0 0;opacity:.85}
.barchart .b:hover{opacity:1}
.barchart .b.alt{background:var(--accent-2)}

/* Login */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-img{background-image:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55)),
  url('/images/lake.jpg');background-size:cover;background-position:center;color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:flex-end}
.login-img h2{font-family:Georgia,serif;color:#fff;font-size:36px;font-weight:500;margin:0 0 10px}
.login-img p{color:#e7e2d3;max-width:380px}
.login-form{display:flex;align-items:center;justify-content:center;padding:60px}
.login-form .box{width:100%;max-width:380px}
.login-form h1{font-family:Georgia,serif;font-weight:500;font-size:30px;margin:0 0 6px}
.login-form .role-hint{font-size:12px;color:var(--muted);background:#fafbfc;padding:10px 12px;border:1px dashed var(--line);margin-top:14px;border-radius:3px}

/* Tabs */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:18px}
/* A tab is a link when it names a view you can deep-link to, and a button when it only moves
   component state (the onboarding wizard). Both need to look identical. */
.tabs a,.tabs button{padding:12px 18px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;font-family:inherit;cursor:pointer}
.tabs a.active,.tabs button.active{color:var(--ink);border-bottom-color:var(--accent-2)}

/* Empty / hint */
.hint{font-size:12px;color:var(--muted)}

/* Avatar */
.av-sm{width:28px;height:28px;border-radius:50%;background:#dbe7ee;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}

/* Fix: solid buttons inside tables were getting the table-link colour
   (dark blue text on dark blue) which hid the label. Keep them white. */
table.t a.btn{color:#fff}
table.t a.btn.ghost{color:var(--ink)}

/* Clickable cards (dashboard KPIs, housekeeping tiles) — added 09.06.2026 */
a.kpi,a.rm{display:block;transition:box-shadow .12s,border-color .12s}
a.kpi:hover,a.rm:hover,.clickcard:hover{box-shadow:0 2px 10px rgba(14,27,37,.12);border-color:var(--accent)}
/* The tile whose view is currently open — it has to stay obvious which one narrowed the screen. */
a.kpi.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.clickcard{transition:box-shadow .12s,border-color .12s}

/* Compact panels (smaller dashboard containers) */
.panel.compact .head{padding:10px 14px}
.panel.compact .body{padding:10px 14px}
.panel.compact .body.flush,.panel.compact .body[style*="padding:0"]{padding:0}
.panel.compact table.t th,.panel.compact table.t td{padding:7px 14px}
.panel.compact .head h3{font-size:15px}

/* Front-desk clickable rows */
table.t tr.linkrow{cursor:pointer}
table.t tr.linkrow:hover{background:#f1f5f8}

/* A button that reads as an inline link. Used where the control performs an action on the page
   rather than going anywhere — an <a> there would navigate if it were ever clicked before Blazor
   had wired up its handler, which is how "remove" and "override" links used to land on the home
   page. Buttons can't navigate, so they can't have that bug. */
/* Seven day toggles. Buttons rather than checkboxes: the pattern is read at a glance as a shape
   ("Thu Fri Sat lit"), which a row of boxes and labels is not. */
.daypick{display:flex;gap:6px;flex-wrap:wrap}
.daypick button{font:inherit;font-size:12px;font-weight:700;padding:7px 12px;border-radius:3px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--muted);min-width:52px}
.daypick button:hover{border-color:var(--accent)}
.daypick button.on{background:var(--accent);border-color:var(--accent);color:#fff}
button.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--accent);cursor:pointer}
button.linkbtn:hover{text-decoration:underline}
table.t tr.linkrow a.tt{color:var(--accent)}

/* Date-range / period filter bar */
.filterbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px 16px;margin-bottom:18px}
.filterbar .field{margin:0}
.filterbar .field label{margin-bottom:4px}
.filterbar .field input,.filterbar .field select{padding:7px 10px}
.filterbar .field select{padding-right:30px}
.filterbar .grow{flex:1}
.filterbar .btns{display:flex;gap:8px}

/* Colour legend (calendar) */
.legend{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;align-items:center}
.legend .it{display:flex;align-items:center;gap:7px}
.legend .sw{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.08)}

/* Same trap the booking form already guards against: iOS Safari zooms the page in
   when you focus a control whose text is under 16px, and never zooms back out. The
   staff portal is used on phones at the till and on the floor, so every field here
   did it — 13px is the norm across this sheet. Desktop typography is untouched. */
@media (max-width:640px){
  .field input,.field select,.field textarea,
  .filterbar .field input,.filterbar .field select,
  .topbar .search input,.panel .head .tools select{font-size:16px}
}

/* Responsive collapse */
@media(max-width:1100px){
  .app{grid-template-columns:64px 1fr}
  aside.side .brand .logo, aside.side .brand small, aside.side .grp, aside.side a.item span, aside.side .user .info{display:none}
  aside.side a.item{justify-content:center;padding:14px}
  /* 64px of sidebar won't hold two labels: drop the password link and shrink sign-out to a glyph,
     so it is still reachable rather than disappearing on a narrow screen. */
  aside.side .useracts{padding:0 8px 14px}
  aside.side .uact:not(.out){display:none}
  /* Plain text, not a glyph — "⎋" renders as a missing-character box in the default UI font. */
  aside.side .uact.out{font-size:0;padding:8px 0}
  aside.side .uact.out::after{content:"Out";font-size:11px;letter-spacing:.3px}
  .kpis{grid-template-columns:1fr 1fr}
  .pos-shell{grid-template-columns:1fr}
}

/* ---- Reusable modal (admin CRUD dialogs) ---- */
.modal-bg { position:fixed; inset:0; background:rgba(10,24,32,.55); display:flex; align-items:center; justify-content:center; z-index:80; padding:20px; }
.modal-card { background:#fff; width:520px; max-width:96vw; max-height:90vh; overflow:auto; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.3); }
.modal-head { padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal-head h3 { margin:0; font-family:Georgia,serif; font-weight:500; }
.modal-body { padding:20px; }
.modal-foot { padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; }
.modal-err { color:var(--bad); font-size:13px; margin-top:8px; }

/* ---- Print: hide chrome so page-print / "Download PDF" is clean ---- */
@media print {
  .side, .topbar, .tabs, .filterbar, .modal-bg, .no-print { display:none !important; }
  .content { padding:0 !important; }
  .panel { box-shadow:none !important; border:1px solid #ddd !important; break-inside:avoid; }
  a[href]:after { content:""; }
}