/* Bootstrap 5 overrides / brand palette only — Bootstrap itself loads via CDN. */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css");

.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: #f5f6f8;
}

.auth-card {
    border: none;
    border-radius: 0.75rem;
}

/* Legacy sidebar wrapper — no longer used by hotel_admin views since
   sidebar.php now emits its own offcanvas-lg. Kept as a safety net if
   anything still references the class. */
.sidebar-col {
    width: 240px;
    min-height: calc(100vh - 57px);
    flex-shrink: 0;
}

.room-card .card-body {
    padding: 0.9rem;
}

/* ==========================================================================
   Hotel-side shell (header.php / sidebar.php on hotel_admin views).
   Mirrors the admin_sidebar treatment but stays on the app's default blue
   accent since a hotel Director's world is already the "primary" context.
   ========================================================================== */

.hotel-sidebar {
    --hs-width: 240px;
    width: var(--hs-width);
    flex-shrink: 0;
    background-color: #ffffff;
    border-right: 1px solid #e5e7eb;
}

@media (min-width: 992px) {
    .hotel-sidebar {
        min-height: calc(100vh - 57px);
        position: sticky;
        top: 57px;
        max-height: calc(100vh - 57px);
    }
}

@media (max-width: 991.98px) {
    .hotel-sidebar {
        width: min(85vw, 320px);
    }
}

.hotel-nav .nav-section-label {
    color: #8a8f96;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hotel-nav .nav-link {
    color: #4b5563;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.925rem;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.hotel-nav .nav-link i {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    color: #6b7280;
}

.hotel-nav .nav-link:hover {
    background-color: #f2f4f7;
    color: #111827;
}

.hotel-nav .nav-link:hover i {
    color: inherit;
}

.hotel-nav .nav-link.active {
    background-color: #e7f1ff;
    color: #0d6efd;
    font-weight: 500;
}

.hotel-nav .nav-link.active i {
    color: #0d6efd;
}

.app-header {
    min-height: 56px;
    z-index: 1030;
}

/* Any hotel-main body area must never cause the whole page to scroll horizontally
   when a wide table or code block is inside. min-width:0 lets the flex child
   actually shrink; overflow-x:auto puts the scroll on the content area itself. */
.hotel-main, .admin-main {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    body {
        overflow-x: hidden;
    }
}

/* ==========================================================================
   Dark mode. Bootstrap 5.3 handles most of it via [data-bs-theme="dark"];
   these overrides are for the custom hotel-side chrome that isn't a native
   Bootstrap component.
   ========================================================================== */

