.guests-section { padding: 0 0 24px; }

.guests-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.guests-search {
  flex: 1 1 280px;
  min-width: 240px;
  height: 42px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.guests-search:focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(195,155,92,0.18); }

.guests-filter select {
  height: 42px; padding: 0 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 14px;
}

.guests-count { color: var(--text-muted); font-size: 13px; margin-left: auto; }

.guests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.guest-card {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  cursor: pointer;
  position: relative;
}
.guest-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.guest-card__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.guest-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d9bd88, #a5813c);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600; font-size: 15px;
  flex-shrink: 0;
}
.guest-name { font-weight: 600; font-size: 14.5px; }
.guest-meta { color: var(--text-muted); font-size: 12px; }
.guest-stats {
  display: flex; gap: 14px; margin-top: 10px;
  color: var(--text-muted); font-size: 12px;
}
.guest-stats b { color: var(--text); font-size: 13px; }
.guest-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Guest detail drawer */
.guest-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(6,6,8,0.45);
  display: none;
  z-index: var(--z-modal);
}
.guest-drawer-overlay.open { display: block; }
.guest-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(520px, 96vw);
  background: var(--surface);
  color: var(--text);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 260ms var(--ease);
  display: flex; flex-direction: column;
}
.guest-drawer-overlay.open .guest-drawer { transform: translateX(0); }
.guest-drawer-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.guest-drawer-close {
  margin-left: auto;
  background: transparent; border: none;
  color: var(--text-muted); font-size: 22px; cursor: pointer;
}
.guest-drawer-body { flex: 1; overflow: auto; padding: 18px 20px; }

.guest-section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-subtle); margin: 18px 0 8px;
}

.visit-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.visit-row small { color: var(--text-muted); }

/* Minimal reset */
.guests-toolbar {
  margin-bottom: 18px;
}

.guests-search,
.guests-filter select {
  border-radius: 10px;
  box-shadow: none;
}

.guests-grid {
  gap: 14px;
}

.guest-card {
  border-radius: 14px;
  box-shadow: none;
}

.guest-card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* ════════════════════════════════════════════════════════════ */
/* SR-tablet — Dark Guests page + guest detail drawer            */
/* ════════════════════════════════════════════════════════════ */

#guests-section,
.guests-section {
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
}

/* Search input across the top */
.guests-toolbar input,
.guests-search input,
.guests-section input[type="search"],
.guests-section input[type="text"] {
  background: #1B1F26 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font: 500 13px/1.3 var(--srt-font, system-ui) !important;
}

.guests-toolbar input::placeholder,
.guests-search input::placeholder {
  color: #6E7480;
}

.guests-toolbar input:focus,
.guests-search input:focus {
  border-color: #06B6D4 !important;
  outline: none;
}

.guests-count {
  color: #6E7480 !important;
}

/* VIP filter dropdown — dark theme */
.guests-filter select,
#guests-vip-filter,
[data-theme="light"] #guests-vip-filter {
  background: #1B1F26 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 8px 32px 8px 12px !important;
  font: 500 12px/1 var(--srt-font, system-ui) !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B4BAC7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  box-shadow: none !important;
}
#guests-vip-filter:focus {
  border-color: #06B6D4 !important;
  outline: none;
}
#guests-vip-filter option {
  background: #1B1F26;
  color: #FFFFFF;
}

/* Export CSV button — dark theme */
#guests-export,
[data-theme="light"] #guests-export {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #D4D7DE !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font: 600 11px/1 var(--srt-font, system-ui) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none !important;
  cursor: pointer;
}
#guests-export:hover {
  border-color: rgba(6,182,212,0.40) !important;
  color: #06B6D4 !important;
}

/* Guest cards in the grid */
.guest-card {
  background: #14161B !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.guest-card:hover {
  border-color: rgba(255,255,255,0.18) !important;
  background: #1B1F26 !important;
}

.guest-name {
  color: #FFFFFF !important;
}

