/* ========================================
   ATSK TRANSPORT WEB - CONTAINER SYSTEM
   Standardized spacing & layout utilities

   Enterprise-style margins following 8px grid
   All spacing uses CSS custom properties from _design-tokens.css
   ======================================== */

/* ========================================
   PAGE CONTAINER SPACING
   Standard margins for page content areas
   ======================================== */

/* Main page wrapper - consistent padding */
.page-wrapper {
    padding: var(--space-8);  /* 32px */
}

/* Page content container with standard margins */
.page-content {
    margin-bottom: var(--space-8);  /* 32px between major sections */
}

.page-content:last-child {
    margin-bottom: 0;
}

/* ========================================
   SECTION SPACING
   Vertical spacing between content sections
   ======================================== */

/* Large section spacing (between major page sections) */
.section-spacing-lg {
    margin-bottom: var(--space-8);  /* 32px */
}

/* Medium section spacing (between related content groups) */
.section-spacing-md {
    margin-bottom: var(--space-6);  /* 24px */
}

/* Small section spacing (between closely related items) */
.section-spacing-sm {
    margin-bottom: var(--space-5);  /* 20px */
}

/* Extra small section spacing */
.section-spacing-xs {
    margin-bottom: var(--space-4);  /* 16px */
}

/* ========================================
   CARD CONTAINER SPACING
   Standard margins for card layouts
   ======================================== */

/* Card stack - vertical arrangement */
.card-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);  /* 20px between cards */
}

/* Card stack with larger gaps */
.card-stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);  /* 24px between cards */
}

/* Card row - horizontal arrangement */
.card-row {
    display: flex;
    flex-direction: row;
    gap: var(--space-5);  /* 20px between cards */
}

/* Card grid - responsive grid layout */
.card-grid {
    display: grid;
    gap: var(--space-5);  /* 20px gap */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ========================================
   LEGACY CONTAINER CLASSES
   Maintained for backward compatibility
   ======================================== */

.top-container {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-6);  /* 24px */
    margin-bottom: var(--space-8);  /* 32px */
}

    .top-container.no-margin {
        margin-bottom: 0;
    }

.top-container-name {
    margin-left: 72px;
    margin-top: var(--space-1);  /* 4px */
}

.info-container {
    display: flex;
}

.card-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);  /* 20px */
}

.card-container-full-width {
    width: 100%;
}

.card-container-vertical {
    display: flex;
    flex-direction: row;
    gap: var(--space-5);  /* 20px */
}

/* ========================================
   CONTENT AREA SPACING
   Internal spacing within containers
   ======================================== */

/* Standard content area padding */
.content-padding {
    padding: var(--space-8);  /* 32px */
}

.content-padding-md {
    padding: var(--space-6);  /* 24px */
}

.content-padding-sm {
    padding: var(--space-5);  /* 20px */
}

/* ========================================
   ROW SPACING UTILITIES
   Consistent spacing for Bootstrap grid rows
   ======================================== */

/* Row with standard bottom margin */
.row-mb {
    margin-bottom: var(--space-5);  /* 20px */
}

.row-mb-lg {
    margin-bottom: var(--space-6);  /* 24px */
}

.row-mb-xl {
    margin-bottom: var(--space-8);  /* 32px */
}

/* ========================================
   HEADER SPACING
   Page and section header margins
   ======================================== */

/* Page header area */
.page-header-spacing {
    padding-top: var(--space-8);  /* 32px */
    padding-bottom: var(--space-6);  /* 24px */
}

/* Section header spacing */
.section-header-spacing {
    margin-bottom: var(--space-5);  /* 20px */
}

/* ========================================
   FORM SPACING
   Consistent spacing for form layouts
   ======================================== */

/* Form section spacing */
.form-section {
    margin-bottom: var(--space-6);  /* 24px */
}

/* Form row spacing */
.form-row-spacing {
    margin-bottom: var(--space-4);  /* 16px */
}

