/* smplfix fluid application layout
   Loaded last on every full page so page shells use the viewport consistently. */

:root {
    --smpl-layout-gutter: clamp(24px, 2.5vw, 48px);
    --smpl-layout-gutter-compact: 24px;
}

html,
body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Admin application shell
   -------------------------------------------------------------------------- */

body .main-content {
    box-sizing: border-box;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-right: var(--smpl-layout-gutter) !important;
    padding-left: var(--smpl-layout-gutter) !important;
}

body .main-content.expanded {
    width: auto !important;
    max-width: none !important;
}

body .main-content > .content-section,
body .main-content > .page-breadcrumbs {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body .content-section.active,
body .content-section.active > :where(header, section, article, div, form, nav, aside, main) {
    min-width: 0;
    max-width: 100%;
}

body :is(#order-detail, #customer-profile, #vendor-detail, #employee-detail) :is(
    .record-detail-header,
    .record-detail-layout
),
body #vendor-detail .vendor-review-banner,
body #vendor-review-detail :is(.vendor-review-detail-header, .vendor-review-detail-content) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body :is(#order-detail, #customer-profile, #vendor-detail, #employee-detail) :is(
    .record-detail-card,
    .detail-info-card,
    .order-summary-card,
    .profile-info-card
) > .info-grid,
body #customer-profile .profile-info-card > .info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body :is(#order-detail, #customer-profile, #vendor-detail, #employee-detail) :is(
    .record-detail-card,
    .detail-info-card,
    .info-grid,
    .info-item,
    .documents-list,
    .document-item,
    .notes-section,
    .orders-list
) {
    min-width: 0 !important;
    max-width: 100% !important;
}

body :is(#dashboard, #workflow-overview, .workflow-stage-section, #orders, #customers, #vendors,
    #vendor-reviews, #vendor-review-detail, #employees, #pipeline, #payments, #accounting,
    #reports, #users, #settings, #calendar, #recurring-calendar) :where(
    .page-header,
    .smpl-section-header,
    .toolbar,
    .filters,
    .workspace,
    [class$="-workspace"],
    [class$="-layout"],
    [class$="-panel"],
    [class$="-content"]
) {
    min-width: 0;
    max-width: 100%;
}

/* Wide data owns its scrolling instead of widening the document. */
body .content-section :is(
    .table-container,
    .table-wrapper,
    .table-wrap,
    [class$="-table-container"],
    [class$="-table-wrapper"],
    [class$="-table-wrap"]
) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
}

body #pipeline,
body #pipeline .pipeline-page,
body #pipeline .pipeline-header-bar,
body #pipeline .pipeline-filter-bar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: visible !important;
}

body #pipeline #stagesContainer.stages-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
}

