/* Page Layout Unification Styles */
/* Minimal CSS for consistent spacing and responsive behavior */

/* Page Header */
.page-header {
    padding-top: 1.5rem; /* 24px mobile */
    padding-bottom: 1rem; /* 16px mobile */
}

@media (min-width: 768px) {
    .page-header {
        padding-top: 2rem; /* 32px desktop */
        padding-bottom: 1.5rem; /* 24px desktop */
    }
}

.page-header-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .page-header-title {
        font-size: 2.5rem;
    }
}

.page-header-subtitle {
    font-size: 1.125rem;
    line-height: 1.5;
}

.page-header-stats {
    margin-top: 0.75rem;
}

.page-header-stats .badge {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    font-weight: 500;
}

/* Page Toolbar */
.page-toolbar {
    padding-top: 1rem; /* 16px */
    padding-bottom: 1rem; /* 16px */
}

/* Consistent spacing between major sections */
.page-section {
    margin-top: 1.5rem; /* 24px */
    margin-bottom: 1.5rem; /* 24px */
}

/* Sections with backgrounds need padding */
.page-section[class*="bg-"] {
    padding-top: 2rem; /* 32px */
    padding-bottom: 2rem; /* 32px */
}

@media (min-width: 768px) {
    .page-section {
        margin-top: 2rem; /* 32px */
        margin-bottom: 2rem; /* 32px */
    }
    
    .page-section[class*="bg-"] {
        padding-top: 3rem; /* 48px */
        padding-bottom: 3rem; /* 48px */
    }
}

/* Content spacing between stacked components */
.content-spacing {
    margin-top: 1rem; /* 16px */
}

@media (min-width: 768px) {
    .content-spacing {
        margin-top: 1.5rem; /* 24px */
    }
}

/* Page Container - wrapper for consistent page structure */
/* Note: Bootstrap .container handles padding, this is just a wrapper */
.page-container {
    width: 100%;
}

/* Mobile-first responsive adjustments */
@media (max-width: 767px) {
    .page-header-title {
        font-size: 1.75rem;
    }
    
    .page-header-subtitle {
        font-size: 1rem;
    }
    
    .page-toolbar .d-flex {
        flex-direction: column;
    }
    
    .page-toolbar .d-flex > * {
        width: 100%;
    }
}