/* Layout System Styles */
/* Provides compact, comfortable, and spacious layout options */

/* ==========================================================================
   CSS Variables (Defaults - Comfortable)
   ========================================================================== */

:root {
    /* Font sizes */
    --layout-font-size-base: 14px;
    --layout-font-size-sm: 12px;
    --layout-font-size-lg: 16px;
    --layout-font-size-xl: 20px;
    --layout-font-size-h1: 26px;
    --layout-font-size-h2: 22px;
    --layout-font-size-h3: 18px;
    
    /* Spacing */
    --layout-spacing-xs: 6px;
    --layout-spacing-sm: 12px;
    --layout-spacing-md: 16px;
    --layout-spacing-lg: 24px;
    --layout-spacing-xl: 32px;
    
    /* Component sizes */
    --layout-sidebar-width: 250px;
    --layout-header-height: 60px;
    --layout-card-padding: 20px;
    --layout-button-padding: 10px 20px;
    --layout-input-padding: 10px 15px;
    --layout-table-cell-padding: 12px 15px;
    
    /* Border radius */
    --layout-border-radius-sm: 4px;
    --layout-border-radius-md: 8px;
    --layout-border-radius-lg: 12px;
    
    /* Line heights */
    --layout-line-height-base: 1.5;
    --layout-line-height-tight: 1.3;
}

/* ==========================================================================
   Base Layout Application
   ========================================================================== */

body {
    font-size: var(--layout-font-size-base);
    line-height: var(--layout-line-height-base);
}

/* Headers */
h1, .h1 { font-size: var(--layout-font-size-h1); }
h2, .h2 { font-size: var(--layout-font-size-h2); }
h3, .h3 { font-size: var(--layout-font-size-h3); }

