/**
 * isReserved - Custom styles
 * Complements Tailwind utility classes
 * Colors are driven by CSS variables injected from THEME in app.js
 */

/* Logo — Libre Baskerville Italic */
.logo-title {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-style: italic;
}

/* Desktop: fixed width container (72rem = max-w-6xl) */
@media (min-width: 1280px) {
  body > div.max-w-6xl {
    width: 72rem;
    max-width: 72rem;
  }
}

/* Tab sections: hidden must override md:flex (display: none takes precedence) */
#waitlistSection.hidden,
#reservationSection.hidden,
#completedSection.hidden {
  display: none !important;
}

/* ── Table section borders (theme colors) ─────────────────────────────────── */

.table-theme-waitlist section,
.table-theme-waitlist [class*="border-slate"],
.table-theme-waitlist .queue-card {
  border-color: var(--tab-wl-text) !important;
}

.table-theme-reservation section,
.table-theme-reservation [class*="border-slate"],
.table-theme-reservation .reservation-card {
  border-color: var(--tab-res-text) !important;
}

.table-theme-completed section,
.table-theme-completed [class*="border-slate"],
.table-theme-completed .completed-card {
  border-color: var(--tab-comp-text) !important;
}

/* No border on table header */
.table-theme-waitlist thead,
.table-theme-reservation thead,
.table-theme-completed thead,
.table-theme-waitlist thead tr th,
.table-theme-reservation thead tr th,
.table-theme-completed thead tr th {
  border: none !important;
}

/* Sticky table header — solid background for desktop scroll */
@media (min-width: 768px) {
  .table-theme-waitlist thead,
  .table-theme-reservation thead,
  .table-theme-completed thead {
    background-color: rgb(248 250 252); /* slate-50 */
  }
}

/* Section header (title bar) — revert bottom border to default, keep h2 theme color */
.table-theme-waitlist > section:first-of-type > div:first-child {
  border-color: rgb(226 232 240) !important; /* slate-200 */
}
.table-theme-waitlist > section:first-of-type > div:first-child h2 {
  color: var(--tab-wl-text);
}

.table-theme-reservation > section:first-of-type > div:first-child {
  border-color: rgb(226 232 240) !important;
}
.table-theme-reservation > section:first-of-type > div:first-child h2 {
  color: var(--tab-res-text);
}

.table-theme-completed > section:first-of-type > div:first-child {
  border-color: rgb(226 232 240) !important;
}
.table-theme-completed > section:first-of-type > div:first-child h2 {
  color: var(--tab-comp-text);
}

/* Mobile section title — same theme colors */
.table-theme-waitlist > section:last-of-type > h2:first-child {
  color: var(--tab-wl-text);
}
.table-theme-reservation > section:last-of-type > h2:first-child {
  color: var(--tab-res-text);
}
.table-theme-completed > section:last-of-type > h2:first-child {
  color: var(--tab-comp-text);
}

/* ── Queue table row ─────────────────────────────────────────────────────── */

.queue-row {
  transition: background-color 0.15s ease;
}

.queue-row:hover {
  background-color: rgb(248 250 252 / 0.5);
}

/* ── Reservation table row ───────────────────────────────────────────────── */

.reservation-row {
  transition: background-color 0.15s ease;
}

.reservation-row:hover {
  background-color: rgb(248 250 252 / 0.5);
}

/* ── Summary cards (tab navigation) ─────────────────────────────────────── */

.summary-card {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  text-align: left;
  background-color: white;
  border: 1.5px solid rgb(226 232 240);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Summary card width ratio: waitlist 30%, reservation 30%, completed 40% */
.summary-card-waitlist { flex: 3; }
.summary-card-reservation { flex: 3; }
.summary-card-completed { flex: 4; }

@media (min-width: 640px) {
  .summary-card { padding: 1rem 1.25rem; }
}

.summary-card-label {
  display: block;
  font-size: 0.75rem;
  color: rgb(100 116 139);
  transition: color 0.15s ease;
}

@media (min-width: 640px) {
  .summary-card-label { font-size: 0.875rem; }
}

.summary-card-count-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.125rem;
  min-height: 1.75rem;
}

