:root{
  /* === Elegant Glassmorphism & Champagne Gold === */
  /* Backgrounds */
  --bg: #F8F9FA;
  --card: rgba(255,255,255,0.92);
  --soft: rgba(255,255,255,0.92);
  /* Text */
  --text: #102A43;
  --muted: #627D98;
  /* Brand */
  --primary: #102A43;
  --navy: #102A43;
  --gold: #D4AF37;
  --gold-light: #F0D060;
  /* Functional */
  --success: #27AB83;
  --danger: #E15554;
  --warning: #F59E0B;
  --error: #E15554;
  --border: rgba(0,0,0,0.07);
  /* Shadows */
  --shadow-soft: 0 2px 12px rgba(16,42,67,0.06);
  --shadow-card: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 24px rgba(16,42,67,0.12);
  /* Radius */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 16px;
  /* Spacing */
  --padding-card: 22px;
  /* === Design System Tokens === */
  --color-primary: #D4AF37;
  --color-danger: #E53935;
  --color-warning: #F59E0B;
  --color-success: #43A047;
  --color-text-primary: #1A1A2E;
  --color-text-secondary: #6B7280;
  --color-bg-card: #FFFFFF;
  --color-bg-page: #F8F9FA;
  --color-border: #E5E7EB;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: 'Heebo', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color:var(--text);
}

.auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.card{
  width:min(420px, 100%);
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.card.soft{
  width:100%;
  background: var(--soft);
}

h1{ margin:0 0 10px; font-size:26px; }
h3{ margin:0 0 12px; }
.muted{ color:var(--muted); margin:0 0 16px; }
.small{ font-size:12px; }

.form label{ display:block; margin-bottom:12px; }
.form span{ display:block; margin-bottom:6px; color:var(--muted); font-size:13px; }

input, select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: #f8fafc;
  color:var(--text);
  outline:none;
}
input:focus, select:focus{ border-color: rgba(26,58,107,0.45); background: #ffffff; }

.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.btn{
  padding:11px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: #f1f5f9;
  color: var(--text);
  cursor:pointer;
  font-weight: 600;
  transition: 0.2s;
}
.btn:hover{ background: #e2e8f0; }
.btn.primary{ background: var(--primary); color: #fff; border:none; }
.btn.primary:hover{ background: #112a52; }
.btn.danger{ background: rgba(229,57,53,0.10); color: var(--color-danger); border-color: rgba(229,57,53,0.30); }
.btn.danger:hover { background: rgba(229,57,53,0.18); color: var(--color-danger); }

.msg{ margin-top:12px; min-height:20px; color:var(--muted); }

.layout{
  min-height:100vh;
  display:grid;
  grid-template-columns: 220px 1fr;
}

/* עיצוב כללי של סרגל הצד */
.sidebar {
  background: #102A43;
  border-left: none;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* שדרוג הלוגו והמותג */
.brand {
  padding: 15px;
  background: rgba(255,255,255,0.08);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand .title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
}
.brand .muted {
  color: rgba(255,255,255,0.5);
}

/* עיצוב פריטי התפריט */
.menu {
  display: flex;
  flex-direction: column;
  gap: 10px; /* ריווח נשימה בין הכפתורים */
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: right;
  width: 100%;
}

/* אפקט מעבר עכבר (Hover) */
.menu-item:hover {
  background: rgba(212,175,55,0.15);
  color: #D4AF37;
  transform: translateX(-5px);
}

/* פריט פעיל (Active) */
.menu-item.active {
  background: rgba(212,175,55,0.18);
  color: #D4AF37;
  box-shadow: 0 4px 12px rgba(212,175,55,0.15);
}

.menu-item i {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

/* כפתור התנתקות — קישור טקסט עדין */
#logoutBtn {
  margin-top: auto;
  padding: 6px 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary) !important;
  cursor: pointer;
  text-align: right;
  width: 100%;
  transition: color 0.18s;
}
#logoutBtn:hover {
  background: transparent !important;
  color: var(--color-danger) !important;
}

/* קוביות צבעוניות — Champagne Gold theme */
.color-card-1 { background: linear-gradient(135deg, #e8f4fd 0%, #d4e9f7 100%); color: #102A43; border: 1px solid rgba(16,42,67,0.08); }
.color-card-2 { background: linear-gradient(135deg, #e8faf5 0%, #ccf2e8 100%); color: #0d4a35; border: 1px solid rgba(39,171,131,0.15); }
.color-card-3 { background: linear-gradient(135deg, #fdfaf0 0%, #f5edcc 100%); color: #5a4500; border: 1px solid rgba(212,175,55,0.2); }
.color-card-4 { background: linear-gradient(135deg, #fff4e8 0%, #ffe4c8 100%); color: #7b3500; border: 1px solid rgba(245,158,11,0.2); }

.color-card-1 .stat-title, .color-card-2 .stat-title, .color-card-3 .stat-title, .color-card-4 .stat-title { color: inherit; opacity: 0.8; font-weight: 700; }

.content{ padding:22px; }
.content{ padding:22px; }
.screen{ display:none; }
.screen.show{ display:block; }

/* ===== Extras: dashboard widgets & tables ===== */
.header-row{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 1100px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .grid{ grid-template-columns: 1fr; }
}

.stat-card{
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:20px;
  background: var(--color-bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
}
.stat-title{ color: var(--color-text-secondary); font-size:13px; font-weight:500; }
.stat-value{ font-size:28px; font-weight:700; margin-top:6px; color: var(--color-text-primary); }
.stat-small{ font-size:16px; font-weight:700; }
.stat-sub{ margin-top:4px; font-size:12px; color: var(--color-text-secondary); }

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.form-grid .full{ grid-column: 1 / -1; }

.table-wrap{ margin-top:12px; overflow:auto; border:1px solid rgba(0,0,0,0.06); border-radius:14px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.table{
  width:100%;
  border-collapse:collapse;
  min-width: 720px;
  background: #ffffff;
}
.table th, .table td{
  padding:14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  text-align:right;
  vertical-align:middle;
}
.table thead th{
  background: #fafafa;
  font-size:12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 10;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td{ background: #f8fafd; }

.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  color: var(--text);
}
.badge.low    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.badge.medium { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.badge.high   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* Task progress stat cards */
.task-stat-card {
  flex: 1;
  background: #ffffff;
  border-radius: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.task-stat-open   { background: #f0f4ff; border-color: rgba(59,130,246,0.2); }
.task-stat-done   { background: #f0fff4; border-color: rgba(34,197,94,0.2); }
.task-stat-overdue { background: #fff0f0; border-color: rgba(239,68,68,0.2); }
.task-stat-icon { font-size: 20px; margin-bottom: 10px; }
.task-stat-open .task-stat-icon   { color: #3b82f6; }
.task-stat-done .task-stat-icon   { color: #22c55e; }
.task-stat-overdue .task-stat-icon { color: #ef4444; }
.task-stat-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.task-stat-value { font-size: 30px; font-weight: 800; color: var(--text); }
.task-stat-open .task-stat-value   { color: #1d4ed8; }
.task-stat-done .task-stat-value   { color: #16a34a; }
.task-stat-overdue .task-stat-value { color: #dc2626; }

/* Inline add-task row — floating white card */
.task-add-row td {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-radius: 10px;
  cursor: pointer;
  color: #374151;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  padding: 16px !important;
  transition: box-shadow 0.15s, background 0.15s;
}
.task-add-row:hover td {
  box-shadow: 0 4px 16px rgba(26,58,107,0.14);
  background: #f5f8ff !important;
  color: #1a3a6b;
}
.task-add-icon { font-size: 16px; color: #3b82f6; margin-left: 10px; vertical-align: middle; }

/* Tasks table: floating card rows */
#tasksTable {
  border-collapse: separate;
  border-spacing: 0 6px;
}
#tasksTable thead tr th {
  border-bottom: 2px solid rgba(0,0,0,0.06);
  padding-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
}
#tasksTable tbody tr {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s;
}
#tasksTable tbody tr:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
#tasksTable tbody tr td {
  border: none;
  background: #ffffff;
}
#tasksTable tbody tr td:first-child { border-radius: 0 10px 10px 0; }
#tasksTable tbody tr td:last-child  { border-radius: 10px 0 0 10px; }

/* Done task: faded background only — no strikethrough */
#tasksTable tbody tr.task-done td { background: #f5f5f5; }
#tasksTable tbody tr.task-done { opacity: 0.45; }
.task-title-wrap { display: flex; flex-direction: column; }
.task-title-cell { position: relative; }

/* Task title + date typography */
.task-title-input  { font-size: 15px !important; font-weight: 600 !important; }
.task-due-meta     { display: flex; align-items: center; margin-top: 2px; }
.task-due-input    { font-size: 12px !important; color: #888 !important; padding: 2px 8px !important; }
.task-due-overdue .task-due-input { color: #dc2626 !important; font-weight: 700 !important; }

/* ===================== Budget Screen ===================== */

/* Budget summary cards row */
.budget-summary-row {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.budget-stat-card {
  flex: 1;
  border-radius: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.budget-stat-outstanding { background: #fff0f0; border-color: rgba(239,68,68,0.2); }
.budget-stat-total       { background: #f0f4ff; border-color: rgba(59,130,246,0.2); }
.budget-stat-paid        { background: #f0fff4; border-color: rgba(34,197,94,0.2); }
.budget-stat-icon { font-size: 20px; margin-bottom: 10px; }
.budget-stat-outstanding .budget-stat-icon { color: #ef4444; }
.budget-stat-total .budget-stat-icon       { color: #3b82f6; }
.budget-stat-paid .budget-stat-icon        { color: #22c55e; }
.budget-stat-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.budget-stat-value { font-size: 26px; font-weight: 800; }
.budget-stat-outstanding .budget-stat-value { color: #dc2626; }
.budget-stat-total .budget-stat-value       { color: #1d4ed8; }
.budget-stat-paid .budget-stat-value        { color: #16a34a; }

/* Budget floating add box */
.budget-add-box {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  background: #ffffff;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 16px;
}
.budget-add-icon {
  font-size: 22px;
  color: #3b82f6;
  flex-shrink: 0;
  align-self: center;
  margin-left: 2px;
}
.budget-add-fields {
  display: flex;
  gap: 12px;
  flex: 1;
}
.budget-add-fields label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.budget-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===================== /Budget Screen ===================== */

.btn.sm{
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
}
.btn.ghost{
  background: transparent;
}

/* inputs inside table */
.cell-input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
}

/* ghost style: text inputs look like plain text until clicked */
input.cell-input {
  border: 1.5px solid transparent;
  background: transparent;
  transition: border-color 0.15s, background 0.15s;
}
input.cell-input:hover { border-color: var(--border); }
input.cell-input:focus {
  border-color: rgba(26,58,107,0.4);
  background: #f8fafd;
}

/* Auto-save indicator — fades out after 2s */
.guest-saved-indicator {
  color: #16a34a;
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
  animation: fadeOutSaved 2s ease forwards;
  white-space: nowrap;
}
@keyframes fadeOutSaved {
  0%, 55% { opacity: 1; }
  100%     { opacity: 0; }
}

/* Icon-only delete button */
.btn.icon-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  flex-shrink: 0;
}
.btn.icon-btn svg {
  pointer-events: none;
}

/* Row actions: hidden by default, fade in on row hover */
.row-actions { opacity: 0; transition: opacity 0.15s; white-space: nowrap; }
.table tbody tr:hover .row-actions { opacity: 1; }
#tasksTable tbody tr:hover .row-actions { opacity: 1; }

/* Import preview result badges */
.import-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.import-badge.ok  { background: #f0fdf4; color: #166534; }
.import-badge.dup { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.import-badge.err { background: #fef2f2; color: #991b1b; }

/* Status pill badges */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-attending     { background: #f0fdf4; color: #166534; }
.status-not-attending { background: #fef2f2; color: #991b1b; }
.status-maybe         { background: #fffbeb; color: #92400e; }
.status-pending       { background: #f1f5f9; color: #64748b; }
.status-paid          { background: #f0fdf4; color: #166534; }
.status-partial       { background: #fffbeb; color: #92400e; }
.status-unpaid        { background: #fef2f2; color: #991b1b; }

/* Badge counter inside filter tabs */
.tab-badge {
  display: inline-block;
  margin-right: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,0.07);
  color: inherit;
  vertical-align: middle;
}
.filter-tab.active .tab-badge {
  background: rgba(255,255,255,0.25);
}

/* =========================
   MOBILE RESPONSIVE ADD-ON
   ========================= */

@media (max-width: 900px){
  .layout{
    grid-template-columns: 1fr; /* במקום 290px + תוכן */
  }

  .sidebar{
    border-left: none;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
  }

  .menu{
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
  }

  .menu-item{
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto;
    text-align: center;
    padding: 10px 12px;
  }

  .content{
    padding: 14px;
  }

  .form-grid{
    grid-template-columns: 1fr; /* טפסים בעמודה אחת */
  }

  input, select{
    font-size: 16px; /* מונע zoom באייפון */
  }

  .table{
    min-width: 620px; /* נשאר גלילה אופקית */
  }
}

@media (max-width: 480px){
  h1{ font-size: 22px; }
  .stat-value{ font-size: 24px; }
  .btn{ width: 100%; } /* כפתורים אחד מתחת לשני */
}

/* =========================
   Mobile layout fixes
   ========================= */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
  }

  /* הופך את כל הפריסה לעמודה אחת */
  .layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  /* מבטל רוחבים קבועים של צדדים */
  .sidebar,
  .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* כרטיסים ובלוקים */
  .card {
    width: 100% !important;
  }

  /* סטטיסטיקות/כרטיסים שלא יישבו בשורה צפופה */
  .stats,
  .cards,
  .grid,
  .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* תפריט/כפתורים – שיהיו נוחים ללחיצה */
  button,
  .btn {
    width: 100% !important;
    min-height: 44px;
  }

  /* טבלאות – אם יש גלישה */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Excel import preview */
tr.bad-row td {
  background: rgba(255, 60, 60, 0.14);
  border-top: 1px solid rgba(255, 60, 60, 0.25);
  border-bottom: 1px solid rgba(255, 60, 60, 0.25);
}
.bad-pill {
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 60, 60, 0.18);
  border: 1px solid rgba(255, 60, 60, 0.25);
  color: #ffd0d0;
  font-size: 12px;
}
.ok-pill {
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(60, 255, 160, 0.12);
  border: 1px solid rgba(60, 255, 160, 0.2);
  color: #c9ffe5;
  font-size: 12px;
}

/* --- Color stat cards: keep gradients, add glassmorphism & hover --- */
.color-card-1,
.color-card-2,
.color-card-3,
.color-card-4 {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.color-card-1:hover,
.color-card-2:hover,
.color-card-3:hover,
.color-card-4:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Large semi-transparent background icon for depth */
.card-bg-icon {
  position: absolute;
  left: -10px;
  bottom: -10px;
  font-size: 80px;
  opacity: 0.08;
  pointer-events: none;
  line-height: 1;
  z-index: 0;
}
.color-card-1 .card-bg-icon { color: #8b5cf6; }
.color-card-2 .card-bg-icon { color: #22c55e; }
.color-card-3 .card-bg-icon { color: #3b82f6; }
.color-card-4 .card-bg-icon { color: #f97316; }

/* Ensure card content sits above the bg icon */
.stat-card > *:not(.card-bg-icon) { position: relative; z-index: 1; }

/* Task quick-info box on white card */
.task-box {
  background: #f0f4ff;
  border: 1px solid rgba(59,130,246,0.15);
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-top: 15px;
}

/* פריסת הגרפים במסך מחשב (2 עמודות) */
.graphs-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* =========================================
   התאמה למסכים קטנים (טאבלט וטלפון)
   ========================================= */

/* טאבלטים ומסכים בינוניים */
@media (max-width: 1100px) {
  .grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 4 הקוביות הופכות ל-2 שורות של 2 */
  }
}

/* =========================================
   התאמה למסכים (רספונסיביות) - מחשב, טאבלט וטלפון
   ========================================= */

.graphs-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* טאבלטים ומסכים קטנים */
@media (max-width: 1100px) {
  .grid, .graphs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* טלפונים ניידים */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr !important; 
    display: flex !important;
    flex-direction: column !important;
  }
  
  .sidebar {
    position: relative;
    border-left: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    overflow-x: auto;
    padding: 10px;
    align-items: center;
    background: #ffffff; /* מוודא שהסרגל יישאר לבן בטלפון */
  }

  .brand {
    margin-left: 15px;
    min-width: max-content;
  }

  .menu {
    flex-direction: row;
    gap: 10px;
  }

  .menu-item {
    white-space: nowrap;
    width: auto;
  }

  .grid, .graphs-grid {
    grid-template-columns: 1fr !important; /* קוביות מסתדרות אחת מתחת לשנייה */
  }
  
  .stat-card {
    background: rgba(255,255,255,0.92); /* glassmorphism on mobile */
  }
}
.nav-item i, .menu-item i {
  margin-left: 10px;
  width: 20px;
  text-align: center;
}

.stat-title i {
  margin-left: 8px;
  font-size: 1.1em;
}
/* פריסה מלאה */
.content {
  max-width: 100% !important;
  padding: 30px !important;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}
#miniTaskList div {
  transition: all 0.3s ease;
}

#miniTaskList div:hover {
  background: #ffffff !important;
  border-color: var(--primary) !important;
  transform: translateX(-5px); /* אפקט תזוזה עדין בעברית */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* פריסה רחבה ומלאה */
.main-content {
    padding: 0 !important; /* ביטול ריווח מיותר מסביב */
}

/* הגדלת הקוביות העליונות */
.stat-card {
    padding: 20px !important;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* הגדלת הגרפים והמשימות */
.graphs-grid .stat-card {
    min-height: 500px !important; /* הגדלת הגובה של כל השורה התחתונה */
}

/* הגדלת הטקסטים שיהיו פרופורציונליים למסך גדול */
.stat-value {
    font-size: 40px !important;
    font-weight: 700 !important;
    margin-top: 15px;
}

.stat-title {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
}

/* סידור הגרפים שיתפסו יותר מקום */
canvas {
    max-height: 280px !important; /* הגדלת הגרפים העגולים */
}

/* מתיחה מלאה של כל התוכן מקצה לקצה */
.main-content, .content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 20px 40px !important; /* ריווח עדין מהצדדים */
    margin: 0 !important;
}

/* הגדלת הגובה של כל הכרטיסים כדי למלא את המסך לגובה */
.stat-card {
    height: 100%; /* גורם לכרטיסים באותה שורה להיות באותו גובה */
    display: flex;
    flex-direction: column;
}

/* הגדלת הגובה של הגריד התחתון (משימות וגרפים) */
.graphs-grid {
    min-height: 60vh; /* תופס לפחות 60% מגובה המסך של המשתמש */
}
.stat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* ===== Seating Screen – Infinite Canvas ===== */

/* Toolbar */
.seating-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.seating-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.seating-chairs-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

/* Workspace: sidebar (right in RTL) + canvas (fills rest) */
.seating-workspace {
  display: flex;
  gap: 0;
  height: 72vh;
  min-height: 520px;
}

/* Guest Sidebar */
.seating-sidebar {
  width: 264px;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  margin-left: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
}
.seating-sidebar.collapsed {
  width: 0;
  opacity: 0;
  margin-left: 0;
  pointer-events: none;
}
.seating-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.seating-sidebar-search {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.seating-sidebar-search input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  font-size: 13px;
  background: #f8fafc;
  box-sizing: border-box;
}
.seating-sidebar-search input:focus {
  border-color: var(--primary);
  background: #fff;
}
.seating-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.seating-sidebar-footer {
  padding: 10px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #f8fafc;
  flex-shrink: 0;
}
/* Sidebar guest items */
.sidebar-guest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  cursor: grab;
  transition: background 0.12s;
  margin-bottom: 2px;
  user-select: none;
}
.sidebar-guest-item:hover { background: #f0f4ff; }
.sidebar-guest-item.dragging { opacity: 0.4; cursor: grabbing; }
.sidebar-guest-item.seated { background: #f0fff4; }
.sidebar-guest-item.seated:hover { background: #dcfce7; }
.sidebar-group-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 10px 4px;
}
.sidebar-guest-badge.unassigned { background: #e2e8f0; color: #94a3b8; }
.sidebar-guest-badge.assigned {
  background: #22c55e;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  position: relative;
}
.sidebar-guest-badge.assigned:hover {
  background: #ef4444;
  transform: scale(1.15);
}
.sidebar-guest-badge.assigned:hover::after {
  content: 'הסר';
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
}
.sidebar-guest-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-guest-badge {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-guest-plus {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px dashed #c0c8d4;
  color: #a0a8b4;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Canvas viewport */
.seating-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1.5px solid rgba(0,0,0,0.08);
  background: #edf1f7;
  cursor: grab;
}
.seating-canvas-wrap.panning { cursor: grabbing; }

/* Zoom controls */
.seating-zoom-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1000;
  pointer-events: auto;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.zoom-btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
}
.zoom-btn:hover { background: #f0f4ff; border-color: var(--primary); }
#zoomLabel { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 38px; text-align: center; }
#tableSizeLabel { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 28px; text-align: center; }
.zoom-divider { width: 1px; height: 18px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
.zoom-control-label { font-size: 14px; line-height: 1; }

/* Infinite canvas (3000×3000 work area with dot-grid) */
.seating-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 3000px; height: 3000px;
  transform-origin: 0 0;
  will-change: transform;
  background-image: radial-gradient(circle, #b8c4d4 1.2px, transparent 1.2px);
  background-size: 30px 30px;
}

/* Floor plan background image (sits at canvas layer 0, tables render on top) */
.floor-plan-bg {
  position: absolute;
  top: 0; left: 0;
  width: 2200px;
  height: auto;
  opacity: 0.82;
  pointer-events: none;
  z-index: 0;
  border-radius: 6px;
  user-select: none;
}

/* ===== Circular table tokens on the floor plan ===== */
.draggable-table {
  position: absolute;
  z-index: 10;
  user-select: none;
}
.draggable-table.being-dragged { z-index: 100; opacity: 0.88; }

.table-card {
  position: absolute;
  width: var(--global-table-size, 110px);
  height: var(--global-table-size, 110px);
  border-radius: 22px; /* rounded square — much better for text than 50% circle */
  min-width: 96px;
  min-height: 88px;
  background: #ffffff;
  border: 3px solid #3b82f6; /* overridden inline per table */
  box-shadow: 0 3px 12px rgba(0,0,0,0.13);
  cursor: move;
  user-select: none;
  z-index: 10;
  overflow: visible; /* keeps action buttons + resize handle visible outside bounds */
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.18s, transform 0.12s;
  /* Container query context — lets child elements use cqi units for font scaling */
  container-type: inline-size;
}
.table-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  transform: scale(1.04);
  z-index: 20;
}
.table-card.drag-over {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px #3b82f6, 0 6px 20px rgba(59,130,246,0.3);
}
/* Square shape variant */
.table-card--square { border-radius: 8px !important; }

/* Inner wrapper — clips content to the rounded square, no scrolling (drag must work) */
.table-inner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 8px 8px;
  box-sizing: border-box;
  border-radius: inherit;
  pointer-events: none; /* drags propagate to parent .table-card */
}

/* Table name — bold, up to 2 lines, no truncation mid-word */
.table-circle-name {
  font-size: 15cqi;
  font-weight: 800;
  color: #1a202c;
  text-align: center;
  width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  padding: 0 6px;
  flex-shrink: 0;
}

/* Seat count — subtle badge under the name */
.table-circle-count {
  font-size: 11cqi;
  font-weight: 600;
  text-align: center;
  margin-top: 4px;
  line-height: 1;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  padding: 1px 8px;
}

/* Guest names list inside the table token */
.table-guest-names {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3px;
  gap: 0;
  flex-shrink: 0;
}
.table-guest-name-item {
  font-size: 11cqi;
  color: #374151;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  padding: 0 4px;
}
.table-guest-names-more {
  font-size: 10cqi;
  color: #94a3b8;
  font-style: italic;
  margin-top: 1px;
}

/* Individual resize handle (drag bottom-right corner to resize circle) */
.table-resize-handle {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #94a3b8;
  cursor: se-resize;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 25;
}
.table-card:hover .table-resize-handle { opacity: 1; }
.table-card.resizing .table-resize-handle { opacity: 1; }

/* Action buttons (edit / delete) revealed on hover */
.table-circle-actions {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 30;
}
.table-card:hover .table-circle-actions { opacity: 1; }

.tc-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #64748b;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  padding: 0;
  line-height: 1;
}
.tc-btn:hover { background: #f0f4ff; color: var(--primary); border-color: #93c5fd; }
.tc-btn.danger:hover { background: #fff0f0; color: var(--danger); border-color: #fca5a5; }

/* ===== Table management popover ===== */
.table-popover {
  position: fixed;
  z-index: 5000;
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 14px 16px;
  min-width: 230px;
  max-width: 290px;
  direction: rtl;
  animation: pop-in 0.15s ease;
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.94) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.table-popover-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.table-popover-name-input {
  font-weight: 700;
  font-size: 13px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  flex: 1;
  min-width: 0;
  background: transparent;
  color: var(--text);
}
.table-popover-save-btn {
  background: #f0f4ff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #3b82f6;
  font-weight: 600;
  white-space: nowrap;
}
.table-popover-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #94a3b8;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.table-popover-guest-list {
  max-height: 160px;
  overflow-y: auto;
}
.table-popover-guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 12px;
  color: var(--text);
}
.table-popover-guest-remove {
  background: none;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 15px;
  padding: 0 3px;
  line-height: 1;
  transition: color 0.12s;
  flex-shrink: 0;
}
.table-popover-guest-remove:hover { color: var(--danger); }
.table-popover-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.table-popover-delete-btn {
  background: none;
  border: 1.5px solid #fca5a5;
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  color: #ef4444;
  width: 100%;
  transition: background 0.12s;
}
.table-popover-delete-btn:hover { background: #fff5f5; }

#screen-seating { overflow: visible; }


/* מבטיח שהתוכן של כל מסך נשאר רק בתוכו */
.screen {
  display: none;
  position: relative;
  width: 100%;
}

.screen.show {
  display: block;
}

/* ===== Groups Management - Guest List screen ===== */
.groups-management-container {
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 12px 0 4px;
}
.groups-add-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}
.groups-add-row input {
  flex: 1;
}
.groups-pills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.group-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  transition: border-color 0.15s;
}
.group-tag .group-tag-delete {
  cursor: pointer;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1;
  padding: 0 1px;
  transition: color 0.15s;
}
.group-tag .group-tag-delete:hover {
  color: #ef4444;
}

/* ===== Responsive: groups-add-row stacks on mobile ===== */
@media (max-width: 600px) {
  .groups-add-row {
    flex-direction: column;
    align-items: stretch;
  }
  .groups-add-row input,
  .groups-add-row .btn {
    width: 100%;
  }
}

/* השולחנות עצמם */
/* Filter tabs - guests screen */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 10px;
}
.filter-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-tab:hover {
  border-color: var(--primary);
}
.filter-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}


/* ============================================================
   MOBILE-FIRST RESPONSIVE — COMPREHENSIVE v2
   Breakpoint: 768px = mobile, 420px = small mobile
   ============================================================ */

/* Elements hidden/shown per platform */
.mobile-topbar        { display: none; }
.sidebar-close-btn    { display: none; }
.menu-toggle-btn      { display: none; }
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 250;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.visible { display: block; }

/* ---- Mobile (768px and below) ---- */
@media (max-width: 768px) {

  /* Layout: single flex column */
  .layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    gap: 0 !important;
    min-height: 100vh;
  }

  .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
  }

  /* Sticky mobile topbar */
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #102A43;
    border-bottom: 1px solid rgba(212,175,55,0.25);
    position: sticky;
    top: 0;
    z-index: 200;
    min-height: 54px;
    box-shadow: 0 2px 12px rgba(16,42,67,0.25);
  }
  .mobile-topbar-brand {
    font-size: 15px;
    font-weight: 800;
    color: #D4AF37;
  }
  .menu-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(212,175,55,0.4);
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    color: #D4AF37;
    transition: background 0.15s;
  }
  .menu-toggle-btn:active { background: rgba(212,175,55,0.2); }

  /* Sidebar: fixed overlay, slides from right (RTL) */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: -290px !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 300 !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    border: none !important;
    border-left: 1px solid rgba(212,175,55,0.3) !important;
    box-shadow: -4px 0 32px rgba(16,42,67,0.35) !important;
    transition: right 0.3s ease !important;
    padding: 16px !important;
    background: #102A43 !important;
    gap: 20px !important;
  }
  .sidebar.mobile-open {
    right: 0 !important;
  }

  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    color: var(--muted);
    border-radius: 10px;
    transition: background 0.15s;
    margin-bottom: -8px;
  }
  .sidebar-close-btn { color: rgba(255,255,255,0.6) !important; }
  .sidebar-close-btn:active { background: rgba(255,255,255,0.1); }

  .menu {
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 6px !important;
  }
  .menu-item {
    width: 100% !important;
    white-space: normal !important;
    text-align: right !important;
    padding: 14px 16px !important;
    min-height: 48px;
  }

  /* Remove hover-only transforms on touch */
  .menu-item:hover { transform: none !important; }
  .stat-card:hover { transform: none !important; box-shadow: var(--shadow-card) !important; }
  #miniTaskList div:hover { transform: none !important; }

  .header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Dashboard: 2-column stats on mobile */
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .grid[style*="1fr 2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .stat-card {
    padding: 16px !important;
    min-height: 100px !important;
    height: auto !important;
  }
  .stat-value { font-size: 26px !important; }
  .stat-title { font-size: 1rem !important; }

  /* Buttons: 44px tap targets, not all full-width */
  .btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    width: auto !important;
  }
  .btn.sm {
    min-height: 38px !important;
    padding: 7px 12px !important;
  }
  .row > .btn,
  .header-row > .btn { width: 100% !important; }

  /* Inputs: 16px font prevents iOS zoom */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
  }
  textarea { min-height: 100px !important; }

  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .row {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
  }
  .row > * { width: 100% !important; }

  .budget-add-box { flex-direction: column !important; }
  .budget-add-fields {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
  }
  .budget-add-fields label,
  .budget-add-fields input { width: 100% !important; }

  /* ---- Tables to card-style rows ---- */
  .table-wrap { overflow: visible !important; }

  #guestsTable,
  #tasksTable,
  #budgetTable {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  #guestsTable thead,
  #tasksTable thead,
  #budgetTable thead { display: none !important; }

  #guestsTable tbody,
  #tasksTable tbody,
  #budgetTable tbody { display: block !important; width: 100% !important; }

  #guestsTable tr,
  #tasksTable tr,
  #budgetTable tr {
    display: block !important;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 14px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(255,255,255,0.7);
    width: 100% !important;
  }
  #guestsTable td,
  #tasksTable td,
  #budgetTable td {
    display: flex !important;
    align-items: center;
    padding: 5px 0;
    border: none !important;
    font-size: 14px;
    width: 100% !important;
    gap: 8px;
    min-height: 32px;
  }
  #tasksTable td::before,
  #budgetTable td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 11px;
    color: var(--muted);
    min-width: 80px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  /* Guest table gets its own card layout — no ::before labels needed */
  #guestsTable td::before { display: none !important; content: none !important; }
  .row-actions {
    display: flex !important;
    gap: 8px !important;
    justify-content: stretch !important;
    flex-wrap: wrap !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(0,0,0,0.07) !important;
    margin-top: 6px !important;
  }
  .row-actions::before { display: none !important; }
  .row-actions .btn { flex: 1; min-height: 40px !important; }

  .cell-input { width: 100% !important; font-size: 16px !important; }

  /* ---- Filter tabs: horizontal scroll ---- */
  .filter-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding-bottom: 6px;
    scrollbar-width: none;
    margin-bottom: 10px;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab {
    flex-shrink: 0;
    min-height: 36px;
    white-space: nowrap;
  }

  /* ---- Seating screen ---- */
  .seating-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .seating-toolbar-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .seating-chairs-label { grid-column: 1 / -1; justify-content: center; }

  .seating-workspace {
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0 !important;
  }
  .seating-canvas-wrap {
    height: 55vh !important;
    min-height: 320px;
    border-radius: 12px !important;
  }

  /* Guest sidebar as bottom drawer */
  .seating-sidebar {
    position: fixed !important;
    bottom: -100% !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 55vh !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 210 !important;
    transition: bottom 0.35s ease !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18) !important;
  }
  .seating-sidebar:not(.collapsed) { bottom: 0 !important; }
  .seating-sidebar.collapsed {
    bottom: -100% !important;
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .zoom-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }

  /* Home screen: remove extra inline padding */
  #screen-home > div[style],
  #screen-home > div[style] > div[style] { padding: 0 !important; }
}

/* ---- Small mobile (420px and below) ---- */
@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr !important; }
  .stat-value { font-size: 20px !important; }
  .seating-toolbar-actions { grid-template-columns: 1fr !important; }
  h1 { font-size: 20px !important; }
  .mobile-topbar-brand { font-size: 13px; }
}

/* ===== Venue Elements Dropdown ===== */

/* The wrap no longer needs to be the positioning parent —
   the dropdown uses position:fixed set by JS */
.venue-element-dropdown-wrap {
  position: static;
}

/* Trigger button active state */
#elementDropdownBtn.active {
  background: rgba(16,42,67,0.12) !important;
  border-color: var(--gold, #D4AF37) !important;
  color: var(--navy, #102A43) !important;
}
#elementDropdownBtn .fa-chevron-down {
  transition: transform 0.2s;
}
#elementDropdownBtn.active .fa-chevron-down {
  transform: rotate(180deg);
}

/* Dropdown panel
   position:fixed is injected by JS so no parent clipping can affect it */
.venue-element-dropdown {
  position: fixed !important;   /* overrides any stacking-context ancestor   */
  z-index: 10000 !important;    /* above canvas, sidebar, modals, everything  */
  width: 240px;
  background: #ffffff !important;
  border: 1.5px solid rgba(212,175,55,0.35);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(16,42,67,0.22), 0 2px 8px rgba(16,42,67,0.1);
  padding: 10px;
  /* Hidden state */
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.venue-element-dropdown.open {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Section title */
.venue-element-dropdown-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold, #D4AF37);
  padding: 4px 8px 8px;
  border-bottom: 1px solid rgba(16,42,67,0.07);
  margin-bottom: 6px;
}

/* Divider between groups */
.venue-element-divider {
  height: 1px;
  background: rgba(16,42,67,0.07);
  margin: 6px 0;
}

/* Each item row */
.venue-element-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: right;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  transition: background 0.13s;
  white-space: nowrap;
}
.venue-element-item:hover {
  background: rgba(212,175,55,0.1);
}
.venue-element-item:hover .venue-element-item-icon {
  transform: scale(1.12);
}

/* Icon box */
.venue-element-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.13s;
}

/* Text block */
.venue-element-item-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex: 1;
}
.venue-element-item-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy, #102A43);
  line-height: 1.2;
}
.venue-element-item-sub {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
  line-height: 1;
}

/* Element cards on canvas */
.venue-element {
  position: absolute;
  background: #f0f0f0;
  border: 2px solid #aaaaaa;
  color: #444444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 5;
  min-width: 40px;
  min-height: 40px;
  user-select: none;
  box-sizing: border-box;
  transition: box-shadow 0.15s;
}
.venue-element.editing {
  border-style: dashed;
  box-shadow: 0 0 0 2px #93c5fd;
}
.venue-element:not(.editing) {
  border-style: solid;
}
.venue-element:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.venue-element:active {
  cursor: grabbing;
}

.venue-element-content {
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.venue-element-label {
  cursor: pointer;
  word-break: break-word;
  display: block;
}
.venue-element-input {
  width: 90%;
  font-size: 13px;
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  color: #444;
  font-family: inherit;
  font-weight: 600;
}
.venue-element-input::placeholder {
  color: #aaa;
  font-weight: 400;
  font-size: 11px;
}

/* Hover controls (delete / edit) */
.venue-element-controls {
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  padding: 0 2px;
}
.venue-element:hover .venue-element-controls {
  opacity: 1;
  pointer-events: all;
}
.ve-ctrl-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.ve-ctrl-btn:hover { background: #f1f5f9; }
.ve-delete:hover   { background: #fee2e2; border-color: #ef4444; }

/* Resize handles */
.venue-element-resize-handles {
  opacity: 0;
  transition: opacity 0.15s;
}
.venue-element:hover .venue-element-resize-handles {
  opacity: 1;
}
.ve-resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #6b7280;
  border-radius: 2px;
  z-index: 20;
}
.ve-nw { top: -5px;    left: -5px;  cursor: nw-resize; }
.ve-ne { top: -5px;    right: -5px; cursor: ne-resize; }
.ve-sw { bottom: -5px; left: -5px;  cursor: sw-resize; }
.ve-se { bottom: -5px; right: -5px; cursor: se-resize; }


/* ===== Gift List Print Styles ===== */

/* עמודת "סכום המתנה" מוסתרת על המסך */
.print-gift-col { display: none; }

/* כותרת הדפסה - מוסתרת על המסך */
.print-gift-title { display: none; }

@media print {
  /* הצג עמודת מתנה */
  .print-gift-col { display: table-cell !important; }

  /* הצג כותרת הדפסה */
  .print-gift-title {
    display: block !important;
    text-align: center;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
  }

  /* הסתר רכיבי ממשק */
  .sidebar,
  .mobile-topbar,
  .no-print,
  .row-actions,
  #importExcelCard,
  #guestFilterTabs,
  #guestsCount,
  #guestSearch,
  #guestName, #guestPhone, #guestCategory, #addGuestBtn,
  #guestsEmptyState,
  .seating-toolbar,
  .zoom-btn,
  .print-buttons-bar,
  button,
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  select:not(.cell-input) {
    display: none !important;
  }

  /* רקע לבן נקי */
  *, *::before, *::after {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body, .layout, .content, .screen {
    background: #fff !important;
    color: #000 !important;
  }

  .layout { display: block !important; }
  .content { margin: 0 !important; padding: 0 !important; }

  /* הצג רק מסך האורחים */
  .screen { display: none !important; }
  body.print-gift-mode #screen-guests { display: block !important; }

  /* טבלה נקייה */
  #guestsTable {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
    margin-top: 0 !important;
  }

  #guestsTable th,
  #guestsTable td {
    border: 1px solid #555 !important;
    padding: 10px 8px !important;
    background: #fff !important;
    color: #000 !important;
    text-align: right !important;
  }

  #guestsTable thead th {
    background: #f0f0f0 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
  }

  /* שורות גוף - גובה נוח לכתיבה */
  #guestsTable tbody tr {
    height: 34px !important;
    page-break-inside: avoid;
  }

  /* שורות זברה עדינות */
  #guestsTable tbody tr:nth-child(even) td {
    background: #fafafa !important;
  }

  /* קלט טקסט בתוך תא - מראה כמו טקסט */
  .cell-input {
    border: none !important;
    background: transparent !important;
    color: #000 !important;
    font-size: 13px !important;
    padding: 0 !important;
    width: auto !important;
    font-weight: inherit !important;
    pointer-events: none;
  }

  /* תגיות סטטוס */
  .status-badge {
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #000 !important;
  }

  /* תפריטי בחירה */
  .relation-dropdown,
  .food-sensitivity-dropdown {
    border: none !important;
    background: transparent !important;
    color: #000 !important;
    -webkit-appearance: none;
    appearance: none;
    font-size: 13px !important;
    padding: 0 !important;
  }

  /* עמודת סכום המתנה - רחבה לכתיבה */
  .print-gift-col {
    width: 140px !important;
    min-width: 140px !important;
  }

  /* הגדרות עמוד */
  @page {
    size: A4 landscape;
    margin: 12mm 15mm;
  }
}


/* ===================================================
   LUXURY TASK CARDS — Eventoss
   =================================================== */

/* Progress bar */
.task-progress-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.task-progress-track {
  flex: 1;
  height: 6px;
  background: rgba(201,168,76,0.15);
  border-radius: 99px;
  overflow: hidden;
}
.task-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #c9a84c, #f0d080);
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
  width: 0%;
}
.task-progress-label {
  font-size: 12px;
  font-weight: 600;
  color: #c9a84c;
  white-space: nowrap;
}

/* Toolbar */
.task-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.task-search-input {
  flex: 1;
  min-width: 160px;
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.task-search-input:focus { border-color: #c9a84c; }

/* Filter tabs */
.task-filter-tabs {
  display: flex;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
}
.task-filter-tab {
  padding: 6px 14px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted, #718096);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
}
.task-filter-tab:hover { background: rgba(201,168,76,0.1); color: #c9a84c; }
.task-filter-tab.active { background: #c9a84c; color: #fff; box-shadow: 0 2px 8px rgba(201,168,76,0.35); }

/* Add task button */
.task-add-main-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: #1a2744;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.18s, transform 0.1s;
}
.task-add-main-btn:hover { background: #243561; transform: translateY(-1px); }
.task-add-star { color: #c9a84c; font-size: 15px; }

/* ===== Task Card ===== */
.task-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  cursor: default;
}
.task-card:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 4px 18px rgba(201,168,76,0.18);
  border-color: rgba(201,168,76,0.4);
}
.task-card-done {
  opacity: 0.65;
}
.task-card-overdue {
  border-right: 3px solid #a30000;
}

/* Gold circle checkbox */
.task-check-circle {
  flex-shrink: 0;
  min-width: 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  padding: 0;
}
.task-check-circle:hover {
  border-color: var(--color-primary);
  background: rgba(201,168,76,0.2);
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(201,168,76,0.15);
}
.task-check-circle.checked {
  background: linear-gradient(135deg, #c9a84c, #f0d080);
  border-color: #c9a84c;
  box-shadow: 0 2px 8px rgba(201,168,76,0.45);
}

/* Card body */
.task-card-body {
  flex: 1;
  min-width: 0;
}
.task-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  transition: color 0.2s, text-decoration 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-card-done .task-card-title {
  text-decoration: line-through;
  color: #b0bac6;
}
.task-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  flex-wrap: wrap;
}

/* Priority tag */
.task-priority-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  border: 1px solid;
}
.task-priority-tag.priority-high   { background: rgba(163,0,0,0.08);   color: #a30000;  border-color: rgba(163,0,0,0.25); }
.task-priority-tag.priority-medium { background: rgba(201,168,76,0.12); color: #c9a84c;  border-color: rgba(201,168,76,0.3); }
.task-priority-tag.priority-low    { background: rgba(100,116,139,0.1); color: #64748b;  border-color: rgba(100,116,139,0.2); }

/* Due date tag */
.task-due-tag {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}
.task-due-tag.overdue { color: #a30000; font-weight: 700; }

/* Delete button */
.task-delete-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
  opacity: 0;
}
.task-card:hover .task-delete-btn { opacity: 1; }
.task-delete-btn:hover { background: #fee2e2; color: #dc2626; }

/* Add-task inline form */
.task-card-add-form {
  border: 2px dashed #c9a84c;
  background: rgba(201,168,76,0.04);
}
.task-add-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  outline: none;
  padding: 0;
}
.task-add-input::placeholder { color: #b0bac6; font-weight: 400; }
.task-add-meta {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.task-add-date, .task-add-priority {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

/* ===== Confetti burst ===== */
.confetti-dot {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  animation: confetti-burst 0.65s ease-out forwards;
  transform: translate(-50%, -50%);
}
@keyframes confetti-burst {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; }
}


/* =====================================================
   MOBILE-FIRST PREMIUM UPGRADE — Eventoss
   ===================================================== */

/* ── Bottom Navigation ── */
.mobile-bottom-nav { display: none; }

@media (max-width: 768px) {

  /* Show bottom nav */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a2744;
    border-top: 2px solid #c9a84c;
    z-index: 400;
    height: 62px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: stretch;
  }
  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.18s;
    padding: 6px 0 4px;
    letter-spacing: 0.02em;
  }
  .mobile-nav-item i { font-size: 19px; transition: transform 0.18s; }
  .mobile-nav-item.active { color: #c9a84c; }
  .mobile-nav-item.active i { transform: translateY(-2px); }
  .mobile-nav-item:active { color: #f0d080; }

  /* Extra bottom padding so content isn't hidden behind nav */
  .content { padding-bottom: 80px !important; }

  /* ── Guest Table Mobile Cards (flex layout) ── */
  #guestsTable,
  #guestsTable tbody { display: block !important; }
  #guestsTable thead { display: none !important; }

  /* Each row becomes a white flex card */
  #guestsTable tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    margin-bottom: 10px !important;
    padding: 12px 14px 10px !important;
    position: static !important;
    overflow: visible !important;
  }

  /* Suppress ::before labels */
  #guestsTable td::before { display: none !important; content: none !important; }

  /* All tds: full-width flex children, no borders, auto height */
  #guestsTable td {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 0 4px 0 !important;
    border: none !important;
    font-size: 13px !important;
    position: static !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* td:1 — row number: hidden */
  #guestsTable td:nth-child(1) { display: none !important; }

  /* td:2 — Full name */
  #guestsTable td:nth-child(2) { padding-bottom: 2px !important; }
  #guestsTable td:nth-child(2) .cell-input {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a2744 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 24px !important;
  }

  /* td:3 — Phone: visible darker text, LTR */
  #guestsTable td:nth-child(3) {
    display: block !important;
    padding-bottom: 6px !important;
  }
  #guestsTable td:nth-child(3) .cell-input {
    display: block !important;
    font-size: 13px !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    direction: ltr !important;
    width: 100% !important;
    height: auto !important;
    min-height: 20px !important;
    max-height: none !important;
  }

  /* td:4 — Status badge */
  #guestsTable td:nth-child(4) { padding-bottom: 8px !important; }
  #guestsTable td:nth-child(4) .status-badge {
    font-size: 10px !important;
    padding: 2px 8px !important;
    white-space: nowrap !important;
  }

  /* td:5, 6 — count + send status: hidden */
  #guestsTable td:nth-child(5),
  #guestsTable td:nth-child(6) { display: none !important; }

  /* td:7, 8 — relation + food: side by side at 48% each */
  #guestsTable td:nth-child(7),
  #guestsTable td:nth-child(8) {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    padding: 3px 0 !important;
  }
  #guestsTable td:nth-child(7) select,
  #guestsTable td:nth-child(8) select {
    font-size: 11px !important;
    padding: 4px 6px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: none !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    width: 100% !important;
  }

  /* td.row-actions — compact text buttons at card bottom */
  #guestsTable td.row-actions {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 6px !important;
    padding-top: 8px !important;
    padding-bottom: 2px !important;
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Use tbody in selector to out-specificate the v5 override block */
  #guestsTable tbody td.row-actions .btn {
    flex: none !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    height: auto !important;
    min-height: 30px !important;
    max-height: none !important;
    width: auto !important;
    min-width: 0 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
  }
  #guestsTable td.row-actions .btn[data-action="save"] { display: none !important; }
  #guestsTable tbody td.row-actions .btn[data-action="delete"] {
    background: rgba(239,68,68,0.1) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239,68,68,0.25) !important;
  }
  #guestsTable tbody td.row-actions .btn[data-action="whatsapp"] {
    background: rgba(37,211,102,0.1) !important;
    color: #15803d !important;
    border: 1px solid rgba(37,211,102,0.3) !important;
  }

  /* War room + print columns: hidden on mobile */
  #guestsTable td.col-wr-actions,
  #guestsTable td.col-wr-contact,
  #guestsTable td.col-wr-note,
  #guestsTable td.print-gift-col { display: none !important; }

  /* Bottom padding so FAB button doesn't hide the last card */
  #screen-guests .table-wrap { padding-bottom: 80px !important; }

  /* ── Task Toolbar on mobile ── */
  .task-toolbar {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .task-filter-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap !important; }
  .task-add-main-btn { width: 100% !important; justify-content: center !important; }

  /* Task cards: tap hint on mobile */
  .task-card::after {
    content: 'לחץ לפרטים';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #c9a84c;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
  }

  /* ── Seating: mobile assign mode ── */
  .sidebar-guest-item.mobile-selected {
    background: linear-gradient(90deg, #fef9ec, #fdf3d0) !important;
    border: 1.5px solid #c9a84c !important;
    border-radius: 10px;
  }
  .sidebar-guest-item.mobile-selected .sidebar-guest-badge {
    background: #c9a84c !important;
    animation: pulse-gold 1s ease infinite;
  }
  @keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.5); }
    50%       { box-shadow: 0 0 0 6px rgba(201,168,76,0); }
  }

  /* ── FAB: Floating Action Button ── */
  .mobile-fab {
    display: none;
    position: fixed;
    bottom: 76px;
    left: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9a84c, #f0d080);
    color: #1a2744;
    border: none;
    font-size: 20px;
    box-shadow: 0 4px 18px rgba(201,168,76,0.45);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 390;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .mobile-fab:active { transform: scale(0.93); box-shadow: 0 2px 10px rgba(201,168,76,0.3); }

  /* Budget FAB: body-class controlled — never bleeds into other screens */
  #fabAddBudget { display: none !important; }
  body.screen-budget-active #fabAddBudget { display: flex !important; }

  /* Task FAB: hidden — toolbar button replaces it on all screen sizes */
  #fabAddTask { display: none !important; }
}

/* ── Task Drawer ── */
.task-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9000;
  backdrop-filter: blur(3px);
}
.task-drawer-overlay.open { display: block; }

.task-drawer {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 24px 24px 0 0;
  z-index: 9001;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: bottom 0.35s cubic-bezier(0.32,0.72,0,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
}
.task-drawer.open { bottom: 0; }

.task-drawer-handle {
  width: 40px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 99px;
  margin: 14px auto 18px;
}
.task-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.task-drawer-title {
  font-size: 17px;
  font-weight: 800;
  color: #1a2744;
}
.task-drawer-close {
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}
.task-drawer-body { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; flex: 1; overflow-y: auto; }
.task-drawer-input {
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-bottom: 2px solid #c9a84c;
  padding: 8px 0;
  background: transparent;
  color: #1a2744;
  font-family: inherit;
  outline: none;
}
.task-drawer-input::placeholder { color: #b0bac6; font-weight: 400; }
.task-drawer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-drawer-label { font-size: 13px; font-weight: 600; color: #64748b; white-space: nowrap; }
.task-drawer-field {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: #f8fafc;
  color: #1a2744;
  outline: none;
}
.task-drawer-field:focus { border-color: #c9a84c; }
.task-drawer-actions { display: flex; gap: 10px; }

/* ══════════════════════════════════════════════════════════════
   SMART-SPLIT MODAL (פיצול קבוצת אורחים בסידורי הושבה)
   ══════════════════════════════════════════════════════════════ */
.split-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 23, 38, 0.60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: splitFadeIn 0.18s ease-out;
}
@keyframes splitFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.split-modal-box {
  background: #ffffff;
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 80px rgba(16, 42, 67, 0.35);
  overflow: hidden;
  animation: splitSlideUp 0.2s ease-out;
}
@keyframes splitSlideUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.split-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #E5E7EB;
}
.split-modal-title {
  font-size: 16px;
  font-weight: 800;
  color: #102A43;
  display: flex;
  align-items: center;
  gap: 8px;
}
.split-modal-title i { color: #D4AF37; }

.split-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: #6B7280;
  font-size: 15px;
  transition: background 0.15s, color 0.15s;
}
.split-modal-close:hover { background: #FEE2E2; color: #E53935; }

.split-modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.split-modal-info {
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: 10px;
  padding: 10px 14px;
}
.split-modal-info strong { color: #102A43; }

.split-modal-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}
.split-modal-input {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid #D1D5DB;
  border-radius: 9px;
  font-size: 15px;
  font-family: inherit;
  color: #102A43;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  text-align: right;
}
.split-modal-input:focus { border-color: #D4AF37; box-shadow: 0 0 0 3px rgba(212,175,55,0.15); }
input[type=number].split-modal-input { text-align: center; font-weight: 700; font-size: 18px; }

.split-modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid #E5E7EB;
  justify-content: flex-start;
}
.split-modal-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.split-modal-btn--cancel {
  background: #F3F4F6;
  color: #374151;
  border: 1.5px solid #D1D5DB;
}
.split-modal-btn--cancel:hover { background: #E5E7EB; }
.split-modal-btn--confirm {
  flex: 1;
  background: linear-gradient(135deg, #D4AF37, #F0D060);
  color: #102A43;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(212,175,55,0.35);
}
.split-modal-btn--confirm:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212,175,55,0.5); }

@media (max-width: 480px) {
  .split-modal-box    { border-radius: 14px; }
  .split-modal-footer { flex-direction: column-reverse; }
  .split-modal-btn    { width: 100%; justify-content: center; }
}

/* ── Mobile Toast ── */
.mobile-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a2744;
  color: #fff;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  z-index: 900;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid rgba(201,168,76,0.4);
}
.mobile-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* =======================================================
   MOBILE COMPREHENSIVE FIX — Eventoss
   ======================================================= */

@media (max-width: 768px) {

  /* ── Task Cards: תיקון ראשי ── */
  .task-card {
    position: relative;
    padding: 12px 12px !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .task-check-circle {
    margin-top: 3px;
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
  }
  .task-card-body {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 0 !important;
    overflow: hidden;
  }
  .task-card-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #2d3748 !important;
    display: block !important;
    word-break: break-word !important;
  }
  .task-card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 5px !important;
  }
  .task-delete-btn {
    opacity: 1 !important;
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    margin-top: 0 !important;
  }
  .task-card::after { display: none !important; }
  .task-card:hover { transform: none !important; }
  .task-card-done .task-card-title {
    text-decoration: line-through !important;
    color: #b0bac6 !important;
  }

  /* ── Task add form mobile ── */
  .task-card-add-form { align-items: flex-start !important; }
  .task-add-meta { flex-direction: column !important; gap: 8px !important; }
  .task-add-date, .task-add-priority {
    width: 100% !important;
    font-size: 15px !important;
    min-height: 40px !important;
  }

  /* ── Task stat cards compact ── */
  .task-stat-card { padding: 10px 8px !important; }
  .task-stat-icon { font-size: 15px !important; margin-bottom: 4px !important; }
  .task-stat-label { font-size: 9px !important; letter-spacing: 0 !important; }
  .task-stat-value { font-size: 20px !important; }

  /* ── Task toolbar on mobile: search full width first ── */
  .task-toolbar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .task-search-input {
    width: 100% !important;
    font-size: 15px !important;
    min-height: 42px !important;
  }
  .task-filter-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 2px;
  }
  .task-filter-tabs::-webkit-scrollbar { display: none !important; }
  .task-filter-tab {
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    min-height: 36px !important;
  }
  .task-add-main-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
    font-size: 15px !important;
  }

  /* ── Progress bar compact ── */
  .task-progress-wrap { gap: 8px !important; margin-bottom: 12px !important; }
  .task-progress-label { font-size: 11px !important; }

  /* ── Home screen ── */
  .header-row h1 { font-size: 20px !important; }
  .stat-value { font-size: 22px !important; }
  .stat-sub { font-size: 12px !important; }

  /* RSVP card — wrap the 4 numbers */
  .stat-card .rsvp-row,
  .stat-card [style*='space-between'] {
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: space-around !important;
  }

  /* ── Graphs grid: single column ── */
  .graphs-grid,
  .grid[style*='1fr 1fr'],
  .grid[style*='repeat(2'] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Budget screen ── */
  .budget-stat-cards {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* ── Remove all hover transforms on touch ── */
  .task-card:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; }
  .stat-card:hover { transform: none !important; }
  .btn:hover { transform: none !important; }

  /* ── Content bottom padding for bottom nav ── */
  .content { padding-bottom: 82px !important; }
}

/* ── Very small screens (< 360px) ── */
@media (max-width: 360px) {
  .task-stat-card { padding: 8px 6px !important; }
  .task-stat-value { font-size: 18px !important; }
  .task-filter-tab { padding: 6px 10px !important; font-size: 12px !important; }
  .task-card-title { font-size: 13px !important; }
}


/* ============================================================
   PREMIUM MOBILE v2 — Eventoss
   ============================================================ */

@media (max-width: 768px) {

  /* ── 1. Topbar: dark navy + gold brand ── */
  .mobile-topbar {
    min-height: 48px !important;
    padding: 0 16px !important;
    background: #1a2744 !important;
    border-bottom: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.22) !important;
  }
  .mobile-topbar-brand {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #c9a84c !important;
    letter-spacing: 0.04em !important;
  }
  .menu-toggle-btn {
    color: rgba(255,255,255,0.75) !important;
    border-color: rgba(255,255,255,0.18) !important;
    min-height: 38px !important;
    min-width: 38px !important;
    font-size: 17px !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 10px !important;
  }

  /* ── 2. Stat cards: horizontal scroll ── */
  #screen-home .grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 4px 2px 12px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    grid-template-columns: none !important;
  }
  #screen-home .grid::-webkit-scrollbar { display: none !important; }
  #screen-home .grid > * {
    flex: 0 0 200px !important;
    scroll-snap-align: start !important;
    min-width: 0 !important;
    min-height: 130px !important;
  }
  #screen-home .stat-card { padding: 16px !important; }
  #screen-home .stat-value { font-size: 26px !important; }
  #screen-home .stat-title { font-size: 12px !important; }

  /* Budget summary row: 3 equal cards in one row */
  .budget-summary-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    overflow: visible !important;
  }
  .budget-stat-card {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
    text-align: center !important;
  }
  .budget-stat-icon { display: none !important; }
  .budget-stat-value { font-size: 15px !important; font-weight: 800 !important; }
  .budget-stat-label { font-size: 10px !important; }

  /* ── 3. Bottom nav: glassmorphism ── */
  .mobile-bottom-nav {
    background: rgba(20, 30, 58, 0.9) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(201,168,76,0.35) !important;
    height: 64px !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.25) !important;
  }
  .mobile-nav-item {
    color: rgba(255,255,255,0.38) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    transition: all 0.2s !important;
  }
  .mobile-nav-item i { font-size: 21px !important; }
  .mobile-nav-item.active {
    color: #f0d080 !important;
    text-shadow: 0 0 14px rgba(240,208,128,0.55) !important;
  }
  .mobile-nav-item.active i {
    filter: drop-shadow(0 0 7px rgba(240,208,128,0.7)) !important;
    transform: translateY(-3px) scale(1.1) !important;
  }

  /* ── 4. Budget cards: compact single-line design ── */
  #budgetTable tr {
    display: block !important;
    position: relative !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    border-right: 4px solid #cbd5e1 !important; /* overridden by status below */
    margin-bottom: 10px !important;
    padding: 10px 14px 8px 50px !important; /* left: space for balance+trash */
  }
  /* Status indicator: colored right border */
  #budgetTable tr[data-status="paid"]    { border-right-color: #22c55e !important; }
  #budgetTable tr[data-status="partial"] { border-right-color: #f59e0b !important; }
  #budgetTable tr[data-status="unpaid"]  { border-right-color: #ef4444 !important; }

  /* All tds: reset */
  #budgetTable td {
    display: block !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: none !important;
    font-size: 13px !important;
    gap: 0 !important;
  }
  #budgetTable td::before { display: none !important; }

  /* td:1 — Vendor name (main bold row) */
  #budgetTable td[data-label="ספק"] {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a2744 !important;
    padding: 0 0 2px 0 !important;
    border-bottom: none !important;
    justify-content: unset !important;
  }

  /* td:2 — Total + td:3 — Paid: inline detail row, small gray */
  #budgetTable td[data-label="סכום כולל"],
  #budgetTable td[data-label="שולם"] {
    display: inline !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
  }
  #budgetTable td[data-label="סכום כולל"]::before {
    content: 'סה״כ: ' !important;
    display: inline !important;
    font-weight: 700 !important;
  }
  #budgetTable td[data-label="שולם"]::before {
    content: ' | שולם: ' !important;
    display: inline !important;
    font-weight: 700 !important;
  }

  /* td:4 — Balance: absolute left, bold large */
  #budgetTable td[data-label="יתרה"] {
    position: absolute !important;
    top: 10px !important;
    left: 42px !important;
    width: auto !important;
    min-height: 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a2744 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  /* td:5 — Status badge: hidden (border-right shows status) */
  #budgetTable td[data-label="סטטוס"] { display: none !important; }

  /* td:6 — Actions: absolute top-left, icon only */
  #budgetTable td.row-actions {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    border-top: none !important;
    margin-top: 0 !important;
    flex-wrap: nowrap !important;
  }
  #budgetTable td.row-actions .btn[data-action="delete-budget"] {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,77,77,0.1) !important;
    color: #e53e3e !important;
    border: 1px solid rgba(255,77,77,0.25) !important;
  }
  #budgetTable td.row-actions .btn[data-action="delete-budget"]::before {
    content: "\f1f8" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 11px !important;
  }

  /* ── 5. Status badges: bold + color ── */
  .status-badge {
    padding: 5px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 99px !important;
    border: none !important;
    letter-spacing: 0.01em !important;
  }
  .status-paid    { background: #16a34a !important; color: #fff !important; }
  .status-partial { background: #d97706 !important; color: #fff !important; }
  .status-unpaid  { background: #dc2626 !important; color: #fff !important; }
  .status-attending     { background: #166534 !important; color: #fff !important; }
  .status-not-attending { background: #991b1b !important; color: #fff !important; }
  .status-maybe         { background: #92400e !important; color: #fff !important; }
  .status-pending       { background: #64748b !important; color: #fff !important; }

  /* ── 6. Hide desktop add-form on mobile ── */
  .budget-add-box { display: none !important; }

  /* ── 7. FABs ── */
  .mobile-fab {
    bottom: 80px !important;
    width: 54px !important;
    height: 54px !important;
    font-size: 22px !important;
    box-shadow: 0 6px 24px rgba(201,168,76,0.5) !important;
  }

  /* ── 8. Content padding (account for taller nav) ── */
  .content { padding-bottom: 86px !important; }
  
  /* ── 9. Guest cards refinements ── */
  #guestsTable tr {
    border-radius: 18px !important;
    box-shadow: 0 3px 18px rgba(0,0,0,0.09) !important;
    border: 1px solid rgba(201,168,76,0.13) !important;
    margin-bottom: 14px !important;
  }

  /* ── 10. Task cards refinements ── */
  .task-card {
    border-radius: 16px !important;
    box-shadow: 0 3px 14px rgba(0,0,0,0.07) !important;
    border: 1px solid rgba(201,168,76,0.1) !important;
    margin-bottom: 10px !important;
  }
  .task-card-done {
    box-shadow: none !important;
    border-color: rgba(0,0,0,0.06) !important;
  }

  /* ── 11. Header row compact ── */
  .header-row {
    padding-bottom: 4px !important;
    margin-bottom: 12px !important;
  }
  .header-row h1 {
    font-size: 20px !important;
    font-weight: 800 !important;
  }
  .header-row .btn {
    min-height: 38px !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
}


/* ============================================================
   TOPBAR → HORIZONTAL NAV (replaces logo+hamburger)
   ============================================================ */

@media (max-width: 768px) {

  /* Hide old topbar */
  .mobile-topbar { display: none !important; }

  /* Hide sidebar overlay (no longer a slide-in panel) */
  .sidebar-overlay { display: none !important; }

  /* Sidebar becomes sticky horizontal scroll nav */
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 6px 10px !important;
    gap: 0 !important;
    background: #1a2744 !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(201,168,76,0.3) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.22) !important;
    z-index: 250 !important;
    transition: none !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sidebar::-webkit-scrollbar { display: none !important; }
  /* Always visible — no slide-in needed */
  .sidebar.mobile-open { right: auto !important; }

  /* Hide close button */
  .sidebar-close-btn { display: none !important; }

  /* Menu: horizontal row */
  .menu {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    overflow-x: visible !important;
    width: max-content !important;
    padding: 0 !important;
    align-items: center !important;
  }

  /* Each menu item: icon + short label, vertical stack */
  .menu-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 5px 11px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: rgba(255,255,255,0.42) !important;
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    transition: color 0.18s, background 0.18s !important;
    transform: none !important;
  }
  .menu-item i {
    font-size: 17px !important;
    margin: 0 !important;
    width: auto !important;
    display: block !important;
  }
  .menu-item span {
    display: block !important;
    line-height: 1 !important;
  }
  .menu-item.active {
    color: #c9a84c !important;
    background: rgba(201,168,76,0.15) !important;
  }
  .menu-item.active i {
    filter: drop-shadow(0 0 5px rgba(201,168,76,0.5)) !important;
  }
  .menu-item:hover {
    color: rgba(255,255,255,0.75) !important;
    background: rgba(255,255,255,0.07) !important;
    transform: none !important;
  }
}


/* Short labels on mobile topnav */
@media (max-width: 768px) {
  .menu-item > span { display: none !important; }
  .menu-item::after {
    content: attr(data-short);
    display: block !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    margin-top: 1px !important;
  }
}


/* ============================================================
   FINAL NAV: top bar gone, all 7 items in bottom nav
   ============================================================ */

@media (max-width: 768px) {

  /* ── Hide everything at top ── */
  .mobile-topbar  { display: none !important; }
  .sidebar        { display: none !important; }
  .sidebar-overlay{ display: none !important; }

  /* ── Bottom nav: 8 items, no scroll, fits full width ── */
  .mobile-bottom-nav {
    display: flex !important;
    height: 60px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    overflow: hidden !important;
  }
  .mobile-nav-item {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 4px 2px 3px !important;
    gap: 2px !important;
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
  }
  .mobile-nav-item i { font-size: 16px !important; }
  .mobile-nav-item span { line-height: 1 !important; }
}


/* ============================================================
   HOME SCREEN — NO SCROLL ON MOBILE
   ============================================================ */

@media (max-width: 768px) {

  /* Remove outer wrapper padding */
  #screen-home > div[style] { padding: 0 !important; }
  #screen-home > div > div[style] { padding: 0 !important; margin: 0 !important; }

  /* Compact header */
  #screen-home .header-row {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
  }
  #screen-home .header-row h1 { font-size: 17px !important; }
  #screen-home .header-row .btn { display: none !important; }

  /* 4 stat cards: back to 2×2 grid (override horizontal scroll) */
  #screen-home .grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    gap: 8px !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
  }
  #screen-home .grid > * {
    flex: unset !important;
    min-width: unset !important;
    min-height: 0 !important;
    scroll-snap-align: none !important;
  }

  /* Hide charts section (second grid) */
  #screen-home .grid[style*='1fr 2fr'],
  #screen-home .grid[style*='gap: 20px'] { display: none !important; }

  /* Compact stat cards */
  #screen-home .stat-card {
    padding: 10px 12px !important;
    min-height: 0 !important;
    border-radius: 14px !important;
  }
  #screen-home .stat-title {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }
  #screen-home .stat-value,
  #screen-home #statCountdown {
    font-size: 20px !important;
    margin-top: 4px !important;
  }
  #screen-home .stat-sub { font-size: 10px !important; margin-top: 3px !important; }

  /* RSVP numbers compact */
  #screen-home #statAttending { font-size: 16px !important; }
  #screen-home #statMaybe,
  #screen-home #statNotAttending,
  #screen-home #statWaitingReply { font-size: 13px !important; }
  #screen-home .rsvp-of-total { display: none !important; }

  /* RSVP row: wrap to 2x2 */
  #screen-home [style*='space-between'] {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    margin-top: 6px !important;
  }
  #screen-home [style*='space-between'] > div {
    flex: 1 1 40% !important;
    text-align: center !important;
  }

  /* Budget progress bar compact */
  #screen-home [style*='height: 7px'],
  #screen-home [style*='height: 8px'] { margin-top: 4px !important; }

  /* Task card compact */
  #screen-home .task-box { padding: 4px 6px !important; margin-top: 4px !important; }
  #screen-home #taskCompletedText { font-size: 10px !important; margin-top: 4px !important; }

  /* Card bg icon smaller */
  #screen-home .card-bg-icon { font-size: 52px !important; }
}


