@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* DARK THEME (Default) */
  --bg-main: #0b0f19;
  --bg-card: rgba(30, 41, 59, 0.7);
  --bg-card-solid: #1e293b;
  --bg-header: rgba(15, 23, 42, 0.85);
  --border-color: rgba(255, 255, 255, 0.1);
  --border-active: #3b82f6;

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --accent: #8b5cf6;
  
  /* Status Colors */
  --status-reserved: #10b981;   /* Green */
  --status-checkedin: #3b82f6;  /* Blue */
  --status-checkedout: #f59e0b; /* Amber */
  --status-dirty: #eab308;      /* Yellow */
  --status-maintenance: #ef4444;/* Red */

  --font-family: 'Cairo', 'Inter', sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --backdrop-blur: blur(16px);
  --rack-type-band: #244267;
  --rack-availability: #214c4c;
  --rack-grid-line: rgba(148, 163, 184, .22);
}

/* LIGHT THEME OVERRIDES */
[data-theme="light"] {
  --bg-main: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-solid: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.95);
  --border-color: #cbd5e1;
  --border-active: #2563eb;

  --text-main: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;

  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
  --rack-type-band: #5f99bf;
  --rack-availability: #78a487;
  --rack-grid-line: #d1d9df;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.workspace-switcher { display:flex; align-items:center; gap:6px; min-height:34px; padding:3px 16px; background:var(--bg-card-solid); border-bottom:1px solid var(--border-color); overflow-x:auto; scrollbar-width:thin; direction:ltr; }
.workspace-switcher-item { flex:0 0 auto; border:0; border-bottom:3px solid transparent; padding:9px 14px 8px; background:transparent; color:var(--text-muted); font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; touch-action:manipulation; }
.workspace-switcher-item.active { color:var(--text-main); border-bottom-color:var(--primary); }
/* Only real pointer devices get the hover style — prevents a sticky hover underline on touch. */
@media (hover: hover) { .workspace-switcher-item:hover { color:var(--text-main); border-bottom-color:var(--primary); } }

.app-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.auth-required .app-shell { visibility: hidden; pointer-events: none; }
.auth-required #auth-modal {
  opacity: 1;
  pointer-events: auto;
  background: radial-gradient(circle at top, rgba(59, 130, 246, 0.18), rgba(2, 6, 23, 0.94) 58%);
}
.auth-required #auth-modal .modal-card { width: min(92vw, 460px); max-height: calc(100vh - 32px); }
.section-subtitle { color: var(--text-muted); margin-top: 4px; }
.users-manager-layout { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr); gap: 20px; }
.card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-lg); }
.card-heading { font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-heading i { color: var(--primary); }
.pos-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,420px); gap:24px; align-items:start; max-width:1440px; margin-inline:auto; }
.pos-layout > .card:first-child { min-height:360px; }
.pos-products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; min-height:220px; align-content:start; }
.pos-products-grid .empty-state { grid-column:1 / -1; min-height:170px; display:grid; place-items:center; padding:24px; }
.pos-product { display:flex; flex-direction:column; gap:6px; min-height:110px; padding:16px; text-align:start; color:var(--text-main); background:var(--bg-card-solid); border:1px solid var(--border-color); border-radius:var(--radius-md); cursor:pointer; transition:.18s; }
.pos-product:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.pos-product small, .pos-cart-row small { color:var(--text-muted); display:block; }
.pos-product .pos-stock.is-low { color:#f59e0b; font-weight:700; }
.pos-product:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.pos-product strong { color:var(--primary); margin-top:auto; }
.pos-product-form { margin-top:20px; padding-top:18px; border-top:1px solid var(--border-color); align-items:end; }
.pos-cart-card { position:sticky; top:18px; min-width:0; }
.pos-cart-items { display:flex; flex-direction:column; gap:10px; min-height:80px; margin-bottom:16px; }
.pos-cart-row { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-color); }
.pos-cart-actions { display:flex; gap:7px; align-items:center; }
.pos-cart-actions button { border:1px solid var(--border-color); background:var(--bg-card-solid); color:var(--text-main); border-radius:6px; min-width:27px; min-height:27px; cursor:pointer; }
.pos-cart-actions button:last-child { color:#f87171; }
.pos-totals { display:flex; flex-direction:column; gap:8px; margin:14px 0; padding-top:12px; border-top:1px solid var(--border-color); }
.pos-totals > div { display:flex; justify-content:space-between; color:var(--text-muted); }
.pos-totals .pos-total { padding-top:10px; border-top:1px dashed var(--border-color); color:var(--text-main); font-size:1.1rem; }
/* D — POS: category tabs, discount field, payment-method quick-select, transaction list */
.card-heading { position: relative; }
.pos-txn-list-btn { margin-inline-start: auto; padding: 5px 12px; font-size: .8rem; }
.pos-category-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pos-category-tab { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.pos-category-tab:hover { color: var(--text-main); border-color: var(--primary); }
.pos-category-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pos-discount-field label { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.pos-discount-field label i { color: var(--primary); }
.pos-totals .pos-discount-row strong { color: #ef4444; }
.pos-payment-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pos-payment-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--border-color); background: var(--bg-card-solid); color: var(--text-muted); border-radius: var(--radius-sm); font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.pos-payment-btn i { font-size: 1rem; }
.pos-payment-btn:hover { border-color: var(--primary); color: var(--text-main); }
.pos-payment-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 1px 4px rgba(59,130,246,.25); }
/* D — Transaction List modal table */
.pos-txn-list-body { min-height: 120px; }
.pos-txn-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 6px; border: 1px solid var(--border-color); }
.pos-txn-table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 680px; }
.pos-txn-table th { background: color-mix(in srgb, var(--primary) 8%, var(--bg-card-solid)); color: var(--text-main); font-weight: 800; text-align: start; padding: 9px 10px; border-bottom: 2px solid var(--border-color); font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; }
.pos-txn-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); color: var(--text-main); }
.pos-txn-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.pos-txn-id { font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-size: .76rem; color: var(--text-muted); }
.pos-num { text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .pos-payment-methods { grid-template-columns: repeat(3, 1fr); }
  .pos-txn-list-btn { width: 100%; margin-inline-start: 0; margin-top: 8px; }
  .card-heading { flex-wrap: wrap; }
}
.empty-state { padding:28px 12px; text-align:center; color:var(--text-muted); border:1px dashed var(--border-color); border-radius:var(--radius-md); }
.form-help { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 18px; }
.users-list { display: grid; gap: 10px; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: rgba(125,125,125,.06); }
.user-row-avatar { width: 38px; height: 38px; flex: 0 0 38px; }
.user-row-main { min-width: 0; flex: 1; display: grid; gap: 2px; }
.user-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row-main span { color: var(--text-muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-badge { border-radius: 999px; padding: 5px 9px; font-size: .72rem; background: rgba(59,130,246,.15); color: var(--primary); white-space: nowrap; }
.role-admin { color: #c4b5fd; background: rgba(139,92,246,.18); }
.role-housekeeper { color: #facc15; background: rgba(234,179,8,.15); }
.role-manager { color: #34d399; background: rgba(16,185,129,.15); }
/* E — Admin: user row edit/toggle controls */
.user-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.user-row-actions .btn { min-width: 32px; min-height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.user-row-disabled { opacity: .55; }
.user-row-disabled .avatar { filter: grayscale(1); }
.user-status-badge { border-radius: 999px; padding: 5px 9px; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.user-status-badge.is-disabled { color: #ef4444; background: rgba(239,68,68,.15); }
.user-row-editing { background: color-mix(in srgb, var(--primary) 6%, transparent); border-color: var(--primary); }
.user-edit-role { flex: 0 0 auto; min-width: 160px; min-height: 34px; padding: 5px 8px; font-size: .8rem; }
@media (max-width: 560px) {
  .user-row { flex-wrap: wrap; }
  .user-edit-role { min-width: 0; width: 100%; order: 3; }
  .user-row-actions { order: 4; margin-inline-start: auto; }
}
.form-feedback { min-height: 22px; margin-top: 12px; font-size: .86rem; }
.form-feedback.is-success { color: #34d399; }.form-feedback.is-error { color: #f87171; }.form-feedback.is-loading { color: var(--text-muted); }
.frontdesk-summary { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.frontdesk-stat { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); color:var(--text-main); cursor:pointer; text-align:start; }
.frontdesk-stat strong { color:var(--primary); font-size:1.35rem; }
.frontdesk-stat span { color:var(--text-muted); font-size:.88rem; }
.frontdesk-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.frontdesk-filters .btn.active, .frontdesk-stat.active { border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 2px rgba(59,130,246,.12); }
/* Room Operations / Fund Transactions collapsible groups in the workspace nav */
.nav-ops-head { display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
.nav-ops-head span { flex:1 1 auto; }
.nav-ops-caret { font-size:.7rem; opacity:.7; transition:transform .18s ease; }
.nav-ops-head.is-collapsed .nav-ops-caret { transform:rotate(-90deg); }
.nav-ops-body[hidden] { display:none; }
.nav-ops-item { position:relative; }
.nav-ops-item .nav-ops-count { margin-inline-start:auto; min-width:20px; padding:1px 6px; border-radius:999px; background:rgba(59,130,246,.14); color:var(--primary); font-size:.68rem; font-weight:700; text-align:center; }
.nav-ops-item.is-empty .nav-ops-count { background:rgba(148,163,184,.16); color:var(--text-muted); }
.rack-operations-strip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; margin-bottom:14px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); }
.rack-operations-heading { display:grid; gap:1px; min-width:145px; padding-inline-end:8px; color:var(--text-main); }
.rack-operations-heading i { color:#f59e0b; margin-inline-end:5px; }
.rack-operations-heading small { color:var(--text-muted); font-size:.7rem; }
.rack-operation-link { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:7px 10px; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-card-solid); color:var(--text-main); cursor:pointer; font:inherit; transition:transform .18s ease, border-color .18s ease, background .18s ease; }
.rack-operation-link:hover, .rack-operation-link:focus-visible { transform:translateY(-1px); border-color:var(--primary); background:rgba(59,130,246,.08); outline:none; }
.rack-operation-link i { color:var(--primary); }
.rack-operation-link span { white-space:nowrap; font-size:.8rem; }
.rack-operation-link b { min-width:22px; padding:2px 5px; border-radius:999px; background:rgba(59,130,246,.14); color:var(--primary); font-size:.72rem; text-align:center; }
.rack-operation-link.is-empty { opacity: 0.55; }
.rack-operation-link.is-empty b { background: rgba(148,163,184,.14); color: var(--text-muted); }

/* =============== A1.5 — Rack Inline Dashboard =============== */
.rack-inline-view { display: block; }
.rack-inline-view[hidden] { display: none; }
.rid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; padding: 6px 0;
}
.rid-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 16px; min-width: 0;
}
.rid-card-title {
  font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px;
}
.rid-gauge { display: flex; align-items: center; gap: 14px; }
.rid-gauge svg { flex: 0 0 120px; }
.rid-gauge-legend { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; }
.rid-gauge-legend b { font-size: 1.1rem; font-weight: 800; margin-inline-end: 6px; font-variant-numeric: tabular-nums; }
.rid-gauge-legend span { color: var(--text-muted); }
.rid-kpi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.rid-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-card-solid);
}
.rid-kpi i { font-size: 0.85rem; color: var(--primary); margin-bottom: 2px; }
.rid-kpi--rev i { color: #22c55e; }
.rid-kpi--adr i { color: #a855f7; }
.rid-kpi--arr i { color: #22c55e; }
.rid-kpi--dep i { color: #f59e0b; }
.rid-kpi--inh i { color: #3b82f6; }
.rid-kpi--blk i { color: #ef4444; }
.rid-kpi--out i { color: #94a3b8; }
.rid-kpi--cxl i { color: #f97316; }
.rid-kpi--new i { color: #06b6d4; }
.rid-room-list .rid-arrival-avatar { font-size: 0.7rem; font-weight: 800; }
.rid-kpi strong { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rid-kpi span { font-size: 0.7rem; color: var(--text-muted); }
.rid-svg-chart { width: 100%; height: auto; max-height: 160px; }
.rid-trend-card { grid-column: span 2; }
.rid-status-stack { display: flex; flex-direction: column; gap: 8px; }
.rid-status-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
}
.rid-status-row:last-child { border-bottom: 0; }
.rid-status-row span:nth-of-type(2) { flex: 1; color: var(--text-main); }
.rid-status-row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.rid-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rid-arrivals-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rid-arrivals-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border-color);
}
.rid-arrivals-list li:last-child { border-bottom: 0; }
.rid-arrival-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(59,130,246,.18); color: var(--primary);
  font-weight: 800; font-size: 0.85rem; flex-shrink: 0;
}
.rid-arrival-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rid-arrival-body strong { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rid-arrival-body span { font-size: 0.72rem; color: var(--text-muted); }
.rid-empty { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 20px 0; }

/* =============== A1.6 — Rack Inline Analytics =============== */
.ria-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
}
.ria-title { font-size: 1.05rem; font-weight: 700; color: var(--text-main); }
.ria-title i { color: var(--primary); margin-inline-end: 6px; }
.ria-range { display: flex; gap: 4px; }
.ria-range-btn {
  padding: 6px 12px; border: 1px solid var(--border-color); background: var(--bg-card-solid);
  color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: 0.78rem; transition: all .15s;
}
.ria-range-btn:hover { border-color: var(--primary); color: var(--primary); }
.ria-range-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.ria-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 12px;
}
.ria-kpi {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-card);
}
.ria-kpi span { color: var(--text-muted); font-size: 0.75rem; }
.ria-kpi strong { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ria-kpi small { display: block; font-size: 0.72rem; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.ria-legend {
  display: flex; gap: 16px; margin-bottom: 8px; font-size: 0.78rem; color: var(--text-muted);
}
.ria-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ria-swatch { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.ria-chart-wrap {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 14px; overflow-x: auto;
}
.ria-svg { width: 100%; max-height: 260px; height: auto; display: block; }
.ria-total { font-size: 0.85rem; color: var(--text-muted); }
.ria-total strong { color: var(--text-main); font-size: 1.05rem; font-variant-numeric: tabular-nums; margin-inline-start: 4px; }
.ria-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card);
}
.ria-filter { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; color: var(--text-muted); }
.ria-filter select, .ria-filter input[type="date"] {
  font: inherit; font-size: 0.8rem; color: var(--text-main); background: var(--bg-card-solid);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 5px 8px; min-width: 120px;
}
.ria-filter select:focus, .ria-filter input:focus { outline: none; border-color: var(--primary); }
.ria-filters .ria-range { margin-inline-start: auto; flex-wrap: wrap; }
.ria-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.ria-chart-title { margin: 0 0 8px; font-size: 0.85rem; font-weight: 700; color: var(--text-main); }

/* ============ A2 — New Reservation entry: type filter + stay strip ============ */
.entry-type-filter {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px; padding: 0 2px;
}
.entry-type-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--border-color);
  background: var(--bg-card-solid); color: var(--text-muted);
  border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.8rem;
  transition: all .15s;
}
.entry-type-chip:hover { border-color: var(--primary); color: var(--primary); }
.entry-type-chip.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.entry-type-chip b {
  font-size: 0.7rem; padding: 1px 6px; border-radius: 999px;
  background: rgba(148,163,184,0.18); color: inherit; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.entry-type-chip.active b { background: rgba(255,255,255,0.25); }

.entry-summary-strip {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 16px;
  background: var(--bg-card-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.entry-summary-strip[hidden] { display: none; }
.ess-fact {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: 0.85rem;
}
.ess-fact i { color: var(--primary); font-size: 0.8rem; }
.ess-total {
  margin-inline-start: auto;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.ess-total span { color: var(--text-muted); font-size: 0.8rem; }
.ess-total strong {
  font-size: 1.1rem; font-weight: 800; color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.empty-state { color: var(--text-muted); padding: 24px 8px; text-align: center; }
.permissions-summary { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-color); }
.permission-role { padding: 11px 0; border-bottom: 1px solid var(--border-color); }
.permission-role:last-child { border-bottom: 0; }
.permission-role strong { display: block; margin-bottom: 7px; font-size: .82rem; }
.permission-list { display: flex; flex-wrap: wrap; gap: 6px; }
.permission-list span { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: .72rem; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.16); border-radius: 999px; padding: 4px 7px; }
.permission-list i { color: #34d399; font-size: .65rem; }

/* LTR / RTL Direction Support */
html[dir="ltr"] body {
  direction: ltr;
}

html[dir="rtl"] body {
  direction: rtl;
}

/* App Header & Top Navigation */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: var(--bg-header);
  backdrop-filter: var(--backdrop-blur);
  border-bottom: 1px solid var(--border-color);
  transition: background 0.3s ease;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.brand-title h1 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(to right, var(--text-main), #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-title p {
  font-size: 11px;
  color: var(--text-muted);
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(125, 125, 125, 0.08);
  padding: 6px 14px;
  border-radius: 30px;
  border: 1px solid var(--border-color);
  font-size: 0.85rem;
}

.stat-pill i {
  color: var(--primary);
}

.stat-value {
  font-weight: 700;
  color: var(--text-main);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: rgba(125, 125, 125, 0.08);
  color: var(--text-main);
  cursor: pointer;
  font-size: 1.05rem;
}

.sidebar-toggle-btn:hover { background: rgba(59, 130, 246, 0.2); color: var(--primary); }

/* Theme & Language Switchers */
.theme-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: rgba(125, 125, 125, 0.08);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.1rem;
}

.theme-toggle-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  color: var(--primary);
}

/* Notifications Center */
.notifications-wrap { position: relative; }

.notifications-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: rgba(125, 125, 125, 0.08);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.05rem;
}

.notifications-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  color: var(--primary);
}

.notifications-badge {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  border: 2px solid var(--bg-header);
}

.notifications-panel {
  position: absolute;
  top: calc(100% + 10px);
  /* Pin the panel's end edge to the bell and open toward the page interior so
     it never overflows the viewport edge (RTL: opens left, LTR: opens right). */
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: min(340px, 90vw);
  max-height: 420px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
}

/* The panel is display:flex when open; without this the UA [hidden] rule loses the cascade and
   the panel stays on screen (and off the viewport edge) even while closed. */
.notifications-panel[hidden] { display: none; }

.notifications-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 800;
  color: var(--text-main);
}

.notifications-mark-all {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
}

.notifications-mark-all:hover { text-decoration: underline; }

.notifications-list {
  overflow-y: auto;
  max-height: 360px;
}

.notifications-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 0.85rem;
  color: var(--text-main);
}

.notifications-item:last-child { border-bottom: none; }

.notifications-item:hover { background: rgba(125, 125, 125, 0.08); }

.notifications-item i {
  color: var(--primary);
  margin-top: 2px;
  flex: 0 0 auto;
}

.notifications-item.is-unread { background: rgba(59, 130, 246, 0.08); font-weight: 700; }

.notifications-item.is-read { color: var(--text-muted); font-weight: 400; }

.notifications-item-text { flex: 1 1 auto; word-break: break-word; }

.notifications-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

@media (max-width: 767px) {
  .notifications-panel { width: min(300px, 92vw); inset-inline-start: -8px; inset-inline-end: auto; }
}

.lang-switcher {
  display: flex;
  background: rgba(125, 125, 125, 0.08);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 2px;
}

.lang-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lang-btn.active {
  background: var(--primary);
  color: #fff;
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(125, 125, 125, 0.08);
  padding: 6px 16px;
  border-radius: 30px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-profile-badge:hover {
  background: rgba(125, 125, 125, 0.15);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

/* App Body Layout */
.app-container {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Sidebar Navigation */
.app-sidebar {
  width: 240px;
  background: var(--bg-card-solid);
  border-inline-end: 1px solid var(--border-color);
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  overflow-y: auto;
  transition: background 0.3s ease;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 4px 12px;
  padding: 12px 12px 14px;
  border-bottom: 1px solid var(--border-color);
}
.sidebar-header > div { display: grid; gap: 2px; min-width: 0; }
.sidebar-header strong { font-size: .86rem; color: var(--text-main); }
.sidebar-header span { color: var(--text-dim); font-size: .7rem; }
.sidebar-header > i { color: var(--primary); font-size: 1rem; }
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 4px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-size: .72rem;
}
.sidebar-status-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.12); }

.app-sidebar.is-collapsed { width: 76px; }
.app-sidebar.is-collapsed .nav-item { justify-content: center; padding-inline: 8px; }
.app-sidebar.is-collapsed .nav-item span,
.app-sidebar.is-collapsed .sidebar-header > div,
.app-sidebar.is-collapsed .sidebar-footer span:last-child { display: none; }
.app-sidebar.is-collapsed .sidebar-header { justify-content: center; padding-inline: 6px; }
.app-sidebar.is-collapsed .sidebar-footer { justify-content: center; padding-inline: 6px; }
.sidebar-backdrop { display: none; }

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.nav-section-title {
  color: var(--text-dim);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 14px 16px 5px;
  text-transform: uppercase;
}

.nav-section-title + .nav-item { margin-top: 2px; }
.app-sidebar.is-collapsed .nav-section-title { height: 10px; padding: 0; overflow: hidden; opacity: 0; }
.app-sidebar.is-collapsed .nav-menu { gap: 7px; }
.app-sidebar.is-collapsed .nav-section-title + .nav-item { margin-top: 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.nav-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.nav-item:hover {
  background: rgba(125, 125, 125, 0.08);
  color: var(--text-main);
}

.nav-item.active {
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary);
  border-color: rgba(59, 130, 246, 0.22);
  box-shadow: inset -3px 0 0 var(--primary);
}

html[dir="ltr"] .nav-item.active { box-shadow: inset 3px 0 0 var(--primary); }

.nav-item i {
  font-size: 1rem;
  width: 24px;
  flex: 0 0 24px;
  text-align: center;
}

/* Main Content Area */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 40%);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Controls Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 16px;
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rack-navigation { display: inline-flex; gap: 6px; }
.icon-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
.rack-filters { margin-inline-start: auto; }
.rack-search { display: flex; align-items: center; gap: 8px; min-width: 210px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card-solid); color: var(--text-muted); }
.rack-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-main); font: inherit; }
.rack-status-filter { min-width: 150px; padding: 9px 12px; }
.rack-command-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px 0; }
.rack-view-switcher, .rack-command-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rack-view-btn { border:1px solid var(--border-color); border-radius:10px; background:var(--bg-card-solid); color:var(--text-muted); padding:9px 13px; font:inherit; font-size:.84rem; cursor:pointer; transition:.2s ease; }
.rack-view-btn:hover, .rack-view-btn.active { color:var(--text-main); border-color:var(--primary); background:rgba(59,130,246,.14); }
#rack-compact-btn.active { color:var(--primary); border-color:var(--primary); background:rgba(59,130,246,.14); }
.rack-summary-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.rack-summary-strip > div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-card-solid); }
.rack-summary-strip span { color:var(--text-muted); font-size:.82rem; }
.rack-summary-strip strong { color:var(--text-main); font-size:1rem; }

