/* RESPONSIVE SPACING & LAYOUT SYSTEM
 * Eliminates dead space by dynamically adjusting layout based on viewport dimensions
 * Handles landscape/portrait orientation switching and all screen sizes
 */

:root {
    /* Desktop (1200px+): generous spacing */
    --container-padding: 32px;
    --grid-gap-large: 24px;
    --grid-gap-medium: 20px;
    --grid-gap-small: 16px;
    --section-margin: 32px;

    /* Dynamic breakpoints using aspect ratio */
    /* Landscape phones/tablets (aspect ratio > 1.5): tighter spacing to use width */
    /* Portrait phones/tablets (aspect ratio < 1): full-width single column */
}

/* ============================================================================
 * LANDSCAPE MODE (Aspect Ratio > 1.2)
 * Wide screens: maximize horizontal space, reduce vertical gaps
 * ============================================================================ */
@media (prefers-orientation: landscape) and (max-height: 640px) {
    :root {
        --container-padding: 16px;
        --grid-gap-large: 20px;
        --grid-gap-medium: 16px;
        --grid-gap-small: 12px;
        --section-margin: 16px;
    }

    /* FIX #199630: Removed all rules — these were overriding dashboard's responsive design */
    /* Landscape-specific layout adjustments */
    .container {
        padding: var(--container-padding);
    }

    /* 2-column grid for landscape phones */
    .widgets-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-medium);
        margin-bottom: var(--section-margin);
    }

    /* 2-column for quick actions in landscape */
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-small);
        margin-bottom: var(--section-margin);
    }

    /* Reduce padding in cards for landscape */
    .widget, .action-btn {
        padding: 16px;
    }

    .widget-title {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .widget-value {
        font-size: 24px;
    }

    /* Reduce section margins in landscape */
    .section {
        margin-bottom: var(--section-margin);
    }

    .page-header {
        margin-bottom: 16px;
    }

    .page-header h2 {
        font-size: 28px;
        margin-bottom: 4px;
    }

    .page-header p {
        font-size: 13px;
        margin-bottom: 0;
    }
}

/* ============================================================================
 * TABLET LANDSCAPE (768px - 1024px width, landscape)
 * Use horizontal space efficiently: 3-column grids where appropriate
 * ============================================================================ */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    :root {
        --container-padding: 24px;
        --grid-gap-large: 20px;
        --grid-gap-medium: 18px;
        --grid-gap-small: 14px;
    }

    .container {
        padding: var(--container-padding);
    }

    .widgets-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--grid-gap-large);
    }

    .quick-actions {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--grid-gap-medium);
    }

    .widget {
        padding: 18px;
    }

    .widget-title {
        font-size: 12px;
    }

    .widget-value {
        font-size: 26px;
    }
}

/* ============================================================================
 * DESKTOP LANDSCAPE (1024px+)
 * Full desktop layout: 4-5 column grids, generous spacing
 * ============================================================================ */
@media (min-width: 1025px) and (orientation: landscape) {
    :root {
        --container-padding: 32px;
        --grid-gap-large: 24px;
        --grid-gap-medium: 20px;
        --grid-gap-small: 16px;
    }

    .container {
        padding: var(--container-padding);
    }

    .widgets-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--grid-gap-large);
    }

    .quick-actions {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--grid-gap-medium);
    }
}

/* ============================================================================
 * PORTRAIT MODE
 * Vertical screens: full-width single/dual column layout, reduce horizontal padding
 * ============================================================================ */
@media (prefers-orientation: portrait) {
    :root {
        --container-padding: 16px;
        --grid-gap-large: 16px;
        --grid-gap-medium: 14px;
        --grid-gap-small: 12px;
        --section-margin: 20px;
    }

    .container {
        padding: var(--container-padding);
    }

    /* Portrait: single column by default, or 2 columns if width allows */
    .widgets-grid {
        grid-template-columns: 1fr;
        gap: var(--grid-gap-large);
        margin-bottom: var(--section-margin);
    }

    .quick-actions {
        grid-template-columns: 1fr;
        gap: var(--grid-gap-medium);
        margin-bottom: var(--section-margin);
    }

    .section {
        margin-bottom: var(--section-margin);
    }
}

/* ============================================================================
 * TABLET PORTRAIT (768px width, portrait)
 * Wide enough for 2-column layout
 * ============================================================================ */
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
    :root {
        --container-padding: 20px;
        --grid-gap-large: 18px;
        --grid-gap-medium: 16px;
    }

    .container {
        padding: var(--container-padding);
    }

    .widgets-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-large);
    }

    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-medium);
    }

    .widget {
        padding: 18px;
    }
}

/* ============================================================================
 * SMALL PHONE PORTRAIT (< 480px)
 * Maximum compression: minimal padding, no margins
 * ============================================================================ */
@media (max-width: 480px) {
    :root {
        --container-padding: 12px;
        --grid-gap-large: 12px;
        --grid-gap-medium: 10px;
        --grid-gap-small: 8px;
        --section-margin: 16px;
    }

    .container {
        padding: var(--container-padding);
    }

    .widgets-grid {
        grid-template-columns: 1fr;
        gap: var(--grid-gap-large);
        margin-bottom: var(--section-margin);
    }

    .quick-actions {
        grid-template-columns: 1fr;
        gap: var(--grid-gap-medium);
        margin-bottom: var(--section-margin);
    }

    .widget {
        padding: 14px;
    }

    .widget-title {
        font-size: 10px;
    }

    .widget-value {
        font-size: 20px;
    }
}