/* ============================================================
   HOME DASHBOARD — COMPACT NO-SCROLL (v3)
   ============================================================ */

@media (max-width: 768px) {

  /* ── Remove wasted outer padding ── */
  #screen-home > div[style] { padding: 0 !important; }
  #screen-home > div > div[style] { padding: 0 !important; margin: 0 !important; }

  /* ── Header: inline, icon-only refresh ── */
  #screen-home .header-row {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  #screen-home .header-row h1 { font-size: 17px !important; flex: 1; }
  #screen-home #refreshDashboardBtn {
    min-height: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important; /* hide text */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #screen-home #refreshDashboardBtn::before {
    content: "\f2f9";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 13px !important;
  }

  /* ── Stat cards: 2×2 grid, compact ── */
  #screen-home .grid:not(.home-bottom-grid) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    gap: 7px !important;
    padding: 0 !important;
    margin-bottom: 7px !important;
  }
  #screen-home .grid:not(.home-bottom-grid) > * {
    flex: unset !important;
    min-width: unset !important;
    min-height: 0 !important;
    scroll-snap-align: none !important;
  }
  #screen-home .stat-card {
    padding: 10px 11px !important;
    min-height: 0 !important;
    border-radius: 13px !important;
  }
  #screen-home .stat-title  { font-size: 10px !important; margin-bottom: 2px !important; }
  #screen-home .stat-value,
  #screen-home #statCountdown { font-size: 20px !important; margin-top: 2px !important; }
  #screen-home .stat-sub    { font-size: 10px !important; margin-top: 2px !important; }
  #screen-home .card-bg-icon { font-size: 48px !important; }

  /* RSVP numbers: 2×2 wrap */
  #screen-home #statAttending { font-size: 16px !important; }
  #screen-home #statMaybe,
  #screen-home #statNotAttending,
  #screen-home #statWaitingReply { font-size: 13px !important; }
  #screen-home .rsvp-of-total { display: none !important; }
  #screen-home [style*='space-between'] {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    margin-top: 4px !important;
  }
  #screen-home [style*='space-between'] > div { flex: 1 1 40% !important; }

  /* ── Bottom grid: 2 charts side-by-side + task list below ── */
  .home-bottom-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 7px !important;
    align-items: start !important;
  }
  /* child 1 = guest chart → top-left */
  .home-bottom-grid > div:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* child 2 = task list → full-width bottom row */
  .home-bottom-grid > div:nth-child(2) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
  }
  /* child 3 = budget chart → top-right */
  .home-bottom-grid > div:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Charts: compact card */
  .home-bottom-grid .stat-card {
    padding: 8px 10px !important;
    min-height: 0 !important;
    align-items: center !important;
  }
  .home-bottom-grid .stat-title {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  /* Shrink chart canvas containers */
  #screen-home #guestsChart,
  #screen-home #budgetChart { max-height: 120px !important; }
  .home-bottom-grid [style*='height: 280px'] {
    height: 120px !important;
    max-height: 120px !important;
  }

  /* Mini task list: compact */
  .home-bottom-grid #miniTaskList {
    gap: 5px !important;
    flex: unset !important;
  }
  .home-bottom-grid #miniTaskList > div {
    padding: 8px 10px !important;
    border-radius: 9px !important;
  }
  .home-bottom-grid #miniTaskList span[style*='14px'] { font-size: 12px !important; }
  .home-bottom-grid #miniTaskList span[style*='11px'] { font-size: 10px !important; }
  .home-bottom-grid [onclick*='tasks'] {
    margin-top: 6px !important;
    padding: 6px !important;
    min-height: 34px !important;
    font-size: 12px !important;
  }
}


/* ============================================================
   FIX: Restore home-bottom-grid (override previous hide rules)
   ============================================================ */

@media (max-width: 768px) {

  /* Override all previous 'display:none' rules on this section */
  #screen-home .grid.home-bottom-grid,
  #screen-home .home-bottom-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 7px !important;
    align-items: start !important;
    overflow: visible !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
  }

  /* Charts: top row, side by side */
  #screen-home .home-bottom-grid > div:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  #screen-home .home-bottom-grid > div:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  /* Task list: full-width bottom row */
  #screen-home .home-bottom-grid > div:nth-child(2) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
  }

  /* Compact chart cards */
  #screen-home .home-bottom-grid .stat-card {
    padding: 8px 10px !important;
    min-height: 0 !important;
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Shrink canvas containers */
  #screen-home .home-bottom-grid [style*='height: 280px'] {
    height: 115px !important;
    max-height: 115px !important;
  }
  #screen-home #guestsChart,
  #screen-home #budgetChart {
    max-height: 115px !important;
  }

  /* Task list card compact */
  #screen-home .home-bottom-grid > div:nth-child(2) .stat-card {
    padding: 8px 10px !important;
    min-height: 0 !important;
  }
  #screen-home #miniTaskList {
    gap: 5px !important;
    flex: unset !important;
  }
  #screen-home #miniTaskList > div {
    padding: 7px 9px !important;
    border-radius: 9px !important;
  }
}


/* ============================================================
   FINAL RESPONSIVE PREMIUM — Eventoss v4
   ============================================================ */

/* ── Icon-only refresh button (all screens) ── */
.btn.icon-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {

  /* ── Hide desktop add-forms on mobile ── */
  .guest-add-row  { display: none !important; }
  #phoneError     { display: none !important; }

  /* ── Task toolbar: stacked on mobile ── */
  .task-toolbar {
    flex-direction: column !important;
    gap: 7px !important;
  }

  /* ── Action row: הוסף + מחק side-by-side ── */
  .task-action-row {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .task-add-main-btn {
    flex: 1 !important;
    justify-content: center !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }
  .task-action-row .delete-all-btn {
    flex-shrink: 0 !important;
    min-height: 44px !important;
  }

  /* ── Budget add box: hidden on mobile (FAB replaces it) ── */
  .budget-add-box { display: none !important; }

  /* ── Guest cards: v4 overrides (see "Compact Guest Cards" block above) ── */
  #guestsTable tr { padding: 10px 12px 8px 10px !important; margin-bottom: 10px !important; }

  /* ── Budget cards: v4 overrides (see "compact single-line design" block above) ── */
  #budgetTable tr { padding: 10px 14px 8px 50px !important; margin-bottom: 10px !important; }

  /* ── Task cards: compact ── */
  .task-card { padding: 10px 11px !important; margin-bottom: 8px !important; }
  .task-card-title { font-size: 13px !important; }
  .task-priority-tag, .task-due-tag { font-size: 10px !important; }

  /* ── All stat cards: 16px radius, subtle shadow ── */
  .stat-card, .task-stat-card, .budget-stat-card {
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
  }

  /* ── Min 44px tap targets ── */
  .btn           { min-height: 44px !important; }
  .filter-tab    { min-height: 40px !important; }
  .task-filter-tab { min-height: 38px !important; }
  .mobile-nav-item { min-height: 44px !important; }
  .cell-input    { min-height: 40px !important; }

  /* ── Header rows: compact ── */
  .header-row { margin-bottom: 8px !important; }
  .header-row h1 { font-size: 18px !important; }
  .header-row .btn:not(.icon-btn) { min-height: 36px !important; padding: 6px 12px !important; font-size: 12px !important; }

  /* ── Content: no extra top padding ── */
  .content { padding-top: 10px !important; }
}


/* ============================================================
   MOBILE FIX v5 — Guest + Budget definitive overrides
   Must come last to win all specificity fights
   ============================================================ */

@media (max-width: 768px) {

  /* ── FAB: small navy, physical right side ── */
  .mobile-fab {
    width: 50px !important;
    height: 50px !important;
    bottom: 80px !important;
    left: auto !important;
    right: 20px !important;
    background: #1e293b !important;
    color: #ffffff !important;
    font-size: 20px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
  }

  /* ── GUEST CARDS ── */

  /* Reduce card padding so 3-4 fit on screen */
  #guestsTable tr {
    padding: 8px 10px 8px 8px !important;
    margin-bottom: 8px !important;
  }

  /* font-size:0 on row removes inline-block whitespace gap
     so the two select tds can sit at exactly 50% + 50% */
  #guestsTable tbody tr { font-size: 0 !important; }

  /* Restore font-size on all tds */
  #guestsTable td { font-size: 13px !important; }

  /* Selects side-by-side using inline-block */
  #guestsTable td:nth-child(7),
  #guestsTable td:nth-child(8) {
    display: inline-block !important;
    width: 50% !important;
    vertical-align: top !important;
    padding: 3px 0 0 0 !important;
    box-sizing: border-box !important;
  }
  #guestsTable td:nth-child(8) { padding-right: 4px !important; }
  /* Override the 44px/40px min-height that was making selects huge */
  #guestsTable td:nth-child(7) select,
  #guestsTable td:nth-child(8) select,
  #guestsTable td:nth-child(7) .cell-input,
  #guestsTable td:nth-child(8) .cell-input {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Action icon buttons: transparent bg, colored icon only */
  #guestsTable td.row-actions .btn {
    min-height: 30px !important;
    height: 30px !important;
    width: 30px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  #guestsTable td.row-actions .btn[data-action="delete"] {
    color: #ef4444 !important;
    background: transparent !important;
  }
  #guestsTable td.row-actions .btn[data-action="whatsapp"] {
    color: #25d366 !important;
    background: transparent !important;
  }

  /* ── BUDGET SUMMARY CARDS: 3 in a row ── */
  .budget-summary-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
  }
  .budget-stat-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
    text-align: center !important;
  }
  .budget-stat-icon { display: none !important; }
  .budget-stat-label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .budget-stat-value {
    font-size: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── BUDGET VENDOR CARDS: fix oversized delete btn ── */
  /* Override the global .btn { min-height: 44px } for icon buttons inside tables */
  #budgetTable td.row-actions .btn {
    min-height: 28px !important;
    height: 28px !important;
    width: 28px !important;
  }
  #budgetTable td.row-actions .btn[data-action="delete-budget"] {
    background: transparent !important;
    color: #ef4444 !important;
    border: none !important;
    box-shadow: none !important;
  }
  #budgetTable td.row-actions .btn[data-action="delete-budget"]::before {
    content: "\f1f8" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 13px !important;
  }
}


/* ============================================================
   CHAMPAGNE GOLD THEME — COMPREHENSIVE OVERRIDES
   (Elegant Glassmorphism & Champagne Gold v1)
   ============================================================ */