@media (min-width: 640px) {
  .summary-card-count-row { min-height: 2rem; }
}

.summary-card-count {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(30 41 59);
  transition: color 0.15s ease;
}

@media (min-width: 640px) {
  .summary-card-count { font-size: 1.5rem; }
}

/* Add padding when icon is active to prevent overlap */
.summary-card-waitlist.tab-active .summary-card-count,
.summary-card-reservation.tab-active .summary-card-count {
  padding-right: 28px;
}

@media (min-width: 640px) {
  .summary-card-waitlist.tab-active .summary-card-count,
  .summary-card-reservation.tab-active .summary-card-count {
    padding-right: 30px;
  }
}

.summary-card-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(calc(-50% + 3px));
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.summary-card-waitlist.tab-active .summary-card-icon {
  color: var(--tab-wl-text);
  opacity: 0.7;
  visibility: visible;
}

.summary-card-reservation.tab-active .summary-card-icon {
  color: var(--tab-res-text);
  opacity: 0.7;
  visibility: visible;
}

.summary-card-waitlist.tab-active:hover .summary-card-icon,
.summary-card-reservation.tab-active:hover .summary-card-icon {
  opacity: 1;
}

/* Hover hint for inactive cards */
.summary-card-waitlist:not(.tab-active):hover {
  border-color: rgb(253 230 138);
  background-color: rgb(255 251 235);
}

.summary-card-reservation:not(.tab-active):hover {
  border-color: rgb(191 219 254);
  background-color: rgb(239 246 255);
}

/* Active — waitlist */
.summary-card-waitlist.tab-active {
  background-color: var(--tab-wl-bg);
  border-color: var(--tab-wl-text);
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08);
}

.summary-card-waitlist.tab-active .summary-card-label {
  color: var(--tab-wl-text);
  opacity: 0.75;
  font-weight: 600;
}

.summary-card-waitlist.tab-active .summary-card-count {
  color: var(--tab-wl-text);
}

/* Active — reservation */
.summary-card-reservation.tab-active {
  background-color: var(--tab-res-bg);
  border-color: var(--tab-res-text);
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08);
}

.summary-card-reservation.tab-active .summary-card-label {
  color: var(--tab-res-text);
  opacity: 0.75;
  font-weight: 600;
}

.summary-card-reservation.tab-active .summary-card-count {
  color: var(--tab-res-text);
}

/* Dual count row (completed card) */
.summary-card-dual {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.125rem;
}

.summary-card-dual-item {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.summary-card-dual-count {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(30 41 59); /* slate-800 - default inactive state */
  transition: color 0.15s ease;
}

@media (min-width: 640px) {
  .summary-card-dual-count { font-size: 1.5rem; }
}

.summary-card-dual-sep {
  color: rgb(203 213 225);
  font-size: 0.875rem;
  transition: color 0.15s ease;
}

/* Label icons: ✓ / ✗ */
.completed-icon-seated,
.completed-icon-cancelled {
  color: rgb(100 116 139); /* slate-500 - default inactive state */
}
.completed-icon-sep {
  color: rgb(203 213 225);
}

.summary-card-completed.tab-active .completed-icon-seated,
.summary-card-completed.tab-active .completed-icon-cancelled,
.summary-card-completed.tab-active .completed-icon-sep {
  color: var(--tab-comp-text);
  opacity: 0.55;
}

/* Hover hint for inactive completed card */
.summary-card-completed:not(.tab-active):hover {
  border-color: rgb(187 247 208);
  background-color: rgb(240 253 244);
}

/* Active — completed */
.summary-card-completed.tab-active {
  background-color: var(--tab-comp-bg);
  border-color: var(--tab-comp-text);
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08);
}

.summary-card-completed.tab-active .summary-card-label {
  color: var(--tab-comp-text);
  opacity: 0.75;
  font-weight: 600;
}

