/* =============================================================
   MOHIRI RESPONSIVE FIX — v2.0
   Locks dark theme, fixes all mobile/responsive issues,
   prevents white-flash on free hosts, ensures consistent
   rendering across every device and screen size.
   ============================================================= */

/* ── 1. FORCE DARK COLOR SCHEME ─────────────────────────────
   Prevents the browser (and free-host injected CSS) from
   ever switching to a light/white appearance.                 */
:root {
    color-scheme: dark;

    /* Re-declare all variables here so they can never be
       overridden by an external stylesheet. !important is
       intentional and necessary on free hosting platforms.   */
    --primary:          #6366f1 !important;
    --primary-dark:     #4f46e5 !important;
    --primary-light:    #818cf8 !important;
    --secondary:        #06b6d4 !important;
    --accent:           #f59e0b !important;
    --success:          #10b981 !important;
    --danger:           #ef4444 !important;
    --warning:          #f59e0b !important;
    --info:             #3b82f6 !important;

    --bg-primary:       #0f172a !important;
    --bg-secondary:     #1e293b !important;
    --bg-card:          #1e293b !important;
    --bg-input:         #334155 !important;

    --text-primary:     #f8fafc !important;
    --text-secondary:   #94a3b8 !important;
    --text-muted:       #64748b !important;

    --border:           #334155 !important;
    --border-light:     #475569 !important;

    --nav-height:       60px;
    --bottom-nav-height:65px;
}

/* ── 2. HARD-LOCK BACKGROUNDS & COLORS ──────────────────────
   Every element that could "go white" is explicitly forced
   to the dark palette. browser user-agent stylesheets and
   free-host CSS have no chance to bleed through.             */
html {
    background-color: #0f172a !important;
    color-scheme: dark !important;
}

body {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #f8fafc !important;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ── 3. FORM ELEMENTS — the #1 white-bleed culprit ──────────
   Browsers apply white backgrounds to inputs/selects by
   default. We override every variant, including autofill.   */
input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="search"],
textarea,
select,
.form-input,
.search-input {
    background-color: #334155 !important;
    background: #334155 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    -webkit-text-fill-color: #f8fafc !important;
    caret-color: #f8fafc;
}

/* Autofill override (Chrome/Safari inject yellow/white) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #334155 inset !important;
    -webkit-text-fill-color: #f8fafc !important;
    caret-color: #f8fafc;
    transition: background-color 9999s ease-in-out 0s;
}

/* Select arrow color fix on iOS/Android */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 40px !important;
}

