/*
  Dormer PMS Design System
  Canonical shell, components, breakpoints, and data table rules.
  Page templates should compose these primitives instead of defining layout locally.
*/

:root {
  --ds-sidebar: 280px;
  --ds-sidebar-collapsed: 72px;
  --ds-sidebar-mobile: min(86vw, 320px);
  --ds-content-max: 1680px;
  --ds-page-pad: clamp(24px, 2vw, 32px);
  --ds-page-pad-mobile: 16px;
  --ds-bg: #f7f8fc;
  --ds-surface: #ffffff;
  --ds-border: #e6e8ef;
  --ds-text: #111827;
  --ds-muted: #6b7280;
  --ds-primary: #0b0f8a;
  --ds-accent: #f4a62a;
  --ds-success: #16a34a;
  --ds-warning: #f59e0b;
  --ds-danger: #dc2626;
  --ds-radius: 16px;
  --ds-radius-sm: 12px;
  --ds-shadow: 0 10px 32px rgba(17, 24, 39, .045);
  --ds-page-header-height: 64px;
}

* {
  min-width: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--ds-bg);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--ds-sidebar);
  max-width: var(--ds-sidebar);
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px 14px;
  overflow: hidden;
  background: var(--ds-surface);
  color: var(--ds-text);
  border-right: 1px solid var(--ds-border);
  box-shadow: none;
  transition: width .18s ease, max-width .18s ease, transform .22s ease;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 28;
  background: rgba(17, 24, 39, .35);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .22s ease;
}

.app-shell.mobile-sidebar-open .sidebar-backdrop {
  display: block;
  opacity: 1;
}

.workspace {
  width: calc(100% - var(--ds-sidebar));
  min-height: 100vh;
  margin-left: var(--ds-sidebar);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  transition: width .18s ease, margin-left .18s ease;
}

.content {
  width: 100%;
  max-width: var(--ds-content-max);
  margin: 0 auto;
  padding: var(--ds-page-pad) var(--ds-page-pad) 88px;
  flex: 1 1 auto;
}

.app-shell.sidebar-collapsed .sidebar {
  width: var(--ds-sidebar-collapsed);
  max-width: var(--ds-sidebar-collapsed);
  padding-inline: 10px;
}

.app-shell.sidebar-collapsed .workspace {
  width: calc(100% - var(--ds-sidebar-collapsed));
  margin-left: var(--ds-sidebar-collapsed);
}

.side-brand {
  height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
  padding: 0;
}

.side-logo {
  min-width: 0;
}

.side-logo img {
  width: 154px;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.sidebar-toggle {
  display: inline-flex;
}

.mobile-menu {
  display: none;
}

.side-property-select {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-content: center;
  gap: 4px 8px;
  padding: 10px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: #f9fafc;
  color: var(--ds-text);
}

.side-property-select span,
.side-property-select strong {
  grid-column: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-property-select span {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.side-property-select strong {
  font-size: 14px;
  font-weight: 850;
}

.side-property-select .lucide {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--ds-accent);
}

.side-property-select select {
  grid-column: 1;
  border: none;
  background: transparent;
  color: var(--ds-text);
  font-size: 14px;
  font-weight: 850;
  padding: 0;
  cursor: pointer;
}

.side-nav {
  display: block;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 2px 8px;
}

.side-nav p {
  margin: 18px 12px 8px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.side-nav p:first-child {
  margin-top: 4px;
}

.side-nav a {
  position: relative;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--ds-text);
  font-weight: 800;
  transition: background .15s ease, color .15s ease;
}

.side-nav a:hover {
  background: #f1f3f8;
  color: var(--ds-text);
  transform: none;
}

.side-nav a.active {
  background: #eceef5;
  color: var(--ds-text);
  box-shadow: inset 4px 0 0 var(--ds-accent);
}

.side-nav a.active .lucide {
  color: var(--ds-primary);
}

.side-nav a b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-bottom {
  min-height: 0;
}

.sidebar-profile {
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow);
}

.sidebar-profile strong,
.sidebar-profile span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile span {
  color: var(--ds-muted);
  font-size: 12px;
}

.avatar-img,
.avatar {
  flex: 0 0 auto;
  border-radius: 12px;
  background: #fff7e6;
  color: var(--ds-primary);
}

.app-shell.sidebar-collapsed .side-logo img,
.app-shell.sidebar-collapsed .side-property-select span,
.app-shell.sidebar-collapsed .side-property-select strong,
.app-shell.sidebar-collapsed .side-property-select .lucide,
.app-shell.sidebar-collapsed .side-nav p,
.app-shell.sidebar-collapsed .side-nav a b,
.app-shell.sidebar-collapsed .sidebar-profile div:not(.avatar-img),
.app-shell.sidebar-collapsed .nav-badge {
  display: none;
}

.app-shell.sidebar-collapsed .side-brand {
  grid-template-columns: 1fr;
  justify-items: center;
}

.app-shell.sidebar-collapsed .side-property-select {
  height: 48px;
  padding: 0;
  place-items: center;
}

.app-shell.sidebar-collapsed .side-property-select::before {
  content: "P";
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--ds-primary);
  background: #fff7e6;
  font-weight: 900;
}

.app-shell.sidebar-collapsed .side-nav a {
  grid-template-columns: 1fr;
  justify-items: center;
  padding-inline: 0;
}

.app-shell.sidebar-collapsed .sidebar-profile {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 8px;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  grid-template-columns: 48px minmax(180px, 260px) minmax(260px, 1fr) auto;
  overflow: hidden;
}

.company-chip {
  min-height: 48px;
}

.company-chip strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.company-chip strong .lucide {
  width: 14px;
  height: 14px;
}

.top-actions {
  flex-wrap: nowrap;
  overflow: visible;
}

.mini-button.has-count {
  position: relative;
}

