/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-01F
   Layout Foundation
   File: /opt/simplpay/static/css/005-layout.css
   ========================================================== */

.sp-page {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
}

.sp-page-shell {
    width: min(
        100%,
        var(--sp-page-max-width)
    );
    margin: 0 auto;
    padding:
        calc(
            var(--sp-safe-top)
            +
            var(--sp-space-4)
        )
        max(
            var(--sp-page-gutter),
            var(--sp-safe-right)
        )
        calc(
            var(--sp-bottom-nav-height)
            +
            var(--sp-safe-bottom)
            +
            var(--sp-space-8)
        )
        max(
            var(--sp-page-gutter),
            var(--sp-safe-left)
        );
}

.sp-content {
    width: min(
        100%,
        var(--sp-content-max-width)
    );
    margin: 0 auto;
}

.sp-content-wide {
    width: min(
        100%,
        var(--sp-page-max-width)
    );
    margin: 0 auto;
}

.sp-section {
    width: 100%;
    margin-top: var(--sp-space-6);
}

.sp-section:first-child {
    margin-top: 0;
}

.sp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-space-3);
    margin-bottom: var(--sp-space-4);
}

.sp-section-title {
    margin: 0;
    color: var(--sp-text-primary);
    font-size: var(--sp-font-size-xl);
    font-weight: var(--sp-weight-black);
    letter-spacing: var(--sp-letter-tight);
}

.sp-section-subtitle {
    margin-top: var(--sp-space-1);
    color: var(--sp-text-tertiary);
    font-size: var(--sp-font-size-sm);
    line-height: var(--sp-line-md);
}

.sp-stack {
    display: flex;
    flex-direction: column;
}

.sp-stack-xs {
    gap: var(--sp-space-2);
}

.sp-stack-sm {
    gap: var(--sp-space-3);
}

.sp-stack-md {
    gap: var(--sp-space-4);
}

.sp-stack-lg {
    gap: var(--sp-space-6);
}

.sp-stack-xl {
    gap: var(--sp-space-8);
}

.sp-row {
    display: flex;
    align-items: center;
}

.sp-row-start {
    display: flex;
    align-items: flex-start;
}

.sp-row-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp-row-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.sp-gap-1 {
    gap: var(--sp-space-1);
}

.sp-gap-2 {
    gap: var(--sp-space-2);
}

.sp-gap-3 {
    gap: var(--sp-space-3);
}

.sp-gap-4 {
    gap: var(--sp-space-4);
}

.sp-gap-5 {
    gap: var(--sp-space-5);
}

.sp-gap-6 {
    gap: var(--sp-space-6);
}

.sp-grid {
    display: grid;
    gap: var(--sp-space-4);
}

.sp-grid-2 {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

.sp-grid-3 {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

.sp-grid-4 {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}

.sp-grid-auto {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 180px),
                1fr
            )
        );
}

.sp-grid-auto-lg {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 240px),
                1fr
            )
        );
}

.sp-col-span-2 {
    grid-column: span 2;
}

.sp-col-span-full {
    grid-column: 1 / -1;
}

.sp-flex-1 {
    flex: 1 1 0%;
}

.sp-flex-auto {
    flex: 1 1 auto;
}

.sp-flex-none {
    flex: none;
}

.sp-shrink-0 {
    flex-shrink: 0;
}

.sp-grow {
    flex-grow: 1;
}

.sp-center {
    display: grid;
    place-items: center;
}

.sp-full-width {
    width: 100%;
}

.sp-full-height {
    min-height: 100vh;
    min-height: 100dvh;
}

.sp-relative {
    position: relative;
}

.sp-sticky-top {
    position: sticky;
    top:
        calc(
            var(--sp-safe-top)
            +
            var(--sp-space-3)
        );
    z-index: var(--sp-z-sticky);
}

.sp-fixed-bottom {
    position: fixed;
    left:
        max(
            var(--sp-page-gutter),
            var(--sp-safe-left)
        );
    right:
        max(
            var(--sp-page-gutter),
            var(--sp-safe-right)
        );
    bottom:
        max(
            var(--sp-space-3),
            var(--sp-safe-bottom)
        );
    z-index: var(--sp-z-nav);
}

.sp-safe-container {
    padding-top: var(--sp-safe-top);
    padding-right: var(--sp-safe-right);
    padding-bottom: var(--sp-safe-bottom);
    padding-left: var(--sp-safe-left);
}

.sp-main-header {
    min-height: var(--sp-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-space-4);
    margin-bottom: var(--sp-space-5);
}

.sp-main-header-left,
.sp-main-header-right {
    display: flex;
    align-items: center;
    gap: var(--sp-space-3);
}

.sp-main-title {
    margin: 0;
    color: var(--sp-text-primary);
    font-size:
        clamp(
            24px,
            5vw,
            34px
        );
    font-weight: var(--sp-weight-black);
    letter-spacing: var(--sp-letter-tight);
    line-height: 1.05;
}

