/* 
 * Standardized Layout Spacing for Store Control System
 * This file ensures consistent spacing between headers and content throughout the app
 */

:root {
    /* Standard spacing variables */
    --header-spacing: 1.5rem;
    --content-spacing: 1rem;  /* Reduced from 2rem to 1rem */
    --section-spacing: 1.25rem;
    --container-padding: 1rem;
}

/* 
 * Standard Header Spacing 
 * Applies consistent margin-bottom to all header sections
 */
.admin-header,
.page-header,
.section-header,
.bg-success.px-4.py-3.mb-4 {
    margin-bottom: var(--header-spacing) !important;
}

/* 
 * Container Spacing Standardization
 * Ensures consistent padding across all containers
 * Note: container-fluid elements removed to avoid double-container issues
 */
.container {
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 1rem !important;
}

/* 
 * Main Content Area Spacing
 * Consistent spacing for main content after fixed header
 */
main {
    margin-top: var(--content-spacing) !important;
}

/* 
 * Stats Grid and Quick Links Spacing
 */
.stats-grid {
    margin-bottom: var(--header-spacing) !important;
}

.quick-links {
    margin-bottom: var(--header-spacing) !important;
}

/* 
 * Table Container Spacing
 */
.users-table-container,
.clients-table-container,
.table-container {
    margin-bottom: var(--header-spacing) !important;
}

/* 
 * Dashboard Specific Spacing
 */
.dashboard-container .admin-header {
    margin-bottom: var(--header-spacing) !important;
}

/* 
 * Super Admin Dashboard Spacing
 */
.admin-dashboard .admin-header {
    margin-bottom: var(--section-spacing) !important;
}

/* 
 * Setup Pages Spacing
 */
.bg-success {
    margin-bottom: var(--header-spacing) !important;
}

/* 
 * Card and Alert Spacing
 */
.impersonation-alert {
    margin-bottom: var(--header-spacing) !important;
}

.card {
    margin-bottom: var(--section-spacing) !important;
}

/* 
 * Mobile Responsive Spacing Adjustments
 */
@media (max-width: 768px) {
    :root {
        --header-spacing: 1rem;
        --content-spacing: 0.75rem;  /* Reduced from 1.5rem to 0.75rem */
        --section-spacing: 1rem;
        --container-padding: 0.75rem;
    }
    
    body {
        padding-top: 260px !important; /* Mobile header height */
    }
    
    main {
        margin-top: 0.75rem !important;  /* Updated to match variable */
    }
    
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

@media (min-width: 769px) {
    body {
        padding-top: 200px !important; /* Desktop header height */
    }
}

/* 
 * Fix for Inconsistent Table Headers
 */
.table-header {
    padding: 1rem 1.5rem !important;
}

.table-header h3 {
    margin-bottom: 0 !important;
}

/* 
 * Consistent Page Title Spacing
 */
.page-title,
h1.page-title,
h2.page-title,
h3.page-title {
    margin-bottom: var(--header-spacing) !important;
}

/* 
 * Breadcrumb Spacing (if used)
 */
.breadcrumb {
    margin-bottom: var(--section-spacing) !important;
}

/* 
 * Form Section Spacing
 */
.form-section,
.modal-body {
    padding: var(--section-spacing) !important;
}

/* 
 * Button Group Spacing
 */
.btn-toolbar,
.action-buttons {
    margin-bottom: var(--section-spacing) !important;
}

/* 
 * Ensure consistent spacing between different content blocks
 */
.content-block + .content-block,
.stat-card + .quick-links,
.admin-header + .stats-grid {
    margin-top: var(--section-spacing) !important;
}