/* ==========================================================================
   SHYAM CATERERS & EVENT MANAGEMENT - LUXURY ERP DESIGN SYSTEM
   Crafting Culinary & Event Experiences Since 1988
   ========================================================================== */

:root {
  /* Brand Luxury Palette */
  --gold-primary: #D4AF37;
  --gold-light: #F3E5AB;
  --gold-hover: #C5A059;
  --gold-dark: #997819;
  --ruby-primary: #A81D24;
  --ruby-dark: #7E1218;
  --ruby-light: #FDE8E9;
  
  /* Neutral Slate Palette */
  --bg-app: #0B101B;
  --bg-sidebar: #0F172A;
  --bg-surface: #151F32;
  --bg-surface-elevated: #1E293B;
  --bg-card: rgba(26, 38, 62, 0.85);
  --bg-card-hover: rgba(35, 50, 80, 0.95);
  --border-subtle: rgba(212, 175, 55, 0.18);
  --border-medium: rgba(212, 175, 55, 0.35);
  --border-focus: rgba(212, 175, 55, 0.7);

  /* Typography */
  --text-main: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-gold: #E5C365;
  --text-ruby: #FF6B72;

  /* Status Colors */
  --status-pending-bg: rgba(245, 158, 11, 0.15);
  --status-pending-border: #F59E0B;
  --status-pending-text: #FBBF24;

  --status-progress-bg: rgba(59, 130, 246, 0.15);
  --status-progress-border: #3B82F6;
  --status-progress-text: #60A5FA;

  --status-completed-bg: rgba(16, 185, 129, 0.15);
  --status-completed-border: #10B981;
  --status-completed-text: #34D399;

  /* Radii & Shadows */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.5);
  --shadow-gold: 0 0 18px rgba(212, 175, 55, 0.25);
  
  --sidebar-width: 260px;
  --header-height: 70px;
  --transition-fast: 0.18s ease;
  --transition-normal: 0.28s ease;
}

/* Base & Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   GLOBAL MINI SCROLLBAR SYSTEM (Exact Menu Selection Style Everywhere)
   ========================================================================== */
*, *::before, *::after {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-primary) rgba(15, 23, 42, 0.6);
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: var(--gold-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: var(--gold-light);
}

::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
}

/* Gujarati Font Support */
.gujarati-text, [lang="gu"] {
  font-family: 'Noto Sans Gujarati', 'Shruti', 'Gujarati Sangam MN', sans-serif;
}

/* App Shell Layout */
#app-container {
  display: flex;
  width: 100vw;
  min-height: 100vh;
  position: relative;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  transition: transform var(--transition-normal);
}

/* Sidebar Collapsed State (Full screen workspace) */
body.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
}
body.sidebar-collapsed .main-wrapper {
  margin-left: 0;
  width: 100vw;
}

.sidebar-header {
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(21, 31, 50, 0.7) 0%, rgba(15, 23, 42, 0.5) 100%);
}

.sidebar-logo {
  max-width: 170px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.3));
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Accordion Nav Groups */
.nav-group {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  margin-bottom: 2px;
}

.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 700;
  transition: all var(--transition-fast);
  user-select: none;
  border: 1px solid transparent;
}

.nav-group-header:hover {
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-light);
  border-color: rgba(212, 175, 55, 0.15);
}

.nav-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-group-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold-primary);
  stroke-width: 2.2;
}

.nav-group-chevron {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  stroke-width: 2.4;
}

.nav-group.open .nav-group-chevron {
  transform: rotate(0deg);
  color: var(--gold-primary);
}

.nav-group:not(.open) .nav-group-chevron {
  transform: rotate(-90deg);
}

.nav-sub-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 20px;
  padding-left: 10px;
  border-left: 1.5px solid rgba(212, 175, 55, 0.2);
  margin-top: 3px;
  margin-bottom: 6px;
  transition: max-height 0.28s ease, opacity 0.2s ease;
  overflow: hidden;
}

.nav-group:not(.open) .nav-sub-items {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.nav-group.open .nav-sub-items {
  max-height: 500px;
  opacity: 1;
}

.nav-sub-item {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  line-height: 1.35;
}

.nav-sub-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  padding-left: 15px;
}

.nav-sub-item.active {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.22) 0%, rgba(15, 23, 42, 0.85) 100%);
  color: #ffffff;
  font-weight: 700;
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-sub-item.active::before {
  content: '•';
  color: var(--gold-primary);
  margin-right: 6px;
  font-size: 1.1rem;
  line-height: 0;
}

.nav-section-label {
  padding: 14px 12px 4px 12px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.nav-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  margin-bottom: 2px;
}

.nav-item-top svg {
  color: var(--gold-primary);
  flex-shrink: 0;
}

.nav-item-top:hover {
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-light);
  border-color: rgba(212, 175, 55, 0.15);
}

.nav-item-top.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(168, 29, 36, 0.22) 100%);
  color: #FFF;
  border-color: var(--border-medium);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Fallback legacy .nav-item support */
.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.nav-item:hover {
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-light);
  border-color: rgba(212, 175, 55, 0.15);
}

.nav-item:hover svg {
  transform: scale(1.1);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(168, 29, 36, 0.22) 100%);
  color: #FFF;
  border-color: var(--border-medium);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 0 10px rgba(212, 175, 55, 0.15);
  font-weight: 600;
}

.nav-item.active svg {
  color: var(--gold-primary);
}

.sidebar-footer {
  padding: 16px 18px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(11, 16, 27, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-primary), var(--ruby-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #FFF;
  font-size: 0.9rem;
  border: 2px solid var(--gold-primary);
}

.user-info {
  line-height: 1.25;
}

.user-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #FFF;
  white-space: nowrap;
}

.user-role {
  font-size: 0.72rem;
  color: var(--gold-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-icon-logout {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.btn-icon-logout:hover {
  color: var(--ruby-primary);
  background: rgba(168, 29, 36, 0.15);
}

/* Main Content Area */
.main-wrapper {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: calc(100vw - var(--sidebar-width));
}

/* Top App Header */
.top-header {
  height: var(--header-height);
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 90;
}

.header-title-area {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: #FFF;
  cursor: pointer;
}

.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFF;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.25;
  flex-wrap: wrap;
}

.page-title span {
  color: var(--gold-primary);
  font-size: 1rem;
  font-weight: 600;
}

.page-subtitle {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 3px;
}

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

.notification-wrapper {
  position: relative;
}

.btn-icon-header {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.btn-icon-header:hover {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  background: var(--bg-surface-elevated);
}

.badge-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  background: var(--ruby-primary);
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
}

.notifications-dropdown {
  position: absolute;
  right: 0;
  top: 50px;
  width: 340px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  z-index: 1000;
  display: none;
}

.notifications-dropdown.show {
  display: block;
}

.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.88rem;
  font-weight: 600;
}

.notif-list {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 8px;
}

.notif-item {
  padding: 10px;
  border-radius: var(--radius-sm);
  display: flex;
  gap: 10px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.notif-item:hover {
  background: rgba(212, 175, 55, 0.08);
}

/* Primary Brand Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-hover) 100%);
  color: #0B101B;
  border: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-primary) 100%);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.5);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-surface-elevated);
  color: var(--text-main);
  border: 1px solid var(--border-medium);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--gold-primary);
  color: var(--gold-light);
}

.btn-ruby {
  background: linear-gradient(135deg, var(--ruby-primary) 0%, var(--ruby-dark) 100%);
  color: #FFF;
  border: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(168, 29, 36, 0.4);
}

.btn-ruby:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(168, 29, 36, 0.6);
}

/* App View Containers */
.view-container {
  padding: 24px 28px;
  flex: 1;
}

.view-section {
  display: none;
}

.view-section.active {
  display: block;
  animation: fadeIn 0.25s ease forwards;
}

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

/* Metric Cards Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(8px);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gold-primary);
}

.metric-card.ruby::before { background: var(--ruby-primary); }
.metric-card.emerald::before { background: var(--status-completed-border); }
.metric-card.amber::before { background: var(--status-pending-border); }
.metric-card.blue::before { background: var(--status-progress-border); }

.metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-medium);
  box-shadow: var(--shadow-md);
}

.metric-info h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

.metric-value {
  font-size: 1.85rem;
  font-weight: 800;
  color: #FFF;
  letter-spacing: -0.5px;
}

.metric-icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(212, 175, 55, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-primary);
}

/* ==========================================================================
   CALENDAR SYSTEM (Month / Week / Day)
   ========================================================================== */
.calendar-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 24px;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.cal-nav-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cal-month-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFF;
  min-width: 220px;
}

.cal-btn-icon {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cal-btn-icon:hover {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
}

.cal-views-toggle {
  display: flex;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
}

.cal-view-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cal-view-btn.active {
  background: var(--gold-primary);
  color: #0B101B;
  font-weight: 700;
}

/* Calendar Month Grid */
.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  margin-bottom: 2px;
}

.cal-header-cell {
  background: var(--bg-surface-elevated);
  padding: 10px 4px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-gold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.calendar-grid-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}

.cal-day-cell {
  background: var(--bg-surface);
  min-height: 115px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cal-day-cell:hover {
  background: var(--bg-card-hover);
}

.cal-day-cell.other-month {
  opacity: 0.35;
  background: rgba(11, 16, 27, 0.7);
}

.cal-day-cell.today {
  border: 2px solid var(--gold-primary);
  background: rgba(212, 175, 55, 0.06);
}

.day-cell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.day-number {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cal-day-cell.today .day-number {
  background: var(--gold-primary);
  color: #0B101B;
}

.day-add-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--gold-primary);
  cursor: pointer;
  font-size: 1rem;
  transition: opacity var(--transition-fast);
}

.cal-day-cell:hover .day-add-btn {
  opacity: 1;
}

.day-events-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: visible;
}