.guest-meta {
  color: #B4BAC7 !important;
}

.guest-stats {
  color: #6E7480 !important;
}

.guest-stats b {
  color: #FFFFFF !important;
}

.guest-avatar {
  background: rgba(6,182,212,0.18) !important;
  color: #67E8F9 !important;
  border: 1px solid rgba(6,182,212,0.40) !important;
}

/* ── Guest detail drawer (right side panel) ── */
.guest-drawer-overlay {
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(2px);
}

.guest-drawer {
  background: #14161B !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
  box-shadow: -8px 0 24px rgba(0,0,0,0.40) !important;
  /* Keep the original position: fixed; right: 0 anchoring — `position: fixed`
     still establishes a containing block for the ::before stripe below. */
}

.guest-drawer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #06B6D4;
}

.guest-drawer-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 14px 18px !important;
}

.guest-drawer-header * {
  color: inherit;
}

.guest-drawer-header h2,
.guest-drawer-header h3,
#gd-name {
  color: #FFFFFF !important;
  font: 700 18px/1.2 var(--srt-font, system-ui) !important;
}

#gd-meta {
  color: #B4BAC7 !important;
  font: 500 12px/1.3 var(--srt-font, system-ui) !important;
}

.guest-drawer-close {
  background: #262B33 !important;
  border: none !important;
  color: #B4BAC7 !important;
  border-radius: 999px !important;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.guest-drawer-close:hover {
  background: #2A2F3D !important;
  color: #FFFFFF !important;
}

.guest-drawer-body {
  background: #14161B !important;
  color: #FFFFFF !important;
}

/* The 4 KPI tiles inside the drawer (Visits / Cancels / No-shows / Spend)
   are rendered as generic .card divs from the global stylesheet. Override
   them here when they appear inside the guest drawer. */
.guest-drawer-body .card,
.guest-drawer .card {
  background: #1B1F26 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

.guest-drawer-body .card > div:first-child,
.guest-drawer .card > div:first-child {
  color: #FFFFFF !important;
  font-feature-settings: "tnum" 1;
}

.guest-drawer-body .card > div:last-child,
.guest-drawer .card > div:last-child {
  color: #6E7480 !important;
  font: 600 11px/1 var(--srt-font, system-ui) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Section labels (RECENT VISITS, ACTIVITY) */
.guest-section-title {
  color: #6E7480 !important;
  font: 700 10px/1 var(--srt-font, system-ui) !important;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin: 16px 0 8px !important;
}

/* Visit / activity rows */
.visit-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 10px 0 !important;
  color: #FFFFFF !important;
}

.visit-row:last-child {
  border-bottom: none !important;
}

.visit-row > div > div:first-child {
  color: #FFFFFF !important;
  font: 600 13px/1.3 var(--srt-font, system-ui) !important;
}

.visit-row small {
  color: #6E7480 !important;
  font: 500 11px/1.3 var(--srt-font, system-ui) !important;
}

.visit-row b {
  color: #FFFFFF !important;
}

/* Badges inside visit/activity rows */
.guest-drawer .badge,
.guest-drawer-body .badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font: 700 10px/1 var(--srt-font, system-ui) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none !important;
  box-shadow: none !important;
}

.guest-drawer .badge--vip,
.guest-drawer-body .badge--vip {
  background: rgba(245,158,11,0.18) !important;
  color: #FCD34D !important;
}

.guest-drawer .badge--success,
.guest-drawer-body .badge--success {
  background: rgba(16,185,129,0.20) !important;
  color: #6EE7B7 !important;
}

.guest-drawer .badge--info,
.guest-drawer-body .badge--info {
  background: rgba(59,130,246,0.20) !important;
  color: #93C5FD !important;
}

.guest-drawer .badge--warning,
.guest-drawer-body .badge--warning {
  background: rgba(245,158,11,0.20) !important;
  color: #FCD34D !important;
}

.guest-drawer .badge--danger,
.guest-drawer-body .badge--danger {
  background: rgba(239,68,68,0.20) !important;
  color: #FCA5A5 !important;
}

/* Admin-configurable guest labels — per-label color via --label-color */
.badge--label,
.guest-tags .badge--label,
.guest-drawer .badge--label,
.guest-drawer-body .badge--label {
  --label-color: #06B6D4;
  background: color-mix(in srgb, var(--label-color) 18%, transparent) !important;
  color: var(--label-color) !important;
  border: 1px solid color-mix(in srgb, var(--label-color) 35%, transparent) !important;
}

/* Label pill inside the edit-labels picker */
.gd-label-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
}
.gd-label-pick:hover { border-color: rgba(255,255,255,0.22); }
.gd-label-pick input { accent-color: var(--gd-label, #06B6D4); }
.gd-label-pill {
  --gd-label: #06B6D4;
  font: 600 11px/1 var(--srt-font, system-ui);
  color: var(--gd-label);
}

.guest-drawer .badge:not([class*="badge--"]),
.guest-drawer-body .badge:not([class*="badge--"]) {
  background: rgba(255,255,255,0.10) !important;
  color: #B4BAC7 !important;
}

/* "Edit" toggle in the header row */
.guest-drawer-body #gd-edit-toggle,
.guest-drawer .btn,
.guest-drawer .btn-sm {
  background: #262B33 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font: 600 11px/1 var(--srt-font, system-ui) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.guest-drawer-body #gd-edit-toggle:hover,
.guest-drawer .btn:hover {
  background: #2A2F3D !important;
  border-color: rgba(255,255,255,0.18) !important;
}

.cp-empty {
  color: #6E7480 !important;
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,0.08) !important;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  font: 500 13px/1.4 var(--srt-font, system-ui) !important;
}

/* ── Guest edit form inside the drawer ───────────────────────── */
.guest-drawer .form-input,
.guest-drawer-body .form-input,
.guest-drawer input[type="text"],
.guest-drawer input[type="email"],
.guest-drawer input[type="tel"],
.guest-drawer textarea,
.guest-drawer select {
  background: #1B1F26 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 9px 11px !important;
  font: 500 13px/1.4 var(--srt-font, system-ui) !important;
  box-sizing: border-box;
  width: 100%;
  outline: none;
  transition: border-color 0.15s ease;
}
.guest-drawer .form-input:focus,
.guest-drawer-body .form-input:focus,
.guest-drawer input:focus,
.guest-drawer textarea:focus,
.guest-drawer select:focus {
  border-color: #06B6D4 !important;
}
.guest-drawer .form-input::placeholder,
.guest-drawer textarea::placeholder,
.guest-drawer input::placeholder {
  color: #4B5159 !important;
}
.guest-drawer .form-input option,
.guest-drawer select option {
  background: #1B1F26;
  color: #FFFFFF;
}
.guest-drawer label {
  color: #6E7480 !important;
  font: 700 10px/1 var(--srt-font, system-ui) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Edit panel card inside drawer */
.guest-drawer-body .card {
  background: #15181E !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}
/* Cancel/Save buttons */
.guest-drawer-body .btn,
.guest-drawer .btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #D4D7DE !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font: 700 11px/1 var(--srt-font, system-ui) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.guest-drawer-body .btn:hover,
.guest-drawer .btn:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.24) !important;
}
.guest-drawer-body .btn-primary,
.guest-drawer .btn-primary {
  background: #06B6D4 !important;
  border-color: #06B6D4 !important;
  color: #0B1014 !important;
}
.guest-drawer-body .btn-primary:hover,
.guest-drawer .btn-primary:hover {
  background: #0891B2 !important;
  border-color: #0891B2 !important;
}
.guest-drawer input[type="checkbox"] {
  width: auto !important;
  accent-color: #06B6D4;
  margin-right: 6px;
}

/* ── LIGHT THEME fixes (the rules above intentionally set dark) ── */
[data-theme="light"] .guests-search input,
[data-theme="light"] .guests-toolbar input,
[data-theme="light"] .guests-section input[type="text"],
[data-theme="light"] .guests-filter select,
[data-theme="light"] #guests-vip-filter {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}
[data-theme="light"] .guests-search input::placeholder,
[data-theme="light"] .guests-toolbar input::placeholder { color: #94A3B8 !important; }
[data-theme="light"] #guests-vip-filter option { background: #FFFFFF; color: #0F172A; }
[data-theme="light"] .guest-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}
[data-theme="light"] .guest-card:hover { background: #F8FAFC !important; }

/* ── Light-mode contrast completion ──────────────────────────────
   Card text + the Export CSV button were left white/pale by the dark
   block above. Recolor them for light mode. Dark mode untouched. */
[data-theme="light"] .guest-name { color: #0F172A !important; }
[data-theme="light"] .guest-meta { color: #475569 !important; }
[data-theme="light"] .guest-stats { color: #64748B !important; }
[data-theme="light"] .guest-stats b { color: #0F172A !important; }
[data-theme="light"] .guests-count { color: #64748B !important; }

[data-theme="light"] #guests-export {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}
[data-theme="light"] #guests-export:hover {
  border-color: #06B6D4 !important;
  color: #0e7490 !important;
}

/* ════════════════════════════════════════════════════════════ */
/* Reservations list — repurposed Guests view (date + shift)     */
/* ════════════════════════════════════════════════════════════ */
.res-date-field { display: inline-flex; align-items: center; gap: 8px; }
.res-date-label {
  font: 700 10px/1 var(--srt-font, system-ui);
  text-transform: uppercase; letter-spacing: .08em;
  color: #6E7480;
}
.guests-toolbar input[type="date"],
.res-date {
  background: #1B1F26 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font: 500 13px/1.3 var(--srt-font, system-ui) !important;
  outline: none;
}
.guests-toolbar input[type="date"]:focus,
.res-date:focus { border-color: #06B6D4 !important; }
.res-date::-webkit-calendar-picker-indicator { filter: invert(0.75); cursor: pointer; }

/* Summary tiles — Total Reservations / Total Guests */
.res-summary { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.res-stat {
  flex: 1 1 180px;
  background: #14161B;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
}
.res-stat__num {
  font: 700 26px/1 var(--srt-font, system-ui);
  color: #FFFFFF;
  font-feature-settings: "tnum" 1;
}
.res-stat__label {
  margin-top: 6px;
  font: 600 11px/1 var(--srt-font, system-ui);
  text-transform: uppercase; letter-spacing: .08em;
  color: #6E7480;
}

/* Reservation card meta chips */
.res-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.res-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #B4BAC7;
  font: 600 11px/1.3 var(--srt-font, system-ui);
}
.res-chip--time { background: rgba(255,255,255,0.10); color: #FFFFFF; }
.res-chip--shift {
  background: rgba(6,182,212,0.16);
  color: #67E8F9;
  border: 1px solid rgba(6,182,212,0.35);
}
.res-card__notes {
  margin-top: 8px;
  color: #B4BAC7;
  font: 500 12px/1.4 var(--srt-font, system-ui);
}
/* A reservation card is only clickable when a guest profile is linked. */
.res-card:not([data-guest-id]) { cursor: default; }

/* ── Light theme ── */
[data-theme="light"] .res-date-label,
[data-theme="light"] .res-stat__label { color: #64748B; }
[data-theme="light"] .guests-toolbar input[type="date"],
[data-theme="light"] .res-date {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}
[data-theme="light"] .res-date::-webkit-calendar-picker-indicator { filter: none; }
[data-theme="light"] .res-stat {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
}
[data-theme="light"] .res-stat__num { color: #0F172A; }
[data-theme="light"] .res-chip { background: #F1F5F9; color: #475569; }
[data-theme="light"] .res-chip--time { background: #E2E8F0; color: #0F172A; }
[data-theme="light"] .res-card__notes { color: #475569; }