/*
 * Blake Stays Design System
 * Coastal, clean, modern, welcoming
 */

/* Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* CSS Custom Properties */
:root {
  /* Primary colours */
  --color-ocean-deep: #1a4a6e;
  --color-ocean-mid: #2d6a8f;
  --color-sky-blue: #7cb9d4;
  --color-sky-light: #c5e4f3;
  
  /* Neutral colours */
  --color-sand: #e8dcc4;
  --color-sand-light: #f5f1e8;
  --color-warm-white: #fefcf9;
  
  /* Text colours */
  --color-text-primary: #1a4a6e;
  --color-text-secondary: #2d6a8f;
  --color-text-muted: #6b8a9e;
  
  /* Semantic colours */
  --color-success: #2e7d5a;
  --color-success-light: #e8f5e9;
  --color-warning: #c77d00;
  --color-warning-light: #fff3e0;
  --color-danger: #c0392b;
  --color-danger-light: #fdecea;
}

/* Base Typography */
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.font-outfit {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.3;
}

/* ========================================
   Blake Stays Color Utility Classes
   ======================================== */

/* Background Colors */
.bg-ocean-deep { background-color: var(--color-ocean-deep) !important; }
.bg-ocean-mid { background-color: var(--color-ocean-mid) !important; }
.bg-sky-blue { background-color: var(--color-sky-blue) !important; }
.bg-sky-light { background-color: var(--color-sky-light) !important; }
.bg-sand { background-color: var(--color-sand) !important; }
.bg-sand-light { background-color: var(--color-sand-light) !important; }
.bg-warm-white { background-color: var(--color-warm-white) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-success-light { background-color: var(--color-success-light) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-light { background-color: var(--color-warning-light) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-danger-light { background-color: var(--color-danger-light) !important; }

/* Text Colors */
.text-ocean-deep { color: var(--color-ocean-deep) !important; }
.text-ocean-mid { color: var(--color-ocean-mid) !important; }
.text-sky-blue { color: var(--color-sky-blue) !important; }
.text-sky-light { color: var(--color-sky-light) !important; }
.text-sand { color: var(--color-sand) !important; }
.text-sand-light { color: var(--color-sand-light) !important; }
.text-warm-white { color: var(--color-warm-white) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }

/* Border Colors */
.border-ocean-deep { border-color: var(--color-ocean-deep) !important; }
.border-ocean-mid { border-color: var(--color-ocean-mid) !important; }
.border-sky-blue { border-color: var(--color-sky-blue) !important; }
.border-sky-light { border-color: var(--color-sky-light) !important; }
.border-sand { border-color: var(--color-sand) !important; }
.border-sand-light { border-color: var(--color-sand-light) !important; }
.border-warm-white { border-color: var(--color-warm-white) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-danger { border-color: var(--color-danger) !important; }

/* Hover States */
.hover\:bg-ocean-mid:hover { background-color: var(--color-ocean-mid) !important; }
.hover\:bg-ocean-deep:hover { background-color: var(--color-ocean-deep) !important; }
.hover\:bg-sand-light:hover { background-color: var(--color-sand-light) !important; }
.hover\:text-ocean-deep:hover { color: var(--color-ocean-deep) !important; }
.hover\:text-ocean-mid:hover { color: var(--color-ocean-mid) !important; }
.hover\:opacity-80:hover { opacity: 0.8 !important; }
.hover\:opacity-90:hover { opacity: 0.9 !important; }

/* Focus States */
.focus\:border-sky-blue:focus { border-color: var(--color-sky-blue) !important; }
.focus\:ring-sky-blue:focus { --tw-ring-color: var(--color-sky-blue); }
.focus\:ring-sky-light:focus { --tw-ring-color: var(--color-sky-light); }

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
textarea,
select {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Focus States for Accessibility */
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-sand-light);
}

::-webkit-scrollbar-thumb {
  background: var(--color-sand);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-ocean-mid);
}

/* ========================================
   Dark Mode
   ======================================== */

html.dark {
  --color-bg: #0d2535;
  --color-surface: #1a3a52;
  --color-surface-raised: #1e4460;
  --color-text-primary: #f5f1e8;
  --color-text-secondary: #c5e4f3;
  --color-text-muted: #a8c5d8;
  --color-border: #2d5a7a;
}

/* Dark mode body */
html.dark body {
  background-color: var(--color-bg);
  color: var(--color-text-secondary);
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: var(--color-text-primary);
}

/* Dark mode background overrides */
html.dark .bg-sand-light { background-color: var(--color-bg) !important; }
html.dark .bg-warm-white { background-color: var(--color-surface) !important; }
html.dark .bg-white { background-color: var(--color-surface) !important; }
html.dark .bg-sand { background-color: var(--color-surface-raised) !important; }
html.dark .bg-ocean-deep { background-color: #0a1f2e !important; }
html.dark .bg-sky-light { background-color: rgba(124, 185, 212, 0.15) !important; }

/* Dark mode status badge backgrounds - preserve color variations */
html.dark .rounded-full.bg-sky-light { background-color: rgba(124, 185, 212, 0.25) !important; }
html.dark .rounded-full.bg-sand-light { background-color: rgba(232, 220, 196, 0.2) !important; }

/* Dark mode text overrides */
html.dark .text-ocean-deep { color: var(--color-text-primary) !important; }
html.dark .text-ocean-mid { color: var(--color-text-secondary) !important; }
html.dark .text-gray-600 { color: var(--color-text-muted) !important; }
html.dark .text-gray-700 { color: var(--color-text-secondary) !important; }
html.dark .text-gray-800 { color: var(--color-text-primary) !important; }
html.dark .text-gray-900 { color: var(--color-text-primary) !important; }

/* Dark mode border overrides */
html.dark .border-sand { border-color: var(--color-border) !important; }
html.dark .border-sand-light { border-color: var(--color-border) !important; }
html.dark .border-gray-200 { border-color: var(--color-border) !important; }
html.dark .border-gray-300 { border-color: var(--color-border) !important; }

/* Dark mode semantic colors - adjusted for visibility */
html.dark .bg-success-light { background-color: rgba(46, 125, 90, 0.25) !important; }
html.dark .bg-warning-light { background-color: rgba(199, 125, 0, 0.25) !important; }
html.dark .bg-danger-light { background-color: rgba(192, 57, 43, 0.35) !important; }

/* Dark mode hover states */
html.dark .hover\:bg-sand-light:hover { background-color: var(--color-surface-raised) !important; }
html.dark .hover\:text-ocean-deep:hover { color: var(--color-text-primary) !important; }

/* Dark mode visibility utilities */
.light-only { display: block; }
html.dark .light-only { display: none !important; }
.dark-only { display: none; }
html.dark .dark-only { display: block !important; }

/* Dark mode form inputs */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="tel"],
html.dark textarea,
html.dark select {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--color-text-muted);
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--color-sky-blue);
}