.summary-card-completed.tab-active .summary-card-dual-count {
  color: var(--tab-comp-text);
}

.summary-card-completed.tab-active .summary-card-dual-label,
.summary-card-completed.tab-active .summary-card-dual-sep {
  color: var(--tab-comp-text);
  opacity: 0.5;
}

/* ── Status badges ───────────────────────────────────────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 9999px;
  white-space: nowrap;
}

.status-confirmed {
  background-color: var(--badge-confirmed-bg);
  color: var(--badge-confirmed-text);
}

.status-pending {
  background-color: var(--badge-pending-bg);
  color: var(--badge-pending-text);
}

.status-waiting {
  background-color: var(--badge-waiting-bg);
  color: var(--badge-waiting-text);
}

.status-called {
  background-color: var(--badge-called-bg);
  color: var(--badge-called-text);
}

.status-sentSMS {
  background-color: var(--badge-sentSMS-bg);
  color: var(--badge-sentSMS-text);
}

.status-sentWhatsapp {
  background-color: var(--badge-sentWhatsapp-bg);
  color: var(--badge-sentWhatsapp-text);
}

.status-sentMessage {
  background-color: var(--badge-sentMessage-bg);
  color: var(--badge-sentMessage-text);
}

.status-seated {
  background-color: var(--badge-seated-bg);
  color: var(--badge-seated-text);
}

.status-cancelled {
  background-color: var(--badge-cancelled-bg);
  color: var(--badge-cancelled-text);
}

/* ── Seating options badges ──────────────────────────────────────────────── */

.badge-seating {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 9999px;
  white-space: nowrap;
}

/* ── WhatsApp icon button ────────────────────────────────────────────────── */

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  color: var(--icon-whatsapp-color);
  background: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.btn-whatsapp:hover {
  opacity: 0.75;
  background-color: var(--icon-whatsapp-hover-bg);
}

/* ── SMS icon button (desktop) ───────────────────────────────────────────── */

.btn-sms {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  color: var(--icon-sms-color);
  background: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.btn-sms:hover {
  opacity: 0.75;
  background-color: var(--icon-sms-hover-bg);
}

/* ── Chat icon button (desktop) ──────────────────────────────────────────── */

.btn-chat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  color: var(--icon-chat-color);
  background: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.btn-chat:hover {
  opacity: 0.75;
  background-color: var(--icon-chat-hover-bg);
}

/* ── Edit icon button ────────────────────────────────────────────────────── */

.btn-edit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem;
  color: var(--icon-edit-color);
  background: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  opacity: 0.6;
}

.btn-edit-icon:hover {
  opacity: 1;
  background-color: var(--icon-edit-hover-bg);
}

/* ── Header icon buttons (settings, logout) ───────────────────────────────── */

.btn-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  color: var(--icon-logout-color);
  background: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  opacity: 0.8;
}

.btn-header-icon:hover {
  opacity: 1;
  background-color: var(--icon-logout-hover-bg);
}

.btn-header-icon--no-padding-right {
  padding-right: 0;
}

.header-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 9999px;
  background-color: #cbd5e1;
  color: #64748b;
  margin-left: 0.25rem;
  flex-shrink: 0;
  overflow: hidden;
}

.header-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