.day-events-count-pill {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 1px 6px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.day-events-count-pill:hover {
  background: rgba(212, 175, 55, 0.35);
  color: #FFF;
  transform: scale(1.05);
}

.day-more-events-btn {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--gold-light);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 2px;
}

.day-more-events-btn:hover {
  background: rgba(212, 175, 55, 0.25);
  border-color: var(--gold-primary);
  color: #FFF;
  transform: translateY(-1px);
}

.event-pill {
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border-left: 3px solid;
  transition: transform var(--transition-fast), filter var(--transition-fast);
  background: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.event-pill:hover {
  transform: translateX(2px);
  filter: brightness(1.15);
}

.event-pill.pending {
  border-color: var(--status-pending-border);
  background: var(--status-pending-bg);
  color: var(--status-pending-text);
}

.event-pill.progress {
  border-color: var(--status-progress-border);
  background: var(--status-progress-bg);
  color: var(--status-progress-text);
}

.event-pill.completed {
  border-color: var(--status-completed-border);
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}

.event-pill-title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  color: #FFF;
}

.event-pill-meta {
  font-size: 0.67rem;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

/* Date Events Popup Cards */
.date-event-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.date-event-card:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: var(--gold-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.date-event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.date-event-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.date-event-order-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.15);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.date-event-client-name {
  font-size: 0.98rem;
  font-weight: 800;
  color: #FFF;
}

.date-event-type-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.07);
  padding: 2px 7px;
  border-radius: 4px;
}

.date-event-card-body {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: 1.4;
}

.date-event-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.date-event-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* Week and Day Views */
.cal-week-grid, .cal-day-view-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cal-day-expanded-row {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   MENU PLANNING DUAL-PANEL SYSTEM (Section 7, 9, 10, 12, 13)
   ========================================================================== */
.planning-header-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 16px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}

.planning-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.client-event-brief {
  display: flex;
  align-items: center;
  gap: 16px;
}

.event-badge-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--border-medium);
  color: var(--gold-light);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.4px;
  line-height: 1.25;
  box-sizing: border-box;
}

.event-order-badge {
  background: var(--ruby-primary);
  color: #FFF;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
}

.client-name-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFF;
}

.brief-meta {
  color: var(--text-secondary);
  font-size: 0.88rem;
  display: flex;
  gap: 16px;
}

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

.draft-pill-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-gold);
  background: rgba(212, 175, 55, 0.1);
  padding: 6px 12px;
  border-radius: 50px;
  border: 1px solid var(--border-subtle);
}

.draft-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-primary);
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(212, 175, 55, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* Meal Selector Tabs */
.meal-selector-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.meal-tabs-group {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.meal-tab-btn {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.meal-tab-btn:hover {
  color: #FFF;
  border-color: var(--border-medium);
}

.meal-tab-btn.active {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
  color: #0B101B;
  border-color: var(--gold-light);
  box-shadow: var(--shadow-gold);
}

.diet-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-app);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.diet-pill-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.diet-pill-btn.active {
  background: var(--gold-primary);
  color: #0B101B;
}

/* ==========================================================================
   MENU PLANNING 3-PANEL WORKBENCH (Matching Authentic Catering Interface)
   Left = Item Categories, Center = Dishes Catalog, Right = Selected Menu
   ========================================================================== */
.menu-planning-workbench {
  display: grid;
  grid-template-columns: 240px minmax(0, 1.25fr) 420px;
  gap: 16px;
  min-height: 700px;
  align-items: start;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Category Sidebar Collapsed State */
.menu-planning-workbench.category-sidebar-collapsed {
  grid-template-columns: 0px minmax(0, 1.25fr) 420px;
  gap: 16px;
}
.menu-planning-workbench.category-sidebar-collapsed .panel-categories-sidebar {
  display: none !important;
}

/* When entire Catalog is Collapsed (Right Panel Expands to 100%) */
.menu-planning-workbench.catalog-collapsed {
  grid-template-columns: 1fr;
}
.menu-planning-workbench.catalog-collapsed .panel-categories-sidebar,
.menu-planning-workbench.catalog-collapsed .panel-dishes-catalog {
  display: none !important;
}
.menu-planning-workbench.catalog-collapsed .panel-selected-menu {
  width: 100%;
  max-width: 100%;
}

/* 1. LEFT PANEL: ITEM CATEGORIES VERTICAL SIDEBAR */
.panel-categories-sidebar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  position: sticky;
  top: 85px;
  overflow: hidden;
}

.category-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 10px;
}

.category-sidebar-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-search-box {
  margin-bottom: 10px;
}

.category-vertical-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 4px;
}

.cat-vertical-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border-left: 3px solid transparent;
  background: rgba(15, 23, 42, 0.4);
  transition: all var(--transition-fast);
}

.cat-vertical-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #FFF;
  border-left-color: var(--border-medium);
}

.cat-vertical-item.active {
  background: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
  border-left-color: #3B82F6;
  font-weight: 800;
}

.cat-vertical-count {
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 7px;
  border-radius: 12px;
  color: var(--text-muted);
}

.cat-vertical-item.active .cat-vertical-count {
  background: rgba(59, 130, 246, 0.25);
  color: #93C5FD;
}

/* 2. CENTER PANEL: DISHES CATALOG GRID */
.panel-dishes-catalog {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
}

.dishes-catalog-header {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.catalog-active-filter-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.7);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-light);
  border: 1px solid var(--border-subtle);
}

/* 3. RIGHT PANEL: SELECTED MENU */
.panel-selected-menu {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 85px;
  height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
}

.panel-selected-menu .panel-header {
  flex-shrink: 0;
  margin-bottom: 10px;
}

/* Right Panel Meta Box (Matching Reference Image) */
.selected-menu-meta-box {
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.meta-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.meta-field-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  width: 90px;
  flex-shrink: 0;
}

.meta-field-input {
  flex: 1;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 0.82rem;
  color: #FFF;
  font-weight: 600;
}

.meta-field-input.editable {
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #fff;
  transition: all 0.2s ease;
  cursor: text;
}

