/* =============================================================================
   SLDS global viewports — screen WIDTH only (never user-agent).
   Canonical URL for PHP + Bibo: /assets/slds-viewport.css

   Mobile:  0–991px
   Laptop:  992–1366px
   Desktop: 1367px and up
   ============================================================================= */

:root {
    --slds-vp-mobile-max: 991px;
    --slds-vp-laptop-min: 992px;
    --slds-vp-laptop-max: 1366px;
    --slds-vp-desktop-min: 1367px;
}

/* ── Mobile (width ≤ 991px) ──────────────────────────────────────────────── */
@media (max-width: 991px) {
    body.slds-authed .page-container {
        height: auto !important;
        overflow: visible !important;
    }
    body.slds-authed .page-main {
        margin-left: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }
    body.slds-authed .page-content-wrapper,
    body.slds-authed .page-content-wrapper .page-content,
    body.slds-authed ng-view,
    body.slds-authed [ng-view] {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Hamburger sidebar: full screen width, logo scales with it */
    body.slds-authed .page-sidebar-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }
    body.slds-authed .page-sidebar,
    body.slds-authed .page-sidebar.navbar-collapse,
    body.slds-authed .page-sidebar.navbar-collapse.in {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        box-sizing: border-box;
        background: #123044 !important;
    }
    body.slds-authed .page-sidebar .sidebar-brand {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding: 10px 12px;
        text-align: center;
        box-sizing: border-box;
    }
    body.slds-authed .page-sidebar .sidebar-brand-logo-full {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        max-height: 120px !important;
        object-fit: contain;
        margin: 0 auto !important;
    }
    body.slds-authed .page-sidebar .sidebar-brand-logo-mini {
        display: none !important;
    }
    body.slds-authed .page-sidebar img.logo-default {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
        margin: 0 auto !important;
    }
    body.slds-authed .page-content-wrapper .page-content {
        margin-left: 0 !important;
    }

    /* Top bar: fold items into profile dropdown only on mobile */
    .header-desktop-only {
        display: none !important;
    }
    .header-mobile-only {
        display: block !important;
    }

    /* Dashboard: one column for KPI cards, charts, and map */
    .page-content.dashboard-page {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }
    .page-content.dashboard-page .db_rpsCardsWrap {
        max-height: none !important;
        overflow: visible !important;
        flex: none !important;
        margin-bottom: 12px;
    }
    .page-content.dashboard-page .dashboard-kpi-row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: 0;
        margin-right: 0;
    }
    .page-content.dashboard-page .dashboard-kpi-row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 4px;
    }
    .page-content.dashboard-page .db_rpsCards {
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .page-content.dashboard-page .dashboard-lower,
    .page-content.dashboard-page .dashboard-lower > [class*="col-"] {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .page-content.dashboard-page .dashboard-charts-row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .page-content.dashboard-page .dashboard-charts-row > [class*="col-"],
    .page-content.dashboard-page .dashboard-charts-row > .col-lg-6,
    .page-content.dashboard-page .dashboard-charts-row > .col-md-12,
    .page-content.dashboard-page .dashboard-charts-row > .col-xs-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 12px;
    }
    .page-content.dashboard-page .dashboard-charts-row .portlet,
    .page-content.dashboard-page .dashboard-charts-row .portlet.light,
    .page-content.dashboard-page .dashboard-map-portlet {
        width: 100% !important;
        height: auto !important;
        min-height: 320px !important;
        max-height: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .page-content.dashboard-page .dashboard-charts-row .portlet-title,
    .page-content.dashboard-page .dash-stat-toolbar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .page-content.dashboard-page .chart-portlet-body,
    .page-content.dashboard-page .chart-portlet-body .highcharts-container {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 320px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .page-content.dashboard-page .dashboard-map-portlet [my-map] {
        width: 100% !important;
        min-height: 280px !important;
        height: 280px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* PHP login — stack brand + form, logos fit screen width */
    body.slds-login .login {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100%;
        overflow-y: auto !important;
    }
    body.slds-login .login-brandpane,
    body.slds-login .login-stage,
    body.slds-login .login-brandpane-inner,
    body.slds-login .login-card-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        height: auto !important;
    }
    body.slds-login .login-stage {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    body.slds-login .login-card-col { order: -1; }
    body.slds-login img,
    body.slds-login .gov-emblem,
    body.slds-login .program-emblem,
    body.slds-login .hero-photo img,
    body.slds-login .pcard-logo-acer,
    body.slds-login .pcard-logo-sipl {
        max-width: 100% !important;
        height: auto;
    }
    body.slds-login .feature-list,
    body.slds-login .stat-grid {
        grid-template-columns: 1fr !important;
    }
    body.slds-login .partner-cards,
    body.slds-login .program-hero-row {
        flex-direction: column !important;
    }

    /* PHP backend console */
    body.backend-app .backend-module-grid,
    html.backend-embed .backend-module-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    body.backend-app .backend-dashboard,
    html.backend-embed .backend-dashboard,
    body.backend-app .backend-card,
    body.backend-app .backend-kv-grid {
        max-width: 100% !important;
        width: 100% !important;
    }
    body.backend-app .backend-kv-grid {
        grid-template-columns: 1fr !important;
    }
    body.backend-app .backend-topbar {
        flex-wrap: wrap;
    }
    body.backend-app img,
    body.backend-app .backend-topbar-brand {
        max-width: 100%;
    }
    body.backend-app .backend-rdu-pick-meta,
    body.backend-app form.backend-log-filters {
        grid-template-columns: 1fr !important;
    }
}

/* ── Laptop + Desktop: expanded sidebar logo fills menu width ─────────────── */
@media (min-width: 992px) {
    body.slds-authed:not(.page-sidebar-closed) .page-sidebar .sidebar-brand {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 8px 10px 6px;
    }
    body.slds-authed:not(.page-sidebar-closed) .page-sidebar .sidebar-brand-logo-full {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
        margin: 0 auto !important;
    }
}

/* ── Laptop (992px–1366px) ───────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1366px) {
    .header-desktop-only {
        display: flex !important;
        align-items: center;
    }
    .header-mobile-only {
        display: none !important;
    }
    .page-header.navbar .top-menu .navbar-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }
    .page-content.dashboard-page .dashboard-kpi-row {
        display: flex;
        flex-wrap: nowrap;
    }
    .page-content.dashboard-page .dashboard-kpi-row > [class*="col-"] {
        width: 25% !important;
        max-width: 25% !important;
        flex: 1 1 25% !important;
        float: none;
        margin-bottom: 0;
    }
    .page-content.dashboard-page .dashboard-kpi-row > [class*="col-"][style*="display: none"] {
        display: none !important;
        width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden;
    }
    .page-content.dashboard-page .dashboard-charts-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    .page-content.dashboard-page .dashboard-charts-row > [class*="col-"] {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        float: none;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
    }
    .page-content.dashboard-page .dashboard-charts-row .portlet,
    .page-content.dashboard-page .dashboard-map-portlet {
        min-height: 0 !important;
        max-height: none !important;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        overflow: hidden;
        box-sizing: border-box;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .page-content.dashboard-page .chart-portlet-body,
    .page-content.dashboard-page .dashboard-map-portlet [my-map] {
        flex: 1 1 auto;
        min-height: 0 !important;
        max-height: none !important;
    }
    body.backend-app .backend-module-grid,
    html.backend-embed .backend-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Desktop (width ≥ 1367px) ────────────────────────────────────────────── */
@media (min-width: 1367px) {
    .page-content.dashboard-page .dashboard-kpi-row {
        display: flex;
        flex-wrap: nowrap;
    }
    .page-content.dashboard-page .dashboard-kpi-row > [class*="col-"] {
        width: 25% !important;
        max-width: 25% !important;
        flex: 1 1 25% !important;
        float: none;
    }
    .page-content.dashboard-page .dashboard-charts-row {
        display: flex;
        flex-wrap: nowrap;
    }
    .page-content.dashboard-page .dashboard-charts-row > [class*="col-"] {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        float: none;
    }
    body.backend-app .backend-module-grid,
    html.backend-embed .backend-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
    }
}