/*
|--------------------------------------------------------------------------
| Dream OS Mobile Polish
|--------------------------------------------------------------------------
| Recommended path:
| public_html/platform-assets/mobile-polish.css
|--------------------------------------------------------------------------
| Purpose:
| Fix mobile layout, image sizing, text wrapping, buttons, dashboard cards,
| tables, sidebars, and phone responsiveness across Dream OS pages.
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    -webkit-text-size-adjust:100%;
}

img,
video,
iframe,
svg{
    max-width:100%;
    height:auto;
}

img{
    object-fit:cover;
}

a,
button,
input,
select,
textarea{
    max-width:100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
strong,
small,
td,
th,
li,
a{
    overflow-wrap:anywhere;
    word-break:normal;
}

table{
    width:100%;
    border-collapse:collapse;
}

.table-wrap,
.table-responsive{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

/*
|--------------------------------------------------------------------------
| Tablet / Small Laptop
|--------------------------------------------------------------------------
*/

@media(max-width:1100px){

    .dashboard-layout{
        display:block !important;
        width:96% !important;
        max-width:96% !important;
        margin:22px auto !important;
        grid-template-columns:1fr !important;
    }

    .dashboard-main{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        padding:0 !important;
        overflow:hidden !important;
    }

    .sidebar,
    .dream-sidebar{
        width:100% !important;
        min-height:auto !important;
        height:auto !important;
        max-height:none !important;
        position:relative !important;
        top:auto !important;
        left:auto !important;
        border-radius:24px !important;
        margin:0 0 22px !important;
        overflow:visible !important;
    }

    .sidebar a,
    .dream-sidebar a{
        min-height:44px !important;
    }

    .grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .metric-grid,
    .business-grid,
    .product-grid,
    .directory-grid,
    .offer-grid,
    .finance-grid-2,
    .finance-grid-3,
    .finance-grid-4,
    .dream-grid-2,
    .dream-grid-3,
    .dream-kpi-grid,
    .dream-module-grid,
    .dream-product-grid,
    .onboarding-grid,
    .hero-inner,
    .hero-grid,
    .directory-inner,
    .offer-hero,
    .finance-hero{
        grid-template-columns:1fr !important;
    }

    .card,
    .metric-card,
    .stat-card,
    .dream-card,
    .dream-kpi,
    .dream-module-card,
    .onboarding-card{
        border-radius:24px !important;
        padding:22px !important;
        width:100% !important;
        max-width:100% !important;
    }

    h1{
        font-size:42px !important;
        line-height:1.04 !important;
        letter-spacing:-1.8px !important;
    }

    h2{
        font-size:32px !important;
        line-height:1.1 !important;
        letter-spacing:-1px !important;
    }

    h3{
        font-size:22px !important;
        line-height:1.15 !important;
    }

    p{
        font-size:16px !important;
        line-height:1.65 !important;
    }
}

/*
|--------------------------------------------------------------------------
| Phones
|--------------------------------------------------------------------------
*/