.meta-field-input.editable:hover {
  border-color: var(--gold-primary);
  background: rgba(212, 175, 55, 0.12);
}

.meta-field-input.editable:focus {
  border-color: var(--gold-primary);
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
  outline: none;
}

/* Selected Menu Footer */
.selected-menu-footer {
  flex-shrink: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg-surface);
}

.selected-footer-count {
  font-size: 0.84rem;
  color: var(--text-secondary);
}
.selected-footer-count strong {
  color: var(--gold-light);
  font-size: 0.95rem;
}

.selected-footer-actions {
  display: flex;
  gap: 8px;
}

.selected-menu-scrollable {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-primary) rgba(15, 23, 42, 0.6);
}

.selected-menu-scrollable::-webkit-scrollbar {
  width: 6px;
}

.selected-menu-scrollable::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 4px;
}

.selected-menu-scrollable::-webkit-scrollbar-thumb {
  background: var(--gold-primary);
  border-radius: 4px;
}

.selected-menu-scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--gold-light);
}

.drop-target-area {
  min-height: 250px;
  border: 2px dashed rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  color: var(--text-muted);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.drop-target-area.drag-over {
  border-color: var(--gold-primary);
  background: rgba(212, 175, 55, 0.08);
  box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.2);
  transform: scale(1.01);
}

/* Category Group in Selected Menu */
.selected-category-block {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  overflow: visible;
  flex-shrink: 0;
}

.selected-category-header {
  background: rgba(15, 23, 42, 0.9);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  flex-shrink: 0;
}

.selected-items-list {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.selected-item-row {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.selected-item-row:hover {
  border-color: var(--border-medium);
  background: rgba(35, 50, 80, 0.9);
}

.selected-item-row.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.item-row-thumb {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: #0B101B;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.item-row-info {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.item-row-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: #FFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-row-guj {
  font-size: 0.74rem;
  color: var(--gold-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-row-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-item-action {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.btn-item-action:hover {
  color: #FFF;
  background: rgba(255, 255, 255, 0.1);
}

.btn-item-action.remove:hover {
  color: var(--ruby-primary);
  background: rgba(168, 29, 36, 0.2);
}

/* OR / Alternate Dish (/ અથવા) Feature Styles */
.btn-or-toggle {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px dashed rgba(212, 175, 55, 0.45);
  color: var(--gold-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-or-toggle:hover {
  background: rgba(212, 175, 55, 0.28);
  border-color: var(--gold-primary);
  color: #FFF;
}

.btn-or-toggle.active {
  background: rgba(212, 175, 55, 0.25);
  border: 1.5px solid var(--gold-primary);
  color: #FFF;
  font-weight: 800;
}

.badge-or-slash {
  display: inline-block;
  font-weight: 900;
  color: var(--gold-primary);
  margin: 0 4px;
  font-size: 0.92em;
}

.item-or-dish-name {
  color: var(--gold-light);
  font-weight: 700;
}

.selected-item-row.has-or-item {
  border-left: 3px solid var(--gold-primary);
  background: rgba(30, 41, 59, 0.85);
}

/* Drag to Add as OR Drop Target */
.item-or-drop-zone {
  display: flex;
  align-items: center;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-sm);
  padding: 1px;
}

.item-row-drag-handle {
  color: var(--text-muted);
  cursor: grab;
  font-size: 0.95rem;
  padding: 0 4px;
  user-select: none;
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.selected-item-row:hover .item-row-drag-handle {
  opacity: 1;
  color: var(--gold-primary);
}

/* While dragging any row or dish, expand the OR drop zone so it's impossible to miss */
body.is-dragging-row .item-or-drop-zone,
body.is-dragging-dish .item-or-drop-zone,
.item-or-drop-zone.or-target-visible {
  min-width: 120px;
  height: 32px;
  outline: 2px dashed var(--gold-primary) !important;
  background: rgba(212, 175, 55, 0.22) !important;
  border-radius: var(--radius-sm);
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: pulseOrZone 1.2s infinite alternate ease-in-out;
  cursor: copy !important;
}

body.is-dragging-row .item-or-drop-zone *,
body.is-dragging-dish .item-or-drop-zone *,
.item-or-drop-zone.or-target-visible * {
  pointer-events: none !important; /* CRITICAL: Prevent child buttons/spans from absorbing drag events */
}

body.is-dragging-row .or-normal-text,
body.is-dragging-dish .or-normal-text {
  display: none !important;
}

body.is-dragging-row .or-drag-prompt,
body.is-dragging-dish .or-drag-prompt {
  display: inline-block !important;
  color: #FFF !important;
  font-weight: 800 !important;
}

@keyframes pulseOrZone {
  0% { box-shadow: 0 0 3px rgba(212, 175, 55, 0.2); }
  100% { box-shadow: 0 0 12px rgba(212, 175, 55, 0.65); }
}

.selected-item-row.drag-active-target .item-or-drop-zone {
  outline: 2px dashed rgba(212, 175, 55, 0.85);
  background: rgba(212, 175, 55, 0.2);
}

.item-or-drop-zone.or-drop-hover {
  outline: 2.5px solid #FFF !important;
  background: var(--gold-primary) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.9) !important;
  z-index: 50;
}

.item-or-drop-zone.or-drop-hover .btn-or-toggle,
.item-or-drop-zone.or-drop-hover .or-drag-prompt {
  color: #000 !important;
  font-weight: 900 !important;
}

/* OR Item Modal Luxury Styling */
.or-modal-main-card {
  background: linear-gradient(135deg, rgba(21, 31, 50, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.or-modal-main-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gold-primary);
}

.or-live-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.or-live-search-input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 42px;
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: #FFF;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}

.or-live-search-input:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}

.or-search-icon {
  position: absolute;
  left: 14px;
  color: var(--gold-primary);
  pointer-events: none;
}

.or-search-clear {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
}

.or-search-results-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.or-result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.18s ease;
}

.or-result-card:hover {
  background: rgba(35, 50, 80, 0.95);
  border-color: var(--gold-primary);
  transform: translateX(3px);
}

.or-result-card.selected {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--gold-primary);
}

.or-result-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: #0B101B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: 1px solid var(--border-subtle);
}

.or-result-info {
  flex: 1;
  min-width: 0;
}

.or-result-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.or-result-guj {
  font-size: 0.78rem;
  color: var(--gold-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.or-result-cat {
  font-size: 0.68rem;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border-radius: 4px;
  white-space: nowrap;
}

.or-result-select-btn {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  border-radius: var(--radius-sm);
  transition: all 0.18s ease;
  white-space: nowrap;
}

.or-result-card:hover .or-result-select-btn {
  background: var(--gold-primary);
  color: #000;
}

/* Right Panel: Catalog Categories + Items */
.panel-catalog {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.catalog-search-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.search-input-wrapper {
  position: relative;
  flex: 1;
}

.search-input-wrapper svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 18px;
  height: 18px;
}

.input-search {
  width: 100%;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px 10px 42px;
  color: #FFF;
  font-size: 0.9rem;
  transition: border-color var(--transition-fast);
}

.input-search:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
}

.search-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: var(--text-muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  transition: all 0.2s ease;
  z-index: 2;
}

.search-clear-btn:hover {
  background: rgba(212, 175, 55, 0.3);
  color: var(--gold-light);
  transform: translateY(-50%) scale(1.1);
}

/* Category Filter Bar / Tabs */
.catalog-categories-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.cat-nav-chip {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 7px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.cat-nav-chip:hover {
  border-color: var(--gold-primary);
  color: var(--gold-light);
}

.cat-nav-chip.active {
  background: var(--gold-primary);
  color: #0B101B;
  border-color: var(--gold-light);
}

/* Catalog Items Grid */
.catalog-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: 240px;
  gap: 16px;
  overflow-y: auto;
  max-height: 640px;
  min-height: 480px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-primary) rgba(15, 23, 42, 0.6);
}

.catalog-items-grid::-webkit-scrollbar {
  width: 6px;
}

.catalog-items-grid::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 4px;
}

.catalog-items-grid::-webkit-scrollbar-thumb {
  background: var(--gold-primary);
  border-radius: 4px;
}

.catalog-items-grid::-webkit-scrollbar-thumb:hover {
  background: var(--gold-light);
}

/* Menu Item Card (Section 9, 34) */
.item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: grab;
  transition: all var(--transition-fast);
  position: relative;
  height: 240px;
  min-height: 240px;
}

.item-card {
  cursor: pointer;
  user-select: none;
}

.item-card:hover {
  border-color: var(--gold-primary);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(212, 175, 55, 0.25);
  background: var(--bg-card-hover);
}

.item-card:active {
  transform: translateY(-1px) scale(0.99);
}

.item-card.item-card-selected {
  cursor: default;
}

.item-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.item-card-photo-box {
  width: 100%;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  background: #0B101B;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Dish Photo Preview Eye Button in Photo Corner */
.btn-item-photo-preview {
  position: absolute;
  bottom: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(212, 175, 55, 0.6);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  padding: 0;
}

.btn-item-photo-preview:hover {
  background: var(--gold-primary);
  color: #000;
  border-color: #FFF;
  transform: scale(1.18);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.85);
}

.item-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.item-card:hover .item-card-photo {
  transform: scale(1.06);
}

.item-card-no-photo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(21, 31, 50, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
  color: var(--text-muted);
  font-size: 0.72rem;
  gap: 4px;
}

/* Green Veg Symbol (Authentic Indian FSSAI Veg Symbol) */
.item-veg-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 17px;
  height: 17px;
  border: 1.8px solid #10B981;
  background: rgba(15, 23, 42, 0.92);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.item-veg-badge .veg-dot {
  width: 7px;
  height: 7px;
  background: #10B981;
  border-radius: 50%;
}

/* Single-Selection Selected Card State (Section: One item selected only once) */
.item-card.item-card-selected {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
}

.item-selected-pill-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #10B981;
  color: #0B101B;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  letter-spacing: 0.3px;
}