.frontdesk-ops-panel { display:grid; grid-template-columns:minmax(170px,.28fr) minmax(0,1fr); gap:18px; margin:0 0 14px; padding:15px; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:linear-gradient(135deg,rgba(59,130,246,.10),var(--bg-card)); box-shadow:var(--shadow-lg); }
.frontdesk-ops-heading { display:grid; align-content:center; gap:3px; padding-inline-end:16px; border-inline-end:1px solid var(--border-color); }
.frontdesk-ops-kicker { color:var(--primary); font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.frontdesk-ops-heading strong { color:var(--text-main); font-size:1.05rem; }
.frontdesk-ops-heading small { color:var(--text-muted); font-size:.74rem; line-height:1.5; }
.frontdesk-ops-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.frontdesk-ops-group { min-width:0; }
.frontdesk-ops-group-title { display:flex; align-items:center; gap:7px; margin-bottom:8px; color:var(--text-muted); font-size:.74rem; font-weight:800; }
.frontdesk-ops-group-title::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(59,130,246,.12); }
.frontdesk-ops-links { display:grid; gap:5px; }
.frontdesk-ops-link { display:flex; align-items:center; gap:8px; min-width:0; padding:7px 9px; border:1px solid transparent; border-radius:9px; background:rgba(125,125,125,.06); color:var(--text-main); font:inherit; font-size:.77rem; text-align:start; cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.frontdesk-ops-link i { width:18px; flex:0 0 18px; color:var(--primary); text-align:center; }
.frontdesk-ops-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frontdesk-ops-link:hover,.frontdesk-ops-link:focus-visible,.frontdesk-ops-link.active { border-color:rgba(59,130,246,.35); background:rgba(59,130,246,.13); color:var(--primary); outline:none; transform:translateY(-1px); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  outline: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
  background: rgba(125, 125, 125, 0.1);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: rgba(125, 125, 125, 0.2);
}

.btn-success {
  background: #10b981;
  color: #fff;
}

.btn-danger {
  background: #ef4444;
  color: #fff;
}

.date-picker-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card-solid);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.date-picker-group input {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
}

/* Legend Status Badges */
.status-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot.reserved { background: var(--status-reserved); }
.dot.checkedin { background: var(--status-checkedin); }
.dot.checkedout { background: var(--status-checkedout); }
.dot.dirty { background: var(--status-dirty); }
.dot.maintenance { background: var(--status-maintenance); }

/* TAPE CHART / ROOM RACK GRID */
.tape-chart-wrapper {
  display: flex;
  align-items: stretch;
  background: var(--bg-card-solid);
  backdrop-filter: var(--backdrop-blur);
  border-radius: 0;
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: none;
}
/* display:flex above outranks the UA [hidden] rule, so the tape chart would
   stay visible under Dashboard/Analytics. Restore hidden in those views. */
.tape-chart-wrapper[hidden] { display: none; }

/* ===================== A1.1 RACK SIDEBAR WIDGET ===================== */
.rack-sidebar-widget {
  flex: 0 0 196px;
  min-width: 180px;
  max-width: 210px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-card-solid);
  border-inline-end: 1px solid var(--border-color);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}