/* Small text */
small, .text-sm { font-size: var(--layout-font-size-sm); }
.text-lg { font-size: var(--layout-font-size-lg); }
.text-xl { font-size: var(--layout-font-size-xl); }

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {
    width: var(--layout-sidebar-width);
    transition: width 0.3s ease;
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
    height: var(--layout-header-height);
    padding: 0 var(--layout-spacing-lg);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card,
.settings-section,
.stats-card,
.modal-content {
    padding: var(--layout-card-padding);
    border-radius: var(--layout-border-radius-lg);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn,
button:not(.hamburger-menu):not(.close-modal):not(.notification-bell) {
    padding: var(--layout-button-padding);
    border-radius: var(--layout-border-radius-md);
    font-size: var(--layout-font-size-base);
}

.btn-sm {
    padding: calc(var(--layout-spacing-xs)) calc(var(--layout-spacing-sm));
    font-size: var(--layout-font-size-sm);
}

.btn-lg {
    padding: calc(var(--layout-spacing-md)) calc(var(--layout-spacing-xl));
    font-size: var(--layout-font-size-lg);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

input,
select,
textarea {
    padding: var(--layout-input-padding);
    border-radius: var(--layout-border-radius-md);
    font-size: var(--layout-font-size-base);
}

.form-group {
    margin-bottom: var(--layout-spacing-md);
}

.form-group label {
    margin-bottom: var(--layout-spacing-xs);
    font-size: var(--layout-font-size-sm);
}

/* ==========================================================================
   Tables
   ========================================================================== */

table th,
table td {
    padding: var(--layout-table-cell-padding);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav-item {
    padding: var(--layout-spacing-sm) var(--layout-spacing-md);
    margin-bottom: var(--layout-spacing-xs);
    border-radius: var(--layout-border-radius-md);
    font-size: var(--layout-font-size-base);
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

.p-xs { padding: var(--layout-spacing-xs) !important; }
.p-sm { padding: var(--layout-spacing-sm) !important; }
.p-md { padding: var(--layout-spacing-md) !important; }
.p-lg { padding: var(--layout-spacing-lg) !important; }
.p-xl { padding: var(--layout-spacing-xl) !important; }

.m-xs { margin: var(--layout-spacing-xs) !important; }
.m-sm { margin: var(--layout-spacing-sm) !important; }
.m-md { margin: var(--layout-spacing-md) !important; }
.m-lg { margin: var(--layout-spacing-lg) !important; }
.m-xl { margin: var(--layout-spacing-xl) !important; }

.mb-xs { margin-bottom: var(--layout-spacing-xs) !important; }
.mb-sm { margin-bottom: var(--layout-spacing-sm) !important; }
.mb-md { margin-bottom: var(--layout-spacing-md) !important; }
.mb-lg { margin-bottom: var(--layout-spacing-lg) !important; }

.mt-xs { margin-top: var(--layout-spacing-xs) !important; }
.mt-sm { margin-top: var(--layout-spacing-sm) !important; }
.mt-md { margin-top: var(--layout-spacing-md) !important; }
.mt-lg { margin-top: var(--layout-spacing-lg) !important; }

.gap-xs { gap: var(--layout-spacing-xs); }
.gap-sm { gap: var(--layout-spacing-sm); }
.gap-md { gap: var(--layout-spacing-md); }
.gap-lg { gap: var(--layout-spacing-lg); }

/* ==========================================================================
   Layout-Specific Overrides - Compact
   ========================================================================== */

body.layout-compact {
    --layout-font-size-base: 13px;
    --layout-font-size-sm: 11px;
    --layout-font-size-lg: 15px;
    --layout-font-size-xl: 18px;
    --layout-font-size-h1: 22px;
    --layout-font-size-h2: 18px;
    --layout-font-size-h3: 15px;
    
    --layout-spacing-xs: 4px;
    --layout-spacing-sm: 8px;
    --layout-spacing-md: 12px;
    --layout-spacing-lg: 16px;
    --layout-spacing-xl: 20px;
    
    --layout-sidebar-width: 200px;
    --layout-header-height: 50px;
    --layout-card-padding: 12px;
    --layout-button-padding: 6px 12px;
    --layout-input-padding: 6px 10px;
    --layout-table-cell-padding: 8px 10px;
    
    --layout-border-radius-sm: 3px;
    --layout-border-radius-md: 5px;
    --layout-border-radius-lg: 8px;
    
    --layout-line-height-base: 1.4;
    --layout-line-height-tight: 1.2;
}

body.layout-compact .content {
    padding: var(--layout-spacing-md);
}

body.layout-compact .stats-grid {
    gap: var(--layout-spacing-sm);
}

body.layout-compact .logo h2 {
    font-size: 16px;
}

/* ==========================================================================
   Layout-Specific Overrides - Spacious
   ========================================================================== */

body.layout-spacious {
    --layout-font-size-base: 16px;
    --layout-font-size-sm: 14px;
    --layout-font-size-lg: 18px;
    --layout-font-size-xl: 24px;
    --layout-font-size-h1: 32px;
    --layout-font-size-h2: 26px;
    --layout-font-size-h3: 20px;
    
    --layout-spacing-xs: 8px;
    --layout-spacing-sm: 16px;
    --layout-spacing-md: 24px;
    --layout-spacing-lg: 32px;
    --layout-spacing-xl: 48px;
    
    --layout-sidebar-width: 280px;
    --layout-header-height: 70px;
    --layout-card-padding: 28px;
    --layout-button-padding: 14px 28px;
    --layout-input-padding: 14px 18px;
    --layout-table-cell-padding: 16px 20px;
    
    --layout-border-radius-sm: 6px;
    --layout-border-radius-md: 10px;
    --layout-border-radius-lg: 16px;
    
    --layout-line-height-base: 1.7;
    --layout-line-height-tight: 1.4;
}

body.layout-spacious .content {
    padding: var(--layout-spacing-lg);
}

body.layout-spacious .stats-grid {
    gap: var(--layout-spacing-lg);
}

body.layout-spacious .setting-item {
    padding: var(--layout-spacing-lg) 0;
}

/* ==========================================================================
   Comfortable Layout (Default - explicitly defined for clarity)
   ========================================================================== */

body.layout-comfortable {
    --layout-font-size-base: 14px;
    --layout-font-size-sm: 12px;
    --layout-font-size-lg: 16px;
    --layout-font-size-xl: 20px;
    --layout-font-size-h1: 26px;
    --layout-font-size-h2: 22px;
    --layout-font-size-h3: 18px;
    
    --layout-spacing-xs: 6px;
    --layout-spacing-sm: 12px;
    --layout-spacing-md: 16px;
    --layout-spacing-lg: 24px;
    --layout-spacing-xl: 32px;
    
    --layout-sidebar-width: 250px;
    --layout-header-height: 60px;
    --layout-card-padding: 20px;
    --layout-button-padding: 10px 20px;
    --layout-input-padding: 10px 15px;
    --layout-table-cell-padding: 12px 15px;
    
    --layout-border-radius-sm: 4px;
    --layout-border-radius-md: 8px;
    --layout-border-radius-lg: 12px;
    
    --layout-line-height-base: 1.5;
    --layout-line-height-tight: 1.3;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    :root,
    body.layout-compact,
    body.layout-comfortable,
    body.layout-spacious {
        --layout-sidebar-width: 100%;
    }
}

/* ==========================================================================
   Transition Animations
   ========================================================================== */

body,
.sidebar,
.header,
.card,
.btn,
input,
select,
textarea,
.nav-item,
.settings-section {
    transition: 
        font-size 0.2s ease,
        padding 0.2s ease,
        margin 0.2s ease,
        width 0.3s ease,
        height 0.3s ease;
}

/* ==========================================================================
   Print Styles - Reset to comfortable
   ========================================================================== */

@media print {
    body {
        --layout-font-size-base: 12pt;
        --layout-spacing-md: 10pt;
    }
}