.item-diet-badges {
  position: absolute;
  bottom: 6px;
  left: 6px;
  display: flex;
  gap: 4px;
  z-index: 2;
}

.diet-tag {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.diet-tag.reg { background: rgba(59, 130, 246, 0.85); color: #FFF; }
.diet-tag.jain { background: rgba(16, 185, 129, 0.85); color: #FFF; }
.diet-tag.swam { background: rgba(245, 158, 11, 0.85); color: #0B101B; }

.item-card-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.item-card-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFF;
  line-height: 1.25;
}

.item-card-guj {
  font-size: 0.76rem;
  color: var(--gold-primary);
  line-height: 1.2;
}

.item-card-footer {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-card-add {
  width: 100%;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--border-subtle);
  color: var(--gold-light);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.btn-card-add:hover {
  background: var(--gold-primary);
  color: #0B101B;
  border-color: var(--gold-primary);
}

/* Already added button state */
.btn-card-add.btn-card-added {
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.5);
  cursor: default;
}
.btn-card-add.btn-card-added:hover {
  background: rgba(16, 185, 129, 0.25);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.6);
}

/* ==========================================================================
   MODALS SYSTEM
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
  animation: modalFadeIn 0.22s ease forwards;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.modal-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  width: 100%;
  max-width: 850px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-container.large { max-width: 1050px; }
.modal-container.small { max-width: 500px; }

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(21, 31, 50, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #FFF;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-title svg { color: var(--gold-primary); }

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.modal-close-btn:hover {
  color: #FFF;
  background: rgba(255, 255, 255, 0.1);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(11, 16, 27, 0.6);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

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

.form-grid.full { grid-template-columns: 1fr; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.form-grid.four { grid-template-columns: repeat(4, 1fr); }

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

.form-group.col-span-2 { grid-column: span 2; }
.form-group.col-span-3 { grid-column: span 3; }

.form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-label .required { color: var(--ruby-primary); }

.form-control {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: #FFF;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
}

select.form-control {
  cursor: pointer;
}

/* Meal Row in Add Event */
.meals-section-wrapper {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

.meals-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.meal-entry-card {
  background: rgba(11, 16, 27, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 14px;
  position: relative;
}

.meal-entry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.meal-index-pill {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.15);
  padding: 4px 10px;
  border-radius: 50px;
}

.meal-total-display {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gold-primary);
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  color: #FFF;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  animation: toastSlideIn 0.25s ease forwards;
}

.toast.success { border-left: 4px solid var(--status-completed-border); }
.toast.error { border-left: 4px solid var(--ruby-primary); }
.toast.info { border-left: 4px solid var(--gold-primary); }

@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Responsive Breakpoints */
@media (max-width: 1250px) {
  .menu-planning-workbench {
    grid-template-columns: 210px minmax(0, 1fr) 380px;
    gap: 12px;
  }
}

@media (max-width: 1024px) {
  .menu-planning-workbench {
    grid-template-columns: 1fr;
  }
  .panel-categories-sidebar {
    height: auto;
    position: static;
    max-height: 250px;
  }
  .panel-selected-menu {
    position: static;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-wrapper {
    margin-left: 0;
    width: 100vw;
  }
  .mobile-menu-btn {
    display: block;
  }
  .form-grid, .form-grid.three, .form-grid.four {
    grid-template-columns: 1fr;
  }
  .form-group.col-span-2, .form-group.col-span-3 {
    grid-column: span 1;
  }
}

/* ==========================================================================
   DISH PHOTO DRAG & DROP SYSTEM (Menu Item Master & Modal)
   ========================================================================== */
.dish-drop-cell {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: var(--radius-sm);
  border: 2px dashed rgba(212, 175, 55, 0.35);
  background: #0B101B;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.dish-drop-cell:hover {
  border-color: var(--gold-primary);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
  transform: translateY(-1px);
}

.dish-drop-cell.drag-over {
  border-color: #F3E5AB !important;
  background: rgba(212, 175, 55, 0.22) !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.6) !important;
  transform: scale(1.06);
}

.dish-drop-cell .dish-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dish-drop-cell .dish-empty-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
}

.dish-drop-cell .dish-empty-txt {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.3px;
}

.dish-drop-cell .dish-drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #FFF;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  backdrop-filter: blur(2px);
}

.dish-drop-cell:hover .dish-drop-overlay {
  opacity: 1;
}

.dish-drop-cell.drag-over .dish-drop-overlay {
  opacity: 1;
  background: rgba(212, 175, 55, 0.88);
  color: #0B101B;
}

.dish-delete-photo-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(168, 29, 36, 0.95);
  color: #FFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
  padding: 0;
}

.dish-drop-cell:hover .dish-delete-photo-btn {
  opacity: 1;
}

.dish-delete-photo-btn:hover {
  transform: scale(1.15);
  background: #DC2626;
}