@container dashboard-section (max-width: 1180px) {
    body :is(#order-detail, #customer-profile, #vendor-detail, #employee-detail) :is(
        .record-detail-card,
        .detail-info-card,
        .order-summary-card,
        .profile-info-card
    ) > .info-grid,
    body #customer-profile .profile-info-card > .info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@container dashboard-section (max-width: 820px) {
    body :is(#order-detail, #customer-profile, #vendor-detail, #employee-detail) :is(
        .record-detail-card,
        .detail-info-card,
        .order-summary-card,
        .profile-info-card
    ) > .info-grid,
    body #customer-profile .profile-info-card > .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@container dashboard-section (max-width: 560px) {
    body :is(#order-detail, #customer-profile, #vendor-detail, #employee-detail) :is(
        .record-detail-card,
        .detail-info-card,
        .order-summary-card,
        .profile-info-card
    ) > .info-grid,
    body #customer-profile .profile-info-card > .info-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* --------------------------------------------------------------------------
   Authentication surfaces
   -------------------------------------------------------------------------- */

body.auth-page,
body.auth-page .auth-shell,
body.auth-page .auth-workspace,
body .login-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body .login-wrapper {
    display: grid;
    min-height: 100svh;
    grid-template-columns: minmax(320px, 42%) minmax(0, 58%);
}

body .login-image-section,
body .login-form-section {
    min-width: 0;
}

body .login-form-section {
    box-sizing: border-box;
    padding-right: var(--smpl-layout-gutter);
    padding-left: var(--smpl-layout-gutter);
}

body .login-container {
    width: min(100%, 560px);
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   Secure customer and vendor workflow pages
   -------------------------------------------------------------------------- */

body :is(
    .quote-shell,
    .quote-public-shell,
    .completion-shell,
    .onboarding-shell,
    .vendor-schedule-shell,
    .closeout-public-main,
    .intake-shell
) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: var(--smpl-layout-gutter) !important;
    padding-left: var(--smpl-layout-gutter) !important;
}

body :is(
    .quote-shell,
    .quote-public-shell,
    .completion-shell,
    .onboarding-shell,
    .vendor-schedule-shell,
    .closeout-public-main,
    .intake-shell
) :is(
    .quote-public-document,
    .completion-document,
    .vendor-completion-document,
    .vendor-schedule-document,
    .closeout-public-document,
    .onboarding-form,
    .intake-form-layout
) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body :is(.quote-shell, .intake-shell) > form,
body .onboarding-shell > .onboarding-form,
body .vendor-schedule-shell > .vendor-schedule-document,
body .completion-shell > .completion-document,
body .quote-public-shell > .quote-public-document,
body .closeout-public-main > .closeout-public-document {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body > :is(
    .quote-public-header,
    .closeout-public-header,
    .completion-public-header,
    .vendor-schedule-header
) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-right: var(--smpl-layout-gutter) !important;
    padding-left: var(--smpl-layout-gutter) !important;
}

body :is(.quote-shell, .quote-public-shell, .completion-shell, .onboarding-shell, .vendor-schedule-shell) > :is(
    .quote-header,
    .quote-public-header,
    .completion-header,
    .completion-public-header,
    .onboarding-header,
    .vendor-schedule-header
) {
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    margin-right: calc(-1 * var(--smpl-layout-gutter)) !important;
    margin-left: calc(-1 * var(--smpl-layout-gutter)) !important;
}

body :is(
    .quote-public-document,
    .completion-document,
    .vendor-completion-document,
    .vendor-schedule-document,
    .closeout-public-document,
    .onboarding-form,
    .intake-form-layout
) :where(section, article, aside, form, div) {
    min-width: 0;
    max-width: 100%;
}

/* Terminal states remain intentionally readable instead of stretching. */
body :is(
    .quote-state,
    .quote-public-state,
    .completion-state,
    .completion-public-state,
    .schedule-state,
    .closeout-public-state,
    .state-card
) {
    max-width: 620px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

@media (max-width: 900px) {
    :root {
        --smpl-layout-gutter: var(--smpl-layout-gutter-compact);
    }

    body .login-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    body .login-image-section {
        display: none;
    }
}

@media (max-width: 768px) {
    body .main-content,
    body .main-content.expanded {
        padding-right: var(--smpl-layout-gutter-compact) !important;
        padding-left: var(--smpl-layout-gutter-compact) !important;
    }
}

@media (max-width: 640px) {
    body :is(
        .quote-shell,
        .quote-public-shell,
        .completion-shell,
        .onboarding-shell,
        .vendor-schedule-shell,
        .closeout-public-main,
        .intake-shell
    ) {
        padding-right: var(--smpl-layout-gutter-compact) !important;
        padding-left: var(--smpl-layout-gutter-compact) !important;
    }

    body :is(.quote-shell, .quote-public-shell, .completion-shell, .onboarding-shell, .vendor-schedule-shell) > :is(
        .quote-header,
        .quote-public-header,
        .completion-header,
        .completion-public-header,
        .onboarding-header,
        .vendor-schedule-header
    ) {
        margin-right: calc(-1 * var(--smpl-layout-gutter-compact)) !important;
        margin-left: calc(-1 * var(--smpl-layout-gutter-compact)) !important;
    }
}