select option {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Placeholder color */
::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

:-ms-input-placeholder {
    color: #64748b !important;
}

::-ms-input-placeholder {
    color: #64748b !important;
}

/* Focus states */
input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.search-input:focus {
    background-color: #334155 !important;
    background: #334155 !important;
    color: #f8fafc !important;
    outline: none;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* ── 4. CARD & CONTAINER BACKGROUNDS ────────────────────────*/
.room-card,
.stat-card,
.booking-card,
.form-card,
.booking-section,
.amenity-item,
.nav-menu,
.admin-sidebar,
.modal,
.payment-method,
.notification-dropdown,
.data-table-container,
.popi-disclaimer {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #f8fafc !important;
}

.navbar {
    background: rgba(15, 23, 42, 0.98) !important;
    background-color: rgba(15, 23, 42, 0.98) !important;
}

.mobile-bottom-nav {
    background: #1e293b !important;
    background-color: #1e293b !important;
}

.footer {
    background: #1e293b !important;
    background-color: #1e293b !important;
}

/* ── 5. TEXT COLOR ENFORCEMENT ───────────────────────────────*/
h1, h2, h3, h4, h5, h6 {
    color: #f8fafc !important;
}

p {
    color: #94a3b8;
}

/* These classes were using light-theme colors in mohiri_frontend.css */
.text-muted {
    color: #64748b !important;
}

.room-title,
.section-title,
.room-info-title,
.dashboard-header h1,
.admin-header h1,
.booking-title,
.form-header h1 {
    color: #f8fafc !important;
}

.room-location,
.room-feature,
.section-subtitle,
.footer-tagline,
.form-label,
.form-header p,
.dashboard-header p {
    color: #94a3b8 !important;
}

.room-price,
.room-info-price,
.stat-value {
    color: #818cf8 !important;
}

.booking-fee-amount {
    color: #f59e0b !important;
}

/* Nav links */
.nav-link,
.bottom-nav-item {
    color: #94a3b8 !important;
}

.nav-link:hover,
.nav-link.active,
.bottom-nav-item:hover,
.bottom-nav-item.active {
    color: #f8fafc !important;
    background: #334155 !important;
}

/* Table text */
.data-table th {
    color: #64748b !important;
    background-color: #1e293b !important;
}

.data-table td {
    color: #94a3b8 !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.data-table tr:hover td {
    background: rgba(99, 102, 241, 0.05) !important;
}

/* ── 6. VIEWPORT & SAFE AREA FIXES ──────────────────────────
   Prevents the layout from being clipped on notched phones
   (iPhone X+, Android with punch-hole cameras).             */
.navbar {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.mobile-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    height: calc(65px + env(safe-area-inset-bottom, 0px));
}

body {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

/* ── 7. OVERFLOW & SCROLL FIXES ─────────────────────────────*/
html, body {
    overflow-x: auto;
    max-width: 100vw;
}

/* Prevent horizontal scroll from table overflow */
.data-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Gallery horizontal scroll */
.gallery-thumbs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gallery-thumbs::-webkit-scrollbar {
    display: none;
}

/* ── 8. TOUCH TARGET SIZES ───────────────────────────────────
   WCAG 2.5.5: interactive elements must be at least 44×44px  */
.btn-view,
.btn,
.nav-link,
.bottom-nav-item,
.gallery-nav,
.gallery-thumb,
.social-links a,
.modal-close,
.image-preview-remove,
.admin-nav-item {
    min-height: 44px;
    min-width: 44px;
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

/* ── 9. IMAGE RELIABILITY ────────────────────────────────────
   Broken images show a dark placeholder, not a white box     */
img {
    background-color: #1e293b;
}

img[src=""],
img:not([src]) {
    visibility: hidden;
}

/* ── 10. SEARCH BOX RESPONSIVE ───────────────────────────────*/
.search-box {
    background: #1e293b !important;
    border-color: #334155 !important;
}

@media (max-width: 639px) {
    .search-box {
        flex-direction: column !important;
        padding: 12px !important;
    }

    .search-input-group {
        width: 100%;
    }

    .search-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── 11. HERO SECTION ────────────────────────────────────────*/
@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.85rem !important;
        line-height: 1.25;
    }

    .hero p {
        font-size: 0.95rem !important;
    }

    .hero {
        padding: calc(var(--nav-height) + 24px) 12px 40px !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .hero h1 {
        font-size: 2.25rem !important;
    }
}

/* ── 12. ROOM GRID FULL RESPONSIVENESS ───────────────────────*/
@media (max-width: 480px) {
    .rooms-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
        padding: 0 4px;
    }

    .rooms-section {
        padding: 24px 12px !important;
    }

    .room-content {
        padding: 12px !important;
    }

    .room-title {
        font-size: 1rem !important;
    }

    .room-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-view {
        flex: 1;
        text-align: center;
        min-width: 0;
    }
}

@media (min-width: 481px) and (max-width: 639px) {
    .rooms-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .rooms-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── 13. FORM PAGE FIXES ─────────────────────────────────────*/
@media (max-width: 480px) {
    .form-page {
        padding: calc(var(--nav-height) + 12px) 12px 32px !important;
        justify-content: flex-start !important;
    }

    .form-card {
        padding: 24px 16px !important;
        border-radius: 12px !important;
    }

    .form-header h1 {
        font-size: 1.5rem !important;
    }

    .btn {
        padding: 14px 18px !important;
        font-size: 0.95rem !important;
    }
}

/* ── 14. DASHBOARD RESPONSIVE ────────────────────────────────*/
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .stat-card {
        padding: 12px 8px !important;
    }

    .stat-value {
        font-size: 1.25rem !important;
    }

    .stat-label {
        font-size: 0.72rem !important;
    }

    .booking-card {
        flex-direction: column !important;
    }

    .booking-image {
        width: 100% !important;
        height: 160px !important;
    }

    .dashboard {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ── 15. ROOM DETAIL PAGE ─────────────────────────────────────*/
@media (max-width: 767px) {
    .room-info {
        padding: 16px 12px !important;
    }

    .room-info-title {
        font-size: 1.4rem !important;
    }

    .room-info-price {
        font-size: 1.6rem !important;
    }

    .amenities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .amenity-item {
        padding: 10px 8px !important;
        font-size: 0.82rem !important;
    }

    .booking-section {
        margin: 16px 0 !important;
        padding: 16px !important;
    }

    .gallery-main {
        aspect-ratio: 4/3 !important;
    }
}

/* ── 16. NAVIGATION RESPONSIVE ───────────────────────────────*/
@media (max-width: 767px) {
    .nav-container {
        padding: 0 12px !important;
    }

    .logo-text {
        font-size: 1.1rem;
    }

    .nav-menu {
        top: var(--nav-height) !important;
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent body scroll when nav is open — reinforced */
    body.nav-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* ── 17. ADMIN PANEL MOBILE ───────────────────────────────────*/
@media (max-width: 767px) {
    .admin-main {
        margin-left: 0 !important;
        padding: 16px 12px !important;
        padding-top: calc(var(--nav-height) + 16px) !important;
    }

    .admin-header {
        margin-bottom: 16px;
    }

    .admin-header h1 {
        font-size: 1.25rem !important;
    }

    .data-table th,
    .data-table td {
        padding: 10px 12px !important;
        font-size: 0.82rem !important;
    }

    .table-actions {
        flex-direction: column;
        gap: 4px;
    }

    .table-actions .btn {
        width: 100% !important;
    }
}

/* Admin sidebar always accessible on mobile via toggle */
@media (max-width: 767px) {
    .admin-sidebar {
        z-index: 1100 !important;
        width: min(280px, 85vw) !important;
    }
}

/* ── 18. MODAL RESPONSIVE ─────────────────────────────────────*/
@media (max-width: 480px) {
    .modal-overlay {
        padding: 8px !important;
        align-items: flex-end !important;
    }

    .modal {
        max-height: 85vh !important;
        border-radius: 16px 16px 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    .modal-footer {
        flex-direction: column-reverse !important;
    }

    .modal-footer .btn {
        width: 100% !important;
    }
}

/* ── 19. NOTIFICATION DROPDOWN MOBILE ────────────────────────*/
@media (max-width: 480px) {
    .notification-dropdown {
        width: calc(100vw - 16px) !important;
        right: 8px !important;
        left: 8px !important;
    }
}

/* ── 20. FOOTER RESPONSIVE ───────────────────────────────────*/
@media (max-width: 639px) {
    .footer {
        padding: 32px 12px 16px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .social-links {
        flex-wrap: wrap;
    }
}

/* ── 21. TRANSPORT PAGE ──────────────────────────────────────*/
@media (max-width: 480px) {
    .payment-methods {
        gap: 8px;
    }

    .payment-method {
        padding: 12px !important;
        gap: 10px !important;
    }

    .payment-method-icon {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ── 22. TYPOGRAPHY SCALE — prevents text cutoff ────────────*/
@media (max-width: 360px) {
    html {
        font-size: 14px !important;
    }

    .hero h1 {
        font-size: 1.65rem !important;
    }

    .section-title {
        font-size: 1.4rem !important;
    }
}

/* ── 23. LANDSCAPE PHONE FIXES ───────────────────────────────*/
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding-top: calc(var(--nav-height) + 16px) !important;
        padding-bottom: 24px !important;
    }

    .hero h1 {
        font-size: 1.75rem !important;
        margin-bottom: 8px !important;
    }

    .form-page {
        justify-content: flex-start !important;
        padding-top: calc(var(--nav-height) + 8px) !important;
    }
}

/* ── 24. HIGH-DPI / RETINA DISPLAYS ─────────────────────────*/
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .navbar {
        border-bottom-width: 0.5px !important;
    }

    .room-card,
    .form-card,
    .booking-section {
        border-width: 0.5px !important;
    }
}

/* ── 25. PRINT — don't print dark background ─────────────────*/
@media print {
    html, body {
        background: #fff !important;
        color: #000 !important;
        color-scheme: light !important;
    }

    .navbar,
    .mobile-bottom-nav,
    .footer,
    .btn-book,
    .booking-section,
    .flash-container {
        display: none !important;
    }
}

/* ── 26. POPI DISCLAIMER BOX ─────────────────────────────────*/
.popi-disclaimer {
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

.popi-disclaimer h4 {
    color: #818cf8 !important;
}

/* ── 27. ALERT BOXES ─────────────────────────────────────────*/
.alert-success {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
}

.alert-danger,
.alert-error {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

.alert-info {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

/* ── 28. SEARCH INPUT ICON FIX ────────────────────────────────*/
.search-input-group i {
    color: #64748b !important;
    pointer-events: none;
    z-index: 1;
}

/* ── 29. SMOOTH TRANSITIONS — prevent flash on load ──────────*/
*, *::before, *::after {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* But not on page load */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* ── 30. LOGO GRADIENT TEXT FALLBACK ─────────────────────────
   Some Android WebViews don't support -webkit-text-fill-color  */
.logo-text {
    background: linear-gradient(135deg, #818cf8, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #818cf8; /* fallback */
}

/* ── 31. ROOM BADGE CONTRAST FIX ──────────────────────────────*/
.badge-available,
.room-badge.badge-available {
    background: rgba(16, 185, 129, 0.9) !important;
    color: #fff !important;
}

.badge-booked,
.room-badge.badge-booked {
    background: rgba(239, 68, 68, 0.9) !important;
    color: #fff !important;
}

.badge-maintenance,
.room-badge.badge-maintenance {
    background: rgba(245, 158, 11, 0.9) !important;
    color: #fff !important;
}

/* ── 32. BUTTON FIXES ─────────────────────────────────────────*/
.btn-primary,
a.nav-link.btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
}

.btn-book:not(:disabled) {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
}

.btn-secondary-style {
    background: #334155 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* ── 33. SCROLLBAR STYLING (Chromium) ─────────────────────────*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #1e293b;
}

::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}

/* ── 34. FOCUS VISIBLE — accessibility ────────────────────────*/
:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Remove outline from mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ── 35. ADMIN LOGIN PAGE SPECIFICS ──────────────────────────*/
.admin-login-page,
.admin-login-page body {
    background: #0f172a !important;
}