.dish-upload-spinner {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 27, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.spinner-ring {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(212, 175, 55, 0.25);
  border-top-color: var(--gold-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Modal Dropzone */
.modal-dish-dropzone {
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  background: rgba(11, 16, 27, 0.4);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.modal-dish-dropzone:hover {
  border-color: var(--gold-primary);
  background: rgba(212, 175, 55, 0.05);
}

.modal-dish-dropzone.drag-over {
  border-color: #F3E5AB !important;
  background: rgba(212, 175, 55, 0.15) !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.3) !important;
}

.modal-dish-dropzone .preview-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  text-align: left;
}

.modal-dish-dropzone .preview-img {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.modal-dish-dropzone .preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Client Auto-complete Dropdown */
.client-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  background: #111A2B;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
  z-index: 1050;
  margin-top: 4px;
}

.client-suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.15s ease;
}

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

.client-suggestion-item:hover,
.client-suggestion-item.active {
  background: rgba(212, 175, 55, 0.22);
  border-left-color: var(--gold-primary);
}

.client-sug-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.client-sug-name {
  font-weight: 700;
  color: #FFF;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.client-sug-sub {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.client-sug-badge {
  font-size: 0.72rem;
  background: rgba(212, 175, 55, 0.18);
  color: var(--gold-light);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}

/* ==========================================================================
   CONTACT STATUS TOGGLE SWITCH & MULTI-CATEGORY SELECTION STYLES
   ========================================================================== */
.status-toggle-btn {
  position: relative;
  width: 46px;
  height: 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.status-toggle-btn.active {
  background-color: #5c5be5; /* Purple as in user image */
  box-shadow: 0 0 8px rgba(92, 91, 229, 0.4);
}

.status-toggle-btn.inactive {
  background-color: #64748b;
  opacity: 0.75;
}

.status-toggle-knob {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  top: 2px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.status-toggle-btn.active .status-toggle-knob {
  transform: translateX(24px);
  color: #5c5be5;
}

.status-toggle-btn.inactive .status-toggle-knob {
  transform: translateX(2px);
  color: #64748b;
}

/* Multi-category selector chips in modal */
.category-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.category-select-chip {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  transition: all 0.2s ease;
  user-select: none;
}

.category-select-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.3);
}

.category-select-chip.selected {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.12));
  border-color: var(--gold-primary);
  color: var(--gold-light);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.selected-categories-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  align-items: center;
  margin-bottom: 6px;
}

.selected-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(212, 175, 55, 0.2);
  color: var(--gold-light);
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.selected-cat-pill .pill-remove-btn {
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0.75;
  transition: opacity 0.15s ease;
  line-height: 1;
}

.selected-cat-pill .pill-remove-btn:hover {
  opacity: 1;
  color: var(--ruby-primary);
}

/* ==========================================================================
   MENU ALLOCATION WORKBENCH (Order Execution)
   ========================================================================== */
.alloc-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 12px;
}

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

.alloc-order-badge-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alloc-order-badge-title {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}

.alloc-select-order {
  background: var(--bg-surface-elevated);
  color: #FFF;
  font-weight: 700;
  border: 1px solid rgba(212, 175, 55, 0.45);
  padding: 6px 12px;
  min-width: 280px;
  font-size: 0.86rem;
  border-radius: 6px;
}

.alloc-meal-banner {
  background: linear-gradient(135deg, rgba(26, 38, 62, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.alloc-meal-banner-title {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFF;
  text-align: center;
  margin-bottom: 10px;
  background: rgba(59, 130, 246, 0.15);
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.alloc-meal-tabs-container {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.alloc-meal-tab-btn {
  padding: 6px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.alloc-meal-tab-btn:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #FFF;
}

.alloc-meal-tab-btn.active {
  background: var(--gold-primary);
  color: #0B101B;
  border-color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.alloc-meal-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

.alloc-meta-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.alloc-meta-item strong {
  color: #FFF;
}

.alloc-bulk-adjust-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.alloc-layout-grid {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1200px) {
  .alloc-layout-grid {
    grid-template-columns: 1fr;
  }
}

.alloc-table-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.alloc-table-header-row {
  display: grid;
  grid-template-columns: 32px minmax(130px, 1.5fr) 195px minmax(130px, 1.4fr) 115px 75px 125px 65px 95px 70px;
  padding: 8px 12px;
  background: rgba(212, 175, 55, 0.08);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--gold-light);
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  min-width: 1040px;
}

.alloc-items-list {
  display: flex;
  flex-direction: column;
}

.alloc-dish-row-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease;
}

.alloc-dish-row-group:hover {
  background: rgba(255, 255, 255, 0.015);
}

.alloc-dish-row-group.highlighted-dish {
  animation: dishPulse 1.5s ease;
  background: rgba(212, 175, 55, 0.12) !important;
}

@keyframes dishPulse {
  0% { background: rgba(212, 175, 55, 0.35); }
  100% { background: rgba(212, 175, 55, 0.05); }
}

.alloc-single-row {
  display: grid;
  grid-template-columns: 32px minmax(130px, 1.5fr) 195px minmax(130px, 1.4fr) 115px 75px 125px 65px 95px 70px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  min-width: 1040px;
}

.alloc-item-idx {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}

.alloc-item-name-box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.alloc-item-name-text {
  font-weight: 800;
  font-size: 0.86rem;
  color: #FFF;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alloc-item-cat-sub {
  font-size: 0.7rem;
  color: var(--gold-light);
  opacity: 0.85;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact Segmented Pills for Order Type */
.alloc-type-pills {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 2px;
  gap: 2px;
  width: 100%;
  justify-content: space-between;
}

.alloc-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  user-select: none;
  flex: 1;
  text-align: center;
}

.alloc-pill-btn input[type="radio"] {
  display: none;
}

.alloc-pill-btn.active.chef-active {
  background: rgba(59, 130, 246, 0.28);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.5);
}

.alloc-pill-btn.active.agency-active {
  background: rgba(245, 158, 11, 0.25);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.alloc-pill-btn.active.inside-active {
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.5);
}

.alloc-inline-inside-tag {
  font-size: 0.74rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  border: 1px dashed rgba(16, 185, 129, 0.35);
  border-radius: 4px;
  padding: 4px 8px;
  text-align: center;
  white-space: nowrap;
}

.alloc-empty-cell {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  display: block;
}

.alloc-input-control {
  background: var(--bg-surface-elevated);
  color: #FFF;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 0.78rem;
  width: 100%;
}

.alloc-input-control:focus {
  border-color: var(--gold-primary);
  outline: none;
}

.alloc-inline-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-whatsapp-inline {
  background: #25D366;
  color: #FFF;
  border: none;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.3);
  padding: 0;
  flex-shrink: 0;
}

.btn-whatsapp-inline:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.btn-whatsapp-inline:disabled {
  opacity: 0.2;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-add-extra-subrow {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--gold-light);
  border-radius: 4px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}

.btn-add-extra-subrow:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--gold-primary);
  color: #FFF;
}

/* Secondary Extra Sub-row for 2nd/3rd Karigars */
.alloc-extra-subrow {
  display: grid;
  grid-template-columns: 32px minmax(130px, 1.5fr) 195px minmax(130px, 1.4fr) 115px 75px 125px 65px 95px 70px;
  gap: 8px;
  padding: 4px 12px 6px 12px;
  align-items: center;
  min-width: 1040px;
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

.alloc-extra-label {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 700;
}

.alloc-extra-meta-note {
  grid-column: 7 / 10;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.btn-row-delete-inline {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.btn-row-delete-inline:hover {
  color: var(--ruby-primary);
}

/* Right Sidebar Panel: Category Summary Tree */
.alloc-sidebar-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.alloc-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}

.alloc-category-group {
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  overflow: hidden;
}

.alloc-category-header {
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--gold-light);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  user-select: none;
}

.alloc-dish-tree-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
}

.alloc-dish-tree-item {
  padding: 6px 8px;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.alloc-dish-tree-item:hover {
  background: rgba(212, 175, 55, 0.1);
}

.alloc-dish-tree-name {
  font-weight: 700;
  color: #FFF;
}

.alloc-dish-tree-name.dish-inside {
  color: #ef4444;
  font-weight: 800;
}

.alloc-badge-chef {
  color: #60a5fa;
  font-size: 0.7rem;
  font-weight: 700;
}

.alloc-badge-agency {
  color: #f59e0b;
  font-size: 0.7rem;
  font-weight: 700;
}

.alloc-badge-inside {
  color: #34d399;
  font-size: 0.7rem;
  font-weight: 700;
}

/* ==========================================================================
   LABOUR SHIFT MASTER STYLES (Image 1 Layout)
   ========================================================================== */
.master-breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.master-view-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFF;
}

.master-breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.master-breadcrumb-trail .active-crumb {
  color: var(--gold-light);
  font-weight: 600;
}

.master-filter-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.btn-round-add {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-round-add:hover {
  background: #2563eb;
  transform: scale(1.06);
}

.clean-data-table-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.clean-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.clean-data-table th {
  background: var(--bg-surface-elevated);
  padding: 12px 16px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--gold-light);
  border-bottom: 1px solid var(--border-subtle);
  text-transform: uppercase;
}

