/* Dark Mode Variables and Transitions */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    /* Light-mode fallbacks: these paint TEXT on the light --bg-* above, so they
       must stay dark. (--text-muted-dark #8AA69B is for text on dark green.) */
    --text-primary: #0F2419;
    --text-secondary: #5B6B63;
    --border-color: #e5e7eb;
}

.dark {
    /* Brand-tinted dark surfaces derived from --green-deep #0B3D2E, so dark
       mode reads as the same product rather than neutral slate. */
    --bg-primary: #06120E;
    --bg-secondary: #0C1F18;
    --text-primary: #F1FBF4;
    --text-secondary: #9FB3A8;
    --border-color: #17352A;
    --nav-bg: #06120E;
    --sidebar-bg: #06120E;
}

/* Smooth transitions for theme switching */
body, .bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-800, .bg-gray-900,
.text-gray-900, .text-gray-800, .text-gray-600, .text-gray-500, .text-white,
.border-gray-100, .border-gray-200, .border-gray-700, .border-gray-800,
.modern-sidebar, .modern-navbar, .card, .table, .store-card {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Dark mode specific overrides */
.dark body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.dark .glass-strong {
    background: rgba(12, 31, 24, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Bootstrap's `.bg-body,.bg-white{background-color:#fff!important}` is the
   single rule that paints EVERY white surface on the page (232 usages).
   It is authored for light mode only - Bootstrap 5.3's dark theme keys off
   [data-bs-theme="dark"], which this app never sets (it toggles `.dark` on
   <html> instead). And because `!important` inverts cascade-layer order,
   it also beats Tailwind's `dark:bg-*` variants.

   So: override that one rule under `.dark` and every white surface goes
   dark at once. Light mode is untouched - Bootstrap's #fff still applies.
   Elements that declare their own Tailwind dark background opt out below. */
.dark .bg-white,
.dark .bg-body {
    background-color: #0c1712 !important;
    color: #F1FBF4 !important;
}

/* Opt-outs: components that declare a specific dark background keep it. */
.dark .bg-white[class*="dark:bg-gray-800"] { background-color: #111c17 !important; }
.dark .bg-white[class*="dark:bg-gray-950"] { background-color: #08100c !important; }
.dark .bg-white[class*="dark:bg-primary-800"] { background-color: #0b3d2e !important; }
.dark .bg-white[class*="dark:bg-primary-900"] { background-color: #082e23 !important; }

.dark .bg-light-gray {
    background-color: #040D0A !important; /* Very dark slate */
}

/* General Text Overrides */
.dark .text-gray-900:not([class*="dark:text-"]), 
.dark .text-gray-800:not([class*="dark:text-"]), 
.dark .text-dark:not([class*="dark:text-"]),
.dark .text-black:not([class*="dark:text-"]) {
    color: var(--text-primary) !important;
}

/* dark mode paragrah and label text color */
.dark p:not([class*="dark:text-"]):not([class*="text-"]) {
    color: var(--text-secondary) !important;
}

.dark .text-gray-600:not([class*="dark:text-"]), 
.dark .text-gray-500:not([class*="dark:text-"]), 
.dark .text-muted:not([class*="dark:text-"]),
.dark .text-gray:not([class*="dark:text-"]) {
    color: var(--text-secondary) !important;
}

/* Card styles in dark mode.
   `.bg-white.shadow-*` must carry the same Tailwind guard as the .bg-white
   rule above - without it these two selectors re-force every Tailwind card
   that happens to use a shadow utility, which is what left the marketing
   cards white with unreadable text. */
.dark .card,
.dark .bg-white.shadow-sm:not([class*="dark:bg-"]), 
.dark .bg-white.shadow-lg:not([class*="dark:bg-"]),
.dark .store-card,
.dark .stat-card {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark .card-header,
.dark .store-card-header {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark .card-body,
.dark .store-card-body {
    color: var(--text-primary) !important;
}

.dark .store-info-label {
    color: var(--text-secondary) !important;
}

.dark .store-info-value {
    color: var(--text-primary) !important;
}

/* Navbar in Dark Mode */
.dark .modern-navbar {
    background-color: var(--nav-bg) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark .page-title,
.dark .modern-signin-btn {
    color: var(--text-primary) !important;
}

.dark .notification-btn, 
.dark .message-btn,
.dark .sidebar-toggle {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

.dark .user-name {
    color: var(--text-primary) !important;
}

.dark .user-role {
    color: var(--text-secondary) !important;
}

/* Sidebar in Dark Mode */
.dark .modern-sidebar,
.dark #sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right-color: var(--border-color) !important;
}

.dark .sidebar-brand-text {
    color: var(--text-primary) !important;
}

.dark .sidebar-header {
    border-bottom-color: var(--border-color) !important;
}

.dark .nav-section-title {
    color: var(--text-secondary) !important;
}

.dark .nav-link {
    color: var(--text-secondary) !important;
}

.dark .nav-link:hover, 
.dark .nav-link.active {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

.dark .nav-link.active i, 
.dark .nav-link:hover i {
    color: var(--text-primary) !important;
}

/* Tables in Dark Mode */
.dark .table,
.dark .modern-table {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark .table thead,
.dark .modern-table thead {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.dark .table thead th,
.dark .modern-table thead tr th {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Slightly lighter than row */
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

.dark .table td,
.dark .table th,
.dark .modern-table tbody tr,
.dark .modern-table tbody tr td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--text-primary) !important;
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.02) !important;
}

.dark .table-hover > tbody > tr:hover > * {
    color: var(--text-primary) !important;
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.04) !important;
}

/* DataTables Specifics */
.dark .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_filter,
.dark .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_processing,
.dark .dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary) !important;
}

.dark .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_length select {
    background-color: var(--bg-primary) !important; /* Darker input bg */
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Form Elements and Labels in Dark Mode - High Specificity Overrides */
html.dark label,
html.dark .form-label,
html.dark .booking-form label,
html.dark .booking-form .form-label,
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .booking-form label {
    color: #F1FBF4 !important; /* Brighter Slate 50 */
}

html.dark label span,
html.dark label i,
[data-bs-theme="dark"] label span,
[data-bs-theme="dark"] label i {
    color: inherit !important;
}

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="search"],
html.dark textarea,
html.dark select,
html.dark .ss-trigger, /* searchable dropdown (search-select.js) - dressed like the select it replaces */
html.dark .form-control,
html.dark .form-select,
html.dark .booking-form .light-input,
html.dark .light-input,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .light-input {
    background-color: #0C1F18 !important; /* Slate 900 */
    border-color: #17352A !important; /* Slate 700 */
    color: #F1FBF4 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder,
html.dark .booking-form .light-input::placeholder,
[data-bs-theme="dark"] input::placeholder {
    color: #9FB3A8 !important; /* Slate 400 */
}

/* Specific Booking Form Group Overrides */
html.dark .location-group,
html.dark .location-type-select,
html.dark .location-address-input,
html.dark .time-select,
html.dark .btn-group .booking-type-btn {
    background-color: #0C1F18 !important; /* Slate 900 */
    color: #F1FBF4 !important;
    border-color: #17352A !important;
}

html.dark .location-group:hover,
html.dark .location-group:focus-within {
    border-color: var(--primary-color) !important;
}

html.dark .location-type-select {
    border-right: 2px solid #17352A !important;
}

html.dark .location-address-input:focus {
    background-color: rgba(20, 108, 67, 0.1) !important;
}

/* Measurement Guideline Button in dark cards */
html.dark .btn-outline-primary {
    color: #3EB655 !important; /* Brighter green */
    border-color: #3EB655 !important;
}

html.dark .btn-outline-primary:hover {
    background-color: #3EB655 !important;
    color: #0C1F18 !important;
}

/* Dropdowns in Dark Mode */
.dark .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark .dropdown-item {
    color: var(--text-primary) !important;
}

.dark .dropdown-item:hover, 
.dark .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

.dark .dropdown-header h6 {
    color: var(--text-primary) !important;
}

.dark .dropdown-divider {
    border-top-color: var(--border-color) !important;
}

/* Navbar Scrolled State */
.dark nav.bg-transparent.scrolled {
    background-color: rgba(12, 31, 24, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Client specific overrides */
.dark .client-layout .client-main-content {
    background-color: var(--bg-primary) !important;
}

.dark .unread-notification {
    background-color: rgba(20, 108, 67, 0.1) !important; /* Dark green background for unread */
    border-left-color: var(--primary-color) !important;
}

.dark .notification-icon {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

/* Gradient text adjustments */
.dark .text-transparent {
    filter: brightness(1.2); /* Make gradients pop more on dark bg */
}