.mini-button.has-count span {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ds-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.date-chip {
  min-width: 142px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0 8px;
}

.date-chip .lucide {
  grid-row: 1 / span 2;
}

.date-chip small,
.profile-chip small {
  display: block;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}

.profile-chip {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  min-width: 152px;
  gap: 0 10px;
}

.profile-chip .lucide {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 12px;
  background: #fff7e8;
  color: var(--ds-primary);
}

.profile-chip b,
.profile-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2026 PMS operations control center */
.ops-control {
  display: grid;
  gap: 18px;
}

.ops-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.ops-heading h1 {
  margin: 4px 0 6px;
  font-size: clamp(28px, 2.4vw, 34px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0;
}

.ops-heading p:last-child {
  max-width: 820px;
  color: var(--ds-muted);
  font-size: 15px;
  line-height: 1.45;
}

.ops-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.ops-kpi {
  position: relative;
  min-height: 126px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  grid-template-rows: auto auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
  color: var(--ds-text);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ops-kpi:hover {
  transform: translateY(-1px);
  border-color: #cfd5e3;
  box-shadow: 0 16px 44px rgba(17, 24, 39, .075);
}

.ops-kpi > span {
  grid-row: 1 / span 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.ops-kpi .lucide {
  width: 22px;
  height: 22px;
}

.ops-kpi small,
.ops-kpi em {
  min-width: 0;
  color: var(--ds-muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.ops-kpi small {
  color: var(--ds-text);
  line-height: 1.2;
}

.ops-kpi strong {
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}

.ops-kpi b {
  grid-column: 3;
  grid-row: 3;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  justify-self: end;
  align-self: end;
  border-radius: 999px;
  color: #fff;
}

.ops-kpi.blue { background: linear-gradient(135deg, #fff, #f3f6ff); border-color: #d9e2ff; }
.ops-kpi.green { background: linear-gradient(135deg, #fff, #f0fbf5); border-color: #ccefd9; }
.ops-kpi.amber { background: linear-gradient(135deg, #fff, #fff8eb); border-color: #fde7bc; }
.ops-kpi.red { background: linear-gradient(135deg, #fff, #fff3f3); border-color: #ffd6d6; }
.ops-kpi.orange { background: linear-gradient(135deg, #fff, #fff6ed); border-color: #fedfbd; }
.ops-kpi.purple { background: linear-gradient(135deg, #fff, #fbf5ff); border-color: #ead9ff; }
.ops-kpi.blue > span { color: #1d4ed8; background: #eaf0ff; }
.ops-kpi.green > span { color: var(--ds-success); background: #dcfce7; }
.ops-kpi.amber > span { color: var(--ds-warning); background: #ffedd5; }
.ops-kpi.red > span { color: var(--ds-danger); background: #fee2e2; }
.ops-kpi.orange > span { color: #ea580c; background: #ffedd5; }
.ops-kpi.purple > span { color: #9333ea; background: #f3e8ff; }
.ops-kpi.blue b { background: #7da2f7; }
.ops-kpi.green b { background: var(--ds-success); }
.ops-kpi.amber b { background: var(--ds-warning); }
.ops-kpi.red b { background: var(--ds-danger); }
.ops-kpi.orange b { background: #ea580c; }
.ops-kpi.purple b { background: #9333ea; }

.ops-board {
  display: grid;
  grid-template-columns: minmax(520px, 1.55fr) minmax(300px, .75fr) minmax(300px, .75fr);
  gap: 18px;
  align-items: start;
}

.ops-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.ops-bottom-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, .9fr) minmax(360px, .9fr);
  gap: 18px;
  align-items: stretch;
}

/* ── Dashboard P1/P2/P3 layout ── */
.p1-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ops-p2-grid {
  display: grid;
  grid-template-columns: minmax(440px, 1.4fr) minmax(0, .8fr) minmax(0, .8fr);
  gap: 18px;
  align-items: start;
}

.ops-p2-grid .ops-card--queue {
  grid-row: 1;
}

.ops-p3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 18px;
  align-items: start;
}

.dash-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-actions a {
  min-height: 80px;
}

.command-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: var(--ds-success);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.command-live i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ds-success);
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

@media (max-width: 1500px) {
  .p1-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-p2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-p2-grid .ops-card--queue {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .ops-p2-grid,
  .ops-p3-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .p1-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .p1-kpis {
    grid-template-columns: 1fr;
  }
}

.ops-card {
  min-width: 0;
  min-height: 0;
  padding: 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
}

.ops-card-head {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ops-card-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-text);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
}

.ops-card-head h2 span {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ds-danger);
  color: #fff;
  font-size: 12px;
}

.ops-card-head a {
  color: var(--ds-primary);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.ops-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
}

.ops-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

.ops-table th,
.ops-table td {
  padding: 12px;
  border-bottom: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: middle;
}

.ops-table th {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.ops-table td {
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 700;
}

.ops-table tr:last-child td {
  border-bottom: 0;
}

.guest-mini {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 10px;
  align-items: center;
}

.guest-mini .avatar {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
}

.guest-mini b,
.guest-mini small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-mini small {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 6px 10px;
  border-radius: 9px;
  background: #eef2ff;
  color: var(--ds-primary);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.pill.good { background: #dcfce7; color: #08743e; }
.pill.warn { background: #ffedd5; color: #b45309; }
.pill.danger { background: #fee2e2; color: #b91c1c; }

/* Guest register — flags a Form-C-relevant foreign guest inline next to their
   name so reception spots them at a glance, without adding a large badge. */
.foreign-guest-icon {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: middle;
  color: var(--ds-success);
}

.verification-card footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.verification-card footer small::after {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--ds-success);
}

.ops-list {
  display: grid;
  gap: 0;
}

.ops-list article,
.activity-compact article {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--ds-border);
}

.ops-list article:last-child,
.activity-compact article:last-child {
  border-bottom: 0;
}

.ops-list time,
.activity-compact time {
  color: var(--ds-text);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.ops-list b,
.activity-compact b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}

.ops-list small,
.activity-compact small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
}

.bed-status-grid,
.housekeeping-grid,
.payment-summary,
.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bed-status,
.housekeeping-grid a,
.payment-summary a,
.quick-action-grid a {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  color: var(--ds-text);
  text-decoration: none;
}

.bed-status {
  grid-template-columns: 32px minmax(0, 1fr);
}

.bed-status.wide {
  grid-column: 1 / -1;
}

.bed-status .lucide {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  align-self: center;
}

.bed-status strong,
.housekeeping-grid strong,
.payment-summary strong {
  font-size: 20px;
  font-weight: 900;
}

.bed-status span,
.housekeeping-grid span,
.payment-summary span,
.quick-action-grid span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.bed-status.green,
.housekeeping-grid .green,
.payment-summary .green { background: #f0fdf4; border-color: #bbf7d0; color: var(--ds-success); }
.bed-status.blue { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.bed-status.amber,
.housekeeping-grid .amber,
.payment-summary .amber { background: #fffbeb; border-color: #fde68a; color: var(--ds-warning); }
.bed-status.red,
.housekeeping-grid .red,
.payment-summary .red { background: #fef2f2; border-color: #fecaca; color: var(--ds-danger); }
.bed-status.purple,
.housekeeping-grid .purple { background: #faf5ff; border-color: #ead9ff; color: #9333ea; }

.stock-control-list {
  display: grid;
  gap: 10px;
}

.stock-control-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.stock-control-list article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff7e8;
  color: var(--ds-accent);
}

.stock-control-list b {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 900;
}

.stock-control-list meter {
  width: 100%;
  height: 8px;
}

.stock-control-list small {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ticket-list {
  display: grid;
  gap: 8px;
}

.ticket-list article {
  display: grid;
  grid-template-columns: minmax(80px, .65fr) minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 34px;
}

.ticket-list b,
.ticket-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}

.ticket-list span,
.ticket-list small {
  color: var(--ds-muted);
  font-weight: 750;
}

.priority {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.priority.high { background: #fee2e2; color: #b91c1c; }
.priority.medium { background: #ffedd5; color: #b45309; }
.priority.low { background: #dcfce7; color: #08743e; }

.housekeeping-grid a,
.payment-summary a,
.quick-action-grid a {
  justify-items: center;
  text-align: center;
}

.housekeeping-grid .lucide,
.payment-summary .lucide,
.quick-action-grid .lucide {
  width: 24px;
  height: 24px;
}

.activity-compact {
  display: grid;
}

.activity-compact article {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.payment-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-action-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quick-action-grid a {
  min-height: 88px;
  color: var(--ds-primary);
}

@media (max-width: 1500px) {
  .ops-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-board,
  .ops-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .verification-card {
    grid-column: 1 / -1;
  }

  .ops-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .app-topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .company-chip {
    display: none;
  }

  .global-search {
    grid-column: 2;
  }

  .top-actions {
    max-width: 100%;
    overflow-x: auto;
  }

  .ops-board,
  .ops-grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ops-heading {
    display: grid;
  }

  .ops-kpi-strip,
  .bed-status-grid,
  .housekeeping-grid,
  .payment-summary,
  .quick-action-grid {
    grid-template-columns: 1fr;
  }

  .ops-card {
    padding: 14px;
  }

  .ops-list article {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .ops-list .pill {
    grid-column: 2;
    justify-self: start;
  }

  .ticket-list article,
  .stock-control-list article {
    grid-template-columns: 1fr;
  }

  .stock-control-list article > span {
    display: none;
  }
}

@media (min-width: 1400px) {
  .content {
    max-width: var(--ds-content-max);
  }
}

/* existing topbar definition continues below */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(190px, 260px) minmax(280px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px var(--ds-page-pad);
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  box-shadow: none;
}

.company-chip,
.top-actions {
  min-width: 0;
}

.global-search input {
  min-height: 48px;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface);
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow: visible;
}

.button,
.mini-button,
.review-button,
.icon-button {
  border-radius: 12px;
  border-color: var(--ds-border);
  box-shadow: none;
}

.button:hover,
.mini-button:hover,
.review-button:hover,
.icon-button:hover {
  transform: none;
  box-shadow: none;
}

.button.primary,
.mini-button.primary {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}

.panel,
.premium-card,
.kpi-card,
.priority-card,
.queue-card,
.queue-stat,
.room-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
  overflow: hidden;
}

.screen-header,
.dashboard-greeting,
.verify-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.screen-header h1,
.dashboard-greeting h1,
.verify-hero h1 {
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.15;
  font-weight: 780;
}

.screen-header p,
.dashboard-greeting p,
.verify-hero p {
  max-width: 760px;
  color: var(--ds-muted);
}

.section-kicker {
  color: var(--ds-muted);
}

.enterprise-stats,
.kpi-grid,
.premium-kpis,
.priority-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.enterprise-stats article,
.kpi-card,
.priority-card {
  min-width: 280px;
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

.enterprise-stats small,
.kpi-card small,
.priority-card small {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.enterprise-stats strong,
.kpi-card strong,
.priority-card strong {
  color: var(--ds-text);
  font-size: 28px;
  line-height: 1;
  font-weight: 850;
}

.enterprise-stats span,
.kpi-card span,
.priority-card em {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
}

/* ───────────────────────────────────────────────────────────
   Canonical stat tile (Phase 0 consolidation)
   One KPI/stat component to replace the 9 near-identical variants
   (.ops-kpi / .dash-stat / .inventory-kpis / .import-summary-strip /
   .guest-revenue-strip / .room-status-strip / .inventory-profile-metrics ...).
   Pages adopt .stat-grid > .stat-tile as they are redesigned.
   Works as <a> (clickable KPI) or <article>.
   ─────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.stat-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  align-content: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

a.stat-tile:hover {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-shadow);
}

.stat-tile > .stat-icon {
  grid-row: 1 / span 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ds-primary) 12%, transparent);
  color: var(--ds-primary);
}

.stat-tile > .stat-icon .lucide { width: 20px; height: 20px; }
.stat-tile.no-icon { grid-template-columns: 1fr; }
.stat-tile.no-icon > .stat-icon { display: none; }

.stat-tile .stat-label {
  grid-column: 2;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.stat-tile.no-icon .stat-label { grid-column: 1; }

.stat-tile .stat-value {
  grid-column: 2;
  color: var(--ds-text);
  font-size: 26px;
  line-height: 1.05;
  font-weight: 850;
}
.stat-tile.no-icon .stat-value { grid-column: 1; }

.stat-tile .stat-sub {
  grid-column: 2;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
}
.stat-tile.no-icon .stat-sub { grid-column: 1; }

/* Accent variants tint the icon chip (and left edge on hover) */
.stat-tile.blue   > .stat-icon { background: color-mix(in srgb, var(--ds-primary) 12%, transparent); color: var(--ds-primary); }
.stat-tile.green  > .stat-icon { background: color-mix(in srgb, var(--ds-success) 14%, transparent); color: var(--ds-success); }
.stat-tile.amber  > .stat-icon,
.stat-tile.orange > .stat-icon { background: color-mix(in srgb, var(--ds-warning) 16%, transparent); color: var(--ds-warning); }
.stat-tile.red    > .stat-icon { background: color-mix(in srgb, var(--ds-danger) 13%, transparent); color: var(--ds-danger); }
.stat-tile.purple > .stat-icon { background: color-mix(in srgb, #7c3aed 13%, transparent); color: #7c3aed; }
.stat-tile.gold   > .stat-icon { background: color-mix(in srgb, var(--ds-accent) 18%, transparent); color: #b8791a; }

/* ───────────────────────────────────────────────────────────
   Loading affordances (Phase 0)
   .skeleton  — shimmer placeholder block
   .is-busy   — dims + shows a spinner overlay on any positioned container
   [data-live-region].is-live-stale already exists in app.js for polling.
   ─────────────────────────────────────────────────────────── */
@keyframes ds-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, #eef0f5 25%, #f6f7fb 37%, #eef0f5 63%);
  background-size: 800px 100%;
  animation: ds-shimmer 1.3s infinite linear;
}

.is-busy { position: relative; pointer-events: none; }
.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .55);
  border-radius: inherit;
}
.is-busy::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  z-index: 1;
  border: 3px solid color-mix(in srgb, var(--ds-primary) 25%, transparent);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-spin .7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .is-busy::before { animation-duration: 1.6s; }
}

.enterprise-workspace,
.module-grid,
.ops-grid,
.dashboard-grid,
.split-workspace,
.desk-qr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 18px;
  align-items: start;
}

.enterprise-main,
.enterprise-side,
.ops-left,
.ops-right,
.verify-left,
.verify-right {
  display: grid;
  gap: 18px;
}

.enterprise-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.toolbar-search {
  position: relative;
}

.toolbar-search .lucide {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ds-primary);
}

.toolbar-search input {
  min-height: 46px;
  padding-left: 44px;
}

.pms-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}

.pms-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.pms-pagination-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-text-muted, #64748b);
}

.pms-pagination .is-disabled {
  opacity: .4;
  pointer-events: none;
}

.pms-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.pms-table th,
.pms-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: middle;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}

/* Give the trailing Action column enough room for its buttons under
   table-layout: fixed, which otherwise splits width evenly across columns
   and squeezes "Edit"/"Deactivate" until their labels wrap letter-by-letter.
   Ledgers with their own nth-child width rules (guest/bookings/inventory)
   override this further down the cascade. */
.pms-table th:last-child {
  width: 190px;
  white-space: nowrap;
}

.pms-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--ds-muted);
  background: var(--ds-surface);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.pms-table th::after {
  content: "↕";
  margin-left: 6px;
  color: #b5bbc7;
  font-size: 10px;
}

.pms-table td {
  background: var(--ds-surface);
  color: var(--ds-text);
  font-weight: 650;
}

.pms-table tbody tr:hover td {
  background: #f7f8fc;
}

.pms-table .status-badge {
  /* Badges must never break mid-word ("Reserve d"). This rule used to force
     white-space: normal, which is more specific than the base .status-badge
     rule and silently won every table cell in the app. Narrow columns now
     make the table scroll horizontally (.pms-table-wrap already does this)
     instead of wrapping a pill's text. */
  max-width: 100%;
  white-space: nowrap;
}

.inventory-ledger,
.bookings-ledger,
.guest-ledger,
.reception-ledger,
.payment-ledger,
.audit-ledger,
.settings-ledger,
.rooms-ledger,
.police-ledger,
.integration-ledger,
.rate-ledger,
.dashboard-queue-ledger,
.stay-ledger {
  min-width: 920px;
}

.guest-ledger th:nth-child(n),
.guest-ledger td:nth-child(n) {
  width: auto;
}

.guest-ledger {
  min-width: 1080px;
}

.guest-ledger th:nth-child(1) { width: 20%; }
.guest-ledger th:nth-child(2) { width: 13%; }
.guest-ledger th:nth-child(3) { width: 12%; }
.guest-ledger th:nth-child(4) { width: 12%; }
.guest-ledger th:nth-child(5) { width: 18%; }
.guest-ledger th:nth-child(6) { width: 12%; }
.guest-ledger th:nth-child(7) { width: 8%; }
.guest-ledger th:nth-child(8) { width: 110px; }

.bookings-ledger {
  min-width: 1040px;
}

.bookings-ledger th:nth-child(1) { width: 18%; }
.bookings-ledger th:nth-child(2) { width: 13%; }
.bookings-ledger th:nth-child(3) { width: 10%; }
.bookings-ledger th:nth-child(4) { width: 20%; }
.bookings-ledger th:nth-child(5) { width: 14%; }
/* Status/Payment get a little more room now .pms-table .status-badge is
   nowrap again — taken from Source, whose values ("Walk-in", "OTA") are
   short and don't need it. */
.bookings-ledger th:nth-child(6) { width: 11%; }
.bookings-ledger th:nth-child(7) { width: 10%; }
.bookings-ledger th:nth-child(8) { width: 64px; }

.inventory-ledger {
  min-width: 900px;
}

.inventory-ledger th:nth-child(1) { width: 26%; }
.inventory-ledger th:nth-child(2) { width: 18%; }
.inventory-ledger th:nth-child(3) { width: 13%; }
.inventory-ledger th:nth-child(4) { width: 10%; }
.inventory-ledger th:nth-child(5) { width: 14%; }
.inventory-ledger th:nth-child(6) { width: 10%; }
.inventory-ledger th:nth-child(7) { width: 120px; }

.payment-ledger {
  min-width: 760px;
}

.audit-ledger {
  min-width: 920px;
}

.settings-ledger {
  min-width: 860px;
}

.status-badge {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 850;
  background: #eef1ff;
  color: var(--ds-primary);
}

.good-status {
  background: #eaf9f0;
  color: #118447;
}

.warn {
  background: #fff7e6;
  color: #9a5a00;
}

.danger-status,
.danger {
  background: #fff0f0;
  color: #b91c1c;
}

.empty {
  width: 100%;
  color: var(--ds-muted);
  background: var(--ds-surface);
  border: 1px dashed var(--ds-border);
  border-radius: 14px;
  font-weight: 750;
}

.guest-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guest-cell strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.truncate-cell {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mono-cell,
.number-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.number-cell {
  font-weight: 900;
}

.desk-qr-grid {
  grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
}

.workflow-list li {
  grid-template-columns: 46px minmax(0, 1fr);
}

.workflow-list span {
  max-width: 760px;
  line-height: 1.5;
}

.modal,
dialog {
  max-width: calc(100vw - 32px);
}

.messages {
  width: 100%;
  max-width: var(--ds-content-max);
  margin: 0 auto;
  padding: 14px var(--ds-page-pad) 0;
}

@media (min-width: 1400px) {
  .content {
    max-width: var(--ds-content-max);
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  :root {
    --ds-page-pad: 24px;
  }

  .content {
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* ── Tablet: auto-collapse sidebar ── */
  :root {
    --ds-page-pad: 20px;
  }

  .sidebar {
    width: var(--ds-sidebar-collapsed);
    max-width: var(--ds-sidebar-collapsed);
    padding-inline: 10px;
  }

  .workspace {
    width: calc(100% - var(--ds-sidebar-collapsed));
    margin-left: var(--ds-sidebar-collapsed);
  }

  .pms-modal,
  .modal {
    left: calc(50% + (var(--ds-sidebar-collapsed) / 2));
  }

  .side-logo img,
  .side-property-select span,
  .side-property-select strong,
  .side-property-select .lucide,
  .side-nav p,
  .side-nav a b,
  .sidebar-profile div:not(.avatar-img),
  .nav-badge {
    display: none;
  }

  .side-brand {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .side-property-select {
    min-height: 48px;
    padding: 0;
    place-items: center;
  }

  .side-property-select::before {
    content: "P";
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-primary);
    background: #fff7e6;
    font-weight: 900;
  }

  .side-nav a {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-inline: 0;
  }

  .sidebar-profile {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 8px;
  }

  .sidebar-toggle {
    display: none;
  }

  .mobile-menu {
    display: inline-flex;
  }

  .app-topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .company-chip {
    display: none;
  }

  .enterprise-workspace,
  .module-grid,
  .ops-grid,
  .dashboard-grid,
  .split-workspace,
  .desk-qr-grid,
  .verification-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  /* ── Mobile: off-canvas drawer ── */
  :root {
    --ds-page-pad: 16px;
  }

  .app-shell {
    display: block;
    padding-bottom: 74px;
  }

  .sidebar {
    width: var(--ds-sidebar-mobile);
    max-width: var(--ds-sidebar-mobile);
    transform: translateX(-105%);
    box-shadow: 24px 0 48px rgba(17, 24, 39, .15);
  }

  .app-shell.mobile-sidebar-open .sidebar {
    transform: translateX(0);
  }

  .workspace,
  .app-shell.sidebar-collapsed .workspace {
    width: 100%;
    margin-left: 0;
  }

  .sidebar-toggle {
    display: none;
  }

  .mobile-menu {
    display: inline-flex;
  }

  .app-topbar {
    grid-template-columns: 44px 1fr auto;
    padding: 12px var(--ds-page-pad-mobile);
  }

  .company-chip,
  .date-chip,
  .profile-chip {
    display: none;
  }

  .global-search {
    grid-column: 1 / -1;
  }

  .top-actions {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .content {
    max-width: none;
    padding: var(--ds-page-pad-mobile) var(--ds-page-pad-mobile) 92px;
  }

  .screen-header,
  .dashboard-greeting,
  .verify-hero {
    display: grid;
    align-items: start;
  }

  .header-actions,
  .inline-filter,
  .enterprise-toolbar {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .enterprise-workspace,
  .module-grid,
  .ops-grid,
  .dashboard-grid,
  .split-workspace,
  .desk-qr-grid,
  .verification-workspace,
  .workflow-columns,
  .inventory-bottom-grid,
  .bottom-insights {
    grid-template-columns: 1fr;
  }

  .enterprise-stats,
  .kpi-grid,
  .premium-kpis,
  .priority-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enterprise-stats article,
  .kpi-card,
  .priority-card {
    min-width: 0;
  }

  .pms-table {
    min-width: 760px;
  }

  .bottom-nav {
    display: flex;
  }

  .fab-action {
    display: grid;
  }
}

@media (max-width: 480px) {
  /* ── Small phones ── */
  h1 {
    font-size: 24px;
  }

  .enterprise-stats,
  .kpi-grid,
  .premium-kpis,
  .priority-strip {
    grid-template-columns: 1fr;
  }

  .premium-card,
  .panel,
  .onboarding-card,
  .login-card {
    border-radius: var(--ds-radius-sm);
    padding: 16px;
  }

  .grid-form {
    grid-template-columns: 1fr;
  }
}

/* Foundation layout corrections for PMS operations screens */
.dashboard-stats.enterprise-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.dashboard-stats.enterprise-stats article,
.dashboard-stats.enterprise-stats article:last-child {
  min-width: 0;
  min-height: 104px;
  padding: 18px 20px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

.dashboard-stats.enterprise-stats small,
.dashboard-stats.enterprise-stats span {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.dashboard-enterprise.enterprise-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 360px);
  align-items: start;
}

.dashboard-enterprise .enterprise-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(460px, 1.28fr);
  gap: 18px;
  align-items: start;
}

.dashboard-enterprise .today-operations {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.dashboard-enterprise .queue-module {
  grid-column: 2;
  grid-row: 1;
}

.dashboard-enterprise .bottom-insights {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.dashboard-enterprise .enterprise-side {
  min-width: 0;
}

.task-ledger article {
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.task-ledger article > .task-state {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-top: 5px;
}

.task-ledger article > strong {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.task-ledger article > p {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.task-ledger article > a {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  white-space: nowrap;
}

.dashboard-queue-ledger {
  min-width: 640px;
}

.dashboard-queue-ledger th,
.dashboard-queue-ledger td {
  white-space: normal;
}

.dashboard-enterprise .stock-alerts article {
  grid-template-columns: 44px minmax(0, 1fr) minmax(120px, 180px);
  gap: 14px;
  align-items: center;
}

.dashboard-enterprise .stock-alerts article > div {
  min-width: 0;
}

.dashboard-enterprise .stock-alerts article strong,
.dashboard-enterprise .stock-alerts article p {
  overflow-wrap: normal;
  word-break: normal;
}

.dashboard-enterprise .stock-alerts meter {
  width: 100%;
  min-width: 120px;
}

.activity-feed article,
.premium-feed article {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
}

.activity-feed article > div,
.premium-feed article > div {
  min-width: 0;
}

.activity-feed article strong,
.activity-feed article p,
.premium-feed article strong,
.premium-feed article p {
  overflow-wrap: normal;
  word-break: normal;
}

.desk-qr-grid {
  grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
  align-items: start;
}

.desk-flow-card {
  overflow: visible;
}

.workflow-list.qr-workflow li {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px 18px;
  align-items: start;
  min-height: auto;
}

.workflow-list.qr-workflow li::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
}

.workflow-list.qr-workflow b,
.workflow-list.qr-workflow span {
  grid-column: 2;
  min-width: 0;
  max-width: none;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.workflow-list.qr-workflow b {
  grid-row: 1;
}

.workflow-list.qr-workflow span {
  grid-row: 2;
  margin-top: 0;
}

.side-brand {
  min-height: 72px;
  overflow: hidden;
}

.side-logo img {
  max-width: 164px;
  max-height: 62px;
  object-fit: contain;
}

@media (max-width: 1500px) {
  .dashboard-stats.enterprise-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-enterprise .enterprise-main {
    grid-template-columns: 1fr;
  }

  .dashboard-enterprise .today-operations,
  .dashboard-enterprise .queue-module,
  .dashboard-enterprise .bottom-insights {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 1120px) {
  .dashboard-enterprise.enterprise-workspace {
    grid-template-columns: 1fr;
  }

  .desk-qr-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .dashboard-stats.enterprise-stats {
    grid-template-columns: 1fr;
  }

  .task-ledger article {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .task-ledger article > a {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
  }

  .dashboard-enterprise .stock-alerts article {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .dashboard-enterprise .stock-alerts meter {
    grid-column: 2;
    min-width: 0;
  }

  .workflow-list.qr-workflow li {
    grid-template-columns: 46px minmax(0, 1fr);
  }
}

/* Professional PMS refinement: quiet control-desk layout */
.ops-control {
  gap: 16px;
}

.ops-heading {
  align-items: start;
  padding-bottom: 2px;
}

.ops-heading h1 {
  margin: 2px 0 6px;
  font-size: clamp(24px, 1.8vw, 30px);
  font-weight: 850;
}

.ops-heading p:last-child {
  max-width: 720px;
  font-size: 14px;
}

.ops-kpi-strip {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px;
}

.ops-kpi {
  min-height: 104px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  padding: 14px;
  border-color: #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .035);
}

.ops-kpi:hover {
  transform: none;
  border-color: #d4d8e2;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .055);
}

.ops-kpi > span {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f4f6fb;
  color: var(--ds-primary);
}

.ops-kpi .lucide {
  width: 20px;
  height: 20px;
}

.ops-kpi small {
  color: #111827;
  font-size: 12px;
  font-weight: 850;
}

.ops-kpi strong {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  color: #111827;
  font-size: 24px;
}

.ops-kpi em {
  color: #6b7280;
  font-size: 12px;
}

.ops-kpi b {
  display: none;
}

.ops-kpi.blue,
.ops-kpi.green,
.ops-kpi.amber,
.ops-kpi.red,
.ops-kpi.orange,
.ops-kpi.purple {
  background: #fff;
  border-color: #e5e7eb;
}

.ops-kpi.blue { box-shadow: inset 3px 0 0 #3b82f6, 0 8px 24px rgba(17, 24, 39, .035); }
.ops-kpi.green { box-shadow: inset 3px 0 0 var(--ds-success), 0 8px 24px rgba(17, 24, 39, .035); }
.ops-kpi.amber,
.ops-kpi.orange { box-shadow: inset 3px 0 0 var(--ds-warning), 0 8px 24px rgba(17, 24, 39, .035); }
.ops-kpi.red { box-shadow: inset 3px 0 0 var(--ds-danger), 0 8px 24px rgba(17, 24, 39, .035); }
.ops-kpi.purple { box-shadow: inset 3px 0 0 #8b5cf6, 0 8px 24px rgba(17, 24, 39, .035); }

.ops-kpi.blue > span,
.ops-kpi.green > span,
.ops-kpi.amber > span,
.ops-kpi.red > span,
.ops-kpi.orange > span,
.ops-kpi.purple > span {
  background: #f4f6fb;
}

.ops-kpi.blue > span { color: #2563eb; }
.ops-kpi.green > span { color: var(--ds-success); }
.ops-kpi.amber > span,
.ops-kpi.orange > span { color: var(--ds-warning); }
.ops-kpi.red > span { color: var(--ds-danger); }
.ops-kpi.purple > span { color: #8b5cf6; }

.ops-board {
  grid-template-columns: minmax(520px, 1.35fr) minmax(280px, .7fr) minmax(280px, .7fr);
  gap: 14px;
}

.ops-grid-4,
.ops-bottom-grid {
  gap: 14px;
}

.ops-card {
  padding: 14px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .035);
}

.ops-card-head {
  min-height: 28px;
  margin-bottom: 10px;
}

.ops-card-head h2 {
  font-size: 13px;
  letter-spacing: 0;
}

.ops-table-wrap {
  overflow-x: visible;
  border-radius: 12px;
}

.ops-table {
  min-width: 0;
}

.ops-table th,
.ops-table td {
  padding: 11px 10px;
  overflow-wrap: normal;
  word-break: normal;
}

.ops-table th {
  font-size: 11px;
}

.ops-table td {
  font-size: 13px;
}

.verification-card footer {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.verification-card footer span,
.verification-card footer small {
  white-space: nowrap;
}

.verification-card footer b {
  font-weight: 900;
}

.ops-list article,
.activity-compact article {
  padding: 11px 0;
}

.bed-status-grid,
.housekeeping-grid,
.payment-summary {
  gap: 8px;
}

.bed-status,
.housekeeping-grid a,
.payment-summary a,
.quick-action-grid a {
  min-height: 64px;
  border-radius: 11px;
  background: #fff;
}

.bed-status.green,
.bed-status.blue,
.bed-status.amber,
.bed-status.red,
.bed-status.purple,
.housekeeping-grid .green,
.housekeeping-grid .amber,
.housekeeping-grid .red,
.housekeeping-grid .purple,
.payment-summary .green,
.payment-summary .amber,
.payment-summary .red {
  background: #fff;
  border-color: #e5e7eb;
}

.bed-status.green,
.housekeeping-grid .green,
.payment-summary .green { color: var(--ds-success); }
.bed-status.blue { color: #2563eb; }
.bed-status.amber,
.housekeeping-grid .amber,
.payment-summary .amber { color: var(--ds-warning); }
.bed-status.red,
.housekeeping-grid .red,
.payment-summary .red { color: var(--ds-danger); }
.bed-status.purple,
.housekeeping-grid .purple { color: #8b5cf6; }

.bed-status span,
.housekeeping-grid span,
.payment-summary span,
.quick-action-grid span {
  color: #6b7280;
}

.stock-control-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.stock-control-list article > span {
  display: none;
}

.stock-control-list small {
  color: #6b7280;
}

.ticket-list article {
  grid-template-columns: minmax(90px, .65fr) minmax(0, 1fr) auto;
}

.ticket-list article small {
  display: none;
}

.quick-action-grid {
  gap: 10px;
}

.quick-action-grid a {
  min-height: 74px;
  padding: 10px;
}

@media (max-width: 1500px) {
  .ops-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ops-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-table-wrap {
    overflow-x: auto;
  }

  .ops-table {
    min-width: 660px;
  }
}

@media (max-width: 560px) {
  .ops-kpi-strip {
    grid-template-columns: 1fr;
  }
}

/* Premium SaaS dashboard composition */
.content {
  padding-top: 26px;
}

.side-nav a.active {
  background: var(--ds-primary);
  color: #fff;
  box-shadow: 0 14px 30px rgba(11, 15, 138, .18);
}

.side-nav a.active .lucide {
  color: #fff;
}

.side-property-select {
  background: #fff;
}

.ops-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.ops-heading::after {
  content: "Live";
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #08743e;
  font-size: 12px;
  font-weight: 900;
}

.ops-heading .section-kicker {
  display: none;
}

.ops-heading h1 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: clamp(26px, 2vw, 32px);
  font-weight: 850;
  letter-spacing: 0;
}

.ops-heading p:last-child {
  color: #475569;
  font-size: 15px;
}

.ops-kpi-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.ops-kpi {
  min-height: 128px;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
  gap: 6px 14px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 45px rgba(15, 23, 42, .045);
}

.ops-kpi.blue,
.ops-kpi.green,
.ops-kpi.amber,
.ops-kpi.red,
.ops-kpi.orange,
.ops-kpi.purple {
  box-shadow: 0 16px 45px rgba(15, 23, 42, .045);
}

.ops-kpi > span {
  grid-row: 1 / span 3;
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.ops-kpi small {
  grid-column: 2;
  color: #111827;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
}

.ops-kpi strong {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  color: #0f172a;
  font-size: 28px;
  font-weight: 900;
}

.ops-kpi em {
  grid-column: 2;
  grid-row: 3;
  color: #475569;
  font-size: 13px;
  font-weight: 650;
}

.ops-kpi b {
  grid-column: 1 / -1;
  grid-row: 4;
  display: block;
  align-self: end;
  justify-self: start;
  width: auto;
  height: auto;
  margin-top: 8px;
  border-radius: 0;
  background: transparent;
  color: var(--ds-primary);
  font-size: 12px;
  font-weight: 900;
}

.ops-kpi.green b { color: #059669; }
.ops-kpi.amber b,
.ops-kpi.orange b { color: #ea580c; }
.ops-kpi.red b { color: #dc2626; }
.ops-kpi.purple b { color: #6d28d9; }

.ops-board {
  grid-template-columns: minmax(520px, 1.55fr) minmax(280px, .75fr) minmax(280px, .75fr);
  gap: 16px;
}

.ops-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ops-bottom-grid {
  grid-template-columns: minmax(420px, 1.1fr) minmax(320px, .85fr) minmax(390px, 1fr);
  gap: 16px;
}

.ops-card {
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 45px rgba(15, 23, 42, .04);
}

.ops-card-head {
  margin-bottom: 14px;
}

.ops-card-head h2 {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.ops-card-head a {
  color: var(--ds-primary);
}

.ops-table-wrap {
  border: 0;
  border-radius: 0;
}

.ops-table {
  table-layout: auto;
}

.ops-table th {
  padding: 10px 8px;
  border-bottom: 1px solid #e5e7eb;
  color: #64748b;
  font-size: 11px;
}

.ops-table td {
  padding: 14px 8px;
  font-size: 13px;
}

.ops-table tbody tr + tr td {
  border-top: 1px solid #eef2f7;
}

.empty {
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  color: #64748b;
}

.pill {
  min-height: 24px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
}

.review-button {
  min-height: 34px;
  padding: 8px 12px;
  background: #eef2ff;
  color: var(--ds-primary);
}

.ops-list article {
  grid-template-columns: minmax(0, 1fr) 76px auto;
}

.ops-list time {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-weight: 700;
}

.ops-list article > div {
  grid-column: 1;
  grid-row: 1;
}

.ops-list .pill {
  grid-column: 3;
  grid-row: 1;
}

.bed-status-grid,
.housekeeping-grid {
  gap: 10px;
}

.bed-status,
.housekeeping-grid a,
.payment-summary a,
.quick-action-grid a {
  min-height: 78px;
  border-radius: 12px;
}

.stock-control-list {
  gap: 13px;
}

.stock-control-list article {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.stock-control-list b {
  margin-bottom: 6px;
}

.stock-control-list meter {
  height: 7px;
}

.maintenance-summary {
  display: grid;
  gap: 0;
}

.maintenance-summary article {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border-bottom: 1px solid #eef2f7;
}

.maintenance-summary article:last-child {
  border-bottom: 0;
}

.maintenance-summary b {
  color: #111827;
  font-size: 13px;
  font-weight: 850;
}

.maintenance-summary strong {
  color: #0f172a;
  font-weight: 900;
}

.priority-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.priority-dot.high { background: #ef4444; }
.priority-dot.medium { background: #f59e0b; }
.priority-dot.low { background: #22c55e; }
.priority-dot.done { background: #0b0f8a; }

.payment-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payment-summary .blue {
  color: var(--ds-primary);
}

.quick-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-action-grid a {
  min-height: 82px;
  color: var(--ds-primary);
}

.quick-action-grid span {
  color: #334155;
  font-size: 12px;
}

@media (max-width: 1500px) {
  .ops-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .ops-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ops-heading {
    grid-template-columns: 1fr;
  }

  .ops-kpi-strip,
  .ops-grid-4,
  .payment-summary,
  .quick-action-grid {
    grid-template-columns: 1fr;
  }
}

/* Dormer command dashboard: attention-first operations layout */
.command-dashboard {
  display: grid;
  gap: 18px;
}

.command-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.command-header h1 {
  margin: 0 0 6px;
  color: #111827;
  font-size: clamp(26px, 2vw, 32px);
  line-height: 1.05;
  font-weight: 850;
}

.command-header p {
  color: #6b7280;
  font-size: 15px;
  line-height: 1.45;
}

.command-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #08743e;
  font-size: 12px;
  font-weight: 900;
}

.command-live i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
}

.command-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.command-kpi {
  min-height: 116px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 4px 12px;
  align-content: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .045);
  color: #111827;
  text-decoration: none;
}

.command-kpi .lucide {
  grid-row: 1 / span 3;
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 13px;
  background: #f4f6fb;
}

.command-kpi span {
  color: #111827;
  font-size: 12px;
  font-weight: 850;
}

.command-kpi strong {
  color: #111827;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
}

.command-kpi small {
  color: #6b7280;
  font-size: 12px;
  font-weight: 750;
}

.command-kpi.blue .lucide { color: #2563eb; background: #eff6ff; }
.command-kpi.green .lucide { color: #16a34a; background: #f0fdf4; }
.command-kpi.orange .lucide { color: #f97316; background: #fff7ed; }
.command-kpi.purple .lucide { color: #7c3aed; background: #f5f3ff; }
.command-kpi.red .lucide { color: #ef4444; background: #fef2f2; }
.command-kpi.amber .lucide { color: #d97706; background: #fffbeb; }

.command-section {
  display: grid;
  gap: 10px;
}

.command-section-title h2 {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}

.today-operations-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.45fr) minmax(280px, .75fr) minmax(280px, .75fr);
  gap: 16px;
  align-items: stretch;
}

.property-ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.command-lower-grid {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(280px, .7fr) minmax(360px, 1fr);
  gap: 16px;
}

.command-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .04);
}

.command-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.command-card-head h3 {
  color: #111827;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
}

.command-card-head a {
  color: #1a1f8a;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.command-table {
  display: grid;
  gap: 0;
}

.command-table-head,
.command-table-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) 90px 100px 110px 70px 90px;
  gap: 10px;
  align-items: center;
}

.command-table-head {
  padding: 0 0 10px;
  border-bottom: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.command-table-row {
  min-height: 58px;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7;
  color: #111827;
  font-size: 13px;
  font-weight: 750;
}

.command-table-row:last-child {
  border-bottom: 0;
}

.command-list,
.room-task-list,
.maintenance-task-list,
.activity-timeline {
  display: grid;
  gap: 0;
}

.command-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid #eef2f7;
}

.command-list article:last-child {
  border-bottom: 0;
}

.command-list b,
.room-task-list b,
.maintenance-task-list b,
.activity-timeline b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
}

.command-list small,
.room-task-list span,
.room-task-list small,
.maintenance-task-list span,
.maintenance-task-list small,
.activity-timeline span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.command-list time,
.activity-timeline time {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.command-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed #dfe4ee;
  border-radius: 12px;
  color: #6b7280;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.status-dot-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.status-dot-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.status-dot-label.good { color: #16a34a; }
.status-dot-label.warn { color: #f59e0b; }

.housekeeping-summary,
.inventory-metrics,
.bed-status-compact,
.revenue-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.housekeeping-summary span,
.inventory-metrics span,
.bed-status-compact span,
.revenue-list span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 750;
}

.housekeeping-summary b,
.inventory-metrics b,
.bed-status-compact b,
.revenue-list b {
  color: #111827;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

.room-task-list article,
.maintenance-task-list article {
  display: grid;
  grid-template-columns: minmax(82px, .45fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid #eef2f7;
}

.room-task-list article:last-child,
.maintenance-task-list article:last-child {
  border-bottom: 0;
}

.maintenance-task-list article {
  grid-template-columns: minmax(105px, .6fr) minmax(0, 1fr) auto auto;
}

.maintenance-task-list em {
  padding: 5px 8px;
  border-radius: 8px;
  background: #fff7ed;
  color: #ea580c;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.health-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.health-score strong {
  color: #111827;
  font-size: 28px;
  font-weight: 900;
}

.health-score span {
  color: #6b7280;
  font-size: 13px;
  font-weight: 800;
}

.stock-control-list.compact {
  gap: 10px;
}

.stock-control-list.compact article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.occupancy-widget {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.occupancy-widget strong {
  color: #111827;
  font-size: 18px;
  font-weight: 900;
}

.occupancy-widget span {
  color: #6b7280;
  font-size: 13px;
  font-weight: 800;
}

.occupancy-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.occupancy-bar i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: #1a1f8a;
}

.revenue-list {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.activity-timeline article {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-height: 44px;
  border-bottom: 1px solid #eef2f7;
}

.activity-timeline article:last-child {
  border-bottom: 0;
}

.activity-timeline article > i {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 5px #dcfce7;
}

@media (max-width: 1500px) {
  .command-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .today-operations-grid,
  .property-ops-grid,
  .command-lower-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .command-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-table-head {
    display: none;
  }

  .command-table-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding: 12px 0;
  }

  .command-table-row > span:first-child,
  .command-table-row > span:last-child {
    grid-column: 1 / -1;
  }

  .command-table-row > span:last-child {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .command-header {
    display: grid;
  }

  .command-kpis,
  .housekeeping-summary,
  .inventory-metrics,
  .bed-status-compact {
    grid-template-columns: 1fr;
  }

  .command-list article,
  .room-task-list article,
  .maintenance-task-list article,
  .activity-timeline article {
    grid-template-columns: 1fr;
  }
}

/* Guest CRM module */
.guest-crm,
.guest-profile-shell {
  display: grid;
  gap: 18px;
}

.guest-crm-header,
.guest-profile-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.guest-crm-header h1,
.guest-profile-header h1 {
  margin: 0 0 6px;
  color: #111827;
  font-size: clamp(26px, 2vw, 32px);
  line-height: 1.05;
  font-weight: 850;
}

.guest-crm-header p,
.guest-profile-header p {
  max-width: 760px;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.45;
}

.guest-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.guest-kpis article {
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .04);
}

.guest-kpis small {
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.guest-kpis strong {
  color: #111827;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
}

.guest-kpis span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 750;
}

.guest-command-bar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(150px, auto) minmax(150px, auto) 150px 150px auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .035);
}

.guest-search {
  position: relative;
}

.guest-search .lucide {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #1a1f8a;
}

.guest-command-bar input,
.guest-command-bar select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  font-weight: 750;
}

.guest-search input {
  padding-left: 42px;
}

.guest-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.guest-crm-card,
.guest-empty-state,
.guest-identity-panel,
.guest-profile-card,
.guest-timeline-panel {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .04);
}

.guest-crm-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.guest-card-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.guest-photo,
.guest-profile-photo {
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #eef2ff;
  color: #1a1f8a;
  font-weight: 900;
}

.guest-photo {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.guest-card-main h2 {
  margin: 0 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 17px;
  font-weight: 900;
}

.guest-card-main p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6b7280;
  font-size: 13px;
  font-weight: 750;
}

.guest-card-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.guest-card-facts div {
  min-height: 58px;
  padding: 10px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
}

.guest-card-facts dt {
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.guest-card-facts dd {
  margin: 4px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 13px;
  font-weight: 850;
}

.guest-tags,
.guest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.guest-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.guest-tag.good { background: #dcfce7; color: #08743e; }
.guest-tag.danger { background: #fee2e2; color: #b91c1c; }
.guest-tag.neutral { background: #f1f5f9; color: #475569; }
.guest-tag.info { background: #dbeafe; color: #1e40af; }
.guest-tag.payment { background: #fef9c3; color: #854d0e; }

.guest-actions {
  padding-top: 2px;
}

.guest-actions a {
  color: #1a1f8a;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.guest-actions .review-button {
  color: #1a1f8a;
}

.guest-empty-state {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 32px;
  text-align: center;
}

.guest-empty-state .lucide {
  width: 36px;
  height: 36px;
  color: #1a1f8a;
}

.guest-profile-header {
  justify-content: flex-start;
  align-items: center;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1a1f8a;
  font-weight: 900;
  text-decoration: none;
}

.back-link .lucide {
  width: 18px;
  height: 18px;
}

.guest-profile-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(260px, 340px);
  gap: 16px;
  align-items: start;
}

.guest-identity-panel,
.guest-timeline-panel,
.guest-profile-card {
  padding: 16px;
}

.guest-identity-panel {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.guest-profile-photo {
  width: 78px;
  height: 78px;
  font-size: 28px;
}

.guest-identity-panel h2 {
  margin: 0;
  color: #111827;
  font-size: 22px;
  font-weight: 900;
}

.guest-identity-panel p {
  margin: 0;
  color: #6b7280;
  font-weight: 800;
}

.guest-identity-panel dl {
  width: 100%;
  display: grid;
  gap: 10px;
}

.guest-identity-panel dl div {
  display: grid;
  gap: 3px;
}

.guest-identity-panel dt {
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.guest-identity-panel dd {
  margin: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

.guest-profile-main {
  display: grid;
  gap: 16px;
}

.profile-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-card-head h2 {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-card-head a,
.profile-card-head span {
  color: #1a1f8a;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.current-stay-grid,
.verification-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.current-stay-grid div,
.verification-grid span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
}

.current-stay-grid span {
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.current-stay-grid b {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

.verification-grid span {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  color: #b45309;
  font-weight: 900;
}

.verification-grid span.good {
  color: #08743e;
}

.verification-grid .lucide {
  width: 20px;
  height: 20px;
}

.document-grid,
.history-table {
  display: grid;
  gap: 8px;
}

.document-grid article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
}

.document-grid .lucide {
  width: 22px;
  height: 22px;
  color: #1a1f8a;
}

.document-grid b,
.document-grid span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-grid b {
  color: #111827;
  font-size: 13px;
  font-weight: 900;
}

.document-grid span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 750;
}

.document-grid a {
  color: #1a1f8a;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.history-head,
.history-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}

.history-head {
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.history-row {
  min-height: 42px;
  border-top: 1px solid #eef2f7;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

.guest-timeline-panel {
  position: sticky;
  top: 96px;
}

@media (max-width: 1500px) {
  .guest-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guest-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guest-profile-grid {
    grid-template-columns: 1fr;
  }

  .guest-timeline-panel {
    position: static;
  }
}

@media (max-width: 1000px) {
  .guest-command-bar {
    grid-template-columns: 1fr 1fr;
  }

  .guest-search,
  .guest-command-bar button {
    grid-column: 1 / -1;
  }

  .current-stay-grid,
  .verification-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .guest-crm-header,
  .guest-profile-header {
    display: grid;
  }

  .guest-kpis,
  .guest-card-grid,
  .guest-command-bar,
  .guest-card-facts,
  .current-stay-grid,
  .verification-grid {
    grid-template-columns: 1fr;
  }

  .document-grid article,
  .history-head,
  .history-row {
    grid-template-columns: 1fr;
  }
}

/* Enterprise inventory control center */
.inventory-center,
.inventory-item-profile {
  display: grid;
  gap: 18px;
}

.inventory-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.inventory-header h1 {
  margin: 0 0 6px;
  color: #111827;
  font-size: clamp(26px, 2vw, 32px);
  line-height: 1.05;
  font-weight: 850;
}

.inventory-header p {
  max-width: 780px;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.45;
}

.inventory-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.inventory-kpis article,
.inventory-category-grid article,
.inventory-profile-metrics article {
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .04);
}

.inventory-kpis small,
.inventory-category-grid small,
.inventory-profile-metrics small {
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.inventory-kpis strong,
.inventory-category-grid strong,
.inventory-profile-metrics strong {
  color: #111827;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}

.inventory-kpis span,
.inventory-category-grid span,
.inventory-profile-metrics span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 750;
}

.inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(320px, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .035);
}

.inventory-search {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 180px auto;
  gap: 10px;
  align-items: center;
  position: relative;
}

.inventory-search > .lucide {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #1a1f8a;
}

.inventory-search input,
.inventory-search select {
  min-height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  font-weight: 750;
}

.inventory-search input {
  padding-left: 42px;
}

.inventory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Quick date-range links on report pages (This month / Last month / …) */
.report-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f8f9fc;
  color: #1a1f8a;
  font-size: 12.5px;
  font-weight: 700;
}

.chip-link:hover { background: #eeecfd; border-color: #d7d9fb; }
.chip-link.active { background: #1a1f8a; border-color: #1a1f8a; color: #fff; }

/* ─── Toggle switch (loyalty booking-source rules, etc.) ─── */
.toggle-switch-form { display: inline-flex; }
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: #d1d5db;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease;
  flex-shrink: 0;
}
.toggle-switch.is-on { background: #22c55e; }
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.toggle-switch.is-on::after { transform: translateX(18px); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line, #eef0fb); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row-label { font-weight: 800; }
.toggle-row-sub { color: var(--muted, #64748b); font-size: 12.5px; margin-top: 2px; }

/* ═══ Inventory dashboard Phase-2 redesign ═══ */
.inventory-stat-grid { margin-bottom: 14px; }

.inventory-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.inventory-filterbar .inventory-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 420px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.inventory-filterbar .inventory-search input[name="q"] { flex: 1 1 240px; width: auto; }
.inventory-filterbar .inventory-search select {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
  padding: 0 12px;
}

/* Overflow "Actions" dropdown (used in header/filter bars, never inside a scroll container) */
.menu-dropdown { position: relative; }
.menu-dropdown > summary { list-style: none; cursor: pointer; }
.menu-dropdown > summary::-webkit-details-marker { display: none; }

.menu-dropdown-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 210px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  box-shadow: 0 18px 44px rgba(17, 24, 39, .12);
}

.menu-dropdown-panel a,
.menu-dropdown-panel button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.menu-dropdown-panel a:hover,
.menu-dropdown-panel button:hover {
  background: color-mix(in srgb, var(--ds-primary) 8%, transparent);
  color: var(--ds-primary);
}

.menu-dropdown-panel .lucide { width: 16px; height: 16px; }
.menu-dropdown-panel form { display: contents; }

/* Product cell (image + name) inside a pms-table */
.prod-cell { display: flex; align-items: center; gap: 10px; }
.prod-cell img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  background: #f1f3fb;
  flex-shrink: 0;
}
.prod-cell a { display: grid; line-height: 1.2; }
.prod-cell a b { color: var(--ds-text); font-weight: 800; }
.prod-cell a small { color: var(--ds-muted); font-size: 11px; }
.muted-note { color: var(--ds-muted); font-size: 11px; font-weight: 700; }

/* Compact icon row actions */
.table-icon-actions { display: inline-flex; gap: 4px; }
.table-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  cursor: pointer;
  transition: all .15s;
}
.table-icon-btn:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
  background: color-mix(in srgb, var(--ds-primary) 7%, transparent);
}
.table-icon-btn .lucide { width: 15px; height: 15px; }

/* Collapsible "Insights & analytics" section */
.inventory-more {
  margin-top: 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}
.inventory-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 850;
  color: var(--ds-text);
  list-style: none;
}
.inventory-more > summary::-webkit-details-marker { display: none; }
.inventory-more > summary > span { display: inline-flex; align-items: center; gap: 8px; }
.inventory-more > summary .lucide { width: 17px; height: 17px; color: var(--ds-muted); }
.inventory-more > summary .chev { transition: transform .15s; }
.inventory-more[open] > summary .chev { transform: rotate(180deg); }
.inventory-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  padding: 0 16px 16px;
}
.inventory-more-wide { grid-column: 1 / -1; }

.inventory-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: start;
}

.inventory-ledger-card,
.inventory-panel,
.inventory-movement-card,
.inventory-profile-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .04);
}

.inventory-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.inventory-card-head h2 {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.inventory-card-head a,
.inventory-card-head span {
  color: #1a1f8a;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.inventory-table {
  display: grid;
  gap: 0;
}

.inventory-table-head,
.inventory-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) 120px 110px 120px 100px 90px 120px 120px 80px minmax(160px, auto);
  gap: 10px;
  align-items: center;
}

.inventory-table-head {
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.inventory-row {
  min-height: 62px;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7;
  color: #111827;
  font-size: 13px;
  font-weight: 750;
}

.inventory-row:last-child {
  border-bottom: 0;
}

.inventory-row code {
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  background: transparent;
}

.inventory-item-cell {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 10px;
  align-items: center;
}

.inventory-item-cell .lucide {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 10px;
  background: #fff7ed;
  color: #f59e0b;
}

.inventory-item-cell b,
.inventory-item-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-item-cell small {
  color: #6b7280;
  font-size: 12px;
}

.inventory-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inventory-row-actions a,
.inventory-row-actions button {
  min-height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 5px 8px;
  background: #fff;
  color: #1a1f8a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.inventory-row-actions .primary-action {
  border-color: #1a1f8a;
  background: #1a1f8a;
  color: #fff;
}

.inventory-row-actions form {
  margin: 0;
}

.guest-tag.warn {
  background: #ffedd5;
  color: #b45309;
}

.inventory-insights {
  display: grid;
  gap: 16px;
}

.inventory-signal-list,
.inventory-value-list {
  display: grid;
  gap: 8px;
}

.inventory-signal-list span,
.inventory-value-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f7;
  color: #111827;
  font-size: 13px;
  font-weight: 850;
}

.inventory-signal-list span:last-child,
.inventory-value-list span:last-child {
  border-bottom: 0;
}

.inventory-signal-list b {
  color: #1a1f8a;
}

.inventory-value-list strong {
  color: #111827;
  font-weight: 900;
}

.inventory-category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.inventory-category-grid article h3 {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

.inventory-movement-card {
  display: grid;
}

.movement-list {
  display: grid;
  gap: 0;
}

.movement-list article {
  display: grid;
  grid-template-columns: 120px minmax(160px, 1fr) 110px 120px 130px;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid #eef2f7;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

.movement-list article:last-child {
  border-bottom: 0;
}

.movement-type {
  display: inline-flex;
  width: fit-content;
  padding: 5px 8px;
  border-radius: 8px;
  background: #eef2ff;
  color: #1a1f8a;
  font-size: 11px;
  font-weight: 900;
}

.inventory-profile-grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 340px);
  gap: 16px;
  align-items: start;
}

.item-barcode-block {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed #cfd5e3;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}

.item-barcode-block .lucide {
  width: 72px;
  height: 72px;
  color: #1a1f8a;
}

.item-barcode-block strong {
  color: #111827;
  font-size: 18px;
  font-weight: 900;
}

.item-barcode-block span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 850;
}

.inventory-profile-card dl {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.inventory-profile-card dl div {
  display: grid;
  gap: 3px;
}

.inventory-profile-card dt {
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.inventory-profile-card dd {
  margin: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 850;
}

.inventory-label-actions {
  display: grid;
  gap: 8px;
}

.inventory-profile-main {
  display: grid;
  gap: 16px;
}

.inventory-profile-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.movement-list.profile article {
  grid-template-columns: 120px 100px minmax(140px, 1fr) 120px 130px;
}

@media (max-width: 1600px) {
  .inventory-kpis,
  .inventory-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inventory-workspace,
  .inventory-profile-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .inventory-search {
    grid-template-columns: 1fr;
  }

  .inventory-search > .lucide {
    top: 21px;
    transform: none;
  }

  .inventory-table-head {
    display: none;
  }

  .inventory-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 14px 0;
  }

  .inventory-row > span:first-child,
  .inventory-row-actions {
    grid-column: 1 / -1;
  }

  .movement-list article,
  .movement-list.profile article {
    grid-template-columns: 1fr 1fr;
  }

  .inventory-profile-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .inventory-header {
    display: grid;
  }

  .inventory-kpis,
  .inventory-category-grid,
  .inventory-row,
  .movement-list article,
  .movement-list.profile article,
  .inventory-profile-metrics {
    grid-template-columns: 1fr;
  }
}

/* Convenience-store inventory module */
.convenience-inventory .inventory-header {
  padding: 4px 0 2px;
}

.inventory-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.convenience-inventory .inventory-kpis article {
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(11, 15, 138, .055);
}

.convenience-inventory .inventory-toolbar,
.convenience-inventory .inventory-ledger-card,
.convenience-inventory .inventory-panel,
.convenience-inventory .inventory-movement-card,
.convenience-inventory .inventory-profile-card {
  border-radius: 16px;
}

.convenience-inventory .inventory-search {
  grid-template-columns: minmax(260px, 1fr) 190px 170px auto;
}

.convenience-inventory .inventory-actions {
  justify-content: flex-end;
}

.convenience-inventory .inventory-workspace {
  grid-template-columns: 1fr;
}

.convenience-inventory .inventory-insights {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.product-ledger {
  overflow: hidden;
}

.product-table .inventory-table-head,
.product-table .inventory-row {
  grid-template-columns:
    minmax(220px, 1.35fr)
    minmax(130px, .8fr)
    minmax(116px, .65fr)
    minmax(108px, .62fr)
    minmax(104px, .62fr)
    minmax(130px, .75fr)
    minmax(82px, .5fr)
    minmax(128px, .72fr)
    minmax(320px, 1.35fr);
}

.inventory-product-cell {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0 12px;
  align-items: center;
  min-width: 0;
}

.inventory-product-cell img,
.inventory-product-cell .lucide {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.inventory-product-cell img {
  object-fit: cover;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.inventory-product-cell .lucide {
  padding: 10px;
  background: #fff7ed;
  color: #f59e0b;
}

.inventory-product-cell b,
.inventory-product-cell small,
.product-table .inventory-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-product-cell b,
.inventory-product-cell small {
  white-space: nowrap;
}

.inventory-product-cell small {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.stock-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.stock-status.healthy {
  background: #dcfce7;
  color: #15803d;
}

.stock-status.low {
  background: #ffedd5;
  color: #c2410c;
}

.stock-status.out {
  background: #fee2e2;
  color: #b91c1c;
}

.stock-status.archived {
  background: #f3f4f6;
  color: #4b5563;
}

.supplier-list {
  display: grid;
  gap: 10px;
}

.supplier-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
}

.supplier-list b,
.supplier-list small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-list small,
.supplier-list span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.supplier-list a {
  color: #1a1f8a;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.analytics-list span {
  align-items: flex-start;
}

.analytics-list strong {
  max-width: 150px;
  text-align: right;
}

.product-photo-panel {
  display: grid;
  place-items: center;
  min-height: 180px;
  margin-bottom: 14px;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  background: #f8fafc;
}

.product-photo-panel img {
  width: 100%;
  max-height: 210px;
  object-fit: contain;
  border-radius: 14px;
}

.product-photo-panel .lucide {
  width: 72px;
  height: 72px;
  color: #f59e0b;
}

.barcode-dialog {
  width: min(560px, calc(100vw - 28px));
  border: 0;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.barcode-dialog::backdrop {
  background: rgba(15, 23, 42, .36);
}

.barcode-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: #fff;
}

.barcode-camera {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f8fafc;
}

.barcode-camera video {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.barcode-camera div {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}

.barcode-camera .lucide {
  width: 44px;
  height: 44px;
  color: #1a1f8a;
}

.barcode-card label,
.purchase-form label,
.movement-form label {
  display: grid;
  gap: 6px;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
}

.barcode-card input,
.purchase-form input,
.purchase-form select,
.movement-form input,
.movement-form select,
.movement-form textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.purchase-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 16px;
  align-items: start;
}

.purchase-meta,
.purchase-line-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.purchase-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.import-preview-table {
  display: grid;
  gap: 0;
}

.import-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.import-summary-strip article {
  min-height: 72px;
  padding: 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fafbfd;
}

.import-summary-strip small {
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.import-summary-strip strong {
  display: block;
  margin-top: 6px;
  color: #111827;
  font-size: 22px;
  font-weight: 900;
}

.import-preview-head,
.import-preview-table article {
  display: grid;
  grid-template-columns: 70px minmax(180px, 1fr) 140px 140px 160px minmax(220px, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid #eef2f7;
  font-size: 13px;
  font-weight: 800;
}

.import-preview-head {
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.import-preview-table article.has-errors {
  color: #991b1b;
  background: #fef2f2;
}

.import-confirm-form {
  margin-top: 14px;
}

.movement-list.mini article {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

/* ═══════════════════════════════════════════════════
   Invoice — Professional Purchase Bill
   ═══════════════════════════════════════════════════ */

.invoice {
  display: grid;
  gap: 0;
  max-width: 800px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

/* ── Header ── */
.invoice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 32px 24px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
}

.invoice-brand {
  display: grid;
  gap: 4px;
}

.invoice-company {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

.invoice-address {
  font-size: 12.5px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.5;
  max-width: 260px;
  margin: 0;
}

.invoice-tagline {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin: 4px 0 0;
}

.invoice-title-block {
  display: grid;
  gap: 6px;
  text-align: right;
}

.invoice-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 6px;
  background: rgba(99, 102, 241, .2);
  color: #a5b4fc;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  justify-self: end;
}

.invoice-number {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  word-break: break-all;
  max-width: 260px;
}

/* ── Meta ── */
.invoice-meta {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 32px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
}

.invoice-meta-group {
  display: grid;
  gap: 12px;
}

.invoice-meta-item {
  display: grid;
  gap: 2px;
}

.invoice-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
}

.invoice-value {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

/* ── Table ── */
.invoice-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.invoice-table thead {
  background: #f8fafc;
}

.invoice-table th {
  padding: 12px 16px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  border-bottom: 2px solid #e2e8f0;
  text-align: left;
}

.invoice-table td {
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
}

.invoice-table tbody tr:last-child td {
  border-bottom: none;
}

.invoice-table tbody tr:nth-child(even) {
  background: #fafbfc;
}

.invoice-table .col-num {
  width: 48px;
  text-align: center;
  color: #94a3b8;
  font-weight: 700;
}

.invoice-table .col-product {
  font-weight: 700;
  color: #1e293b;
}

.invoice-table .col-qty {
  width: 80px;
  text-align: center;
}

.invoice-table .col-price,
.invoice-table .col-total {
  width: 110px;
  text-align: right;
}

.invoice-table th.col-qty {
  text-align: center;
}

.invoice-table th.col-price,
.invoice-table th.col-total {
  text-align: right;
}

/* ── Totals ── */
.invoice-totals {
  display: flex;
  justify-content: flex-end;
  padding: 20px 32px 24px;
  border-top: 1px solid #e2e8f0;
}

.invoice-totals-inner {
  display: grid;
  gap: 8px;
  min-width: 240px;
}

.invoice-totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  font-size: 13.5px;
  font-weight: 600;
  color: #64748b;
}

.invoice-totals-row span:last-child {
  font-weight: 700;
  color: #334155;
}

.invoice-totals-row.discount span:last-child {
  color: #dc2626;
}

.invoice-totals-row.grand-total {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 2px solid #1e293b;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
}

.invoice-totals-row.grand-total span:last-child {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
}

/* ── Payment ── */
.invoice-payment {
  display: flex;
  justify-content: center;
  padding: 0 32px 24px;
}

.invoice-payment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.invoice-payment-chip.collected {
  background: #ecfdf5;
  color: #059669;
}

.invoice-payment-chip.pending {
  background: #fefce8;
  color: #ca8a04;
}

.invoice-payment-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

/* ── Footer ── */
.invoice-footer {
  padding: 20px 32px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
  text-align: center;
}

.invoice-footer p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.invoice-footer-note {
  margin-top: 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
}

@media (max-width: 1400px) {
  .product-table .inventory-table-head,
  .product-table .inventory-row {
    grid-template-columns:
      minmax(210px, 1.2fr)
      minmax(112px, .7fr)
      minmax(106px, .6fr)
      minmax(96px, .55fr)
      minmax(96px, .55fr)
      minmax(120px, .65fr)
      minmax(76px, .45fr)
      minmax(124px, .7fr)
      minmax(300px, 1.15fr);
  }
}

@media (max-width: 1100px) {
  .convenience-inventory .inventory-search {
    grid-template-columns: 1fr;
  }

  .product-table .inventory-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-table .inventory-row > span:first-child,
  .product-table .inventory-row-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .inventory-header-actions,
  .convenience-inventory .inventory-actions {
    justify-content: stretch;
  }

  .inventory-header-actions .button,
  .convenience-inventory .inventory-actions .button {
    width: 100%;
  }

  .product-table .inventory-row,
  .supplier-list article {
    grid-template-columns: 1fr;
  }

  .analytics-list strong {
    max-width: none;
    text-align: left;
  }

  .purchase-workspace,
  .purchase-meta,
  .purchase-line-grid,
  .import-summary-strip,
  .import-preview-head,
  .import-preview-table article {
    grid-template-columns: 1fr;
  }

  .invoice-header {
    flex-direction: column;
  }

  .invoice-title-block {
    text-align: left;
  }

  .invoice-badge {
    justify-self: start;
  }

  .invoice-meta {
    flex-direction: column;
    gap: 20px;
  }

  .invoice-table .col-num {
    display: none;
  }

  .invoice-table th.col-num {
    display: none;
  }

  .invoice-totals {
    padding: 20px 24px 24px;
  }

  .invoice-totals-inner {
    min-width: 100%;
  }
}


/* ═══════════════════════════════════════════════════
   POS — Guest Purchase Point-of-Sale Interface
   ═══════════════════════════════════════════════════ */

.pos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.pos-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

/* ─── Top bar: Barcode | Search | Quick Actions ─── */
/* ═══ POS Phase-1 redesign: slim control bar replaces the 3 top cards ═══ */
.pos-controlbar {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
}

.pos-control-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.pos-scan-field,
.pos-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.pos-scan-field > .lucide,
.pos-search-field > .lucide {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--ds-muted);
  pointer-events: none;
}

.pos-scan-field > .lucide { color: var(--ds-primary); }

.pos-control-input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 14px;
  font-weight: 700;
  transition: border-color .15s, box-shadow .15s;
}

/* Scan field is the primary POS entry — subtle primary tint so it reads as "start here" */
.pos-scan-field .pos-control-input {
  border-color: color-mix(in srgb, var(--ds-primary) 35%, var(--ds-border));
  background: color-mix(in srgb, var(--ds-primary) 3%, var(--ds-surface));
}

.pos-control-input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(11, 15, 138, .08);
}

/* Payment: single unified 2×2 grid (Cash / UPI / Card / Room Bill) */
.pos-payment-grid.four {
  grid-template-columns: 1fr 1fr;
}

/* Product grid empty / unavailable states (design-system classes, no inline hex) */
.pos-unavailable {
  color: var(--ds-danger);
  font-size: 11px;
  font-weight: 800;
}

.pos-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px;
  color: var(--ds-muted);
  font-weight: 750;
}

.pos-grid-empty a { color: var(--ds-primary); font-weight: 900; }

.pos-discount-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Recent transactions collapsed into a de-emphasized disclosure */
.pos-recent {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  overflow: hidden;
}

.pos-recent > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 850;
  color: var(--ds-text);
  list-style: none;
}

.pos-recent > summary::-webkit-details-marker { display: none; }
.pos-recent > summary > span { display: inline-flex; align-items: center; gap: 8px; }
.pos-recent > summary .lucide { width: 16px; height: 16px; color: var(--ds-muted); }
.pos-recent > summary a { font-size: 12px; font-weight: 800; color: var(--ds-primary); }
.pos-recent[open] > summary { border-bottom: 1px solid var(--ds-border); }
.pos-recent .pos-txn-table { padding: 8px; }

.pos-txn-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 750;
}

.pos-top-bar {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 14px;
}

.pos-barcode-card,
.pos-search-card,
.pos-quick-card {
  padding: 18px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
}

.pos-barcode-card {
  display: grid;
  gap: 12px;
}

.pos-barcode-card h3,
.pos-search-card h3,
.pos-quick-card h3 {
  margin: 0;
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.pos-barcode-body {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pos-barcode-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #eef0ff;
  color: var(--ds-primary);
}

.pos-barcode-icon .lucide {
  width: 28px;
  height: 28px;
}

.pos-barcode-body > div {
  flex: 1;
  display: grid;
  gap: 6px;
}

.pos-barcode-body p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 750;
}

.pos-barcode-input {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 700;
  transition: border-color .15s;
}

.pos-barcode-input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(11, 15, 138, .08);
}

.pos-barcode-hint {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 750;
}

/* ─── Search panel ─── */
.pos-search-card {
  display: grid;
  gap: 12px;
}

.pos-search-wrap {
  position: relative;
}

.pos-search-wrap .lucide {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ds-muted);
  pointer-events: none;
}

.pos-search-input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 700;
  transition: border-color .15s;
}

.pos-search-input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(11, 15, 138, .08);
}

/* ─── Category pills ─── */
.pos-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pos-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.pos-pill:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.pos-pill.active {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}

/* ─── Quick actions ─── */
.pos-quick-card {
  display: grid;
  gap: 12px;
}

.pos-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pos-quick-btn {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-primary);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}

.pos-quick-btn .lucide {
  width: 20px;
  height: 20px;
}

.pos-quick-btn:hover {
  background: #eef0ff;
  border-color: var(--ds-primary);
}

/* ─── Product grid ─── */
.pos-products-section {
  display: grid;
  gap: 14px;
}

.pos-products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pos-products-header h2 {
  margin: 0;
  color: var(--ds-text);
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.pos-product-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.pos-product-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: 0 6px 20px rgba(17, 24, 39, .03);
  transition: all .2s;
  cursor: default;
}

.pos-product-card:hover {
  border-color: rgba(11, 15, 138, .2);
  box-shadow: 0 10px 28px rgba(11, 15, 138, .07);
}

.pos-product-card.out-of-stock {
  opacity: .5;
  pointer-events: none;
}

.pos-product-img {
  display: grid;
  place-items: center;
  height: 90px;
  border-radius: var(--ds-radius-sm);
  background: #f8fafc;
  overflow: hidden;
}

.pos-product-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pos-product-img .lucide {
  width: 36px;
  height: 36px;
  color: #d1d5db;
}

.pos-product-name {
  margin: 0;
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-product-sku {
  margin: 0;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
}

.pos-product-stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
}

.pos-product-stock.healthy {
  color: #15803d;
}

.pos-product-stock.low {
  color: #c2410c;
}

.pos-product-stock.out {
  color: #b91c1c;
}

.pos-product-stock::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pos-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.pos-product-price {
  color: var(--ds-text);
  font-size: 14px;
  font-weight: 900;
}

.pos-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: var(--ds-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s;
}

.pos-add-btn:hover {
  background: #090d6e;
}

.pos-add-btn .lucide {
  width: 14px;
  height: 14px;
}

/* ─── Pagination ─── */
.pos-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 6px;
}

.pos-page-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
}

.pos-page-btn:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.pos-page-btn.active {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}

.pos-page-btn:disabled {
  opacity: .4;
  cursor: default;
}

.pos-page-btn .lucide {
  width: 16px;
  height: 16px;
}

/* ─── Cart sidebar ─── */
.pos-cart {
  position: sticky;
  top: 80px;
  display: grid;
  gap: 0;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
}

.pos-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
  margin-bottom: 12px;
}

.pos-cart-head h3 {
  margin: 0;
  color: var(--ds-text);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.pos-cart-clear {
  border: none;
  background: none;
  color: var(--ds-primary);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.pos-cart-clear:hover {
  text-decoration: underline;
}

.pos-cart-items {
  display: grid;
  gap: 0;
}

.pos-cart-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 750;
}

.pos-cart-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}

.pos-cart-item:last-child {
  border-bottom: 0;
}

.pos-cart-item-img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.pos-cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pos-cart-item-img .lucide {
  width: 18px;
  height: 18px;
  color: #d1d5db;
}

.pos-cart-item-info h4 {
  margin: 0;
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-cart-item-info span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 750;
}

.pos-cart-item-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pos-qty-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: all .12s;
}

.pos-qty-btn:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.pos-cart-qty {
  min-width: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  color: var(--ds-text);
}

.pos-cart-line-total {
  min-width: 52px;
  text-align: right;
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 900;
}

.pos-cart-remove {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: #fee2e2;
  color: #dc2626;
  cursor: pointer;
  transition: background .12s;
}

.pos-cart-remove:hover {
  background: #fecaca;
}

.pos-cart-remove .lucide {
  width: 14px;
  height: 14px;
}

/* ─── Guest linking ─── */
.pos-guest-section {
  padding: 12px 0;
  border-top: 1px solid #eef2f7;
}

.pos-guest-section label {
  display: block;
  margin-bottom: 6px;
  color: var(--ds-text);
  font-size: 12px;
  font-weight: 900;
}

.pos-guest-wrap {
  position: relative;
}

.pos-guest-input {
  width: 100%;
  min-height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 700;
}

.pos-guest-input:focus {
  outline: none;
  border-color: var(--ds-primary);
}

.pos-guest-wrap .lucide {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ds-muted);
  pointer-events: none;
}

.pos-guest-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 4px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  box-shadow: 0 12px 28px rgba(17, 24, 39, .12);
}

.pos-guest-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.pos-guest-option:hover {
  background: #f3f4ff;
}

.pos-guest-option small {
  display: block;
  color: var(--ds-muted);
  font-size: 11px;
}

.pos-selected-guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #eef0ff;
  color: var(--ds-primary);
  font-size: 12px;
  font-weight: 800;
}

.pos-selected-guest button {
  border: none;
  background: none;
  color: var(--ds-primary);
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}

/* ─── Billing summary ─── */
.pos-billing {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid #eef2f7;
}

.pos-billing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ds-text);
}

.pos-billing-row.total {
  padding-top: 8px;
  border-top: 1px solid var(--ds-border);
  font-size: 16px;
  font-weight: 900;
}

.pos-billing-row.total span:last-child {
  color: var(--ds-primary);
}

.pos-discount-input {
  width: 56px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.pos-discount-input:focus {
  outline: none;
  border-color: var(--ds-primary);
}

/* ─── Payment methods ─── */
.pos-payment-section {
  padding: 10px 0;
}

.pos-payment-section > label {
  display: block;
  margin-bottom: 8px;
  color: var(--ds-text);
  font-size: 12px;
  font-weight: 900;
}

.pos-payment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.pos-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  padding: 0 6px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
}

.pos-pay-btn .lucide {
  width: 14px;
  height: 14px;
}

.pos-pay-btn:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.pos-pay-btn.active {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}

.pos-room-bill {
  margin-top: 6px;
}

.pos-room-bill .pos-pay-btn {
  width: 100%;
}

/* ─── Notes ─── */
.pos-notes {
  padding: 8px 0;
}

.pos-notes label {
  display: block;
  margin-bottom: 6px;
  color: var(--ds-text);
  font-size: 12px;
  font-weight: 900;
}

.pos-notes textarea {
  width: 100%;
  min-height: 50px;
  padding: 8px 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 700;
  resize: vertical;
}

.pos-notes textarea:focus {
  outline: none;
  border-color: var(--ds-primary);
}

/* ─── Confirm button ─── */
.pos-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  border: none;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s;
}

.pos-confirm-btn:hover {
  background: #090d6e;
}

.pos-confirm-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.pos-confirm-btn .lucide {
  width: 18px;
  height: 18px;
}

/* ─── Recent transactions ─── */
.pos-transactions-section {
  display: grid;
  gap: 12px;
}

.pos-transactions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pos-transactions-head h2 {
  margin: 0;
  color: var(--ds-text);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.pos-transactions-head a {
  color: var(--ds-primary);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.pos-txn-table {
  width: 100%;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
  overflow: hidden;
}

.pos-txn-header,
.pos-txn-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(120px, 1fr) 80px 100px 100px minmax(160px, 1fr) 60px;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
}

.pos-txn-header {
  background: #fafbfd;
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pos-txn-row {
  border-bottom: 1px solid #f3f4f6;
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 750;
}

.pos-txn-row:last-child {
  border-bottom: 0;
}

.pos-txn-row a {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--ds-muted);
  transition: all .12s;
}

.pos-txn-row a:hover {
  background: #eef0ff;
  color: var(--ds-primary);
}

.pos-txn-row a .lucide {
  width: 16px;
  height: 16px;
}

/* ─── Toast notification ─── */
.pos-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 100;
  padding: 12px 24px;
  border-radius: 12px;
  background: #1e293b;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
  opacity: 0;
  transition: all .3s;
  pointer-events: none;
}

.pos-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.pos-toast.error {
  background: #dc2626;
}

/* ═══ POS v2 — open bills + guest-first cart ═══ */
.pos-layout { grid-template-columns: minmax(0, 1fr) 380px; }
.pos-product-card[hidden],
.pos-product-card.is-offpage { display: none; }

.pos-openbills {
  padding: 14px 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
  min-width: 0;
}
.pos-openbills-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.pos-openbills-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--ds-text);
}
.pos-openbills-head h2 .lucide { width: 18px; height: 18px; color: var(--ds-accent); }
.pos-count-badge {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff4e0;
  color: #b45309;
  font-size: 12px;
  text-align: center;
}
.pos-openbills-sum { color: var(--ds-muted); font-size: 12px; font-weight: 700; }
.pos-openbills-sum b { color: var(--ds-text); font-size: 14px; }
.pos-openbills-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}
.pos-openbills-empty { margin: 0; color: var(--ds-muted); font-size: 13px; }
.pos-openbill-card {
  flex: 0 0 250px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-accent);
  border-radius: var(--ds-radius-sm);
  background: #fffdf8;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pos-openbill-card:hover { box-shadow: 0 6px 18px rgba(17, 24, 39, .08); transform: translateY(-1px); }
.pos-openbill-card.active { border-color: var(--ds-primary); background: #eef0ff; }
.pos-openbill-card:focus-visible,
.pos-mode-btn:focus-visible,
.pos-method-btn:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.pos-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ds-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  flex: none;
}
.pos-openbill-meta,
.pos-openbill-amt,
.pos-selected-meta { display: grid; gap: 2px; min-width: 0; }
.pos-openbill-meta b,
.pos-selected-meta b {
  overflow: hidden;
  color: var(--ds-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pos-openbill-meta small,
.pos-openbill-amt small { color: var(--ds-muted); font-size: 11px; font-weight: 700; }
.pos-openbill-amt { text-align: right; }
.pos-openbill-amt b { color: #b45309; font-size: 14px; }

/* Cart sidebar: scrolling body + pinned footer */
.pos-cart {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.pos-cart-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 16px 8px;
}
.pos-cart-foot {
  flex: none;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--ds-border);
  background: #fafbfd;
}
.pos-cart-foot .pos-billing { margin: 0 0 10px; padding: 0; border: 0; background: none; }
.pos-cart-foot .pos-confirm-btn { width: 100%; margin: 0; }
.pos-confirm-btn.is-bill { background: #b45309; }
.pos-confirm-btn.is-bill:hover:not(:disabled) { background: #92400e; }

.pos-guest-section { margin-bottom: 12px; }
.pos-guest-results[hidden],
#posGuestSelected[hidden],
.pos-guest-wrap[hidden] { display: none; }
.pos-guest-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
}
.pos-guest-option > span { display: grid; gap: 2px; min-width: 0; }
.pos-guest-option.inactive b { color: var(--ds-muted); }
.pos-guest-none { margin: 0; padding: 10px 12px; color: var(--ds-muted); font-size: 12px; }
.pos-selected-guest {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
}
.pos-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.pos-chip .lucide { width: 12px; height: 12px; }
.pos-chip.room { background: #e8f7ee; color: #15803d; }
.pos-chip.muted { background: #f3f4f6; color: var(--ds-muted); }
.pos-chip.warn { background: #fff4e0; color: #b45309; }

.pos-openbill-panel {
  margin-bottom: 12px;
  border: 1px solid #fde3b5;
  border-radius: var(--ds-radius-sm);
  background: #fffaf0;
}
.pos-openbill-panel[hidden] { display: none; }
.pos-openbill-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 800;
}
.pos-openbill-panel > summary::-webkit-details-marker { display: none; }
.pos-openbill-panel > summary span { display: flex; align-items: center; gap: 6px; }
.pos-openbill-panel > summary small { color: var(--ds-muted); font-weight: 700; }
.pos-openbill-panel > summary .lucide { width: 16px; height: 16px; color: #b45309; }
.pos-openbill-panel > summary b { color: #b45309; }
.pos-openbill-rounds { display: grid; gap: 8px; max-height: 200px; overflow-y: auto; padding: 0 12px 12px; }
.pos-round { padding-top: 8px; border-top: 1px dashed #f5d9a8; }
.pos-round-head,
.pos-round-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.pos-round-head { margin-bottom: 4px; color: var(--ds-muted); font-weight: 800; }
.pos-round-line { color: var(--ds-text); font-weight: 600; }

.pos-cart-item {
  grid-template-columns: 40px minmax(0, 1fr) auto 24px;
  grid-template-areas:
    "img info info remove"
    "img ctrl total total";
  row-gap: 6px;
  align-items: center;
}
.pos-cart-item-img { grid-area: img; align-self: start; }
.pos-cart-item-info { grid-area: info; min-width: 0; }
.pos-cart-item-controls { grid-area: ctrl; }
.pos-cart-item .pos-cart-line-total { grid-area: total; justify-self: end; }
.pos-cart-item .pos-cart-remove { grid-area: remove; justify-self: end; }
.pos-cart-item-controls { gap: 4px; }
.pos-qty-btn { width: 32px; height: 32px; font-size: 16px; }
.pos-cart-qty-input {
  width: 44px;
  height: 32px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  -moz-appearance: textfield;
}
.pos-cart-qty-input::-webkit-outer-spin-button,
.pos-cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-cart-qty-input:focus { outline: 2px solid var(--ds-primary); border-color: transparent; }

.pos-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 6px;
}
.pos-mode-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 10px;
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}
.pos-mode-btn span { display: grid; gap: 1px; }
.pos-mode-btn small { color: var(--ds-muted); font-size: 11px; font-weight: 600; }
.pos-mode-btn .lucide { width: 20px; height: 20px; flex: none; }
.pos-mode-btn.active { border-color: var(--ds-primary); background: #eef0ff; color: var(--ds-primary); }
.pos-mode-btn[data-mode="bill"].active { border-color: #d97706; background: #fff7ea; color: #b45309; }
.pos-mode-btn:disabled { opacity: .45; cursor: not-allowed; }
.pos-mode-hint { margin: 0 0 8px; color: var(--ds-muted); font-size: 12px; }
.pos-mode-hint[hidden],
.pos-charge-options[hidden],
.pos-include-bill[hidden] { display: none; }

.pos-charge-options { display: grid; gap: 10px; margin-top: 8px; }
.pos-method-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  border-radius: 12px;
  background: #f1f3f8;
}
.pos-method-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.pos-method-btn .lucide { width: 16px; height: 16px; }
.pos-method-btn.active { background: var(--ds-surface); color: var(--ds-primary); box-shadow: 0 1px 4px rgba(17, 24, 39, .12); }
.pos-include-bill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7ea;
  color: #92400e;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.pos-include-bill input { width: 18px; height: 18px; accent-color: #d97706; }

details.pos-notes { margin-top: 12px; }
details.pos-notes > summary { color: var(--ds-primary); font-size: 12px; font-weight: 800; cursor: pointer; }
details.pos-notes textarea { margin-top: 8px; }

.pos-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.pos-status-pill.open { background: #fff4e0; color: #b45309; }
.pos-status-pill.paid { background: #e8f7ee; color: #15803d; }

/* Guest ticket — short code a guest quotes instead of their name */
.guest-ticket {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed #9aa3c7;
  border-radius: 6px;
  background: #f3f4ff;
  color: var(--ds-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  vertical-align: middle;
  white-space: nowrap;
}
.guest-ticket.sm { padding: 0 5px; font-size: 10px; }

/* Guest purchase bill page */
.pos-bill-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.invoice-round-row td {
  padding-top: 12px;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.invoice-open-stamp {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border: 2px dashed #d97706;
  border-radius: 12px;
  background: #fff7ea;
  color: #92400e;
}
.invoice-open-stamp strong { letter-spacing: .06em; }
.invoice-open-stamp span { font-size: 12px; }
.invoice-settled-note { margin: 8px 0 0; color: var(--ds-muted); font-size: 12px; }

/* ─── Global message toasts (Django messages framework) ─── */
.ds-toast-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 40px));
}

.ds-toast {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #1e293b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .25s, transform .25s;
  margin: 0;
}

.ds-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.ds-toast.success { background: #16a34a; }
.ds-toast.error { background: #dc2626; }
.ds-toast.warning { background: #d97706; }
.ds-toast.info, .ds-toast.debug { background: #1e293b; }

.ds-toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: .7;
}

.ds-toast-close:hover {
  opacity: 1;
}

/* ─── Partial-swap loading state (app.js [data-partial-swap]) ───
   Shown for the brief moment between a fetch() firing and the panel's
   fresh HTML landing — dims the panel and disables interaction rather
   than the whole page flashing to a blank/reloading state. */
[data-partial-swap] {
  position: relative;
}
[data-partial-swap].is-saving {
  opacity: .6;
  pointer-events: none;
  transition: opacity .15s ease;
}
[data-partial-swap].is-saving::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--ds-primary, #0b0f8a) 25%, transparent);
  border-top-color: var(--ds-primary, #0b0f8a);
  animation: ds-partial-swap-spin .6s linear infinite;
}
@keyframes ds-partial-swap-spin {
  to { transform: rotate(360deg); }
}

/* ─── Confirm dialog for data-confirm actions ─── */
.ds-confirm-modal {
  border: none;
  border-radius: 16px;
  padding: 24px;
  max-width: 380px;
  width: 90vw;
  background: var(--ds-surface, #fff);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.ds-confirm-modal::backdrop {
  background: rgba(15, 23, 42, .5);
}

.ds-confirm-modal p {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text, #1e293b);
}

.ds-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ─── Generic form fields (core/partials/form_fields.html) ─── */
.ds-form {
  display: grid;
  gap: 16px;
  max-width: 480px;
}

.ds-field {
  display: grid;
  gap: 6px;
}

.ds-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  .ds-field-row {
    grid-template-columns: 1fr;
  }
}

.ds-field label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ds-text-muted, #64748b);
}

.ds-field input[type="text"],
.ds-field input[type="number"],
.ds-field input[type="date"],
.ds-field input[type="datetime-local"],
.ds-field input[type="email"],
.ds-field input[type="tel"],
.ds-field input[type="password"],
.ds-field input[type="file"],
.ds-field select,
.ds-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--ds-radius-sm, 10px);
  border: 1px solid var(--ds-border, #e2e8f0);
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #1e293b);
  font-size: 14px;
  font-family: inherit;
}

.ds-field input:focus,
.ds-field select:focus,
.ds-field textarea:focus {
  outline: 2px solid var(--ds-primary, #0b0f8a);
  outline-offset: 1px;
}

.ds-field textarea {
  resize: vertical;
  min-height: 70px;
}

.ds-field-help {
  font-size: 12px;
  color: var(--ds-text-muted, #64748b);
}

.ds-field-error {
  font-size: 12px;
  font-weight: 700;
  color: #dc2626;
}

/* ─── Narrow centered form card (compact single-column data-entry pages,
   e.g. Add Expense) — caps and centers the surrounding .premium-card
   itself, not just the .ds-form inside it, so short forms don't sit
   flush-left in a full-width card. ─── */
.form-card-narrow {
  max-width: 640px;
  margin: 0 auto;
}

.form-card-narrow .ds-form {
  max-width: none;
}

.ds-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .ds-form-actions {
    flex-direction: column-reverse;
  }
  .ds-form-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Currency-prefixed amount input (Add Expense, etc.) ─── */
.ds-amount-input {
  position: relative;
}

.ds-amount-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ds-text-muted, #64748b);
  font-weight: 700;
  pointer-events: none;
}

.ds-amount-input input {
  padding-left: 28px !important;
  font-variant-numeric: tabular-nums;
}

/* ─── Maintenance ticket form ─── */
.maintenance-ticket-form { max-width: 560px; }

.priority-picker { display: flex; gap: 10px; flex-wrap: wrap; }

.priority-option {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--ds-radius-sm, 10px);
  border: 2px solid var(--ds-border, #e2e8f0);
  background: var(--ds-surface, #fff);
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--ds-text-muted, #64748b);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.priority-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.priority-option:has(input:checked) { color: #fff; border-color: transparent; }
.priority-option.priority-high:has(input:checked) { background: #dc2626; }
.priority-option.priority-medium:has(input:checked) { background: #b45309; }
.priority-option.priority-low:has(input:checked) { background: #08743e; }
.priority-option:hover { border-color: var(--ds-primary, #0b0f8a); }

.quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.quick-tags .chip-link {
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}

.char-counter { text-align: right; }
.char-counter.is-near-limit { color: #b45309; font-weight: 700; }
.char-counter.is-at-limit { color: #dc2626; font-weight: 700; }

.priority-guide {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 13px;
  color: var(--ds-text-muted, #64748b);
}

.priority-guide .status-badge { margin-right: 8px; }

/* ─── POS responsive breakpoints ─── */
@media (max-width: 1500px) {
  .pos-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .pos-layout {
    grid-template-columns: 1fr;
  }

  .pos-cart {
    position: static;
    max-height: none;
  }

  .pos-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .pos-top-bar {
    grid-template-columns: 1fr;
  }

  .pos-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-txn-header {
    display: none;
  }

  .pos-txn-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
  }
}

@media (max-width: 600px) {
  .pos-product-grid {
    grid-template-columns: 1fr;
  }

  .pos-payment-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pos-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media print {
  .app-sidebar,
  .topbar,
  .app-topbar,
  .sidebar-backdrop,
  .bottom-nav,
  .fab-action,
  .no-print,
  .inventory-header,
  .inventory-header-actions,
  .button {
    display: none !important;
  }

  body {
    background: #fff !important;
  }

  .app-shell,
  .app-main,
  .workspace,
  .content-area,
  .content {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .invoice {
    box-shadow: none;
    border: none;
    border-radius: 0;
    max-width: 100%;
  }

  .invoice-header {
    background: #fff !important;
    color: #0f172a !important;
    padding: 0 0 16px !important;
    border-bottom: 2px solid #0f172a;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .invoice-company {
    color: #0f172a !important;
  }

  .invoice-address,
  .invoice-tagline,
  .invoice-number {
    color: #475569 !important;
  }

  .invoice-badge {
    background: #f1f5f9 !important;
    color: #334155 !important;
  }

  .invoice-payment-chip {
    border: 1px solid currentColor;
  }

  .invoice-footer {
    background: transparent !important;
    border-top: 1px solid #cbd5e1;
  }

  .invoice-meta {
    background: transparent !important;
  }
}

/* Final PMS polish layer: density, alignment, and responsive operational views. */
.content {
  max-width: none;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--ds-page-header-height);
  backdrop-filter: saturate(180%) blur(14px);
}

.global-search input,
.top-actions,
.sidebar-profile div,
.company-chip div {
  min-width: 0;
}

.top-actions form {
  flex: 0 0 auto;
}

.ops-control,
.guest-crm,
.inventory-center,
.guest-profile-shell {
  display: grid;
  gap: 18px;
}

.ops-heading {
  margin-bottom: 2px;
}

.ops-heading::after {
  display: none;
}

.ops-heading .command-live {
  justify-self: end;
}

.ops-kpi-strip {
  grid-template-columns: repeat(5, minmax(180px, 1fr));
}

.ops-kpi {
  min-height: 116px;
}

.ops-p2-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.5fr) minmax(280px, .75fr) minmax(280px, .75fr);
  gap: 16px;
  align-items: start;
}

.ops-p3-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
  gap: 16px;
  align-items: start;
}

.ops-table-wrap,
.pms-table-wrap {
  max-width: 100%;
}

.ops-table,
.pms-table {
  border-spacing: 0;
}

.ops-table th,
.ops-table td,
.pms-table th,
.pms-table td {
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.ops-table td:first-child,
.pms-table td:first-child {
  overflow-wrap: normal;
}

/* Action-column buttons must never wrap mid-word ("Deactiv ate") — narrow
   fixed-layout columns should scroll (.pms-table-wrap) instead of breaking
   button labels apart. */
.ops-table td.table-actions,
.pms-table td.table-actions {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.guest-ledger-card,
.room-map-board {
  padding: 18px;
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ds-shadow);
}

.guest-ledger-head,
.room-map-board > .panel-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 14px;
}

.guest-ledger-head h2,
.room-map-board h2 {
  margin: 0;
  color: #111827;
  font-size: 16px;
  font-weight: 900;
}

.guest-ledger-head p,
.room-map-board p,
.guest-ledger-head span,
.room-map-board > .panel-head > span {
  margin: 4px 0 0;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 750;
}

.guest-ledger-table {
  min-width: 920px;
}

.guest-ledger-table th:nth-child(1),
.guest-ledger-table td:nth-child(1) {
  width: 64px;
}

.guest-ledger-table th:nth-child(7),
.guest-ledger-table td:nth-child(7),
.guest-ledger-table th:nth-child(8),
.guest-ledger-table td:nth-child(8) {
  text-align: right;
}

.guest-photo.small {
  width: 38px;
  height: 38px;
  font-size: 13px;
}

.guest-revenue-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.guest-revenue-strip div {
  min-height: 68px;
  padding: 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fafbfd;
}

.guest-revenue-strip span {
  display: block;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.guest-revenue-strip b {
  display: block;
  margin-top: 6px;
  color: #111827;
  font-size: 18px;
  font-weight: 900;
}

.room-status-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.room-status-strip article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .035);
}

/* Dormer dashboard v3: front-desk command layout */
.app-topbar {
  grid-template-columns: 44px minmax(220px, 300px) minmax(320px, 1fr) auto;
  gap: 14px;
  padding-inline: 20px;
  overflow: visible;
}

.company-chip {
  width: 100%;
  overflow: hidden;
}

.company-chip img {
  flex: 0 0 auto;
}

.global-search {
  width: 100%;
  max-width: 640px;
  justify-self: start;
}

.top-actions {
  justify-self: end;
  min-width: max-content;
}

.ops-control {
  gap: 20px;
}

.ops-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 4px 0 0;
}

.ops-heading h1 {
  font-size: clamp(28px, 2.2vw, 38px);
  line-height: 1.05;
}

.ops-heading p:last-child {
  color: #5f6b7c;
  font-size: 15px;
}

.command-live {
  align-self: start;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #08743e;
  font-size: 12px;
  font-weight: 900;
}

.command-live i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: #22c55e;
}

.ops-kpi-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.ops-kpi {
  min-height: 118px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  padding: 16px;
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .045);
}

.ops-kpi > span {
  width: 44px;
  height: 44px;
}

.ops-kpi strong {
  font-size: 28px;
}

.ops-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 18px;
  align-items: start;
}

.ops-command-main,
.ops-command-side {
  display: grid;
  gap: 18px;
}

.ops-command-side .ops-card {
  min-height: 0;
}

.ops-card {
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .045);
}

.ops-card-head {
  min-height: 32px;
  margin-bottom: 14px;
}

.ops-card-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ops-card-head h2 .lucide {
  width: 17px;
  height: 17px;
}

.ops-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed #d8dee9;
  border-radius: 14px;
  background: #fbfcff;
  color: #64748b;
  text-align: center;
  font-weight: 800;
}

.ops-table-wrap {
  border: 1px solid #eef2f7;
  border-radius: 14px;
  overflow: hidden;
}

.ops-table th,
.ops-table td {
  padding: 13px 14px;
}

.activity-compact article .avatar {
  width: 38px;
  height: 38px;
  font-size: 12px;
}

.stock-control-list article {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
}

.quick-action-grid.dash-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-action-grid.dash-actions a {
  min-height: 78px;
  border-radius: 14px;
}

@media (max-width: 1400px) {
  .app-topbar {
    grid-template-columns: 44px minmax(180px, 240px) minmax(260px, 1fr) auto;
  }

  .ops-command-grid {
    grid-template-columns: 1fr;
  }

  .ops-command-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .ops-kpi-strip,
  .ops-command-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-actions {
    overflow-x: auto;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .ops-kpi-strip,
  .ops-command-side,
  .quick-action-grid.dash-actions {
    grid-template-columns: 1fr;
  }
}

.room-status-strip .lucide {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 12px;
}

.room-status-strip strong {
  display: block;
  color: #111827;
  font-size: 22px;
  font-weight: 900;
}

.room-status-strip span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 850;
}

.room-status-strip .available .lucide { color: #16a34a; background: #dcfce7; }
.room-status-strip .occupied .lucide { color: #2563eb; background: #dbeafe; }
.room-status-strip .cleaning .lucide { color: #f59e0b; background: #ffedd5; }
.room-status-strip .maintenance .lucide { color: #dc2626; background: #fee2e2; }
.room-status-strip .reserved .lucide { color: #7c3aed; background: #ede9fe; }

.room-map-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 14px;
}

.room-map-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #fbfcff;
}

.room-map-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.room-map-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.room-map-card-actions b {
  font-size: 12px;
  white-space: nowrap;
}

.room-map-card strong,
.room-map-card b {
  color: #111827;
  font-weight: 900;
}

.room-map-card span {
  display: block;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.room-bed-grid {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.room-bed {
  min-width: 0;
}

.room-bed.available { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.room-bed.occupied { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.room-bed.cleaning { border-color: #fed7aa; background: #fff7ed; color: #c2410c; }
.room-bed.maintenance { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.room-bed.reserved { border-color: #ddd6fe; background: #f5f3ff; color: #6d28d9; }

.product-table .inventory-row {
  align-items: start;
}

.inventory-product-cell img {
  object-fit: contain;
}

.pos-product-img {
  min-height: 118px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.pos-product-img img {
  width: 100%;
  height: 100%;
  min-height: 104px;
}

.pos-product-card {
  min-height: 230px;
}

.pos-cart-item-img img {
  object-fit: contain;
  background: #fff;
}

@media (max-width: 1500px) {
  .ops-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-p2-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
  }

  .ops-card--queue {
    grid-row: span 2;
  }

  .room-map-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width: 1100px) {
  .ops-p2-grid,
  .ops-p3-grid {
    grid-template-columns: 1fr;
  }

  .guest-revenue-strip,
  .room-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .app-topbar {
    align-items: center;
  }

  .top-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .ops-kpi-strip,
  .guest-revenue-strip,
  .room-status-strip,
  .room-map-grid {
    grid-template-columns: 1fr;
  }

  .guest-ledger-head,
  .room-map-board > .panel-head {
    display: grid;
  }

  .guest-ledger-table {
    min-width: 760px;
  }
}

/* Dashboard KPI cleanup: no floating action squares inside top cards. */
.ops-control .ops-kpi-strip {
  grid-template-columns: repeat(5, minmax(180px, 1fr));
}

.ops-control .ops-kpi {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  min-height: 112px;
  align-items: center;
  overflow: hidden;
}

.ops-control .ops-kpi > span {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.ops-control .ops-kpi small {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  min-width: 0;
  color: #111827;
  font-size: 13px;
  line-height: 1.25;
}

.ops-control .ops-kpi strong {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  color: #0f172a;
  font-size: 30px;
  line-height: 1;
}

.ops-control .ops-kpi em {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  color: #64748b;
  font-size: 13px;
  line-height: 1.3;
}

.ops-control .ops-kpi b {
  display: none !important;
}

@media (max-width: 1180px) {
  .ops-control .ops-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .ops-control .ops-kpi-strip {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
   CI-* CHECK-IN FLOW — NEW DESIGN SYSTEM
   Matches reference: compact pills, lavender bg, white card,
   trust bar below, 6-box OTP, dual upload buttons.
   ═══════════════════════════════════════════════════════ */

:root {
  --ci-bg: #f0f1fa;
  --ci-card: #ffffff;
  --ci-blue: #1316b5;
  --ci-blue-dark: #0b0d8d;
  --ci-ink: #0a0c38;
  --ci-muted: #6b7280;
  --ci-border: #dde1f0;
  --ci-light: #f5f6ff;
  --ci-green: #16a34a;
}

/* ── Screen wrapper ── */
.ci-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: var(--ci-bg);
  gap: 14px;
}

/* ── Card ── */
.ci-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: var(--ci-card);
  border-radius: 22px;
  box-shadow: 0 8px 30px rgba(17, 24, 39, .08);
  overflow: hidden;
  padding: 22px 22px 22px;
}

/* ── Logo ── */
.ci-logo {
  width: 68px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
}

/* ── Progress steps (pills) ── */
.ci-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  margin-bottom: 12px;
}

.ci-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  /* Inactive */
  background: #f0f1f8;
  color: var(--ci-muted);
  border: 1px solid var(--ci-border);
}

.ci-step .lucide {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.ci-step.active {
  background: var(--ci-blue);
  color: #fff;
  border-color: var(--ci-blue);
}

.ci-step.done {
  background: var(--ci-blue-dark);
  color: #fff;
  border-color: var(--ci-blue-dark);
}

/* ── Body ── */
.ci-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ci-kicker {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ci-muted);
  margin: 0 0 4px;
}

.ci-heading {
  font-size: 23px;
  font-weight: 800;
  color: var(--ci-ink);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 0 0 6px;
}

.ci-sub {
  font-size: 14px;
  color: var(--ci-muted);
  line-height: 1.45;
  margin: 0 0 16px;
}

/* ── Form ── */
.ci-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.ci-details-form {
  gap: 10px;
}

.ci-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ci-ink);
}

.ci-label input,
.ci-label select,
.ci-label textarea,
.ci-form input[type="text"],
.ci-form input[type="tel"],
.ci-form input[type="email"],
.ci-form input[type="number"],
.ci-form input[type="date"],
.ci-form select,
.ci-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1.5px solid var(--ci-border);
  border-radius: 10px;
  background: #fff;
  color: var(--ci-ink);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border .15s ease, box-shadow .15s ease;
}

.ci-label input:focus,
.ci-label select:focus,
.ci-label textarea:focus,
.ci-form input:focus,
.ci-form select:focus,
.ci-form textarea:focus {
  border-color: var(--ci-blue);
  box-shadow: 0 0 0 3px rgba(19, 22, 181, .10);
}

/* ── Phone field ── */
.ci-phone-field {
  display: grid;
  grid-template-columns: 58px 1fr;
  border: 1.5px solid var(--ci-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: border .15s ease, box-shadow .15s ease;
}

.ci-phone-field:focus-within {
  border-color: var(--ci-blue);
  box-shadow: 0 0 0 3px rgba(19, 22, 181, .10);
}

.ci-phone-field span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: var(--ci-light);
  border-right: 1.5px solid var(--ci-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--ci-ink);
  white-space: nowrap;
}

.ci-phone-field input {
  border: none !important;
  border-radius: 0 !important;
  min-height: 50px;
  box-shadow: none !important;
}

/* ── OTP row ── */
.otp-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.otp-row span {
  width: 46px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ci-border);
  border-radius: 12px;
  background: #fff;
  color: var(--ci-ink);
  font-size: 22px;
  font-weight: 800;
}

.otp-row span.active {
  border-color: var(--ci-blue);
  box-shadow: 0 0 0 3px rgba(19, 22, 181, .10);
}

/* Hide the real OTP input visually but keep it accessible */
.ci-form input#id_otp_code,
.otp-enhanced-form input[name="otp_code"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* ── Resend ── */
.ci-resend {
  font-size: 13px;
  color: var(--ci-muted);
  margin: 0;
  text-align: center;
}

.ci-resend-link {
  color: var(--ci-blue);
  font-weight: 700;
}

/* ── Security micro note ── */
.ci-security-micro {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ci-muted);
  margin: 0;
}

.ci-security-micro .lucide {
  width: 14px;
  height: 14px;
  color: var(--ci-blue);
  flex-shrink: 0;
}

.ci-security-micro--green .lucide {
  color: var(--ci-green);
}

/* ── Field error ── */
.ci-field-error {
  font-size: 12px;
  color: #dc2626;
  margin: 0;
}

/* ── Alert ── */
.ci-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  margin: 0;
}

.ci-alert .lucide { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.ci-alert--good { background: #dcfce7; color: #15803d; }
.ci-alert--warn { background: #fef9c3; color: #a16207; }

/* ── Primary button ── */
.ci-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: none;
  border-radius: 14px;
  background: var(--ci-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: 0 6px 20px rgba(19, 22, 181, .25);
  margin-top: 4px;
}

.ci-btn-primary:hover {
  background: var(--ci-blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(19, 22, 181, .32);
}

.ci-btn-primary .lucide { width: 17px; height: 17px; }

.ci-checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
}

.ci-checkbox-label input[type="checkbox"] {
  width: auto;
  min-height: 0;
}

/* ── Review screen ── */
.ci-review-section {
  border: 1.5px solid var(--ci-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.ci-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ci-review-head h3 { font-size: 13px; margin: 0; color: var(--ci-ink); }
.ci-review-head a { font-size: 12px; font-weight: 700; color: var(--ci-blue); text-decoration: none; }

.ci-review-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 0; font-size: 13px; }
.ci-review-list dt { color: var(--ci-muted); }
.ci-review-list dd { margin: 0; font-weight: 600; color: var(--ci-ink); }

/* ── AI passport scan choice & confidence flags ── */
.ci-scan-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 4px;
}

.ci-confidence-low {
  font-size: 11px;
  font-weight: 700;
  color: #a16207;
  margin-left: 6px;
}

/* ── Terms ── */
.ci-terms {
  font-size: 11px;
  color: var(--ci-muted);
  text-align: center;
  margin: 8px 0 0;
  line-height: 1.4;
}

.ci-terms a {
  color: var(--ci-blue);
  font-weight: 700;
  text-decoration: underline;
}

/* ── Trust bar (below card) ── */
.ci-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

.ci-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.ci-trust-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e8eaff;
  color: var(--ci-blue);
  flex-shrink: 0;
}

.ci-trust-icon .lucide { width: 18px; height: 18px; }

.ci-trust-item strong {
  font-size: 11px;
  font-weight: 800;
  color: var(--ci-ink);
  line-height: 1.2;
}

.ci-trust-item small {
  font-size: 10px;
  color: var(--ci-muted);
  line-height: 1.35;
}

/* ── Details grid ── */
.ci-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.ci-label { gap: 4px; }

.ci-label--full {
  grid-column: 1 / -1;
}

/* ── ID proof selector — tappable boxes instead of a text ID number field;
   the guest only picks which document they'll show at the desk, reception
   verifies the actual document during the ID upload/review step. ── */
.ci-id-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ci-id-type-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: 9px 10px;
  border: 1.5px solid var(--ci-border);
  border-radius: 10px;
  background: #fff;
  color: var(--ci-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}

.ci-id-type-box input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ci-id-type-box:hover {
  border-color: var(--ci-blue);
}

.ci-id-type-box.selected {
  border-color: var(--ci-blue);
  background: rgba(19, 22, 181, .06);
  box-shadow: 0 0 0 3px rgba(19, 22, 181, .10);
  color: var(--ci-blue);
}

/* ── Upload zone ── */
.ci-upload-zone {
  width: 100%;
  border: 1.5px dashed var(--ci-border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--ci-light);
}

.ci-upload-label strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ci-ink);
}

.ci-upload-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ci-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1.5px solid var(--ci-border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--ci-ink);
  transition: border .15s ease, box-shadow .15s ease;
}

.ci-upload-btn:hover {
  border-color: var(--ci-blue);
  box-shadow: 0 0 0 3px rgba(19, 22, 181, .08);
}

.ci-upload-btn .lucide { width: 22px; height: 22px; color: var(--ci-blue); }
.ci-upload-btn--gallery .lucide { color: #7c3aed; }

/* Hide the actual file input */
.ci-upload-zone input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.ci-upload-preview {
  font-size: 12px;
  font-weight: 700;
  color: var(--ci-green);
  text-align: center;
  margin: 0;
}

/* ── Welcome card extras ── */
.ci-welcome-card {
  max-width: 420px;
  gap: 0;
  padding: 28px 24px 22px;
}

.ci-welcome-copy {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
}

.ci-welcome-copy .ci-heading { font-size: 26px; }
.ci-welcome-copy .ci-sub { margin-bottom: 0; }

.ci-trust-grid-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 22px 0;
}

.ci-trust-grid-inner article {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  background: var(--ci-light);
  border-radius: 14px;
  font-size: 12px;
}

.ci-trust-grid-inner strong { font-size: 13px; font-weight: 700; color: var(--ci-ink); }
.ci-trust-grid-inner span { font-size: 11px; color: var(--ci-muted); line-height: 1.35; }
.ci-trust-grid-inner .lucide { width: 19px; height: 19px; color: var(--ci-blue); margin-bottom: 2px; }

.ci-help-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ci-blue);
  font-weight: 700;
  margin-top: 16px;
  text-decoration: none;
}

.ci-help-link .lucide { width: 18px; height: 18px; }
.ci-help-link b { display: block; }
.ci-help-link small { display: block; color: var(--ci-muted); font-size: 11px; }

.ci-footer {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  margin-top: 12px;
  text-align: center;
}

/* ── Status screen ── */
.ci-status-badge {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dcfce7;
  color: var(--ci-green);
  margin: 0 auto 12px;
}

.ci-status-badge.muted { background: #f1f2f8; color: var(--ci-muted); }
.ci-status-badge .lucide { width: 28px; height: 28px; }

.ci-status-body { text-align: center; width: 100%; }
.ci-status-body .ci-heading { font-size: 19px; }
.ci-status-body .ci-sub { margin: 0 0 14px; }

.ci-review-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: var(--ci-light);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 12px;
}

.ci-review-grid div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.ci-review-grid span { color: var(--ci-muted); }
.ci-review-grid strong { color: var(--ci-ink); font-weight: 700; text-align: right; }

.ci-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
}

.ci-timeline article {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ci-muted);
}

.ci-timeline article .lucide {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ci-border);
}

.ci-timeline article.done { color: var(--ci-ink); font-weight: 600; }
.ci-timeline article.done .lucide { color: var(--ci-green); }
.ci-timeline article.active { color: var(--ci-blue); font-weight: 700; }
.ci-timeline article.active .lucide { color: var(--ci-blue); }

.ci-status-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ci-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 10px 18px;
  border: 1.5px solid var(--ci-border);
  border-radius: 12px;
  background: #fff;
  color: var(--ci-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* ── Responsive: narrow phones ── */
@media (max-width: 480px) {
  .ci-screen {
    padding: 10px 0 16px;
  }

  .ci-card {
    border-radius: 18px;
    padding: 14px 14px 16px;
    max-width: 100%;
    width: calc(100% - 16px);
  }

  .ci-trust-bar {
    max-width: calc(100% - 16px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ci-heading { font-size: 19px; }

  .ci-steps { gap: 4px; }
  .ci-step { font-size: 10px; height: 28px; padding: 0 6px; }

  .otp-row span { width: 40px; height: 46px; font-size: 20px; }

  .ci-welcome-card { width: calc(100% - 16px); max-width: 100%; }
}


/* ═══════════════════════════════════════════════════
   Dev OTP Panel — Development-only OTP display
   ═══════════════════════════════════════════════════ */

.dev-otp-panel {
  margin: 16px 0 8px;
  padding: 16px 20px;
  border: 2px dashed #d97706;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.dev-otp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 6px;
  background: #d97706;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.dev-otp-badge svg {
  width: 14px;
  height: 14px;
}

.dev-otp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.dev-otp-item {
  display: grid;
  gap: 2px;
}

.dev-otp-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #92400e;
}

.dev-otp-value {
  font-size: 14px;
  font-weight: 700;
  color: #78350f;
}

.dev-otp-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #b45309;
}

.dev-otp-timer {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 16px;
  font-weight: 800;
  color: #b45309;
}

.dev-otp-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
}

.dev-otp-warning svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .dev-otp-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}


/* ═══════════════════════════════════════════════════
   Filter Pills
   ═══════════════════════════════════════════════════ */

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 4px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--surface-2, #f1f5f9);
  color: var(--text-2, #64748b);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
}

.filter-pill:hover {
  background: var(--surface-3, #e2e8f0);
  color: var(--text-1, #1e293b);
}

.filter-pill.active {
  background: var(--brand-bg, #1a1f8a);
  color: #fff;
  border-color: var(--brand-bg, #1a1f8a);
}

.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pill-dot.good { background: #22c55e; }
.pill-dot.info { background: #3b82f6; }
.pill-dot.warn { background: #f97316; }
.pill-dot.danger { background: #ef4444; }


/* ═══════════════════════════════════════════════════
   Guest Quick Actions
   ═══════════════════════════════════════════════════ */

.guest-quick-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--border-1, #e2e8f0);
  background: var(--surface-1, #fff);
  color: var(--text-2, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  font-size: 0;
  padding: 0;
}

.action-btn svg,
.action-btn i {
  width: 15px;
  height: 15px;
}

.action-btn:hover {
  background: var(--surface-2, #f1f5f9);
  color: var(--text-1, #1e293b);
  border-color: var(--border-2, #cbd5e1);
}

.action-btn.primary {
  background: var(--brand-bg, #1a1f8a);
  border-color: var(--brand-bg, #1a1f8a);
  color: #fff;
}

.action-btn.primary:hover {
  background: #15196e;
}

/* Action Dropdown (kebab menu) */
.action-dropdown {
  position: relative;
}

.action-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 180px;
  padding: 6px 0;
  border-radius: 12px;
  background: var(--surface-1, #fff);
  border: 1.5px solid var(--border-1, #e2e8f0);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Opt-in modifier: escapes .pms-table-wrap's scroll clipping. overflow-x:
   auto forces the paired overflow-y to auto too (per the CSS spec's
   overflow-pairing rule), so a table wrapper that's only meant to scroll
   sideways still clips anything that paints below its own bottom edge —
   including this menu, for rows near the end of a short table. Position
   is computed in JS on open (see bookings/dashboard.html); left unset here
   so it doesn't fight that. Scoped to .is-fixed so pages that don't use it
   (e.g. Guest Management) are unaffected. */
.action-dropdown-menu.is-fixed {
  position: fixed;
  right: auto;
  top: auto;
}

.action-dropdown-menu.open {
  display: block;
}

.action-dropdown-menu a,
.action-dropdown-menu form button {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 9px 16px;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  color: var(--text-1, #1e293b);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s;
}

.action-dropdown-menu a:hover,
.action-dropdown-menu form button:hover {
  background: var(--surface-2, #f1f5f9);
}

.action-dropdown-menu a i,
.action-dropdown-menu a svg,
.action-dropdown-menu form button i,
.action-dropdown-menu form button svg {
  width: 15px;
  height: 15px;
  color: var(--text-2, #64748b);
}


/* ═══════════════════════════════════════════════════
   Stay Detail Layout
   ═══════════════════════════════════════════════════ */

.stay-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px;
  display: grid;
  gap: 20px;
}

.stay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.stay-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stay-header-left h1 {
  font-size: 24px;
  font-weight: 900;
  margin: 0;
}

.stay-header-left p {
  color: var(--text-2, #64748b);
  font-size: 14px;
  margin: 2px 0 0;
}

.stay-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stay-room-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 10px;
  background: var(--surface-2, #f1f5f9);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1, #1e293b);
}

.stay-room-badge svg,
.stay-room-badge i {
  width: 15px;
  height: 15px;
  color: var(--text-2, #64748b);
}

/* Action Bar */
.stay-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Stay Grid — 2 columns */
.stay-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  align-items: start;
}

.stay-main {
  display: grid;
  gap: 20px;
}

.stay-sidebar {
  display: grid;
  gap: 20px;
  position: sticky;
  top: 20px;
}

/* Stay Info Grid */
.stay-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 4px 0;
}

.stay-info-item {
  display: grid;
  gap: 3px;
}

.stay-info-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2, #64748b);
}

.stay-info-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1, #1e293b);
}

/* Guest card in sidebar */
.stay-guest-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stay-guest-card strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
}

.stay-guest-card small {
  display: block;
  font-size: 12px;
  color: var(--text-2, #64748b);
  margin-top: 2px;
}

/* Payment items in sidebar */
.stay-payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-1, #e2e8f0);
}

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

.stay-payment-item strong {
  font-size: 14px;
  font-weight: 800;
}

.stay-payment-item small {
  display: block;
  font-size: 11px;
  color: var(--text-2, #64748b);
  margin-top: 2px;
}

.stay-payment-item > div:last-child {
  text-align: right;
}


/* ═══════════════════════════════════════════════════
   Stay Timeline
   ═══════════════════════════════════════════════════ */

.stay-timeline {
  position: relative;
  padding: 4px 0 4px 28px;
}

.stay-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border-1, #e2e8f0);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  padding: 0 0 20px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -28px;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dcfce7;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.timeline-dot i,
.timeline-dot svg {
  width: 12px;
  height: 12px;
  color: #08743e;
}

.timeline-item.pending .timeline-dot {
  background: #f1f5f9;
  border: 2px dashed #94a3b8;
}

.timeline-item.pending .timeline-dot i,
.timeline-item.pending .timeline-dot svg {
  color: #94a3b8;
}

.timeline-content {
  display: grid;
  gap: 2px;
  min-height: 22px;
}

.timeline-content strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1, #1e293b);
}

.timeline-content span {
  font-size: 12px;
  color: var(--text-2, #64748b);
}

.timeline-content time {
  font-size: 11px;
  color: var(--text-3, #94a3b8);
  font-weight: 600;
}

.timeline-item.pending .timeline-content strong {
  color: var(--text-2, #64748b);
}

.timeline-item.info .timeline-dot {
  background: color-mix(in srgb, var(--ds-primary) 16%, white);
}

.timeline-item.info .timeline-dot i,
.timeline-item.info .timeline-dot svg {
  color: var(--ds-primary);
}

.timeline-item.neutral .timeline-dot {
  background: #f1f5f9;
}

.timeline-item.neutral .timeline-dot i,
.timeline-item.neutral .timeline-dot svg {
  color: #64748b;
}


/* ═══════════════════════════════════════════════════
   Responsive — Stay Detail & Guest Register
   ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .stay-grid {
    grid-template-columns: 1fr;
  }

  .stay-sidebar {
    position: static;
  }

  .stay-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .stay-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .stay-info-grid {
    grid-template-columns: 1fr;
  }

  .stay-action-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .filter-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .guest-quick-actions {
    flex-wrap: nowrap;
  }
}


/* ═══════════════════════════════════════════════════
   Reception Dashboard
   ═══════════════════════════════════════════════════ */

.dash-shell {
  /* No max-width/margin/padding of its own — the parent `.content` (see
     line ~99) already centers and pads the page at --ds-content-max
     (1680px), same as every other page (Dashboard's .ops-control,
     Bookings/Stay Calendar's plain .screen-header sections). This wrapper
     used to re-constrain to 1400px and re-pad on top of that, which just
     narrowed Reception relative to its sibling pages for no reason. */
  display: grid;
  gap: 20px;
}

.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dash-header h1 {
  font-size: 26px;
  font-weight: 900;
  margin: 0;
}

.dash-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Stat Cards */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.dash-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: var(--surface-1, #fff);
  border: 1.5px solid var(--border-1, #e2e8f0);
}

.dash-stat small {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2, #64748b);
  display: block;
}

.dash-stat strong {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  display: block;
}

.dash-stat-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2, #64748b);
}

.dash-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-stat-icon i,
.dash-stat-icon svg {
  width: 20px;
  height: 20px;
}

.dash-stat-icon.warn { background: #fef3c7; color: #b45309; }
.dash-stat-icon.info { background: #dbeafe; color: #1e40af; }
.dash-stat-icon.neutral { background: #f1f5f9; color: #64748b; }
.dash-stat-icon.good { background: #dcfce7; color: #08743e; }
.dash-stat-icon.occupied { background: #fee2e2; color: #b91c1c; }
.dash-stat-icon.available { background: #dcfce7; color: #08743e; }
.dash-stat-icon.cleaning { background: #e0f2fe; color: #0369a1; }

/* Dashboard Grid */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

.dash-main {
  display: grid;
  gap: 20px;
}

.dash-sidebar {
  display: grid;
  gap: 20px;
  position: sticky;
  top: 20px;
}

/* Activity grid — 2-col for today's check-ins and check-outs */
.dash-activity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Activity row — used in today's arrivals/checkouts and recent checkouts */
.dash-activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-1, #e2e8f0);
}

.dash-activity-row:last-child {
  border-bottom: none;
}

.dash-activity-row strong {
  font-size: 13px;
  font-weight: 800;
  display: block;
}

.dash-activity-row small {
  font-size: 11px;
  color: var(--text-2, #64748b);
  display: block;
  margin-top: 1px;
}

.dash-activity-row > div {
  flex: 1;
  min-width: 0;
}

/* Quick Links */
.dash-quick-links {
  display: grid;
  gap: 2px;
}

.dash-quick-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1, #1e293b);
  text-decoration: none;
  transition: background 0.12s;
}

.dash-quick-links a:hover {
  background: var(--surface-2, #f1f5f9);
}

.dash-quick-links a i,
.dash-quick-links a svg {
  width: 16px;
  height: 16px;
  color: var(--text-2, #64748b);
}

/* Avatar small variant */
.avatar.small {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 1024px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }

  .dash-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .dash-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-activity-grid {
    grid-template-columns: 1fr;
  }

  .dash-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════
   Modals & Dialogs
   ═══════════════════════════════════════════════════ */

.pms-modal {
  border: none;
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  padding: 0;
  max-width: 500px;
  width: 90vw;
  background: var(--surface-1, #fff);
  color: var(--text-1, #1e293b);
  animation: modal-fade-in 0.2s ease-out;
}

.pms-modal-lg {
  max-width: 640px;
}

/* .ds-form's own max-width:480px (meant for small single-column forms
   elsewhere) left a wide dead strip on the right of the Change Room
   modal, since .pms-modal-lg itself is 640px but the form inside it was
   still capped at 480px. Let it fill the wide modal instead. */
.pms-modal-lg .ds-form {
  max-width: none;
}

/* A native <dialog> centers on the full browser viewport, but the fixed
   sidebar eats into the left side of that viewport — so a viewport-centered
   modal reads as shifted left of the actual visible content area. Shift
   the center point right by half the sidebar's current width instead.
   translateX(-50%) keeps this independent of the modal's own (possibly
   fluid) width — see .modal-wide / .pms-modal-lg above. */
.pms-modal,
.modal {
  left: calc(50% + (var(--ds-sidebar) / 2));
  right: auto;
  margin-left: 0;
  margin-right: 0;
  transform: translateX(-50%);
}

.app-shell.sidebar-collapsed .pms-modal,
.app-shell.sidebar-collapsed .modal {
  left: calc(50% + (var(--ds-sidebar-collapsed) / 2));
}

@media (max-width: 767px) {
  .pms-modal,
  .modal {
    left: 50%;
  }
}

.pms-modal-lg .form-grid {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 700px) {
  .pms-modal-lg .form-grid {
    grid-template-columns: 1fr;
  }
}

.pms-modal::backdrop {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  animation: backdrop-fade-in 0.2s ease-out;
}

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

.pms-modal-header h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

.pms-modal-close {
  background: none;
  border: none;
  color: var(--text-2, #64748b);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.1s;
}

.pms-modal-close:hover {
  background: var(--surface-2, #f1f5f9);
  color: var(--danger-color, #ef4444);
}

.pms-modal-body {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.pms-modal-body form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pms-modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border-1, #e2e8f0);
  background: var(--surface-2, #f1f5f9);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-radius: 0 0 16px 16px;
}

.ds-tabs {
  position: relative;
}

.ds-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.ds-tab-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ds-border);
  margin: 0 0 16px;
}

.ds-tab-list label {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.ds-tab-list label:hover {
  color: var(--ds-text);
}

.ds-tab-panel {
  display: none;
}

.ds-tab-input:nth-of-type(1):checked ~ .ds-tab-list label:nth-of-type(1),
.ds-tab-input:nth-of-type(2):checked ~ .ds-tab-list label:nth-of-type(2),
.ds-tab-input:nth-of-type(3):checked ~ .ds-tab-list label:nth-of-type(3),
.ds-tab-input:nth-of-type(4):checked ~ .ds-tab-list label:nth-of-type(4),
.ds-tab-input:nth-of-type(5):checked ~ .ds-tab-list label:nth-of-type(5) {
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
}

.ds-tab-input:nth-of-type(1):checked ~ .ds-tab-panel:nth-of-type(1),
.ds-tab-input:nth-of-type(2):checked ~ .ds-tab-panel:nth-of-type(2),
.ds-tab-input:nth-of-type(3):checked ~ .ds-tab-panel:nth-of-type(3),
.ds-tab-input:nth-of-type(4):checked ~ .ds-tab-panel:nth-of-type(4),
.ds-tab-input:nth-of-type(5):checked ~ .ds-tab-panel:nth-of-type(5) {
  display: block;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.form-grid .span-all {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.billing-divider {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--ds-border);
  margin: 2px 0;
}

.checkout-modal-bill {
  margin-bottom: 20px;
  padding-bottom: 4px;
}

@keyframes modal-fade-in {
  /* A CSS animation's own `transform` values fully replace any static
     `transform` rule (like the translateX(-50%) sidebar-centering above)
     for the whole animation duration — without translateX(-50%) baked in
     here too, the dialog rendered unshifted for these 0.2s (reading as
     "opens off to the side") before snapping to center when the animation
     ended and the static rule took back over. */
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes backdrop-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════
   Premium Dashboard — KPI cards, analytics, room board
   ═══════════════════════════════════════════════════ */

.kpi-premium-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.kpi-premium {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
  text-decoration: none;
  color: var(--ds-text);
  transition: transform .15s ease, box-shadow .15s ease;
}

.kpi-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(17, 24, 39, .08);
}

.kpi-premium-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.kpi-premium-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.kpi-premium-icon .lucide {
  width: 18px;
  height: 18px;
}

.kpi-premium-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.kpi-premium-delta.up { background: #dcfce7; color: #08743e; }
.kpi-premium-delta.down { background: #fee2e2; color: #b91c1c; }
.kpi-premium-delta.flat { background: #f1f5f9; color: #64748b; }

.kpi-premium small {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.kpi-premium strong {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.kpi-premium-sub {
  font-size: 12px;
  color: var(--ds-muted);
  font-weight: 600;
}

.kpi-premium-spark {
  position: relative;
  height: 34px;
  width: 100%;
  margin-top: 2px;
}

.kpi-premium-spark canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.kpi-premium.blue .kpi-premium-icon { background: #eaf0ff; color: #1d4ed8; }
.kpi-premium.purple .kpi-premium-icon { background: #f3e8ff; color: #9333ea; }
.kpi-premium.amber .kpi-premium-icon { background: #fff8eb; color: var(--ds-warning); }
.kpi-premium.green .kpi-premium-icon { background: #dcfce7; color: var(--ds-success); }
.kpi-premium.orange .kpi-premium-icon { background: #ffedd5; color: #ea580c; }
.kpi-premium.red .kpi-premium-icon { background: #fee2e2; color: var(--ds-danger); }

@media (max-width: 1500px) {
  .kpi-premium-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .kpi-premium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Analytics row */
.analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr);
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 1300px) {
  .analytics-grid { grid-template-columns: 1fr 1fr; }
  .analytics-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .analytics-grid { grid-template-columns: 1fr; }
  .analytics-grid > :last-child { grid-column: auto; }
}

.chart-range-tabs {
  display: inline-flex;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  overflow: hidden;
}

.chart-range-tabs button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ds-muted);
  cursor: pointer;
}

.chart-range-tabs button.active {
  background: var(--ds-primary);
  color: #fff;
}

.revenue-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 12px;
}

.revenue-total strong {
  font-size: 26px;
  font-weight: 900;
}

.revenue-total span {
  font-size: 12px;
  font-weight: 800;
  color: var(--ds-muted);
}

.revenue-chart-canvas-wrap {
  height: 220px;
}

.revenue-breakdown-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-border);
}

.revenue-breakdown-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
}

.revenue-breakdown-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.revenue-breakdown-row b {
  font-size: 13px;
  font-weight: 800;
}

.revenue-breakdown-row strong {
  font-size: 13px;
  font-weight: 900;
}

.doughnut-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 4px auto 16px;
}

.doughnut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
}

.doughnut-center strong {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.doughnut-center span {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-muted);
  text-transform: uppercase;
}

.occupancy-legend {
  display: grid;
  gap: 10px;
}

.occupancy-legend-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.occupancy-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.occupancy-legend-row b {
  font-weight: 700;
  color: var(--ds-muted);
}

.occupancy-legend-row strong {
  font-weight: 900;
}

/* Verification queue with photo */
.verify-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-border);
}

.verify-row:last-child { border-bottom: 0; }

.avatar-photo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #fff7e6;
}

.verify-row b {
  display: block;
  font-size: 13px;
  font-weight: 900;
}

.verify-row small {
  display: block;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
}

.verify-row time {
  font-size: 11px;
  color: var(--ds-muted);
  font-weight: 700;
  white-space: nowrap;
}

/* Room status board */
.room-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.room-status-card {
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  display: grid;
  gap: 8px;
  text-decoration: none;
  color: var(--ds-text);
}

.room-status-card b {
  font-size: 13px;
  font-weight: 900;
}

.room-status-card small {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 700;
}

.room-status-card meter {
  width: 100%;
  height: 6px;
}

.room-status-card .pill {
  justify-self: start;
}

/* Quick actions — 8-up variant */
.quick-action-grid.dash-actions-8 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1300px) {
  .quick-action-grid.dash-actions-8 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .quick-action-grid.dash-actions-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Timeline extra tone */
.timeline-item.warn .timeline-dot { background: #fff8eb; }
.timeline-item.warn .timeline-dot i,
.timeline-item.warn .timeline-dot svg { color: var(--ds-warning); }

.two-col-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1100px) {
  .two-col-row { grid-template-columns: 1fr; }
}

/* ── Stay Calendar ── a Gantt-style reservation timeline, not a repeated
   per-day status grid. One continuous bar per stay; empty bed tracks stay
   visually quiet and only carry a flag when the bed itself is out of
   service (cleaning/maintenance/blocked/reserved) — that status comes
   straight from Bed.status, the single source of truth Bed Management
   owns; this page only ever displays it. ──────────────────────────────── */

.stay-calendar-stats { margin-bottom: 16px; }

.stay-calendar-controls .panel-head { flex-wrap: wrap; gap: 14px; }

.stay-calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stay-calendar-filter select,
.stay-calendar-filter input[type="date"] {
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  padding: 6px 12px;
  font-weight: 800;
  font-size: 12px;
  color: var(--ds-text);
}

/* Secondary toolbar row: view range, guest search, status filter */
.stay-calendar-toolbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 18px 14px;
}

.stay-calendar-view-select {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ds-text) 5%, var(--ds-bg));
  border: 1px solid var(--ds-border);
}
.stay-calendar-view-select a {
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ds-muted);
  text-decoration: none;
}
.stay-calendar-view-select a.active {
  background: var(--ds-surface);
  color: var(--ds-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.stay-calendar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
}
.stay-calendar-search .lucide { width: 14px; height: 14px; color: var(--ds-muted); flex: none; }
.stay-calendar-search input {
  border: 0;
  outline: 0;
  background: none;
  min-height: 38px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
  width: 100%;
}

#stayCalendarStatusFilter {
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  padding: 6px 12px;
  font-weight: 800;
  font-size: 12px;
  color: var(--ds-text);
}

.stay-calendar-wrap {
  overflow-x: auto;
  padding: 4px 18px 18px;
}

.stay-calendar-grid {
  display: grid;
  grid-template-columns: minmax(200px, 240px) repeat(var(--sc-cols), minmax(72px, 1fr));
  min-width: max-content;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
}

.stay-calendar-corner,
.stay-calendar-date-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  padding: 10px 12px;
}

.stay-calendar-corner {
  left: 0;
  z-index: 3;
  font-weight: 850;
  color: var(--ds-muted);
  font-size: 12px;
}

.stay-calendar-date-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  border-left: 1px solid var(--ds-border);
}

.stay-calendar-date-head span { font-size: 11px; color: var(--ds-muted); font-weight: 700; }
.stay-calendar-date-head strong { font-size: 13px; color: var(--ds-text); }
.stay-calendar-date-head.is-today { background: color-mix(in srgb, var(--ds-primary) 8%, var(--ds-surface)); }
.stay-calendar-date-head.is-today strong { color: var(--ds-primary); }
.stay-calendar-date-head.is-weekend { background: color-mix(in srgb, var(--ds-text) 3%, var(--ds-surface)); }

.stay-calendar-roomtype-row {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ds-primary);
  background: color-mix(in srgb, var(--ds-primary) 6%, var(--ds-bg));
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
}

/* Daily free-beds count for the whole room type — one pill per date, sat
   right under that type's header so reception can see availability across
   the range before drilling into individual room bars. */
.stay-calendar-type-avail-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 4px;
  background: color-mix(in srgb, var(--ds-primary) 6%, var(--ds-bg));
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
  border-left: 1px solid var(--ds-border);
}
.stay-calendar-type-avail-cell.is-weekend { background: color-mix(in srgb, var(--ds-primary) 10%, var(--ds-bg)); }
.stay-calendar-type-avail-cell.is-today { background: color-mix(in srgb, var(--ds-primary) 14%, var(--ds-bg)); }

.avail-pill {
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 850;
  color: #fff;
}
.avail-pill-good { background: var(--ds-success); }
.avail-pill-danger { background: var(--ds-danger); }

.stay-calendar-room-label,
.stay-calendar-bed-label {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.room-collapse-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--ds-muted);
  cursor: pointer;
}
.room-collapse-toggle:hover { background: color-mix(in srgb, var(--ds-text) 6%, transparent); color: var(--ds-text); }
.room-collapse-toggle .lucide { width: 15px; height: 15px; transition: transform .15s ease; }
.room-collapse-toggle[aria-expanded="false"] .lucide { transform: rotate(-90deg); }

.stay-calendar-room-label-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stay-calendar-room-label-text strong { font-size: 13px; }
.stay-calendar-room-summary { font-size: 11px; font-weight: 700; color: var(--ds-muted); white-space: nowrap; }

.stay-calendar-bed-label {
  color: var(--ds-muted);
  font-weight: 700;
  font-size: 12px;
  padding-left: 34px;
}

.stay-calendar-bed-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--sc-cols), 1fr);
  grid-template-rows: 1fr;
  border-top: 1px solid var(--ds-border);
  min-height: 44px;
  padding: 5px 0;
}

/* Weekend / today column shading painted behind the bars */
.stay-calendar-bed-cell-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.stay-calendar-bed-cell-bg.is-weekend { background: color-mix(in srgb, var(--ds-text) 3%, transparent); }
.stay-calendar-bed-cell-bg.is-today { background: color-mix(in srgb, var(--ds-primary) 6%, transparent); }

/* Empty-track status flag — shown only when a bed has no stay bar covering
   this view; reflects live Bed.status, not a booking. */
.stay-track-flag {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  justify-self: start;
  align-self: center;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  pointer-events: none;
}
.stay-track-flag .lucide { width: 11px; height: 11px; }

.stay-track-flag-available { color: color-mix(in srgb, var(--ds-success) 65%, black 10%); background: color-mix(in srgb, var(--ds-success) 10%, transparent); }
.stay-track-flag-cleaning { color: #6d28d9; background: color-mix(in srgb, #7c3aed 12%, transparent); }
.stay-track-flag-maintenance,
.stay-track-flag-blocked { color: color-mix(in srgb, var(--ds-danger) 80%, black 5%); background: color-mix(in srgb, var(--ds-danger) 10%, transparent); }
.stay-track-flag-reserved { color: color-mix(in srgb, var(--ds-primary) 70%, black 5%); background: color-mix(in srgb, var(--ds-primary) 9%, transparent); }
.stay-track-flag-active { color: #fff; background: var(--ds-primary); }

.stay-track-book-hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 4px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-primary);
  background: color-mix(in srgb, var(--ds-primary) 7%, var(--ds-surface) 90%);
  border: 1px dashed color-mix(in srgb, var(--ds-primary) 35%, transparent);
  text-decoration: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.stay-track-book-hint .lucide { width: 13px; height: 13px; }
.stay-calendar-bed-track:hover .stay-track-book-hint { opacity: 1; }

/* ── Reservation bar ("stay capsule") ─────────────────────────────────
   One continuous bar spanning check-in → check-out, color-coded by real
   stay state rather than booking channel: deep navy = checked in now,
   soft blue = confirmed & arriving later, soft amber = pending approval,
   muted grey = already checked out. A small orange flag marks a bar whose
   last night is tonight, regardless of bucket. ─────────────────────────── */

.stay-capsule {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  min-width: 0;
  padding: 4px 10px;
  margin: 0 2px;
  border-radius: 10px;
  text-decoration: none;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter .12s ease, transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
/* Name/meta truncate themselves (below); the capsule itself must NOT clip
   overflow or the hover tooltip — positioned outside its box — would be
   cut off by an ancestor `overflow: hidden`. */

.stay-capsule:hover,
.stay-capsule:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(17, 24, 39, .14);
  z-index: 3;
}

.stay-capsule.is-dimmed { opacity: .22; filter: grayscale(.3); }

/* Every bucket reads as the same family of card — a pastel fill with a
   solid, saturated left-edge stripe in its hue — so "checked out" reads as
   a color, not a dead grey box. Only the active bucket breaks the pattern
   with a full solid fill, since it's the one state a receptionist needs to
   spot first. */
.stay-capsule {
  border-left-width: 4px;
  border-left-style: solid;
}

/* Checked in now — the one bucket that earns a solid, confident fill */
.stay-capsule-active {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}

/* Confirmed, arriving later — pastel blue card, deep blue accent stripe */
.stay-capsule-upcoming {
  background: color-mix(in srgb, var(--ds-primary) 13%, var(--ds-surface));
  border-left-color: var(--ds-primary);
  color: color-mix(in srgb, var(--ds-primary) 85%, black 5%);
}

/* Pending approval — pastel amber card, amber accent stripe */
.stay-capsule-pending {
  background: color-mix(in srgb, var(--ds-warning) 20%, var(--ds-surface));
  border-left-color: var(--ds-warning);
  color: #7a4a00;
}

/* Checked out — pastel violet card, violet accent stripe. Only shown
   because its date range still overlaps the visible window; violet keeps
   it a color in its own right rather than a flat "disabled" grey. */
.stay-capsule-departed {
  background: color-mix(in srgb, #7c3aed 13%, var(--ds-surface));
  border-left-color: #7c3aed;
  color: #5b21b6;
}

.stay-capsule-checkout-today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-accent) 70%, transparent); }
.stay-capsule-checkout-today::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-accent) 25%, transparent);
}

.stay-capsule-open-start { border-top-left-radius: 4px; border-bottom-left-radius: 4px; margin-left: 0; }
.stay-capsule-open-end { border-top-right-radius: 4px; border-bottom-right-radius: 4px; margin-right: 0; }

.stay-capsule-overlap { outline: 2px solid var(--ds-danger); outline-offset: 1px; }

.stay-capsule-avatar {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  background: rgba(255, 255, 255, .22);
}
.stay-capsule-upcoming .stay-capsule-avatar,
.stay-capsule-pending .stay-capsule-avatar,
.stay-capsule-departed .stay-capsule-avatar { background: color-mix(in srgb, currentColor 14%, transparent); }

.stay-capsule-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.stay-capsule-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.stay-capsule-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  opacity: .8;
}

.stay-capsule-narrow .stay-capsule-meta { display: none; }
.stay-capsule-narrow .stay-capsule-source { display: none; }

.stay-capsule-source { display: inline-flex; flex: none; opacity: .85; }
.stay-capsule-source .lucide { width: 12px; height: 12px; }

.stay-capsule-warn { flex: none; width: 13px; height: 13px; color: var(--ds-danger); }
.stay-capsule-warn-inline { width: 14px; height: 14px; color: var(--ds-danger); vertical-align: middle; margin-right: 4px; }

/* Rich hover tooltip — real quick-details, not a fabricated panel; the bar
   itself still links through to the actual stay record for actions. */
.stay-capsule-tooltip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 10;
  display: none;
  flex-direction: column;
  gap: 3px;
  min-width: 220px;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ds-text);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  pointer-events: none;
}
.stay-capsule-tooltip strong { font-size: 12px; font-weight: 850; }
.stay-capsule-tooltip em { opacity: .7; font-style: normal; margin-top: 2px; }
.stay-capsule:hover .stay-capsule-tooltip,
.stay-capsule:focus-visible .stay-capsule-tooltip { display: flex; }

/* ── Stay calendar summary strip + legend + room-view bar ────────────── */

.room-occupancy-bar {
  position: relative;
  height: 8px;
  min-width: 90px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-text) 8%, transparent);
  overflow: hidden;
}
.room-occupancy-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ds-primary);
}

.legend-section { padding: 0 18px 18px; }
.legend-section:first-of-type { padding-top: 4px; }
.legend-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 850;
  color: var(--ds-text);
}
.legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legend-list li {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--ds-muted);
}
.legend-note { padding: 0 18px 4px; margin: 0; font-size: 12px; color: var(--ds-muted); }
.legend-note a { color: var(--ds-primary); font-weight: 700; }

.stay-capsule-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: middle;
  flex: none;
}
.stay-capsule-legend-swatch.stay-capsule-legend-active { background: var(--ds-primary); }
.stay-capsule-legend-swatch.stay-capsule-legend-upcoming { background: color-mix(in srgb, var(--ds-primary) 25%, var(--ds-surface)); border: 1px solid color-mix(in srgb, var(--ds-primary) 40%, transparent); }
.stay-capsule-legend-swatch.stay-capsule-legend-pending { background: color-mix(in srgb, var(--ds-warning) 35%, var(--ds-surface)); border: 1px solid color-mix(in srgb, var(--ds-warning) 55%, transparent); }
.stay-capsule-legend-swatch.stay-capsule-legend-departed { background: color-mix(in srgb, #7c3aed 20%, var(--ds-surface)); border: 1px solid #7c3aed; }
.stay-capsule-legend-swatch.stay-capsule-legend-checkout { background: var(--ds-surface); border: 1px solid var(--ds-accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-accent) 20%, transparent); }

.stay-track-flag-legend {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-right: 8px;
}
.stay-track-flag-legend.stay-track-flag-available { color: color-mix(in srgb, var(--ds-success) 65%, black 10%); background: color-mix(in srgb, var(--ds-success) 10%, transparent); }
.stay-track-flag-legend.stay-track-flag-cleaning { color: #6d28d9; background: color-mix(in srgb, #7c3aed 12%, transparent); }
.stay-track-flag-legend.stay-track-flag-maintenance { color: color-mix(in srgb, var(--ds-danger) 80%, black 5%); background: color-mix(in srgb, var(--ds-danger) 10%, transparent); }
.stay-track-flag-legend.stay-track-flag-blocked { color: color-mix(in srgb, var(--ds-danger) 80%, black 5%); background: color-mix(in srgb, var(--ds-danger) 10%, transparent); }
.stay-track-flag-legend.stay-track-flag-reserved { color: color-mix(in srgb, var(--ds-primary) 70%, black 5%); background: color-mix(in srgb, var(--ds-primary) 9%, transparent); }

/* Always-visible color key strip under the grid — same palette as the
   bars/flags above, just condensed into one row for a quick glance. */
.stay-calendar-legend-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--ds-border);
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid transparent;
}

.legend-chip-active { background: var(--ds-primary); color: #fff; }
.legend-chip-upcoming { background: color-mix(in srgb, var(--ds-primary) 12%, var(--ds-surface)); border-color: color-mix(in srgb, var(--ds-primary) 25%, transparent); color: color-mix(in srgb, var(--ds-primary) 85%, black 5%); }
.legend-chip-pending { background: color-mix(in srgb, var(--ds-warning) 18%, var(--ds-surface)); border-color: color-mix(in srgb, var(--ds-warning) 45%, transparent); color: #7a4a00; }
.legend-chip-departed { background: color-mix(in srgb, #7c3aed 13%, var(--ds-surface)); border-color: #7c3aed; color: #5b21b6; }
.legend-chip-checkout { background: var(--ds-surface); border-color: var(--ds-accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-accent) 20%, transparent); color: color-mix(in srgb, var(--ds-accent) 70%, black 20%); }
.legend-chip-flag.legend-chip-cleaning { color: #6d28d9; background: color-mix(in srgb, #7c3aed 12%, transparent); }
.legend-chip-flag.legend-chip-maintenance,
.legend-chip-flag.legend-chip-blocked { color: color-mix(in srgb, var(--ds-danger) 80%, black 5%); background: color-mix(in srgb, var(--ds-danger) 10%, transparent); }

/* Bed Management collapsible — bottom section of the Stay Calendar page.
   `<summary>` reuses `.panel.panel-head` so the closed state looks
   identical to a normal panel header; only the marker/chevron is custom. */
.bed-management-section {
  margin-top: 24px;
}

.bed-management-section > summary {
  list-style: none;
  cursor: pointer;
  margin-bottom: 0;
}

.bed-management-section > summary::-webkit-details-marker,
.bed-management-section > summary::marker {
  display: none;
  content: '';
}

.bed-management-section[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

.bed-management-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-muted);
}

.bed-management-toggle .lucide {
  width: 18px;
  height: 18px;
  transition: transform .15s ease;
}

.bed-management-section[open] .bed-management-toggle .lucide {
  transform: rotate(180deg);
}

.bed-management-body {
  border: 1px solid var(--ds-border);
  border-top: 0;
  border-bottom-left-radius: var(--ds-radius);
  border-bottom-right-radius: var(--ds-radius);
  background: var(--ds-bg);
  padding: 24px;
  gap: 24px;
  /* `main.content` in the app shell is a flex item whose height is
     clamped to the viewport (a pre-existing site-wide characteristic —
     confirmed on other pages too, not introduced here) with no page-level
     vertical scroll path. This section can be much taller than the
     viewport once expanded, so it gets its own scroll region rather than
     relying on page scroll to reach it. */
  max-height: 65vh;
  overflow-y: auto;
}

/* Only apply flex layout — and thus only actually render this box — while
   the <details> is open. Setting display unconditionally on
   .bed-management-body would override the browser's native behavior of
   hiding non-summary children when a <details> is closed. */
.bed-management-section[open] .bed-management-body {
  display: flex;
  flex-direction: column;
}

.bed-management-body > .stat-grid,
.bed-management-body > .room-map-board,
.bed-management-body > .panel {
  margin: 0;
}

/* Per-bed status dropdown truncation fix — the .room-bed card in the
   compact Bed Map grid can be as narrow as 82px, and a native <select>
   with no width/overflow rules shrinks to fit and lets the browser cut
   its selected-option text mid-word (e.g. "Availab"). Constraining the
   select's own box and giving it ellipsis overflow keeps the full label
   available on open while never hard-cutting the closed-state text. */
.room-bed select {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Visual Room / Bed assignment picker (group check-in approval) ───
   Wider modal + a two-panel layout: booking details on the left, the room
   selector and a visual bed grid on the right. Beds render as large
   tappable cards (available/selected/occupied/reserved/unavailable)
   instead of a checkbox list — see the JS in checkin_detail.html, which
   drives the real (visually hidden) `bed`/`extra_beds` form fields. */
.modal-wide {
  width: min(920px, calc(100% - 28px));
}

.bed-assign-modal .bed-assign-grid {
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
}

@media (max-width: 760px) {
  .bed-assign-modal .bed-assign-grid {
    grid-template-columns: 1fr;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Booking summary strip + progress bar, above the two-panel grid */
.bed-assign-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--ops-canvas);
  border: 1px solid var(--ops-border);
}

.bas-item {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bas-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bas-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #eef4ff;
  color: var(--ops-blue-dark);
  padding: 7px;
  box-sizing: border-box;
}

.bas-label {
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ops-subtle);
}

.bas-value {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ops-ink);
}

.bed-assign-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

/* `p { margin: 0; }` is a global reset, so a plain <p class="form-text">
   sits flush against whatever follows it (e.g. .bed-assign-progress right
   above) unless given its own spacing back. Only affects block use
   (<p>) — vertical margin on the inline <small class="form-text"> use
   elsewhere has no layout effect, so this is safe either way. */
.form-text {
  margin: 0 0 16px;
}

.bap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 850;
  color: var(--ops-ink);
}

.bap-count {
  color: var(--ops-subtle);
  font-weight: 700;
}

.bap-track {
  height: 8px;
  border-radius: 999px;
  background: var(--ops-canvas);
  border: 1px solid var(--ops-border);
  overflow: hidden;
}

.bap-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ops-blue), var(--ops-blue-dark));
  transition: width .2s ease;
}

.bap-fill.is-complete {
  background: linear-gradient(90deg, #16a34a, #08743e);
}

/* Room price — pulled out of the plain field list into its own highlighted
   box so it isn't easy to miss while assigning beds. */
.price-box {
  padding: 12px;
  border-radius: 12px;
  background: #eef4ff;
  border: 1px solid #d7e4ff;
  margin: 0 0 12px;
}

.price-box-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--ops-blue-dark);
  font-size: 12px;
  font-weight: 850;
}

.price-box-head .lucide {
  width: 14px;
  height: 14px;
}

.price-box-head label {
  display: inline;
  margin: 0;
  color: inherit;
}

.price-box input {
  width: 100%;
  background: var(--ops-panel);
}

/* Room selector + summary */
.bed-room-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.bed-room-select label {
  margin: 0;
}

.bed-room-select select {
  width: 100%;
}

.bed-room-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ops-canvas);
  border: 1px solid var(--ops-border);
  margin-bottom: 14px;
}

/* The bare `hidden` attribute (used by the bed-picker JS to toggle these)
   is same-specificity as the class rules above, so without this override
   the `display` set here wins and the element stays visible — see the
   .account-sheet[hidden] note in staff-mobile.css for the same issue. */
.bed-room-summary[hidden],
.bed-assign-warning[hidden],
.bed-ready-summary[hidden] {
  display: none !important;
}

.bed-room-summary strong {
  font-size: 14px;
  color: var(--ops-ink);
}

.brs-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brs-name .lucide {
  width: 16px;
  height: 16px;
  color: var(--ops-blue);
}

.bed-room-summary span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ops-subtle);
}

.bed-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.bed-grid-head span {
  font-size: 12px;
  font-weight: 850;
  color: var(--ops-subtle);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Visual bed grid — large tappable cards, not checkboxes */
/* Fixed 4 columns rather than auto-fill: auto-fill stretches to whatever
   width the modal happens to have (6 columns in the wide Change Room
   modal vs. 4 in the narrower Assign Bed one), and a partial last row
   then sits flush-left with empty grid tracks trailing it, reading as
   off-balance. A fixed column count keeps the card size — and the grid's
   look — consistent across both modals and any row count. */
.bed-visual-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 2px;
}

@media (max-width: 480px) {
  .bed-visual-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 12px 6px;
  border-radius: 12px;
  border: 1.5px solid var(--ops-border);
  background: var(--ops-panel);
  color: var(--ops-ink);
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.bed-card strong {
  font-size: 12px;
  font-weight: 850;
}

.bed-card span {
  font-size: 10.5px;
  font-weight: 700;
  opacity: .85;
}

.bed-card .lucide {
  width: 16px;
  height: 16px;
}

.bed-card.available:hover {
  border-color: var(--ops-blue);
  transform: translateY(-1px);
}

.bed-card.selected {
  background: linear-gradient(135deg, var(--ops-blue), var(--ops-blue-dark));
  border-color: transparent;
  color: #fff;
}

.bed-card.occupied,
.bed-card.unavailable {
  background: var(--ops-canvas);
  border-color: var(--ops-border);
  color: var(--ops-subtle);
  cursor: not-allowed;
}

.bed-card.reserved {
  background: #fff4db;
  border-color: #fde3a7;
  color: #935400;
  cursor: not-allowed;
}

.bed-card:disabled {
  cursor: not-allowed;
}

.bed-card:focus-visible {
  outline: 2px solid var(--ops-blue);
  outline-offset: 2px;
}

.bed-card-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--ops-blue-dark);
}

.bed-card-badge .lucide {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}

.bed-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ops-subtle);
}

.bed-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bed-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
  background: var(--ops-panel);
  border: 1.5px solid var(--ops-border);
}

.bed-legend-dot.available { border-color: var(--ops-blue); }
.bed-legend-dot.selected { background: linear-gradient(135deg, var(--ops-blue), var(--ops-blue-dark)); border-color: transparent; }
.bed-legend-dot.occupied { background: var(--ops-canvas); }
.bed-legend-dot.reserved { background: #fff4db; border-color: #fde3a7; }
.bed-legend-dot.unavailable { background: var(--ops-canvas); }

/* Selected-beds summary row */
.bed-selected-summary {
  margin-bottom: 12px;
}

.bed-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.bed-picker-count {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 850;
  color: var(--ops-subtle);
  background: var(--ops-canvas);
  border: 1px solid var(--ops-border);
  white-space: nowrap;
}

.bed-picker-count.is-complete {
  color: #08743e;
  background: #dcfce7;
  border-color: #bbf0d1;
}

/* Flex-wrap, not a rigid grid — a filled slot's bed label (e.g. "D3/D3-1")
   can run noticeably longer than a plain "D2/A3", and forcing every slot
   into an equal grid column truncated those into unreadable "D3/D…"
   chips. Each slot now sizes to its own content instead. */
.bed-slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bed-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  min-height: 44px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}

.bed-slot-empty {
  width: 44px;
  border: 1.5px dashed var(--ops-border);
  color: var(--ops-border);
  background: var(--ops-panel);
}

.bed-slot-empty .lucide {
  width: 16px;
  height: 16px;
}

.bed-slot-filled {
  position: relative;
  gap: 6px;
  padding: 0 26px 0 10px;
  background: linear-gradient(135deg, var(--ops-blue), var(--ops-blue-dark));
  color: #fff;
  border: 1.5px solid transparent;
}

.bed-slot-filled span {
  white-space: nowrap;
}

.bed-slot-filled button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.25);
  color: #fff;
  cursor: pointer;
}

.bed-slot-filled button .lucide {
  width: 10px;
  height: 10px;
}

.bed-assign-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff4db;
  border: 1px solid #fde3a7;
  color: #935400;
  font-size: 12.5px;
  font-weight: 700;
}

.bed-assign-warning .lucide {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.bed-ready-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #dcfce7;
  border: 1px solid #bbf0d1;
  color: #08743e;
}

.bed-ready-summary .lucide {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.bed-ready-summary strong {
  display: block;
  font-size: 13px;
}

.bed-ready-summary span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
}

.button.is-disabled,
.button:disabled {
  opacity: .55;
  cursor: not-allowed;
}