.clean-data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.86rem;
  color: #FFF;
}

.clean-data-table tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.switch-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  vertical-align: middle;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-round {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: .25s ease;
  border-radius: 20px;
}

.slider-round:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .25s ease;
  border-radius: 50%;
}

.switch-toggle input:checked + .slider-round {
  background-color: #3b82f6;
}

.switch-toggle input:checked + .slider-round:before {
  transform: translateX(18px);
}

.action-btn-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.btn-action-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn-action-icon:hover {
  transform: scale(1.15);
}

.btn-action-icon.edit-icon {
  color: #3b82f6;
}

.btn-action-icon.delete-icon {
  color: #ef4444;
}

.clean-table-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding: 12px 18px;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-elevated);
}

.footer-items-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-pagination-arrows {
  display: flex;
  gap: 4px;
}

.btn-pager {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.8rem;
  cursor: pointer;
}

/* ==========================================================================
   LABOUR MANAGEMENT STYLES (Date-wise Layout & Selected Menu Viewer)
   ========================================================================== */

/* Date Tabs Bar */
.labour-date-tabs-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 0 10px 0;
  margin-top: 14px;
  margin-bottom: 12px;
}

.labour-date-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 8px 18px;
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.labour-date-tab-btn:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: var(--gold-primary);
  color: #ffffff;
  transform: translateY(-1px);
}

.labour-date-tab-btn.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.38) 100%);
  border-color: #60a5fa;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
}

.date-tab-badge {
  background: rgba(212, 175, 55, 0.25);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 0.3px;
}

.labour-date-tab-btn.active .date-tab-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Event Date Meta Banner */
.labour-meta-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: rgba(21, 31, 50, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 14px;
}

.labour-meta-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: 0.83rem;
  color: var(--text-secondary);
}

.labour-meta-pill strong {
  color: var(--gold-light);
}

.badge-date-notice {
  display: inline-flex;
  align-items: center;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
}

/* 2-Panel Grid Layout */
.labour-mgmt-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1220px) {
  .labour-mgmt-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Left Panel: Labour Table */
.labour-left-panel {
  min-width: 0;
}

.labour-mgmt-tab-header {
  background: rgba(59, 130, 246, 0.18);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 42px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-bottom: none;
}

.labour-tab-item {
  font-weight: 700;
  font-size: 0.88rem;
  color: #93c5fd;
  display: flex;
  align-items: center;
  gap: 8px;
}

.labour-tab-date-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.25);
  border: 1px solid rgba(147, 197, 253, 0.3);
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

.labour-mgmt-table-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow-x: auto;
  box-shadow: var(--shadow-md);
  margin-bottom: 12px;
}

.labour-mgmt-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.labour-mgmt-table th {
  background: var(--bg-surface-elevated);
  color: var(--gold-light);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}

.labour-mgmt-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.labour-mgmt-tr:hover {
  background: rgba(255, 255, 255, 0.018);
}

.contact-dual-select {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 5px;
}

.datetime-icon-input {
  position: relative;
  display: flex;
  align-items: center;
}

.datetime-icon-input input {
  padding-right: 24px;
}

.datetime-icon-input .calendar-icon {
  position: absolute;
  right: 8px;
  color: var(--text-muted);
  pointer-events: none;
}

.form-control-sm {
  padding: 5px 7px;
  font-size: 0.78rem;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-elevated);
  color: #FFF;
  width: 100%;
}

.form-control-sm:focus {
  border-color: var(--gold-primary);
  outline: none;
}

.action-icon-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-action-icon.wa-icon {
  color: #22c55e;
}

.btn-action-icon.wa-icon:hover {
  filter: brightness(1.2);
}

.btn-action-icon.note-icon {
  color: #3b82f6;
}

.btn-action-icon.del-icon {
  color: #f97316;
}

.labour-mgmt-table-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-surface);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-add-labour-blue {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-add-labour-blue:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.labour-total-summary-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.labour-total-summary-box .total-label {
  color: var(--text-muted);
  font-weight: 600;
}

.labour-total-summary-box .total-amount {
  color: #34d399;
  font-weight: 800;
  font-size: 1.05rem;
}

.labour-mgmt-save-center {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 30px;
}

.btn-save-blue-center {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 38px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
  transition: all 0.15s ease;
}

.btn-save-blue-center:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

/* ==========================================================================
   RIGHT PANEL: SELECTED MENU VIEWER
   ========================================================================== */
.labour-right-menu-panel {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
}

.labour-menu-viewer-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 96px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.labour-menu-viewer-header {
  background: rgba(21, 31, 50, 0.95);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.viewer-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewer-icon {
  font-size: 1.1rem;
}

.viewer-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}

.viewer-badge {
  margin-left: auto;
  background: rgba(212, 175, 55, 0.2);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}

.viewer-instruction {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* Meal Pills (Breakfast, Lunch, Dinner, etc.) */
.labour-menu-meal-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.menu-meal-pill-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.15s ease;
}

.menu-meal-pill-btn:hover {
  border-color: var(--gold-primary);
  color: #ffffff;
  background: rgba(212, 175, 55, 0.1);
}

.menu-meal-pill-btn.active {
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  color: #0b101b;
  border-color: #d4af37;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
}

/* Active Meal Bar Info */
.labour-menu-active-meal-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.meal-info-left strong {
  color: #93c5fd;
  margin-right: 6px;
  text-transform: uppercase;
}

.meal-info-right {
  color: var(--gold-light);
  font-weight: 600;
}

/* Dishes List */
.labour-menu-dish-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.labour-menu-cat-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.labour-menu-cat-title {
  font-size: 0.73rem;
  font-weight: 800;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.25);
  padding-bottom: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.labour-menu-cat-count {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
}

.labour-menu-dish-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.labour-menu-dish-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 175, 55, 0.3);
}

.dish-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dish-name-en {
  font-size: 0.8rem;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dish-name-gu {
  font-size: 0.77rem;
  font-family: 'Noto Sans Gujarati', sans-serif;
  color: #6ee7b7;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dish-badge-order {
  font-size: 0.68rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.labour-menu-empty {
  padding: 30px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.labour-menu-empty .empty-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
  opacity: 0.6;
}

.labour-menu-viewer-footer {
  padding: 8px 14px;
  background: rgba(21, 31, 50, 0.85);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
}

/* Data Table & Responsive Container */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table th {
  background: var(--bg-surface-elevated);
  padding: 12px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--gold-light);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.86rem;
  color: #FFF;
  vertical-align: middle;
}

.data-table tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* =============================================================================
/* =============================================================================
   ORDER EXECUTION QUICK LAUNCHER & 3x3 POPOVER (Theme-Wise Luxury Glassmorphism)
   ============================================================================= */
.order-execution-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 100;
}

.btn-order-execution-launcher {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(180, 83, 9, 0.12) 100%);
  color: var(--gold-light);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  border-radius: 8px;
  padding: 7px 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.3px;
  backdrop-filter: blur(8px);
}

.btn-order-execution-launcher:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.35) 0%, rgba(180, 83, 9, 0.22) 100%);
  border-color: var(--gold-primary);
  color: #ffffff;
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.45);
  transform: translateY(-1px);
}

.btn-order-execution-launcher:active {
  transform: translateY(0);
}

/* =============================================================================
   GLOBAL LANGUAGE SWITCHER (English / Gujarati)
   ============================================================================= */
.lang-switcher-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 100;
}

.btn-lang-toggle {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(11, 16, 27, 0.95) 100%);
  color: #f1f5f9;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 8px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(212, 175, 55, 0.2);
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.btn-lang-toggle:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(126, 18, 24, 0.2) 100%);
  border-color: var(--gold-primary);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
  transform: translateY(-1px);
}

.lang-globe-icon {
  font-size: 1rem;
  line-height: 1;
}

