:root{
  --bg:#0b0e12; --panel:#11161d; --elev:#171e27;
  --text:#e6edf3; --muted:#96a2b2; --primary:#2aa6ff; --accent:#00d3b7;
  --danger:#ff5c5c; --warning:#ffb020;
  --radius:12px; --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px;
  color-scheme: light dark;
}

html[data-theme="light"]{
  --bg:#ffffff; 
  --panel:#f6f8fb;
  --elev:#eef2f7;
  --text:#0f141a;
  --muted:#5e6a79;
  --primary:#2d8fff;       /* tuned to read well on light */
  --accent:#00b8a4;
  --danger:#e23c3c;
  --warning:#d89400;
  --radius:12px; --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px;
  color-scheme: light;
}

/* Dark theme (your current palette) */
html[data-theme="dark"]{
  --bg:#0b0e12; --panel:#11161d; --elev:#171e27;
  --text:#e6edf3; --muted:#96a2b2; --primary:#2aa6ff; --accent:#00d3b7;
  --danger:#ff5c5c; --warning:#ffb020;
  --radius:12px; --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Rates: label left, input right (all sizes) */
.split-col.rates .room-group {
  display: grid;
  grid-template-columns: 1fr auto; /* label | input */
  gap: 6px 12px;
  align-items: center;
}
.split-col.rates .room-group br { display: none; }
.split-col.rates .room-group label { margin: 0; }
.split-col.rates .room-group input[type="text"],
.split-col.rates .room-group input[type="number"] {
  width: 88px;          /* 4 digits + a little wiggle room */
  max-width: 100%;
  justify-self: end;    /* push to the right edge */
}

/* Availability: label left | switch | qty (always side-by-side) */
.split-col.avail .grid {
  display: grid;
  grid-template-columns: 1fr auto auto; /* room | switch | qty */
  align-items: center;
  column-gap: 8px;
}
.split-col.avail .tri-switch { white-space: nowrap; justify-self: end; }
.split-col.avail input[type="number"] {
  width: 70px;
  max-width: 100%;
  justify-self: end;
}


.login-page {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  display: block;              
  min-height: 100%;            
}
html { height: 100%; }

.login-wrapper {
  width: 100%;
  max-width: 380px;
  padding: 20px;
}

.login-card {
  background: var(--panel);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  max-width: 300px;
  margin-bottom: .1rem;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start:0px;
  margin-inline-end:0px;
  Font-weight: bold;
  unicode-bidi:isolate;
}

.error {
  color: #ff5c5c;
  margin-bottom: 1rem;
}

form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

label {
  font-size: 0.85rem;
  color: var(--muted);
  align-self: center;
}

input {
  width: 100%;
  padding: 0.65rem;
  border-radius: var(--radius);
  background: var(--elev);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
}


input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent);
}

.btn {
  background: var(--primary);
  color: #00121e;
  border: none;
  padding: 0.75rem;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background 0.2s ease, transform 0.05s ease;
}

.btn:hover { background: #1990e8; }
.btn:active { transform: translateY(1px); }

@media (max-width: 480px) {
  .login-card { padding: 1.5rem; }
  .logo { max-width: 100px; }
}


*{box-sizing:border-box}
body{
  margin:0; 
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}
main, .block{ max-width:1200px; margin:0 auto; padding: 0 var(--s3); }

/* Header layout */
.header{
  display:flex; justify-content:space-between; align-items:flex-start;
  background: var(--panel);
  padding: var(--s3) var(--s4);
  border-bottom:1px solid color-mix(in oklab, var(--text) 10%, transparent);
}

.header-left{ display:flex; flex-direction:column; gap:6px; }
.app-title{ margin:0; font-size: clamp(22px, 3vw, 30px); }
.welcome{ color:var(--muted); }
.header-right{ display:flex; gap:14px; align-items:center; }
.link{ color:var(--primary); text-decoration:none; }
.link:hover{ text-decoration:underline; }

/* Cards */
.card{
  background:var(--panel);
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
  border-radius:var(--radius);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  padding: var(--s3);
}
.block{ margin-top: var(--s3); }

/* Table */
.table-wrap{ overflow:auto; }
table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--panel);
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
  border-radius:12px; overflow:hidden;
}
thead th{
  position:sticky; top:0; z-index:1;
  background:var(--elev); text-align:left; font-weight:600;
  padding:10px 12px; font-size:13px;
}
td{ padding:10px 12px; border-top:1px solid color-mix(in oklab, var(--text) 8%, transparent); }
tbody tr:hover td{ background: color-mix(in oklab, var(--elev) 80%, transparent); }

