/* admin/css/style.css */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.section {
    display: none;
}

.section.active {
    display: block;
}

.toast {
    animation: slideUp 0.3s ease forwards;
}

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

#guest-search-results {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: white;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    z-index: 50;
}

#booking-modal .space-y-5 {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 8px;
}

/* =====================================================
   THEME SYSTEM (Light / Dark + Hotel Nav Accent)
   ===================================================== */

/* CSS variables for surfaces (used by dark mode + future extensions) */
:root {
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --text-primary: #111827;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --nav-bg: #ffffff;
    --nav-border: #e5e7eb;
}

.dark {
    --surface: #18181b;
    --surface-2: #27272a;
    --text-primary: #f4f4f5;
    --text-muted: #a1a1aa;
    --border: #3f3f46;
    --nav-bg: #18181b;
    --nav-border: #3f3f46;
}

/* Base dark mode improvements (helps even before every element has dark: classes) */
.dark body {
    background-color: #111113;
    color: var(--text-primary);
}

.dark .bg-white {
    background-color: var(--surface) !important;
}
.dark .bg-gray-50 {
    background-color: var(--surface-2) !important;
}

/* =====================================================
   NAV BAR — Hotel branded accent (only the top nav)
   ===================================================== */

nav.nav-branded {
    background: linear-gradient(90deg, var(--hotel-primary, #2563eb), var(--hotel-secondary, #1e40af));
    border-bottom-color: rgba(255,255,255,0.2);
    color: white;
}

nav.nav-branded .text-gray-500:not(#user-dropdown *),
nav.nav-branded .text-gray-600:not(#user-dropdown *) {
    color: rgba(255,255,255,0.75);
}

nav.nav-branded h1,
nav.nav-branded p {
    color: white;
}

/* Glassmorphism nav tabs when nav is branded (but NOT the buttons inside the floating dropdown) */
nav.nav-branded button:not(#user-dropdown *) {
    color: white;
}
nav.nav-branded button:not(#user-dropdown *):hover {
    background-color: rgba(255,255,255,0.18);
}
nav.nav-branded button:not(#user-dropdown *).bg-gray-100,
nav.nav-branded button:not(#user-dropdown *).bg-white {
    background-color: rgba(255,255,255,0.9);
    color: var(--hotel-primary, #2563eb);
}

/* User menu trigger area on branded nav (the clickable row, not the dropdown content) */
nav.nav-branded #user-menu-container > div:hover {
    background-color: rgba(255,255,255,0.15);
}

/* Ensure the user dropdown stays crisp when the nav bar is hotel-branded */
nav.nav-branded #user-dropdown {
    border-color: #d1d5db;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.15);
}

/* =====================================================
   DARK MODE — Form controls (selects, inputs, textareas)
   ===================================================== */

.dark select,
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Better focus ring in dark mode */
.dark select:focus,
.dark input:focus,
.dark textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    outline: none;
}

/* Placeholder text */
.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Select arrow / appearance tweaks (works in most modern browsers) */
.dark select {
    appearance: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23a1a1aa%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%27');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 2.25rem;
}

/* =====================================================
   DARK MODE — Flatpickr date picker
   ===================================================== */

.dark .flatpickr-calendar {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
}

.dark .flatpickr-months,
.dark .flatpickr-weekdays {
    background: var(--surface-2);
}

.dark .flatpickr-month {
    color: var(--text-primary);
}

.dark .flatpickr-weekday {
    color: var(--text-muted);
}

.dark .flatpickr-day {
    color: var(--text-primary);
}

.dark .flatpickr-day:hover {
    background: var(--surface-2);
}

.dark .flatpickr-day.selected,
.dark .flatpickr-day.startRange,
.dark .flatpickr-day.endRange,
.dark .flatpickr-day.selected:hover,
.dark .flatpickr-day.startRange:hover,
.dark .flatpickr-day.endRange:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.dark .flatpickr-day.today {
    border-color: #3b82f6;
    color: #3b82f6;
}

.dark .flatpickr-day.today.selected {
    background: #3b82f6;
    color: white;
}

.dark .flatpickr-prev-month svg,
.dark .flatpickr-next-month svg {
    fill: var(--text-muted);
}

.dark .flatpickr-prev-month:hover svg,
.dark .flatpickr-next-month:hover svg {
    fill: var(--text-primary);
}

.dark .flatpickr-current-month .numInputWrapper span.arrowUp:after,
.dark .flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-color: var(--text-muted);
}

/* =====================================================
   Fix for native <input type="date"> picker icon in dark mode
   (the calendar icon was invisible → picker appeared "broken")
   ===================================================== */

.dark input[type="date"] {
    padding-right: 2.5rem; /* make room for the icon */
}

.dark input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85) brightness(1.1);  /* turn the dark icon into a light one */
    opacity: 0.85;
    cursor: pointer;
    padding: 4px;
}

.dark input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background-color: rgba(255,255,255,0.08);
    border-radius: 4px;
}

/* Also handle the clear (x) button on date inputs if present */
.dark input[type="date"]::-webkit-clear-button {
    filter: invert(0.85);
}

/* =====================================================
   Trix rich text editor — Dark mode overrides
   (icons were black on black; content area needed contrast)
   ===================================================== */
.dark trix-toolbar {
  background-color: #18181b; /* zinc-900 */
  border-color: #3f3f46;
}

.dark .trix-button {
  color: #e4e4e7;
  border-color: #3f3f46;
}

.dark .trix-button:hover {
  background-color: #27272a;
}

.dark .trix-button--icon::before {
  filter: invert(0.9); /* Makes the black icon sprites light */
}

.dark .trix-button--icon.trix-active::before {
  filter: invert(0.95) brightness(1.2);
}

/* Editor content area */
.dark trix-editor {
  background-color: #18181b;
  color: #e4e4e7;
  border-color: #3f3f46;
}

.dark .trix-content {
  background-color: #18181b;
  color: #e4e4e7;
}

/* Links inside Trix content in dark mode */
.dark .trix-content a {
  color: #60a5fa;
}