/* ============================================================================
 * ASPECT RATIO-BASED RESPONSIVE GRID
 * Modern approach: use aspect-ratio media queries for better orientation handling
 * ============================================================================ */

/* Wide aspect ratio (landscape: > 1.5) - maximize columns */
@media (min-aspect-ratio: 3/2) and (min-width: 600px) {
    .widgets-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .quick-actions {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Extra wide (> 16/10) - four columns */
@media (min-aspect-ratio: 16/10) and (min-width: 900px) {
    .widgets-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Narrow aspect ratio (portrait: < 1) - single column */
@media (max-aspect-ratio: 5/6) {
    .widgets-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }
}

/* Medium aspect ratio (tablets: 0.7 - 1.0) - two columns if width > 500px */
@media (min-aspect-ratio: 7/10) and (max-aspect-ratio: 1/1) and (min-width: 500px) {
    .widgets-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================================
 * DYNAMIC SCALING - Smooth transitions without hard breakpoints
 * ============================================================================ */

/* Fluid container padding: scales from 12px to 32px based on viewport width */
/* FIX #199630: Removed — let dashboard.html media queries handle responsive padding */
.container {
    padding: clamp(12px, 2.5vw, 32px);
}

/* Fluid gap sizes: scale based on viewport */
.widgets-grid,
.quick-actions,
.section {
    gap: clamp(8px, 2vw, 24px);
}

.section {
    margin-bottom: clamp(16px, 3vw, 32px);
}

.page-header {
    margin-bottom: clamp(16px, 3vw, 32px);
}

/* Fluid font sizes for better text scaling */
.widget-title {
    font-size: clamp(10px, 1.2vw, 13px);
}

.widget-value {
    font-size: clamp(20px, 3vw, 32px);
}

.page-header h2 {
    font-size: clamp(24px, 4vw, 42px);
}

/* ============================================================================
 * ENSURE NO DEAD SPACE - Fill available height/width
 * ============================================================================ */

html, body {
    height: 100%;
    width: 100%;
}

.main-content,
.app-main-content {
    min-height: calc(100vh - 60px); /* Account for top bar */
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Cards fill available height on tall viewports */
@media (min-height: 800px) {
    .widget {
        display: flex;
        flex-direction: column;
        min-height: 140px;
    }

    .quick-actions {
        min-height: 120px;
    }
}

/* ============================================================================
 * ORIENTATION CHANGE TRANSITIONS
 * Smooth animation when device rotates
 * ============================================================================ */

* {
    transition: padding 0.3s ease, gap 0.3s ease, margin 0.3s ease;
}

.widgets-grid,
.quick-actions,
.container {
    transition: grid-template-columns 0.3s ease, padding 0.3s ease, gap 0.3s ease;
}

/* ============================================================================
 * TABLE RESPONSIVENESS - Prevent overflow on orientation change
 * ============================================================================ */

.table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .table {
        font-size: 13px;
    }

    .table thead th,
    .table tbody td {
        padding: clamp(8px, 1.5vw, 12px);
        font-size: clamp(11px, 1.2vw, 13px);
    }
}

/* ============================================================================
 * MODAL RESPONSIVE SPACING
 * ============================================================================ */

.modal-content {
    max-width: min(90vw, 600px);
    padding: clamp(20px, 5vw, 32px);
}

/* ============================================================================
 * ADMIN PORTAL SPECIFIC - Dynamic spacing for all modules
 * ============================================================================ */

.admin-dashboard-grid {
    display: grid;
    grid-auto-flow: dense;
    gap: clamp(12px, 2vw, 20px);
}

@media (prefers-orientation: landscape) and (min-height: 400px) and (max-height: 700px) {
    /* Landscape phone: 2-3 columns, tight spacing */
    .admin-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-orientation: portrait) {
    /* Portrait: single column by default */
    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 600px) and (orientation: portrait) {
    /* Tablet portrait: 2 columns */
    .admin-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    /* Desktop landscape: 3-4 columns */
    .admin-dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================================
 * CRM/FINANCE/MARKETING MODULE GRID RESPONSIVE
 * ============================================================================ */

.module-grid,
.dashboard-grid,
.content-grid {
    display: grid;
    gap: clamp(12px, 2vw, 24px);
    margin-bottom: clamp(16px, 3vw, 32px);
}

/* Auto-fit with minimum cell size, no fixed gaps */
@media (min-width: 1200px) and (orientation: landscape) {
    .module-grid,
    .dashboard-grid,
    .content-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .module-grid,
    .dashboard-grid,
    .content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .module-grid,
    .dashboard-grid,
    .content-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
 * PREVENT OVERFLOW & DEAD SPACE
 * ============================================================================ */

/* Ensure main content fills viewport */
/* FIX #199630: Removed conflicting flex rules — dashboard.html defines these properly */
.main-content {
    min-height: 100vh;
}

.container {
    max-width: 100%;
    width: 100%;
}

/* Sidebars + content should never create dead space */
/* FIX #199630: Removed display: flex from body — breaks dashboard layout at narrow widths */
body {
    min-height: 100vh;
    width: 100%;
}

/* Typography scales fluidly */
h1 { font-size: clamp(28px, 5vw, 48px); }
h2 { font-size: clamp(24px, 4vw, 36px); }
h3 { font-size: clamp(20px, 3vw, 28px); }
h4 { font-size: clamp(16px, 2.5vw, 22px); }
p { font-size: clamp(14px, 1.5vw, 18px); }