[data-bs-theme="dark"] .hotel-sidebar {
    background-color: #1f2937;
    border-right-color: #2d3846;
}
[data-bs-theme="dark"] .hotel-nav .nav-link { color: #cbd5e1; }
[data-bs-theme="dark"] .hotel-nav .nav-link i { color: #94a3b8; }
[data-bs-theme="dark"] .hotel-nav .nav-link:hover {
    background-color: #2d3846;
    color: #f1f5f9;
}
[data-bs-theme="dark"] .hotel-nav .nav-link.active {
    background-color: rgba(13, 110, 253, 0.18);
    color: #60a5fa;
}
[data-bs-theme="dark"] .hotel-nav .nav-link.active i { color: #60a5fa; }
[data-bs-theme="dark"] .hotel-nav .nav-section-label { color: #64748b; }

[data-bs-theme="dark"] .app-header {
    background-color: #111827 !important;
    border-bottom-color: #2d3846 !important;
}

[data-bs-theme="dark"] .room-cell {
    box-shadow: 0 0 0 1px rgba(255,255,255,.05);
}

/* Search dropdown active item — Bootstrap's default .dropdown-item.active bg
   is fine in both themes; just tighten hover for keyboard-nav visibility. */
.search-item.active { background-color: rgba(13, 110, 253, 0.14); }
[data-bs-theme="dark"] .search-item.active { background-color: rgba(96, 165, 250, 0.22); }

/* Bell button contrast in dark. */
[data-bs-theme="dark"] .app-header .btn-outline-secondary { color: #cbd5e1; }

/* ==========================================================================
   Super Admin shell (admin_header/admin_sidebar/admin_footer.php only —
   hotel_admin views keep the plain header.php/sidebar.php untouched).

   Warm charcoal + copper, not the default "admin dashboard = blue" palette.
   The sidebar is dark on purpose: this Super Admin also works inside each
   hotel's own (light) workspace, so a persistent, differently-toned rail is
   a real wayfinding aid for "which context am I in", not decoration.
   Hex values are the fallback Bootstrap needs for --bs-*-rgb composition;
   the oklch() line after each redeclares the same color for browsers that
   support it and is simply ignored (falls back to the hex above it) where
   it isn't — no @supports needed.
   ========================================================================== */

:root {
    --admin-sidebar-bg: #241f1b;
    --admin-sidebar-bg: oklch(21% 0.015 55);
    --admin-sidebar-bg-active: #332b24;
    --admin-sidebar-bg-active: oklch(28% 0.02 55);
    --admin-sidebar-border: #3a322b;
    --admin-sidebar-border: oklch(32% 0.02 55);
    --admin-sidebar-text: #ede7e1;
    --admin-sidebar-text: oklch(92% 0.006 55);
    --admin-sidebar-text-muted: #b3a99e;
    --admin-sidebar-text-muted: oklch(70% 0.012 55);

    --admin-bg: #f7f5f2;
    --admin-bg: oklch(97% 0.004 55);
    --admin-surface: #fcfbf9;
    --admin-surface: oklch(99% 0.002 55);
    --admin-border: #e4dfd8;
    --admin-border: oklch(90% 0.006 55);
    --admin-text: #2a2521;
    --admin-text: oklch(23% 0.008 55);
    --admin-text-muted: #7a7168;
    --admin-text-muted: oklch(50% 0.01 55);
}

/* Scoped override of Bootstrap's own primary variable -- every btn-primary,
   text-primary, link, and focus ring inside .admin-shell inherits this for
   free instead of fighting individual utility classes. Semantic status
   colors (success/danger/warning) are deliberately left at Bootstrap's
   defaults -- those carry meaning (paid/overdue/active) that shouldn't be
   re-skinned to match a brand accent. */
.admin-shell {
    --bs-primary: #a6531f;
    --bs-primary-rgb: 166, 83, 31;
    --bs-primary-text-emphasis: #7a3d16;
    --bs-primary-bg-subtle: #f6e8dd;
    --bs-primary-border-subtle: #e7c4a7;
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: #7a3d16;
    --bs-link-hover-color-rgb: 122, 61, 22;
    background-color: var(--admin-bg);
    color: var(--admin-text);
    min-height: 100vh;
}

.admin-shell .btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #8f4519;
    --bs-btn-hover-border-color: #8f4519;
    --bs-btn-active-bg: #7a3d16;
    --bs-btn-active-border-color: #7a3d16;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.admin-shell .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.admin-topbar {
    background-color: var(--admin-surface);
    border-bottom: 1px solid var(--admin-border);
    min-height: 60px;
}

.admin-sidebar {
    width: 250px;
    flex-shrink: 0;
    background-color: var(--admin-sidebar-bg);
    color: var(--admin-sidebar-text);
}

.admin-sidebar .admin-brand {
    color: var(--admin-sidebar-text);
    border-bottom: 1px solid var(--admin-sidebar-border);
}

.admin-sidebar .admin-brand .badge-platform {
    background-color: var(--admin-sidebar-bg-active);
    color: var(--admin-sidebar-text-muted);
    letter-spacing: 0.04em;
}

.admin-sidebar .nav-section-label {
    color: var(--admin-sidebar-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 0.75rem;
}

.admin-sidebar .nav-link {
    color: var(--admin-sidebar-text-muted);
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.925rem;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.admin-sidebar .nav-link i {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.admin-sidebar .nav-link:hover {
    background-color: var(--admin-sidebar-bg-active);
    color: var(--admin-sidebar-text);
}

.admin-sidebar .nav-link.active {
    background-color: var(--admin-sidebar-bg-active);
    color: #e8a06b;
    font-weight: 500;
}

.admin-main {
    min-width: 0;
}

.admin-footer {
    border-top: 1px solid var(--admin-border);
    color: var(--admin-text-muted);
    font-size: 0.8rem;
}

.admin-shell .card {
    background-color: var(--admin-surface);
    border-color: var(--admin-border);
}

.admin-stat-strip {
    background-color: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: 0.75rem;
}

.admin-stat-strip .stat-item {
    padding: 0.9rem 1.1rem;
}

.admin-stat-strip .stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.admin-stat-strip .stat-label {
    color: var(--admin-text-muted);
    font-size: 0.78rem;
}

@media (min-width: 992px) {
    .admin-sidebar {
        min-height: 100vh;
    }
}