/* ============================================
   SADEE JODI — Mobile App-Like Experience
   Phase 1: Layout Fixes
   Phase 2: App-Like UI/UX
   Target: max-width 768px
   ============================================ */

/* =============================================
   PHASE 1: FIX LAYOUT OVERFLOW & CUTTING
   ============================================= */

/* -- HARD VIEWPORT LOCK -- */
@media screen and (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
    }
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }
    /* Kill any hardcoded widths */
    .container,
    .auth-container,
    .auth-card,
    section,
    main,
    .dashboard-main,
    .chat-main,
    .footer,
    footer {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* -- GLOBAL MOBILE RESET -- */
@media screen and (max-width: 768px) {

    /* Force all containers to respect viewport (removed universal max-width as it breaks horizontal scrolls) */
    /* * {
        max-width: 100vw;
    } */

    /* Safe area insets for notched phones */
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* ---- Typography Scaling ---- */
    :root {
        --fs-6xl: 2rem;
        --fs-5xl: 1.65rem;
        --fs-4xl: 1.4rem;
        --fs-3xl: 1.25rem;
        --fs-2xl: 1.15rem;
        --fs-xl: 1rem;
    }

    h1 { font-size: 1.5rem !important; line-height: 1.3; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }

    /* ---- Container ---- */
    .container {
        padding: 0 16px !important;
        width: 100% !important;
    }

    /* ---- Vertical Stacking ---- */
    .grid-2, .grid-3, .grid-4,
    .form-row,
    .hero-actions,
    .footer-grid,
    .stats-grid,
    .plans-grid,
    .stories-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-md) !important;
        width: 100% !important;
    }

    .form-row > .form-group {
        width: 100% !important;
        flex: none !important;
    }

    /* ---- Dashboard Stats: 2-col grid that fits ---- */
    .dash-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .dash-stat-card {
        padding: 12px !important;
        gap: 10px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .dash-stat-card .stat-icon-box {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    .dash-stat-card .stat-value {
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
    }

    .dash-stat-card .stat-label {
        font-size: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    /* ---- Dashboard Main Area ---- */
    .dashboard-layout {
        padding-top: 60px !important;
    }

    .dashboard-main {
        margin-left: 0 !important;
        padding: 12px !important;
        width: 100% !important;
    }

    .dash-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
        margin-top: 15px !important;
    }

    .dash-header .dash-title {
        font-size: 1.15rem !important;
    }

    .dash-header .dash-subtitle {
        font-size: 12px !important;
    }

    /* ---- Dashboard Cards Grid ---- */
    .dash-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .dash-card {
        padding: 14px !important;
    }

    /* ---- Sidebar: OFF by default on mobile ---- */
    .sidebar {
        transform: translateX(-100%) !important;
        z-index: 9999 !important;
        width: 85vw !important;
        max-width: 320px !important;
        top: 0 !important;
        padding-top: 0 !important;
    }

    .sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 10px 0 40px rgba(0,0,0,0.5) !important;
    }

    /* Sidebar overlay when open */
    .sidebar.open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 85vw;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: -1;
    }

    .sidebar-mobile-toggle {
        display: flex !important;
        position: fixed !important;
        top: 16px !important;
        left: 12px !important;
        z-index: 999 !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        background: var(--bg-dark) !important;
        border: 1px solid var(--border-color) !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--text-primary) !important;
        font-size: 18px !important;
        cursor: pointer !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
    }

    /* ---- Tabs: horizontal scroll ---- */
    .dash-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    .dash-tabs::-webkit-scrollbar {
        display: none;
    }

    .dash-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 8px 16px !important;
        font-size: 12px !important;
    }

    /* ---- Match Cards ---- */
    .match-cards-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .match-card {
        border-radius: 12px !important;
    }

    .match-card .match-image {
        height: 180px !important;
    }

    .match-card .match-body {
        padding: 10px !important;
    }

    .match-card .match-name {
        font-size: 13px !important;
    }

    .match-card .match-info {
        font-size: 11px !important;
    }

    /* ---- Interest Items ---- */
    .interest-item {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .interest-item .interest-avatar {
        width: 48px !important;
        height: 48px !important;
    }

    .interest-item .interest-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .interest-item .interest-name {
        font-size: 14px !important;
    }

    .interest-item .interest-details {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .interest-item .interest-actions {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    .interest-item .interest-time {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        font-size: 10px !important;
    }

    .interest-item {
        position: relative !important;
    }

    /* ---- Profile Completeness ---- */
    .profile-completeness {
        padding: 12px !important;
    }

    .completeness-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ---- Compatibility Radar ---- */
    .radar-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        justify-items: center !important;
    }

    .radar-circle-wrapper {
        width: 140px !important;
        height: 140px !important;
    }

    .radar-svg {
        width: 140px !important;
        height: 140px !important;
    }

    /* ---- Buttons ---- */
    .btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 18px !important;
        font-size: 13px !important;
    }

    .btn-sm {
        min-height: 38px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

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

    /* ---- Form Elements: Touch-Friendly ---- */
    .form-input,
    .form-select,
    .form-textarea {
        min-height: 46px !important;
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding: 12px 14px !important;
        border-radius: 10px !important;
    }

    .form-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    /* ---- Navbar Mobile ---- */
    .navbar {
        height: 60px !important;
        padding: 0 !important;
        background: var(--bg-dark) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .navbar .container {
        padding: 0 16px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .navbar-brand {
        padding-bottom: 0 !important;
    }

    .navbar-brand .brand-text {
        font-size: 1.25rem !important;
        padding-top: 0 !important;
    }

    .navbar-brand .brand-icon img {
        height: 32px !important;
    }

    .navbar-toggle {
        display: flex !important;
        position: relative !important;
        z-index: 9999 !important;
    }

    .navbar-actions.desktop-auth {
        display: none !important;
    }

    /* ---- Auth Pages (Login/Signup) ---- */
    .auth-page {
        padding: 60px 0 0 0 !important;
    }

    .auth-wrapper {
        flex-direction: column !important;
        border-radius: 0 !important;
        border: none !important;
        min-height: calc(100vh - 60px) !important;
        box-shadow: none !important;
    }

    .auth-brand-panel {
        display: none !important;
    }

    .auth-form-panel {
        width: 100% !important;
        padding: 20px 16px !important;
        background: transparent !important;
    }

    .auth-page.auth-single {
        padding: 60px 0 0 0 !important;
    }

    .auth-page.auth-single .auth-container {
        padding: 20px 16px !important;
        max-width: 100% !important;
    }

    .auth-page.auth-single .auth-card {
        padding: 28px 20px !important;
        border-radius: 24px !important;
        margin: 0 !important;
    }

    .auth-page.auth-single .auth-header h1 {
        font-size: 1.5rem !important;
    }

    .auth-page.auth-single .step-circle {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem !important;
    }

    .auth-page.auth-single .form-input,
    .auth-page.auth-single .form-select {
        padding: 14px 16px !important;
        font-size: 16px !important;
    }

    .auth-container {
        padding: 20px 16px !important;
    }

    .auth-card {
        padding: 20px 16px !important;
    }

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

    /* Signup progress steps */
    .signup-progress {
        gap: 2px !important;
        padding: 0 !important;
    }

    .step-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    .step-line {
        flex: 1 !important;
        height: 2px !important;
    }

    .step-navigation {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .step-navigation .btn {
        width: 100% !important;
    }

    /* ---- Search Page ---- */
    .search-filters-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .search-results-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* ---- Profile Detail Page ---- */
    .profile-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .profile-detail-sidebar {
        order: -1 !important;
    }

    /* ---- Plans Grid ---- */
    .plans-grid {
        gap: 12px !important;
    }

    .plan-card {
        padding: 20px 16px !important;
    }

    .plan-card.popular {
        transform: none !important;
    }

    .plan-card .plan-price {
        font-size: 1.5rem !important;
    }

    /* ---- Footer ---- */
    .footer {
        padding: 32px 0 80px !important; /* Extra bottom for nav bar */
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        text-align: center !important;
    }

    .footer-social {
        justify-content: center !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }

    /* ---- Modal → Full Screen Overlay ---- */
    .modal-overlay,
    .modal-backdrop {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
    }

    .modal,
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        animation: slideUpFullscreen 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    /* Hide bottom sheet handle for fullscreen modal */
    .modal::before,
    .modal-content::before {
        display: none !important;
    }

    @keyframes slideUpFullscreen {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* ---- Toast positioning ---- */
    .toast-container {
        bottom: 80px !important; /* Above bottom nav */
        left: 12px !important;
        right: 12px !important;
    }

    /* ---- Remove hover effects on mobile ---- */
    .dash-stat-card:hover,
    .match-card:hover,
    .plan-card:hover,
    .interest-item:hover,
    .nav-item:hover,
    .btn:hover {
        transform: none !important;
    }

    /* ---- Section Padding ---- */
    .section {
        padding: 32px 0 !important;
    }

    .section-header {
        margin-bottom: 20px !important;
    }

    /* ---- CTA Wrapper ---- */
    .cta-wrapper {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }

    .cta-wrapper h2 {
        font-size: 1.15rem !important;
    }

    .cta-wrapper p {
        font-size: 13px !important;
    }
}

/* =============================================
   PHASE 2: APP-LIKE BOTTOM NAVIGATION
   ============================================= */

@media screen and (max-width: 768px) {

    /* Bottom nav spacing for all pages */
    body.has-bottom-nav {
        padding-bottom: 70px !important;
    }

    /* Ensure bottom nav is above everything */
    .mobile-bottom-nav {
        z-index: 9998 !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
    }

    .mobile-bottom-nav .nav-item {
        padding: 8px 14px !important;
        font-size: 10px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .mobile-bottom-nav .nav-item i {
        font-size: 20px !important;
    }

    /* Active item glow */
    .mobile-bottom-nav .nav-item.active {
        background: rgba(233, 30, 99, 0.08) !important;
    }

    /* Hide desktop sidebar on mobile completely when bottom nav is present */
    body.has-bottom-nav .sidebar:not(.open) {
        display: none !important;
    }
}

/* =============================================
   VERY SMALL PHONES (≤ 400px)
   ============================================= */
@media screen and (max-width: 400px) {
    .dash-stats {
        grid-template-columns: 1fr !important;
    }

    .match-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .search-results-grid {
        grid-template-columns: 1fr !important;
    }

    .interest-item .interest-actions {
        flex-direction: column !important;
    }

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

    .mobile-bottom-nav .nav-item {
        padding: 6px 10px !important;
        font-size: 9px !important;
    }

    .mobile-bottom-nav .nav-item i {
        font-size: 18px !important;
    }
}

/* =============================================
   CHAT ROOM — FULL-SCREEN MOBILE (Phase 4)
   ============================================= */
@media screen and (max-width: 768px) {

    /* Chat room: full-screen takeover */
    .chat-room-layout {
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height for keyboard */
        padding-bottom: 0 !important;
    }

    /* Hide bottom nav on chat room */
    body.chat-room-active .mobile-bottom-nav {
        display: none !important;
    }

    body.chat-room-active {
        padding-bottom: 0 !important;
    }

    .chat-room-header {
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .cr-avatar {
        width: 36px !important;
        height: 36px !important;
    }

    .cr-user-name {
        font-size: 14px !important;
    }

    .cr-user-status {
        font-size: 11px !important;
    }

    .chat-room-actions .action-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* Messages area fills remaining space */
    #chatRoomMessages {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px !important;
    }

    .chat-msg .msg-bubble {
        max-width: 82% !important;
        font-size: 14px !important;
        padding: 10px 14px !important;
        border-radius: 18px !important;
    }

    .chat-msg.sent .msg-bubble {
        border-bottom-right-radius: 4px !important;
    }

    .chat-msg.received .msg-bubble {
        border-bottom-left-radius: 4px !important;
    }

    .msg-time {
        font-size: 10px !important;
    }

    /* Input area sticks to bottom, moves with keyboard */
    .chat-room-input {
        padding: 8px 12px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        gap: 8px !important;
    }

    .chat-room-input input {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 10px 16px !important;
        border-radius: 24px !important;
        min-height: 44px !important;
    }

    .chat-room-input .send-btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        font-size: 18px !important;
        flex-shrink: 0 !important;
    }

    /* Chat list page */
    .chat-layout {
        flex-direction: column !important;
        height: calc(100vh - 56px - 70px) !important;
        height: calc(100dvh - 56px - 70px) !important;
    }

    .chat-sidebar {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        border-right: none !important;
    }

    .chat-sidebar.open {
        display: block !important;
    }

    .chat-main {
        display: none !important; /* Only show when conversation is selected */
    }

    .chat-main.active {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9000 !important;
        background: var(--bg-body) !important;
    }

    .chat-conv-item {
        padding: 14px 16px !important;
        min-height: 68px !important;
    }

    .conv-avatar {
        width: 48px !important;
        height: 48px !important;
    }

    .conv-name {
        font-size: 14px !important;
    }

    .conv-last-msg {
        font-size: 12px !important;
    }

    /* Typing indicator */
    .typing-indicator {
        padding: 4px 12px !important;
        font-size: 12px !important;
    }
}

/* =============================================
   PWA STANDALONE MODE ADJUSTMENTS
   ============================================= */
@media all and (display-mode: standalone) {
    /* When running as installed PWA, hide browser chrome areas */
    .navbar {
        padding-top: env(safe-area-inset-top) !important;
    }

    body {
        padding-top: env(safe-area-inset-top);
    }

    /* Give the app a more native feel */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    body {
        -webkit-touch-callout: none;
    }
}

/* =============================================
   SMOOTH TRANSITIONS & MICRO-ANIMATIONS
   ============================================= */
@media screen and (max-width: 768px) {

    /* Smooth page transitions */
    .dashboard-main,
    .dash-tab-content,
    .interest-list,
    .match-cards-grid {
        animation: fadeInUp 0.3s ease-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Tap feedback for interactive elements */
    .btn:active,
    .nav-item:active,
    .interest-item:active,
    .match-card:active,
    .chat-conv-item:active,
    .dash-stat-card:active {
        transform: scale(0.97) !important;
        opacity: 0.9 !important;
        transition: all 0.1s ease !important;
    }

    /* Smooth sidebar slide */
    .sidebar {
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }
}

/* =============================================
   MOBILE NAVIGATION AND OVERLAP FIXES
   ============================================= */

/* Hide mobile-only links on desktop by default */
.mobile-only-logged-in,
.mobile-only-logged-out {
    display: none !important;
}

@media screen and (max-width: 768px) {
    /* Hide top header actions and hamburger toggle on mobile dashboard/nav pages */
    .navbar-dashboard .navbar-actions,
    .navbar-dashboard .navbar-toggle,
    body.has-bottom-nav .navbar .navbar-actions,
    body.has-bottom-nav .navbar .navbar-toggle {
        display: none !important;
    }

    /* Shift brand next to sidebar toggle on dashboard pages to prevent overlap */
    .navbar-dashboard .navbar-brand,
    body.has-bottom-nav .navbar .navbar-brand {
        margin-left: 48px !important;
    }

    /* Hide standard navbar actions globally on mobile since they cause overlaps and are redundant */
    .navbar .navbar-actions {
        display: none !important;
    }

    /* Handle mobile-only links inside bento menu based on auth state */
    body.logged-in .navbar-menu .nav-link.mobile-only-logged-in {
        display: flex !important;
    }

    body.logged-out .navbar-menu .nav-link.mobile-only-logged-out {
        display: flex !important;
    }

    /* Styling Register link inside bento box to stand out premium */
    .navbar-menu .nav-link[href*="signup.html"] {
        background: var(--gradient-primary) !important;
        color: #fff !important;
        border-color: var(--primary) !important;
    }
}