/**
 * Compact Mode Styling
 * 
 * Default styling with optimized sizes for better overview.
 * Based on UI/UX best practices for standard displays.
 * 
 * Key Features:
 * - 14px base font size (WCAG compliant minimum)
 * - 4pt spacing system (4/8/12/16/24px)
 * - Reduced padding and margins for better space utilization
 * - Smaller border-radius and border-width
 * - Maintains all color schemes and visual identity
 */

:root {
    /* ========== COMPACT MODE SIZING ========== */
    
    /* Base Font Size - 14px for compact, readable text */
    font-size: 14px;
    
    /* Spacing System - 4pt grid (0.75x factor from accessibility mode) */
    --spacing-xs: 0.25rem;   /* 3.5px ≈ 4px */
    --spacing-sm: 0.5rem;    /* 7px ≈ 8px */
    --spacing-md: 0.75rem;   /* 10.5px ≈ 12px */
    --spacing-lg: 1rem;      /* 14px ≈ 16px */
    --spacing-xl: 1.5rem;    /* 21px ≈ 24px */
    
    /* Border Radius - Reduced for compact look */
    --border-radius: 8px;    /* Was 15px */
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    
    /* Border Width - Thinner borders */
    --border-width: 2px;     /* Was 3px */
    
    /* Font Sizes - Compact scale (0.875 factor) */
    --font-xs: 0.75rem;      /* 10.5px ≈ 11px */
    --font-sm: 0.875rem;     /* 12.25px ≈ 12px */
    --font-base: 1rem;       /* 14px (base) */
    --font-md: 1.15rem;      /* 16px */
    --font-lg: 1.43rem;      /* 20px */
    --font-xl: 1.71rem;      /* 24px */
    --font-2xl: 2rem;        /* 28px */
    
    /* Line Height - Optimized for readability */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Button Sizing - Compact but still touchable (min 32px height) */
    --button-padding-y: 0.5rem;    /* 7px */
    --button-padding-x: 1rem;      /* 14px */
    --button-height-sm: 2rem;      /* 28px */
    --button-height-md: 2.5rem;    /* 35px */
    --button-height-lg: 3rem;      /* 42px */
    
    /* Card/Container Padding - Reduced */
    --card-padding-sm: 0.75rem;    /* 10.5px */
    --card-padding-md: 1rem;       /* 14px */
    --card-padding-lg: 1.5rem;     /* 21px */
    
    /* Gap/Grid Spacing - Compact */
    --gap-sm: 0.5rem;      /* 7px */
    --gap-md: 0.75rem;     /* 10.5px */
    --gap-lg: 1rem;        /* 14px */
    --gap-xl: 1.5rem;      /* 21px */
}

/* ========== COMPACT-SPECIFIC ADJUSTMENTS ========== */

/* Headers - Reduced sizes */
h1 {
    font-size: var(--font-2xl);
    line-height: var(--line-height-tight);
}

h2 {
    font-size: var(--font-xl);
    line-height: var(--line-height-tight);
}

h3 {
    font-size: var(--font-lg);
    line-height: var(--line-height-normal);
}

h4 {
    font-size: var(--font-md);
    line-height: var(--line-height-normal);
}

h5, h6 {
    font-size: var(--font-base);
    line-height: var(--line-height-normal);
}

/* Body text */
body {
    font-size: var(--font-base);
    line-height: var(--line-height-normal);
}

p {
    font-size: var(--font-base);
    line-height: var(--line-height-normal);
}

/* Buttons - Compact but accessible */
button, 
.button-primary, 
.button-secondary {
    padding: var(--button-padding-y) var(--button-padding-x);
    font-size: var(--font-base);
    border-radius: var(--border-radius);
    border-width: var(--border-width);
    min-height: var(--button-height-md);
}

/* Input fields - Compact */
input, 
textarea, 
select {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-base);
    border-radius: var(--border-radius);
    border-width: var(--border-width);
}

/* Cards and containers */
.accommodation-card,
.profile-card,
.booking-card {
    padding: var(--card-padding-md);
    border-radius: var(--border-radius);
}

/* Form groups */
.form-group {
    margin-bottom: var(--spacing-lg);
}

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

/* Accommodation grid - more items visible */
.accommodations-grid {
    gap: var(--gap-md);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Navigation - Compact */
header {
    padding: var(--spacing-md) var(--spacing-lg);
}

.navbar {
    gap: var(--gap-sm);
}

/* Footer - Compact */
footer {
    padding: var(--spacing-lg) var(--spacing-md);
}

/* Dialogs - Less padding */
.custom-dialog {
    padding: var(--card-padding-lg);
    border-radius: var(--border-radius-lg);
}

/* Filter panel - Compact */
.filter-panel {
    padding: var(--spacing-md);
    gap: var(--gap-md);
}

/* Small text elements */
small, 
.text-small {
    font-size: var(--font-xs);
}

/* Icons - Slightly smaller */
.icon {
    width: 1.25rem;  /* 17.5px */
    height: 1.25rem;
}

.icon-lg {
    width: 1.75rem;  /* 24.5px */
    height: 1.75rem;
}

/* ========== RESPONSIVE - COMPACT MODE ========== */

@media (max-width: 768px) {
    :root {
        /* Mobile: Slightly less compact for touch targets */
        font-size: 15px;
        --button-height-md: 2.75rem;  /* 41px for better touch */
    }
    
    .accommodations-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-sm);
    }
}

@media (min-width: 1920px) {
    :root {
        /* Large screens: Can be more compact */
        font-size: 13px;
    }
    
    .accommodations-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* ========== NAVBAR STYLES ========== */
/* All navbar styles are now in navbar-styles.css - no overrides here */

/* Ensure Row 2 is visible on desktop */
@media (min-width: 769px) {
    .header-row-2 {
        display: flex !important;
    }
}