/* Custom styles have been moved into the tailwind.config script in index.html.
  This file is for global styles that are not covered by Tailwind's utility classes.
*/

* {
    touch-action: manipulation;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Base font and color settings */
body {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #f8fafc;
    color: #172940;
    font-size: 16px; /* Prevents zoom on iOS */
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

#app {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Base heading styles */
h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}

button, a.button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
}

button:active {
    transform: scale(0.98);
}

input, select, textarea {
    font-size: 16px; /* Prevents zoom */
}

.modal-content {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dashboard-specific styles */
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* ==========================================================================
   DARK MODE
   Comprehensive dark theme using CSS overrides on Tailwind utility classes.
   Palette: warm slate tones with gold (#c4a265) and blue (#6ba0d6) accents.
   ========================================================================== */

/* --- Design tokens (CSS custom properties) --- */
html.dark {
    --dm-bg-base:      #0d1117;
    --dm-bg-surface:   #161b22;
    --dm-bg-raised:    #1c2333;
    --dm-bg-overlay:   #242d3d;
    --dm-bg-inset:     #0d1117;
    --dm-border:       #2a3345;
    --dm-border-light: #222b3a;
    --dm-text:         #e2e8f0;
    --dm-text-secondary: #8b9bb4;
    --dm-text-muted:   #5a6a82;
    --dm-gold:         #c4a265;
    --dm-blue:         #6ba0d6;
    --dm-shadow:       0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
}

/* --- Base --- */
html.dark body {
    background-color: var(--dm-bg-base);
    color: var(--dm-text);
}

html.dark .app-loading {
    background: var(--dm-bg-base);
}

html.dark .app-loading-spinner {
    border-color: var(--dm-border);
    border-top-color: var(--dm-gold);
}

/* --- Surfaces (cards, panels, header, nav, modals) --- */
html.dark .bg-white {
    background-color: var(--dm-bg-surface) !important;
}
html.dark .bg-gray-50 {
    background-color: var(--dm-bg-base) !important;
}
html.dark .bg-gray-100 {
    background-color: var(--dm-bg-raised) !important;
}
html.dark .bg-gray-200 {
    background-color: var(--dm-bg-overlay) !important;
}

/* Shadow adaptation */
html.dark .shadow-md,
html.dark .shadow-lg {
    box-shadow: var(--dm-shadow) !important;
}

/* --- Borders --- */
html.dark .border-gray-100 {
    border-color: var(--dm-border-light) !important;
}
html.dark .border-gray-200 {
    border-color: var(--dm-border) !important;
}
html.dark .border-gray-300 {
    border-color: var(--dm-border) !important;
}

/* --- Text colors --- */
html.dark .text-dark {
    color: var(--dm-text) !important;
}
html.dark .text-gray-400 {
    color: var(--dm-text-muted) !important;
}
html.dark .text-gray-500 {
    color: var(--dm-text-secondary) !important;
}
html.dark .text-gray-600 {
    color: var(--dm-text-secondary) !important;
}
html.dark .text-gray-700 {
    color: #b0bdd0 !important;
}
html.dark .text-gray-800 {
    color: var(--dm-text) !important;
}
html.dark .text-gray-900 {
    color: var(--dm-text) !important;
}
html.dark .text-dark\/60 {
    color: var(--dm-text-secondary) !important;
}

/* Brand color adjustments for legibility */
html.dark .text-primary {
    color: var(--dm-blue) !important;
}
html.dark .text-gold {
    color: var(--dm-gold) !important;
}

/* --- Header & Nav hover --- */
html.dark header {
    background-color: var(--dm-bg-surface) !important;
    border-bottom: 1px solid var(--dm-border);
}
html.dark nav.sticky {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
}
html.dark .hover\:bg-gray-100:hover {
    background-color: var(--dm-bg-raised) !important;
}
html.dark .hover\:bg-gray-50:hover {
    background-color: var(--dm-bg-raised) !important;
}

/* Nav tab inactive */
html.dark .nav-tab.text-gray-600 {
    color: var(--dm-text-secondary) !important;
}
html.dark .nav-tab.text-gray-600:hover {
    background-color: var(--dm-bg-raised) !important;
    color: var(--dm-text) !important;
}

/* --- Dashboard gradient cards --- */
html.dark .from-blue-50 {
    --tw-gradient-from: #131d30 !important;
}
html.dark .to-blue-100 {
    --tw-gradient-to: #17223a !important;
}
html.dark .from-green-50 {
    --tw-gradient-from: #111f1b !important;
}
html.dark .to-green-100 {
    --tw-gradient-to: #142720 !important;
}
html.dark .from-purple-50 {
    --tw-gradient-from: #1a1430 !important;
}
html.dark .to-purple-100 {
    --tw-gradient-to: #1e1838 !important;
}
html.dark .from-orange-50 {
    --tw-gradient-from: #211a11 !important;
}
html.dark .to-orange-100 {
    --tw-gradient-to: #29201a !important;
}

/* Dashboard card accent text */
html.dark .text-blue-600 {
    color: #60a5fa !important;
}
html.dark .text-green-600 {
    color: #4ade80 !important;
}
html.dark .text-purple-600 {
    color: #a78bfa !important;
}
html.dark .text-orange-600 {
    color: #fb923c !important;
}
html.dark .text-red-600 {
    color: #f87171 !important;
}

/* --- Status badges (pill-style) — desaturated for dark bg --- */
html.dark .bg-green-100 { background-color: #132a1f !important; }
html.dark .bg-green-200 { background-color: #1a3528 !important; }
html.dark .text-green-800 { color: #6ee7b7 !important; }
html.dark .text-green-700 { color: #6ee7b7 !important; }

html.dark .bg-blue-100 { background-color: #142438 !important; }
html.dark .bg-blue-200 { background-color: #1a2e48 !important; }
html.dark .text-blue-800 { color: #93c5fd !important; }
html.dark .text-blue-700 { color: #93c5fd !important; }

html.dark .bg-yellow-100 { background-color: #28220e !important; }
html.dark .bg-yellow-200 { background-color: #332b14 !important; }
html.dark .text-yellow-800 { color: #fde68a !important; }

html.dark .bg-orange-100 { background-color: #271c0f !important; }
html.dark .bg-orange-200 { background-color: #33230f !important; }
html.dark .text-orange-800 { color: #fdba74 !important; }

html.dark .bg-red-100 { background-color: #2a1215 !important; }
html.dark .bg-red-200 { background-color: #351a1c !important; }
html.dark .text-red-800 { color: #fca5a5 !important; }
html.dark .text-red-700 { color: #fca5a5 !important; }

html.dark .bg-purple-100 { background-color: #1d1430 !important; }
html.dark .bg-purple-200 { background-color: #251a3a !important; }
html.dark .text-purple-800 { color: #c4b5fd !important; }

html.dark .bg-gray-100 { background-color: var(--dm-bg-raised) !important; }
html.dark .bg-gray-200 { background-color: var(--dm-bg-overlay) !important; }

/* --- Alert/notification banners --- */
html.dark .bg-red-50 {
    background-color: #1f1215 !important;
    border-color: #5c2628 !important;
}
html.dark .bg-green-50 {
    background-color: #0f1f17 !important;
    border-color: #1e4a34 !important;
}
html.dark .bg-blue-50 {
    background-color: #0f1926 !important;
    border-color: #1e3a5f !important;
}
html.dark .bg-yellow-50 {
    background-color: #1a1708 !important;
    border-color: #4a3f14 !important;
}

/* --- Forms (inputs, selects, textareas) --- */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: var(--dm-bg-base) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--dm-text-muted) !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--dm-gold) !important;
    box-shadow: 0 0 0 1px var(--dm-gold) !important;
}
html.dark input[readonly] {
    background-color: var(--dm-bg-raised) !important;
    color: var(--dm-text-secondary) !important;
}

/* Labels */
html.dark .text-sm.font-medium.text-gray-700 {
    color: var(--dm-text-secondary) !important;
}

/* --- Tables --- */
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dm-border) !important;
}
html.dark th {
    background-color: var(--dm-bg-raised) !important;
    color: var(--dm-text-secondary) !important;
}
html.dark tbody tr:hover {
    background-color: var(--dm-bg-raised) !important;
}

/* --- Modals --- */
html.dark .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* --- Villa card gradients (status-based, applied via JS) --- */
html.dark .from-transparent {
    --tw-gradient-from: transparent !important;
}
html.dark .to-green-100 {
    --tw-gradient-to: #11261c !important;
}
html.dark .to-blue-100 {
    --tw-gradient-to: #111d30 !important;
}
html.dark .to-yellow-100 {
    --tw-gradient-to: #221e0e !important;
}
html.dark .to-purple-100 {
    --tw-gradient-to: #1a1430 !important;
}
html.dark .to-gray-100 {
    --tw-gradient-to: var(--dm-bg-raised) !important;
}

/* Asset card operational gradient */
html.dark .from-green-100 {
    --tw-gradient-from: #0f2018 !important;
}
html.dark .to-white {
    --tw-gradient-to: var(--dm-bg-surface) !important;
}

/* --- Tenant info panel blue tint --- */
html.dark .bg-blue-50 {
    background-color: #0f1926 !important;
}
html.dark .border-blue-500 {
    border-color: #3b82f6 !important;
}

/* --- Button hover variants --- */
html.dark .hover\:bg-red-50:hover {
    background-color: #1f1215 !important;
}
html.dark .hover\:bg-gray-300:hover {
    background-color: var(--dm-bg-overlay) !important;
}
html.dark .bg-gray-200.text-gray-700 {
    background-color: var(--dm-bg-overlay) !important;
    color: var(--dm-text-secondary) !important;
}

/* --- Footer --- */
html.dark footer {
    background-color: var(--dm-bg-surface) !important;
    border-top: 1px solid var(--dm-border);
}

/* --- Facility legend chips --- */
html.dark .bg-primary\/10 {
    background-color: rgba(28, 77, 140, 0.15) !important;
}
html.dark .border-primary\/20 {
    border-color: rgba(28, 77, 140, 0.25) !important;
}
html.dark .bg-gold\/10 {
    background-color: rgba(196, 162, 101, 0.12) !important;
}

/* --- Calendar day headers --- */
html.dark .bg-gold\/5 {
    background-color: rgba(196, 162, 101, 0.06) !important;
}

/* --- Scrollbar (Webkit) --- */
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html.dark ::-webkit-scrollbar-track {
    background: var(--dm-bg-base);
}
html.dark ::-webkit-scrollbar-thumb {
    background: var(--dm-border);
    border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-text-muted);
}

/* --- Misc --- */
html.dark hr {
    border-color: var(--dm-border);
}
html.dark .border-t {
    border-color: var(--dm-border) !important;
}
html.dark .border-b {
    border-color: var(--dm-border) !important;
}
html.dark .shadow-sm {
    box-shadow: 0 1px 2px rgba(0,0,0,.3) !important;
}
html.dark img {
    opacity: 0.92;
}
html.dark .text-sm.text-gray-600.hidden.sm\:block {
    color: var(--dm-text-secondary) !important;
}

/* Dark mode toggle button */
html.dark .hover\:bg-gray-700:hover {
    background-color: var(--dm-bg-overlay) !important;
}
html.dark .border.border-gray-200 {
    border-color: var(--dm-border) !important;
}

/* WhatsApp preview */
html.dark .whatsapp-preview {
    color: var(--dm-text);
}

/* Facility status colors */
html.dark .bg-green-100.text-green-800 {
    background-color: #132a1f !important;
    color: #6ee7b7 !important;
}

/* Keyword chips */
html.dark .bg-blue-100.text-blue-800 {
    background-color: #142438 !important;
    color: #93c5fd !important;
}

/* Gold accent in dark mode – slightly warmer */
html.dark .bg-gold {
    background-color: var(--dm-gold) !important;
}

/* Tag pills (amenities, facilities) */
html.dark span.bg-blue-100.text-blue-800 {
    background-color: #142438 !important;
    color: #93c5fd !important;
}