.sp-main-subtitle {
    margin-top: var(--sp-space-1);
    color: var(--sp-text-tertiary);
    font-size: var(--sp-font-size-sm);
    line-height: var(--sp-line-md);
}

.sp-dashboard-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: var(--sp-space-3);
}

.sp-dashboard-feature {
    grid-column: 1 / -1;
}

.sp-action-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: var(--sp-space-3);
}

.sp-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: var(--sp-space-3);
}

.sp-list {
    display: grid;
    gap: var(--sp-space-3);
}

.sp-list-item {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: var(--sp-space-3);
}

.sp-list-main {
    min-width: 0;
}

.sp-list-title {
    overflow: hidden;
    color: var(--sp-text-primary);
    font-size: var(--sp-font-size-md);
    font-weight: var(--sp-weight-extrabold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-list-subtitle {
    margin-top: 2px;
    overflow: hidden;
    color: var(--sp-text-tertiary);
    font-size: var(--sp-font-size-xs);
    line-height: var(--sp-line-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-form {
    display: grid;
    gap: var(--sp-space-4);
}

.sp-form-row {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: var(--sp-space-3);
}

.sp-field {
    display: grid;
    gap: var(--sp-space-2);
}

.sp-field-label {
    color: var(--sp-text-secondary);
    font-size: var(--sp-font-size-sm);
    font-weight: var(--sp-weight-bold);
}

.sp-field-help {
    color: var(--sp-text-muted);
    font-size: var(--sp-font-size-xs);
    line-height: var(--sp-line-md);
}

.sp-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-space-3);
}

.sp-actions-stretch > * {
    flex: 1 1 0;
}

.sp-modal-layout {
    display: grid;
    gap: var(--sp-space-5);
}

.sp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-space-3);
}

.sp-modal-title {
    margin: 0;
    color: var(--sp-text-primary);
    font-size: var(--sp-font-size-xl);
    font-weight: var(--sp-weight-black);
    letter-spacing: var(--sp-letter-tight);
}

.sp-modal-body {
    min-height: 0;
}

.sp-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-space-3);
}

.sp-bottom-space {
    height:
        calc(
            var(--sp-bottom-nav-height)
            +
            var(--sp-safe-bottom)
            +
            var(--sp-space-6)
        );
}

.sp-scroll-area {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.sp-horizontal-scroll {
    display: flex;
    gap: var(--sp-space-3);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.sp-horizontal-scroll::-webkit-scrollbar {
    display: none;
}

.sp-horizontal-scroll > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.sp-aspect-square {
    aspect-ratio: 1;
}

.sp-aspect-video {
    aspect-ratio: 16 / 9;
}

.sp-hidden {
    display: none !important;
}

.sp-visible-mobile {
    display: none !important;
}

.sp-visible-desktop {
    display: revert;
}

@media (min-width: 900px) {

    .sp-dashboard-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .sp-dashboard-feature {
        grid-column: span 2;
        grid-row: span 2;
    }

    .sp-action-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .sp-summary-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

}

@media (max-width: 768px) {

    .sp-page-shell {
        padding-top:
            calc(
                var(--sp-safe-top)
                +
                var(--sp-space-3)
            );
    }

    .sp-main-header {
        min-height: auto;
        align-items: flex-start;
    }

    .sp-grid-3,
    .sp-grid-4 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .sp-form-row {
        grid-template-columns: 1fr;
    }

    .sp-visible-mobile {
        display: revert !important;
    }

    .sp-visible-desktop {
        display: none !important;
    }

}

@media (max-width: 430px) {

    .sp-page-shell {
        padding-left:
            max(
                14px,
                var(--sp-safe-left)
            );
        padding-right:
            max(
                14px,
                var(--sp-safe-right)
            );
    }

    .sp-dashboard-grid,
    .sp-grid-2,
    .sp-grid-3,
    .sp-grid-4,
    .sp-action-grid,
    .sp-summary-grid {
        grid-template-columns: 1fr;
    }

    .sp-dashboard-feature {
        grid-column: auto;
        grid-row: auto;
    }

    .sp-main-title {
        font-size: 26px;
    }

    .sp-actions,
    .sp-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .sp-actions > *,
    .sp-modal-footer > * {
        width: 100%;
    }

    .sp-list-item {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .sp-list-item > :last-child {
        grid-column: 1 / -1;
    }

}

@media (orientation: landscape)
and (max-height: 520px) {

    .sp-page-shell {
        padding-top:
            calc(
                var(--sp-safe-top)
                +
                var(--sp-space-2)
            );
    }

    .sp-main-header {
        margin-bottom: var(--sp-space-3);
    }

    .sp-section {
        margin-top: var(--sp-space-4);
    }

}

@media (prefers-reduced-motion: reduce) {

    .sp-scroll-area,
    .sp-horizontal-scroll {
        scroll-behavior: auto;
    }

}