/* Form actions spacing (buttons at bottom) */
.form-actions-spacing {
    margin-top: var(--space-6);  /* 24px */
    padding-top: var(--space-4);  /* 16px */
}

/* ========================================
   TABLE SPACING
   Margins for table containers
   ======================================== */

.table-container-spacing {
    margin-top: var(--space-5);  /* 20px */
}

/* ========================================
   GLOBAL CONTAINER SPACING
   Standard 24px gaps between all major containers
   Applied universally to common patterns
   ======================================== */

/* Standard gap between filter cards and content cards */
.filters-card,
.filter-card,
.search-card {
    margin-bottom: var(--space-6, 24px);
}

/* Standard gap after table cards */
.table-card,
.data-card,
.list-card {
    margin-bottom: var(--space-6, 24px);
}

/* Standard gap after content sections */
.content-section,
.data-section {
    margin-bottom: var(--space-6, 24px);
}

/* Remove bottom margin from last child */
.filters-card:last-child,
.filter-card:last-child,
.search-card:last-child,
.table-card:last-child,
.data-card:last-child,
.list-card:last-child,
.content-section:last-child,
.data-section:last-child {
    margin-bottom: 0;
}

/* Bootstrap row override - standard container gaps */
.row.g-4 > [class*="col-"] > .filters-card,
.row.g-4 > [class*="col-"] > .filter-card,
.row.g-4 > [class*="col-"] > [class*="-card"]:not(:last-child) {
    margin-bottom: var(--space-6, 24px);
}

/* ========================================
   ALERT/MESSAGE SPACING
   ======================================== */

.alert-spacing {
    margin-bottom: var(--space-5);  /* 20px */
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media screen and (max-width: 991.98px) {
    .page-wrapper {
        padding: var(--space-6);  /* 24px */
    }

    .content-padding {
        padding: var(--space-6);  /* 24px */
    }

    .section-spacing-lg {
        margin-bottom: var(--space-6);  /* 24px */
    }

    .page-header-spacing {
        padding-top: var(--space-6);  /* 24px */
        padding-bottom: var(--space-5);  /* 20px */
    }
}

@media screen and (max-width: 767.98px) {
    .page-wrapper {
        padding: var(--space-4);  /* 16px */
    }

    .content-padding {
        padding: var(--space-5);  /* 20px */
    }

    .content-padding-md {
        padding: var(--space-4);  /* 16px */
    }

    .section-spacing-lg {
        margin-bottom: var(--space-5);  /* 20px */
    }

    .section-spacing-md {
        margin-bottom: var(--space-5);  /* 20px */
    }

    .card-stack,
    .card-stack-lg {
        gap: var(--space-4);  /* 16px */
    }

    .card-row {
        flex-direction: column;
        gap: var(--space-4);  /* 16px */
    }

    .card-grid {
        gap: var(--space-4);  /* 16px */
        grid-template-columns: 1fr;
    }

    .card-container-vertical {
        flex-direction: column;
    }

    .card-container {
        order: 1;
        gap: var(--space-4);  /* 16px */
    }

    .info-container {
        flex-direction: column;
    }

    .info-container-vertical {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }

    .page-header-spacing {
        padding-top: var(--space-5);  /* 20px */
        padding-bottom: var(--space-4);  /* 16px */
    }

    .form-section {
        margin-bottom: var(--space-5);  /* 20px */
    }

    .form-actions-spacing {
        margin-top: var(--space-5);  /* 20px */
    }
}

@media screen and (max-width: 575.98px) {
    .page-wrapper {
        padding: var(--space-3);  /* 12px */
    }

    .content-padding {
        padding: var(--space-4);  /* 16px */
    }

    .content-padding-md {
        padding: var(--space-3);  /* 12px */
    }

    .content-padding-sm {
        padding: var(--space-3);  /* 12px */
    }

    .section-spacing-lg,
    .section-spacing-md {
        margin-bottom: var(--space-4);  /* 16px */
    }

    .section-spacing-sm {
        margin-bottom: var(--space-3);  /* 12px */
    }
}