/**
 * OTIS Mobile Responsiveness — Global Mobile Fixes
 * Covers: tables, tabs, cards, forms, dashboards, sidebar behavior
 */

/* ════════════════════════════════════════
   GLOBAL MOBILE RESETS
════════════════════════════════════════ */
@media (max-width: 767.98px) {
    html, body { overflow-x: hidden !important; -webkit-tap-highlight-color: transparent; }
    .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }

    /* Space for bottom nav */
    .content-wrapper { padding-bottom: 80px !important; }

    /* Tables: scrollable on mobile */
    .table-responsive-force {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
    }
    table { min-width: 500px; font-size: 0.82rem; }
    td, th { white-space: nowrap; padding: 0.5rem 0.6rem !important; }

    /* Card System */
    .card { border-radius: 16px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; transition: transform 0.1s ease-out, box-shadow 0.1s ease-out; }
    .card:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; }
    .card-body { padding: 16px !important; }
    .card-saas { padding: 12px !important; border-radius: 16px !important; }

    /* Touch Targets */
    button, a { min-height: 44px; }
    
    /* Buttons */
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-mobile-full { width: 100% !important; margin-bottom: 0.5rem; min-height: 44px; }
    
    .modal-dialog { margin: 8px; max-width: calc(100% - 16px); }
    .modal-body { padding: 16px; }
}

/* ════════════════════════════════════════
   HEALTH DASHBOARD MOBILE
════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .saas-tabs-container {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 4px 6px !important;
        border-radius: 12px !important;
        gap: 4px !important;
        width: 100% !important;
        scrollbar-width: none;
    }
    .saas-tabs-container::-webkit-scrollbar { display: none; }
    .saas-tabs-container .nav-item { flex: 0 0 auto !important; min-width: unset !important; }
    .saas-tabs-container .nav-link {
        padding: 0.6rem 0.9rem !important;
        font-size: 0.82rem !important;
        white-space: nowrap;
    }
    .saas-tabs-container .nav-link i { display: none; }
    .metric-value { font-size: 1.5rem !important; }
    .live-counter { font-size: 2.2rem !important; }
    .health-dashboard .d-flex.justify-content-between { flex-direction: column; gap: 0.75rem; }
    .health-dashboard .col-md-5 { text-align: start !important; }
    .water-glass { font-size: 1.6rem !important; margin: 0 3px !important; }
}

/* ════════════════════════════════════════
   FINANCE DASHBOARD MOBILE
════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-item { flex: 0 0 auto; }
    .finance-summary-card .display-4 { font-size: 1.8rem !important; }
}

/* ════════════════════════════════════════
   SPIRITUAL DASHBOARD MOBILE
════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .spiritual-dashboard { padding: 1rem !important; }
    .spiritual-dashboard .display-5 { font-size: 1.6rem !important; }
    .streak-box { padding: 1rem !important; min-height: 90px !important; }
    .streak-num { font-size: 1.8rem !important; }
    .star-rating label { font-size: 1.8rem !important; padding: 0 2px !important; }
    .heart-radio-group label { padding: 0.5rem 0.8rem !important; font-size: 0.85rem !important; }
    .col-md-5 div[style*="width: 250px"] { width: 100% !important; }
}

/* ════════════════════════════════════════
   ADVISOR DASHBOARD MOBILE
════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .adv-hero { padding: 1.5rem !important; }
    .adv-hero h1 { font-size: 1.4rem !important; }
    .adv-hero p { font-size: 0.9rem !important; width: 100% !important; }
    .adv-hero .d-flex.justify-content-between { flex-direction: column !important; gap: 0.75rem; }
    .col-md-4 .advisor-card { margin-bottom: 1rem; }
}

/* ════════════════════════════════════════
   SIDEBAR & LAYOUT MOBILE
════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .content-wrapper main.container-fluid {
        padding-top: 4.5rem !important; /* Move down for fixed topbar */
        padding-bottom: 80px !important; /* Space for bottom nav */
    }

    .sidebar-wrapper {
        display: none !important; /* Managed by d-none d-md-block but ensure hiding */
    }

    /* Fixed Topbar Glassmorphism */
    .navbar.navbar-dark.bg-primary.fixed-top {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0,0,0,0.05);
        color: #000 !important;
    }
    .navbar.navbar-dark.bg-primary.fixed-top .navbar-brand { color: #0d6efd !important; }
    
    body.dark-mode .navbar.navbar-dark.bg-primary.fixed-top {
        background: rgba(15, 23, 42, 0.95) !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    body.dark-mode .navbar.navbar-dark.bg-primary.fixed-top .navbar-brand { color: #fff !important; }

    body.dark-mode .mobile-bottom-nav {
        background: #1e293b !important;
        border-top: 1px solid #334155 !important;
    }
    
    /* Touch target padding for bottom nav */
    .mobile-bottom-nav .nav-item { padding: 8px 0; transition: background 0.2s, transform 0.1s; border-radius: 12px; }
    .mobile-bottom-nav .nav-item:active { background: rgba(0,0,0,0.05); transform: scale(0.92); }
    body.dark-mode .mobile-bottom-nav .nav-item:active { background: rgba(255,255,255,0.05); }

    .toast-container { max-width: calc(100vw - 16px) !important; bottom: 80px !important; }
    .toast { min-width: 250px !important; max-width: calc(100vw - 16px) !important; border-radius: 12px; }
    .display-6 { font-size: 1.5rem !important; }
    h1 { font-size: 1.4rem !important; }
    h5 { font-size: 1rem !important; }
}