/* Dark mode scrollbar */
html.dark ::-webkit-scrollbar-track {
  background: var(--color-bg);
}

html.dark ::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--color-sky-blue);
}

/* ========================================
   Calendar Styles
   ======================================== */

/* Rate category colours for calendar cells */
.calendar-rate-sky-light { background-color: var(--color-sky-light); }
.calendar-rate-sky-blue { background-color: var(--color-sky-blue); }
.calendar-rate-sand { background-color: var(--color-sand); }
.calendar-rate-warning { background-color: var(--color-warning); }
.calendar-rate-danger { background-color: var(--color-danger); }
.calendar-rate-sand-light { background-color: var(--color-sand-light); }

/* Rate category background colours (lighter for day panel) */
.calendar-rate-bg-sky-light { background-color: rgba(197, 228, 243, 0.5); }
.calendar-rate-bg-sky-blue { background-color: rgba(124, 185, 212, 0.3); }
.calendar-rate-bg-sand { background-color: rgba(232, 220, 196, 0.5); }
.calendar-rate-bg-warning { background-color: rgba(199, 125, 0, 0.2); }
.calendar-rate-bg-danger { background-color: rgba(192, 57, 43, 0.2); }
.calendar-rate-bg-sand-light { background-color: rgba(245, 241, 232, 0.5); }

/* Rate bar (left border indicator) */
.calendar-day {
  position: relative;
}

.calendar-rate-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

/* Booking indicators */
.calendar-booking {
  position: relative;
}

.calendar-booking-badge {
  background-color: rgba(46, 125, 90, 0.2);
  color: var(--color-success);
}

html.dark .calendar-booking-badge {
  background-color: rgba(46, 125, 90, 0.3);
}

/* Arrival day gets a stronger background */
.calendar-booking-arrival {
  background-color: rgba(46, 125, 90, 0.35);
  border-left: 3px solid var(--color-success);
}

html.dark .calendar-booking-arrival {
  background-color: rgba(46, 125, 90, 0.45);
}

/* Arrival dot indicator */
.calendar-arrival-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-success);
  border-radius: 50%;
}

/* Occupancy heat map colours for year view */
.calendar-occupancy-0 { background-color: var(--color-sand-light); }
.calendar-occupancy-25 { background-color: var(--color-sky-light); }
.calendar-occupancy-50 { background-color: var(--color-sky-blue); }
.calendar-occupancy-75 { background-color: var(--color-ocean-mid); }
.calendar-occupancy-100 { background-color: var(--color-success); }

/* Slide panel animation */
.calendar-slide-panel {
  transition: transform 0.3s ease-out;
}

.calendar-panel-backdrop {
  background-color: rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease-out;
}

/* Dark mode calendar adjustments */
html.dark .calendar-rate-bg-sky-light { background-color: rgba(197, 228, 243, 0.15); }
html.dark .calendar-rate-bg-sky-blue { background-color: rgba(124, 185, 212, 0.15); }
html.dark .calendar-rate-bg-sand { background-color: rgba(232, 220, 196, 0.15); }
html.dark .calendar-rate-bg-warning { background-color: rgba(199, 125, 0, 0.2); }
html.dark .calendar-rate-bg-danger { background-color: rgba(192, 57, 43, 0.2); }
html.dark .calendar-rate-bg-sand-light { background-color: rgba(245, 241, 232, 0.1); }

html.dark .calendar-occupancy-0 { background-color: var(--color-surface-raised); }
html.dark .calendar-occupancy-25 { background-color: rgba(197, 228, 243, 0.3); }
html.dark .calendar-occupancy-50 { background-color: rgba(124, 185, 212, 0.4); }
html.dark .calendar-occupancy-75 { background-color: rgba(45, 106, 143, 0.6); }
html.dark .calendar-occupancy-100 { background-color: rgba(46, 125, 90, 0.7); }