.header-profile {
  cursor: pointer;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.header-profile:hover {
  opacity: 0.9;
  box-shadow: 0 0 0 2px rgb(148 163 184 / 0.4);
}

.header-right {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ── Profile Menu (Gmail-style) ──────────────────────────────────────────── */

.profile-menu-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.profile-menu-root .profile-menu-backdrop,
.profile-menu-root .profile-menu-panel {
  pointer-events: auto;
}

.profile-menu-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.profile-menu-backdrop--visible {
  opacity: 1;
  visibility: visible;
}

/* Desktop: slide-in from right */
.profile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 100%;
  height: 100%;
  background-color: white;
  box-shadow: -4px 0 24px rgb(0 0 0 / 0.15);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-menu-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: rgb(100 116 139);
  background: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.profile-menu-close:hover {
  color: rgb(51 65 85);
  background-color: rgb(241 245 249);
}
.profile-menu-close svg {
  width: 1.25rem;
  height: 1.25rem;
}

.profile-menu-panel--visible {
  transform: translateX(0);
}


/* Mobile: full-screen */
@media (max-width: 767px) {
  .profile-menu-panel {
    width: 100%;
    max-width: 100%;
    box-shadow: none;
  }
}

.profile-menu-content {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.profile-menu-branch {
  margin: 0 0 1rem 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(100 116 139);
  text-align: center;
  line-height: 1.3;
}

.profile-menu-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgb(226 232 240);
  margin-bottom: 1rem;
}

.profile-menu-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: #cbd5e1;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-menu-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-menu-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.profile-menu-avatar-fallback svg {
  width: 2rem;
  height: 2rem;
}

.profile-menu-email {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: rgb(71 85 105);
  word-break: break-all;
  text-align: center;
}

.profile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: rgb(51 65 85);
  background: none;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  transition: background-color 0.15s ease;
}

.profile-menu-item:hover {
  background-color: rgb(241 245 249);
}

.profile-menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgb(100 116 139);
}
.profile-menu-item-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.profile-menu-item-label {
  flex: 1;
}

.profile-menu-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}
.profile-menu-footer::before {
  content: '';
  flex: 0 0 100%;
  border-top: 1px solid rgb(226 232 240);
  margin: 0 1.5rem 1rem 1.5rem;
  order: -1;
}

.profile-menu-footer-link {
  font-size: 0.8125rem;
  color: rgb(100 116 139);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
}
.profile-menu-footer-link:hover {
  color: rgb(71 85 105);
  text-decoration: underline;
}

.profile-menu-footer-sep {
  font-size: 0.8125rem;
  color: rgb(203 213 225);
  user-select: none;
}

/* ── movedFrom badges ────────────────────────────────────────────────────── */

.badge-source {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 0.25rem;
  letter-spacing: 0.05em;
  vertical-align: middle;
  margin-left: 0.375rem;
}

.badge-from-reservation {
  background-color: var(--badge-from-res-bg);
  color: var(--badge-from-res-text);
}

.badge-from-waitlist {
  background-color: var(--badge-from-wl-bg);
  color: var(--badge-from-wl-text);
}

/* ── Seat button - desktop ───────────────────────────────────────────────── */

.btn-seat {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--btn-seat-bg);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.btn-seat:hover {
  color: var(--btn-seat-hover);
}

.btn-seat:focus {
  outline: 2px solid var(--btn-seat-bg);
  outline-offset: 2px;
}

/* ── Cancel button - desktop ─────────────────────────────────────────────── */

.btn-cancel {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--btn-cancel-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 0.625rem;
  transition: color 0.15s ease;
  white-space: nowrap;
}

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

.btn-cancel:focus {
  outline: 2px solid var(--btn-cancel-text);
  outline-offset: 2px;
}

/* ── Reserve button - desktop ────────────────────────────────────────────── */

.btn-reserve {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--btn-reserve-bg);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 0.625rem;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.btn-reserve:hover {
  color: var(--btn-reserve-hover);
}

.btn-reserve:focus {
  outline: 2px solid var(--btn-reserve-bg);
  outline-offset: 2px;
}

/* ── Reservation Seat button - desktop ──────────────────────────────────── */

.btn-res-seat {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--btn-seat-bg);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.btn-res-seat:hover { color: var(--btn-seat-hover); }
.btn-res-seat:focus { outline: 2px solid var(--btn-seat-bg); outline-offset: 2px; }

/* ── Reservation Cancel button - desktop ─────────────────────────────────── */

