/* 💙 HeartTime - Material Design 3 Responsive System */

/* ===== Responsive Breakpoints ===== */

:root {
    /* Material Design 3 Breakpoint System */
    --m3-breakpoint-compact: 0px;      /* 0-599px (phones) */
    --m3-breakpoint-medium: 600px;     /* 600-839px (tablets) */
    --m3-breakpoint-expanded: 840px;   /* 840-1199px (laptops) */
    --m3-breakpoint-large: 1200px;     /* 1200-1599px (desktops) */
    --m3-breakpoint-extra-large: 1600px; /* 1600px+ (large screens) */
    
    /* Mobile-first approach - default values for compact screens */
    --layout-columns: 4;
    --layout-margins: var(--m3-space-4);
    --layout-gutters: var(--m3-space-4);
    --content-max-width: 100%;
}

/* ===== Base Mobile Layout (Compact: 0-599px) ===== */

/* Default mobile styles - no media query needed for mobile-first */
.mobile-container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--layout-margins);
}

.mobile-grid {
    display: grid;
    grid-template-columns: repeat(var(--layout-columns), 1fr);
    gap: var(--layout-gutters);
}

.mobile-stack {
    display: flex;
    flex-direction: column;
    gap: var(--m3-space-4);
}

/* Mobile navigation spacing */
.m3-mobile-content {
    padding-top: calc(var(--m3-top-app-bar-height) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--m3-nav-bar-height) + env(safe-area-inset-bottom, 0px) + var(--m3-space-4));
    min-height: 100vh;
    box-sizing: border-box;
}

/* Integration with existing Bootstrap layout */
@media (max-width: 599px) {
    #page-content-wrapper {
        padding-top: calc(var(--m3-top-app-bar-height) + env(safe-area-inset-top, 0px));
        padding-bottom: calc(var(--m3-nav-bar-height) + env(safe-area-inset-bottom, 0px));
    }
    
    /* Hide existing mobile header on small screens */
    .navbar.d-md-none {
        display: none !important;
    }
    
    /* Adjust sidebar for mobile */
    #sidebar-wrapper {
        display: none;
    }
    
    #wrapper {
        flex-direction: column;
    }
}