.lang-badge {
  background: linear-gradient(135deg, #D4AF37 0%, #b45309 100%);
  color: #0B101B;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.lang-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: linear-gradient(165deg, #0F172A 0%, #080D1A 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.15);
  padding: 6px;
  z-index: 1100;
  backdrop-filter: blur(14px);
  animation: oeFadeIn 0.2s ease;
}

.lang-dropdown-menu.show {
  display: block;
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lang-option:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #ffffff;
}

.lang-option.active {
  background: linear-gradient(135deg, rgba(126, 18, 24, 0.4) 0%, rgba(212, 175, 55, 0.15) 100%);
  color: var(--gold-light);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.lang-flag {
  font-size: 1.05rem;
  margin-right: 8px;
}

.lang-name {
  flex: 1;
}

.lang-check {
  color: var(--gold-primary);
  font-weight: 900;
  font-size: 0.9rem;
}

/* Modal Report Language Switcher Pills */
.modal-report-lang-pill {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 13px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-report-lang-pill:hover {
  color: #ffffff;
}

.modal-report-lang-pill.active {
  background: linear-gradient(135deg, #D4AF37 0%, #b45309 100%) !important;
  color: #0B101B !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
}

.order-execution-popover {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  width: 420px;
  max-width: 95vw;
  background: linear-gradient(165deg, #0F172A 0%, #080D1A 100%);
  color: #f8fafc;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 16px;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 35px rgba(212, 175, 55, 0.15);
  overflow: hidden;
  z-index: 1050;
  animation: oeFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(16px);
}

.order-execution-popover.show {
  display: block;
}

@keyframes oeFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Royal Burgundy & Gold Header matching theme */
.oe-popover-header {
  background: linear-gradient(135deg, #7E1218 0%, #4c0519 100%);
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.4);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.oe-popover-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0.4px;
  font-family: 'Playfair Display', Georgia, serif;
}

.oe-popover-title svg {
  color: var(--gold-light);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
}

.oe-close-btn {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: var(--gold-light);
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: all 0.18s ease;
}

.oe-close-btn:hover {
  color: #ffffff;
  background: rgba(212, 175, 55, 0.25);
  border-color: var(--gold-primary);
  transform: rotate(90deg);
}

/* Event Selector Box */
.oe-event-selector-bar {
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.oe-selector-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--gold-light);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
  letter-spacing: 0.6px;
}

.oe-event-select {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  background: #0B101B;
  color: #ffffff;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oe-event-select:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

.oe-event-summary-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.74rem;
  color: #cbd5e1;
  font-weight: 600;
  flex-wrap: wrap;
}

.oe-status-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(180, 83, 9, 0.15));
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: var(--gold-light);
}

.oe-status-tag.completed {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.15));
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
}

/* 3x3 Grid of Execution Actions */
.oe-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(212, 175, 55, 0.18);
  padding: 1px;
}

.oe-action-tile {
  background: #0D1424;
  border: none;
  padding: 18px 8px 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  outline: none;
  position: relative;
  min-height: 98px;
}

.oe-action-tile:hover {
  background: linear-gradient(145deg, #151f33 0%, #1e1b4b 100%);
  transform: translateY(-3px);
  z-index: 2;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(212, 175, 55, 0.4);
}

.oe-action-tile:active {
  transform: translateY(0);
}

.oe-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(126, 18, 24, 0.12) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.oe-action-tile:hover .oe-icon-box {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(126, 18, 24, 0.25) 100%);
  border-color: var(--gold-primary);
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.oe-tile-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #cbd5e1;
  line-height: 1.25;
  letter-spacing: 0.2px;
  transition: color 0.15s ease;
}

.oe-action-tile:hover .oe-tile-title {
  color: var(--gold-light);
}

/* Dish Costing Modal Details */
.dish-costing-summary-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* =============================================================================
   ORDER BOOKING REPORTS HUB (Opened from Order Execution Launcher)
   Matching User Screenshot with Ultra-Premium Royal Burgundy & Gold Glassmorphism
   ============================================================================= */
.obr-view-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 40px;
}

/* 1. Top Customer / Event Selector Bar */
.obr-top-bar-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(11, 16, 27, 0.98) 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-xl);
  padding: 18px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(212, 175, 55, 0.2);
  backdrop-filter: blur(12px);
}

.obr-selector-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.obr-floating-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.obr-select-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.obr-select {
  flex: 1;
  min-width: 280px;
  background: #090e18;
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  color: #ffffff;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.obr-select:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.obr-event-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(126, 18, 24, 0.15) 100%);
  border: 1.2px solid rgba(212, 175, 55, 0.3);
  padding: 9px 18px;
  border-radius: 30px;
  font-size: 0.85rem;
  color: #E2E8F0;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  flex-wrap: wrap;
}

/* 2. Main Section Cards */
.obr-main-card {
  background: linear-gradient(145deg, #0F172A 0%, #090E1A 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--radius-xl);
  padding: 22px 26px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(212, 175, 55, 0.15);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.obr-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.2);
  padding-bottom: 16px;
}

.obr-card-title {
  font-size: 1.25rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  color: #FFFDF9;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.3px;
}

.obr-title-dot {
  font-size: 1.18rem;
}

.obr-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.obr-field-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 140px;
}

.obr-field-box label {
  font-size: 0.76rem;
  font-weight: 800;
  color: #D4AF37;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.obr-input-select {
  background: #080D18;
  border: 1.2px solid rgba(212, 175, 55, 0.3);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.obr-input-select:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3);
}