.btn-res-cancel {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--btn-cancel-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 0.625rem;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.btn-res-cancel:hover { color: var(--btn-cancel-hover-text); }
.btn-res-cancel:focus { outline: 2px solid var(--btn-cancel-text); outline-offset: 2px; }

/* ── Check-in / Waitlist button - desktop ────────────────────────────────── */

.btn-checkin {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--btn-waitlist-bg);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.btn-checkin:hover {
  color: var(--btn-waitlist-hover);
}

.btn-checkin:focus {
  outline: 2px solid var(--btn-waitlist-bg);
  outline-offset: 2px;
}

/* ── Shared pill button base ─────────────────────────────────────────────── */

.btn-seat-mobile,
.btn-cancel-mobile,
.btn-reserve-mobile,
.btn-res-seat-mobile,
.btn-res-cancel-mobile,
.btn-checkin-mobile,
.btn-undo-mobile,
.btn-whatsapp-mobile,
.btn-phone-mobile,
.btn-sms-mobile,
.btn-chat-mobile,
.btn-manage-mobile {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}

.btn-seat-mobile:active,
.btn-cancel-mobile:active,
.btn-reserve-mobile:active,
.btn-res-seat-mobile:active,
.btn-res-cancel-mobile:active,
.btn-checkin-mobile:active,
.btn-undo-mobile:active,
.btn-whatsapp-mobile:active,
.btn-phone-mobile:active,
.btn-sms-mobile:active,
.btn-chat-mobile:active,
.btn-manage-mobile:active {
  transform: scale(0.95);
}

/* ── Seat button - mobile (waitlist & reservation unified) ───────────────── */

.btn-seat-mobile,
.btn-res-seat-mobile {
  color: var(--btn-seat-text);
  background-color: var(--btn-seat-bg);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-seat-mobile:hover,
.btn-res-seat-mobile:hover {
  background-color: var(--btn-seat-hover);
}

/* ── Cancel button - mobile (waitlist & reservation unified) ─────────────── */

.btn-cancel-mobile,
.btn-res-cancel-mobile {
  color: var(--btn-cancel-text);
  background-color: var(--btn-cancel-bg);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.btn-cancel-mobile:hover,
.btn-res-cancel-mobile:hover {
  background-color: var(--btn-cancel-hover-bg);
  color: var(--btn-cancel-hover-text);
}

/* ── Reserve button - mobile ─────────────────────────────────────────────── */

.btn-reserve-mobile {
  color: var(--btn-reserve-text);
  background-color: var(--btn-reserve-bg);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-reserve-mobile:hover {
  background-color: var(--btn-reserve-hover);
}

/* ── Check-in / Waitlist button - mobile ─────────────────────────────────── */

.btn-checkin-mobile {
  color: var(--btn-waitlist-text);
  background-color: var(--btn-waitlist-bg);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-checkin-mobile:hover {
  background-color: var(--btn-waitlist-hover);
}

/* ── Undo button (completed) ─────────────────────────────────────────────── */

.btn-undo-mobile {
  color: var(--btn-undo-text);
  background-color: var(--btn-undo-bg);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-undo-mobile:hover {
  background-color: var(--btn-undo-hover);
}

/* ── WhatsApp button (box style) ─────────────────────────────────────────── */

.btn-whatsapp-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-whatsapp-text);
  background-color: var(--btn-whatsapp-bg);
  transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.3s ease;
}

.btn-whatsapp-mobile:hover {
  background-color: var(--btn-whatsapp-hover);
}

.btn-whatsapp-mobile.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Phone button (box style) ────────────────────────────────────────────── */

.btn-phone-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-phone-text);
  background-color: var(--btn-phone-bg);
  transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.3s ease;
}

.btn-phone-mobile:hover {
  background-color: var(--btn-phone-hover);
}

.btn-phone-mobile.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── SMS button (box style) ──────────────────────────────────────────────── */

.btn-sms-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-sms-text);
  background-color: var(--btn-sms-bg);
  transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.3s ease;
}

.btn-sms-mobile:hover {
  background-color: var(--btn-sms-hover);
}

.btn-sms-mobile.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Chat button (box style) ─────────────────────────────────────────────── */

.btn-chat-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-chat-text);
  background-color: var(--btn-chat-bg);
  transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.3s ease;
}

