/* Simple, clean UI */
:root{ --fg:#101418; --muted:#cbd5e1; --bg:#0f172a; --card:#111827; --accent:#22c55e; --danger:#ef4444; --warn:#f59e0b; --border:#1f2937; --disabled:#374151 }
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; color:#e5e7eb; background:#0b1221 }
.page{ padding:24px; }

.navbar{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#0d1326; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10 }
.navbar .brand{ font-weight:700; margin-right:12px }
.navbar a{ color:#e5e7eb; text-decoration:none; margin-right:12px }
.navbar .btn{ background:#1f2937; padding:8px 12px; border-radius:10px; }
.announcement-banner {
  background: linear-gradient(90deg, rgba(34,197,94,0.06), rgba(96,165,250,0.04));
  color: var(--text);
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
}
.announcement-banner .announcement-inner {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  will-change: transform;
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 15s; /* default, overridden by JS based on length */
}
.announcement-banner:hover .announcement-inner { animation-play-state: paused; }

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.muted{ color:var(--muted) }

.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 6px 20px rgba(0,0,0,.25); margin-bottom:16px }
.max-w-470{ max-width:420px; margin:0 auto }
.max-w-720{ max-width:720px; margin:0 auto}

.stack{ display:flex; flex-direction:column; gap:12px }
.grid{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid label{ display:flex; flex-direction:column; gap:6px }
label{ display:flex; flex-direction:column; gap:6px }

/* ========== Modern Controls ========== */

.slot-card .muted { color:var(--muted); }

/* Inputs / selects */
input, select {
  background:#0b1221;
  color:#e5e7eb;
  border:1px solid var(--border);
  border-radius:12px;
  /* Unified height with buttons */
  height:44px;
  padding:0 12px;
  font-size:14px;
  line-height:1;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder { color:var(--muted); }
select { padding-right:32px; } /* room for arrow */

input:focus, select:focus {
  border-color: rgba(34,197,94,.6);           /* --accent */
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);  /* focus ring */
}

/* Enhanced Date Input Styling */
.date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.date-input-wrapper input {
  padding-right: 50px; /* Make room for the icon */
  cursor: pointer;
  font-weight: 500;
}

.date-icon {
  position: absolute;
  right: 12px;
  color: #60a5fa;
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}

.input-help {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.required {
  color: #ef4444;
  font-weight: 600;
}

/* Always-visible Flatpickr Calendar Styling */
.flatpickr-calendar.inline {
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  margin-top: 8px;
  width: 100% !important;
}

.flatpickr-calendar.inline .flatpickr-months {
  background: var(--card);
  border-radius: 12px 12px 0 0;
}

.flatpickr-calendar.inline .flatpickr-month {
  background: var(--card);
  color: var(--text);
}

.flatpickr-calendar.inline .flatpickr-current-month {
  color: var(--text);
}

.flatpickr-calendar.inline .flatpickr-weekdays {
  background: var(--card);
}

.flatpickr-calendar.inline .flatpickr-weekday {
  color: var(--muted);
}

.flatpickr-calendar.inline .flatpickr-day {
  color: var(--text);
  border-radius: 6px;
}

.flatpickr-calendar.inline .flatpickr-day:hover {
  background: var(--bg);
  color: var(--text);
}

.flatpickr-calendar.inline .flatpickr-day.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.flatpickr-calendar.inline .flatpickr-day.disabled {
  color: #94a3b8;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.28);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Side-by-Side Booking Layout */
.booking-layout {
  display: grid;
  grid-template-columns: 1fr 740px;
  gap: 32px;
  max-width: 1300px;
  margin: 0 auto;
}

.booking-form-section {
  flex: 1;
}

.calendar-section {
  width: 740px;
}

.calendar-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  position: sticky;
  top: 20px;
  height: fit-content;
}

.calendar-card h2 {
  color: var(--text);
  margin: 0 0 12px 0;
  font-size: 1.8rem;
  font-weight: 600;
}

.calendar-subtitle {
  color: var(--muted);
  margin: 0 0 24px 0;
  font-size: 1rem;
}

.calendar-container {
  margin-bottom: 20px;
}

/* Legend positioned at top of the calendar for immediate visibility */
.calendar-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.calendar-legend .legend-label {
  font-weight: 700;
  color: var(--muted);
  margin-right: 8px;
  font-size: 14px;
}
.calendar-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--muted);
}
.calendar-legend .legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.calendar-legend .legend-color.disabled { background: var(--danger); }
.calendar-legend .legend-color.warning { background: var(--warn); }
.calendar-legend .legend-color.available { background: var(--accent); }

.selected-dates-display input {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1;
  outline: none;
  width: 100%;
  font-weight: 500;
}

.selected-dates-display input:focus {
  border-color: rgba(34,197,94,.6);
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

/* Enhanced Calendar Styling for Side Panel */
.calendar-section .flatpickr-calendar.inline {
  box-shadow: none;
  border: none;
  background: transparent;
  margin: 0;
  width: 100% !important;
  max-width: 100%;
}

/* Ensure internal Flatpickr containers expand to fill available width */
.calendar-section .flatpickr-calendar.inline .flatpickr-innerContainer,
.calendar-section .flatpickr-calendar.inline .flatpickr-wrapper,
.calendar-section .flatpickr-calendar.inline .flatpickr-months,
.calendar-section .flatpickr-calendar.inline .flatpickr-weekdays,
.calendar-section .flatpickr-calendar.inline .flatpickr-days {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-months {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: transparent;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 8px 10px;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-month {
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 0;
  display: flex;
  align-items: center;
  width: 100%;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-current-month {
  color: var(--text);
  font-size: 1.52rem;
  font-weight: 800;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  padding: 6px 10px;
}

/* Make nav buttons visible and lightweight */
.calendar-section .flatpickr-calendar.inline .flatpickr-prev,
.calendar-section .flatpickr-calendar.inline .flatpickr-next {
  background: transparent;
  color: var(--text);
  border: none;
  padding: 6px;
  margin: 0 4px;
  cursor: pointer;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-prev:hover,
.calendar-section .flatpickr-calendar.inline .flatpickr-next:hover {
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}


.calendar-section .flatpickr-calendar.inline .flatpickr-weekdays {
  background: transparent;
  margin-bottom: 12px;
  padding: 0;
  width: 100% !important;
  box-sizing: border-box;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-weekdaycontainer {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 24px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-weekday {
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  font-size: 1.24rem;
  padding: 13px 0 9px;
  letter-spacing: 0.02em;
  display: block;
  width: 100% !important;
}

/* Ensure weekday labels are individual blocks and centered */
.calendar-section .flatpickr-calendar.inline .flatpickr-weekday span,
.calendar-section .flatpickr-calendar.inline .flatpickr-weekdaylabel,
.calendar-section .flatpickr-calendar.inline .flatpickr-weekday > span {
  display: block;
  text-align: center;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-days {
  background: var(--bg);
  border-radius: 12px;
  padding: 18px 16px 22px;
  width: 100% !important;
  box-sizing: border-box;
}

.calendar-section .flatpickr-calendar.inline .dayContainer {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 16px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-day {
  color: var(--text);
  border-radius: 12px;
  font-size: 1.34rem;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 68px;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Give the inner calendar more room inside the card so the dark days panel can expand */
.calendar-card {
  padding: 32px;
}

/* Make sure each weekday cell centers its content and has horizontal padding */
.calendar-section .flatpickr-calendar.inline .flatpickr-weekday {
  justify-self: center;
}

/* Defensive: if weekday labels still run together, force separators */
.calendar-section .flatpickr-calendar.inline .flatpickr-weekday::after {
  content: none;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-day:hover {
  background: var(--border);
  color: var(--text);
}

.calendar-section .flatpickr-calendar.inline .flatpickr-day.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-day.disabled {
  color: #94a3b8;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.28);
  cursor: not-allowed;
  text-decoration: line-through;
  pointer-events: auto;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-day.booked-day {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #64748b;
  text-decoration: line-through;
}

/* Single booking (secondary) - yellow limited state (still selectable) */
.calendar-section .flatpickr-calendar.inline .flatpickr-day.warning-day {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #0b1221;
  text-decoration: none;
}

.calendar-section .flatpickr-calendar.inline .flatpickr-day.disabled:hover {
  background: rgba(239, 68, 68, 0.14);
  color: #64748b;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .booking-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .calendar-section {
    width: 100%;
    order: -1; /* Calendar appears above form on mobile */
  }

  .calendar-card {
    position: static;
  }
}

/* Full tooltip for calendar days (shows full title + booker) */
.calendar-tooltip {
  position: fixed;
  z-index: 1200;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  white-space: pre-wrap;
  max-width: 80vw;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
  display: none;
}

.calendar-tooltip strong { display:block; margin-bottom:6px; }

/* Buttons */
.btn, button.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;              /* consistent & bigger than before */
  padding:0 16px;
  border-radius:12px;
  border:1px solid transparent;
  background:#1f2937;
  color:#e5e7eb;
  font-weight:600;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition:background .15s ease, transform .03s ease, box-shadow .15s ease, border-color .15s ease;
}

.btn:hover { background:#2a3545; }
.btn:active { transform:translateY(1px); }
.btn:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgba(34,197,94,.2);
}

/* Variants */
.btn.primary {
  background: linear-gradient(180deg, #22c55e, #18a34a);
  color:#04120a;
  border-color: rgba(0,0,0,.08);
}
.btn.primary:hover {
  background: linear-gradient(180deg, #27d267, #169245);
}
.btn.primary:active { transform:translateY(1px); }

/* Make the primary button in small card forms stand out and fill width */
.card.max-w-420 form .btn.primary,
.card.max-w-420 > .btn.primary,
.card.max-w-420 .btn.primary {
  width: 100% !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(34,197,94,0.12) !important;
  display: inline-flex !important;
  justify-content: center !important;
}

/* Navbar primary (Register) should be visually consistent but compact */
.navbar .btn.primary {
  padding: 8px 12px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.btn.danger {
  background: linear-gradient(180deg, #ef4444, #c93434);
  color:#fff;
  border-color: rgba(0,0,0,.08);
}
.btn.danger:hover {
  background: linear-gradient(180deg, #f25555, #b92d2d);
}

.btn.warn {
  background: linear-gradient(180deg, #f59e0b, #d18207);
  color:#0d0d0d;
  border-color: rgba(0,0,0,.08);
}
.btn.warn:hover {
  background: linear-gradient(180deg, #ffab1a, #bf7606);
}

.btn.ghost {
  background: transparent;
  border-color: #2b3647;
  color:#e5e7eb;
}
.btn.ghost:hover {
  background:#141b2b;
}

/* Outline variant (nice for table actions like Edit/Delete) */
.btn.outline {
  background:transparent;
  color:#e5e7eb;
  border-color:#3a4558;
}
.btn.outline:hover {
  background:#141b2b;
  border-color:#4b5568;
}

/* Sizes */
.btn.sm { height:36px; padding:0 12px; border-radius:10px; font-size:13px; }
.btn.small { height:36px; padding:0 12px; border-radius:10px; font-size:13px; }
.btn.lg { height:48px; padding:0 18px; border-radius:14px; font-size:15px; }

/* Ensure the subtle copy link button is visible and interactive */
.copy-link-btn {
  color: var(--text) !important;
  background: transparent;
  border: none;
  opacity: 1 !important;
  cursor: pointer;
  padding: 0 8px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.copy-link-btn:hover {
  color: var(--text) !important;
  text-decoration: none;
  background: rgba(0,0,0,0.02);
  border-radius: 6px;
}

/* Disabled */
.btn[disabled], .btn.disabled {
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* Table action cell buttons */
.table .actions .btn { height:36px; padding:0 12px; }

/* Forms in admin panel: keep even spacing & alignment */
.grid label { display:flex; flex-direction:column; gap:6px; }
.grid input, .grid select, .grid .btn { width:100%; }

/* Calendar navigation controls */
.calendar-controls {
  display: flex;
  align-items: center;
  justify-content: center; /* centers the group above the calendar */
  gap: 16px;               /* <<< ensures spacing between all items */
  margin-bottom: 10px;     /* adds space below the controls */
}

.calendar-controls button {
  min-width: 70px;
}

#monthLabel {
  font-weight: 600;
  font-size: 1rem;
  min-width: 140px;  /* keeps it stable */
  text-align: center;
}


.note{ background:#0b1221; border:1px dashed var(--border); border-radius:10px; padding:12px; margin-top:12px }
.alert{ border-radius:10px; padding:12px; margin-bottom:12px; }
.alert.error{ background:#2a1a1a; border:1px solid var(--danger); color:#f87171; }
.alert.success{ background:#0a2c18; border:1px solid var(--success); color:#7cf09d; }

.table{ width:100%; border-collapse:collapse }
.table th,.table td{ border-bottom:1px solid var(--border); padding:8px 6px; text-align:left }
.table-wrap{ overflow:auto; max-height:480px }

.layout{ display:grid; grid-template-columns: 1fr 1.2fr; gap:16px }
.col{ min-width:0; margin-bottom:5px; }

.calendar{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; margin-bottom:12px; }
.calendar .day{ background:#0b1221; border:1px solid var(--border); border-radius:12px; padding:10px; text-align:center; cursor:pointer }
.calendar .day.muted{ color:#6b7280 }
.calendar .day.selected{ outline:2px solid var(--accent) }
.calendar-controls{ display:flex; align-items:center; justify-content:center; gap:12px }

.slot-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:8px; margin-bottom:5px;}
.slot-card{ border:1px solid var(--border); border-radius:12px; background:#0b1221; padding:10px; display:flex; flex-direction:column; gap:6px; margin-bottom:5px; }
.slot-card .time{ font-weight:700 }
.slot-card .status{ font-size:12px; color:var(--muted) }
.slot-card .status{ font-size:12px; color:var(--muted); }
.slot-card.available{ cursor:pointer }
.slot-card.unavailable{ opacity:.45; background:#0a0f1c }
.slot-card.pending{ border-color:var(--warn) }
.slot-card.mine{ outline:2px dashed var(--accent) }

.badge{ font-size:12px; padding:2px 8px; border-radius:999px; background:#1f2937; display:inline-block }
.badge.approved{ background:#052b15; color:#7cf09d }
.badge.pending{ background:#2b1f05; color:#facc15 }
.badge.denied{ background:#2b0505; color:#f87171 }
.badge.canceled{ background:#312e81; color:#c7d2fe }

.table .actions{ display:flex; gap:6px }
.hidden{ display:none }

/* ===== Tables (auto-size by content) ===== */
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;        /* let columns size to content */
}
.table th, .table td {
  border-bottom:1px solid var(--border);
  padding:8px 6px;
  text-align:left;
  vertical-align: top;       /* align multi-line cells nicely */
  word-break: break-word;    /* prevent overflow on long words */
  white-space: normal;       /* allow wrapping */
}

/* Keep the scroll if needed; remove max-height if you want the whole table visible */
.table-wrap {
  overflow:auto;
  max-height:480px;          /* adjust/remove if you want it taller */
}

/* ===== Navbar ===== */
.navbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:#0d1326; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:1000;  /* higher z-index so dropdown overlays content */
}
.navbar .brand{ font-weight:700; margin-right:12px }
.navbar a{ color:#e5e7eb; text-decoration:none; margin-right:12px }
.navbar .right{ display:flex; align-items:center; gap:12px }

/* ===== Notifications ===== */
.notif-wrap{ position:relative; display:inline-block; }
.notif-btn{ position:relative; }
.notif-btn .bell{ font-size:18px; line-height:1; }

/* red badge */
.notif-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 5px;
  background:#ef4444; color:#fff; border-radius:999px; font-size:12px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--nav-bg);
}

/* dropdown anchored to .notif-wrap */
.notif-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:#0b1221; color:#e5e7eb;
  border:1px solid var(--border); border-radius:12px;
  width:360px; max-height:400px; overflow:auto; box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:8px;
}
.notif-header{ display:flex; align-items:center; justify-content:space-between; padding:6px 6px 8px 6px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.notif-list{ display:flex; flex-direction:column; gap:8px; padding:6px; }
.notif-item{ padding:8px; border:1px solid var(--border); border-radius:10px; background:#0f172a; }
.notif-item .time{ font-size:12px; color:var(--muted); margin-top:4px; }
.notif-item .time{ font-size:12px; color:var(--muted); margin-top:4px; }

.hidden{ display:none }

/* ===== Theme variables ===== */
:root {
  --bg:           #f8fafc;
  --text:         #0f172a;
  --muted:        #475569;
  --card:         #ffffff;
  --border:       #e2e8f0;
  --nav-bg:       #ffffff;
  --accent:       #2563eb;
  --danger:       #dc2626;
  --success:      #16a34a;
  --dropdown:     #ffffff;
  --slot-available: #e8f5ee;
  --slot-unavailable: #f5e8e8;
}

/* Optional dark theme override */
html[data-theme="dark"] {
  --bg:           #0b1120;
  --text:         #e5e7eb;
  --muted:        #cbd5e1;
  --card:         #0f172a;
  --border:       #233048;
  --nav-bg:       #0d1326;
  --accent:       #3b82f6;
  --danger:       #ef4444;
  --success:      #22c55e;
  --dropdown:     #0b1221;
  --slot-available: #0a2c18;
  --slot-unavailable: #2a1a1a;
}

/* Smooth color transitions */
html, body, .navbar, .card, .notif-dropdown, .table, .slot-card, .btn, .day, .calendar {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ===== Base colors driven by variables ===== */
html, body { background: var(--bg); color: var(--text); }

.navbar{
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
}
.navbar a{ color: var(--text); }

.page { color: var(--text); }

.card{
  background: var(--card);
  border: 1px solid var(--border);
}

.muted { color: var(--muted); }

.table th, .table td {
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* Buttons */
.btn { color: var(--text); border: 1px solid var(--border); background: transparent; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.danger  { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.outline { background: transparent; }
.btn.ghost { background: transparent; border-color: transparent; }

/* Notifications dropdown */
.notif-dropdown{
  background: var(--dropdown);
  border: 1px solid var(--border);
}
.notif-item{ background: var(--card); border: 1px solid var(--border); }

/* Admin dropdown menu */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}

.dropdown-toggle:hover {
  background: var(--bg);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 200px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  z-index: 1000;
  margin-top: 4px;
}

.dropdown-menu a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  margin: 4px 8px;
  transition: background-color 0.15s ease;
}

.dropdown-menu a:hover {
  background: var(--bg);
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* Calendar + Slots */
.calendar { background: var(--card); border: 1px solid var(--border); }
.day { border: 1px solid var(--border); color: var(--text); }
.day.muted { color: var(--muted); }
.day.selected { outline: 2px solid var(--accent); }
.slot-card { background: var(--card); border: 1px solid var(--border); color: var(--text); }
.slot-card.available { background: var(--slot-available); }
.slot-card.unavailable { background: var(--slot-unavailable); opacity: .7; }

/* Inputs/selects inherit theme */
input, select, textarea{
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
}
input::placeholder, textarea::placeholder { color: var(--muted); }

/* Tooltip adapts */
.field-tooltip{
  background: var(--nav-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Navbar spacing for controls (from earlier) */
.navbar .right{ display:flex; align-items:center; gap:12px }
.theme-btn { font-size: 18px; line-height: 1; }

/* Keep calendar nav button text always white, regardless of theme */
.calendar-controls .btn {
  color: #fff !important;
}

/* If you’re using .outline/.ghost for those buttons and want them white too: */
.calendar-controls .btn.outline,
.calendar-controls .btn.ghost {
  color: #fff !important;
}

/* ==== Lock calendar "date cards" text color (does not change by theme) ==== */

/* Day cells */
.calendar .day {
  color: #fff !important;            /* keep day numbers white */
}

/* Grayed (outside-month) days */
.calendar .day.muted {
  color: rgba(255,255,255,0.5) !important;
}

/* Selected day */
.calendar .day.selected {
  color: #fff !important;
}

/* In case your markup wraps the number in a child span */
.calendar .day span,
.calendar .day .num {
  color: inherit !important;
}

/* ==== Keep Logout button text color fixed (white), regardless of theme ==== */
.navbar .btn[href*="logout.php"] {
  color: #fff !important;
}

/* If you also want to fix its background, add this: */
.navbar .btn[href*="logout.php"] {
  background: #ef4444 !important; /* red */
  border-color: #ef4444 !important;
  color: #fff !important;
}

/* ===== Modal ===== */
#appModal{ position:fixed; inset:0; display:none; z-index:1100; }
#appModal.show{ display:block; }
#appModal .modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.5);
}
#appModal .modal-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: min(560px, 92vw);
  background: var(--card); color: var(--text);
  border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
#appModal .modal-head, #appModal .modal-foot{
  padding:12px 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border);
}
#appModal .modal-foot{ border-top:1px solid var(--border); border-bottom:none; justify-content:flex-end; }
#appModal .modal-body{ padding:14px; }
.grid.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 560px){ .grid.grid-2{ grid-template-columns: 1fr; } }

/* ===== New Zoom Scheduler Styles ===== */

/* Alerts */
.alert{ border-radius:10px; padding:12px; margin-bottom:12px; }
.alert.error{ background:#2a1a1a; border:1px solid var(--danger); color:#f87171; }
.alert.success{ background:#0a2c18; border:1px solid var(--success); color:#7cf09d; }

/* Dashboard */
.dashboard-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:16px; margin-top:24px; }
.dashboard-card{ background:#0b1221; border:1px solid var(--border); border-radius:12px; padding:20px; text-align:center; }
.dashboard-card h3{ margin-top:0; color:#e5e7eb; }
.dashboard-card p{ color:var(--muted); margin-bottom:16px; }
.dashboard-card p{ color:var(--muted); margin-bottom:16px; }

/* Admin Panel */
.admin-container{ display:flex; gap:24px; }
.admin-sidebar{ width:250px; flex-shrink:0; }
.admin-sidebar h2{ margin-top:0; }
.admin-nav{ display:flex; flex-direction:column; gap:8px; }
.admin-nav a{ padding:12px 16px; border-radius:8px; text-decoration:none; color:#e5e7eb; transition:background .2s; }
.admin-nav a:hover, .admin-nav a.active{ background:#1f2937; }
.admin-content{ flex:1; }

.stats-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-bottom:32px; }
.stat-card{ background:#0b1221; border:1px solid var(--border); border-radius:12px; padding:20px; text-align:center; }
.stat-card h3{ margin:0 0 8px 0; color:var(--muted); font-size:14px; }
.stat-card h3{ margin:0 0 8px 0; color:var(--muted); font-size:14px; }
.stat-number{ font-size:32px; font-weight:700; color:#22c55e; }

.table-container{ background:#0b1221; border:1px solid var(--border); border-radius:12px; padding:20px; }
.admin-table{ width:100%; border-collapse:collapse; }
.admin-table th, .admin-table td{ padding:12px; text-align:left; border-bottom:1px solid var(--border); }
.admin-table th{ background:#1f2937; font-weight:600; }
.admin-table tr:hover{ background:#141b2b; }

.role-badge, .status-badge, .account-badge{ padding:4px 8px; border-radius:12px; font-size:12px; font-weight:500; }
.role-user{ background:#1e40af; color:#dbeafe; }
.role-admin{ background:#7c2d12; color:#fed7aa; }
.status-pending{ background:#f59e0b; color:#0c0a09; }
.status-confirmed{ background:#22c55e; color:#052e16; }
.status-cancelled{ background:#ef4444; color:#fef2f2; }
.account-primary{ background:#3b82f6; color:#eff6ff; }
.account-secondary{ background:#7c3aed; color:#f3e8ff; }

/* Booking Form */
.booking-form{ max-width:600px; }
.booking-form .form-section{
  margin-bottom:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.booking-form .form-section h3{ margin:0 0 2px 0; color:var(--text); }
.booking-form .form-section > label{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  color:var(--text);
  font-weight:600;
}
.booking-form .form-section input,
.booking-form .form-section select,
.booking-form .form-section textarea{
  margin-top:2px;
}
.booking-form .form-section textarea{
  min-height:96px;
  padding:10px 12px;
  line-height:1.4;
  resize:vertical;
}
.time-selection{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.booking-form .time-selection label{ gap:8px; }
.availability-status{ margin-top:12px; }
.availability-status p{ margin:0; padding:8px 12px; border-radius:6px; }
.available{ background:#0a2c18; border:1px solid #22c55e; color:#7cf09d; }
.unavailable{ background:#2a1a1a; border:1px solid #ef4444; color:#f87171; }
.checking{ background:#1f2937; border:1px solid #f59e0b; color:#fbbf24; }
.partial{ background:#2a2a1a; border:1px solid #f59e0b; color:#fbbf24; }
.error{ background:#2a1a1a; border:1px solid #ef4444; color:#f87171; }

/* Bookings List */
.bookings-list{ display:flex; flex-direction:column; gap:16px; }
.booking-item{ background:#0b1221; border:1px solid var(--border); border-radius:12px; padding:20px; }
.booking-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.booking-header h3{ margin:0; color: var(--text); font-weight:700; }
.status{ padding:4px 8px; border-radius:12px; font-size:12px; font-weight:500; }
.status-pending{ background:#f59e0b; color:#0c0a09; }
.status-confirmed{ background:#22c55e; color:#052e16; }
.status-cancelled{ background:#ef4444; color:#fef2f2; }
.booking-details p{ margin:4px 0; color:var(--muted); }
.booking-details p{ margin:4px 0; color:var(--muted); }
.booking-actions{ margin-top:12px; }

/* Empty State */
.empty-state{ text-align:center; padding:40px 20px; }
.empty-state p{ color:var(--muted); margin-bottom:20px; }
.empty-state p{ color:var(--muted); margin-bottom:20px; }

/* Navbar updates */
.navbar .user-info{ color:var(--muted); margin-right:12px; }
.navbar .user-info{ color:var(--muted); margin-right:12px; }
.navbar .logout{ background:#ef4444 !important; border-color:#ef4444 !important; color:#fff !important; }

/* Responsive */
@media (max-width: 768px){
  .admin-container{ flex-direction:column; }
  .admin-sidebar{ width:100%; }
  .dashboard-grid{ grid-template-columns: 1fr; }
  .time-selection{ grid-template-columns: 1fr; }
}

/* Calendar booked dates styling */
.flatpickr-calendar .flatpickr-day.booked,
.flatpickr-calendar .flatpickr-day.booked:hover,
.flatpickr-calendar .flatpickr-day.booked.disabled {
  background: #dc2626 !important;
  color: white !important;
  border: 2px solid #b91c1c !important;
  position: relative !important;
  cursor: not-allowed !important;
}

.flatpickr-calendar .flatpickr-day.booked::after {
  content: "🚫" !important;
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  font-size: 10px !important;
}

/* Calendar legend */
.calendar-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 14px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #374151;
}

.legend-color.disabled {
  background: #ef4444;
  color: #fff;
  border-color: rgba(239,68,68,0.6);
}

.legend-color.available {
  background: #0b1221;
}

.legend-color.warning {
  background: #f59e0b;
  border-color: rgba(245,158,11,0.5);
}

/* Zoom Status */
.zoom-status {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.zoom-connected {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}

.zoom-disconnected {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.zoom-icon {
  font-size: 18px;
}

.zoom-status .btn.small {
  padding: 6px 12px;
  font-size: 12px;
  height: auto;
}

/* Booking Items */
.bookings-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.booking-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.booking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.booking-header h3 {
  margin: 0;
  color: var(--text);
  font-weight:700;
}

.status {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-pending {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.status-confirmed {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.status-cancelled {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.booking-details p {
  margin: 4px 0;
  color: var(--muted);
}

.zoom-meeting-info {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
}

.zoom-meeting-info h4 {
  margin: 0 0 8px 0;
  color: #22c55e;
}

.zoom-links {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.zoom-links .btn.small {
  padding: 6px 12px;
  font-size: 12px;
  height: auto;
}

.booking-actions {
  margin-top: 12px;
}

.empty-state {
  text-align: center;
  padding: 32px;
  color: var(--muted);
}

/* Admin Panel Styles */
.admin-container {
  display: flex;
  gap: 24px;
  margin-top: 24px;
}

.admin-sidebar {
  width: 250px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  height: fit-content;
}

.admin-sidebar h2 {
  margin: 0 0 16px 0;
  color: #22c55e;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-nav a {
  padding: 12px 16px;
  color: #e5e7eb;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.2s;
}

.admin-nav a:hover,
.admin-nav a.active {
  background: var(--accent);
  color: #0f172a;
}

.admin-content {
  flex: 1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.stat-card h3 {
  margin: 0 0 8px 0;
  color: var(--muted);
  font-size: 14px;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #22c55e;
}

.table-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.table-header h2 {
  margin: 0;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.admin-table th {
  background: #0d1326;
  font-weight: 600;
  color: #e5e7eb;
}

.admin-table tr:hover {
  background: rgba(34, 197, 94, 0.05);
}

.role-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.role-user {
  background: #22c55e;
  color: #0f172a;
}

.role-admin {
  background: #f59e0b;
  color: #0f172a;
}

.btn.sm {
  padding: 6px 12px;
  font-size: 12px;
  height: auto;
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  color: #22c55e;
}

.modal-close {
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
}

.modal-close:hover {
  color: #ef4444;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  color: #e5e7eb;
  font-weight: 500;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}

#addUserForm {
  padding: 20px;
}

/* SweetAlert2 Custom Styles */
.swal-form {
  text-align: left;
}

.swal-form-group {
  margin-bottom: 16px;
}

.swal-form-group label {
  display: block;
  margin-bottom: 6px;
  color: #e5e7eb !important;
  font-weight: 500;
  font-size: 14px;
}

.swal2-input,
.swal2-select {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid #1f2937 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #0b1221 !important;
  color: #e5e7eb !important;
}

.swal2-input:focus,
.swal2-select:focus {
  border-color: #22c55e !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}

.swal2-input::placeholder {
  color: #6b7280 !important;
}

/* Dark theme for SweetAlert2 */
.swal-dark-popup {
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 16px !important;
}

.swal-dark-title {
  color: #22c55e !important;
  font-weight: 600 !important;
}

.swal-dark-content {
  color: #e5e7eb !important;
}

.swal-dark-confirm {
  background: #22c55e !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
}

.swal-dark-confirm:hover {
  background: #16a34a !important;
}

.swal-dark-cancel {
  background: #6b7280 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
}

.swal-dark-cancel:hover {
  background: #4b5563 !important;
}

.swal2-validation-message {
  background: #1f2937 !important;
  color: #ef4444 !important;
  border: 1px solid #ef4444 !important;
}

/* Override SweetAlert2 icons for dark theme */
.swal2-icon.swal2-warning {
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

.swal2-icon.swal2-info {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
}

/* Strong overrides to ensure booking headers and copy buttons are readable */
.booking-item .booking-header h3,
.card .booking-item .booking-header h3 {
  color: var(--text) !important;
  opacity: 1 !important;
}

.zoom-links .copy-link-btn,
.booking-item .copy-link-btn {
  color: var(--text) !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.zoom-links .copy-link-btn::selection { background: rgba(34,197,94,0.12); }

/* Center auth pages (login/register) vertically and horizontally */
body.auth-page .page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

/* Make .note inside the small auth card neutral and center its button */
.card.max-w-420 .note {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 12px !important;
  text-align: center !important;
}

/* Override earlier rule that made all .btn.primary inside .card full-width */
.card.max-w-420 .note .btn.primary {
  width: auto !important;
  display: inline-flex !important;
  justify-content: center !important;
  padding: 12px 28px !important;
  margin: 0 auto !important;
}

/* Subtle animated background for auth pages (non-distracting) */
body.auth-page {
  position: relative;
  overflow: hidden;
}

body.auth-page .page { position: relative; z-index: 1; }

body.auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* stronger, more visible gradient but still low-contrast */
  background: linear-gradient(120deg, rgba(37,99,235,0.12) 0%, rgba(99,102,241,0.10) 35%, rgba(34,197,94,0.10) 100%);
  background-size: 200% 200%;
  filter: saturate(1.05) blur(12px) contrast(1);
  animation: authBgShift 12s ease infinite;
}

body.auth-page::after {
  content: "";
  position: fixed;
  inset: -30% -10% auto -10%;
  height: 70vh;
  z-index: 0;
  pointer-events: none;
  /* brighter, larger blobs */
  background: radial-gradient(circle at 15% 25%, rgba(37,99,235,0.18), transparent 24%), radial-gradient(circle at 85% 75%, rgba(34,197,94,0.14), transparent 26%), radial-gradient(circle at 50% 10%, rgba(99,102,241,0.08), transparent 20%);
  transform: translate3d(0,0,0);
  filter: blur(28px) opacity(.98);
  animation: authBlobs 20s ease-in-out infinite;
}

@keyframes authBgShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes authBlobs {
  0% { transform: translateY(0) scale(1); opacity: .98; }
  50% { transform: translateY(-6%) scale(1.06); opacity: .9; }
  100% { transform: translateY(0) scale(1); opacity: .98; }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-page::before,
  body.auth-page::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Elevate the auth card so it reads clearly above the animated background */
.card.max-w-420 {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 18px 50px rgba(2,6,23,0.16) !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
}

/* Increase padding for auth card to give the login form more breathing room */
.card.max-w-420 {
  padding: 40px 44px !important;
}

/* Styled register link inside auth card */
.auth-register-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
}
.auth-register-link:hover { text-decoration: underline; background: rgba(37,99,235,0.04); }