/* ── Primary button → Gold ── */
.btn.primary {
  background: linear-gradient(135deg, #D4AF37, #F0D060) !important;
  color: #102A43 !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(212,175,55,0.35) !important;
}
.btn.primary:hover {
  background: linear-gradient(135deg, #C49B2E, #E0C048) !important;
  box-shadow: 0 6px 20px rgba(212,175,55,0.45) !important;
  transform: translateY(-1px);
}

/* ── Filter tabs → Gold active ── */
.filter-tab.active {
  background: #D4AF37 !important;
  border-color: #D4AF37 !important;
  color: #102A43 !important;
  font-weight: 700 !important;
}
.filter-tab:hover { border-color: #D4AF37 !important; color: #D4AF37 !important; }

/* ── Budget progress bar → gradient ── */
#budgetProgressBar {
  background: linear-gradient(90deg, #102A43, #D4AF37) !important;
  border-radius: 10px !important;
}

/* ── Task progress bar → already gold via .task-progress-fill ── */
#taskProgressBar {
  background: linear-gradient(90deg, #102A43, #D4AF37) !important;
  border-radius: 10px !important;
}

/* ── RSVP Icon Breakdown ── */
.rsvp-breakdown {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.rsvp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.rsvp-icon {
  font-size: 20px;
  display: block;
}
.rsvp-number {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.rsvp-of-total {
  font-size: 12px;
  opacity: 0.6;
  font-weight: 400;
}
.rsvp-attending  { color: #27AB83; }
.rsvp-maybe      { color: #94A3B8; }
.rsvp-not-attending { color: #E15554; }
.rsvp-waiting    { color: #F59E0B; }

/* Mobile: RSVP 2×2 wrap */
@media (max-width: 768px) {
  .rsvp-breakdown {
    flex-wrap: wrap !important;
    gap: 8px 4px !important;
    justify-content: space-around !important;
  }
  .rsvp-item { flex: 1 1 40%; }
  .rsvp-number { font-size: 16px !important; }
  .rsvp-icon { font-size: 16px !important; }
}

/* ── Budget stat cards (navy accents) ── */
.budget-stat-outstanding { background: #fff2f2 !important; border-color: rgba(225,85,84,0.2) !important; }
.budget-stat-total       { background: #eef4fc !important; border-color: rgba(16,42,67,0.12) !important; }
.budget-stat-paid        { background: #edfaf5 !important; border-color: rgba(39,171,131,0.2) !important; }
.budget-stat-outstanding .budget-stat-value { color: #E15554 !important; }
.budget-stat-total .budget-stat-value       { color: #102A43 !important; }
.budget-stat-paid .budget-stat-value        { color: #27AB83 !important; }
.budget-stat-outstanding .budget-stat-icon  { color: #E15554 !important; }
.budget-stat-total .budget-stat-icon        { color: #102A43 !important; }
.budget-stat-paid .budget-stat-icon         { color: #27AB83 !important; }

/* ── Task stat cards ── */
.task-stat-open   { background: #eef4fc !important; border-color: rgba(16,42,67,0.12) !important; }
.task-stat-done   { background: #edfaf5 !important; border-color: rgba(39,171,131,0.2) !important; }
.task-stat-overdue{ background: #fff2f2 !important; border-color: rgba(225,85,84,0.2) !important; }
.task-stat-open .task-stat-value   { color: #102A43 !important; }
.task-stat-done .task-stat-value   { color: #27AB83 !important; }
.task-stat-overdue .task-stat-value{ color: #E15554 !important; }
.task-stat-open .task-stat-icon    { color: #102A43 !important; }
.task-stat-done .task-stat-icon    { color: #27AB83 !important; }
.task-stat-overdue .task-stat-icon { color: #E15554 !important; }

/* ── Task card: urgency left border ── */
.task-card { position: relative; border-right: 3px solid transparent !important; }
.task-card-overdue          { border-right-color: #E15554 !important; }
.task-card[data-priority="high"]   { border-right-color: #E15554 !important; }
.task-card[data-priority="medium"] { border-right-color: #D4AF37 !important; }
.task-card[data-priority="low"]    { border-right-color: #27AB83 !important; }

/* ── Ghost button refinement ── */
.btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
.btn.ghost:hover {
  background: rgba(16,42,67,0.06);
  color: var(--text);
}

/* ── Input focus accent → gold ── */
input:focus, select:focus, textarea:focus {
  border-color: rgba(212,175,55,0.6) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12) !important;
  background: #ffffff !important;
}

/* ── Card base: glassmorphism ── */
.card.soft {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-lg) !important;
}

/* ── Home stat card background icon colors ── */
.color-card-1 .card-bg-icon { color: #102A43 !important; opacity: 0.07; }
.color-card-2 .card-bg-icon { color: #27AB83 !important; opacity: 0.1; }
.color-card-3 .card-bg-icon { color: #D4AF37 !important; opacity: 0.1; }
.color-card-4 .card-bg-icon { color: #F59E0B !important; opacity: 0.12; }

.budget-negative-text {
  color: #c53030 !important;
  font-weight: 800;
}
.budget-alert-badge {
  display: inline-block;
  background: #fff5f5;
  color: #9b1c1c;
  border: 1.5px solid #feb2b2;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 10px;
  margin-bottom: 5px;
  letter-spacing: 0.4px;
  animation: pulse-overage 1.8s ease-in-out infinite;
}
@keyframes pulse-overage {
  0%, 100% { box-shadow: 0 0 0 0 rgba(155, 28, 28, 0.20); }
  50%       { box-shadow: 0 0 0 5px rgba(155, 28, 28, 0); }
}

/* ── Mobile bottom nav stays navy ── */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    background: #102A43 !important;
    border-top: 1px solid rgba(212,175,55,0.3) !important;
  }
  .mobile-nav-item.active { color: #D4AF37 !important; }
  .mobile-nav-item.active i {
    filter: drop-shadow(0 0 6px rgba(212,175,55,0.6)) !important;
  }
}

/* ── Sidebar: mobile horizontal nav stays navy ── */
@media (max-width: 768px) {
  .sidebar { background: #102A43 !important; }
}



/* ============================================================
   EVENT DETAILS SCREEN — Premium Card Layout
   ============================================================ */

/* Outer wrapper: centers the card horizontally */
.event-form-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 40px;
}

/* The floating card */
.event-form-card {
  width: 100%;
  max-width: 780px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 40px 48px 36px;
  box-shadow: 0 16px 48px rgba(16, 42, 67, 0.10), 0 2px 8px rgba(16, 42, 67, 0.06);
}

/* Centered header area */
.event-form-header {
  text-align: center;
  margin-bottom: 36px;
}

.event-form-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D4AF37, #F0D060);
  color: #102A43;
  font-size: 20px;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
}

.event-form-title {
  font-size: 26px;
  font-weight: 800;
  color: #102A43;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.event-form-subtitle {
  font-size: 14px;
  color: #627D98;
  margin: 0;
  font-weight: 400;
}

/* 2-column grid for fields */
.event-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}

/* Full-width items span both columns */
.event-form-actions,
.event-msg {
  grid-column: 1 / -1;
}

/* Individual field group */
.event-field-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.event-field-label {
  font-size: 12px;
  font-weight: 700;
  color: #627D98;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-field-icon {
  color: #D4AF37;
  font-size: 11px;
}

/* Premium input style */
.event-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid rgba(16, 42, 67, 0.12);
  border-radius: 10px;
  background: #FAFBFD;
  color: #102A43;
  font-size: 15px;
  font-family: 'Heebo', sans-serif;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.event-input::placeholder {
  color: #B0BAC6;
  font-weight: 400;
}

.event-input:hover {
  border-color: rgba(16, 42, 67, 0.22);
  background: #ffffff;
}

.event-input:focus {
  border-color: #D4AF37 !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
  background: #ffffff !important;
}

/* date input: fix browser default appearance */
.event-input[type="date"] {
  color-scheme: light;
  min-height: 46px;
}

/* ── Invitation image upload ── */
.invite-img-upload-zone {
  position: relative;
  border: 2px dashed #c5d2de;
  border-radius: 12px;
  background: #f8fafc;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
  cursor: pointer;
}
.invite-img-upload-zone.drag-over {
  border-color: var(--primary, #102A43);
  background: #eef4fb;
}
.invite-img-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}
.invite-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 28px 20px;
  text-align: center;
  pointer-events: none;
}
.invite-img-placeholder i    { font-size: 30px; color: #94a3b8; }
.invite-img-placeholder span { font-size: 14px; font-weight: 600; color: #475569; }
.invite-img-placeholder small{ font-size: 11px; color: #94a3b8; }
.invite-img-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px;
}
.invite-img-preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,0.13);
}
.invite-img-remove-btn {
  font-size: 12px;
  font-weight: 700;
  color: #dc2626;
  background: transparent;
  border: 1.5px solid rgba(220,38,38,0.35);
  border-radius: 8px;
  padding: 5px 14px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.invite-img-remove-btn:hover { background: rgba(220,38,38,0.07); border-color: #dc2626; }
.invite-img-status            { font-size: 12px; padding: 4px 2px; min-height: 18px; }
.invite-img-status.uploading  { color: #2563eb; }
.invite-img-status.success    { color: #16a34a; }
.invite-img-status.error      { color: #dc2626; }

/* Actions row */
.event-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Save button — Deep Navy + Gold */
.event-save-btn {
  background: #102A43 !important;
  color: #D4AF37 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 13px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Heebo', sans-serif !important;
  box-shadow: 0 6px 20px rgba(16, 42, 67, 0.22) !important;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.event-save-btn:hover {
  background: #1a3a5c !important;
  box-shadow: 0 10px 28px rgba(16, 42, 67, 0.3) !important;
  transform: translateY(-2px) !important;
}

.event-save-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(16, 42, 67, 0.18) !important;
}

/* Load button — subtle outline */
.event-load-btn {
  background: transparent !important;
  color: #627D98 !important;
  border: 1.5px solid rgba(16, 42, 67, 0.15) !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Heebo', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s !important;
  cursor: pointer !important;
}

.event-load-btn:hover {
  border-color: #D4AF37 !important;
  color: #D4AF37 !important;
  background: rgba(212, 175, 55, 0.06) !important;
}

/* Status message */
.event-msg {
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
  margin-top: 2px;
}

/* ── Mobile: single column, full width inputs ── */
@media (max-width: 768px) {
  .event-form-wrap { padding: 0 0 20px; }

  .event-form-card {
    border-radius: 16px !important;
    padding: 28px 20px 24px !important;
    max-width: 100% !important;
    box-shadow: 0 8px 24px rgba(16, 42, 67, 0.08) !important;
  }

  .event-form-header { margin-bottom: 24px; }
  .event-form-title  { font-size: 20px !important; }
  .event-form-icon   { width: 44px; height: 44px; font-size: 17px; margin-bottom: 10px; }

  .event-form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .event-input {
    font-size: 16px !important; /* prevent iOS zoom */
    min-height: 48px !important;
  }

  .event-form-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .event-save-btn,
  .event-load-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 50px !important;
    font-size: 16px !important;
  }
}


/* ============================================================
   GUESTS LIST SCREEN -- Premium Refactor
   ============================================================ */

.guests-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.guests-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
}
.guests-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.guests-reload-btn {
  background: rgba(255,255,255,0.9) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--muted) !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  transition: border-color 0.2s, color 0.2s, transform 0.3s !important;
}
.guests-reload-btn:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  transform: rotate(90deg) !important;
}
.guests-import-trigger-btn {
  flex: 1 !important;
  height: 44px !important;
  background: transparent !important;
  color: #C9A84C !important;
  border: 1.5px solid #C9A84C !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: background 0.18s, box-shadow 0.18s !important;
  white-space: nowrap !important;
}
.guests-import-trigger-btn:hover {
  background: rgba(201,168,76,0.08) !important;
  box-shadow: 0 2px 8px rgba(201,168,76,0.2) !important;
}
.guests-import-panel {
  margin-bottom: 20px;
  padding: 18px 22px !important;
}
.guests-import-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.guests-import-icon {
  font-size: 22px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.guests-import-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.guests-import-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.guests-import-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.guests-apply-import-btn {
  flex: 1 !important;
  height: 44px !important;
  background: linear-gradient(135deg, #D4AF37, #F0D060) !important;
  color: #102A43 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-shadow: 0 4px 14px rgba(212,175,55,0.3) !important;
  transition: opacity 0.2s !important;
  white-space: nowrap !important;
}
.guests-apply-import-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.guests-add-card {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 700px;
}
.guests-add-fields {
  display: flex;
  gap: 10px;
  align-items: center;
}
.guests-add-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px !important;
  border: 1.5px solid rgba(16,42,67,0.12) !important;
  border-radius: 10px !important;
  background: #FAFBFD !important;
  color: var(--navy) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  height: 42px !important;
  box-sizing: border-box !important;
}
.guests-add-input::placeholder { color: #B0BAC6 !important; font-weight: 400 !important; }
.guests-add-input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.14) !important;
  background: #fff !important;
}
.guests-add-select { cursor: pointer !important; }
.guests-add-btn {
  background: linear-gradient(135deg, #D4AF37, #F0D060) !important;
  color: #102A43 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 11px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  align-self: flex-start !important;
  box-shadow: 0 4px 14px rgba(212,175,55,0.3) !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
  white-space: nowrap !important;
}
.guests-add-btn:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(212,175,55,0.45) !important;
  transform: translateY(-1px) !important;
}
.guests-add-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
.guests-phone-error {
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(220,38,38,0.07);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 4px;
  animation: shake 0.35s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.guests-add-group-btn {
  background: transparent !important;
  color: var(--navy) !important;
  border: 1.5px solid rgba(16,42,67,0.18) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 0.2s, color 0.2s !important;
}
.guests-add-group-btn:hover {
  background: var(--navy) !important;
  color: #fff !important;
}
.guests-search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 10px;
  flex-wrap: wrap;
}
.guests-search-wrap {
  position: relative;
  flex: 1;
  max-width: 420px;
}
.guests-search-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}
.guests-search-input {
  width: 100% !important;
  padding: 9px 36px 9px 14px !important;
  border: 1.5px solid rgba(16,42,67,0.12) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.9) !important;
  color: var(--navy) !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  height: 40px !important;
  box-sizing: border-box !important;
}
.guests-search-input::placeholder { color: #B0BAC6 !important; }
.guests-search-input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.13) !important;
  background: #fff !important;
}
/* ── Filter row: tabs + call-batch button side by side ── */
.filter-tabs-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 10px;
}
.filter-tabs-row .filter-tabs {
  margin: 0;
  flex: 1;
}
.btn-call-batch {
  background: #16a34a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: background 0.2s, opacity 0.2s !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-call-batch:hover    { background: #15803d !important; }
.btn-call-batch:disabled { opacity: 0.55; cursor: not-allowed !important; }
.btn-phone-call-batch {
  background: #1d4ed8 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: background 0.2s, opacity 0.2s !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-phone-call-batch:hover    { background: #1e40af !important; }
.btn-phone-call-batch:disabled { opacity: 0.55; cursor: not-allowed !important; }
.btn-whatsapp-batch {
  background: #25d366 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: background 0.2s, opacity 0.2s !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-whatsapp-batch:hover    { background: #1ebe5d !important; }
.btn-whatsapp-batch:disabled { opacity: 0.55; cursor: not-allowed !important; }

/* ── Campaign Round Buttons ── */
.campaign-btns-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0 4px;
  align-items: center;
}
.btn-campaign {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.18s, opacity 0.18s;
  white-space: nowrap;
}
.btn-campaign:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-campaign-1 { background: #25d366; color: #fff; }
.btn-campaign-1:hover:not(:disabled) { background: #1ebe5d; }
.btn-campaign-2 { background: #128c7e; color: #fff; }
.btn-campaign-2:hover:not(:disabled) { background: #0e7266; }
.btn-campaign-3 { background: #2563eb; color: #fff; }
.btn-campaign-3:hover:not(:disabled) { background: #1d4ed8; }

.call-batch-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 5px;
}

/* Table: breathing room + vertical alignment */
#guestsTable th,
#guestsTable td {
  vertical-align: middle !important;
  padding: 13px 14px !important;
}
#guestsTable thead th {
  vertical-align: middle !important;
  background: #F8F9FA !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid rgba(16,42,67,0.07) !important;
  white-space: nowrap !important;
}
/* Prevent repeated-header artifact */
#guestsTable thead { display: table-header-group !important; }
#guestsTable tbody { display: table-row-group !important; }
#guestsTable tbody tr:hover td {
  background: rgba(212,175,55,0.04) !important;
}

/* Column sizing */
.col-num     { width: 36px;  text-align: center !important; }
.col-name    { min-width: 140px; }
.col-phone   { min-width: 110px; direction: ltr; }
.col-status  { min-width: 100px; text-align: center !important; }
.col-count   { width: 60px;  text-align: center !important; }
.col-send    { width: 110px; text-align: center !important; }
.col-relation{ min-width: 90px; }
.col-food    { min-width: 100px; }
.col-actions { width: 90px;  text-align: center !important; white-space: nowrap; }

/* Mobile */
@media (max-width: 768px) {
  .guests-topbar { margin-bottom: 14px; }
  .guests-title  { font-size: 20px !important; }
  .guests-add-card { max-width: 100% !important; padding: 14px !important; }
  .guests-add-fields { flex-direction: column !important; gap: 8px !important; }
  .guests-add-input { width: 100% !important; height: 46px !important; font-size: 16px !important; }
  .guests-add-btn { width: 100% !important; justify-content: center !important; padding: 13px !important; font-size: 15px !important; }
  .guests-search-wrap { max-width: 100% !important; }
  .guests-search-input { font-size: 16px !important; height: 44px !important; }
  .guests-import-header { flex-direction: column; gap: 8px; }
  .guests-reload-btn { width: 44px !important; height: 44px !important; }
}

/* ============================================================
   SEATING SCREEN -- Premium Glassmorphism Redesign
   ============================================================ */

/* ── Toolbar ── */
.seating-toolbar-premium {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 4px 20px rgba(16,42,67,0.08);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.seating-toolbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.seating-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
}
.seating-subtitle {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.seating-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Chairs input */
.seating-chairs-label {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16,42,67,0.05);
  border: 1.5px solid rgba(16,42,67,0.1);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.seating-chairs-icon { color: var(--gold); font-size: 12px; }
.seating-chairs-label input {
  width: 42px !important;
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  padding: 0 !important;
  text-align: center !important;
  min-height: 0 !important;
}

/* Toolbar button variants */
.seating-btn-primary {
  background: #102A43 !important;
  color: #D4AF37 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 14px rgba(16,42,67,0.2) !important;
  transition: background 0.2s, transform 0.15s !important;
}
.seating-btn-primary:hover {
  background: #1a3a5c !important;
  transform: translateY(-1px) !important;
}
.seating-btn-secondary {
  background: linear-gradient(135deg, #D4AF37, #F0D060) !important;
  color: #102A43 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 12px rgba(212,175,55,0.3) !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
}
.seating-btn-secondary:hover {
  box-shadow: 0 6px 18px rgba(212,175,55,0.45) !important;
  transform: translateY(-1px) !important;
}
.seating-btn-ghost {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1.5px solid rgba(16,42,67,0.12) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s !important;
}
.seating-btn-ghost:hover {
  border-color: var(--navy) !important;
  color: var(--navy) !important;
  background: rgba(16,42,67,0.05) !important;
}

/* ── Floor-plan button group ── */
.floor-plan-btn-group {
  display: inline-flex;
  align-items: stretch;
  background: rgba(16,42,67,0.04);
  border: 1.5px solid rgba(16,42,67,0.12);
  border-radius: 10px;
  overflow: hidden;
  gap: 0;
}
.floor-plan-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  border: none;
  border-radius: 0;
  line-height: 1;
}
.floor-plan-upload-btn:hover {
  background: rgba(16,42,67,0.07);
  color: var(--navy);
}
.floor-plan-upload-btn i { font-size: 13px; }

.seating-btn-delete-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-right: 1.5px solid rgba(16,42,67,0.12);
  border-radius: 0;
  cursor: pointer;
  color: rgba(229,57,53,0.6);
  transition: background 0.15s, color 0.15s;
}
.seating-btn-delete-bg:hover {
  background: rgba(229,57,53,0.10);
  color: #e53935;
}
.seating-btn-delete-bg svg { flex-shrink: 0; }
.seating-guests-toggle.active-sidebar {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(212,175,55,0.1) !important;
}

/* ── Live Stats Bar ── */
.seating-stats-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 12px;
  padding: 10px 20px;
  box-shadow: 0 2px 12px rgba(16,42,67,0.06);
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 6px;
}
.seating-stat {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 14px;
  flex: 1;
  min-width: 100px;
}
.seating-stat-icon { font-size: 13px; color: var(--muted); }
.seating-stat-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.seating-stat-value { font-size: 18px; font-weight: 800; color: var(--navy); margin-right: auto; }
.seating-stat-green .seating-stat-icon  { color: var(--success); }
.seating-stat-green .seating-stat-value { color: var(--success); }
.seating-stat-amber .seating-stat-icon  { color: var(--warning); }
.seating-stat-amber .seating-stat-value { color: var(--warning); }
.seating-stat-navy  .seating-stat-icon  { color: var(--navy); }
.seating-stat-navy  .seating-stat-value { color: var(--navy); }
.seating-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(16,42,67,0.08);
  flex-shrink: 0;
}

/* ── Sidebar (glassmorphism) ── */
.seating-sidebar {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
  box-shadow: 0 8px 32px rgba(16,42,67,0.1) !important;
  margin-left: 12px !important;
}
.seating-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16,42,67,0.06);
}
.seating-sidebar-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}
.seating-sidebar-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 500;
}

/* Sidebar search with icon */
.seating-sidebar-search {
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(16,42,67,0.06);
}
.seating-sidebar-search-icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
}
.seating-sidebar-search input {
  width: 100% !important;
  padding: 7px 30px 7px 10px !important;
  border: 1.5px solid rgba(16,42,67,0.1) !important;
  border-radius: 9px !important;
  background: #FAFBFD !important;
  font-size: 13px !important;
  color: var(--navy) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s !important;
  min-height: 0 !important;
}
.seating-sidebar-search input:focus {
  border-color: var(--gold) !important;
  background: #fff !important;
}

/* Sidebar guest items */
.sidebar-guest-item {
  border-radius: 8px !important;
  margin: 2px 6px !important;
  padding: 8px 10px !important;
  transition: background 0.15s, transform 0.15s !important;
}
.sidebar-guest-item.unseated:hover {
  background: rgba(16,42,67,0.06) !important;
  transform: translateX(-2px) !important;
}
.sidebar-guest-item.seated {
  background: rgba(39,171,131,0.08) !important;
}
.sidebar-guest-item.mobile-selected {
  background: rgba(212,175,55,0.15) !important;
  border: 1.5px solid rgba(212,175,55,0.5) !important;
}
.sidebar-group-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 14px 4px !important;
}

/* ── Table fill-state color coding ── */
.table-card.table-empty {
  border-color: #94A3B8 !important;
  box-shadow: 0 3px 12px rgba(148,163,184,0.2) !important;
}
.table-card.table-partial {
  border-color: #102A43 !important;
  box-shadow: 0 3px 12px rgba(16,42,67,0.2) !important;
}
.table-card.table-full {
  border-color: #D4AF37 !important;
  box-shadow: 0 3px 16px rgba(212,175,55,0.35) !important;
}
.table-card.table-over {
  border-color: #E15554 !important;
  box-shadow: 0 3px 16px rgba(225,85,84,0.35) !important;
  animation: pulse-over 1.5s ease-in-out infinite;
}
@keyframes pulse-over {
  0%, 100% { box-shadow: 0 3px 16px rgba(225,85,84,0.35); }
  50%       { box-shadow: 0 3px 24px rgba(225,85,84,0.6); }
}

/* Table count text color inherits fill class logic */
.table-card.table-empty   .table-circle-count { color: #94A3B8 !important; }
.table-card.table-partial .table-circle-count { color: #102A43 !important; }
.table-card.table-full    .table-circle-count { color: #D4AF37 !important; }
.table-card.table-over    .table-circle-count { color: #E15554 !important; }

/* Table body: glassmorphism base */
.table-card {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-width: 3px !important;
  transition: box-shadow 0.2s, transform 0.15s, border-color 0.3s !important;
}
.table-card:hover {
  transform: scale(1.04) !important;
}

/* ── Canvas: subtler dot grid ── */
.seating-canvas {
  background-image: radial-gradient(circle, rgba(16,42,67,0.12) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  background-color: #F0F4F8 !important;
}
.seating-canvas-wrap {
  border-radius: 16px !important;
  border: 1px solid rgba(16,42,67,0.08) !important;
  background: #F0F4F8 !important;
}

/* ── Zoom controls: navy theme ── */
.seating-zoom-controls {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(16,42,67,0.1) !important;
  box-shadow: 0 2px 10px rgba(16,42,67,0.1) !important;
  border-radius: 10px !important;
}
.zoom-btn:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(212,175,55,0.08) !important;
}

/* ── Table popover: premium ── */
.table-popover {
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  box-shadow: 0 12px 40px rgba(16,42,67,0.18) !important;
  border-radius: 16px !important;
}
.table-popover-name-input:focus {
  border-color: var(--gold) !important;
  outline: none !important;
}
.table-popover-save-btn {
  background: rgba(212,175,55,0.15) !important;
  color: var(--gold) !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
}
.table-popover-save-btn:hover {
  background: var(--gold) !important;
  color: #102A43 !important;
}

/* ── Legend pill (top-right of canvas) ── */
.seating-legend {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 50;
  pointer-events: none;
}
.seating-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.92);
  border-radius: 20px;
  padding: 3px 10px 3px 6px;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.seating-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Mobile: seating screen ── */
@media (max-width: 768px) {
  .seating-toolbar-premium {
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
  }
  .seating-title { font-size: 17px !important; }
  .seating-subtitle { display: none; }
  .seating-toolbar-actions { gap: 6px !important; flex-wrap: wrap !important; }
  .seating-btn-primary, .seating-btn-secondary { padding: 8px 12px !important; font-size: 12px !important; }
  .seating-btn-ghost { padding: 7px 10px !important; font-size: 12px !important; }
  .seating-stats-bar {
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    gap: 4px !important;
  }
  .seating-stat { padding: 3px 8px !important; min-width: 80px !important; }
  .seating-stat-value { font-size: 15px !important; }
  .seating-stat-label { font-size: 10px !important; }
  .seating-stat-divider { height: 24px !important; }
}

/* ============================================================
   TASKS SCREEN — Premium Upgrade
   ============================================================ */

/* ── Load-list button ── */
.tasks-load-btn {
  background: linear-gradient(135deg, var(--gold, #D4AF37) 0%, #b8960f 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 3px 10px rgba(212,175,55,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.tasks-load-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212,175,55,0.45);
}
.tasks-load-btn:disabled { opacity: 0.65; cursor: not-allowed; }

/* ── Icon-only reload button ── */
.tasks-icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(16,42,67,0.18);
  color: var(--navy, #102A43);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.tasks-icon-btn:hover {
  background: rgba(212,175,55,0.12);
  border-color: var(--gold, #D4AF37);
  transform: rotate(30deg);
}

/* ── Pro Tip gold box ── */
.tasks-pro-tip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, rgba(212,175,55,0.14) 0%, rgba(212,175,55,0.06) 100%);
  border: 1.5px solid rgba(212,175,55,0.45);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.tasks-pro-tip-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.tasks-pro-tip-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold, #D4AF37);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.tasks-pro-tip-text {
  font-size: 13.5px;
  color: #3d4f61;
  line-height: 1.55;
  margin: 0;
}

/* ── Task Banner ── */
.task-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 14px;
  padding: 16px 20px 16px 44px;
  margin-bottom: 18px;
  position: relative;
  border: 1.5px solid transparent;
}
.task-banner--green {
  background: linear-gradient(135deg, rgba(34,197,94,0.12) 0%, rgba(34,197,94,0.05) 100%);
  border-color: rgba(34,197,94,0.35);
}
.task-banner--blue {
  background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(99,102,241,0.05) 100%);
  border-color: rgba(99,102,241,0.30);
}
.task-banner--orange {
  background: linear-gradient(135deg, rgba(249,115,22,0.12) 0%, rgba(249,115,22,0.05) 100%);
  border-color: rgba(249,115,22,0.35);
}
.task-banner--mint {
  background: linear-gradient(135deg, rgba(52,211,153,0.13) 0%, rgba(16,185,129,0.06) 100%);
  border-color: rgba(52,211,153,0.40);
}
.task-banner--red {
  background: linear-gradient(135deg, rgba(239,68,68,0.14) 0%, rgba(239,68,68,0.05) 100%);
  border-color: rgba(239,68,68,0.40);
}
.task-banner--grey {
  background: linear-gradient(135deg, rgba(148,163,184,0.14) 0%, rgba(148,163,184,0.06) 100%);
  border-color: rgba(148,163,184,0.35);
}
.task-banner-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.task-banner-body { flex: 1; }
.task-banner-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
  color: #1e293b;
}
.task-banner-text {
  font-size: 13.5px;
  color: #3d4f61;
  line-height: 1.55;
  margin: 0;
}
.task-banner-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #94a3b8;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  position: absolute;
  top: 14px;
  left: 16px;
}
.task-banner-dismiss:hover { color: #475569; }

/* ── Stat row ── */
.tasks-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.task-stat-card {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1.5px solid rgba(16,42,67,0.08);
  box-shadow: 0 2px 12px rgba(16,42,67,0.07);
  transition: transform 0.15s;
}
.task-stat-card:hover { transform: translateY(-2px); }
.task-stat-card .stat-label,
.task-stat-card .task-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.65;
}
.task-stat-card .stat-value,
.task-stat-card .task-stat-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.task-stat-open   { border-top: 3px solid var(--navy, #102A43); }
.task-stat-open   .stat-value,
.task-stat-open   .task-stat-value { color: var(--navy, #102A43); }
.task-stat-done   { border-top: 3px solid #27AB83; }
.task-stat-done   .stat-value,
.task-stat-done   .task-stat-value { color: #27AB83; }
.task-stat-overdue { border-top: 3px solid #E15554; }
.task-stat-overdue .stat-value,
.task-stat-overdue .task-stat-value { color: #E15554; }

/* ── Priority vertical bar on task cards ── */
.task-card {
  position: relative;
  padding-right: 18px; /* RTL: bar is on the right */
}
.task-card::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 0;
  width: 4px;
  border-radius: 4px;
  background: #cbd5e0;
}
.task-card[data-priority="high"]::before   { background: #E15554; }
.task-card[data-priority="medium"]::before { background: var(--gold, #D4AF37); }
.task-card[data-priority="low"]::before    { background: #94A3B8; }

/* ── Filter tabs — pill style ── */
.task-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.task-filter-tab {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Heebo', sans-serif;
  border: 1.5px solid rgba(16,42,67,0.15);
  background: rgba(255,255,255,0.8);
  color: #4a5568;
  cursor: pointer;
  transition: all 0.15s;
}
.task-filter-tab:hover {
  border-color: var(--gold, #D4AF37);
  color: var(--navy, #102A43);
  background: rgba(212,175,55,0.08);
}
.task-filter-tab.active {
  background: var(--navy, #102A43);
  color: #fff;
  border-color: var(--navy, #102A43);
  box-shadow: 0 3px 10px rgba(16,42,67,0.22);
}

/* ── Mobile tasks ── */
@media (max-width: 768px) {
  .tasks-stat-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .task-stat-card { padding: 12px 12px; }
  .task-stat-card .stat-value { font-size: 22px; }
  .tasks-pro-tip { padding: 12px 14px; gap: 10px; }
  .tasks-pro-tip-icon { font-size: 20px; }
  .tasks-load-btn { padding: 8px 13px; font-size: 13px; }
}

/* ── Task category badge ── */
.task-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #5a6a7a;
  background: rgba(16,42,67,0.06);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}
.task-card-done .task-category-tag { opacity: 0.5; }

/* ============================================================
   BUDGET SCREEN — Premium Upgrade
   ============================================================ */

/* ── Summary cards row ── */
.budget-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
.budget-stat-card {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 20px 22px;
  border: 1.5px solid rgba(16,42,67,0.08);
  box-shadow: 0 4px 18px rgba(16,42,67,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.budget-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(16,42,67,0.12); }

/* Coloured tints */
.budget-stat-outstanding {
  background: linear-gradient(135deg, rgba(254,226,226,0.7) 0%, rgba(255,255,255,0.92) 60%) !important;
  border-color: rgba(239,68,68,0.25) !important;
}
.budget-stat-paid {
  background: linear-gradient(135deg, rgba(209,250,229,0.7) 0%, rgba(255,255,255,0.92) 60%) !important;
  border-color: rgba(34,197,94,0.25) !important;
}
.budget-stat-total {
  background: linear-gradient(135deg, rgba(16,42,67,0.08) 0%, rgba(212,175,55,0.08) 100%) !important;
  border-color: rgba(212,175,55,0.3) !important;
}

/* Card top row: label + icon side-by-side */
.budget-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.budget-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #64748b;
}
.budget-stat-icon {
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.budget-stat-outstanding .budget-stat-icon { background: rgba(239,68,68,0.1);  color: #dc2626; }
.budget-stat-paid        .budget-stat-icon { background: rgba(34,197,94,0.1);  color: #16a34a; }
.budget-stat-total       .budget-stat-icon { background: rgba(212,175,55,0.15); color: var(--gold, #D4AF37); }

.budget-stat-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}
.budget-stat-outstanding .budget-stat-value { color: #dc2626; }
.budget-stat-paid        .budget-stat-value { color: #16a34a; }
.budget-stat-total       .budget-stat-value { color: var(--navy, #102A43); }

.budget-stat-sub {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 500;
}

/* Progress bar on paid card */
.budget-paid-progress-wrap {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.budget-paid-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(34,197,94,0.15);
  border-radius: 10px;
  overflow: hidden;
}
.budget-paid-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 10px;
  width: 0%;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.budget-paid-progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  white-space: nowrap;
}

/* ── Add Expense Card ── */
.budget-add-card {
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1.5px solid rgba(212,175,55,0.25);
  padding: 18px 22px;
  margin-bottom: 18px;
  box-shadow: 0 2px 12px rgba(16,42,67,0.06);
}
.budget-add-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy, #102A43);
  margin-bottom: 14px;
}
.budget-add-header i { color: var(--gold, #D4AF37); font-size: 16px; }

.budget-add-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.budget-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 130px;
}
.budget-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #64748b;
}
.budget-input {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid rgba(16,42,67,0.15);
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Heebo', sans-serif;
  background: #fff;
  color: var(--navy, #102A43);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  box-sizing: border-box;
  font-size: 16px; /* prevent iOS zoom */
}
.budget-input:focus {
  border-color: var(--gold, #D4AF37);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}
.budget-input::placeholder { color: #b0bac6; }

.budget-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  background: linear-gradient(135deg, var(--navy, #102A43) 0%, #1a3a5c 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(16,42,67,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
  align-self: flex-end;
}
.budget-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16,42,67,0.32);
}
.budget-add-btn i { color: var(--gold, #D4AF37); }

/* ── Budget Table Card ── */
.budget-table-card {
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1.5px solid rgba(16,42,67,0.08);
  box-shadow: 0 2px 12px rgba(16,42,67,0.06);
  overflow: hidden;
}

.budget-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Heebo', sans-serif;
}
.budget-table thead tr {
  background: var(--navy, #102A43);
}
.budget-table thead th {
  padding: 13px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-align: right;
  border: none;
  white-space: nowrap;
}
.budget-table thead th:first-child { color: var(--gold, #D4AF37); }

.budget-table tbody tr.budget-row {
  border-bottom: 1px solid rgba(16,42,67,0.06);
  transition: background 0.15s;
}
.budget-table tbody tr.budget-row:last-child { border-bottom: none; }
.budget-table tbody tr.budget-row:hover { background: rgba(212,175,55,0.05); }

.budget-table td {
  padding: 13px 16px;
  vertical-align: middle;
  font-size: 14px;
  color: #2d3748;
}
.budget-cell-name {
  font-weight: 700;
  color: var(--navy, #102A43) !important;
}
.budget-cell-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #2d3748;
}
.budget-balance-due {
  color: #dc2626 !important;
}

/* ── Status Pills ── */
.budget-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.budget-pill i { font-size: 10px; }
.budget-pill-paid    { background: #dcfce7; color: #166534; }
.budget-pill-partial { background: #fef9c3; color: #854d0e; }
.budget-pill-unpaid  { background: #fee2e2; color: #991b1b; }

/* ── Delete button ── */
.budget-cell-actions { text-align: center; width: 48px; }
.budget-delete-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.06);
  color: #dc2626;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.budget-delete-btn:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.5);
  transform: scale(1.1);
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .budget-summary-row { grid-template-columns: 1fr; gap: 10px; }
  .budget-stat-card { padding: 16px 18px; }
  .budget-stat-value { font-size: 22px; }
  .budget-add-card { padding: 14px 16px; }
  .budget-add-fields { flex-direction: column; gap: 10px; }
  .budget-field-wrap { min-width: 100%; }
  .budget-add-btn { width: 100%; justify-content: center; }

  .budget-table thead { display: none !important; }
  .budget-table,
  .budget-table tbody,
  .budget-table tr { display: block !important; width: 100% !important; }
  .budget-table tr.budget-row {
    background: rgba(255,255,255,0.92) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    border: 1px solid rgba(16,42,67,0.08) !important;
    padding: 4px 0 !important;
  }
  .budget-table td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px !important;
    border-bottom: 1px solid rgba(16,42,67,0.05) !important;
    font-size: 13px !important;
  }
  .budget-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
  }
  .budget-cell-actions { width: auto !important; justify-content: flex-end; }
}

/* ============================================================
   WAR ROOM — RSVP Management Center
   ============================================================ */

/* ── Toggle button ── */
.wr-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(16,42,67,0.2);
  background: rgba(255,255,255,0.85);
  color: var(--navy, #102A43);
  font-size: 13px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  transition: all 0.18s;
}
.wr-toggle-btn:hover {
  border-color: var(--gold, #D4AF37);
  background: rgba(212,175,55,0.08);
}
.wr-toggle-btn.wr-active {
  background: var(--navy, #102A43) !important;
  border-color: var(--navy, #102A43) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(16,42,67,0.28);
}
.wr-toggle-btn.wr-active i {
  color: var(--gold, #D4AF37);
  animation: wr-pulse 1.6s infinite;
}
@keyframes wr-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ── Stats bar ── */
.wr-stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.wr-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 14px 18px;
  border: 1.5px solid rgba(16,42,67,0.08);
  box-shadow: 0 2px 10px rgba(16,42,67,0.07);
}
.wr-stat-icon {
  font-size: 20px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wr-stat-untouched .wr-stat-icon { background: rgba(100,116,139,0.12); color: #64748b; }
.wr-stat-waiting   .wr-stat-icon { background: rgba(59,130,246,0.12);  color: #2563eb; }
.wr-stat-noAnswer  .wr-stat-icon { background: rgba(239,68,68,0.12);   color: #dc2626; }
.wr-stat-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--navy, #102A43);
}
.wr-stat-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  margin-top: 2px;
}

/* ── War Room column visibility (default: hidden) ── */
.col-wr-status,   /* no longer a separate column — kept for safety */
.col-wr-actions,
.col-wr-contact,
.col-wr-note {
  display: none;
}

/* When section has war-room-on, show WR cols and hide noisy cols */
#screen-guests.war-room-on .col-wr-actions,
#screen-guests.war-room-on .col-wr-contact,
#screen-guests.war-room-on .col-wr-note {
  display: table-cell;
}
#screen-guests.war-room-on .col-send,
#screen-guests.war-room-on .col-relation,
#screen-guests.war-room-on .col-food {
  display: none !important;
}
/* Also hide from thead */
#screen-guests.war-room-on #guestsTable thead th.col-send,
#screen-guests.war-room-on #guestsTable thead th.col-relation,
#screen-guests.war-room-on #guestsTable thead th.col-food {
  display: none !important;
}

/* ── Work status select ── */
.wr-status-select {
  border: none;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 8px center;
  padding-left: 22px;
  min-width: 130px;
}
/* Status colour mapping via tr data-status is on the select directly */
.wr-status-select:has(option[value="0"]:checked) { background-color: #f1f5f9; color: #64748b; }
.wr-status-select:has(option[value="1"]:checked) { background-color: #dbeafe; color: #1e40af; }
.wr-status-select:has(option[value="2"]:checked) { background-color: #fee2e2; color: #991b1b; }
.wr-status-select:has(option[value="3"]:checked) { background-color: #ffedd5; color: #9a3412; }
.wr-status-select:has(option[value="4"]:checked) { background-color: #dcfce7; color: #166534; }

/* Fallback for browsers without :has() — status badge */
.wr-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.wrs-0 { background: #f1f5f9; color: #64748b; }
.wrs-1 { background: #dbeafe; color: #1e40af; }
.wrs-2 { background: #fee2e2; color: #991b1b; }
.wrs-3 { background: #ffedd5; color: #9a3412; }
.wrs-4 { background: #dcfce7; color: #166534; }

/* ── Quick action buttons (Call / WA) ── */
.wr-quick-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wr-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.13s, box-shadow 0.13s;
  flex-shrink: 0;
}
.wr-action-btn:hover { transform: scale(1.12); }
.wr-call-btn {
  background: rgba(16,42,67,0.08);
  color: var(--navy, #102A43);
}
.wr-call-btn:hover { background: rgba(16,42,67,0.18); box-shadow: 0 2px 8px rgba(16,42,67,0.18); }
.wr-call-btn--loading { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.wr-call-btn--loading i {
  display: inline-block;
  animation: wr-spin 0.7s linear infinite;
}
@keyframes wr-spin { to { transform: rotate(360deg); } }
.wr-wa-btn {
  background: rgba(37,211,102,0.12);
  color: #128C7E;
}
.wr-wa-btn:hover { background: rgba(37,211,102,0.25); box-shadow: 0 2px 8px rgba(37,211,102,0.25); }

/* ── Contact tracker cell ── */
.wr-contact-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 2px 0;
}

/* Status select is now inside the contact cell — make it compact */
.wr-contact-cell .wr-status-select {
  min-width: 0;
  width: 100%;
  font-size: 11px;
  padding: 3px 22px 3px 6px;
}

/* ── Counter widget: [−] badge [+] ── */
.wr-counter-widget {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid rgba(16,42,67,0.15);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}
.wr-counter-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--navy, #102A43);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  flex-shrink: 0;
  user-select: none;
}
.wr-counter-btn:hover:not(:disabled) {
  background: rgba(212,175,55,0.15);
}
.wr-counter-btn:disabled {
  color: #c0c0c0;
  cursor: not-allowed;
}
.wr-counter-minus { border-left: 1px solid rgba(16,42,67,0.1); }
.wr-counter-plus  { border-right: 1px solid rgba(16,42,67,0.1); }
.wr-counter-badge {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy, #102A43);
  padding: 0 4px;
  border-left: 1px solid rgba(16,42,67,0.1);
  border-right: 1px solid rgba(16,42,67,0.1);
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}
.wr-counter-badge:not(:empty):not([data-zero]) {
  color: var(--navy, #102A43);
}

@keyframes wr-bump {
  0%   { transform: scale(1);    background: transparent; }
  40%  { transform: scale(1.25); background: rgba(212,175,55,0.25); }
  100% { transform: scale(1);    background: transparent; }
}
.wr-counter-bump { animation: wr-bump 0.4s ease; }
.wr-last-contact {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
}

/* ── Note button ── */
.wr-note-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(16,42,67,0.12);
  background: rgba(255,255,255,0.9);
  color: #94a3b8;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.13s;
  margin: 0 auto;
}
.wr-note-btn:hover {
  border-color: var(--gold, #D4AF37);
  color: var(--gold, #D4AF37);
  background: rgba(212,175,55,0.08);
}
.wr-note-btn.wr-note-has-content {
  background: rgba(212,175,55,0.15);
  border-color: var(--gold, #D4AF37);
  color: var(--gold, #D4AF37);
}

/* ── Note Popover ── */
.wr-note-popover {
  position: fixed;
  z-index: 10001;
  width: 300px;
  background: #ffffff;
  border-radius: 14px;
  border: 1.5px solid rgba(212,175,55,0.3);
  box-shadow: 0 12px 40px rgba(16,42,67,0.2);
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.wr-note-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--navy, #102A43);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.wr-note-close-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.13s;
}
.wr-note-close-btn:hover { color: #fff; }
.wr-note-textarea {
  width: 100%;
  min-height: 100px;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid rgba(16,42,67,0.08);
  font-size: 14px;
  font-family: 'Heebo', sans-serif;
  resize: vertical;
  outline: none;
  color: var(--navy, #102A43);
  box-sizing: border-box;
  direction: rtl;
}
.wr-note-textarea:focus { background: rgba(212,175,55,0.03); }
.wr-note-popover-footer {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  justify-content: flex-end;
}
.wr-note-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--navy, #102A43);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  transition: background 0.13s;
}
.wr-note-save-btn:hover { background: #1a3a5c; }
.wr-note-save-btn i { color: var(--gold, #D4AF37); }
.wr-note-cancel-btn {
  padding: 8px 12px;
  background: none;
  border: 1.5px solid rgba(16,42,67,0.15);
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Heebo', sans-serif;
  color: #64748b;
  cursor: pointer;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .wr-stats-bar { grid-template-columns: 1fr; gap: 8px; }
  .wr-stat-card { padding: 12px 14px; }
  .wr-stat-value { font-size: 22px; }

  /* In war room on mobile: stack action buttons larger for thumbs */
  .wr-action-btn { width: 44px; height: 44px; font-size: 17px; }
  .wr-counter-btn { width: 32px; height: 32px; font-size: 18px; }
  .wr-counter-badge { min-width: 32px; line-height: 30px; font-size: 14px; }

  .wr-note-popover { width: calc(100vw - 24px); right: 12px !important; left: 12px !important; }

  /* Mobile war room: collapse WR cols into card view */
  #screen-guests.war-room-on #guestsTable td.col-wr-actions,
  #screen-guests.war-room-on #guestsTable td.col-wr-contact,
  #screen-guests.war-room-on #guestsTable td.col-wr-note {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MASTER ADMIN LOBBY / DASHBOARD
   ══════════════════════════════════════════════════════════════════ */

/* ── Page base ── */
.lobby-body {
  min-height: 100vh;
  background: linear-gradient(155deg, #07131f 0%, #0d1f31 40%, #102A43 100%);
  font-family: 'Heebo', sans-serif;
  color: #fff;
  overflow-x: hidden;
}

/* ── Header ── */
.lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 36px;
  background: rgba(10,20,32,0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}
.lobby-header-brand { display: flex; align-items: center; gap: 12px; }
.lobby-logo         { font-size: 22px; line-height: 1; }
.lobby-brand-name   { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; color: #fff; }
.lobby-admin-badge  {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,0.1); border: none;
  border-radius: 20px; padding: 4px 10px;
}
.lobby-header-actions  { display: flex; align-items: center; gap: 12px; }
.lobby-admin-identity  { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,0.55); }
.lobby-logout-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 600;
  font-family: 'Heebo', sans-serif; cursor: pointer; transition: background 0.18s;
}
.lobby-logout-btn:hover { background: rgba(255,255,255,0.12); }

/* ── Add-client button ── */
.lobby-add-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 9px;
  border: 1.5px solid rgba(212,175,55,0.40); background: rgba(212,175,55,0.12);
  color: var(--gold, #D4AF37); font-size: 13px; font-weight: 700;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.lobby-add-btn:hover {
  background: rgba(212,175,55,0.24);
  border-color: rgba(212,175,55,0.65);
}

/* ── Main layout ── */
.lobby-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 28px 80px;
}

/* ── Hero ── */
.lobby-hero { margin-bottom: 36px; }
.lobby-title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900; letter-spacing: -1px; color: #fff; margin: 0 0 6px;
}
.lobby-subtitle { font-size: 15px; color: rgba(255,255,255,0.45); margin: 0; }

/* ── Global stats row ── */
.lobby-global-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.lobby-gstat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 18px 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lobby-gstat-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.lobby-gstat-value {
  font-size: 28px; font-weight: 900; color: #fff; line-height: 1;
}
.lobby-gstat-label {
  font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 3px;
}

/* ── Section header (above grid) ── */
.lobby-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.lobby-section-title {
  font-size: 17px; font-weight: 800; color: rgba(255,255,255,0.80); margin: 0;
  display: flex; align-items: center; gap: 9px;
}
.lobby-section-title i { color: var(--gold, #D4AF37); font-size: 14px; }
.lobby-event-count {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.07); border-radius: 20px; padding: 3px 10px;
}

/* ── Loading / Error ── */
.lobby-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 60px 0;
}
/* Legacy spinner kept for backward compat — hidden when new loader is used */
.lobby-spinner {
  width: 26px; height: 26px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--gold, #D4AF37);
  border-radius: 50%; animation: lobby-spin 0.75s linear infinite;
}
@keyframes lobby-spin { to { transform: rotate(360deg); } }
.lobby-error {
  background: rgba(255,100,80,0.10); border: 1px solid rgba(255,100,80,0.30);
  border-radius: 12px; padding: 16px 20px; color: #ffb3aa;
  font-size: 14px; text-align: center; margin-bottom: 20px;
}

/* ── Event grid ── */
.lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

/* ── Event card ── */
.lobby-card {
  position: relative;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.20s ease, box-shadow 0.20s ease, border-color 0.20s ease;
}
.lobby-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(0,0,0,0.40);
  border-color: rgba(212,175,55,0.35);
}

/* Accent stripe — color changes with event type via data-type */
.lobby-card-accent {
  position: absolute; top: 0; right: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--gold, #D4AF37) 0%, rgba(212,175,55,0.15) 100%);
  border-radius: 0 18px 18px 0;
}
.lobby-card-accent[data-type="בר מצווה"],
.lobby-card-accent[data-type="בת מצווה"] {
  background: linear-gradient(180deg, #60a5fa 0%, rgba(96,165,250,0.15) 100%);
}
.lobby-card-accent[data-type="ברית/ה"] {
  background: linear-gradient(180deg, #2dd4bf 0%, rgba(45,212,191,0.15) 100%);
}
.lobby-card-accent[data-type="אירוע עסקי"] {
  background: linear-gradient(180deg, #a78bfa 0%, rgba(167,139,250,0.15) 100%);
}
.lobby-card-accent[data-type="אחר"] {
  background: linear-gradient(180deg, #34d399 0%, rgba(52,211,153,0.15) 100%);
}

/* Card body */
.lobby-card-content { padding: 22px 24px 16px; flex: 1; }
.lobby-couple-names {
  font-size: 18px; font-weight: 800; color: #fff;
  margin-bottom: 4px; line-height: 1.25;
}

/* Client phone line — shown directly under couple name */
.lobby-client-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
  direction: ltr;
  justify-content: flex-end;
}
.lobby-client-phone i {
  color: rgba(255,255,255,0.30);
  font-size: 11px;
}

/* Event type badge — default gold (wedding) */
.lobby-event-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(212,175,55,0.14);
  color: #D4AF37;
  border: 1px solid rgba(212,175,55,0.28);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
/* Bar/Bat Mitzvah — blue */
.lobby-event-type-badge[data-type="בר מצווה"],
.lobby-event-type-badge[data-type="בת מצווה"] {
  background: rgba(96,165,250,0.14);
  color: #60a5fa;
  border-color: rgba(96,165,250,0.30);
}
/* Brit — teal */
.lobby-event-type-badge[data-type="ברית/ה"] {
  background: rgba(45,212,191,0.14);
  color: #2dd4bf;
  border-color: rgba(45,212,191,0.30);
}
/* Business event — purple */
.lobby-event-type-badge[data-type="אירוע עסקי"] {
  background: rgba(167,139,250,0.14);
  color: #a78bfa;
  border-color: rgba(167,139,250,0.30);
}
/* Other — emerald */
.lobby-event-type-badge[data-type="אחר"] {
  background: rgba(52,211,153,0.14);
  color: #34d399;
  border-color: rgba(52,211,153,0.30);
}

/* Refresh button next to section title */
.lobby-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.18s;
  flex-shrink: 0;
}
.lobby-refresh-btn:hover {
  background: rgba(212,175,55,0.15);
  color: #D4AF37;
  border-color: rgba(212,175,55,0.30);
}
.lobby-refresh-btn.spinning i {
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.lobby-event-meta { display: flex; flex-direction: column; gap: 5px; }
.lobby-event-meta span {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,0.55);
}
.lobby-event-meta i { color: var(--gold, #D4AF37); width: 13px; text-align: center; }

/* Countdown pill */
.lobby-countdown {
  display: inline-flex; align-items: center;
  margin-top: 12px; padding: 3px 11px; border-radius: 20px;
  background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.25);
  color: var(--gold, #D4AF37); font-size: 12px; font-weight: 700;
}
.lobby-countdown--urgent {
  background: rgba(251,113,133,0.14); border-color: rgba(251,113,133,0.35);
  color: #fb7185;
}

/* Stats row */
.lobby-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.lobby-stat {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 9px 4px;
  gap: 2px;
}
.lobby-stat-icon-sm { font-size: 10px; opacity: 0.7; margin-bottom: 1px; }
.lobby-stat-value   { font-size: 18px; font-weight: 800; color: #fff; line-height: 1; }
.lobby-stat-label   { font-size: 10px; color: rgba(255,255,255,0.42); }

.lobby-stat--confirmed .lobby-stat-value,
.lobby-stat--confirmed .lobby-stat-icon-sm { color: #86efac; }
.lobby-stat--declined  .lobby-stat-value,
.lobby-stat--declined  .lobby-stat-icon-sm { color: #fca5a5; }
.lobby-stat--pending   .lobby-stat-value,
.lobby-stat--pending   .lobby-stat-icon-sm { color: #fde68a; }

/* RSVP bar */
.lobby-rsvp-bar-wrap {
  height: 3px; background: rgba(255,255,255,0.08);
  border-radius: 3px; margin-top: 12px; overflow: hidden;
}
.lobby-rsvp-bar--confirmed {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #86efac);
  border-radius: 3px; transition: width 0.6s ease;
}
.lobby-rsvp-pct {
  font-size: 11px; color: rgba(255,255,255,0.35);
  margin-top: 5px; text-align: left;
}

/* ── Admin work-status inline selector ── */
.lobby-admin-status-wrap {
  margin-top: 12px;
}
.lobby-admin-status-select {
  width: 100%;
  padding: 7px 32px 7px 10px;
  border-radius: 9px;
  border: 1.5px solid rgba(255,255,255,0.10);
  background-color: rgba(255,255,255,0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff60' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Heebo', sans-serif;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background-color 0.18s;
  text-align: right;
  direction: rtl;
}
.lobby-admin-status-select:focus {
  outline: none;
  border-color: rgba(255,255,255,0.22);
  background-color: rgba(255,255,255,0.08);  /* stays dark — no white flash */
}
.lobby-admin-status-select option {
  background: #1e293b;
  color: #fff;
}

/* Color-coded by current status (data-status attribute updated on change) */
.lobby-admin-status-select[data-status="טרם התחלנו"] {
  color: #94a3b8;
  border-color: rgba(148,163,184,0.30);
  background-color: rgba(148,163,184,0.07);
}
.lobby-admin-status-select[data-status="נשלח סבב 1"],
.lobby-admin-status-select[data-status="נשלח סבב 2"],
.lobby-admin-status-select[data-status="נשלח סבב 3"] {
  color: #fbbf24;
  border-color: rgba(251,191,36,0.30);
  background-color: rgba(251,191,36,0.07);
}
.lobby-admin-status-select[data-status="בטיפול שיחות"] {
  color: #60a5fa;
  border-color: rgba(96,165,250,0.30);
  background-color: rgba(96,165,250,0.07);
}
.lobby-admin-status-select[data-status="הסתיים"] {
  color: #4ade80;
  border-color: rgba(74,222,128,0.30);
  background-color: rgba(74,222,128,0.07);
}

/* Brief flash feedback from updateAdminStatus() */
.lobby-admin-status-select.saved {
  border-color: rgba(74,222,128,0.60) !important;
  box-shadow: 0 0 0 2px rgba(74,222,128,0.15);
}
.lobby-admin-status-select.save-error {
  border-color: rgba(248,113,113,0.60) !important;
  box-shadow: 0 0 0 2px rgba(248,113,113,0.15);
}

/* Card footer — action buttons */
.lobby-card-footer {
  display: flex; gap: 8px;
  padding: 0 20px 18px;
}
.lobby-enter-btn {
  flex: 1; padding: 10px 0; border-radius: 10px;
  border: 1.5px solid rgba(212,175,55,0.35); background: rgba(212,175,55,0.10);
  color: var(--gold, #D4AF37); font-size: 13.5px; font-weight: 700;
  font-family: 'Heebo', sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background 0.18s, border-color 0.18s;
}
.lobby-enter-btn:hover { background: rgba(212,175,55,0.22); border-color: rgba(212,175,55,0.60); }

/* Quick-action icon buttons (SMS etc.) */
.lobby-action-btn {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.45); font-size: 15px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, color 0.18s;
}
.lobby-action-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.lobby-action-btn--sms:not(:disabled):hover { background: rgba(99,179,237,0.15); color: #63b3ed; }

/* ── Back-to-lobby button (dashboard sidebar) ── */
.back-to-lobby-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-bottom: 8px; padding: 10px 16px;
  border-radius: 12px; border: 1.5px solid rgba(212,175,55,0.40);
  background: rgba(212,175,55,0.10); color: var(--gold, #D4AF37);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background 0.2s; justify-content: center;
  font-family: 'Heebo', sans-serif;
}
.back-to-lobby-btn:hover { background: rgba(212,175,55,0.22); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .lobby-global-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lobby-header {
    padding: 10px 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .lobby-brand-name { font-size: 17px; }
  .lobby-admin-badge  { display: none !important; }
  .lobby-admin-identity { display: none !important; }
  .lobby-header-actions { gap: 8px; }
  .lobby-add-btn,
  .lobby-logout-btn {
    padding: 6px 10px;
    font-size: 12px;
    gap: 5px;
    border-radius: 8px;
  }
  .lobby-add-btn span,
  .lobby-logout-btn span { display: inline; }
  /* ── Global overflow prevention for lobby page ── */
  .lobby-main {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 20px 12px 60px !important;
  }
  .lobby-global-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lobby-grid { grid-template-columns: 1fr; gap: 14px; }
  .lobby-card-content { padding: 18px 18px 12px; }
  .lobby-couple-names { font-size: 16px; }
  .lobby-stats-row { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .lobby-stat-value { font-size: 16px; }

  /* ── Tab bar: wrap, no overflow ── */
  .lobby-tab-bar {
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 8px !important;
  }
  .lobby-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    gap: 4px !important;
  }
  .lobby-tabs::-webkit-scrollbar { display: none; }
  /* Override global button{width:100%!important} for these specific tabs */
  .lobby-tab {
    width: auto !important;
    min-height: unset !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* ── Leads table: card layout on mobile (no horizontal scroll) ── */
  .leads-table-wrap {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 12px;
  }

  /* Remove the fixed min-width that causes overflow */
  .leads-table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Convert table → stacked cards */
  .leads-table,
  .leads-table tbody,
  .leads-table tr,
  .leads-table td { display: block; width: 100%; box-sizing: border-box; }

  .leads-table thead { display: none; }

  .leads-table tbody tr {
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    padding: 12px 14px !important;
    background: rgba(255,255,255,0.03);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .leads-table tbody tr:last-child { margin-bottom: 0; }

  /* Each cell: label on right, value on left (RTL row) */
  .leads-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    border-radius: 0;
    text-align: left;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  .leads-table td:last-child { border-bottom: none; padding-top: 10px; }

  /* Column labels via ::before */
  .leads-table td:nth-child(1)::before { content: "שם מלא"; }
  .leads-table td:nth-child(2)::before { content: "טלפון"; }
  .leads-table td:nth-child(3)::before { content: "מוזמנים"; }
  .leads-table td:nth-child(4)::before { content: "תאריך"; }
  .leads-table td:nth-child(5)::before { content: ""; }
  .leads-table td::before {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(212,175,55,0.65);
    flex-shrink: 0;
  }

  /* Action buttons: full-width row */
  .leads-actions {
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }
  .lead-btn-delete,
  .lead-btn-open {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* ── Lobby card footer: guests + enter buttons ── */
.lobby-guests-btn {
  flex: 1;
  padding: 10px 0; border-radius: 10px;
  border: 1.5px solid rgba(99,179,237,0.35); background: rgba(99,179,237,0.10);
  color: #63b3ed; font-size: 13.5px; font-weight: 700;
  font-family: 'Heebo', sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background 0.18s, border-color 0.18s;
}
.lobby-guests-btn:hover { background: rgba(99,179,237,0.20); border-color: rgba(99,179,237,0.60); }

.lobby-enter-btn--icon {
  flex: 0 0 40px; padding: 0; width: 40px; height: 40px;
}

/* Delete button — outlined red, icon-only */
.lobby-delete-btn {
  flex: 0 0 32px;
  width: 32px; height: 32px; padding: 0;
  border-radius: 8px;
  border: 1px solid #E53935;
  background: transparent;
  color: #E53935;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, color 0.18s;
}
.lobby-delete-btn:hover {
  background: #FFF1F2;
  color: #E53935;
}

/* ══════════════════════════════════════════════════════════════
   LEADS TAB SYSTEM
   ══════════════════════════════════════════════════════════════ */
.lobby-tab-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.lobby-tabs {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 4px;
}
.lobby-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 20px; border-radius: 9px;
  font-family: 'Heebo', sans-serif; font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,0.45); background: transparent;
  border: none; cursor: pointer;
  transition: all 0.2s ease;
}
.lobby-tab:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.07); }
.lobby-tab--active { color: #fff !important; background: rgba(212,175,55,0.18) !important; }
.lobby-tab--active i { color: #D4AF37; }
.lobby-leads-badge {
  min-width: 20px; height: 20px; border-radius: 10px;
  background: #D4AF37; color: #1a1209;
  font-size: 11px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px; line-height: 1;
}

/* ── Leads panel ── */
.leads-table-wrap {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  overflow-x: auto;             /* horizontal scroll on narrow viewports */
  -webkit-overflow-scrolling: touch;
}
.leads-table {
  width: 100%; min-width: 580px; border-collapse: collapse;
  font-family: 'Heebo', sans-serif;
}
.leads-table thead tr {
  background: rgba(212,175,55,0.08);
  border-bottom: 1px solid rgba(212,175,55,0.15);
}
.leads-table th {
  padding: 12px 16px; text-align: right;
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  color: rgba(212,175,55,0.70);
}
.leads-table td {
  padding: 14px 16px; font-size: 14px; color: rgba(255,255,255,0.82);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}
.leads-table tbody tr:last-child td { border-bottom: none; }
.leads-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.leads-actions { display: flex; gap: 8px; justify-content: flex-end; }
.lead-btn-delete {
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: 1.5px solid rgba(229,57,53,0.50); background: transparent;
  color: #ef9a9a; cursor: pointer; font-family: 'Heebo', sans-serif;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.lead-btn-delete:hover { background: rgba(229,57,53,0.12); border-color: #e53935; color: #e53935; }
.lead-btn-open {
  padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: none; background: #D4AF37; color: #1a1209;
  cursor: pointer; font-family: 'Heebo', sans-serif;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.18s, transform 0.12s;
}
.lead-btn-open:hover { background: #c9a228; transform: translateY(-1px); }
.lead-status-select {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s, background-color 0.18s;
  min-width: 120px;
}
.lead-status-select option {
  background-color: #1e293b;
  color: #f1f5f9;
}
.lead-status-select:hover  { border-color: #D4AF37; background-color: #263348; }
.lead-status-select:focus  { border-color: #D4AF37; box-shadow: 0 0 0 2px rgba(212,175,55,0.25); }
.lead-status-select:disabled { opacity: 0.45; cursor: wait; }
.lead-status-select--saved { border-color: #43A047 !important; background-color: #1a2e1c !important; }

.leads-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; gap: 14px; text-align: center;
  color: rgba(255,255,255,0.30);
}
.leads-empty i { font-size: 40px; }
.leads-empty p { font-size: 15px; font-weight: 600; margin: 0; }

/* ══════════════════════════════════════════════════════════════
   GUEST MANAGEMENT MODAL
   ══════════════════════════════════════════════════════════════ */
.gm-modal-card {
  background: #0f1e2e;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  width: 100%; max-width: 860px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 70px rgba(0,0,0,0.60);
  overflow: hidden;
}

/* Header */
.gm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.gm-title   { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 4px; }
.gm-subtitle { font-size: 13px; color: rgba(255,255,255,0.42); }

/* Stats bar */
.gm-stats-bar {
  display: flex; gap: 0;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.gm-stat {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 7px; padding: 12px 8px;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.55);
  border-left: 1px solid rgba(255,255,255,0.06);
}
.gm-stat:last-child { border-left: none; }
.gm-stat span:first-of-type { font-size: 20px; font-weight: 900; }
.gm-stat--total     { color: rgba(255,255,255,0.70); }
.gm-stat--confirmed { color: #86efac; }
.gm-stat--declined  { color: #fca5a5; }
.gm-stat--pending   { color: #fde68a; }

/* Search */
.gm-search-wrap {
  position: relative; padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.gm-search-icon {
  position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,0.30); font-size: 13px; pointer-events: none;
}
.gm-search-input {
  width: 100%; padding: 9px 36px 9px 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px; color: #fff; font-size: 14px; font-family: 'Heebo', sans-serif;
  outline: none; text-align: right; box-sizing: border-box;
  transition: border-color 0.18s;
}
.gm-search-input:focus { border-color: rgba(99,179,237,0.45); }
.gm-search-input::placeholder { color: rgba(255,255,255,0.22); }

/* Loading / Error */
.gm-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.gm-error {
  margin: 14px 20px; padding: 12px 16px; border-radius: 10px;
  background: rgba(255,100,80,0.10); border: 1px solid rgba(255,100,80,0.28);
  color: #fca5a5; font-size: 13px;
}

/* Table */
.gm-table-wrap {
  flex: 1; overflow-y: auto;
  /* Custom dark scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.gm-table-wrap::-webkit-scrollbar       { width: 5px; }
.gm-table-wrap::-webkit-scrollbar-track { background: transparent; }
.gm-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.gm-table { width: 100%; border-collapse: collapse; }
.gm-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #0a1724; padding: 10px 16px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: rgba(255,255,255,0.38);
  text-align: right; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gm-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}
.gm-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.gm-table td { padding: 11px 16px; vertical-align: middle; }

.gm-td-name  { font-size: 14px; font-weight: 600; color: #fff; min-width: 130px; }
.gm-td-phone { font-size: 13px; color: rgba(255,255,255,0.55); direction: ltr; text-align: right; }

/* RSVP select */
.gm-td-rsvp { min-width: 140px; }
.gm-rsvp-select {
  padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  font-family: 'Heebo', sans-serif; cursor: pointer; outline: none;
  border: 1px solid rgba(255,255,255,0.12); transition: background 0.15s;
  width: 100%;
}
.gm-rsvp--attending { background: rgba(134,239,172,0.14); color: #86efac; border-color: rgba(134,239,172,0.30); }
.gm-rsvp--declined  { background: rgba(252,165,165,0.14); color: #fca5a5; border-color: rgba(252,165,165,0.30); }
.gm-rsvp--maybe     { background: rgba(253,230,138,0.14); color: #fde68a; border-color: rgba(253,230,138,0.30); }
.gm-rsvp--pending   { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.50); border-color: rgba(255,255,255,0.10); }
.gm-rsvp-select option { background: #1a2e45; color: #fff; }

/* Work-status select */
.gm-td-work-status { min-width: 155px; }
.gm-work-status-select {
  width: 100%;
  padding: 5px 26px 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background-color: rgba(255,255,255,0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff50' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 8px center;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Heebo', sans-serif;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
  text-align: right;
  direction: rtl;
  /* Prevent text overflow on long options */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.gm-work-status-select:focus {
  border-color: rgba(255,255,255,0.25);
  background-color: rgba(255,255,255,0.09);  /* stays dark — no white flash */
}
/* Override Chrome autofill white background */
.gm-work-status-select:-webkit-autofill,
.gm-work-status-select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
          box-shadow: 0 0 0 1000px #1e293b inset !important;
  -webkit-text-fill-color: #fff !important;
}
.gm-work-status-select option {
  background: #1a2e45;
  color: #fff;
}

/* Color-coded by current work_status (data-ws updated on change) */
.gm-work-status-select[data-ws="טרם טופל"] {
  color: rgba(255,255,255,0.40);
  border-color: rgba(255,255,255,0.10);
}
.gm-work-status-select[data-ws="נשלח סבב 1"],
.gm-work-status-select[data-ws="נשלח סבב 2"] {
  color: #fbbf24;
  border-color: rgba(251,191,36,0.30);
  background-color: rgba(251,191,36,0.07);
}
.gm-work-status-select[data-ws="ניסיון התקשרות 1"],
.gm-work-status-select[data-ws="ניסיון התקשרות 2"] {
  color: #60a5fa;
  border-color: rgba(96,165,250,0.30);
  background-color: rgba(96,165,250,0.07);
}
.gm-work-status-select[data-ws="הסתיים"] {
  color: #4ade80;
  border-color: rgba(74,222,128,0.30);
  background-color: rgba(74,222,128,0.07);
}

/* Save feedback glows */
.gm-work-status-select.gm-ws-saved {
  border-color: rgba(74,222,128,0.65) !important;
  box-shadow: 0 0 0 2px rgba(74,222,128,0.15);
}
.gm-work-status-select.gm-ws-error {
  border-color: rgba(248,113,113,0.65) !important;
  box-shadow: 0 0 0 2px rgba(248,113,113,0.15);
}

/* ── Guest-count inline input ── */
.gm-gc-input {
  width: 52px;
  padding: 5px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  text-align: center;
  display: block;
  margin: 0 auto;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -moz-appearance: textfield;
  appearance: textfield;
}
.gm-gc-input::-webkit-outer-spin-button,
.gm-gc-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.gm-gc-input:focus {
  border-color: rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.10);
}
.gm-gc-input:disabled { opacity: 0.5; cursor: not-allowed; }
.gm-gc-input.gm-gc-saved {
  border-color: rgba(74,222,128,0.65) !important;
  box-shadow: 0 0 0 2px rgba(74,222,128,0.15);
}
.gm-gc-input.gm-gc-error {
  border-color: rgba(248,113,113,0.65) !important;
  box-shadow: 0 0 0 2px rgba(248,113,113,0.15);
}

/* Action buttons */
.gm-td-actions { white-space: nowrap; }
.gm-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  text-decoration: none; font-size: 15px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  transition: background 0.18s, color 0.18s;
  margin-right: 4px;
  cursor: pointer;
}
.gm-action-btn--call { color: #86efac; }
.gm-action-btn--call:hover { background: rgba(134,239,172,0.18); border-color: rgba(134,239,172,0.35); }
.gm-action-btn--wa   { color: #4ade80; }
.gm-action-btn--wa:hover   { background: rgba(74,222,128,0.18);  border-color: rgba(74,222,128,0.35); }
.gm-no-phone { font-size: 11px; color: rgba(255,255,255,0.25); }

/* Empty state */
.gm-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 50px 20px;
  color: rgba(255,255,255,0.30); font-size: 15px;
}
.gm-empty i { font-size: 32px; opacity: 0.4; }

/* Responsive */
@media (max-width: 640px) {
  /* Modal container: tight to screen, no overflow */
  .gm-modal-card {
    width: 95vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    border-radius: 14px;
    max-height: 95vh;
  }
  .gm-table-wrap {
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header: title left, X right — never wrap */
  .gm-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 14px 16px 12px !important;
    gap: 10px;
  }
  .gm-header-info { flex: 1; min-width: 0; }
  .gm-title    { font-size: 16px !important; }
  .gm-subtitle { font-size: 12px !important; }

  /* Close button: compact, never stretch */
  .gm-header .modal-close-btn {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    min-width: 32px !important;
    flex-shrink: 0;
    align-self: flex-start;
  }

  /* RSVP filter pills: inline flex, pill-shaped, no full-width */
  .gm-rsvp-filter-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .gm-rsvp-filter-btn {
    width: auto !important;
    min-height: unset !important;
    flex: 0 0 auto !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
  }

  /* Work-status filter tabs: same pill treatment */
  .gm-filter-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .gm-filter-tab {
    width: auto !important;
    min-height: unset !important;
    flex: 0 0 auto !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .gm-stats-bar { flex-wrap: wrap; }
  .gm-stat { flex: 1 0 50%; border-bottom: 1px solid rgba(255,255,255,0.06); }

  /* ── Guest table → micro-table (standard rows, scaled to fit) ── */

  /* Restore standard table display */
  .gm-table         { display: table !important; table-layout: fixed !important; width: 100% !important; }
  .gm-table thead   { display: table-header-group !important; }
  .gm-table tbody   { display: table-row-group !important; }
  .gm-table tbody tr,
  .gm-table thead tr { display: table-row !important; background: none !important; border: none !important;
                       border-radius: 0 !important; margin: 0 !important; padding: 0 !important; flex-direction: unset !important; }
  .gm-table td,
  .gm-table th      { display: table-cell !important; }

  /* Kill ::before labels */
  .gm-table td::before { content: none !important; display: none !important; }

  /* Wrapper: no scroll */
  .gm-table-wrap {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Micro-text and compact padding on all cells */
  .gm-table th,
  .gm-table td {
    font-size: 10px !important;
    padding: 8px 5px !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    text-align: center !important;
    min-width: 0 !important;
    vertical-align: middle !important;
  }

  /* Remove column min-widths that cause overflow */
  .gm-td-name,
  .gm-td-phone,
  .gm-td-rsvp,
  .gm-td-work-status { min-width: 0 !important; }

  /* Shrink select dropdowns + guest-count input */
  .gm-rsvp-select,
  .gm-work-status-select {
    font-size: 9px !important;
    padding: 0 !important;
    height: 22px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: unset !important;
    border-radius: 4px !important;
  }
  .gm-gc-input {
    width: 36px !important;
    font-size: 10px !important;
    padding: 2px 0 !important;
    height: 22px !important;
    border-radius: 4px !important;
  }

  /* Shrink action buttons */
  .gm-action-btn {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: unset !important;
    padding: 2px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
  }

  /* Shrink checkbox */
  .gm-td-cb { display: table-cell !important; }
  .gm-row-cb { transform: scale(0.8); }
}

/* ══════════════════════════════════════════════════════════════
   ADD CLIENT MODAL
   ══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-card {
  background: #1a2e45;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.50);
}
@media (max-width: 600px) {
  .modal-overlay {
    align-items: flex-start;
    padding: 12px;
    overflow-y: auto;
  }
  .modal-card {
    max-height: calc(100dvh - 24px);
    margin: auto;
  }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-title i { color: var(--gold, #D4AF37); }
.modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.60);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.modal-close-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

.modal-msg {
  margin: 0 28px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.modal-msg--success {
  background: rgba(134,239,172,0.12);
  border: 1px solid rgba(134,239,172,0.30);
  color: #86efac;
}
.modal-msg--error {
  background: rgba(255,100,80,0.12);
  border: 1px solid rgba(255,100,80,0.30);
  color: #fca5a5;
}

.modal-form { padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 18px; }
.modal-label { display: flex; flex-direction: column; gap: 6px; }
.modal-label > span { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.70); }
.modal-input {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: #1e293b;          /* solid — prevents Chrome focus/autofill bleed-through */
  color: #fff;
  font-size: 15px;
  font-family: 'Heebo', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  text-align: right;
}
.modal-input:focus {
  border-color: rgba(212,175,55,0.55);
  background: #1e293b !important;  /* keep dark on focus — Chrome overrides otherwise */
}
.modal-input::placeholder { color: rgba(255,255,255,0.25); }
/* Override browser autofill — Chrome/Safari force a solid background that
   cannot be removed with `background:`. The only reliable workaround is an
   inset box-shadow that paints over the browser's forced color.
   Target every pseudo-state, every input AND select inside the modal. */
.modal-card input:-webkit-autofill,
.modal-card input:-webkit-autofill:hover,
.modal-card input:-webkit-autofill:focus,
.modal-card input:-webkit-autofill:active,
.modal-card select:-webkit-autofill,
.modal-card select:-webkit-autofill:hover,
.modal-card select:-webkit-autofill:focus,
.modal-card select:-webkit-autofill:active,
input.modal-input:-webkit-autofill,
input.modal-input:-webkit-autofill:hover,
input.modal-input:-webkit-autofill:focus,
input.modal-input:-webkit-autofill:active,
select.modal-input:-webkit-autofill,
select.modal-input:-webkit-autofill:hover,
select.modal-input:-webkit-autofill:focus,
select.modal-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
          box-shadow: 0 0 0 1000px #1e293b inset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  caret-color: #ffffff;
  border-color: rgba(255,255,255,0.12) !important;
  /* Long transition delay stops Chrome from flashing the white bg on focus */
  transition: background-color 9999s ease-in-out 0s !important;
}
.modal-hint { font-size: 11.5px; color: rgba(255,255,255,0.38); margin-top: 2px; }

/* Select variant of modal-input — custom arrow, no browser chrome */
.modal-select {
  appearance: none;
  -webkit-appearance: none;
  /* background shorthand: color + arrow SVG — solid color prevents Chrome whitening */
  background-color: #1e293b !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4AF37' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-left: 34px;
  cursor: pointer;
}
.modal-select:focus { background-color: #1e293b !important; }
.modal-select option {
  background: #1a2e45;
  color: #fff;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 4px;
}
.modal-btn-cancel {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.60);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.modal-btn-cancel:hover { background: rgba(255,255,255,0.07); }
.modal-btn-submit {
  flex: 1;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1.5px solid rgba(212,175,55,0.40);
  background: rgba(212,175,55,0.15);
  color: var(--gold, #D4AF37);
  font-size: 14px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
}
.modal-btn-submit:hover:not(:disabled) { background: rgba(212,175,55,0.28); }
.modal-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 480px) {
  .modal-form { padding: 18px 18px 22px; }
  .modal-header { padding: 18px 18px 14px; }
  .modal-msg { margin: 0 18px; margin-top: 14px; }
}

/* ================================================================
   CANONICAL MOBILE LAYOUT — HAMBURGER SIDEBAR
   max-width: 768px  |  Appended last — wins over all earlier blocks
   ================================================================ */

/* ── Overflow guard (global, outside media query) ── */
html, body { overflow-x: hidden; max-width: 100vw; }

@media (max-width: 768px) {

  /* ── 1. Prevent any horizontal scroll ── */
  html, body { overflow-x: hidden !important; }
  .layout, .content, .screen, main { overflow-x: hidden !important; }
  img, canvas, table, video { max-width: 100% !important; }

  /* ── 2. Layout: block (collapse sidebar column) ── */
  .layout {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    min-height: 100vh;
  }

  /* ── 3. Fixed topbar ── */
  .mobile-topbar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 56px !important;
    width: 100% !important;
    z-index: 1000 !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    background: #102A43 !important;
    border-bottom: 1px solid rgba(212,175,55,0.25) !important;
    box-shadow: 0 2px 12px rgba(16,42,67,0.28) !important;
    box-sizing: border-box !important;
  }
  .mobile-topbar-brand {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #D4AF37 !important;
    letter-spacing: 0.01em !important;
  }

  /* ── 4. Hamburger button ── */
  #hamburgerBtn,
  .menu-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    min-width: 44px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1.5px solid rgba(212,175,55,0.35) !important;
    border-radius: 10px !important;
    color: #D4AF37 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
  }
  #hamburgerBtn:active,
  .menu-toggle-btn:active { background: rgba(212,175,55,0.18) !important; }

  /* ── 5. Main content: clear fixed topbar ── */
  .content {
    display: block !important;
    padding-top: 64px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
    padding-bottom: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── 6. Sidebar: off-screen right, slides in ── */
  .sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: -290px !important;
    left: auto !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 1200 !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    padding: 16px !important;
    gap: 20px !important;
    background: #102A43 !important;
    border-left: 1px solid rgba(212,175,55,0.3) !important;
    border-right: none !important;
    box-shadow: -4px 0 32px rgba(0,0,0,0.38) !important;
    transition: right 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    box-sizing: border-box !important;
  }
  .sidebar.mobile-open { right: 0 !important; }

  /* ── 7. Backdrop overlay ── */
  .sidebar-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.52) !important;
    z-index: 1100 !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  .sidebar-overlay.visible { display: block !important; }

  /* ── 8. Close button inside sidebar ── */
  .sidebar-close-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-end !important;
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,0.6) !important;
    font-size: 22px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    transition: background 0.15s !important;
  }
  .sidebar-close-btn:active { background: rgba(255,255,255,0.1) !important; }

  /* ── 9. Sidebar menu: vertical list ── */
  .menu {
    flex-direction: column !important;
    overflow-x: visible !important;
    width: 100% !important;
    gap: 4px !important;
    padding: 0 !important;
  }
  .menu-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 12px 14px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.68) !important;
    text-align: right !important;
    white-space: normal !important;
    gap: 10px !important;
    border-radius: 12px !important;
    transform: none !important;
  }
  .menu-item > span { display: inline !important; }
  .menu-item::after { display: none !important; }
  .menu-item i { font-size: 17px !important; width: 22px !important; }
  .menu-item.active { color: #D4AF37 !important; background: rgba(212,175,55,0.15) !important; }
  .menu-item:hover { transform: none !important; }

  /* ── 10. Bottom nav: hidden (hamburger replaces it) ── */
  .mobile-bottom-nav { display: none !important; }

  /* ── 11. KPI cards: 2-column ── */
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ── 12. Bottom widgets: single column ── */
  .home-bottom-grid,
  .grid[style*="1fr 2fr 1fr"],
  .grid[style*="grid-template-columns: 1fr 2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ── 13. Card sizing ── */
  .stat-card {
    padding: 16px !important;
    min-height: unset !important;
    height: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  .stat-value { font-size: 22px !important; }
  .stat-title { font-size: 12px !important; font-weight: 500 !important; }

  /* ── 14. Donut charts ── */
  #guestsChart,
  #budgetChart {
    max-width: 160px !important;
    max-height: 160px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .chartjs-size-monitor,
  .chartjs-render-monitor { font-size: 11px !important; }

  /* ── 15. Task touch targets ── */
  #miniTaskList > div {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }
  .badge,
  .priority-badge,
  [class*="badge"],
  [class*="Badge"] { padding: 3px 10px !important; }

  /* ── 16. All interactive elements: 44px min tap target ── */
  button, a, [role="button"] {
    min-height: 44px !important;
  }
  /* Exception: icon-only buttons that are intentionally small */
  .sidebar-close-btn,
  #hamburgerBtn { min-height: 44px !important; }

  /* ── 17. Font floor: nothing below 12px ── */
  .stat-sub   { font-size: 12px !important; }
  small       { font-size: 12px !important; }
  .muted.small { font-size: 12px !important; }

  /* ── 18. RTL text wrap ── */
  * {
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }

}
/* ── end canonical mobile layout ── */

.field-hint {
  display: block;
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  text-align: right;
}

/* ── Row RSVP colors ── */
.row-confirmed { background-color: #F0FDF4; }
.row-declined  { background-color: #FFF1F2; }
.row-pending   { background-color: transparent; }

/* ── Live counter bar ── */
.guest-counter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  padding: 8px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
  direction: rtl;
}
.gcb-sep { color: var(--color-border); }

/* ── Import hint ── */
.import-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 6px;
  margin-bottom: 0;
}
.import-hint a {
  color: var(--color-primary);
  text-decoration: none;
}
.import-hint a:hover { text-decoration: underline; }

/* ── Seating empty state ── */
.seating-empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-text-secondary);
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}
.seating-empty-state h3 {
  font-size: 18px;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.seating-empty-state ol {
  text-align: right;
  margin: 12px auto;
  font-size: 14px;
  line-height: 2;
}
.empty-state-icon { font-size: 48px; margin-bottom: 12px; }

/* ── Seating toolbar button hierarchy ── */
.seating-btn-secondary {
  background: transparent !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.seating-btn-secondary:hover {
  background: rgba(212,175,55,0.08) !important;
}

/* ── Auto-seat tooltip ── */
.tooltip-auto {
  position: relative;
}
.tooltip-auto::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -36px;
  right: 0;
  background: #1A1A2E;
  color: white;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.tooltip-auto:hover::after { opacity: 1; }

/* ── Pending guests banner ── */
.pending-banner {
  background: #FFF9E6;
  border: 1px solid var(--color-warning);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.link-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  padding: 0;
}

/* ── This Week section ── */
.this-week-section {
  background: #FFFBEB;
  border: 1px solid var(--color-warning);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.this-week-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.this-week-count {
  background: var(--color-warning);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.this-week-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.this-week-item {
  font-size: 13px;
  color: var(--color-text-primary);
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}
.this-week-item:last-child { border-bottom: none; }

/* ── Budget table footer ── */
.table-summary-row {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-primary);
  border-top: 2px solid var(--color-border);
  background: var(--color-bg-page);
}
.table-summary-row td {
  padding: 10px 12px;
}

/* ── Budget partial badge info icon ── */
.budget-pill-info {
  cursor: default;
  font-size: 12px;
  vertical-align: middle;
}

/* ── Import from tasks button ── */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: rgba(212,175,55,0.08);
}

/* ── Import from tasks modal ── */
.import-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.import-modal {
  background: var(--color-bg-card);
  border-radius: 16px;
  padding: 24px;
  width: 480px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  direction: rtl;
}

/* ── Lobby: placeholder event name ── */
.lobby-couple-names--placeholder {
  font-style: italic;
  color: var(--color-text-secondary, #6B7280);
}

/* ── Lobby: round status badge ── */
.round-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
  margin-top: 6px;
  display: inline-block;
}

/* ── Lobby: today's actions banner ── */
.today-actions-banner {
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.today-actions-title {
  font-weight: 700;
  color: #F59E0B;
  margin-left: 8px;
  display: inline-block;
  margin-bottom: 6px;
}
.today-action-item {
  padding: 3px 0;
  color: rgba(255,255,255,0.75);
}

/* ── Guest Modal: Checkbox column ─────────────────────────── */
.gm-th-cb,
.gm-td-cb {
  width: 36px;
  text-align: center;
  padding: 0 4px !important;
}
.gm-row-cb {
  width: 16px;
  height: 16px;
  accent-color: #D4AF37;
  cursor: pointer;
}

/* ── Guest Modal: Bulk action bar ─────────────────────────── */
.gm-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 8px;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 10px;
  flex-wrap: wrap;
}
.gm-bulk-count {
  font-weight: 700;
  color: #D4AF37;
  font-size: 15px;
  min-width: 20px;
  text-align: center;
}
.gm-bulk-label {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-left: 4px;
}
.gm-bulk-btn {
  padding: 5px 12px;
  border-radius: 7px;
  border: none;
  font-size: 13px;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  background: #D4AF37;
  color: #0d1b2a;
  font-weight: 600;
  transition: opacity .15s;
}
.gm-bulk-btn:hover { opacity: .85; }
.gm-bulk-btn--secondary {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.2);
}
.gm-bulk-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.15);
}
.gm-bulk-btn--ghost:hover { color: rgba(255,255,255,0.85); }

/* ── Guest Modal: Communication Templates Section ────────── */
.gm-tpl-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.gm-tpl-section-title {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: 7px;
}
.gm-tpl-vars-hint {
  font-size: 11.5px;
  color: rgba(255,255,255,0.40);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.gm-tpl-vars-hint code {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  font-family: monospace;
}
.gm-tpl-chips-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.gm-tpl-chips-label {
  font-size: 11.5px;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
  margin-left: 2px;
}
.gm-tpl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid rgba(99,179,237,0.30);
  background: rgba(99,179,237,0.07);
  color: rgba(147,210,255,0.85);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  white-space: nowrap;
}
.gm-tpl-chip:hover {
  background: rgba(99,179,237,0.18);
  border-color: rgba(99,179,237,0.60);
  color: #fff;
  transform: translateY(-1px);
}
.gm-tpl-chip:active { transform: translateY(0); }
.gm-tpl-chip i { font-size: 11px; opacity: .75; }
.gm-tpl-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gm-tpl-label {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.60);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* legacy alias still used by old .gm-wa-template-section references */
.gm-wa-template-section { display: none; }
.gm-wa-textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-family: 'Heebo', sans-serif;
  padding: 10px 12px;
  resize: vertical;
  direction: rtl;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.gm-wa-textarea:focus { border-color: rgba(37,211,102,0.45); }
.gm-wa-textarea::placeholder { color: rgba(255,255,255,0.25); }
.gm-wa-hint {
  font-size: 11.5px;
  color: rgba(255,255,255,0.35);
}
.gm-wa-save-btn {
  align-self: flex-start;
  padding: 7px 18px;
  border-radius: 8px;
  border: none;
  background: #25d366;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .2s, opacity .15s;
}
.gm-wa-save-btn:hover { background: #1ebe5d; }
.gm-wa-save-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Call Script Preview Modal ───────────────────────────── */
.gm-call-script-modal-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.gm-call-script-modal {
  background: #0f1e2e;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  width: 100%; max-width: 560px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
  overflow: hidden;
}
.gm-call-script-modal-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 15px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.gm-call-script-modal-header i { color: #60a5fa; }
.gm-call-script-modal-header .modal-close-btn { margin-right: auto; }
.gm-call-script-modal-body {
  overflow-y: auto; padding: 14px 20px; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.gm-call-preview-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.gm-call-preview-item strong { font-size: 13px; color: #fff; }
.gm-call-preview-item span   { font-size: 11.5px; color: rgba(255,255,255,0.42); }
.gm-call-preview-item p      { font-size: 12.5px; color: rgba(255,255,255,0.72); margin: 4px 0 0; line-height: 1.5; white-space: pre-wrap; }
.gm-call-script-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; gap: 10px; flex-shrink: 0;
}

/* ── Guest Modal: Filter tabs ─────────────────────────────── */
/* ── RSVP Quick Filters ── */
.gm-rsvp-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.gm-rsvp-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  margin-left: 4px;
}
.gm-rsvp-filter-btn {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--text, #e2e8f0);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.gm-rsvp-filter-btn--active,
.gm-rsvp-filter-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }
.gm-rsvp-filter-btn--maybe  { border-color: #f59e0b; color: #f59e0b; }
.gm-rsvp-filter-btn--maybe.gm-rsvp-filter-btn--active,
.gm-rsvp-filter-btn--maybe:hover  { background: rgba(245,158,11,0.18); }
.gm-rsvp-filter-btn--pending { border-color: #94a3b8; color: #94a3b8; }
.gm-rsvp-filter-btn--pending.gm-rsvp-filter-btn--active,
.gm-rsvp-filter-btn--pending:hover { background: rgba(148,163,184,0.18); }

/* ── Smart Send Wrap + WhatsApp template panel ── */
.gm-smart-send-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Panel: select + gift input + send button in one flex row */
.gm-wa-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.gm-wa-select {
  height: 38px;
  padding: 0 10px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  direction: rtl;
  flex-shrink: 0;
  min-width: 190px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gm-wa-select:focus {
  outline: none;
  border-color: #25d366;
  box-shadow: 0 0 0 2px rgba(37,211,102,0.18);
}

.gm-wa-gift-input {
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-family: inherit;
  flex: 1;
  min-width: 150px;
  direction: rtl;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gm-wa-gift-input:focus {
  outline: none;
  border-color: #C9A84C;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.18);
}
.gm-wa-gift-input::placeholder { color: #bbb; }

.gm-smart-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, opacity 0.15s;
}
.gm-smart-send-btn:hover:not(:disabled) { background: #1ebe5d; }
.gm-smart-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Call bulk button ── */
.gm-smart-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.gm-smart-call-btn:hover:not(:disabled) { background: #1d4ed8; }
.gm-smart-call-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Event Notes section ── */
.gm-event-notes-wrap {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gm-event-notes-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 6px;
}
.gm-event-notes-textarea {
  width: 100%;
  min-height: 72px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}
.gm-event-notes-textarea::placeholder { color: rgba(255,255,255,0.35); }
.gm-event-notes-textarea:focus { outline: none; border-color: rgba(255,255,255,0.35); }
.gm-event-notes-saved {
  font-size: 12px;
  font-weight: 700;
  color: #22c55e;
  align-self: flex-end;
}

.gm-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.gm-filter-tab {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.gm-filter-tab:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}
.gm-filter-tab--active {
  background: #D4AF37 !important;
  color: #0d1b2a !important;
  border-color: #D4AF37 !important;
  font-weight: 700;
}

/* ── Guest Modal: WhatsApp as button (same visual as <a>) ─── */
button.gm-action-btn--wa {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
}

/* ── Guest Modal: Toast notification ─────────────────────── */
.gm-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e3a52;
  border: 1px solid rgba(212,175,55,0.4);
  color: rgba(255,255,255,0.9);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Heebo', sans-serif;
  z-index: 99999;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  white-space: nowrap;
}
.gm-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Guest table header: force-hide on mobile ──
   Line 4811 has a global #guestsTable thead { display: table-header-group !important }
   that re-shows the header on all screen sizes. Using two IDs here raises specificity
   to [2,0,1] which beats the global [1,0,1] regardless of source order. */
@media (max-width: 768px) {
  #screen-guests #guestsTable thead,
  #screen-guests #guestsTable th { display: none !important; }
}

/* ── Preset Tasks Modal ───────────────────────────────────────────── */
.preset-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 42, 67, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.preset-modal-box {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(16,42,67,0.3);
  overflow: hidden;
}
.preset-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}
.preset-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: #102A43;
  display: flex;
  align-items: center;
  gap: 8px;
}
.preset-modal-title i { color: #D4AF37; }
.preset-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F6;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #6B7280;
  font-size: 15px;
  transition: background 0.15s, color 0.15s;
}
.preset-modal-close:hover { background: #FEE2E2; color: #E53935; }
/* Event-type selector row */
.preset-event-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border-bottom: 1px solid #E5E7EB;
  background: #f8f9fa;
  flex-shrink: 0;
}
.preset-event-type-label {
  font-size: 13px;
  font-weight: 700;
  color: #102A43;
  white-space: nowrap;
}
.preset-event-select {
  flex: 1;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  font-size: 14px;
  font-family: 'Heebo', sans-serif;
  font-weight: 600;
  color: #102A43;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.preset-event-select:focus {
  border-color: #D4AF37;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.14);
}

.preset-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: #F8F9FA;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}
.preset-selected-count {
  font-size: 13px;
  font-weight: 700;
  color: #102A43;
}
.preset-toggle-all-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid #D4AF37;
  color: #8B6914;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  transition: background 0.15s;
}
.preset-toggle-all-btn:hover { background: rgba(212,175,55,0.1); }
.preset-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.preset-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.preset-category-icon { font-size: 16px; }
.preset-category-name {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #102A43;
}
.preset-category-count {
  background: #102A43;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}
.preset-category-tasks {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.preset-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}
.preset-task-item:not(.preset-task-exists):hover { background: rgba(212,175,55,0.08); }
.preset-task-item.preset-task-exists { opacity: 0.42; cursor: default; }
.preset-task-cb {
  accent-color: #D4AF37;
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.preset-task-cb:disabled { cursor: default; }
.preset-task-label { font-size: 14px; color: #1A1A2E; flex: 1; line-height: 1.4; }
.preset-task-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(107,114,128,0.12);
  color: #6B7280;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.preset-modal-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #E5E7EB;
  flex-shrink: 0;
  background: white;
}
.preset-add-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #102A43;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  transition: background 0.18s;
}
.preset-add-btn:hover:not(:disabled) { background: #0b1f30; }
.preset-add-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.preset-cancel-btn {
  padding: 12px 20px;
  border-radius: 10px;
  border: 1.5px solid #E5E7EB;
  background: white;
  color: #6B7280;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  transition: border-color 0.15s;
}
.preset-cancel-btn:hover { border-color: #9CA3AF; }
@media (max-width: 480px) {
  .preset-modal-box { max-height: 92vh; border-radius: 16px; }
  .preset-modal-header,
  .preset-modal-toolbar,
  .preset-modal-body,
  .preset-modal-footer { padding-right: 16px; padding-left: 16px; }
}


/* ============================================================
   COMPREHENSIVE MOBILE FINAL PASS — Eventoss v3
   Covers remaining gaps across all pages at 768px / 480px / 375px
   DESKTOP STYLES ARE NOT MODIFIED — only additive overrides
   ============================================================ */

/* ── Global: images always confined, body never scrolls horizontally ── */
img, svg, video { max-width: 100%; height: auto; }
body { overflow-x: hidden; }

/* ══════════════════════════════════════════════════
   ADMIN-LOBBY  (admin-lobby.html)
   ══════════════════════════════════════════════════ */

/* ── 768px ── */
@media (max-width: 768px) {

  /* Lobby body: never allow horizontal scroll */
  .lobby-body { overflow-x: hidden !important; }

  /* Header: compact, wrap to two rows if needed */
  .lobby-header {
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .lobby-header-brand { gap: 8px !important; }
  .lobby-brand-name   { font-size: 16px !important; }
  .lobby-admin-badge  { display: none !important; }
  .lobby-admin-identity { display: none !important; }

  /* Header action buttons: proper tap targets */
  .lobby-add-btn,
  .lobby-logout-btn {
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  /* Main: no overflow, comfortable padding */
  .lobby-main {
    padding: 20px 14px 60px !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Hero: tighter spacing */
  .lobby-hero { margin-bottom: 20px !important; }
  .lobby-title { font-size: clamp(20px, 6vw, 28px) !important; }
  .lobby-subtitle { font-size: 13px !important; }

  /* Today-actions banner: compact */
  .today-actions-banner {
    padding: 10px 14px !important;
    font-size: 12px !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .today-actions-title { font-size: 13px !important; }

  /* Global stats: 2 columns on mobile (already at 900px but reinforce) */
  .lobby-global-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }
  .lobby-gstat-card  { padding: 14px 16px !important; gap: 10px !important; }
  .lobby-gstat-value { font-size: 22px !important; }
  .lobby-gstat-label { font-size: 11px !important; }
  .lobby-gstat-icon  { width: 38px !important; height: 38px !important; font-size: 17px !important; }

  /* Event grid: single column */
  .lobby-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Event card footer buttons: proper height */
  .lobby-enter-btn,
  .lobby-guests-btn {
    min-height: 44px !important;
    font-size: 13px !important;
  }
  /* Keep delete button compact — it's icon-only */
  .lobby-delete-btn {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
  }
  /* Icon-only action button (SMS) */
  .lobby-action-btn {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  /* Tab bar: wrap and full-width */
  .lobby-tab-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
  }
  .lobby-tabs {
    flex: 1 !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .lobby-tabs::-webkit-scrollbar { display: none !important; }
  .lobby-tab {
    flex: 1 1 auto !important;
    min-height: 40px !important;
    width: auto !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }
  .lobby-refresh-btn {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
  }

  /* Leads table: card layout already handled at 640px, reinforce overflow */
  .leads-table-wrap {
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── ADD CLIENT MODAL ── */
  .modal-overlay { padding: 12px !important; }
  .modal-card {
    max-width: 95vw !important;
    width: 100% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
  .modal-header { padding: 16px 18px 14px !important; }
  .modal-form   { padding: 16px 18px 20px !important; gap: 14px !important; }
  .modal-msg    { margin: 0 18px !important; margin-top: 12px !important; }
  .modal-actions {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal-btn-cancel,
  .modal-btn-submit {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }
  .modal-input, .modal-select { min-height: 48px !important; font-size: 16px !important; }

  /* ── GUEST MANAGEMENT MODAL ── */
  .gm-modal-card {
    width: 98vw !important;
    max-width: 100vw !important;
    max-height: 96vh !important;
    border-radius: 16px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .gm-header  { padding: 14px 16px 12px !important; }
  .gm-title   { font-size: 16px !important; }
  .gm-subtitle { font-size: 12px !important; }

  /* Stats bar: 2×2 grid */
  .gm-stats-bar { flex-wrap: wrap !important; }
  .gm-stat { flex: 1 0 50% !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }

  /* Search: full width */
  .gm-search-wrap  { padding: 10px 14px !important; }
  .gm-search-input { font-size: 16px !important; min-height: 44px !important; }

  /* RSVP filter row: horizontal scroll */
  .gm-rsvp-filter-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
    margin-bottom: 6px !important;
  }
  .gm-rsvp-filter-row::-webkit-scrollbar { display: none !important; }
  .gm-rsvp-filter-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 36px !important;
    width: auto !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
  }

  /* Work-status filter tabs: horizontal scroll */
  .gm-filter-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 5px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
    margin-bottom: 8px !important;
  }
  .gm-filter-tabs::-webkit-scrollbar { display: none !important; }
  .gm-filter-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 34px !important;
    width: auto !important;
  }

  /* Smart send / call: stack everything vertically */
  .gm-smart-send-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 0 14px !important;
    margin-bottom: 10px !important;
  }
  .gm-wa-panel {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .gm-wa-select,
  .gm-wa-gift-input {
    min-width: 0 !important;
    width: 100% !important;
    height: 42px !important;
    font-size: 14px !important;
  }
  .gm-smart-send-btn,
  .gm-smart-call-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  /* Bulk bar: wrap, compact buttons */
  .gm-bulk-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 14px !important;
  }
  .gm-bulk-btn {
    min-height: 36px !important;
    font-size: 12px !important;
    width: auto !important;
  }

  /* Event notes: full width, larger touch target */
  .gm-event-notes-textarea {
    min-height: 80px !important;
    font-size: 16px !important;
  }

  /* Call-script preview modal */
  .gm-call-script-modal {
    width: 96vw !important;
    max-width: 100vw !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
  }
  .gm-call-script-modal-footer {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Badge/pill elements: must NOT be forced to 44px */
  .import-badge, .status-badge, .badge, .tab-badge,
  .lobby-event-count, .lobby-admin-badge, .lobby-leads-badge,
  .round-badge, .lobby-event-type-badge,
  .task-priority-tag, .task-due-tag,
  .gm-bulk-count, .gm-bulk-label,
  .rel-pill, .count-badge {
    min-height: unset !important;
    height: auto !important;
  }
}

/* ── 480px ── */
@media (max-width: 480px) {

  /* Lobby: 2×2 grid on small phones (not single column) */
  .lobby-global-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .lobby-gstat-card { flex-direction: column !important; align-items: flex-start !important; }

  /* Lobby card: stats row adjusts */
  .lobby-stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 4px !important; }
  .lobby-stat-value { font-size: 14px !important; }

  /* Add-client form: inputs fill screen */
  .modal-card { border-radius: 14px !important; }
  .modal-form { padding: 14px 14px 18px !important; }

  /* GM modal: bare-minimum padding */
  .gm-modal-card { border-radius: 12px !important; }
  .gm-header { padding: 12px 12px 10px !important; }
  .gm-search-wrap { padding: 8px 12px !important; }
}

/* ── 375px (iPhone SE) ── */
@media (max-width: 375px) {

  .lobby-header { padding: 8px 12px !important; }
  .lobby-brand-name { font-size: 14px !important; }
  .lobby-add-btn span, .lobby-logout-btn span { font-size: 12px !important; }

  .lobby-main { padding: 14px 10px 60px !important; }
  .lobby-gstat-value { font-size: 20px !important; }
  .lobby-gstat-card { padding: 12px !important; }
}


/* ══════════════════════════════════════════════════
   DASHBOARD  (dashboard.html)  – remaining gaps
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Override the global `button, a { min-height: 44px }` for intentionally
     small icon-only buttons inside the dashboard */
  .tc-btn,
  .zoom-btn,
  .sidebar-guest-badge,
  .sidebar-guest-plus,
  .table-popover-close-btn,
  .table-popover-guest-remove,
  .ve-ctrl-btn {
    min-height: unset !important;
    height: auto !important;
  }

  /* FAB: show on appropriate screens */
  .mobile-fab { display: flex !important; }

  /* Preset modal: fit screen */
  .preset-modal-overlay { padding: 10px !important; }
  .preset-modal-box {
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 18px !important;
  }

  /* Budget add box: stacked */
  .budget-add-box {
    flex-direction: column !important;
    padding: 14px !important;
    gap: 10px !important;
  }
  .budget-add-icon { align-self: flex-start !important; }
  .budget-add-fields {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .budget-add-fields label,
  .budget-add-fields input { width: 100% !important; }

  /* RSVP card: wrapping row */
  .rsvp-breakdown {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .rsvp-item { flex: 1 1 40% !important; }

  /* Task stat cards: 3-col row stays (they're already compact) */
  .task-stat-card {
    padding: 10px 8px !important;
  }

  /* Event info form: single column */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Table wrap: always scrolls horizontally if needed */
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Header-row: stack all children */
  .header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  /* But keep icon-refresh-btn small */
  .icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    align-self: flex-end !important;
  }

  /* Back-to-lobby button: keep reasonable width */
  .back-to-lobby-btn {
    width: 100% !important;
    min-height: 44px !important;
  }
}

@media (max-width: 480px) {
  /* Very small: stat cards single column */
  .grid { grid-template-columns: 1fr !important; }

  /* Task stat cards: single row (flex) */
  #screen-tasks .grid,
  .task-stat-row {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    scrollbar-width: none !important;
  }
  #screen-tasks .grid::-webkit-scrollbar { display: none !important; }
  .task-stat-card { flex: 0 0 130px !important; }
}


/* ══════════════════════════════════════════════════
   LOGIN.HTML  (admin login page)
   ══════════════════════════════════════════════════ */

/* Already well-styled; minor overflow guard */
@media (max-width: 440px) {
  .login-card {
    padding: 32px 18px 24px !important;
  }
  .login-btn { min-height: 48px !important; font-size: 15px !important; }
  .login-input { min-height: 48px !important; }
}


/* ══════════════════════════════════════════════════
   INDEX.HTML  (user login / landing page)
   ══════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .auth-shell { padding: 16px !important; }
  .card { padding: 20px 16px !important; }
  h1 { font-size: 22px !important; }
  .btn.primary { min-height: 48px !important; font-size: 15px !important; }
}


/* ══════════════════════════════════════════════════
   SHARED: modals always within viewport
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Any overlay: prevent bleed past screen */
  .modal-overlay,
  .preset-modal-overlay,
  .gm-call-script-modal-overlay,
  .task-drawer-overlay {
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* All modal cards: max 95vw, scrollable */
  .modal-card,
  .preset-modal-box,
  .gm-call-script-modal {
    width: 95vw !important;
    max-width: 95vw !important;
    box-sizing: border-box !important;
  }

  /* Table popovers: stay on screen */
  .table-popover {
    max-width: min(290px, 90vw) !important;
  }

  /* Venue-element dropdown: narrower on mobile */
  .venue-element-dropdown { width: 200px !important; }
}
/* ── end comprehensive mobile final pass ── */

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD: GUEST LIST MOBILE REDESIGN
   Compact rows (56px) instead of bulky cards — search pill — filter pills
   Sticky gold "Add Guest" bar replaces circular FAB
   @media max-width:768px ONLY — zero desktop changes, zero JS changes
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─────────────────────────────────────────────────────
     SEARCH BAR: full-width pill shape
  ───────────────────────────────────────────────────── */
  #screen-guests .guests-search-wrap {
    flex: 1 !important;
  }
  #screen-guests .guests-search-input {
    border-radius: 20px !important;
    height: 40px !important;
    font-size: 16px !important; /* prevent iOS auto-zoom */
    width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────
     FILTER TABS: 4 equal pills, scroll if more groups added
  ───────────────────────────────────────────────────── */
  #screen-guests .filter-tabs-row {
    padding: 0 !important;
    overflow: visible !important;
  }
  #screen-guests #guestFilterTabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding: 6px 4px !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #screen-guests #guestFilterTabs::-webkit-scrollbar {
    display: none !important;
  }
  #screen-guests #guestFilterTabs .filter-tab {
    flex: 0 0 calc(25% - 5px) !important;
    min-width: calc(25% - 5px) !important;
    font-size: 11px !important;
    padding: 5px 4px !important;
    min-height: 32px !important;
    height: 32px !important;
    border-radius: 20px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    line-height: 1 !important;
  }
  #screen-guests #guestFilterTabs .filter-tab .tab-badge {
    font-size: 10px !important;
    padding: 0 4px !important;
    min-width: unset !important;
  }
  #screen-guests #guestFilterTabs .filter-tab.active {
    background: #C9A84C !important;
    color: #fff !important;
    border-color: #C9A84C !important;
    box-shadow: 0 2px 6px rgba(201,168,76,0.3) !important;
  }
  #screen-guests #guestFilterTabs .filter-tab.active .tab-badge {
    background: rgba(255,255,255,0.3) !important;
    color: #fff !important;
  }

  /* ─────────────────────────────────────────────────────
     TABLE RESET: turn off the old card-block layout
  ───────────────────────────────────────────────────── */
  #screen-guests #guestsTable,
  #screen-guests #guestsTable tbody {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  #screen-guests #guestsTable thead {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────
     ROW: 3-column CSS Grid, ~56px height
     RTL grid: col-1 = visual RIGHT, col-3 = visual LEFT
     ┌────────────── col-1 1fr ──────────────┬──col-2──┬─col-3─┐
     │ Name (bold 14px)                      │ Status  │  WA   │
     │ Phone (muted 13px)                    │  pill   │ icon  │
     │ Group (tiny gray pill)                │         │       │
     └───────────────────────────────────────┴─────────┴───────┘
  ───────────────────────────────────────────────────── */
  #screen-guests #guestsTable tbody tr {
    display: grid !important;
    grid-template-columns: 1fr auto 52px !important;
    grid-template-rows: 22px 18px 16px !important;
    min-height: 56px !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
    gap: 0 !important;
    align-content: center !important;
    align-items: center !important;
    position: relative !important;
    float: none !important;
  }
  #screen-guests #guestsTable tbody tr:nth-child(odd) {
    background: #fafafa !important;
  }
  #screen-guests #guestsTable tbody tr:active {
    background: rgba(201, 168, 76, 0.08) !important;
  }

  /* ── HIDDEN columns in compact view ── */
  #screen-guests #guestsTable tbody td:nth-child(1),
  #screen-guests #guestsTable tbody td:nth-child(5),
  #screen-guests #guestsTable tbody td:nth-child(6),
  #screen-guests #guestsTable tbody td:nth-child(8),
  #screen-guests #guestsTable tbody td.col-wr-actions,
  #screen-guests #guestsTable tbody td.col-wr-contact,
  #screen-guests #guestsTable tbody td.col-wr-note,
  #screen-guests #guestsTable tbody td.print-gift-col {
    display: none !important;
  }

  /* ── NAME — grid col 1, row 1 ── */
  #screen-guests #guestsTable tbody td:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    height: auto !important;
    min-height: unset !important;
    overflow: hidden !important;
    float: none !important;
    position: static !important;
    width: auto !important;
  }
  #screen-guests #guestsTable tbody td:nth-child(2) .cell-input {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    min-height: unset !important;
    box-shadow: none !important;
    line-height: 1.25 !important;
    width: 100% !important;
    pointer-events: none !important;
    font-style: normal !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  /* ── PHONE — grid col 1, row 2 ── */
  #screen-guests #guestsTable tbody td:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    height: auto !important;
    min-height: unset !important;
    overflow: hidden !important;
    float: none !important;
    position: static !important;
    width: auto !important;
  }
  #screen-guests #guestsTable tbody td:nth-child(3) .cell-input {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    min-height: unset !important;
    box-shadow: none !important;
    direction: ltr !important;       /* phone numbers always LTR */
    text-align: right !important;    /* aligned to the right wall of RTL cell */
    width: 100% !important;
    pointer-events: none !important;
  }

  /* ── RELATION — grid col 1, row 3 (tiny read-only gray pill) ── */
  #screen-guests #guestsTable tbody td:nth-child(7),
  #screen-guests #guestsTable tbody td.col-relation {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    height: auto !important;
    min-height: unset !important;
    overflow: hidden !important;
    float: none !important;
    position: static !important;
    width: auto !important;
  }
  #screen-guests #guestsTable tbody td.col-relation .relation-dropdown {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #eeeeee !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 1px 8px !important;
    font-size: 10px !important;
    color: #777 !important;
    pointer-events: none !important; /* read-only in list view */
    height: 16px !important;
    line-height: 16px !important;
    min-height: unset !important;
    max-width: 130px !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    box-shadow: none !important;
    outline: none !important;
    direction: rtl !important;
    text-align: right !important;
  }

  /* ── STATUS BADGE — grid col 2, spans all 3 rows ── */
  #screen-guests #guestsTable tbody td:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    background: transparent !important;
    border: none !important;
    height: auto !important;
    min-height: unset !important;
    float: none !important;
    position: static !important;
  }
  #screen-guests #guestsTable tbody td:nth-child(4) .status-badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    display: inline-block !important;
  }

  /* ── ROW ACTIONS — grid col 3, spans all 3 rows ── */
  #screen-guests #guestsTable tbody td.row-actions {
    grid-column: 3 !important;
    grid-row: 1 / 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: none !important;
    height: auto !important;
    min-height: unset !important;
    float: none !important;
    position: static !important;
    gap: 4px !important;
    width: 52px !important;
  }

  /* Hide Save and Delete in compact list view */
  #screen-guests #guestsTable tbody td.row-actions .btn[data-action="save"],
  #screen-guests #guestsTable tbody td.row-actions .btn[data-action="delete"] {
    display: none !important;
  }

  /* WhatsApp button — round green icon, 36×36 tap target */
  #screen-guests #guestsTable tbody td.row-actions .btn[data-action="whatsapp"] {
    width: 36px !important;
    height: 36px !important;
    min-height: unset !important;
    min-width: unset !important;
    border-radius: 50% !important;
    background: #25d366 !important;
    color: white !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important; /* hide Hebrew text "שליחה" */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.3) !important;
    line-height: 1 !important;
  }
  /* Render WhatsApp brand icon via Font Awesome unicode */
  #screen-guests #guestsTable tbody td.row-actions .btn[data-action="whatsapp"]::after {
    content: "\f232" !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    display: block !important;
    color: white !important;
  }

  /* Extra bottom space so sticky bar never covers the last row */
  #screen-guests .table-wrap {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    overflow-x: visible !important;
  }
  #screen-guests #guestsEmptyState {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }

  /* ─────────────────────────────────────────────────────
     ADD-GUEST FAB — pill-shaped, bottom-left, gold
     Hidden on all screens; shown only when
     <body class="screen-guests-active"> is set.
  ───────────────────────────────────────────────────── */

  /* Hidden by default on every screen */
  #fabAddGuest.mobile-fab {
    display: none !important;
  }

  /* Pill FAB — shown while guests screen is active */
  body.screen-guests-active #fabAddGuest.mobile-fab {
    display: flex !important;
    position: fixed !important;
    bottom: 84px !important;   /* clears mobile bottom-nav */
    left: 16px !important;
    right: auto !important;
    width: auto !important;
    min-width: 148px !important;
    height: 52px !important;
    border-radius: 26px !important;  /* pill shape */
    background: linear-gradient(135deg, #D4AF37 0%, #F0D060 100%) !important;
    color: #102A43 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Heebo', sans-serif !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 7px !important;
    padding: 0 20px !important;
    box-shadow: 0 6px 24px rgba(212,175,55,0.55), 0 2px 8px rgba(0,0,0,0.14) !important;
    z-index: 380 !important;   /* below drawer overlay (9000) */
    border: none !important;
    cursor: pointer !important;
    transform: none !important;
  }
  body.screen-guests-active #fabAddGuest.mobile-fab i {
    font-size: 16px !important;
    color: #102A43 !important;
    flex-shrink: 0 !important;
  }
  body.screen-guests-active #fabAddGuest.mobile-fab::after {
    content: "הוסף אורח" !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #102A43 !important;
    font-family: 'Heebo', sans-serif !important;
    white-space: nowrap !important;
  }
  body.screen-guests-active #fabAddGuest.mobile-fab:active {
    transform: scale(0.95) !important;
    box-shadow: 0 3px 12px rgba(212,175,55,0.40) !important;
  }
}
/* ── end guest list mobile redesign ── */

/* ══════════════════════════════════════════════════════════════════════════
   EVENTOSS ANIMATED LOADER
   Replaces plain spinner with logo animation + cycling messages.
   Used by: #lobbyLoading, #leadsLoading, #gmLoading (dark bg — admin-lobby)
            #guestsLoader  (light bg — dashboard)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Generic wrapper (used on dashboard where no parent class exists) ── */
.eventoss-loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Vertical stack: ring + message ── */
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ── 100×100 circle that holds the spinning rings and text ── */
.logo-animation {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Outer ring: spins clockwise, gold ── */
.logo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #C9A84C;
  border-right-color: #C9A84C;
  animation: evLoader-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* ── Inner ring: spins counter-clockwise, lighter gold, inset 8px ── */
.logo-ring::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: #E8D5A3;
  border-left-color: #E8D5A3;
  animation: evLoader-spin-rev 1.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* ── Centered logo text: pulses gently ── */
.logo-text {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 13px;
  font-weight: 600;
  color: #C9A84C;
  letter-spacing: 0.5px;
  animation: evLoader-pulse 1.2s ease-in-out infinite;
  z-index: 1;
  position: relative;
  pointer-events: none;
  user-select: none;
}

/* ── Loading message — dark background default (admin-lobby) ── */
.loader-message {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: opacity 0.2s ease;
  direction: rtl;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* ── Loading message — light background (dashboard guest section) ── */
#screen-guests .loader-message,
.eventoss-loader-wrap .loader-message {
  color: rgba(0, 0, 0, 0.38);
}

/* ── Keyframes ── */
@keyframes evLoader-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes evLoader-spin-rev {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}
@keyframes evLoader-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.65; transform: scale(0.94); }
}

/* ── Fade transition on loader show/hide ── */
#lobbyLoading, #leadsLoading, #gmLoading, #guestsLoader {
  transition: opacity 0.15s ease;
}

/* ════════════════════════════════════════════════════════════
   WhatsApp Campaign Panel  (#waCampaignCard)
   ════════════════════════════════════════════════════════════ */

.wa-campaign-card {
  background: #fff;
  border: 1px solid #e8e0cc;
  border-radius: 16px;
  padding: 20px;
  margin: 0 0 20px 0;
  box-shadow: 0 2px 12px rgba(201, 168, 76, 0.10);
  direction: rtl;
}

/* ── Header (icon + title + subtitle) ── */
.wa-campaign-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.wa-campaign-icon {
  font-size: 28px;
  color: #25d366;
  flex-shrink: 0;
}

.wa-campaign-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}

.wa-campaign-sub {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

/* ── Template buttons grid (2 × 2 on mobile, 4-in-a-row on desktop) ── */
.wa-template-btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  .wa-template-btns {
    grid-template-columns: repeat(4, 1fr);
  }
}

.wa-tpl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px 10px;
  border: 2px solid #e0d8c8;
  border-radius: 12px;
  background: #fafaf8;
  color: #555;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  text-align: center;
  min-height: 72px;
}

.wa-tpl-btn i {
  font-size: 18px;
  margin-bottom: 2px;
  color: #aaa;
  transition: color 0.15s;
}

.wa-tpl-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

.wa-tpl-sub {
  font-size: 10px;
  color: #aaa;
  line-height: 1;
}

/* Active / selected state */
.wa-tpl-btn.active {
  border-color: #C9A84C;
  background: linear-gradient(135deg, #fffbf0 0%, #fef5d8 100%);
  color: #8a6a1a;
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.22);
}

.wa-tpl-btn.active i {
  color: #C9A84C;
}

.wa-tpl-btn.active .wa-tpl-sub {
  color: #b8922a;
}

.wa-tpl-btn:hover:not(.active) {
  border-color: #ccc;
  background: #f5f5f0;
}

/* ── Gift URL input row ── */
.wa-gift-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fffbf0;
  border: 1px dashed #C9A84C;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.wa-gift-url-row > i {
  font-size: 16px;
  color: #C9A84C;
  flex-shrink: 0;
}

.wa-gift-url-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #333;
  outline: none;
  font-family: inherit;
  direction: rtl;
  min-width: 0;
}

.wa-gift-url-input::placeholder {
  color: #bbb;
}

/* ── Footer (description + send button) ── */
.wa-campaign-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wa-tpl-desc {
  font-size: 12px;
  color: #888;
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.wa-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #25d366 0%, #1aab52 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
  min-height: 44px;
  flex-shrink: 0;
}

.wa-send-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.wa-send-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.wa-send-btn i {
  font-size: 16px;
}

/* ── Mobile tweaks (≤ 480px) ── */
@media (max-width: 480px) {
  .wa-campaign-card {
    padding: 14px;
    border-radius: 12px;
    margin: 0 0 14px 0;
  }

  .wa-tpl-btn {
    padding: 10px 4px 8px;
    min-height: 64px;
    border-radius: 10px;
  }

  .wa-tpl-btn i {
    font-size: 16px;
  }

  .wa-tpl-label {
    font-size: 11px;
  }

  .wa-campaign-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .wa-send-btn {
    width: 100%;
    justify-content: center;
  }

  .wa-tpl-desc {
    text-align: center;
  }
}

/* ════════════════════════════════════════════════════════════
   GUEST MANAGEMENT MODAL — FULL REDESIGN v2
   Appended last — wins cascade at equal specificity.
   Do NOT edit the original GM blocks; patch here instead.
   ════════════════════════════════════════════════════════════ */

/* ── Modal card corners ── */
.gm-modal-card {
  border-radius: 16px !important;
}

/* ── Gold divider below header ── */
.gm-header-divider {
  height: 1px;
  background: linear-gradient(to left, transparent, rgba(201,168,76,0.35), transparent);
  flex-shrink: 0;
}

/* ── Header ── */
.gm-header {
  padding: 20px 24px 14px !important;
}
.gm-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-align: right !important;
}
.gm-subtitle {
  font-size: 13px !important;
  color: #C9A84C !important;
  font-weight: 500 !important;
}

/* ── Stats bar: stacked number + label, no icons ── */
.gm-stats-bar {
  display: flex !important;
  gap: 0 !important;
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  flex-shrink: 0 !important;
}
.gm-stat {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 14px 6px !important;
  border-left: 1px solid rgba(255,255,255,0.06) !important;
}
.gm-stat:last-child { border-left: none !important; }
/* Hide old FA icons */
.gm-stat > i { display: none !important; }
/* Hide old adjacent text spans (old: <span id="gmStatXxx">n</span><span>label</span>) */
.gm-stat > span:not(.gm-stat-num):not(.gm-stat-lbl) {
  display: none !important;
}
.gm-stat-num {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: block !important;
}
.gm-stat-lbl {
  font-size: 11px !important;
  color: rgba(255,255,255,0.36) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  display: block !important;
}
.gm-stat--pending   .gm-stat-num { color: #fde68a !important; }
.gm-stat--declined  .gm-stat-num { color: #fca5a5 !important; }
.gm-stat--confirmed .gm-stat-num { color: #86efac !important; }
.gm-stat--total     .gm-stat-num { color: rgba(255,255,255,0.82) !important; }

/* ── Search bar: pill shape ── */
.gm-search-wrap {
  padding: 12px 20px 10px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  flex-shrink: 0 !important;
}
.gm-search-input {
  height: 40px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  padding: 0 38px 0 14px !important;
  font-size: 14px !important;
  color: #fff !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
.gm-search-input:focus {
  border-color: rgba(201,168,76,0.45) !important;
  background: rgba(255,255,255,0.09) !important;
  outline: none !important;
}
.gm-search-input::placeholder { color: rgba(255,255,255,0.24) !important; }
.gm-search-icon {
  right: 34px !important;
  color: rgba(255,255,255,0.28) !important;
}

/* ── RSVP filter pills ── */
.gm-rsvp-filter-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
}
.gm-rsvp-filter-row::-webkit-scrollbar { display: none !important; }

.gm-rsvp-filter-label {
  font-size: 11px !important;
  color: rgba(255,255,255,0.28) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.gm-rsvp-filter-btn {
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.48) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-height: unset !important;
  width: auto !important;
  transition: all 0.2s ease !important;
}
.gm-rsvp-filter-btn:hover:not(.gm-rsvp-filter-btn--active) {
  background: rgba(255,255,255,0.11) !important;
  color: rgba(255,255,255,0.78) !important;
}
/* ACTIVE = gold solid */
.gm-rsvp-filter-btn--active {
  background: #C9A84C !important;
  border-color: #C9A84C !important;
  color: #1A1208 !important;
  font-weight: 600 !important;
}
/* "אולי" subtle amber tint when inactive */
.gm-rsvp-filter-btn--maybe:not(.gm-rsvp-filter-btn--active) {
  border-color: rgba(245,158,11,0.35) !important;
  color: rgba(245,158,11,0.85) !important;
  background: rgba(245,158,11,0.07) !important;
}
/* "טרם ענו" subtle slate tint when inactive */
.gm-rsvp-filter-btn--pending:not(.gm-rsvp-filter-btn--active) {
  border-color: rgba(148,163,184,0.30) !important;
  color: rgba(148,163,184,0.85) !important;
  background: rgba(148,163,184,0.06) !important;
}

/* ── Work-status filter tabs row with label ── */
.gm-filter-tabs-row {
  padding: 6px 20px 8px !important;
  flex-shrink: 0 !important;
}
.gm-filter-tabs-label {
  display: block !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.28) !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}
.gm-filter-tabs {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-wrap: nowrap !important;
  padding-bottom: 2px !important;
  margin-bottom: 0 !important;
}
.gm-filter-tabs::-webkit-scrollbar { display: none !important; }
.gm-filter-tab {
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.48) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-height: unset !important;
  width: auto !important;
  font-weight: 400 !important;
  transition: all 0.2s ease !important;
}
.gm-filter-tab:hover:not(.gm-filter-tab--active) {
  background: rgba(255,255,255,0.11) !important;
  color: rgba(255,255,255,0.78) !important;
}
/* ACTIVE = gold solid */
.gm-filter-tab--active {
  background: #C9A84C !important;
  border-color: #C9A84C !important;
  color: #1A1208 !important;
  font-weight: 600 !important;
}

/* ── Actions row: [select] [WA btn] [Call btn] ── */
.gm-actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 20px 12px !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.gm-actions-row .gm-wa-select {
  flex: 1 !important;
  min-width: 175px !important;
  height: 42px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.78) !important;
  font-size: 14px !important;
  padding: 0 14px !important;
  font-family: inherit !important;
  direction: rtl !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
}
.gm-actions-row .gm-wa-select:focus {
  outline: none !important;
  border-color: rgba(37,211,102,0.50) !important;
}
.gm-actions-row .gm-wa-select option {
  background: #1a2a3a !important;
  color: #fff !important;
}
.gm-actions-row .gm-smart-send-btn,
.gm-actions-row .gm-smart-call-btn {
  height: 42px !important;
  padding: 0 16px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
}

/* ── Table header: uppercase, muted ── */
.gm-table thead th {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: rgba(255,255,255,0.34) !important;
  background: rgba(255,255,255,0.04) !important;
  padding: 10px 12px !important;
  font-weight: 600 !important;
}

/* ── Table rows: 52px, subtle hover ── */
.gm-table tbody tr {
  height: 52px !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
  transition: background 0.2s ease !important;
}
.gm-table tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
}

/* ── Checkboxes: gold accent ── */
.gm-row-cb,
#gmSelectAll {
  accent-color: #C9A84C !important;
  width: 15px !important;
  height: 15px !important;
  cursor: pointer !important;
}

/* ── Row action buttons: circles ── */
.gm-action-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
.gm-action-btn--wa {
  color: #25d366 !important;
  background: rgba(37,211,102,0.10) !important;
}
.gm-action-btn--wa:hover {
  background: rgba(37,211,102,0.20) !important;
  border-color: rgba(37,211,102,0.40) !important;
}
.gm-action-btn--call {
  color: #60a5fa !important;
  background: rgba(37,99,235,0.10) !important;
}
.gm-action-btn--call:hover {
  background: rgba(37,99,235,0.22) !important;
  border-color: rgba(37,99,235,0.40) !important;
}

/* ── Work-status select: gold outlined base
   (data-ws attribute selectors have higher specificity and
   still win for their color-coded variants without !important) ── */
.gm-work-status-select {
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 8px !important;
  font-size: 12px !important;
}

/* ── Event Notes: collapsible ── */
.gm-event-notes-wrap {
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  gap: 0 !important;
}
.gm-notes-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,0.38) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  padding: 12px 20px !important;
  text-align: right !important;
  transition: color 0.2s ease !important;
  box-sizing: border-box !important;
}
.gm-notes-toggle:hover { color: rgba(255,255,255,0.62) !important; }
.gm-notes-chevron {
  font-size: 11px !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}
.gm-event-notes-wrap.gm-notes-open .gm-notes-chevron {
  transform: rotate(180deg) !important;
}
.gm-notes-body {
  display: none !important;
  padding: 0 20px 14px !important;
}
.gm-event-notes-wrap.gm-notes-open .gm-notes-body {
  display: block !important;
}

/* ── Mobile ≤ 600px tweaks ── */
@media (max-width: 600px) {
  .gm-stat-num { font-size: 18px !important; }
  .gm-stat-lbl { font-size: 10px !important; }

  .gm-rsvp-filter-row { padding: 8px 14px 4px !important; }
  .gm-filter-tabs-row  { padding: 4px 14px 8px !important; }

  .gm-actions-row {
    padding: 8px 14px 10px !important;
    gap: 6px !important;
  }
  .gm-actions-row .gm-wa-select {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    order: -1 !important; /* dropdown first on small screens */
  }
  .gm-actions-row .gm-smart-send-btn,
  .gm-actions-row .gm-smart-call-btn {
    flex: 1 !important;
    justify-content: center !important;
    font-size: 13px !important;
    padding: 0 10px !important;
  }

  .gm-notes-toggle { padding: 10px 14px !important; }
  .gm-notes-body   { padding: 0 14px 12px !important; }
}

/* ═══════════════════════════════════════════════════
   Edit & Delete-All — Tasks + Budget
   ═══════════════════════════════════════════════════ */

/* ── Task: wrapper for edit+delete pair ── */
.task-row-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.task-card:hover .task-row-actions { opacity: 1; }

/* ── Task: edit button ── */
.task-edit-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}
.task-edit-btn:hover { background: #e0f2fe; color: #0284c7; }

/* ── Task: "editing" state border ── */
.task-card-editing { border: 2px solid #0284c7 !important; background: rgba(2,132,199,0.04) !important; }

/* ── Budget: edit button (mirrors delete btn style) ── */
.budget-edit-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid rgba(2,132,199,0.2);
  background: rgba(2,132,199,0.06);
  color: #0284c7;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-left: 4px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.budget-edit-btn:hover {
  background: rgba(2,132,199,0.15);
  border-color: rgba(2,132,199,0.5);
  transform: scale(1.1);
}
.budget-cell-actions { width: 80px !important; }

/* ── Budget add-btn when in edit mode ── */
.budget-btn-editing {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
}
.budget-btn-editing:hover { background: #0369a1 !important; }

/* ── Budget: cancel edit button ── */
.budget-cancel-edit-btn {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1.5px solid #94a3b8;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}
.budget-cancel-edit-btn:hover { background: #f1f5f9; color: #334155; }

/* ── Delete-All button — shared between tasks & budget ── */
.delete-all-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(220,38,38,0.3);
  background: rgba(220,38,38,0.06);
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.delete-all-btn:hover {
  background: rgba(220,38,38,0.14);
  border-color: rgba(220,38,38,0.6);
}

@media (max-width: 600px) {
  .task-row-actions { opacity: 1; }
  .delete-all-btn { padding: 7px 11px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE GUESTS TABLE — scrollable real table (overrides card layout)
   These rules intentionally override the block/card conversion done
   at the 768px breakpoint so the guests table stays a real <table>
   with horizontal scroll instead of stacking into unreadable cards.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. Filter tabs: smooth horizontal scroll (no line breaks) ─────── */
  #guestFilterTabs.filter-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px !important;
    padding: 4px 2px 10px !important;
    scrollbar-width: none;
  }
  #guestFilterTabs.filter-tabs::-webkit-scrollbar { display: none; }
  #guestFilterTabs .filter-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
    min-height: 36px;
    font-size: 13px;
  }

  /* ── 2. Table wrapper: horizontal scroll, no overflow clipping ──────── */
  #screen-guests .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
  }

  /* ── 3. Restore #guestsTable to a real <table> (undo block conversion) */
  #guestsTable              { display: table !important;           min-width: 640px !important; width: 100% !important; }
  #guestsTable thead        { display: table-header-group !important; }
  #guestsTable tbody        { display: table-row-group !important;  width: auto !important; }

  /* Rows: undo card style */
  #guestsTable tr {
    display: table-row !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    width: auto !important;
  }
  #guestsTable tbody tr:nth-child(even) td { background: #f8fafd; }
  #guestsTable tbody tr:hover td           { background: #eef3f9 !important; }

  /* ── 4. Cells: nowrap + compact + ellipsis for overflow ────────────── */
  #guestsTable td,
  #guestsTable th {
    display: table-cell !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    padding: 10px 10px !important;
    font-size: 12px !important;
    width: auto !important;
    min-height: auto !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    border: revert;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    gap: 0 !important;
  }
  /* Name column: a bit wider */
  #guestsTable .col-name { max-width: 140px; }

  /* ── 5. Sticky header: stays visible while scrolling down the list ─── */
  #guestsTable thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #102A43 !important;      /* navy */
    color: #D4AF37 !important;           /* gold */
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(212,175,55,0.35) !important;
    padding: 10px 10px !important;
    white-space: nowrap !important;
  }

  /* ── 6. Action buttons inside cells: compact, no full-width stretch ── */
  #guestsTable .row-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
    border-top: none !important;
    margin-top: 0 !important;
  }
  #guestsTable .row-actions .btn {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* ── 7. Inputs inside cells: don't stretch to 100% ─────────────────── */
  #guestsTable .cell-input {
    width: auto !important;
    min-width: 70px !important;
    max-width: 120px !important;
    font-size: 12px !important;
    padding: 4px 6px !important;
  }

  /* ── 8. Hide war-room columns on mobile (rarely needed while mobile) ── */
  #guestsTable .col-wr-actions,
  #guestsTable .col-wr-contact,
  #guestsTable .col-wr-note,
  #guestsTable .print-gift-col { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GUEST MANAGEMENT MODAL — Responsive redesign
   Replaces pill filters with <select> dropdowns, adds responsive grid
   layout for actions row and stats bar, makes modal full-screen on
   mobile. All rules override prior modal CSS via cascade order.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Modal card: desktop baseline ──────────────────────────────────── */
.gm-modal-card {
  width: 92vw !important;
  max-width: 1100px !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  border-radius: 16px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.3) transparent;
}
.gm-modal-card::-webkit-scrollbar       { width: 5px; }
.gm-modal-card::-webkit-scrollbar-track { background: transparent; }
.gm-modal-card::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 3px; }

/* ── Stats bar: 4-column grid ──────────────────────────────────────── */
.gm-stats-bar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  flex-wrap: unset !important;
  gap: 0 !important;
}

/* ── Filter selects grid: 2 columns on desktop, 1 on mobile ───────── */
.gm-filter-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.gm-filter-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gm-filter-select-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Chevron SVG (RTL: positioned on left because direction is rtl) */
.gm-filter-select {
  height: 40px;
  background-color: rgba(255,255,255,0.07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.45)' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: #fff;
  padding: 0 14px 0 36px;
  font-size: 14px;
  font-family: 'Heebo', sans-serif;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.gm-filter-select:focus {
  outline: none;
  border-color: #C9A84C;
  background-color: rgba(255,255,255,0.1);
}
.gm-filter-select option {
  background: #1e2535;
  color: #fff;
}

/* ── Actions row: 3-column grid ─────────────────────────────────────── */
.gm-actions-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.gm-actions-row .gm-wa-select,
.gm-actions-row .gm-smart-send-btn,
.gm-actions-row .gm-smart-call-btn {
  height: 42px !important;
  white-space: nowrap !important;
  font-size: 14px !important;
}

.gm-actions-row .gm-smart-send-btn,
.gm-actions-row .gm-smart-call-btn {
  min-width: 120px !important;
}

/* ── Table wrap: horizontal scroll ──────────────────────────────────── */
.gm-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ── Guest table: nowrap cells ──────────────────────────────────────── */
.gm-table th,
.gm-table td {
  white-space: nowrap;
}

/* ── Mobile: 768px and below ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Full-screen modal on mobile */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  .gm-modal-card {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Stats: 2×2 grid */
  .gm-stats-bar {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* round the outer corners of the 2×2 grid */
  .gm-stats-bar .gm-stat:nth-child(1) { border-radius: 0 8px 0 0; }
  .gm-stats-bar .gm-stat:nth-child(2) { border-radius: 8px 0 0 0; }
  .gm-stats-bar .gm-stat:nth-child(3) { border-radius: 0 0 0 8px; }
  .gm-stats-bar .gm-stat:nth-child(4) { border-radius: 0 0 8px 0; }

  /* Filter selects: 2 columns side by side on mobile */
  .gm-filter-selects {
    grid-template-columns: 1fr 1fr !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  /* Actions row: message-type full-width top, buttons split 50/50 below */
  .gm-actions-row {
    grid-template-columns: 1fr 1fr !important;
    padding: 10px 14px !important;
  }
  .gm-actions-row .gm-wa-select {
    grid-column: 1 / -1 !important;   /* full width on first row */
    width: 100% !important;
  }
  .gm-actions-row .gm-smart-send-btn,
  .gm-actions-row .gm-smart-call-btn {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Table: hide the guest-count column to save space */
  .gm-table .gm-td-gc,
  .gm-table th:nth-child(4) { display: none !important; }

  /* Compact RSVP + work-status select cells */
  .gm-table .gm-td-rsvp select,
  .gm-table .gm-td-work-status select {
    font-size: 11px !important;
    height: 28px !important;
    padding: 0 6px 0 24px !important;
    min-width: 90px !important;
  }

  /* Action buttons: horizontal row */
  .gm-table .gm-td-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 5px !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* ── Small mobile: 480px and below ──────────────────────────────────── */
@media (max-width: 480px) {

  /* Header */
  .gm-header { padding: 14px 14px 10px !important; }
  .gm-title  { font-size: 16px !important; }

  /* Search */
  .gm-search-wrap { padding: 0 14px 10px !important; }

  /* Compact table cells */
  .gm-table th,
  .gm-table td { padding: 8px 8px !important; font-size: 12px !important; }

  /* Shrink action buttons */
  .gm-action-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   GM MODAL — targeted fixes (issues 1-6)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ISSUE 1: Stats bar — divider between all 4 cells ─────────────── */
.gm-stat {
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
/* RTL: first cell (rightmost) has no right border; last cell removes left */
.gm-stats-bar .gm-stat:first-child { border-right: none !important; }
.gm-stats-bar .gm-stat:last-child  { border-left:  none !important; }

/* ── ISSUE 2: Table — column widths + nowrap ───────────────────────── */
/* Make the wrapper horizontally scrollable on all screen sizes */
.gm-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Name column */
.gm-table .gm-td-name {
  min-width: 90px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* Phone column: never break a phone number across lines */
.gm-table .gm-td-phone {
  min-width: 90px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  color: rgba(255,255,255,0.6) !important;
  direction: ltr;
  text-align: right !important;
}

/* RSVP & work-status selects: compact but readable */
.gm-table .gm-td-rsvp select,
.gm-table .gm-td-work-status select {
  min-width: 80px !important;
  font-size: 11px !important;
}

/* Actions column: icons in a horizontal row, centered */
.gm-table .gm-td-actions {
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
.gm-table .gm-td-actions > * {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}
/* When there's no phone (span instead of buttons) keep it centred */
.gm-table .gm-td-actions .gm-no-phone {
  display: block !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.3) !important;
}

/* ── ISSUE 3: Action buttons — different weights ───────────────────── */
/* "שלח וואטסאפ": stays solid green, 44px tall */
.gm-smart-send-btn,
.gm-actions-row .gm-smart-send-btn {
  height: 44px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  background: #22c55e !important;
  border: 2px solid #22c55e !important;
  color: #fff !important;
}
.gm-smart-send-btn:hover:not(:disabled),
.gm-actions-row .gm-smart-send-btn:hover:not(:disabled) {
  background: #16a34a !important;
  border-color: #16a34a !important;
}

/* "הוצא שיחות": outlined, blue — less prominent */
.gm-smart-call-btn,
.gm-actions-row .gm-smart-call-btn {
  height: 44px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 2px solid #2563eb !important;
  color: #93c5fd !important;
}
.gm-smart-call-btn:hover:not(:disabled),
.gm-actions-row .gm-smart-call-btn:hover:not(:disabled) {
  background: rgba(37,99,235,0.15) !important;
  border-color: #60a5fa !important;
  color: #fff !important;
}
.gm-smart-call-btn:disabled,
.gm-smart-send-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* ── ISSUE 4: Template select — wrap with label, match filter style ── */
.gm-wa-template-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 160px;
}

/* The select inside the wrapper inherits gm-filter-select styling.
   Override only the bits that differ from the filter selects. */
.gm-wa-template-wrap .gm-wa-select {
  height: 40px !important;
  width: 100% !important;
  flex: unset !important;
}

/* Grid recalculation: wrapper takes the "1fr" slot, buttons are auto */
.gm-actions-row {
  grid-template-columns: 1fr auto auto !important;
  align-items: end !important;  /* align to bottom of label+select stack */
}

/* ── ISSUE 5: "פעולות" column header — centred ──────────────────────── */
.gm-table thead th:last-child {
  text-align: center !important;
}

/* ── ISSUE 6: Notes toggle — colour + smooth max-height animation ──── */
.gm-notes-toggle {
  color: rgba(255,255,255,0.35) !important;
}
.gm-notes-chevron {
  color: rgba(255,255,255,0.30) !important;
}
/* Switch from display:none toggle to smooth max-height transition */
.gm-notes-body {
  display: block !important;   /* always in flow */
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 20px !important;
  transition: max-height 0.28s ease, padding-bottom 0.28s ease !important;
}
.gm-event-notes-wrap.gm-notes-open .gm-notes-body {
  max-height: 400px !important;
  padding-bottom: 14px !important;
}

/* ── Mobile ≤ 600px adjustments for the above ───────────────────────── */
@media (max-width: 600px) {

  /* Actions row: message-type full width, then buttons 50/50 */
  .gm-actions-row {
    grid-template-columns: 1fr 1fr !important;
    align-items: end !important;
  }
  .gm-wa-template-wrap {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  /* Tighten button text on very small screens */
  .gm-smart-send-btn,
  .gm-smart-call-btn {
    font-size: 12px !important;
    padding: 0 8px !important;
  }

  /* Stats bar: thin row divider between top and bottom pair */
  .gm-stats-bar .gm-stat:nth-child(1),
  .gm-stats-bar .gm-stat:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }
  .gm-stats-bar .gm-stat:nth-child(3),
  .gm-stats-bar .gm-stat:nth-child(4) {
    border-bottom: none !important;
  }

  /* Notes body padding */
  .gm-notes-body { padding-left: 14px !important; padding-right: 14px !important; }
  .gm-event-notes-wrap.gm-notes-open .gm-notes-body { padding-bottom: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE TABLE FIXES — guests table (dashboard) + gm-table (admin-lobby)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Guests table in dashboard (screen-guests) ───────────────────── */

/* Wrapper scrolls horizontally */
#screen-guests .table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Sticky header with opaque navy background */
#guestsTable thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #0f2236 !important;
  white-space: nowrap !important;
  min-width: 80px !important;
}

/* Cells: no wrapping, minimum column width */
#guestsTable th,
#guestsTable td {
  white-space: nowrap !important;
  min-width: 80px !important;
}

/* ── 2. GM table in admin-lobby modal ───────────────────────────────── */

/* Wrapper scrolls horizontally and vertically */
.gm-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Sticky header — opaque dark blue */
.gm-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background: #0f2236 !important;
  white-space: nowrap !important;
  min-width: 80px !important;
}

/* Cells: no wrapping */
.gm-table th,
.gm-table td {
  white-space: nowrap !important;
  min-width: 80px !important;
}

/* ── 3. Lobby global stats — 2×2 grid at all mobile widths ─────────── */
@media (max-width: 768px) {
  .lobby-global-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* Card layout: icon + text stacked for readability in 50% width */
  .lobby-gstat-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px 16px !important;
    gap: 8px !important;
  }
}