.btn-chat-mobile:hover {
  background-color: var(--btn-chat-hover);
}

.btn-chat-mobile.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Manage button ───────────────────────────────────────────────────────── */

.btn-manage-mobile {
  color: var(--btn-manage-text);
  background-color: var(--btn-manage-bg);
  transition: background-color 0.15s ease, transform 0.1s ease;
  min-width: 4.5rem;
  text-align: center;
}

.btn-manage-mobile:hover {
  background-color: var(--btn-manage-hover);
}

/* ── Completed table row ─────────────────────────────────────────────────── */

.completed-row {
  transition: filter 0.15s ease;
}

.completed-row:hover {
  filter: brightness(0.97);
}

/* ── Completed card - mobile ─────────────────────────────────────────────── */

.completed-card {
  background: white;
  border-radius: 0.75rem;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  padding: 1rem;
}

/* ── Card Blurrable Area ─────────────────────────────────────────────────── */

.card-blurrable {
  position: relative;
  transition: opacity 0.3s ease;
}

.card-blurrable::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.card-blurrable.blurred::before {
  opacity: 1;
}

/* ── Card Actions Container ──────────────────────────────────────────────── */

.card-actions-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex-shrink: 0;
}

.main-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  position: relative;
  z-index: 2;
}

.action-buttons-slide {
  position: absolute;
  top: auto;
  bottom: 0;
  right: 100%;
  display: flex;
  flex-direction: row;
  gap: 0.375rem;
  margin-right: 0.375rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(1rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

.action-buttons-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* ── Queue card - mobile ─────────────────────────────────────────────────── */

.queue-card {
  background: white;
  border-radius: 0.75rem;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  padding: 1rem;
  overflow: visible;
}

/* ── Reservation card - mobile ───────────────────────────────────────────── */

.reservation-card {
  background: white;
  border-radius: 0.75rem;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  padding: 1rem;
  overflow: visible;
}

/* ── Mobile card containers - extra scroll space ─────────────────────────── */

#queueCards,
#reservationCards,
#completedCards {
  padding-bottom: 60px; /* Adjustable: extra scroll space after last card */
}

/* ── Settings form ───────────────────────────────────────────────────────── */

/* Mobile: stack sections with gap */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
  }
  .settings-form .settings-section {
    min-width: 0;
    min-height: 0;
  }
  .settings-form .settings-save-row {
    grid-column: 1 / -1;
    max-width: 100%;
  }
}

.settings-form .settings-section {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.settings-form .settings-section .settings-card-footer {
  margin-top: auto;
}

.settings-form .settings-section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(30 41 59);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(226 232 240);
}

.settings-form .settings-subtitle {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(71 85 105);
  margin-bottom: 0.5rem;
}

.settings-form .settings-tab-block {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgb(241 245 249);
}

.settings-form .settings-tab-block:last-child {
  border-bottom: none;
}

.settings-form .settings-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(71 85 105);
  margin-right: 0.5rem;
}

.settings-form .settings-option-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(71 85 105);
}

.settings-form .settings-input {
  font-size: 0.875rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.375rem;
  background: white;
}

.settings-form .settings-input:focus {
  outline: none;
  border-color: rgb(100 116 139);
  box-shadow: 0 0 0 2px rgb(148 163 184 / 0.3);
}

.settings-form .settings-input.settings-input--duplicate {
  border-color: rgb(185 28 28);
  box-shadow: 0 0 0 2px rgb(248 113 113 / 0.4);
}
.settings-form .settings-input.settings-input--duplicate:focus {
  border-color: rgb(185 28 28);
  box-shadow: 0 0 0 2px rgb(248 113 113 / 0.5);
}

.settings-form .settings-whatsapp-row textarea.settings-input {
  resize: vertical;
  min-height: 60px;
}

.settings-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background: rgb(30 41 59);
  color: white;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.settings-toast.settings-toast--visible {
  opacity: 1;
}

.settings-toast.settings-toast--error {
  background: rgb(185 28 28);
}