.rsw-kpi-row { display: flex; gap: 7px; }
.rsw-kpi {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 9px 4px; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); background: var(--bg-card); text-align: center;
}
.rsw-kpi i { font-size: 1rem; }
.rsw-checkin i { color: #22c55e; }
.rsw-checkout i { color: #f59e0b; }
.rsw-kpi strong { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rsw-kpi span { font-size: 0.6rem; color: var(--text-muted); line-height: 1.2; }
.rsw-section-title {
  font-size: 0.65rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px;
}
/* Compact two-column breakdown to reduce the widget's height */
.rsw-stat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.rsw-stat {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; padding: 2px 0;
}
.rsw-stat--total {
  grid-column: 1 / -1;
  margin-top: 4px; padding-top: 5px;
  border-top: 1px solid var(--border-color); font-weight: 700;
}
/* Collapsible legends (collapsed by default) keep the sidebar tidy */
.rsw-legend-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 5px; }
.rsw-legend-details > summary::-webkit-details-marker { display: none; }
.rsw-legend-details > summary::before { content: '\25B8'; font-size: 0.7em; transition: transform 0.15s ease; }
.rsw-legend-details[open] > summary::before { transform: rotate(90deg); }
.rsw-legend-details .rsw-legend { margin-top: 6px; }
.rsw-val { font-weight: 700; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.rsw-val--green  { color: #22c55e; }
.rsw-val--blue   { color: #6366f1; }
.rsw-val--amber  { color: #f59e0b; }
.rsw-val--red    { color: #ef4444; }
.rsw-val--sky    { color: #0ea5e9; }
.rsw-val--purple { color: #a855f7; }
.rsw-val--teal   { color: #14b8a6; }
.rsw-legend { display: flex; flex-wrap: wrap; gap: 4px; }
.rsw-chip {
  display: inline-flex; align-items: center; padding: 2px 7px;
  border-radius: 999px; font-size: 0.6rem; font-weight: 600;
  background: color-mix(in srgb, var(--chip) 18%, transparent);
  color: var(--chip);
  border: 1px solid color-mix(in srgb, var(--chip) 35%, transparent);
  white-space: nowrap;
}
/* A1.7 — Mini Calendar */
.rsw-cal { padding-bottom: 4px; }
.rsw-cal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px; direction: ltr;
}
.rsw-cal-title { font-size: 0.72rem; font-weight: 700; color: var(--text-main); text-align: center; flex: 1; }
.rsw-cal-nav {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-size: 0.65rem;
  transition: background .15s, color .15s;
}
.rsw-cal-nav:hover { background: rgba(59,130,246,.15); color: var(--primary); }
.rsw-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; direction: ltr;
}
.rsw-cal-dayname {
  text-align: center; font-size: 0.58rem; color: var(--text-dim);
  font-weight: 700; padding: 2px 0; letter-spacing: 0.02em;
}
.rsw-cal-cell, .rsw-cal-empty {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 22px; border-radius: 4px;
  font-size: 0.65rem; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; transition: background .12s, color .12s;
  padding: 0; gap: 1px;
}
.rsw-cal-empty { cursor: default; }
.rsw-cal-cell:hover { background: rgba(59,130,246,.12); color: var(--primary); }
.rsw-cal-inrack { background: rgba(59,130,246,.08); color: var(--primary); }
.rsw-cal-today {
  background: var(--primary) !important; color: #fff !important;
  font-weight: 700; border-radius: 50%;
}
.rsw-cal-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: #f59e0b; display: block;
}
.rsw-cal-today .rsw-cal-dot { background: rgba(255,255,255,.7); }

/* A1.8 — Rack Sidebar Collapse Toggle */
.rsw-collapse-toggle {
  flex: 0 0 12px; width: 12px; border: none; background: var(--border-color);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem; transition: background .15s, color .15s;
  padding: 0;
}
.rsw-collapse-toggle:hover { background: var(--primary); color: #fff; }
html[dir="rtl"] .rsw-collapse-toggle .fa-chevron-right,
html[dir="ltr"] .rsw-collapse-toggle .fa-chevron-right { transition: transform .2s; }
.tape-chart-wrapper.rsw-collapsed .rack-sidebar-widget {
  flex: 0 0 0; min-width: 0; max-width: 0; overflow: hidden; padding: 0;
}
.tape-chart-wrapper.rsw-collapsed .rsw-collapse-toggle i { transform: rotate(180deg); }

@media (max-width: 768px) {
  .rack-sidebar-widget { display: none; }
  .rsw-collapse-toggle { display: none; }
}

.tape-chart-container {
  --rack-day-width: 132px;
  display: grid;
  grid-template-columns: 198px minmax(0, 1fr);
  overflow-x: auto;
  max-height: calc(100vh - 196px);
  direction: ltr;
}

.tape-chart-container.rack-days-7 { --rack-day-width: 178px; }
.tape-chart-container.rack-days-15 { --rack-day-width: 132px; }
.tape-chart-container.rack-days-30 { --rack-day-width: 104px; }

/* Feature A — Compact rack mode: denser rows/columns (InnGenius-style density) */
.tape-chart-container.rack-compact { --rack-day-width: 90px; }
.tape-chart-container.rack-compact .room-header-cell { height: 38px; padding: 4px 8px; }
.tape-chart-container.rack-compact .room-cell { height: 28px; padding: 2px 8px; gap: 4px; font-size: 0.82rem; }
.tape-chart-container.rack-compact .rack-group-row,
.tape-chart-container.rack-compact .timeline-group-row,
.tape-chart-container.rack-compact .rack-availability-row,
.tape-chart-container.rack-compact .timeline-availability-row { height: 20px; min-height: 20px; max-height: 20px; line-height: 1; font-size: 0.74rem; }
.tape-chart-container.rack-compact .timeline-availability-row .timeline-cell,
.tape-chart-container.rack-compact .rack-availability-row > * { line-height: 1; }
.tape-chart-container.rack-compact .timeline-header { height: 38px; }
.tape-chart-container.rack-compact .day-header-cell { padding: 3px; }
.tape-chart-container.rack-compact .day-name { font-size: 0.66rem; }
.tape-chart-container.rack-compact .day-number { font-size: 0.8rem; }
.tape-chart-container.rack-compact .timeline-row { height: 28px; }
.tape-chart-container.rack-compact .booking-bar { height: 22px; top: 3px; padding: 2px 6px; font-size: 0.72rem; }
.tape-chart-container.rack-compact .room-status-dot { width: 8px; height: 8px; }
.tape-chart-container.rack-compact .room-number-badge { font-size: 0.82rem; }

/* Rooms Column */
.rooms-column {
  border-inline-end: 1px solid var(--border-color);
  background: var(--bg-card-solid);
  z-index: 10;
  direction: ltr;
}

.room-header-cell {
  height: 50px;
  padding: 8px 12px;
  font-weight: 700;
  background: var(--bg-card-solid);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.room-cell {
  height: 42px;
  padding: 3px 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.room-cell.is-selected { background: color-mix(in srgb, var(--primary) 14%, var(--bg-card-solid)); box-shadow: inset 3px 0 0 var(--primary); }
/* Room status color coding — status dot + inset stripe */
.room-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; box-shadow: 0 0 0 2px rgba(255,255,255,.15); flex: 0 0 auto; }
.room-cell[data-status="clean"] { box-shadow: inset 4px 0 0 #22c55e; }
.room-cell[data-status="clean"] .room-status-dot { background: #22c55e; }
.room-cell[data-status="dirty"] { box-shadow: inset 4px 0 0 #f59e0b; }
.room-cell[data-status="dirty"] .room-status-dot { background: #f59e0b; }
.room-cell[data-status="maintenance"] { box-shadow: inset 4px 0 0 #ef4444; }
.room-cell[data-status="maintenance"] .room-status-dot { background: #ef4444; }
.room-cell[data-status="repair_dnr"] { box-shadow: inset 4px 0 0 #991b1b; }
.room-cell[data-status="repair_dnr"] .room-status-dot { background: #991b1b; }
.room-cell[data-status="inspect"] { box-shadow: inset 4px 0 0 #0ea5e9; }
.room-cell[data-status="inspect"] .room-status-dot { background: #0ea5e9; }
.room-cell[data-status="dirty_departing"] { box-shadow: inset 4px 0 0 #fb923c; }
.room-cell[data-status="dirty_departing"] .room-status-dot { background: #fb923c; }
.room-cell[data-status="dirty_vacant"] { box-shadow: inset 4px 0 0 #eab308; }
.room-cell[data-status="dirty_vacant"] .room-status-dot { background: #eab308; }
.room-cell[data-status="do_not_disturb"] { box-shadow: inset 4px 0 0 #a855f7; }
.room-cell[data-status="do_not_disturb"] .room-status-dot { background: #a855f7; }
.room-cell[data-status="stay_over"] { box-shadow: inset 4px 0 0 #14b8a6; }
.room-cell[data-status="stay_over"] .room-status-dot { background: #14b8a6; }
.room-cell[data-status="occupied"] { box-shadow: inset 4px 0 0 #6366f1; }
.room-cell[data-status="occupied"] .room-status-dot { background: #6366f1; }
/* Legend chips — same palette, shared with sidebar and housekeeping grid */
.hk-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card-solid); margin: 8px 0 12px; }
.hk-legend-title { width: 100%; font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.hk-legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-main); }
.hk-legend-chip::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--chip-color, #9ca3af); box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.hk-legend-chip[data-status="clean"] { --chip-color: #22c55e; }
.hk-legend-chip[data-status="dirty"] { --chip-color: #f59e0b; }
.hk-legend-chip[data-status="maintenance"] { --chip-color: #ef4444; }
.hk-legend-chip[data-status="repair_dnr"] { --chip-color: #991b1b; }
.hk-legend-chip[data-status="inspect"] { --chip-color: #0ea5e9; }
.hk-legend-chip[data-status="dirty_departing"] { --chip-color: #fb923c; }
.hk-legend-chip[data-status="dirty_vacant"] { --chip-color: #eab308; }
.hk-legend-chip[data-status="do_not_disturb"] { --chip-color: #a855f7; }
.hk-legend-chip[data-status="stay_over"] { --chip-color: #14b8a6; }
.hk-legend-chip[data-status="occupied"] { --chip-color: #6366f1; }
.hk-legend-chip[data-status="reserved"] { --chip-color: #8b5cf6; }
.hk-legend-chip[data-status="blocked"] { --chip-color: #64748b; }
.hk-legend-chip[data-status="checked_out"] { --chip-color: #94a3b8; }
.hk-legend-chip[data-status="available"] { --chip-color: #22c55e; }

/* ==========================================================================
 * C — Housekeeping page: stats sidebar + filter/bulk-action rows
 * Mirrors InnGenius's two-column layout: a slim stats rail beside the main
 * grid, with a filter row (status/housekeeper) and a bulk-apply row above
 * the cards. All colors ride theme tokens so both themes stay correct.
 * ========================================================================== */
.hk-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.hk-stats-sidebar { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
.hk-stat-group { background: var(--bg-card-solid); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px 12px; }
.hk-stat-group h5 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.hk-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: .8rem; color: var(--text-main); }
.hk-stat-row span { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.hk-stat-row b { font-variant-numeric: tabular-nums; color: var(--text-main); }
.hk-stat-row b.hk-stat-good { color: #22c55e; }
.hk-stat-row b.hk-stat-bad { color: #ef4444; }
.hk-main { min-width: 0; }
.hk-filter-row, .hk-bulk-row { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-card-solid); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 10px; }
.hk-filter-row label, .hk-bulk-row label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--text-muted); }
.hk-filter-row select, .hk-bulk-row select { min-width: 150px; padding: 6px 8px; min-height: 34px; font-size: .82rem; }
.hk-bulk-row { background: color-mix(in srgb, var(--primary) 6%, var(--bg-card-solid)); }
.hk-bulk-count { font-size: .8rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
.hk-card-select { display: flex; align-items: center; margin-inline-end: 2px; }
.hk-card-select input { width: 16px; height: 16px; cursor: pointer; }
.hk-card.is-selected { outline: 2px solid var(--primary); outline-offset: -1px; }
.hk-card-assignee { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--text-muted); padding: 4px 8px; background: color-mix(in srgb, var(--primary) 6%, transparent); border-radius: 999px; width: fit-content; }
.hk-card-assignee i { color: var(--primary); }
@media (max-width: 860px) {
  .hk-layout { grid-template-columns: 1fr; }
  .hk-stats-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .hk-stat-group { flex: 1; min-width: 160px; }
}
@media (max-width: 600px) {
  .hk-filter-row, .hk-bulk-row { flex-direction: column; align-items: stretch; }
  .hk-filter-row select, .hk-bulk-row select { min-width: 0; width: 100%; }
  .hk-bulk-row .btn { width: 100%; }
}
.room-cell.is-selected[data-status] { box-shadow: inset 3px 0 0 var(--primary), inset 7px 0 0 var(--bg-card-solid); }
.rack-group-row { display:flex; align-items:center; min-height:30px; padding:0 12px; background:var(--rack-type-band); color:#fff; font-weight:800; border-bottom:1px solid var(--rack-grid-line); }
.rack-availability-row { display:flex; align-items:center; min-height:30px; padding:0 12px; background:var(--rack-availability); color:#fff; font-size:.82rem; font-weight:700; border-bottom:1px solid var(--rack-grid-line); }
.rack-availability-row span:last-child { margin-inline-start:auto; color:#34d399; }
.timeline-group-row { min-height:30px; background:var(--rack-type-band); border-bottom:1px solid var(--rack-grid-line); }
.timeline-availability-row { min-height:30px; width:calc(var(--rack-days) * var(--rack-day-width)); min-width:100%; display:grid; grid-template-columns:repeat(var(--rack-days), var(--rack-day-width)); background:var(--rack-availability); border-bottom:1px solid var(--rack-grid-line); }
.timeline-availability-row span { display:grid; place-items:center; color:#fff; font-size:.84rem; border-inline-start:1px solid rgba(255,255,255,.25); }
.rack-hidden-type { display:none !important; }

.room-number-badge {
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
}

.room-type-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.room-select-box { width: 14px; height: 14px; margin-inline-end: 6px; accent-color: #1683bd; }
.available-rooms-panel { margin-top: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card-solid); overflow: hidden; }
.available-rooms-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border-bottom:1px solid var(--border-color); color:var(--text-main); font-size:.8rem; }
.available-rooms-heading span, .selected-rooms-summary { color:var(--text-muted); font-size:.76rem; }
.available-room-options { display:grid; max-height:190px; overflow-y:auto; }
.available-room-option { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border-color); cursor:pointer; color:var(--text-main); transition:background .15s ease; }
.available-room-option:last-child { border-bottom:0; }
.available-room-option:hover, .available-room-option.is-selected { background:rgba(59,130,246,.1); }
.available-room-option input { accent-color:var(--primary); }
.available-room-option > span { display:grid; gap:1px; min-width:0; flex:1; }
.available-room-option small { color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.available-room-option > strong { white-space:nowrap; color:var(--primary); font-size:.75rem; }
.available-rooms-empty { padding:12px; color:var(--text-muted); font-size:.8rem; text-align:center; }
.selected-rooms-summary { margin-top:6px; }
.room-state-label { display:none; }
.room-state-label.clean { color: var(--status-reserved); }
.room-state-label.dirty { color: var(--status-dirty); }
.room-state-label.maintenance { color: var(--status-maintenance); }
.rack-empty-state { grid-column: 1 / -1; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); text-align: center; }
.rack-empty-state i { font-size: 2rem; color: var(--primary); }
.rack-empty-state strong { color: var(--text-main); font-size: 1.05rem; }

/* Calendar Timeline Grid */
.timeline-area {
  overflow: visible;
  position: relative;
  direction: ltr;
  min-width: calc(var(--rack-days) * var(--rack-day-width));
}

.timeline-header {
  display: flex;
  height: 50px;
  width: calc(var(--rack-days) * var(--rack-day-width));
  min-width: 100%;
  background: var(--bg-card-solid);
  border-bottom: 1px solid var(--border-color);
}

.day-header-cell {
  min-width: var(--rack-day-width);
  width: var(--rack-day-width);
  padding: 6px;
  text-align: center;
  border-inline-start: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.day-header-cell.today {
  background: rgba(59, 130, 246, 0.15);
  border-bottom: 2px solid var(--primary);
}

.day-name {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.day-number {
  font-size: 0.95rem;
  font-weight: 700;
}

.timeline-body {
  position: relative;
}

.timeline-row {
  display: flex;
  height: 42px;
  width: calc(var(--rack-days) * var(--rack-day-width));
  min-width: 100%;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.timeline-cell {
  min-width: var(--rack-day-width);
  width: var(--rack-day-width);
  border-inline-start: 1px solid var(--rack-grid-line);
  height: 100%;
  cursor: pointer;
  transition: background 0.15s ease;
}

.timeline-cell:hover {
  background: rgba(59, 130, 246, 0.14);
}

.timeline-cell.is-drag-selected { background: rgba(59, 130, 246, 0.28); box-shadow: inset 0 0 0 2px var(--primary); }
.timeline-cell.is-selected { background: rgba(59, 130, 246, 0.28); box-shadow: inset 0 0 0 2px var(--primary); }
/* Room-type group collapse (click the group header to fold its rooms) */
.rack-group-row[data-rack-group] { cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; }
.rack-group-caret { transition: transform 0.18s ease; font-size: 0.78em; }
.rack-group-row.is-group-collapsed .rack-group-caret { transform: rotate(-90deg); }
.is-group-hidden { display: none !important; }
.timeline-cell:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.rack-context-menu { position: fixed; z-index: 1300; min-width: 190px; padding: 6px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card-solid); box-shadow: var(--shadow-lg); }
.rack-context-menu-item { display:flex; align-items:center; gap:9px; width:100%; padding:9px 10px; border:0; border-radius:7px; background:transparent; color:var(--text-main); text-align:start; font:inherit; cursor:pointer; }
.rack-context-menu-item:hover, .rack-context-menu-item:focus-visible { background:rgba(59,130,246,.12); color:var(--primary); outline:0; }
.rack-context-menu-item i { width:16px; color:var(--primary); }
.rack-hover-tip { position:fixed; z-index:1400; max-width:280px; padding:8px 10px; border:1px solid var(--border-color); border-radius:5px; background:var(--bg-card-solid); color:var(--text-main); box-shadow:var(--shadow-lg); font-size:.8rem; pointer-events:none; white-space:nowrap; }

/* Booking Bar Overlay */
.booking-bar {
  position: absolute;
  height: 36px;
  top: 3px;
  border-radius: 0;
  padding: 4px 10px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 5;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.booking-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.booking-guest { overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; min-width: 0; }
.booking-meta { font-size: 0.7rem; opacity: 0.9; margin-inline-start: 8px; }
/* A1.9 — Guest initial avatar inside booking bar (also carries .res-bar-avatar) */
.booking-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.28); color: #fff;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0;
  text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
/* Guest avatar badge — always sits on the leading edge of the bar in both
   LTR and RTL because .booking-guest is a flex row that follows text direction. */
.res-bar-avatar { order: -1; }
/* The avatar is flex: 0 0 auto (never shrinks); the name shrinks/ellipsizes
   first so a single-night bar still shows the avatar even if the name is clipped. */
.booking-guest-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }

.tape-chart-container.rack-compact .res-bar-avatar { width: 14px; height: 14px; font-size: 0.6rem; }

.booking-bar.reserved { background: linear-gradient(135deg, #10b981, #059669); }
.booking-bar.checked_in { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.booking-bar.checked_out { background: linear-gradient(135deg, #f59e0b, #d97706); }
.booking-bar.hold { background: linear-gradient(135deg, #facc15, #ca8a04); color: #1f2937; }
.booking-bar.blocked { background: linear-gradient(135deg, #64748b, #475569); }
.booking-bar.no_show { background: linear-gradient(135deg, #ef4444, #b91c1c); }
[data-theme="light"] .booking-bar.hold { background: #eab308; color: #1f2937; }
[data-theme="light"] .booking-bar.blocked { background: #64748b; }
[data-theme="light"] .booking-bar.no_show { background: #ef4444; }
[data-theme="light"] .booking-bar.reserved { background: #9561f5; }
[data-theme="light"] .booking-bar.checked_in { background: #3b82f6; }
[data-theme="light"] .booking-bar.checked_out { background: #f59e0b; }

/* InnGenius-style light rack: flat white cells, compact green availability,
   blue type bands, and purple reserved blocks. */
[data-theme="light"] .tape-chart-container,
[data-theme="light"] .rooms-column,
[data-theme="light"] .timeline-area { background: #fff; }
[data-theme="light"] .room-cell { background: #e5ffd0; color: #172033; }
[data-theme="light"] .timeline-cell { background: #fff; }
[data-theme="light"] .timeline-cell.weekend,
[data-theme="light"] .day-header-cell.weekend { background: #e8f8ef; }
[data-theme="light"] .timeline-cell:hover { background: #f3eaff; }
[data-theme="light"] .timeline-cell.is-drag-selected { background: #eadcff; }
[data-theme="light"] .timeline-cell.is-selected { background: #eadcff; }
[data-theme="light"] .booking-bar.reserved { background: #9561f5; }

@media (max-width: 900px) {
  .party-modal .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .party-modal .party-room-field { grid-column: 1 / -1; grid-row: auto; }
  .party-modal .available-room-options { grid-template-columns: 1fr; }
  .party-modal .modal-card { width: min(96vw, 900px); max-height: calc(100vh - 20px); }
  .party-modal .modal-card { overflow: hidden; }
  .party-modal .modal-body { max-height: calc(100vh - 142px); overflow-y: auto; }
  body:has(.party-modal.active) { overflow: hidden; }
  .party-modal .modal-footer { flex-wrap: wrap; gap: 8px; }
}

/* Modals & Forms */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: var(--bg-card-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform 0.25s ease;
}

.party-modal .modal-card { width: min(96vw, 1460px); max-width: none; max-height: 92vh; }
.party-modal .modal-body { padding: 18px 22px; }
.party-modal .form-grid { grid-template-columns: minmax(220px, .78fr) minmax(260px, 1fr) minmax(280px, 1.1fr); gap: 10px 14px; }
.party-modal .form-group.full-width { grid-column: 1 / -1; }
.party-modal .party-room-field { grid-column: 1 / -1; grid-row: auto; }
.party-modal .available-rooms-panel { min-height: 240px; max-height: 360px; }
.party-modal .available-room-options { max-height: 300px; }
.available-room-table { overflow:auto; border:1px solid var(--border-color); background:var(--bg-card-solid); }
.available-room-table-head, .available-room-option { display:grid; grid-template-columns:54px minmax(150px,1.4fr) minmax(110px,1fr) minmax(110px,1fr) minmax(85px,.7fr) minmax(145px,1fr) minmax(95px,.8fr); align-items:center; min-width:820px; }
.available-room-table-head { padding:8px 10px; background:rgba(59,130,246,.12); color:var(--text-muted); font-size:.74rem; font-weight:800; }
.available-room-table-body { min-width:820px; }
.available-room-table .available-room-option { gap:10px; padding:8px 10px; border-top:1px solid var(--border-color); color:var(--text-main); font-size:.78rem; }
.available-room-table .available-room-option:hover, .available-room-table .available-room-option.is-selected { background:rgba(59,130,246,.1); }
.available-room-table .available-room-option > span, .available-room-table .available-room-option > strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-table-check { display:flex; justify-content:center; }
.room-table-check input { width:17px; height:17px; accent-color:var(--primary); }
.room-table-room { display:grid; gap:1px; }
.room-table-room small { color:var(--text-muted); }
.party-form-heading { display:flex; align-items:center; gap:8px; padding:8px 10px; border-inline-start:4px solid var(--primary); background:rgba(59,130,246,.1); color:var(--text-main); font-weight:800; }
.party-only[hidden] { display:none !important; }
.party-layout[hidden],
#res-form[hidden],
.party-action-buttons[hidden] { display:none !important; }
.party-action-buttons { display:none; align-items:center; gap:8px; margin-inline-start:auto; }
.party-action-buttons.is-visible { display:flex; }

.modal-overlay.active .modal-card {
  transform: scale(1);
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
}

.close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close-btn:hover { color: var(--text-main); }

.modal-body {
  padding: 24px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.full-width {
  grid-column: span 2;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-control {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-control:focus {
  border-color: var(--primary);
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Housekeeping Cards Grid */
.rooms-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.hk-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hk-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hk-room-num {
  font-size: 1.2rem;
  font-weight: 800;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}

.status-badge.clean { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.status-badge.dirty { background: rgba(234, 179, 8, 0.2); color: #fde047; }
.status-badge.maintenance { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }

/* Invoicing / Folio Print View */
.invoice-card {
  background: #fff;
  color: #0f172a;
  padding: 40px;
  border-radius: var(--radius-md);
  margin-top: 20px;
}

.invoice-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.invoice-table th, .invoice-table td {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: start;
}

/* Compiler & Hostinger Guide Box */
.guide-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}

.guide-box h2 {
  color: var(--primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.code-block {
  background: #020617;
  padding: 16px;
  border-radius: var(--radius-sm);
  font-family: monospace;
  direction: ltr;
  color: #38bdf8;
  margin: 12px 0;
  overflow-x: auto;
  text-align: left;
}

/* Tablet and mobile layout */
@media (max-width: 1024px) {
  .app-header { padding: 10px 14px; gap: 10px; }
  .header-stats { display: none; }
  .main-content { padding: 16px; }
  .app-sidebar { width: 220px; }
}

@media (max-width: 767px) {
  .app-header { min-height: 62px; position: sticky; }
  .brand-container { min-width: 0; gap: 8px; flex: 0 0 auto; overflow: hidden; }
  .brand-logo { width: 36px; height: 36px; font-size: 1.1rem; flex: 0 0 auto; }
  /* The brand text overflows and overlaps the action icons on phones — the logo is enough branding here. */
  .brand-title { display: none; }
  .header-actions { margin-inline-start: auto; gap: 6px; }
  .theme-toggle-btn { width: 36px; height: 36px; flex: 0 0 36px; }
  .lang-switcher { display: flex; }
  .lang-btn { padding-inline: 7px; font-size: 0.68rem; }
  .user-profile-badge { padding: 4px; gap: 0; }
  .user-profile-badge > div:not(.avatar), .user-profile-badge > i { display: none; }
  .app-container { display: block; flex: 1; min-height: 0; }
  .app-sidebar {
    position: fixed;
    z-index: 210;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(86vw, 300px);
    height: 100vh;
    padding-top: 78px;
    transform: translateX(110%);
    box-shadow: var(--shadow-lg);
    transition: transform 0.25s ease;
  }
  html[dir="rtl"] .app-sidebar { right: 0; left: auto; inset-inline: auto; transform: translateX(110%); }
  html[dir="ltr"] .app-sidebar { left: 0; right: auto; inset-inline: auto; transform: translateX(-110%); }
  html[dir="rtl"] .app-sidebar.is-open,
  html[dir="ltr"] .app-sidebar.is-open { transform: translateX(0); }
  .app-sidebar.is-open { transform: translateX(0); }
  .app-sidebar.is-collapsed { width: min(86vw, 300px); }
  .sidebar-header { margin-top: 0; }
  .app-sidebar.is-collapsed .sidebar-header > div,
  .app-sidebar.is-collapsed .sidebar-footer span:last-child { display: inline; }
  .app-sidebar.is-collapsed .nav-item span,
  .app-sidebar.is-collapsed > div:last-child span { display: inline; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 200; border: 0; background: rgba(2, 6, 23, 0.58); cursor: pointer; }
  .sidebar-backdrop.is-visible { display: block; }
  .main-content { min-width: 0; height: 100%; padding: 12px; }
  /* Wrap the workspace tabs on phones so every page (incl. POS Gift shop / Admin) is reachable
     without a hidden horizontal scroll. */
  .workspace-switcher { padding-inline:10px; flex-wrap: wrap; overflow-x: visible; row-gap: 0; justify-content: center; }
  .workspace-switcher-item { padding: 10px 12px; }
  .toolbar { padding: 12px; gap: 10px; align-items: stretch; }
  .toolbar-left, .toolbar-right { flex-wrap: wrap; }
  .toolbar-left > *, .toolbar-right > * { max-width: 100%; }
  .rack-filters { width: 100%; margin-inline-start: 0; }
  .rack-search { flex: 1 1 180px; min-width: 0; }
  .rack-status-filter { flex: 0 1 150px; min-width: 130px; }
  .status-legend { width: 100%; flex-wrap: wrap; gap: 8px; }
  .tape-chart-container { grid-template-columns: 178px max-content; max-width:100%; max-height:calc(100vh - 190px); overflow-x:auto; overflow-y:auto; overscroll-behavior-x:contain; }
  .rooms-column { position:sticky; left:0; z-index:20; box-shadow:4px 0 10px rgba(15,23,42,.16); }
  html[dir="rtl"] .rooms-column { left:0; right:auto; }
  .timeline-area { width:calc(var(--rack-days) * var(--rack-day-width)); }
  .party-modal .modal-card { width:96vw; }
  .form-grid { grid-template-columns: 1fr; }
  .users-manager-layout { grid-template-columns: 1fr; }
  .frontdesk-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .frontdesk-ops-panel { grid-template-columns:1fr; gap:12px; }
  .frontdesk-ops-heading { padding-inline-end:0; padding-bottom:10px; border-inline-end:0; border-bottom:1px solid var(--border-color); }
  .frontdesk-ops-groups { grid-template-columns:1fr; gap:10px; }
  .user-row { align-items: flex-start; flex-wrap: wrap; }
  .user-row-main { min-width: calc(100% - 54px); }
  .role-badge { margin-inline-start: 50px; }
  .form-group.full-width { grid-column: auto; }
  .invoice-card { padding: 18px; overflow-x: auto; }
  .invoice-table { min-width: 720px; }
  .pos-layout { grid-template-columns:1fr; }
  .pos-cart-card { position:static; }
  .rooms-status-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* Dense reservation editor: the rack opens this directly for a room/day or an
   existing booking. It mirrors the reference's operational three-column form
   while keeping the existing inputs and reservation payload intact. */
#res-modal.detailed-editor-modal .modal-card {
  width: min(97vw, 1900px);
  max-width: none;
  max-height: calc(100dvh - 28px);
}
#res-modal.detailed-editor-modal .modal-header { min-height: 46px; padding: 8px 14px; }
#res-modal.detailed-editor-modal .modal-body { padding: 12px 16px; overflow: auto; }
#res-modal.detailed-editor-modal #res-form {
  display: grid;
  grid-template-columns: minmax(230px, .82fr) minmax(310px, 1.08fr) minmax(250px, .9fr);
  grid-auto-flow: row dense;
  align-items: start;
  gap: 9px 18px;
}
#res-modal.detailed-editor-modal .editor-reference-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background: color-mix(in srgb, var(--bg-card-solid) 92%, var(--primary) 8%);
}
#res-modal.detailed-editor-modal .editor-reference-column h4 { margin: 0 0 2px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); font-size: .82rem; }
#res-modal.detailed-editor-modal .editor-stay-column { grid-column: 1; }
#res-modal.detailed-editor-modal .editor-guest-column { grid-column: 2; }
#res-modal.detailed-editor-modal .editor-rate-column { grid-column: 3; }
#res-modal.detailed-editor-modal .editor-slot { display: grid; gap: 7px; }
#res-modal.detailed-editor-modal .editor-slot .form-group { display: grid; gap: 3px; }
#res-modal.detailed-editor-modal .editor-side-field { display: grid; gap: 3px; color: var(--text-muted); font-size: .74rem; font-weight: 700; }
.editor-customer-tools { display: flex; flex-wrap: wrap; gap: 5px; align-items: end; }
.editor-customer-tools label { display: grid; gap: 3px; color: var(--text-muted); font-size: .74rem; font-weight: 700; flex: 1 1 100%; min-width: 0; }
.editor-customer-tools .btn, #editor-fix-rate-btn { min-height: 32px; padding: 5px 8px; font-size: .72rem; }
.editor-card-details-btn { margin-top: 6px; width: 100%; }
.editor-inline-value { cursor: pointer; }
.editor-inline-value:hover { text-decoration: underline; color: var(--primary, #2563eb); }
#res-modal.detailed-editor-modal .editor-rate-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#res-modal.detailed-editor-modal .editor-rate-actions .editor-inline-link { white-space: nowrap; }
#res-modal.detailed-editor-modal .editor-rate-actions #editor-fix-rate-btn { flex: 0 0 auto; }
.editor-identity-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.editor-identity-pair label { display: grid; gap: 3px; color: var(--text-muted); font-size: .74rem; font-weight: 700; }
.editor-notes-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border-color); }
.editor-note-tab { flex: 0 0 auto; padding: 4px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); font: inherit; font-size: .7rem; cursor: pointer; }
.editor-note-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.editor-note-panel .form-group { display: grid; gap: 3px; }
.editor-tax-exempt { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: .75rem; }
.editor-reference-totals { display: grid; gap: 4px; padding-top: 5px; border-top: 1px dashed var(--border-color); }
.editor-reference-totals > div { display: flex; justify-content: space-between; gap: 10px; font-size: .76rem; color: var(--text-muted); }
.editor-reference-totals strong { color: var(--text-main); }
#res-modal.detailed-editor-modal .form-group { margin: 0; }
#res-modal.detailed-editor-modal .form-group label { font-size: .77rem; font-weight: 700; }
#res-modal.detailed-editor-modal .form-control { min-height: 34px; padding: 5px 8px; border-radius: 4px; }
#res-modal.detailed-editor-modal .editor-stay-field { grid-column: 1; }
#res-modal.detailed-editor-modal .editor-guest-field { grid-column: 2; }
#res-modal.detailed-editor-modal .editor-finance-field { grid-column: 3; }
#res-modal.detailed-editor-modal .editor-room-field { grid-column: 1 / -1; order: 8; }
#res-modal.detailed-editor-modal .editor-room-field > label {
  display: inline-flex; padding: 4px 8px; border-radius: 4px; background: rgba(56, 189, 248, .16); color: var(--text-main);
}
#res-modal.detailed-editor-modal .editor-room-field .available-rooms-panel { max-height: 178px; overflow: auto; }
#res-modal.detailed-editor-modal .editor-room-field .available-room-table { overflow-x: auto; }
#res-modal.detailed-editor-modal .reservation-total-preview { grid-column: 3; order: 6; margin: 0; }
.editor-financial-summary {
  grid-column: 3;
  order: 7;
  display: grid;
  gap: 1px;
  padding: 7px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.editor-financial-summary > div { display: flex; justify-content: space-between; gap: 16px; color: var(--text-muted); font-size: .78rem; }
.editor-financial-summary strong { color: var(--text-main); font-size: .84rem; }
.editor-financial-summary > div.editor-total-line { margin-top: 4px; padding-top: 5px; border-top: 1px dashed var(--border-color); }
.editor-financial-summary > div:last-child strong { color: var(--primary); }
/* المجموع + الضريبة share one line, like InnGenius. */
.editor-total-line { align-items: baseline; justify-content: flex-start; gap: 10px; }
.editor-total-line .editor-tax-inline { margin-inline-start: auto; }
.editor-accrued-label { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; margin-inline-end: 8px; font-size: .74rem; color: var(--text-muted); cursor: pointer; }
.editor-accrued-label input { margin: 0; }
.editor-tax-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.editor-tax-model-label { font-size: .78rem; color: #4b4b4b; font-weight: 500; }
/* #res-daily-rate stays in the DOM (updateTotalPreview reads its value) but is hidden:
   the rate is set via معدل التحرير / تعديل السعر, like InnGenius. The explicit rule beats
   the .editor-slot .form-group { display: grid } author rule that would defeat [hidden]. */
.editor-hidden-field { display: none !important; }
/* The reference-totals rows are relocated into .editor-financial-summary; hide the shell. */
.editor-reference-totals:empty { display: none; }
/* إضافات / تخفيض read as InnGenius's blue inline links while still showing their value. */
#res-modal.detailed-editor-modal .editor-inline-value > label { color: var(--primary); text-decoration: underline; cursor: pointer; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-inline-value > label { color: #0078a8; }
.editor-room-actions {
  grid-column: 1 / -1;
  order: 9;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 3px;
}
.editor-room-actions .btn { min-height: 30px; padding: 5px 9px; font-size: .75rem; }
.reservation-editor-menu-wrap { position: relative; margin-inline-start: auto; }
.editor-menu-trigger { width: 32px; height: 30px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-card-solid); color: var(--text-main); cursor: pointer; }
.reservation-editor-menu { position: absolute; z-index: 10; inset-inline-end: 0; top: calc(100% + 5px); width: 210px; padding: 4px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-card-solid); box-shadow: var(--shadow-lg); }
.reservation-editor-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-bottom: 1px solid var(--border-color); background: transparent; color: var(--text-main); font: inherit; font-size: .77rem; text-align: start; cursor: pointer; }
.reservation-editor-menu button:last-child { border-bottom: 0; }
.reservation-editor-menu button:hover { background: rgba(59, 130, 246, .12); color: var(--primary); }
.reservation-editor-menu i { width: 14px; color: var(--primary); }
#res-modal.detailed-editor-modal .modal-footer { min-height: 48px; padding: 7px 14px; }
#res-modal.detailed-editor-modal .editor-checkin-btn:not([hidden]) { display: inline-flex; }
#res-modal.detailed-editor-modal .editor-hold-btn:not([hidden]) { display: inline-flex; }

@media (max-width: 900px) {
  #res-modal.detailed-editor-modal .modal-card { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  #res-modal.detailed-editor-modal .modal-body { padding: 10px; }
  #res-modal.detailed-editor-modal #res-form { grid-template-columns: 1fr; gap: 8px; }
  #res-modal.detailed-editor-modal .editor-stay-field,
  #res-modal.detailed-editor-modal .editor-guest-field,
  #res-modal.detailed-editor-modal .editor-finance-field,
  #res-modal.detailed-editor-modal .editor-room-field,
  #res-modal.detailed-editor-modal .reservation-total-preview,
  #res-modal.detailed-editor-modal .editor-financial-summary,
  #res-modal.detailed-editor-modal .editor-room-actions { grid-column: 1; }
  #res-modal.detailed-editor-modal .editor-reference-column { grid-column: 1; }
  #res-modal.detailed-editor-modal .editor-room-field .available-rooms-panel { max-height: 210px; }
  #res-modal.detailed-editor-modal .available-room-table-head { display: none; }
  #res-modal.detailed-editor-modal .available-room-table .available-room-option { grid-template-columns: 28px minmax(0, 1fr); min-width: 0; padding: 7px; }
  #res-modal.detailed-editor-modal .available-room-table .available-room-option > span,
  #res-modal.detailed-editor-modal .available-room-table .available-room-option > strong { grid-column: 2; white-space: normal; }
  #res-modal.detailed-editor-modal .available-room-table .available-room-option > span:first-child { grid-column: 1; grid-row: 1 / span 6; }
}

@media (max-width: 767px) {
  body:has(.modal-overlay.active) { overflow: hidden; }
  .party-modal { padding: 10px; overflow-y: auto; overscroll-behavior: contain; }
  .party-modal .modal-card { width: 100%; max-width: none; max-height: calc(100dvh - 20px); border-radius: 12px; overflow: hidden; }
  .party-modal .modal-header { padding: 12px 14px; }
  .party-modal .modal-header h3 { font-size: 1rem; }
  .party-modal .modal-body { max-height: calc(100dvh - 142px); overflow-y: auto; padding: 12px; }
  .party-modal .form-grid { grid-template-columns: 1fr; gap: 9px; }
  .party-modal .form-group, .party-modal .form-group.full-width, .party-modal .party-room-field { grid-column: 1; }
  .party-modal .form-control { min-height: 40px; padding: 8px 10px; font-size: .88rem; }
  .party-modal .available-rooms-panel { min-height: 0; max-height: none; }
  .party-modal .available-room-table { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .party-modal .available-room-table-head, .party-modal .available-room-table .available-room-option { min-width: 820px; }
  .party-modal .available-room-table-head > span:nth-child(1), .party-modal .available-room-table .available-room-option > span:nth-child(1) { position: sticky; inset-inline-start: 0; z-index: 3; background: var(--bg-card-solid); }
  .party-modal .available-room-table-head > span:nth-child(2), .party-modal .available-room-table .available-room-option > span:nth-child(2) { position: sticky; inset-inline-start: 54px; z-index: 3; background: var(--bg-card-solid); box-shadow: 4px 0 8px rgba(15,23,42,.12); }
  .party-modal .available-room-table-head > span:nth-child(1), .party-modal .available-room-table-head > span:nth-child(2) { background: rgba(59,130,246,.12); }
  .party-modal .modal-footer { padding: 10px 12px; justify-content: stretch; }
  .party-modal .modal-footer > #cancel-res-btn, .party-modal .party-action-buttons, .party-modal .party-action-buttons button { flex: 1; }
  .party-modal .party-action-buttons { margin-inline-start: 0; }
}

/* 375px phones: keep the modal itself in the viewport while the dense room
   table owns its horizontal scroll. The room/checkbox columns remain visible. */
@media (max-width: 390px) {
  body:has(.party-modal.active) { overflow: hidden; }
  .party-modal { padding: 4px; }
  .party-modal .modal-card { max-height: calc(100dvh - 8px); border-radius: 10px; }
  .party-modal .modal-header { padding: 10px 12px; }
  .party-modal .modal-body { max-height: calc(100dvh - 122px); padding: 10px; }
  .party-modal .form-grid { gap: 7px; }
  .party-modal .form-control { min-height: 38px; padding: 7px 9px; font-size: .84rem; }
  .party-modal .available-room-table { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
  .party-modal .available-room-table-head,
  .party-modal .available-room-table .available-room-option,
  .party-modal .available-room-table-body { min-width: 820px; }
  .party-modal .modal-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 8px 10px; }
  .party-modal .modal-footer > #cancel-res-btn { grid-column: 1 / -1; }
  .party-modal .party-action-buttons { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: 100%; }
  .party-modal .party-action-buttons button { min-width: 0; }
}

/* Reservation dialogs: visual parity with the compact InnGenius reference. */
#res-modal [hidden] { display: none !important; }
#res-modal { direction: inherit; }
#res-modal .modal-card,
#res-modal .modal-body,
#res-modal form { direction: inherit; text-align: start; }
html[dir="ltr"] #res-modal .form-control,
html[dir="ltr"] #res-modal input,
html[dir="ltr"] #res-modal textarea,
html[dir="ltr"] #res-modal select { direction: ltr; text-align: left; }
html[dir="rtl"] #res-modal .form-control,
html[dir="rtl"] #res-modal input,
html[dir="rtl"] #res-modal textarea,
html[dir="rtl"] #res-modal select { direction: rtl; text-align: right; }
/* The initial chooser is intentionally isolated from every editor-only
   control, even if shared component styles change later. */
#res-modal[data-reservation-view="entry"] #res-form,
#res-modal[data-reservation-view="entry"] .reservation-editor-menu-wrap,
#res-modal[data-reservation-view="entry"] .editor-checkin-btn,
#res-modal[data-reservation-view="entry"] .editor-financial-summary,
#res-modal[data-reservation-view="entry"] .editor-room-actions,
#res-modal[data-reservation-view="entry"] .editor-hold-btn,
#res-modal[data-reservation-view="entry"] #save-res-btn,
#res-modal[data-reservation-view="entry"] .party-action-buttons { display: none !important; }
#res-modal[data-reservation-view="entry"] .single-entry-layout { display: grid !important; }
.modal-overlay {
  background: rgba(0, 0, 0, .64);
  backdrop-filter: blur(4px);
}

#res-modal:not(.party-modal) .modal-card {
  width: min(92vw, 768px);
  max-height: 88vh;
  border-radius: 8px;
}

/* Initial New Reservation chooser: compact InnGenius-style entry step. */
#res-modal:not(.party-modal) .single-entry-layout[hidden] { display:none !important; }
.single-entry-layout { display:grid; grid-template-columns:1fr 150px 1fr; gap:10px; align-items:start; }
.single-entry-section { min-width:0; border:1px solid var(--border-color); background:var(--bg-card-solid); border-radius:5px; padding:8px; }
.single-entry-section h4, .single-entry-duration > label { display:block; margin:0 0 7px; color:var(--text-main); font-size:.78rem; font-weight:700; }
.single-entry-duration { align-self:start; }
.single-entry-duration .form-control { width:100%; min-height:36px; }
.entry-calendar { min-width:0; }
.entry-calendar-head { display:grid; grid-template-columns:28px 1fr 28px; align-items:center; gap:4px; margin-bottom:5px; text-align:center; color:var(--text-main); font-size:.75rem; }
.entry-calendar-head button { border:1px solid var(--border-color); background:var(--bg-input); color:var(--text-main); border-radius:4px; height:25px; cursor:pointer; font-size:1rem; line-height:1; }
.entry-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; }
.entry-weekday { color:var(--text-muted); font-size:.62rem; text-align:center; padding:2px 0; }
.entry-day { min-width:0; height:26px; border:1px solid transparent; background:transparent; color:var(--text-main); border-radius:3px; font-size:.72rem; cursor:pointer; }
.entry-day:hover, .entry-day:focus-visible { border-color:var(--primary); outline:0; }
.entry-day.is-selected { background:var(--primary); color:#fff; }
.entry-day.is-empty { pointer-events:none; }
.entry-today { margin-top:6px; border:0; background:transparent; color:var(--primary); font-size:.68rem; cursor:pointer; }
.single-entry-rooms { grid-column:1 / -1; padding:0; border:0; background:transparent; }
#res-modal:not(.party-modal) #res-entry-available-rooms .available-room-table { overflow-x:hidden; }
#res-modal:not(.party-modal) #res-entry-available-rooms .available-room-table-head,
#res-modal:not(.party-modal) #res-entry-available-rooms .available-room-option { grid-template-columns:32px minmax(120px,1.4fr) minmax(88px,1fr) minmax(88px,1fr) minmax(68px,.75fr) minmax(92px,1fr) minmax(72px,.75fr); min-width:0; }
#res-modal:not(.party-modal) #res-entry-available-rooms .available-room-table-body { min-width:0; }
#res-modal:not(.party-modal) #entry-continue-btn:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:767px) {
  #res-modal:not(.party-modal) .single-entry-layout { grid-template-columns:1fr 92px 1fr; gap:5px; }
  #res-modal:not(.party-modal) .single-entry-section { padding:6px; }
  #res-modal:not(.party-modal) .entry-calendar-head { font-size:.64rem; }
  #res-modal:not(.party-modal) .entry-day { height:23px; font-size:.64rem; }
  #res-modal:not(.party-modal) .entry-weekday { font-size:.52rem; }
  #res-modal:not(.party-modal) .single-entry-duration .form-control { min-height:32px; padding:5px; font-size:.72rem; }
  #res-modal:not(.party-modal) #res-entry-available-rooms .available-room-table-head { display:none; }
  #res-modal:not(.party-modal) #res-entry-available-rooms .available-room-table .available-room-option { display:grid; grid-template-columns:28px minmax(0,1fr); min-width:0; min-height:0; padding:6px; gap:2px 6px; font-size:.7rem; }
  #res-modal:not(.party-modal) #res-entry-available-rooms .available-room-option > span,
  #res-modal:not(.party-modal) #res-entry-available-rooms .available-room-option > strong { grid-column:2; white-space:normal; overflow:visible; }
  #res-modal:not(.party-modal) #res-entry-available-rooms .available-room-option > span:first-child { grid-column:1; grid-row:1 / span 6; }
}

#res-modal:not(.party-modal) .modal-header,
.party-modal .modal-header {
  min-height: 54px;
  padding: 12px 18px;
}

#res-modal:not(.party-modal) .modal-header h3,
.party-modal .modal-header h3 {
  font-size: 1.08rem;
  line-height: 1.25;
  font-weight: 700;
}

#res-modal:not(.party-modal) .modal-body,
.party-modal .modal-body {
  padding: 14px 18px;
}

#res-modal:not(.party-modal) .form-grid {
  gap: 10px 14px;
}

#res-modal:not(.party-modal) .form-group {
  gap: 4px;
}

#res-modal:not(.party-modal) .form-group label,
.party-modal .form-group label {
  font-size: .78rem;
  line-height: 1.25;
  font-weight: 600;
}

#res-modal:not(.party-modal) .form-control,
.party-modal .form-control {
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: .84rem;
  line-height: 1.25;
}

#res-modal:not(.party-modal) textarea.form-control,
.party-modal textarea.form-control {
  min-height: 58px;
}

#res-modal:not(.party-modal) .available-rooms-panel {
  margin-top: 4px;
}

.available-rooms-heading {
  min-height: 34px;
  padding: 7px 9px;
  font-size: .76rem;
}

.available-room-table-head,
.available-room-table .available-room-option {
  min-height: 48px;
  padding: 7px 9px;
  font-size: .74rem;
}

.available-room-table-head {
  font-size: .7rem;
}

.available-room-table .available-room-option {
  gap: 8px;
}

.room-table-room {
  line-height: 1.15;
}

.room-table-room b { font-size: .76rem; }
.room-table-room small { font-size: .66rem; }

#res-modal:not(.party-modal) .reservation-total-preview {
  min-height: 32px;
  padding: 7px 9px;
  font-size: .78rem;
}

#res-modal:not(.party-modal) .modal-footer,
.party-modal .modal-footer {
  min-height: 54px;
  padding: 9px 18px;
  gap: 8px;
}

#res-modal:not(.party-modal) .modal-footer .btn,
.party-modal .modal-footer .btn {
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 5px;
  font-size: .8rem;
}

.party-modal .modal-card {
  width: min(92vw, 1525px);
  max-height: 86vh;
  border-radius: 8px;
}

.party-modal .form-grid {
  gap: 8px 12px;
}

.party-modal .party-form-heading {
  min-height: 34px;
  padding: 7px 9px;
  font-size: .8rem;
}

.party-modal .available-rooms-panel {
  min-height: 0;
  max-height: 310px;
}

.party-modal .available-room-options {
  max-height: 250px;
}

/* Party reservation is a dedicated dense workflow, not a themed copy of the single form. */
#res-modal.party-modal .modal-card { width:min(96vw, 1480px); max-width:none; }
#res-modal.party-modal .modal-body { padding:14px 18px; overflow-y:auto; }
#res-modal.party-modal #res-form[hidden] { display:none !important; }
.party-layout { display:block; }
.party-layout-grid { display:grid; grid-template-columns:minmax(280px,.78fr) minmax(420px,1.22fr); gap:12px; }
.party-panel { border:1px solid var(--border-color); background:var(--bg-card-solid); border-radius:7px; padding:10px 12px; min-width:0; }
.party-panel h4 { margin:0 0 9px; padding-bottom:7px; border-bottom:1px solid var(--border-color); color:var(--text-main); font-size:.92rem; font-weight:800; }
.party-panel h4 i { color:var(--primary); margin-inline-end:6px; }
.party-compact-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 10px; }
.party-compact-fields label { color:var(--text-muted); font-size:.74rem; font-weight:700; }
.party-compact-fields label > .form-control { display:block; width:100%; margin-top:4px; min-height:34px; padding:6px 8px; font-size:.8rem; }
.party-inline-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.party-rooms-panel { margin-top:12px; padding-bottom:8px; }
.party-rooms-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.party-rooms-heading span { color:var(--primary); font-size:.76rem; font-weight:800; }
.party-rooms-panel .available-rooms-panel { min-height:0; max-height:310px; overflow-y:auto; }
.party-rooms-panel .available-rooms-heading { padding:4px 0 7px; font-size:.76rem; }
.party-room-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.party-room-actions .btn { min-height:30px; padding:5px 9px; font-size:.74rem; }
/* A3 — party tabs (Prices | Payment | Notes) */
.party-tabs { display:flex; gap:0; margin:10px 0 0; border-bottom:2px solid var(--border-color); }
.party-tab { background:none; border:none; padding:6px 14px; font-size:.76rem; font-weight:700; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s,border-color .15s; }
.party-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.party-tab:hover:not(.active) { color:var(--text-main); }
.party-tab-panel { padding:9px 0 4px; }
.party-tab-panel[hidden] { display:none !important; }
.party-always-fields { margin-bottom:0; }
.party-cf-span2 { grid-column:1 / -1; }
.party-notes-label { display:block; color:var(--text-muted); font-size:.74rem; font-weight:700; }
.party-notes-label .form-control { display:block; width:100%; margin-top:4px; }
/* A3 — type filter chips for party room selection (reuses entry-type-chip styles) */
.party-type-filter { display:flex; flex-wrap:wrap; gap:6px; padding:6px 0 8px; }
.party-summary-strip { display:flex; justify-content:flex-end; gap:22px; padding:9px 4px 2px; color:var(--text-muted); font-size:.76rem; }
.party-summary-strip b { color:var(--text-main); margin-inline-start:4px; }
.party-summary-strip strong b { color:var(--primary); }

/* Reservation list — reference parity filter bar + toolbar */
.res-filter-bar { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:12px; padding:12px; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-card-solid); }
.res-filter-bar .form-group { margin:0; }
.res-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
#reservations-table th, #reservations-table td { padding:6px 8px; font-size:.82rem; }
@media (max-width:760px) {
  #res-modal.party-modal { padding:5px; }
  #res-modal.party-modal .modal-card { width:100%; max-height:calc(100dvh - 10px); }
  #res-modal.party-modal .modal-body { padding:9px; max-height:calc(100dvh - 112px); }
  .party-layout-grid { grid-template-columns:1fr; gap:8px; }
  .party-panel { padding:8px; border-radius:6px; }
  .party-compact-fields { gap:6px 8px; }
  .party-compact-fields label > .form-control { min-height:32px; font-size:.76rem; }
  .party-rooms-panel .available-room-table { overflow-x:auto; max-width:100%; }
  .party-rooms-panel .available-room-table-head, .party-rooms-panel .available-room-table-body, .party-rooms-panel .available-room-table .available-room-option { min-width:760px; }
  .party-room-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .party-room-actions .btn { min-width:0; }
  .party-summary-strip { justify-content:space-between; gap:6px; flex-wrap:wrap; font-size:.7rem; }
}
@media (max-width:420px) {
  .party-compact-fields { grid-template-columns:1fr; }
  .party-inline-fields { gap:6px; }
  .party-panel h4 { font-size:.82rem; }
  .party-rooms-panel .available-room-table-head, .party-rooms-panel .available-room-table-body, .party-rooms-panel .available-room-table .available-room-option { min-width:700px; }
}

@media (max-width: 767px) {
  #res-modal:not(.party-modal) .modal-card {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 8px;
  }

  #res-modal:not(.party-modal) .modal-header,
  .party-modal .modal-header { padding: 10px 12px; }

  #res-modal:not(.party-modal) .modal-body,
  .party-modal .modal-body { padding: 10px 12px; }

  #res-modal:not(.party-modal) .modal-footer,
  .party-modal .modal-footer { padding: 8px 12px; }
}

/* Final fit for the normal "New reservation" dialog only.
   The available-room table must shrink with the dialog; the party workflow
   intentionally keeps its own wider layout above. */
#res-modal:not(.party-modal) .modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(94vw, 780px);
  max-width: 780px;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

#res-modal:not(.party-modal) .modal-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

#res-modal:not(.party-modal) #res-form {
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#res-modal:not(.party-modal) .party-room-field,
#res-modal:not(.party-modal) #res-form > .full-width {
  min-width: 0;
}

#res-modal:not(.party-modal) .available-rooms-panel,
#res-modal:not(.party-modal) .available-room-table,
#res-modal:not(.party-modal) .available-room-table-body {
  min-width: 0;
  max-width: 100%;
}

#res-modal:not(.party-modal) .available-room-table {
  overflow-x: hidden;
  overflow-y: visible;
}

#res-modal:not(.party-modal) .available-room-table-head,
#res-modal:not(.party-modal) .available-room-table .available-room-option {
  min-width: 0;
  grid-template-columns: 32px minmax(115px, 1.35fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(68px, .75fr) minmax(92px, 1fr) minmax(72px, .75fr);
  gap: 6px;
  padding-inline: 7px;
}

#res-modal:not(.party-modal) .available-room-table-head {
  font-size: .66rem;
}

#res-modal:not(.party-modal) .available-room-table .available-room-option {
  min-height: 42px;
  padding-block: 6px;
  font-size: .7rem;
}

@media (max-width: 767px) {
  #res-modal:not(.party-modal) {
    padding: 8px;
    overflow: hidden;
  }

  #res-modal:not(.party-modal) .modal-card {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 16px);
    border-radius: 8px;
  }

  #res-modal:not(.party-modal) .modal-header {
    min-height: 44px;
    padding: 9px 12px;
  }

  #res-modal:not(.party-modal) .modal-header h3 {
    font-size: .96rem;
  }

  #res-modal:not(.party-modal) .modal-body {
    padding: 9px 10px;
  }

  #res-modal:not(.party-modal) #res-form {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #res-modal:not(.party-modal) .form-control {
    min-height: 36px;
    padding: 6px 8px;
    font-size: .8rem;
  }

  #res-modal:not(.party-modal) textarea.form-control {
    min-height: 52px;
  }

  #res-modal:not(.party-modal) .available-room-table-head {
    display: none;
  }

  #res-modal:not(.party-modal) .available-room-table .available-room-option {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 0;
    padding: 7px 8px;
    gap: 3px 7px;
    font-size: .76rem;
    line-height: 1.2;
  }

  #res-modal:not(.party-modal) .available-room-table .available-room-option > span,
  #res-modal:not(.party-modal) .available-room-table .available-room-option > strong {
    grid-column: 2;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  #res-modal:not(.party-modal) .available-room-table .available-room-option > span:first-child {
    grid-column: 1;
    grid-row: 1 / span 6;
    align-self: start;
    padding-top: 2px;
  }

  #res-modal:not(.party-modal) .available-room-table .available-room-option > span:nth-child(3)::before,
  #res-modal:not(.party-modal) .available-room-table .available-room-option > span:nth-child(4)::before,
  #res-modal:not(.party-modal) .available-room-table .available-room-option > strong:nth-child(5)::before,
  #res-modal:not(.party-modal) .available-room-table .available-room-option > span:nth-child(6)::before,
  #res-modal:not(.party-modal) .available-room-table .available-room-option > strong:nth-child(7)::before {
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 700;
    margin-inline-end: 5px;
  }

  html[dir="rtl"] #res-modal:not(.party-modal) .available-room-table .available-room-option > span:nth-child(3)::before { content: "الوصول:"; }
  html[dir="rtl"] #res-modal:not(.party-modal) .available-room-table .available-room-option > span:nth-child(4)::before { content: "المغادرة:"; }
  html[dir="rtl"] #res-modal:not(.party-modal) .available-room-table .available-room-option > strong:nth-child(5)::before { content: "السعر:"; }
  html[dir="rtl"] #res-modal:not(.party-modal) .available-room-table .available-room-option > span:nth-child(6)::before { content: "الدفع:"; }
  html[dir="rtl"] #res-modal:not(.party-modal) .available-room-table .available-room-option > strong:nth-child(7)::before { content: "الإجمالي:"; }
  html[dir="ltr"] #res-modal:not(.party-modal) .available-room-table .available-room-option > span:nth-child(3)::before { content: "Check-in:"; }
  html[dir="ltr"] #res-modal:not(.party-modal) .available-room-table .available-room-option > span:nth-child(4)::before { content: "Check-out:"; }
  html[dir="ltr"] #res-modal:not(.party-modal) .available-room-table .available-room-option > strong:nth-child(5)::before { content: "Rate:"; }
  html[dir="ltr"] #res-modal:not(.party-modal) .available-room-table .available-room-option > span:nth-child(6)::before { content: "Payment:"; }
  html[dir="ltr"] #res-modal:not(.party-modal) .available-room-table .available-room-option > strong:nth-child(7)::before { content: "Total:"; }

  #res-modal:not(.party-modal) .modal-footer {
    min-height: 48px;
    padding: 7px 10px;
    gap: 7px;
  }

  #res-modal:not(.party-modal) .modal-footer .btn {
    min-height: 34px;
    padding: 6px 10px;
    font-size: .78rem;
  }
}

/* Keep the detailed editor wide after the compact chooser's final-fit rules. */
#res-modal.detailed-editor-modal:not(.party-modal) .modal-card {
  width: min(97vw, 1900px);
  max-width: none;
  max-height: calc(100dvh - 28px);
}
@media (max-width: 900px) {
  #res-modal.detailed-editor-modal:not(.party-modal) .modal-card {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

/* Detailed editor parity: one dense, white operational canvas. The three
   lanes use the reference's left/stay, middle/guest, right/rate order rather
   than visual card panels. */
#res-modal.detailed-editor-modal:not(.party-modal) .modal-card {
  width: min(96vw, 2340px);
  max-height: calc(100dvh - 28px);
  background: #fff;
  border-color: #b8b8b8;
  border-radius: 8px;
}

#res-modal.detailed-editor-modal:not(.party-modal) .modal-header {
  min-height: 54px;
  padding: 8px 14px;
  direction: ltr;
  background: #fff;
  border-bottom-color: #c9c9c9;
}

#res-modal.detailed-editor-modal:not(.party-modal) .modal-header h3 {
  order: 1;
  margin: 0 auto 0 0;
  color: #3f3f3f;
  font-size: 1rem;
  font-weight: 500;
}

#res-modal.detailed-editor-modal:not(.party-modal) .editor-header-status {
  order: 2;
  min-width: 0;
  display: block;
}

html[dir="rtl"] #res-modal.detailed-editor-modal:not(.party-modal) .modal-header h3,
html[dir="rtl"] #res-modal.detailed-editor-modal:not(.party-modal) .editor-header-status { direction: rtl; }
html[dir="ltr"] #res-modal.detailed-editor-modal:not(.party-modal) .modal-header h3,
html[dir="ltr"] #res-modal.detailed-editor-modal:not(.party-modal) .editor-header-status { direction: ltr; }

#res-modal.detailed-editor-modal:not(.party-modal) .editor-header-status .form-group {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

#res-modal.detailed-editor-modal:not(.party-modal) .editor-header-status label {
  display: inline;
  color: #3f3f3f;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}

#res-modal.detailed-editor-modal:not(.party-modal) .editor-header-status .form-control {
  width: 132px;
  min-height: 31px;
  padding: 3px 7px;
  font-size: .8rem;
}

#res-modal.detailed-editor-modal:not(.party-modal) .reservation-editor-menu-wrap { order: 3; margin-inline-start: 12px; }
#res-modal.detailed-editor-modal:not(.party-modal) .close-btn { order: 4; margin-inline-start: 10px; }

#res-modal.detailed-editor-modal:not(.party-modal) .modal-body {
  padding: 14px 22px 12px;
  background: #fff;
}

#res-modal.detailed-editor-modal:not(.party-modal) #res-form {
  grid-template-columns: minmax(250px, .84fr) minmax(390px, 1.1fr) minmax(280px, .9fr);
  grid-template-areas: "stay guest rate";
  direction: ltr;
  gap: 8px 30px;
  background: #fff;
}

/* Grid line 1 follows document direction by default. Fix the physical lanes
   for the Arabic reference while each lane keeps its own writing direction. */
#res-modal.detailed-editor-modal:not(.party-modal) .editor-stay-column { grid-area: stay; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-guest-column { grid-area: guest; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-rate-column { grid-area: rate; }
html[dir="rtl"] #res-modal.detailed-editor-modal:not(.party-modal) .editor-reference-column { direction: rtl; }
html[dir="ltr"] #res-modal.detailed-editor-modal:not(.party-modal) .editor-reference-column { direction: ltr; }

#res-modal.detailed-editor-modal:not(.party-modal) .editor-reference-column {
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#res-modal.detailed-editor-modal:not(.party-modal) .editor-reference-column > h4 { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-side-field,
#res-modal.detailed-editor-modal:not(.party-modal) .editor-identity-pair label,
#res-modal.detailed-editor-modal:not(.party-modal) .editor-slot .form-group {
  gap: 3px;
  color: #4b4b4b;
  font-size: .78rem;
  font-weight: 500;
}

#res-modal.detailed-editor-modal:not(.party-modal) .form-control {
  min-height: 35px;
  padding: 5px 8px;
  border-color: #c9c9c9;
  border-radius: 4px;
  background: #fff;
  color: #181818;
  font-size: .84rem;
}

#res-modal.detailed-editor-modal:not(.party-modal) textarea.form-control { min-height: 78px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-notes-tabs { margin-top: 3px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-note-tab { padding: 4px 7px; font-size: .74rem; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary {
  gap: 3px;
  padding: 8px 0;
  border-color: #d1d1d1;
}

#res-modal.detailed-editor-modal:not(.party-modal) .editor-room-field {
  margin-top: 5px;
  padding-top: 8px;
  border-top: 1px solid #d1d1d1;
}

#res-modal.detailed-editor-modal:not(.party-modal) .editor-room-field .available-rooms-panel { max-height: 160px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-room-actions { padding-top: 4px; }
#res-modal.detailed-editor-modal:not(.party-modal) .modal-footer {
  min-height: 62px;
  justify-content: center;
  padding: 12px 20px;
  background: #fff;
  border-top-color: #c9c9c9;
}

/* The status field is moved out of the form for the detailed editor only. */
#res-modal .editor-header-status { display: none; }
#res-modal.party-modal .editor-header-status,
#res-modal[data-reservation-view="entry"] .editor-header-status { display: none !important; }

/* These controls belong exclusively to the party workflow. The markup starts
   hidden, and this guard prevents shared footer styling from surfacing them in
   either single-reservation state. */
#res-modal:not(.party-modal) .party-action-buttons,
#res-modal:not(.party-modal) .party-action-buttons > button { display: none !important; }

@media (max-width: 900px) {
  #res-modal.detailed-editor-modal:not(.party-modal) .modal-card { width: calc(100vw - 16px); }
  #res-modal.detailed-editor-modal:not(.party-modal) #res-form { grid-template-columns: 1fr; grid-template-areas: "stay" "guest" "rate"; gap: 10px; }
  #res-modal.detailed-editor-modal:not(.party-modal) .editor-header-status { display: none; }
}

@media (max-width: 390px) {
  #res-modal.detailed-editor-modal:not(.party-modal) { padding: 8px; overflow: hidden; }
  #res-modal.detailed-editor-modal:not(.party-modal) .modal-card { width: 100%; max-height: calc(100dvh - 16px); }
  #res-modal.detailed-editor-modal:not(.party-modal) .modal-body { padding: 9px 10px; overflow-x: hidden; }
  #res-modal.detailed-editor-modal:not(.party-modal) .editor-room-field .available-room-table { overflow-x: auto; }
}

/* INNGENIUS PMS HEADER & SUBMODALS */
.inngenius-header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  margin-inline-end: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}
.inngenius-header-status select {
  padding: 3px 8px;
  font-size: 0.82rem;
  height: 30px;
  border-radius: 4px;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.modal-overlay.submodal {
  z-index: 1200;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.submodal-card {
  max-width: 680px;
  width: 90vw;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  background: var(--bg-card-solid);
  border: 1px solid var(--border-color);
}
.submodal-body {
  padding: 16px;
}
.submodal-section {
  display: grid;
  gap: 8px;
}
.submodal-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--text-main);
  cursor: pointer;
}
.submodal-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}
.input-with-action {
  display: flex;
  align-items: center;
  gap: 6px;
}
.input-with-action .form-control {
  flex: 1;
}
.btn-inline-action {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 0.95rem;
  transition: filter 0.15s ease;
}
.btn-inline-action:hover {
  filter: brightness(1.1);
}
.btn-whatsapp {
  background: #25D366;
}
.btn-email {
  background: var(--accent-color, #3b82f6);
}
.btn-inline-action:not(.btn-whatsapp):not(.btn-email) {
  background: var(--border-color, #94a3b8);
}
.btn-inline-action.active {
  background: #f59e0b;
}
#editor-fix-rate-btn.is-locked {
  background: rgba(239, 68, 68, .14) !important;
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}
#editor-edit-rate-link,
#editor-rate-edit-label {
  color: var(--accent-color, #3b82f6);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  justify-self: start;
}
#editor-edit-rate-link:hover,
#editor-rate-edit-label:hover {
  text-decoration: underline;
}
.editor-fix-rate-hint {
  font-size: .72rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.4;
}
.prior-stays-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.prior-stay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--surface-alt, rgba(148,163,184,0.08));
}
.prior-stay-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prior-stay-id {
  font-weight: 700;
  color: #38bdf8;
}
.prior-stay-dates {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.prior-stay-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.prior-stay-amount {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.prior-stays-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}
.submodal-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.submodal-add-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: flex-end;
}

/* RACK ACTIONS DROPDOWN & ROW HOVER */
.rack-actions-menu-wrap {
  position: relative;
}

.rack-actions-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  inset-inline-start: 0;
  z-index: 1250;
  min-width: 200px;
  padding: 5px;
  border-radius: 8px;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--backdrop-blur);
}

.rack-actions-dropdown button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 0.8rem;
  text-align: start;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.rack-actions-dropdown button:hover {
  background: rgba(59, 130, 246, 0.14);
  color: var(--primary);
}

.rack-actions-dropdown button i {
  width: 16px;
  color: var(--primary);
}

.timeline-row.is-row-hovered,
.room-cell.is-row-hovered {
  background: rgba(59, 130, 246, 0.08) !important;
}


/* Reference reservation windows: measured at a 1280 x 720 viewport. */
#res-modal.detailed-editor-modal:not(.party-modal) { background: #0006; backdrop-filter: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .modal-card { width: min(1054px, calc(100vw - 24px)); height: min(640px, calc(100dvh - 24px)); border: 1px solid #00aeef; border-radius: 4px; font-family: Arial, sans-serif; color: #444; }
#res-modal.detailed-editor-modal:not(.party-modal) .modal-header { min-height: 25px; height: 25px; padding: 2px 5px; background: #f4f4f4; }
#res-modal.detailed-editor-modal:not(.party-modal) .modal-header h3 { font-size: 13px; }
#res-modal.detailed-editor-modal:not(.party-modal) .modal-header h3 i { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .modal-body { flex: 1; padding: 3px 10px 10px; overflow: auto; }
#res-modal.detailed-editor-modal:not(.party-modal) #res-form { grid-template-columns: minmax(0, 285fr) minmax(0, 307fr) minmax(0, 382fr); gap: 18px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-reference-column { direction: ltr; gap: 6px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-slot { gap: 6px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-slot .form-group,
#res-modal.detailed-editor-modal:not(.party-modal) .editor-side-field,
#res-modal.detailed-editor-modal:not(.party-modal) .editor-identity-pair label,
#res-modal.detailed-editor-modal:not(.party-modal) .editor-stay-column > .form-group { display: grid; grid-template-columns: 100px minmax(0, 1fr); grid-column: auto; align-items: center; gap: 5px; margin: 0; font-size: 13px; font-weight: 400; }
#res-modal.detailed-editor-modal:not(.party-modal) .form-group label { font: 400 13px Arial, sans-serif; margin: 0; }
#res-modal.detailed-editor-modal:not(.party-modal) .form-control { width: 100%; height: 26px; min-height: 26px; padding: 2px 5px; font: 14px Arial, sans-serif; border: 1px solid #d5d5d5; box-shadow: inset 0 1px 2px #00000008; }
#res-modal.detailed-editor-modal:not(.party-modal) .form-control::placeholder { color: transparent; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-identity-pair { grid-template-columns: 1fr; gap: 6px; }
/* ولاية + الرمز البريدي stay side-by-side (InnGenius), unlike the other stacked pairs. */
#res-modal.detailed-editor-modal:not(.party-modal) .editor-identity-pair.editor-statezip-pair { grid-template-columns: 1fr 1fr; gap: 7px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-stay-slot { gap: 10px; }
#res-modal.detailed-editor-modal:not(.party-modal) #editor-stay-slot { grid-template-columns: 1fr 1fr; }
#res-modal.detailed-editor-modal:not(.party-modal) #editor-stay-slot > * { grid-column: 1 / -1; }
#res-modal.detailed-editor-modal:not(.party-modal) #editor-stay-slot > :has(#res-adults),
#res-modal.detailed-editor-modal:not(.party-modal) #editor-stay-slot > :has(#res-children) { grid-column: auto; grid-template-columns: 1fr 50px; }
#res-modal.detailed-editor-modal:not(.party-modal) :is(label:has(#res-due-date), label:has(#editor-id-expiry), .form-group:has(#res-guest-name), .form-group:has(#res-payment-method), .reservation-total-preview) { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-note-panel .form-group { display: block; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-note-panel .form-group > label { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-note-panel textarea { height: 155px; resize: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-note-tab { padding: 2px 3px; font: 12px Arial, sans-serif; }
#res-modal.detailed-editor-modal:not(.party-modal) .btn { min-height: 23px; padding: 3px 8px; border: 1px solid #b5e6fa; border-radius: 3px; background: #cceffc; color: #444; font: 13px Arial, sans-serif; box-shadow: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .btn i { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .modal-footer { min-height: 49px; height: 49px; padding: 5px; gap: 6px; background: #fafafa; direction: ltr; }
#res-modal.detailed-editor-modal:not(.party-modal) .modal-footer .btn { min-width: 78px; height: 32px; border-radius: 5px; }
#res-modal.detailed-editor-modal:not(.party-modal) #cancel-res-btn { order: 3; }
#res-modal.detailed-editor-modal:not(.party-modal) #editor-hold-btn { order: 1; }
#res-modal.detailed-editor-modal:not(.party-modal) #save-res-btn { order: 2; }
#res-modal.detailed-editor-modal:not(.party-modal) #editor-checkin-btn { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) #editor-block-btn { display: none !important; }
#res-modal.detailed-editor-modal:not(.party-modal) #group-account-new-btn,
#res-modal.detailed-editor-modal:not(.party-modal) #group-account-folio-btn { display: none !important; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-room-actions [data-editor-room-action]:not([data-editor-room-action="split"]):not([data-editor-room-action="party"]) { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary { grid-column: auto; order: initial; border: 0; background: none; padding: 0; margin: 0; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > div { margin: 0; padding: 0; border: 0; font-size: 13px; align-items: center; }
#res-modal.detailed-editor-modal:not(.party-modal) :is(.editor-financial-summary, .editor-reference-totals) strong { min-width: 92px; padding: 2px 5px; border: 1px solid #ddd; border-radius: 3px; color: #444; font: 14px Arial; text-align: right; }
/* Uniform single-column rows in the interleaved rate/totals column (InnGenius look):
   every child — totals AND input form-groups — is one horizontal row, label right, value/input left. */
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary { display: flex; flex-direction: column; gap: 7px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > .form-group,
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > .form-group > label { display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > .form-group > label > span:first-child,
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > .form-group > span:first-child { flex: 0 0 auto; font-size: 13px; color: var(--text-muted); font-weight: 400; white-space: nowrap; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > .form-group input,
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > .form-group select { flex: 0 0 auto; min-width: 92px; width: 128px; max-width: 128px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary .editor-inline-value > label { flex: 1 1 auto; justify-content: flex-start; }
#res-modal.detailed-editor-modal:not(.party-modal) #editor-rate-slot:empty { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-room-field { grid-column: auto; order: initial; margin-top: 25px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-room-actions { grid-column: auto; justify-content: flex-end; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-room-field .available-rooms-panel { max-height: 80px; }
#res-modal.detailed-editor-modal:not(.party-modal) .inngenius-header-status { font: 13px Arial; }
#res-modal.detailed-editor-modal:not(.party-modal) .inngenius-header-status select { height: 22px; padding: 0; border: 0; background: transparent; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-header-status { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-menu-trigger,
#res-modal.detailed-editor-modal:not(.party-modal) .close-btn { height: 20px; width: 20px; padding: 0; border: 0; background: transparent; font-size: 16px; }
.modal-overlay.submodal { background: #0006; backdrop-filter: none; }
.submodal .submodal-card { width: min(750px, calc(100vw - 24px)); max-width: none; height: min(570px, calc(100dvh - 24px)); border: 1px solid #00aeef; border-radius: 5px; background: #fff; font: 13px Arial, sans-serif; color: #444; direction: ltr; }
.submodal .modal-header { min-height: 25px; height: 25px; padding: 3px 5px; background: #f4f4f4; border-bottom: 1px solid #ccc; }
.submodal .modal-header h3 { font: 13px Arial; color: #444; }
.submodal .modal-header i, .submodal .modal-header .close-btn { display: none; }
.submodal .modal-body { flex: 1; overflow: auto; padding: 10px; }
.submodal .form-control { height: 26px; min-height: 26px; padding: 2px 5px; background: white; border: 1px solid #d2d2d2; border-radius: 4px; color: #222; font: 14px Arial; }
.submodal .form-group { margin: 0; }
.submodal .form-group label { color: #444; font: 13px Arial; }
.submodal .btn { padding: 3px 10px; min-height: 23px; border: 1px solid #b5e6fa; border-radius: 4px; background: #cceffc; color: #444; font: 13px Arial; box-shadow: none; }
.submodal .modal-footer { min-height: 50px; padding: 5px; justify-content: flex-end; gap: 6px; border-top: 1px solid #ccc; background: #fff; }
.submodal .modal-footer .btn { min-width: 70px; height: 32px; border-radius: 6px; }
#discount-submodal .submodal-card { width: min(500px, calc(100vw - 24px)); max-width: 500px !important; height: min(400px, calc(100dvh - 24px)); }
#discount-submodal .submodal-hint { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #ccc; font: 13px/1.3 Arial !important; color: #111 !important; }
#discount-submodal .submodal-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
#discount-submodal .form-group { display: grid; grid-template-columns: 150px 220px; align-items: center; gap: 5px; }
#discount-submodal .form-group > .form-control { width: 150px; }
#discount-submodal .input-group { gap: 20px !important; }
#discount-submodal .input-group input { width: 150px; }
#discount-submodal .input-group .btn { width: 50px; background: white; border-color: #ccc; }
#discount-submodal #calculate-discount-btn { width: 200px; }
#discount-submodal .submodal-body > div:last-child { margin: 4px 0 0 155px !important; text-align: left !important; }
#room-rates-submodal .submodal-grid { grid-template-columns: 1fr 1fr 3fr 1fr; }
#room-rates-submodal .submodal-radio-label { background: #e5e5e5; border: 1px solid #d2d2d2; padding: 8px; border-radius: 5px; font-size: 13px; }
#room-rates-submodal .submodal-hint { color: #444; font-size: 13px; }
#room-rates-submodal #apply-room-rates-btn { order: -1; background: #def4bd; border-color: #c5d7ad; }
#room-rates-submodal #daily-rates-table { width: 100%; border-collapse: collapse; }
#room-rates-submodal #daily-rates-table th, #room-rates-submodal #daily-rates-table td { border: 1px solid #ddd; padding: 4px 6px; font-size: 12px; text-align: center; }
#room-rates-submodal #daily-rates-table th { background: #eee; color: #111; }
#room-rates-submodal #daily-rates-table input[type="number"] { width: 90px; height: 24px; padding: 2px 4px; border: 1px solid #d2d2d2; border-radius: 3px; }
#room-rates-submodal #daily-rates-table .daily-rate-fill-link { color: #0078a8; cursor: pointer; text-decoration: underline; font-size: 12px; background: none; border: none; padding: 0; }
#extras-submodal .submodal-card { width: min(820px, calc(100vw - 24px)); height: min(435px, calc(100dvh - 24px)); }
#extras-submodal .submodal-body { display: flex; flex-direction: column; }
#extras-submodal .submodal-table-wrap { flex: 1; max-height: none !important; border: 1px solid #ddd; }
#extras-submodal .table { width: 100%; border-collapse: collapse; }
#extras-submodal .table th { background: #eee; color: #111; border: 1px solid #ddd; padding: 8px; }
@media (max-width: 900px) {
 #res-modal.detailed-editor-modal:not(.party-modal) #res-form { grid-template-columns: 1fr; grid-template-areas: "stay" "guest" "rate"; }
 #res-modal.detailed-editor-modal:not(.party-modal) .modal-card { width: calc(100vw - 16px); }
 .submodal-add-row { grid-template-columns: 1fr 1fr; }
 #room-rates-submodal .submodal-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
 #discount-submodal .form-group { grid-template-columns: 1fr; }
 #discount-submodal .submodal-body > div:last-child { margin-left: 0 !important; }
}
#res-modal.detailed-editor-modal:not(.party-modal) { --text-main: #444; --text-muted: #444; --bg-card-solid: #fff; --border-color: #ddd; }
#res-modal.detailed-editor-modal:not(.party-modal) .inngenius-header-status { order: 2; margin: 0 0 0 auto; color: #444; }
#res-modal.detailed-editor-modal:not(.party-modal) .inngenius-header-status .form-control { width: 120px; font-size: 13px; }
#res-modal.detailed-editor-modal:not(.party-modal) #res-form > .form-group:has(#res-status) { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-room-field { border: 1px solid #ddd; border-radius: 4px; padding: 5px; margin-top: 14px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-room-field > label { padding: 0; background: none; color: #444; }
#res-modal.detailed-editor-modal:not(.party-modal) .available-room-table-head { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .available-room-option:not(:has(input:checked)) { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .available-room-table,
#res-modal.detailed-editor-modal:not(.party-modal) .available-rooms-panel { background: white; border: 0; box-shadow: none; color: #444; }
#res-modal.detailed-editor-modal:not(.party-modal) .available-rooms-panel > :first-child:not(.available-room-table),
#res-modal.detailed-editor-modal:not(.party-modal) #res-selected-rooms { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .available-room-option { display: flex; min-width: 0; min-height: 30px; padding: 3px; background: #fff; color: #444; font: 12px Arial; }
#res-modal.detailed-editor-modal:not(.party-modal) .available-room-option > :nth-child(n+5) { display: none; }
#res-modal.detailed-editor-modal:not(.party-modal) .available-room-option > * { min-width: 0; white-space: normal; }
#res-modal.detailed-editor-modal:not(.party-modal) #editor-rate-slot .form-group { grid-template-columns: 130px 92px; }
#res-modal.detailed-editor-modal:not(.party-modal) #editor-rate-slot .form-control { text-align: right; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > .form-group:has(#res-duration) { justify-content: flex-start; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > .form-group:has(#res-duration) #res-duration { margin-inline-start: auto; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > .form-group:has(#res-duration) #editor-fix-rate-btn { flex: 0 0 auto; width: auto; padding: 3px 10px; font-size: .72rem; white-space: nowrap; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-reference-totals > div,
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > div { display: grid; grid-template-columns: 130px 92px; gap: 5px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-financial-summary > div.editor-total-line { display: flex; grid-template-columns: none; align-items: center; justify-content: flex-start; gap: 8px; }
#res-modal.detailed-editor-modal:not(.party-modal) #editor-permanent-note { height: 38px; min-height: 38px; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-guest-column > .editor-side-field:has(#editor-permanent-note) { grid-template-columns: 1fr; }
#res-modal.detailed-editor-modal:not(.party-modal) .editor-guest-column > .editor-side-field:has(#editor-permanent-note) > span { display: none; }
html[dir="rtl"] #res-modal.detailed-editor-modal:not(.party-modal) .editor-reference-column { direction: ltr; }
html[dir="rtl"] #res-modal.detailed-editor-modal:not(.party-modal) .editor-reference-column label,
html[dir="rtl"] #res-modal.detailed-editor-modal:not(.party-modal) .editor-reference-column span { text-align: left; }
#extras-submodal .submodal-add-row { grid-template-columns: 2.2fr 1.4fr 1.2fr 1.4fr 1.4fr auto; }
#addons-table td:last-child, #addons-table th:last-child { width: 40px; text-align: center; }
#addons-table td:last-child .btn { padding: 3px 8px; font-size: 12px; }
#extras-submodal .submodal-add-row .form-group { display: flex; align-items: center; gap: 10px; }
#extras-submodal .submodal-add-row .form-control { min-width: 0; }
#extras-submodal .submodal-add-row label { white-space: nowrap; }
#extras-submodal .submodal-total-bar { display: flex; justify-content: space-between; align-items: center; }
#extras-submodal .extras-table-actions { display: flex; gap: 5px; }
#extras-submodal tr[aria-selected="true"] { background: #cceffc; }
#extras-submodal td { padding: 5px; color: #444; font-size: 13px; }
@media (max-width: 600px) { #extras-submodal .submodal-add-row { grid-template-columns: 1fr 1fr; } }
.submodal .submodal-card { display: flex; flex-direction: column; overflow: hidden; }
.submodal .modal-header, .submodal .modal-footer { flex-shrink: 0; }
.submodal .modal-body { min-height: 0; }

/* ==========================================================================
 * B — Fund Transactions page
 * A ledger view with a sub-nav (Withdraw / Add / Tips / Gift Cards) and
 * shared table styles. Tokens keep both themes in step; every color reads
 * from a var(...) so dark mode is one line of theme swap away.
 * ========================================================================== */
.fund-sub-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.fund-sub-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.fund-sub-btn:hover { color: var(--text-main); border-color: var(--primary); }
.fund-sub-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 1px 4px rgba(59,130,246,.25); }
.fund-view { margin-top: 14px; }
.fund-view[hidden] { display: none !important; }
.fund-card { background: var(--bg-card-solid); border: 1px solid var(--border-color); border-radius: 10px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.fund-card h3 { margin: 0 0 14px; font-size: 1rem; color: var(--text-main); display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.fund-card h3 i { color: var(--primary); }
.fund-table-wrap { margin-bottom: 14px; }
.fund-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 6px; border: 1px solid var(--border-color); }
.fund-table { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 720px; }
.fund-table th { background: color-mix(in srgb, var(--primary) 8%, var(--bg-card-solid)); color: var(--text-main); font-weight: 800; text-align: start; padding: 10px 12px; border-bottom: 2px solid var(--border-color); font-size: .76rem; letter-spacing: .02em; text-transform: uppercase; }
.fund-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-color); color: var(--text-main); }
.fund-table tbody tr:last-child td { border-bottom: none; }
.fund-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.fund-num { text-align: end; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; }
.fund-method { font-weight: 700; }
.fund-serial { font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-size: .8rem; }
.fund-collections { color: #10b981; }
.fund-added { color: #10b981; }
.fund-withdrawals { color: #ef4444; }
.fund-balance strong { color: var(--primary); font-size: .95rem; }
.fund-totals-row th, .fund-totals-row td { background: color-mix(in srgb, var(--primary) 12%, var(--bg-card-solid)); border-top: 2px solid var(--border-color); font-weight: 800; }
.fund-totals-row td strong { color: var(--primary); font-size: 1rem; }
.fund-action-cell { text-align: center; white-space: nowrap; }
.fund-action-btn { padding: 5px 12px; font-size: .78rem; }
.fund-form-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; padding: 12px; background: color-mix(in srgb, var(--primary) 4%, transparent); border-radius: 8px; }
.fund-form-row label { display: block; color: var(--text-muted); font-size: .76rem; font-weight: 700; }
.fund-form-row label > .form-control { display: block; width: 100%; margin-top: 4px; }
.fund-form-row .btn { min-height: 38px; white-space: nowrap; }
.fund-list-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fund-list-header h3 { margin: 0; border: none; padding: 0; }
.fund-list-actions { display: flex; gap: 8px; }
.fund-list { min-height: 120px; }
.fund-loading { padding: 40px 12px; text-align: center; color: var(--text-muted); font-size: .88rem; }
.fund-empty { padding: 30px 12px; text-align: center; color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 4%, transparent); border-radius: 8px; }
.fund-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.fund-badge-active { background: color-mix(in srgb, #10b981 18%, transparent); color: #10b981; }
.fund-badge-redeemed { background: color-mix(in srgb, var(--text-muted) 18%, transparent); color: var(--text-muted); }
@media (max-width: 720px) {
  .fund-form-row { grid-template-columns: 1fr; }
  .fund-sub-nav { width: 100%; margin-inline-start: 0; }
  .fund-sub-btn { flex: 1; min-width: 0; padding: 6px 8px; font-size: .74rem; }
  .fund-card { padding: 12px 14px; }
  .fund-card h3 { font-size: .88rem; }
}

/* ---- In-app toast (replaces native alert for validation/status) ---- */
.app-toast-container {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.app-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-card-solid);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-inline-start: 4px solid var(--primary);
  box-shadow: var(--shadow-lg);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.app-toast.app-toast-in { opacity: 1; transform: translateY(0); }
.app-toast.app-toast-out { opacity: 0; transform: translateY(-10px); }
.app-toast i { font-size: 1.1rem; flex: 0 0 auto; }
.app-toast-text { flex: 1 1 auto; word-break: break-word; }
.app-toast-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.app-toast-close:hover { color: var(--text-main); }
.app-toast-error { border-inline-start-color: #ef4444; }
.app-toast-error i { color: #ef4444; }
.app-toast-success { border-inline-start-color: #22c55e; }
.app-toast-success i { color: #22c55e; }
.app-toast-warning { border-inline-start-color: #f59e0b; }
.app-toast-warning i { color: #f59e0b; }
.app-toast-info { border-inline-start-color: var(--primary); }
.app-toast-info i { color: var(--primary); }

/* ---- Tools panes (Data Browser / Waiting List / GDPR) ---- */
.tool-hint { color: var(--text-muted); font-size: .85rem; margin: 0 0 12px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.data-table th, .data-table td { border: 1px solid var(--border-color); padding: 6px 9px; text-align: start; white-space: nowrap; }
.data-table thead th { background: rgba(59,130,246,.10); color: var(--text-main); position: sticky; top: 0; }
.data-table tbody tr:nth-child(even) { background: rgba(125,125,125,.05); }
.gdpr-search { display: flex; gap: 8px; margin-bottom: 14px; max-width: 460px; }
.gdpr-search .form-control { flex: 1 1 auto; }
.gdpr-card { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); padding: 14px 16px; margin-bottom: 12px; max-width: 560px; }
.gdpr-card h4 { margin: 0 0 8px; }
.gdpr-card ul { margin: 0 0 12px; padding-inline-start: 18px; color: var(--text-main); font-size: .86rem; display: grid; gap: 3px; }
.gdpr-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- App update banner ---- */
.app-update-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--bg-card-solid);
  border-top: 2px solid var(--primary);
  box-shadow: 0 -6px 24px rgba(0,0,0,.14);
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-main);
}
.app-update-banner i { color: var(--primary); }
.app-update-banner .btn { padding: 6px 16px; }
.app-update-dismiss {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.app-update-dismiss:hover { color: var(--text-main); }

/* Housekeeping-scope sidebar stats */
.nav-stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 12px; font-size: .8rem; color: var(--text-main); }
.nav-stat b { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(148,163,184,.16); color: var(--text-muted); font-size: .72rem; font-weight: 700; text-align: center; }
.nav-stat b.is-nonzero { background: rgba(59,130,246,.14); color: var(--primary); }

/* Login: shift selection (start new / join open), side by side like the reference */
.login-shifts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.login-shift-col { display: grid; gap: 6px; font-size: .8rem; color: var(--text-main); }
.login-shift-list { min-height: 104px; padding: 4px; }
.login-shift-list option { padding: 5px 8px; border-radius: 6px; }
.login-shift-list option:checked { background: var(--primary); color: #fff; }
@media (max-width: 480px) { .login-shifts { grid-template-columns: 1fr; } }
.login-shift-step-title { margin: 0 0 12px; font-weight: 800; font-size: 1rem; color: var(--text-main); }

/* C — Housekeeping reference parity: filter/change fieldsets, grouped table */
.hk-filter-row, .hk-bulk-row { border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: end; gap: 12px; background: var(--bg-card-solid); }
.hk-filter-row legend, .hk-bulk-row legend { padding: 0 6px; font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.hk-filter-row label, .hk-bulk-row label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--text-muted); }
.hk-group-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--primary); color: #fff; padding: 8px 14px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-weight: 700; font-size: .88rem; margin-top: 14px; }
.hk-group-bar .hk-get-link { padding: 4px 10px; font-size: .74rem; }
.hk-table { width: 100%; border-collapse: collapse; font-size: .82rem; margin-bottom: 4px; background: var(--bg-card-solid); border: 1px solid var(--border-color); border-top: none; }
.hk-table th, .hk-table td { padding: 7px 10px; text-align: start; border-bottom: 1px solid var(--border-color); }
.hk-table thead th { font-weight: 700; color: var(--text-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.hk-table tbody tr:nth-child(even) { background: rgba(34, 197, 94, 0.08); }
.hk-status-link, .hk-notes-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.hk-status-link:hover, .hk-notes-link:hover { text-decoration: underline; }

/* reference parity — POS transaction toolbar + Add Payment / Transfer to Room */
.pos-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.pos-payments-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.pos-payment-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card-solid); font-size: .82rem; }
.pos-payment-row strong { color: var(--primary); }
.pos-payment-remove { background: transparent; border: none; color: #f87171; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.pos-payment-remove:hover { color: #ef4444; }
.pos-payment-remaining { display: flex; justify-content: space-between; padding: 8px 10px; border-top: 1px dashed var(--border-color); color: var(--text-main); font-weight: 700; }
.pos-payment-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.pos-payment-actions .btn { flex: 1; justify-content: center; }
.pos-payment-modal-card { max-width: 420px; }
.pos-room-transfer-body { display: flex; flex-direction: column; gap: 8px; }
.pos-room-transfer-option { display: block; width: 100%; text-align: start; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card-solid); color: var(--text-main); cursor: pointer; transition: all .15s; }
.pos-room-transfer-option:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 720px) {
  .pos-toolbar { width: 100%; }
  .pos-toolbar .btn { flex: 1; justify-content: center; }
  .pos-payment-actions { flex-direction: column; }
}

/* Admin lookup grids (InnGenius parity) — filter row, toolbar, real table grid. */
.admin-toolbar { flex-wrap: wrap; margin-bottom: 10px; }
.admin-grid-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.admin-grid { width: 100%; border-collapse: collapse; font-size: .82rem; background: var(--bg-card-solid); }
.admin-grid th, .admin-grid td { padding: 8px 12px; text-align: start; border-bottom: 1px solid var(--border-color); }
.admin-grid thead th { font-weight: 700; color: var(--text-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; background: rgba(125,125,125,.08); position: sticky; top: 0; }
.admin-grid tbody tr.admin-grid-row { cursor: pointer; }
.admin-grid tbody tr:nth-child(even) { background: rgba(125,125,125,.05); }
.admin-grid tbody tr.admin-grid-row:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.admin-grid tbody tr.admin-grid-row.is-selected { background: color-mix(in srgb, var(--primary) 18%, transparent); outline: 1px solid var(--primary); outline-offset: -1px; }
.admin-grid tbody tr.admin-grid-row.is-inactive { opacity: .6; }
.admin-grid-empty { text-align: center; color: var(--text-muted); padding: 16px; }
@media (max-width: 720px) {
  .admin-toolbar .btn { flex: 1 1 auto; justify-content: center; }
}
.hidden { display: none !important; }

/* guest-records-grid */
.guest-records-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}
.guest-records-filter-row [data-guest-search] { flex: 1 1 220px; min-width: 160px; }
.guest-records-date-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.guest-records-date-label input { min-width: 150px; }
.guest-records-quick-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.guest-records-quick-ranges .btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}
.guest-records-grid-wrap { max-height: 60vh; }
.guest-records-grid thead th { white-space: nowrap; }
.guest-records-grid tbody tr[data-guest-row] { cursor: pointer; }
.guest-records-grid tbody tr[data-guest-row]:hover { background: rgba(120,120,120,0.08); }
/* settings-tabs */
.settings-dialog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}
.settings-tab-btn {
  border: 1px solid var(--border-color);
  background: var(--bg-card-solid);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.settings-tab-btn:hover { color: var(--text-main); }
.settings-tab-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.settings-tab-panel { display: none; }
.settings-tab-panel.active { display: block; }
.settings-placeholder {
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}
.form-group-checkbox { display: flex; align-items: center; }
.form-group-checkbox label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.settings-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}
/* admin-grids-2 */
/* Show Last Version (Deleted Reservations): raw snapshot rows, field name then value */
.admin-grid.dr-snapshot th[scope="row"] { text-transform: none; letter-spacing: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; position: static; }
.admin-grid.dr-snapshot td { white-space: normal; word-break: break-word; }
.admin-grid td, .admin-grid th { white-space: nowrap; }
.admin-grid tbody td:last-child, .admin-grid thead th:last-child { white-space: normal; }
/* end admin-grids-2 */

/* Footer status bar (reference parity: every workspace page sits between the top page bar and a footer) */
.app-footer { position: sticky; bottom: 0; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 30px; padding: 4px 16px; background: var(--bg-card-solid); border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.76rem; }
.app-footer-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.app-footer-item i { color: var(--primary); }
.app-footer-sep { opacity: .5; }
.app-footer-dot { font-size: .55rem; color: #10b981 !important; }
.app-footer.is-offline .app-footer-dot { color: #ef4444 !important; }
.app-footer-version { margin-inline-start: auto; opacity: .7; }
.auth-required .app-footer { visibility: hidden; }
@media (max-width: 767px) { .app-footer { font-size: .7rem; gap: 4px 12px; } .app-footer-version { display: none; } }

/* C — Housekeeping sidebar destinations (reports / housekeepers / work orders) */
.hkx-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.hkx-meta { color:var(--text-muted); font-size:.78rem; margin:4px 0 10px; }
.hkx-chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px; }
.hkx-chip { display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card-solid); font-size:.82rem; }
.hkx-chip b { color:var(--primary); }
.hkx-table { width:100%; border-collapse:collapse; margin-top:8px; background:var(--bg-card-solid); border-radius:var(--radius-md); overflow:hidden; }
.hkx-table th, .hkx-table td { border-bottom:1px solid var(--border-color); padding:8px 10px; font-size:.82rem; text-align:start; vertical-align:top; }
.hkx-table th { background:rgba(148,163,184,.08); color:var(--text-muted); font-weight:700; }
.hkx-empty { text-align:center; color:var(--text-muted); padding:20px; }
.hkx-hk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; margin-top:12px; }
.hkx-hk-card { border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card-solid); padding:14px; }
.hkx-hk-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.hkx-hk-head i { color:#f59e0b; }
.hkx-hk-stats { display:flex; gap:16px; font-size:.8rem; color:var(--text-muted); margin-bottom:8px; }
.hkx-hk-stats b { color:var(--text-main); }
.hkx-hk-rooms { font-size:.8rem; color:var(--text-dim); line-height:1.6; }
.hkx-wo-form { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px; }
.hkx-wo-form .form-control { flex:1 1 150px; min-width:0; }
.hkx-wo-form #wo-title { flex:2 1 240px; }
.hkx-wo-form button { flex:0 0 auto; }
.hkx-wo-desc { color:var(--text-muted); font-size:.76rem; margin-top:2px; }
.hkx-wo-done { opacity:.55; }
.hkx-wo-prio { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:700; }
.hkx-wo-prio-low { background:rgba(148,163,184,.18); color:var(--text-muted); }
.hkx-wo-prio-normal { background:rgba(59,130,246,.16); color:#60a5fa; }
.hkx-wo-prio-high { background:rgba(245,158,11,.16); color:#f59e0b; }
.hkx-wo-prio-urgent { background:rgba(239,68,68,.18); color:#f87171; }
.hkx-wo-status { max-width:150px; }
.btn-sm { padding:4px 10px; font-size:.78rem; }

/* C — Housekeeping modals (Housekeeper List / Work Orders) */
.hkx-modal-table { margin-top:8px; }
.hkx-modal-table tbody tr { cursor:pointer; }
.hkx-modal-table tbody tr:hover { background:rgba(148,163,184,.08); }
.hkx-selected { background:rgba(59,130,246,.18) !important; }
.hkx-modal-footer { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.hkx-edit-form { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; padding:12px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:rgba(148,163,184,.06); }
.hkx-edit-form .form-control { flex:1 1 120px; min-width:0; }
.hkx-edit-form button { flex:0 0 auto; }
.hkx-edit-form[hidden] { display:none; }

/* C — Sidebar status legends (reference: Room Status / Housekeeping Status) */
.hkx-legend { margin-top: 10px; }
.hkx-legend-row { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 4px 6px 2px; }
.hkx-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-dim); white-space: nowrap; }
.hkx-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.app-sidebar.is-collapsed .hkx-legend-row { display: none; }

/* POS (Gift shop) — grid/invoice interface */
.gsp-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.gsp-toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; }
.gsp-card { padding:16px; }
.gsp-header-row { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.gsp-header-row label { display:flex; flex-direction:column; gap:4px; flex:1 1 180px; font-size:.8rem; color:var(--text-muted); }
.gsp-grid { width:100%; border-collapse:collapse; }
.gsp-grid th, .gsp-grid td { border-bottom:1px solid var(--border-color); padding:6px 8px; font-size:.82rem; text-align:start; vertical-align:middle; }
.gsp-grid th { background:rgba(148,163,184,.08); color:var(--text-muted); font-weight:700; }
.gsp-grid .gsp-units { width:80px; }
.gsp-grid select.form-control { min-width:160px; }
.gsp-footer { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; justify-content:space-between; margin-top:14px; }
.gsp-taxless { display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-main); }
.gsp-totals { min-width:220px; }
.gsp-pay-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.gsp-pay-row label { display:flex; flex-direction:column; gap:4px; flex:1 1 160px; font-size:.8rem; color:var(--text-muted); }
.gsp-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

/* POS — one-tap quick-pay tiles (professional touch bar) */
.pos-quickpay { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin:10px 0 12px; }
.pos-pay-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px 10px; border:0; border-radius:var(--radius-md); cursor:pointer; font:inherit; font-weight:700; font-size:.82rem; color:#fff; letter-spacing:.2px; box-shadow:0 4px 14px rgba(0,0,0,.18); transition:transform .12s ease, filter .12s ease; }
.pos-pay-tile i { font-size:1.5rem; }
.pos-pay-tile:hover { transform:translateY(-2px); filter:brightness(1.08); }
.pos-pay-tile:active { transform:translateY(0); filter:brightness(.95); }
.pos-pay-cash { background:linear-gradient(135deg,#10b981,#059669); }
.pos-pay-card { background:linear-gradient(135deg,#3b82f6,#2563eb); }
@media (max-width: 767px){ .pos-quickpay { grid-template-columns:repeat(2,1fr); } }

/* Housekeeping modals — search box */
.hkx-search { margin-bottom:10px; }

/* ============ POS (Restaurant) — professional cashier polish ============ */
.pos-layout { gap:20px; }
/* Category pills: larger, easier tap targets */
.pos-category-tabs { gap:8px; margin-bottom:16px; }
.pos-category-tab { padding:9px 18px; font-size:.86rem; border-radius:12px; }
.pos-category-tab.active { box-shadow:0 4px 12px rgba(59,130,246,.28); }
/* Product tiles: bigger, clearer, tappable, with a prominent price chip */
.pos-products-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.pos-product { min-height:128px; padding:16px 14px; border-radius:16px; gap:8px; position:relative; background:linear-gradient(160deg, var(--bg-card-solid), rgba(148,163,184,.05)); }
.pos-product::after { content:"+"; position:absolute; inset-inline-end:12px; inset-block-start:10px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; font-size:.9rem; opacity:0; transform:scale(.7); transition:.18s; }
.pos-product:hover::after { opacity:1; transform:scale(1); }
.pos-product:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.22); }
.pos-product:active { transform:translateY(0) scale(.98); }
.pos-product .pos-product-name { font-size:1rem; font-weight:800; line-height:1.3; color:var(--text-main); }
.pos-product strong { margin-top:auto; align-self:flex-start; background:rgba(16,185,129,.14); color:var(--status-reserved); padding:4px 12px; border-radius:999px; font-size:.95rem; font-weight:800; }
.pos-product small { font-size:.72rem; }
/* Cart: bigger quantity controls */
.pos-cart-actions { display:flex; align-items:center; gap:6px; }
.pos-cart-actions button { width:32px; height:32px; border-radius:10px; border:1px solid var(--border-color); background:var(--bg-card-solid); color:var(--text-main); font-size:1rem; cursor:pointer; display:grid; place-items:center; transition:.15s; }
.pos-cart-actions button:hover { border-color:var(--primary); color:var(--primary); }
.pos-cart-actions b { min-width:24px; text-align:center; font-size:1rem; }
/* Grand total: big and prominent for the cashier */
.pos-totals .pos-total { font-size:1.5rem; font-weight:800; padding-top:12px; }
.pos-totals .pos-total strong { color:var(--status-reserved); }
/* Quick-pay tiles: a touch taller/rounder */
.pos-quickpay { gap:12px; }
.pos-pay-tile { padding:16px 10px; border-radius:16px; }
.pos-pay-tile i { font-size:1.7rem; }
/* Prominent primary checkout */
#pos-checkout-btn { padding:15px; font-size:1.05rem; font-weight:800; border-radius:14px; box-shadow:0 6px 18px rgba(59,130,246,.3); }

/* Mobile tap comfort — comfortable 44px touch targets on phones */
@media (max-width: 767px) {
  .btn { min-height: 44px; }
  .workspace-switcher-item { padding-block: 11px; }
  .lang-btn { min-height: 34px; }
}

/* Mobile: smooth momentum horizontal scroll for wide tables/rack (native feel) */
@media (max-width: 767px) {
  .tape-chart-container, .table-scroll, [class*="-table-body"], .available-room-table,
  .modal-body, .hkx-modal-table, .gsp-grid { -webkit-overflow-scrolling: touch; }
}

/* ---- Admin > User Levels: reference permission matrix (InnGenius parity) ---- */
.admin-instructions {
  padding: 12px 16px;
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.ul-dialog-title {
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.ul-work-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0;
}
.ul-work-areas legend {
  padding: 0 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.ul-work-area { margin: 0; }
.ul-perm-count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  margin-inline-start: 6px;
  border-radius: 10px;
  background: var(--bg-main);
  font-size: 0.78rem;
}
.ul-perm-card { max-width: 1180px; width: 94vw; }
.ul-perm-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  max-height: 62vh;
  overflow: auto;
}
.ul-perm-col {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px 12px;
  min-width: 0;
}
.ul-perm-col legend {
  padding: 0 6px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.ul-perm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-size: 0.84rem;
  cursor: pointer;
}
.ul-perm span { min-width: 0; overflow-wrap: anywhere; }
.ul-perm-header { font-weight: 700; margin-top: 6px; }
.ul-perm-live {
  color: var(--success, #22c55e);
  font-style: normal;
  font-size: 0.7rem;
  margin-inline-start: 4px;
}
.ul-perm-hint {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .ul-perm-body { grid-template-columns: 1fr; max-height: 70vh; }
}

/* ---- Admin list pattern (reference parity: per-column filters, action bar under the grid) ---- */
/* The filter row sits inside <thead> above the header row; both stick while the body scrolls.
   Sticky needs a scroll container with a bounded height — without one it silently never sticks. */
.admin-grid-wrap {
  max-height: min(62vh, 640px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-grid thead tr.admin-grid-filters th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-card-solid, var(--bg-main));
  padding: 4px 6px;
}
.admin-grid thead tr:not(.admin-grid-filters) th {
  position: sticky;
  top: 38px;
  z-index: 2;
}
.admin-grid-filter-cell .form-control {
  width: 100%;
  min-width: 90px;
  padding: 4px 8px;
  font-size: 0.82rem;
  height: auto;
}
/* The action bar belongs under the table, as in the reference. */
.admin-grid-wrap + .admin-toolbar {
  margin-top: 10px;
  margin-bottom: 0;
}
.crud-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 720px) {
  /* Mobile keeps every column, every button and every field — it only lets the grid scroll
     inside its own box and lets the action bar wrap. Nothing is hidden or dropped. */
  .admin-grid-wrap {
    max-height: 58vh;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .admin-grid { min-width: max-content; }
  .admin-toolbar .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px;
  }
  .admin-grid-filter-cell .form-control { min-width: 80px; }
}