/**
 * Demian Solar Assessment
 * Responsive layout rules — Application Shell V2.
 *
 * Desktop (961px+) uses the fixed SaaS application frame defined
 * at the bottom of frontend.css.
 * Tablet/mobile intentionally return to normal document scrolling.
 */


/* =========================================================
   SMALL LAPTOP / TABLET LANDSCAPE
   ========================================================= */

@media (max-width: 1180px) and (min-width: 961px) {

    .dsa-software-shell {
        --dsa-shell-v2-sidebar: 248px;
    }

    .dsa-software-shell .dsa-sidebar-step-icon {
        display: none;
    }

    .dsa-software-shell .dsa-step-label {
        font-size: 12px !important;
    }

    .dsa-software-shell .dsa-building-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dsa-software-shell .dsa-appliance-grid {
        grid-template-columns: 1fr !important;
    }

    .dsa-software-shell .dsa-appliance-fields {
        grid-template-columns:
            minmax(170px, .8fr)
            minmax(190px, 1.2fr) !important;
    }

    .dsa-preview-analysis-grid,
    .dsa-blueprint-grid,
    .dsa-payment-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   TABLET — RETURN TO NORMAL PAGE SCROLLING
   ========================================================= */

@media (max-width: 960px) {

    .dsa-assessment-app.dsa-software-shell {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 0 28px !important;
        overflow: visible !important;
        border: 0;
    }

    .dsa-assessment-app.dsa-software-shell > .dsa-app-header {
        display: flex !important;
    }

    .dsa-software-shell .dsa-application-layout {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .dsa-software-shell .dsa-software-sidebar {
        display: none !important;
    }

    .dsa-software-shell .dsa-workspace,
    .dsa-software-shell .dsa-workspace-view,
    .dsa-software-shell .dsa-assessment-workspace,
    .dsa-software-shell .dsa-live-assessment-view {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        overflow: visible !important;
    }

    .dsa-software-shell .dsa-workspace-header,
    .dsa-software-shell .dsa-progress,
    .dsa-software-shell .dsa-live-view-header,
    .dsa-software-shell [data-step-panel="4"] .dsa-appliance-toolbar {
        position: static !important;
        top: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .dsa-software-shell .dsa-mobile-step-navigation {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
    }

    .dsa-software-shell .dsa-mobile-step-navigation .dsa-step-tab {
        min-width: 150px;
        scroll-snap-align: start;
    }

    .dsa-assessment-app.dsa-software-shell
    .dsa-assessment-workspace
    .dsa-wizard-shell-full {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 20px !important;
        overflow: visible !important;
    }

    .dsa-building-grid,
    .dsa-purpose-grid,
    .dsa-budget-grid,
    .dsa-future-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dsa-appliance-grid,
    .dsa-preview-analysis-grid,
    .dsa-blueprint-grid,
    .dsa-payment-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .dsa-appliance-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .dsa-software-shell .dsa-appliance-fields {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
    }

    .dsa-software-shell
    .dsa-appliance-fields
    > .dsa-field-group:first-child {
        grid-column: 1 / -1 !important;
    }

    .dsa-preview-metrics,
    .dsa-blueprint-metrics,
    .dsa-live-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .dsa-assessment-app {
        padding: 0 0 24px;
    }

    .dsa-app-header {
        padding: 20px;
    }

    .dsa-brand-block {
        gap: 12px;
    }

    .dsa-brand-mark {
        width: 47px;
        height: 47px;
        flex-basis: 47px;
    }

    .dsa-app-title {
        font-size: 31px;
    }

    .dsa-app-description {
        font-size: 14px;
    }

    .dsa-step-navigation {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .dsa-step-tab {
        min-width: 150px;
        scroll-snap-align: start;
    }

    .dsa-assessment-form,
    .dsa-summary-card {
        padding: 17px;
        border-radius: 18px;
    }

    .dsa-building-grid,
    .dsa-purpose-grid,
    .dsa-budget-grid,
    .dsa-future-grid,
    .dsa-appliance-grid,
    .dsa-preview-analysis-grid,
    .dsa-preview-metrics,
    .dsa-blueprint-grid,
    .dsa-blueprint-metrics,
    .dsa-payment-form-grid,
    .dsa-payment-benefits,
    .dsa-payment-trust,
    .dsa-locked-feature-list,
    .dsa-blueprint-materials,
    .dsa-cost-driver-list,
    .dsa-custom-appliance-grid,
    .dsa-summary-list,
    .dsa-live-metric-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .dsa-choice-card-content {
        padding: 15px;
    }

    .dsa-appliance-card-header,
    .dsa-preview-hero,
    .dsa-blueprint-hero,
    .dsa-premium-unlock-header,
    .dsa-payment-card-header,
    .dsa-blueprint-highlight,
    .dsa-section-heading,
    .dsa-selected-summary-header {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Category headings remain horizontal so users can scan them quickly. */
    .dsa-software-shell .dsa-category-heading {
        flex-direction: row !important;
        align-items: center !important;
    }

    .dsa-appliance-load-badge {
        width: 100%;
        max-width: none !important;
        text-align: left;
    }

    .dsa-software-shell .dsa-appliance-fields {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .dsa-software-shell
    .dsa-appliance-fields
    > .dsa-field-group:first-child {
        grid-column: auto !important;
    }

    .dsa-appliance-calculation,
    .dsa-appliance-totals {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .dsa-preview-score,
    .dsa-blueprint-confidence {
        width: 100%;
        min-width: 0;
    }

    .dsa-inline-options {
        flex-direction: column;
    }

    .dsa-small-choice,
    .dsa-small-choice > span {
        width: 100%;
    }

    .dsa-locked-feature {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .dsa-locked-pill {
        grid-column: 2;
        justify-self: start;
    }

    .dsa-wizard-actions {
        flex-direction: column-reverse;
    }

    .dsa-wizard-actions .dsa-button,
    .dsa-custom-appliance-actions .dsa-button {
        width: 100%;
    }

    .dsa-custom-appliance-actions {
        flex-direction: column;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .dsa-app-title {
        font-size: 27px;
    }

    .dsa-step-intro h2 {
        font-size: 25px;
    }

    .dsa-assessment-form {
        padding: 14px;
    }

    .dsa-choice-copy {
        padding-right: 20px;
    }

    .dsa-choice-icon,
    .dsa-appliance-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .dsa-payment-price > strong {
        font-size: 29px;
    }

    .dsa-software-shell .dsa-category-heading {
        gap: 10px !important;
        padding: 14px 14px 14px 16px !important;
    }

    .dsa-software-shell .dsa-category-heading h3 {
        font-size: 21px !important;
    }

    .dsa-software-shell .dsa-category-count {
        padding: 6px 9px !important;
        font-size: 10px !important;
    }
}