/* Safe area handling for mobile devices */
.mobile-safe-area {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* ===== Medium Screens (Tablets: 600-839px) ===== */

@media (min-width: 600px) {
    :root {
        --layout-columns: 8;
        --layout-margins: var(--m3-space-6);
        --layout-gutters: var(--m3-space-6);
        --content-max-width: 100%;
    }
    
    /* Tablet-specific adjustments */
    .mobile-container {
        padding: 0 var(--layout-margins);
    }
    
    /* Larger touch targets for tablets */
    .mobile-touch-target {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Two-column layout for tablets */
    .tablet-two-column {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--layout-gutters);
    }
}

/* ===== Expanded Screens (Small Laptops: 840-1199px) ===== */

@media (min-width: 840px) {
    :root {
        --layout-columns: 12;
        --layout-margins: var(--m3-space-8);
        --layout-gutters: var(--m3-space-8);
        --content-max-width: 1200px;
    }
    
    /* Hide mobile-specific elements on larger screens */
    .mobile-only {
        display: none !important;
    }
    
    /* Show desktop elements */
    .desktop-only {
        display: block;
    }
    
    /* Transition to desktop layout */
    .mobile-content {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ===== Large Screens (Desktops: 1200-1599px) ===== */

@media (min-width: 1200px) {
    :root {
        --layout-margins: var(--m3-space-10);
        --layout-gutters: var(--m3-space-10);
        --content-max-width: 1400px;
    }
}

/* ===== Extra Large Screens (1600px+) ===== */

@media (min-width: 1600px) {
    :root {
        --layout-margins: var(--m3-space-12);
        --layout-gutters: var(--m3-space-12);
        --content-max-width: 1600px;
    }
}

/* ===== Mobile-First Utility Classes ===== */

/* Visibility utilities */
.show-mobile { display: block; }
.hide-mobile { display: none; }

@media (min-width: 600px) {
    .show-mobile { display: none; }
    .hide-mobile { display: block; }
    .show-tablet { display: block; }
    .hide-tablet { display: none; }
}

@media (min-width: 840px) {
    .show-tablet { display: none; }
    .hide-tablet { display: block; }
    .show-desktop { display: block; }
    .hide-desktop { display: none; }
}

/* Responsive text alignment */
.text-center-mobile {
    text-align: center;
}

@media (min-width: 600px) {
    .text-left-tablet {
        text-align: left;
    }
}

/* Responsive spacing */
.spacing-mobile-sm { margin: var(--m3-space-2); }
.spacing-mobile-md { margin: var(--m3-space-4); }
.spacing-mobile-lg { margin: var(--m3-space-6); }

@media (min-width: 600px) {
    .spacing-tablet-sm { margin: var(--m3-space-3); }
    .spacing-tablet-md { margin: var(--m3-space-6); }
    .spacing-tablet-lg { margin: var(--m3-space-8); }
}

@media (min-width: 840px) {
    .spacing-desktop-sm { margin: var(--m3-space-4); }
    .spacing-desktop-md { margin: var(--m3-space-8); }
    .spacing-desktop-lg { margin: var(--m3-space-12); }
}

/* ===== Mobile Navigation Responsive Behavior ===== */

/* Bottom navigation - only show on mobile and tablet */
.bottom-navigation {
    display: block;
}

@media (min-width: 840px) {
    .bottom-navigation {
        display: none;
    }
}

/* Top app bar responsive behavior */
.top-app-bar {
    display: block;
}

@media (min-width: 840px) {
    .top-app-bar {
        display: none;
    }
}

/* FAB responsive positioning */
.fab-container {
    position: fixed;
    bottom: calc(var(--m3-nav-bar-height) + var(--m3-space-4));
    right: var(--m3-space-4);
    z-index: 1000;
}

@media (min-width: 600px) {
    .fab-container {
        bottom: var(--m3-space-6);
        right: var(--m3-space-6);
    }
}

@media (min-width: 840px) {
    .fab-container {
        bottom: var(--m3-space-8);
        right: var(--m3-space-8);
    }
}

/* ===== Responsive Card Layout ===== */

.card-grid {
    display: grid;
    gap: var(--m3-space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--m3-space-6);
    }
}

@media (min-width: 840px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--m3-space-8);
    }
}

@media (min-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== Responsive Form Layout ===== */

.form-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--m3-space-4);
}

.form-row-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--m3-space-3);
}

@media (min-width: 600px) {
    .form-row-tablet {
        flex-direction: row;
        gap: var(--m3-space-4);
    }
    
    .form-row-tablet > * {
        flex: 1;
    }
}

/* ===== Touch Target Optimization ===== */

/* Ensure minimum touch target size on mobile */
@media (max-width: 839px) {
    .touch-target {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Button touch targets */
    button, .btn {
        min-height: 44px;
        padding: var(--m3-space-3) var(--m3-space-4);
    }
    
    /* Navigation item touch targets */
    .nav-item {
        min-height: 48px;
        min-width: 48px;
    }
}

/* ===== Responsive Typography ===== */

/* Scale typography for different screen sizes */
@media (max-width: 599px) {
    .responsive-title {
        font-size: var(--m3-title-large-font);
        line-height: var(--m3-title-large-line-height);
    }
    
    .responsive-body {
        font-size: var(--m3-body-medium-font);
        line-height: var(--m3-body-medium-line-height);
    }
}

@media (min-width: 600px) {
    .responsive-title {
        font-size: var(--m3-headline-small-font);
        line-height: var(--m3-headline-small-line-height);
    }
    
    .responsive-body {
        font-size: var(--m3-body-large-font);
        line-height: var(--m3-body-large-line-height);
    }
}

@media (min-width: 840px) {
    .responsive-title {
        font-size: var(--m3-headline-medium-font);
        line-height: var(--m3-headline-medium-line-height);
    }
}

/* ===== Print Styles ===== */

@media print {
    .mobile-only,
    .bottom-navigation,
    .top-app-bar,
    .fab-container {
        display: none !important;
    }
    
    .mobile-content {
        padding: 0;
    }
    
    * {
        box-shadow: none !important;
    }
}