.obr-btn-notes {
  background: linear-gradient(135deg, #7E1218 0%, #4D0A0E 100%);
  color: #ffffff;
  border: 1.2px solid var(--gold-primary);
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(126, 18, 24, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
  align-self: flex-end;
}

.obr-btn-notes:hover {
  background: linear-gradient(135deg, #9B1A22 0%, #6E0F14 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35), 0 0 12px rgba(126, 18, 24, 0.5);
  border-color: #F8E2B0;
}

/* 3. Sub-Groups with Borders (Matching Screenshot) */
.obr-sub-group {
  border: 1.2px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  background: rgba(212, 175, 55, 0.02);
  position: relative;
  margin-top: 8px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
}

.obr-sub-group-header {
  position: absolute;
  top: -11px;
  left: 18px;
  background: #0F172A;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  padding: 1px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gold-light);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.4px;
}

.obr-sub-gear {
  color: var(--gold-light);
  cursor: pointer;
}

/* 4. Action Button Grids */
.obr-btn-grid {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.obr-btn-grid.four-col {
  grid-template-columns: repeat(4, 1fr);
}

.obr-btn-grid.three-col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1080px) {
  .obr-btn-grid.four-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .obr-btn-grid.four-col,
  .obr-btn-grid.three-col {
    grid-template-columns: 1fr;
  }
}

.obr-action-btn {
  background: linear-gradient(135deg, #182234 0%, #0F172A 100%);
  color: #F1F5F9;
  border: 1.2px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  line-height: 1.3;
}

.obr-action-btn:hover {
  background: linear-gradient(135deg, #7E1218 0%, #4D0A0E 100%);
  color: #FFFFFF;
  border-color: #D4AF37;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3), 0 0 12px rgba(126, 18, 24, 0.4);
}

.obr-action-btn:active {
  transform: translateY(0);
}

.obr-action-btn.fixed-width {
  width: 240px;
  max-width: 100%;
}

/* 5. Filter Action Rows (Labour & Agency) */
.obr-filter-action-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 16px;
  flex-wrap: wrap;
}

.obr-filter-action-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.obr-filters-triple {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
  flex: 1;
}

@media (max-width: 900px) {
  .obr-filters-triple {
    grid-template-columns: 1fr;
  }
  .obr-filter-action-row {
    flex-direction: column;
    align-items: stretch;
  }
  .obr-action-btn.fixed-width {
    width: 100%;
  }
}

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

.obr-row-action.dual-btn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 380px;
  max-width: 100%;
}

@media (max-width: 640px) {
  .obr-row-action.dual-btn {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

/* =============================================================================
   EVENT DETAILS POPUP (Executive Premium Layout & Unified Bottom Action Hub)
   ============================================================================= */
.detail-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.detail-overview-card {
  background: linear-gradient(135deg, rgba(21, 31, 50, 0.85), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.detail-card-tag {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-card-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.detail-card-info-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.detail-info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.detail-info-icon {
  font-size: 0.92rem;
  line-height: 1.3;
}

.detail-info-text strong {
  color: #f1f5f9;
}

/* Executive KPI Summary Strip */
.detail-kpi-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 800px) {
  .detail-kpi-summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.detail-kpi-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s ease;
}

.detail-kpi-box:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(212, 175, 55, 0.3);
}

.detail-kpi-lbl {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-kpi-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
}

.detail-kpi-val.highlight {
  color: #38bdf8;
}

.detail-kpi-val.gold {
  color: var(--gold-light);
}

.detail-kpi-val.success {
  color: #34d399;
}

.detail-kpi-val.pending {
  color: #fbbf24;
}

/* Section Header */
.detail-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.detail-section-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Meals List & Meal Cards (Clean & Button-Free!) */
.detail-meals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.detail-meal-card {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.75), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 4px solid #6366f1;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}

.detail-meal-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, rgba(21, 31, 50, 0.85), rgba(15, 23, 42, 0.95));
  transform: translateY(-1px);
}

.detail-meal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-meal-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-meal-icon {
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-meal-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.detail-meal-details-row {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.detail-meal-info-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-meal-info-cell strong {
  color: #f8fafc;
}

.detail-meal-metrics {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.meal-metric-chip {
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.meal-metric-chip strong {
  color: #f8fafc;
}

.meal-metric-chip.gold {
  color: var(--gold-light);
  border-color: rgba(212, 175, 55, 0.25);
  background: rgba(212, 175, 55, 0.07);
}

.meal-metric-chip.gold strong {
  color: #ffffff;
}

.meal-metric-chip.success {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.08);
  font-weight: 700;
}

.meal-metric-chip.pending {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.06);
}

/* =============================================================================
   EVENT DETAILS UNIFIED ACTION HUB (Bottom Footer Layout)
   ============================================================================= */
.event-details-action-hub {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

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

.action-hub-row.tier-execution {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.action-hub-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 145px;
}

.action-hub-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.action-hub-row.tier-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

.action-hub-buttons.left {
  justify-content: flex-start;
}

.action-hub-buttons.right {
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .action-hub-row.tier-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .action-hub-buttons.left,
  .action-hub-buttons.right {
    justify-content: stretch;
  }
  .action-hub-buttons.left button,
  .action-hub-buttons.right button {
    flex: 1;
  }
}

/* Primary Execution Buttons */
.btn-hub-action {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-hub-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.btn-hub-action:active {
  transform: translateY(0);
}

.btn-hub-action.primary-indigo {
  background: linear-gradient(135deg, #4f46e5, #3730a3);
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.35);
}

.btn-hub-action.primary-blue {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35);
}

.btn-hub-action.primary-amber {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.35);
}

.btn-hub-action.primary-purple {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35);
}

.btn-hub-action.primary-gold {
  background: linear-gradient(135deg, #d4af37, #996515);
  box-shadow: 0 3px 10px rgba(212, 175, 55, 0.35);
}

/* Secondary & Control Buttons */
.btn-hub-sub {
  font-family: inherit;
  font-size: 0.81rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-hub-sub:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-hub-sub.success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.25));
  border-color: rgba(16, 185, 129, 0.45);
  color: #34d399;
}

.btn-hub-sub.success:hover {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}

.btn-hub-sub.gold-outline {
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--gold-light);
}

.btn-hub-sub.gold-outline:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #ffffff;
}

.btn-hub-sub.danger {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

.btn-hub-sub.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ffffff;
}

.btn-hub-sub.done {
  font-weight: 800;
  background: #334155;
  color: #ffffff;
  border-color: #475569;
}

.btn-hub-sub.done:hover {
  background: #475569;
}

#modal-event-details .modal-container {
  max-width: 1120px;
  width: 95vw;
}

#event-details-footer {
  display: block;
  width: 100%;
  padding: 14px 22px;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96) 0%, rgba(10, 15, 29, 0.99) 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

/* =============================================================================
   ORDER MASTER VIEWS (Event Type & Diet Type Masters matching User Screenshot)
   ============================================================================= */
.master-table-card {
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
}

.master-header-card {
  background: #E8EEF5;
  padding: 16px 24px;
  border-bottom: 1px solid #CBD5E0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.master-header-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #334155;
  letter-spacing: -0.2px;
}

.master-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748B;
}

.master-breadcrumb span.active {
  color: #0F172A;
  font-weight: 700;
}

.master-controls-bar {
  background: #E8EEF5;
  padding: 0 24px 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.master-search-box {
  position: relative;
  width: 100%;
  max-width: 360px;
}

.master-search-box input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  font-size: 0.9rem;
  background: #FFFFFF;
  color: #1E293B;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.master-search-box input:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.master-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748B;
  pointer-events: none;
}

.btn-master-round-add {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  color: #FFFFFF;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35);
  transition: all 0.18s ease;
}

.btn-master-round-add:hover {
  transform: scale(1.08);
  background: linear-gradient(135deg, #2563EB, #1E40AF);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
}

/* Master iOS/Material Toggle Switch */
.master-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.master-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.master-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CBD5E1;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 34px;
}

.master-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #FFFFFF;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.master-toggle-switch input:checked + .master-toggle-slider {
  background-color: #3B82F6;
}

.master-toggle-switch input:checked + .master-toggle-slider:before {
  transform: translateX(20px);
}

/* Master Action Buttons (Edit & Delete) */
.btn-master-action {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-master-action.edit {
  color: #2563EB;
}

.btn-master-action.edit:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.2);
}

.btn-master-action.delete {
  color: #EF4444;
}

.btn-master-action.delete:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

/* =============================================================================
   GOOGLE MAPS & SMART ADDRESS AUTOCOMPLETE (Surat & Amreli Prioritized)
   ============================================================================= */
.geo-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  z-index: 9999;
  background: #0f172a;
  border: 1.5px solid rgba(99, 102, 241, 0.45);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  animation: fadeInDown 0.18s ease-out;
}

.geo-suggestion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.15s ease;
  gap: 10px;
}

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

.geo-suggestion-item:hover,
.geo-suggestion-item.active {
  background: rgba(99, 102, 241, 0.18);
}

.geo-item-left {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.geo-pin-icon {
  font-size: 1rem;
  line-height: 1.2;
  margin-top: 2px;
}

.geo-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.geo-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.geo-item-title {
  font-size: 0.88rem;
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.geo-city-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.geo-city-badge.city-surat {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.geo-city-badge.city-amreli {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.geo-city-badge.city-other {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.geo-item-address {
  font-size: 0.77rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.geo-map-preview-btn {
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.geo-map-preview-btn:hover {
  background: #10b981;
  color: #ffffff;
}

/* Live Google Maps Link Badge */
.gmap-badge-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.gmap-badge-link:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  transform: translateY(-1px);
}

.geo-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(30, 41, 59, 0.95);
  border-bottom: 1px solid rgba(99, 102, 241, 0.3);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 2;
}

.geo-dropdown-header-close {
  cursor: pointer;
  color: #94a3b8;
  font-size: 0.8rem;
  padding: 0 4px;
}
.geo-dropdown-header-close:hover {
  color: #ffffff;
}

.geo-category-tag {
  font-size: 0.65rem;
  font-weight: 600;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.15);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(99, 102, 241, 0.25);
}

.geo-suggestion-item.is-nearby {
  background: rgba(15, 23, 42, 0.92);
}
.geo-suggestion-item.is-nearby:hover {
  background: rgba(99, 102, 241, 0.22);
}