/* Buttons & inputs */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--primary); color:#00121e; border:none;
  padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer;
  transition: background .15s ease, transform .05s ease;
}
.btn:hover{ background:#1990e8; }
.btn:active{ transform: translateY(1px); }
.btn.secondary{
  background:var(--elev); color:var(--text);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
.btn.accent{ background:var(--accent); color:#00120f; }

label{ color:var(--muted); font-size:14px; display:inline-block; margin-bottom:6px; }
input[type="text"], input[type="number"], select{
  width:100%; padding:10px 12px; border-radius:10px;
  background:var(--elev); color:var(--text);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
input:focus, select:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent);
}

.status-msg{ font-weight:700; margin-top: var(--s2); }

/* Tickets */
.ticket{ margin-bottom: var(--s3); }
fieldset{
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: var(--radius);
  padding: var(--s3);
  background: var(--panel);
}
legend{ padding:0 var(--s1); color:var(--muted); }

/* Hotel block layout */
.hotel-block{
  border:1px dashed color-mix(in oklab, var(--text) 20%, transparent);
  padding: var(--s2);
  border-radius:10px; background: var(--elev);
  margin: var(--s2) 0;
}
/* Make room for label | select | actions and allow the select to shrink */
.hotel-row{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto; /* <-- include actions col */
  gap: var(--s2);
  align-items: center;
  margin-bottom: var(--s2);
}

.hotel-row select{
  min-width: 0;  /* <-- critical: lets the select shrink inside the grid */
  width: 100%;
}

.hotel-row .hotel-actions{
  display: flex;
  gap: 8px;
  justify-self: end;
  flex-wrap: nowrap;
}

/* Auto-fill highlight */
.auto-filled{ background: color-mix(in oklab, var(--accent) 18%, var(--elev)); }


/* Action row under tickets */
.actions-row{
  display:flex; gap:12px; margin-top: var(--s3);
}
/* Centered stacked layout */
.container{ max-width:1200px; margin:0 auto; padding:24px 16px; }
.stack > * + *{ margin-top:24px; }

/* Header layout */

.header-left{ display:flex; flex-direction:column; gap:6px; }
.app-title{ margin:0; font-size:clamp(22px,3vw,30px); }
.welcome{ color:var(--muted); }
.header-right{ display:flex; gap:14px; align-items:center; }
.link{ color:var(--primary); text-decoration:none; }
.link:hover{ text-decoration:underline; }

/* Flatpickr calendar text overrides */

html[data-theme="dark"] .flatpickr-calendar{
  background: var(--panel) !important;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
  color:#fff !important;
}
html[data-theme="dark"] .flatpickr-calendar *{
  color:#fff !important;
  fill:#fff !important;
}

/* Keep hover for both themes */
.flatpickr-day:hover{
  background: color-mix(in oklab, var(--primary) 20%, transparent) !important;
}


/* ─────────────────────────────────────────────
   HOTEL TOOLBAR (selector + Open All / Close All)
   ───────────────────────────────────────────── */
.hotel-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
  margin: var(--s2) 0 var(--s2);
}
.hotel-toolbar .hotel-select{
  min-width: 260px;
  flex: 1 1 260px;
}
.hotel-toolbar .bulk-actions{
  display:flex; gap:8px; align-items:center;
}
.btn.ghost{
  background:transparent;
  color:var(--text);
  border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
}
.btn.ghost:hover{
  background: color-mix(in oklab, var(--text) 8%, transparent);
}
.btn.success{
  background: var(--accent);
  color:#00120f;
}
.btn.danger{
  background: var(--danger);
  color:#1b0000;
}

/* ─────────────────────────────────────────────
   ROOMS GRID (room_type | rate | switch | qty)
   ───────────────────────────────────────────── */
.rooms-card{
  background:var(--panel);
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
  border-radius: var(--radius);
  overflow:hidden;
}

.rooms-head,
.rooms-row{
  display:grid;
  grid-template-columns: 1fr 110px 120px 90px; /* room | rate | switch | qty */
  gap:10px;
  align-items:center;
  padding: 10px 12px;
}

.rooms-head{
  background: var(--elev);
  font-weight: 600;
  color: var(--text);
  position: sticky; top: 0; z-index: 1;
  border-bottom:1px solid color-mix(in oklab, var(--text) 10%, transparent);
}

.rooms-body{ display:block; }
.rooms-row{
  border-top:1px solid color-mix(in oklab, var(--text) 8%, transparent);
}
.rooms-row:first-child{ border-top: 0; }
.rooms-row:hover{ background: color-mix(in oklab, var(--elev) 80%, transparent); }

/* cells */
.rooms-row .room-name{
  min-width: 0; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rooms-row .rate-cell input[type="number"],
.rooms-row .rate-cell input[type="text"]{
  width:100%;
  text-align:right;
}

/* qty input keeps your style, just a fixed width for alignment */
.rooms-row .qty-cell input[type="number"]{
  width:100%;
  text-align:right;
}

/* compact switch slot (use your existing tri-switch markup if you have it) */
.switch-cell{
  display:flex; justify-content:flex-start; align-items:center;
}
.switch{
  --h: 34px; --w: 64px; --p: 3px;
  width: var(--w); height: var(--h);
  background: color-mix(in oklab, var(--text) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: calc(var(--h));
  position: relative; cursor: pointer;
  display:flex; align-items:center; padding: var(--p);
}
.switch .knob{
  width: calc(var(--h) - 2*var(--p) - 2px);
  height: calc(var(--h) - 2*var(--p) - 2px);
  background: var(--bg);
  border-radius: 999px;
  transition: transform .18s ease, background .18s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
/* states: .open / .close (toggle these classes in JS) */
.switch.open{
  background: color-mix(in oklab, var(--accent) 55%, transparent);
  border-color: color-mix(in oklab, var(--accent) 65%, transparent);
}
.switch.open .knob{ transform: translateX(calc(var(--w) - var(--h))); }
.switch.close{
  background: color-mix(in oklab, var(--danger) 50%, transparent);
  border-color: color-mix(in oklab, var(--danger) 60%, transparent);
}
.switch.close .knob{ transform: translateX(0); }

/* small labels inside the switch (optional) */
.switch .label{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:700; letter-spacing:.3px; color:#fff;
  user-select:none; pointer-events:none;
}
.switch .label.on{ left:10px; }
.switch .label.off{ right:10px; opacity:.85; }

/* responsive */
@media (max-width: 640px){
  .hotel-row{
    grid-template-columns: 1fr !important; /* stack */
    row-gap: 8px;
  }
  .hotel-row label,
  .hotel-row select,
  .hotel-row .hotel-actions{
    grid-column: 1 / -1;   /* each on its own row */
  }
  .hotel-row .hotel-actions{
    justify-self: start;    /* left align on mobile */
    flex-wrap: wrap;        /* if you ever add more buttons */
    gap: 8px;
  }
}

/* --- Tri-switch (availability) --- */
.tri-switch{
  display:inline-flex; align-items:center; gap:8px;
}

.tri-label{
  font-size:12px; color:var(--muted);
}

.tri-pill{
  position:relative; width:46px; height:24px; border-radius:999px;
  background: color-mix(in oklab, var(--text) 10%, transparent);
  border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
  cursor:pointer; padding:0; outline:none;
}
.tri-pill .tri-thumb{
  position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:#c9d2dc; transition: left .15s ease, background .15s ease;
}

/* states */
.tri-pill[data-state="unset"]{
  background: color-mix(in oklab, var(--warning) 15%, var(--elev));
}
.tri-pill[data-state="open"]{
  background: color-mix(in oklab, var(--accent) 55%, var(--elev));
  border-color: color-mix(in oklab, var(--accent) 65%, transparent);
}
.tri-pill[data-state="open"] .tri-thumb{ left:24px; background:#00120f; }

.tri-pill[data-state="close"]{
  background: color-mix(in oklab, var(--danger) 45%, var(--elev));
  border-color: color-mix(in oklab, var(--danger) 60%, transparent);
}
.tri-pill[data-state="close"] .tri-thumb{ left:2px; background:#160000; }

/* when user tries to submit with unset rooms */
.tri-pill.unset-warning{
  box-shadow:0 0 0 2px color-mix(in oklab, var(--warning) 40%, transparent);
}

::placeholder { color: var(--muted); }
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--elev) inset;
  box-shadow: 0 0 0 1000px var(--elev) inset;
  transition: background-color 9999s ease; /* keep theme color */
}

textarea, select {
  background: var(--elev);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: var(--radius);
  padding: 0.65rem;
}

.checkgrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:8px;
  max-height: 320px;
  overflow:auto;
  padding:8px;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--surface-1, transparent);
}
.checkitem{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.45rem .6rem;
  border-radius:10px;
  background: var(--surface-2, rgba(0,0,0,0.03));
  cursor:pointer;
  user-select:none;
}
.checkitem input{ transform: scale(1.1); }
.autofill-row{
  display:flex; align-items:center; gap:.6rem; margin:8px 0 4px;
}
.switch { position: relative; display:inline-block; width:46px; height:26px; }
.switch input { opacity:0; width:0; height:0; }
.slider {
  position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
  background:#9aa4af; transition:.2s; border-radius:999px;
}
.slider:before {
  position:absolute; content:""; height:18px; width:18px; left:4px; top:4px;
  background:white; transition:.2s; border-radius:50%;
}
.switch input:checked + .slider { background:#22c55e; }
.switch input:checked + .slider:before { transform:translateX(20px); }
.switch-text{ font-size:.95rem; opacity:.8; }

/* Queue page polish */
.table-wrap { border:1px solid #00000014; border-radius:14px; overflow:hidden; background: var(--card, #fff); }
.scroll { max-height:72vh; overflow:auto; scrollbar-gutter:stable both-edges; }

tbody tr:hover { background:#0000000a; }
.badge { font-weight:700; letter-spacing:.01em; }

/* Column alignment for split tables (header + body) */
col.id{width:80px} col.user{width:140px} col.sub{width:180px} col.status{width:220px} col.actions{width:220px}

/* Optional: tighter button spacing inside action cells */
.actions { display:flex; gap:.35rem; flex-wrap:wrap; }

/* Optional: dark mode tweaks if you use data-theme switching elsewhere */
html[data-theme="dark"] .table-wrap { background:#0b0d10; border-color:#ffffff1a; }
html[data-theme="dark"] thead th { background:#0f1216; border-bottom-color:#ffffff1a; }
html[data-theme="dark"] tbody tr:hover { background:#ffffff12; }
.scroll{ max-height:78vh; overflow:auto; scrollbar-gutter:stable both-edges; }
tbody td { padding:.65rem .75rem; }