@media(max-width:760px){

    body{
        overflow-x:hidden !important;
    }

    .dashboard-layout,
    .dream-dashboard-shell,
    .dashboard-main,
    main,
    section{
        max-width:100% !important;
    }

    .dream-dashboard-shell{
        padding:18px !important;
    }

    .topbar,
    .top-nav,
    .header,
    .site-header,
    .nav,
    .admin-nav,
    .admin-nav-wrapper{
        position:relative !important;
        width:100% !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        justify-content:flex-start !important;
        gap:14px !important;
        padding:16px !important;
        border-radius:0 !important;
    }

    .topbar strong{
        width:100% !important;
        display:block !important;
        font-size:17px !important;
        line-height:1.3 !important;
    }

    .topbar-actions,
    .nav,
    .main-nav,
    .nav-links,
    .admin-nav-links,
    .sidebar-links{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    .topbar-actions a,
    .nav a,
    .main-nav a,
    .nav-links a,
    .admin-nav-btn,
    .sidebar-links a,
    .sidebar a,
    .dream-sidebar a{
        display:flex !important;
        width:100% !important;
        min-height:44px !important;
        align-items:center !important;
        justify-content:space-between !important;
        text-align:left !important;
        margin:0 !important;
        white-space:normal !important;
    }

    .actions,
    .dream-actions,
    .btn-row{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        width:100% !important;
        gap:10px !important;
    }

    .btn,
    .dream-btn,
    button,
    .btn-light,
    .btn-secondary,
    .nav-cta,
    input[type="submit"]{
        width:100% !important;
        min-height:46px !important;
        text-align:center !important;
        justify-content:center !important;
        white-space:normal !important;
        line-height:1.25 !important;
    }

    input,
    select,
    textarea{
        width:100% !important;
        font-size:16px !important;
        line-height:1.4 !important;
    }

    .hero,
    .hero-wrap,
    .section,
    .wrap,
    .finance-wrap,
    .directory-wrap,
    .offer-main{
        width:94% !important;
        max-width:94% !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .hero-inner,
    .hero-grid,
    .directory-inner,
    .offer-hero,
    .finance-hero,
    .dream-hero-grid,
    .onboarding-head{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:24px !important;
    }

    .hero-image,
    .visual-box,
    .visual-panel,
    .hero-visual,
    .device-card,
    .dashboard,
    .dark,
    .cta,
    .cta-box,
    .dream-hero,
    .onboarding-panel,
    .dream-profile-card{
        min-height:auto !important;
        height:auto !important;
        border-radius:24px !important;
        overflow:hidden !important;
    }

    .dream-hero,
    .onboarding-panel{
        padding:24px !important;
    }

    .dream-hero h1,
    .onboarding-panel h2{
        font-size:36px !important;
        line-height:1.04 !important;
        letter-spacing:-1.6px !important;
    }

    .dream-hero p,
    .onboarding-panel p,
    .dream-card p,
    .dream-module-card p{
        font-size:15.5px !important;
        line-height:1.65 !important;
    }

    .dream-hero-badges{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
        width:100% !important;
    }

    .dream-pill{
        width:100% !important;
        justify-content:flex-start !important;
        white-space:normal !important;
        line-height:1.35 !important;
    }

    .business-image,
    .product-card img,
    .dream-product img,
    .visual,
    .visual-image,
    .big-image,
    .detail-card img,
    .engine-image img{
        width:100% !important;
        height:220px !important;
        max-height:260px !important;
        object-fit:cover !important;
        object-position:center !important;
    }

    .dream-score-ring,
    .onboarding-percent{
        width:112px !important;
        height:112px !important;
    }

    .dream-score-inner,
    .onboarding-percent-inner{
        width:82px !important;
        height:82px !important;
    }

    .table-wrap,
    .dream-card:has(table),
    .card:has(table){
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
    }

    table{
        min-width:720px !important;
    }

    th,
    td{
        white-space:nowrap !important;
        font-size:13px !important;
        padding:12px !important;
    }

    .footer,
    footer{
        text-align:left !important;
        padding:32px 20px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Small Phones
|--------------------------------------------------------------------------
*/

@media(max-width:480px){

    .dashboard-layout{
        width:94% !important;
        max-width:94% !important;
        margin:16px auto !important;
    }

    .dream-dashboard-shell{
        padding:14px !important;
    }

    h1,
    .dream-hero h1{
        font-size:32px !important;
        line-height:1.04 !important;
        letter-spacing:-1.2px !important;
    }

    h2,
    .onboarding-panel h2{
        font-size:27px !important;
        line-height:1.08 !important;
        letter-spacing:-.7px !important;
    }

    h3{
        font-size:20px !important;
    }

    p{
        font-size:15px !important;
        line-height:1.6 !important;
    }

    .card,
    .metric-card,
    .dream-card,
    .dream-kpi,
    .dream-module-card,
    .onboarding-card{
        padding:18px !important;
        border-radius:20px !important;
    }

    .metric-card strong,
    .dream-kpi strong{
        font-size:28px !important;
    }

    .business-image,
    .product-card img,
    .dream-product img,
    .visual,
    .visual-image,
    .big-image,
    .detail-card img,
    .engine-image img{
        height:190px !important;
    }

    .sidebar,
    .dream-sidebar{
        padding:20px 16px !important;
        border-radius:20px !important;
    }
}