/* 💙 HeartTime - Material Design 3 Integration with Existing Styles */

/* ===== Integration with Existing HeartTime Styles ===== */

/* Override existing CSS variables with M3 equivalents for mobile */
@media (max-width: 599px) {
    :root {
        /* Map existing HeartTime colors to M3 tokens */
        --primary-blue: var(--m3-primary);
        --primary-blue-rgb: 14, 165, 233;
        --secondary-blue: var(--m3-secondary);
        --light-blue: var(--m3-primary);
        --bg-light-blue: var(--m3-primary-container);
        --bg-medium-blue: var(--m3-primary-container);
        --bg-deep-blue: var(--m3-secondary-container);
        --border-blue: var(--m3-outline-variant);
        --heart-red: var(--m3-error);
        --soft-white: var(--m3-surface);
        
        /* Update spacing to use M3 system */
        --spacing-xs: var(--m3-space-1);
        --spacing-sm: var(--m3-space-2);
        --spacing-md: var(--m3-space-4);
        --spacing-lg: var(--m3-space-6);
        --spacing-xl: var(--m3-space-8);
        
        /* Update border radius to use M3 system */
        --border-radius-sm: var(--m3-shape-corner-small);
        --border-radius-md: var(--m3-shape-corner-medium);
        --border-radius-lg: var(--m3-shape-corner-large);
        --border-radius-xl: var(--m3-shape-corner-extra-large);
        
        /* Update shadows to use M3 system */
        --shadow-sm: var(--m3-elevation-level1);
        --shadow-md: var(--m3-elevation-level2);
        --shadow-lg: var(--m3-elevation-level3);
    }
    
    /* Override body background for mobile */
    body {
        background: var(--m3-background);
        color: var(--m3-on-background);
    }
    
    /* Hide desktop sidebar on mobile */
    #sidebar-wrapper {
        display: none !important;
    }
    
    /* Hide desktop mobile header */
    .navbar.d-md-none {
        display: none !important;
    }
    
    /* Adjust page content wrapper for mobile */
    #page-content-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        /* Add top padding to prevent overlap with fixed top app bar + extra margin */
        padding-top: calc(var(--m3-top-app-bar-height) + env(safe-area-inset-top, 0px) + var(--m3-space-4));
        padding-bottom: calc(var(--m3-nav-bar-height) + env(safe-area-inset-bottom, 0px));
        /* No left/right padding to avoid blank space */
        padding-left: 0;
        padding-right: 0;
        flex: 1;
        min-height: 100vh;
        box-sizing: border-box;
        /* Ensure content starts below the top app bar */
        position: relative;
        z-index: 1;
    }
    
    /* Ensure mobile navigation components are visible */
    .m3-bottom-nav,
    .m3-top-app-bar {
        display: flex;
    }
    
    /* Hide footer on mobile to avoid conflicts with bottom nav */
    footer {
        display: none;
    }
    
    /* Update existing card styles to use M3 */
    .card {
        background: var(--m3-surface);
        border: 1px solid var(--m3-outline-variant);
        border-radius: var(--m3-shape-corner-medium);
        box-shadow: var(--m3-elevation-level1);
        color: var(--m3-on-surface);
    }
    
    .card-header {
        background: var(--m3-surface-variant);
        border-bottom: 1px solid var(--m3-outline-variant);
        color: var(--m3-on-surface-variant);
    }
    
    /* Update existing button styles to use M3 */
    .btn-primary {
        background-color: var(--m3-primary);
        border-color: var(--m3-primary);
        color: var(--m3-on-primary);
        border-radius: var(--m3-shape-corner-large);
        min-height: var(--m3-button-height);
        padding: var(--m3-button-padding-vertical) var(--m3-button-padding-horizontal);
        font-weight: var(--m3-label-large-weight);
        font-size: var(--m3-label-large-font);
        line-height: var(--m3-label-large-line-height);
        letter-spacing: var(--m3-label-large-tracking);
    }
    
    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--m3-primary);
        border-color: var(--m3-primary);
        box-shadow: var(--m3-elevation-level2);
    }
    
    .btn-outline-primary {
        color: var(--m3-primary);
        border-color: var(--m3-outline);
        background-color: transparent;
        border-radius: var(--m3-shape-corner-large);
        min-height: var(--m3-button-height);
        padding: var(--m3-button-padding-vertical) var(--m3-button-padding-horizontal);
        font-weight: var(--m3-label-large-weight);
        font-size: var(--m3-label-large-font);
        line-height: var(--m3-label-large-line-height);
        letter-spacing: var(--m3-label-large-tracking);
    }
    
    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--m3-primary-container);
        border-color: var(--m3-primary);
        color: var(--m3-on-primary-container);
    }
    
    .btn-secondary {
        background-color: var(--m3-secondary);
        border-color: var(--m3-secondary);
        color: var(--m3-on-secondary);
        border-radius: var(--m3-shape-corner-large);
        min-height: var(--m3-button-height);
        padding: var(--m3-button-padding-vertical) var(--m3-button-padding-horizontal);
        font-weight: var(--m3-label-large-weight);
        font-size: var(--m3-label-large-font);
        line-height: var(--m3-label-large-line-height);
        letter-spacing: var(--m3-label-large-tracking);
    }
    
    /* Update form controls to use M3 */
    .form-control {
        background-color: var(--m3-primary-container);
        border: 1px solid var(--m3-outline);
        border-radius: var(--m3-text-field-shape);
        color: var(--m3-on-surface);
        min-height: var(--m3-text-field-height);
        padding: var(--m3-space-4);
        font-size: var(--m3-body-large-font);
        line-height: var(--m3-body-large-line-height);
    }
    
    .form-control:focus {
        background-color: var(--m3-primary-container);
        border-color: var(--m3-primary);
        box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25);
        color: var(--m3-on-surface);
    }
    
    .form-label {
        color: var(--m3-on-surface);
        font-weight: var(--m3-label-large-weight);
        font-size: var(--m3-label-large-font);
        line-height: var(--m3-label-large-line-height);
        letter-spacing: var(--m3-label-large-tracking);
        margin-bottom: var(--m3-space-2);
    }
    
    /* Update alert styles to use M3 */
    .alert {
        border-radius: var(--m3-shape-corner-medium);
        border: 1px solid var(--m3-outline-variant);
        padding: var(--m3-space-4);
        margin-bottom: var(--m3-space-4);
    }
    
    .alert-primary {
        background-color: var(--m3-primary-container);
        border-color: var(--m3-primary);
        color: var(--m3-on-primary-container);
    }
    
    .alert-danger {
        background-color: var(--m3-error-container);
        border-color: var(--m3-error);
        color: var(--m3-on-error-container);
    }
    
    .alert-success {
        background-color: var(--m3-primary-container);
        border-color: var(--m3-primary);
        color: var(--m3-on-primary-container);
    }
    
    .alert-warning {
        background-color: var(--m3-error-container);
        border-color: var(--m3-error);
        color: var(--m3-on-error-container);
    }
    
    /* Update modal styles to use M3 */
    .modal-content {
        background-color: var(--m3-surface);
        border: 1px solid var(--m3-outline-variant);
        border-radius: var(--m3-shape-corner-large);
        box-shadow: var(--m3-elevation-level3);
        color: var(--m3-on-surface);
    }
    
    .modal-header {
        background-color: var(--m3-surface-variant);
        border-bottom: 1px solid var(--m3-outline-variant);
        color: var(--m3-on-surface-variant);
        padding: var(--m3-space-6);
    }
    
    .modal-body {
        padding: var(--m3-space-6);
    }
    
    .modal-footer {
        background-color: var(--m3-surface-variant);
        border-top: 1px solid var(--m3-outline-variant);
        padding: var(--m3-space-4) var(--m3-space-6);
    }
    
    .modal-title {
        font-size: var(--m3-headline-small-font);
        line-height: var(--m3-headline-small-line-height);
        font-weight: var(--m3-headline-small-weight);
        letter-spacing: var(--m3-headline-small-tracking);
        color: var(--m3-on-surface);
    }
    
    /* Update list group styles to use M3 */
    .list-group-item {
        background-color: var(--m3-surface);
        border: 1px solid var(--m3-outline-variant);
        color: var(--m3-on-surface);
        padding: var(--m3-list-item-padding);
        font-size: var(--m3-body-large-font);
        line-height: var(--m3-body-large-line-height);
    }
    
    .list-group-item.active {
        background-color: var(--m3-primary-container);
        border-color: var(--m3-primary);
        color: var(--m3-on-primary-container);
    }
    
    .list-group-item:hover {
        background-color: var(--m3-surface-variant);
        color: var(--m3-on-surface-variant);
    }
    
    /* Update navbar styles to use M3 */
    .navbar {
        background-color: var(--m3-surface) !important;
        border-bottom: 1px solid var(--m3-outline-variant);
        box-shadow: var(--m3-elevation-level1);
        padding: var(--m3-space-4);
    }
    
    .navbar-brand {
        color: var(--m3-on-surface) !important;
        font-size: var(--m3-title-large-font);
        line-height: var(--m3-title-large-line-height);
        font-weight: var(--m3-title-large-weight);
        letter-spacing: var(--m3-title-large-tracking);
    }
    
    /* Update text colors */
    .text-primary {
        color: var(--m3-primary) !important;
    }
    
    .text-secondary {
        color: var(--m3-on-surface-variant) !important;
    }
    
    .text-muted {
        color: var(--m3-on-surface-variant) !important;
    }
    
    .text-dark {
        color: var(--m3-on-surface) !important;
    }
    
    .text-info {
        color: var(--m3-primary) !important;
    }
    
    .text-danger {
        color: var(--m3-error) !important;
    }
    
    /* Update background colors */
    .bg-primary {
        background-color: var(--m3-primary) !important;
        color: var(--m3-on-primary) !important;
    }
    
    .bg-light {
        background-color: var(--m3-surface-variant) !important;
        color: var(--m3-on-surface-variant) !important;
    }
    
    .bg-white {
        background-color: var(--m3-surface) !important;
        color: var(--m3-on-surface) !important;
    }
    
    /* Update border colors */
    .border {
        border-color: var(--m3-outline-variant) !important;
    }
    
    .border-primary {
        border-color: var(--m3-primary) !important;
    }
    
    .border-bottom {
        border-bottom-color: var(--m3-outline-variant) !important;
    }
    
    .border-end {
        border-right-color: var(--m3-outline-variant) !important;
    }
    
    /* Update existing HeartTime specific components */
    .webapp-icon {
        color: var(--m3-primary) !important;
    }
    
    .sidebar-brand-link {
        color: var(--m3-on-surface) !important;
    }
    
    .sidebar-heading {
        background-color: var(--m3-surface-variant) !important;
        border-bottom-color: var(--m3-outline-variant) !important;
        color: var(--m3-on-surface-variant) !important;
    }
    
    .user-avatar {
        border: 2px solid var(--m3-outline-variant);
        border-radius: var(--m3-shape-corner-full);
    }
    
    .settings-button {
        color: var(--m3-on-surface-variant) !important;
        background-color: transparent;
        border: 1px solid var(--m3-outline);
        border-radius: var(--m3-shape-corner-small);
        padding: var(--m3-space-2);
        transition: all var(--m3-motion-duration-short2) var(--m3-motion-easing-standard);
    }
    
    .settings-button:hover {
        background-color: var(--m3-surface-variant);
        color: var(--m3-on-surface);
    }
    
    /* Update typography classes */
    h1, .h1 {
        font-size: var(--m3-headline-large-font);
        line-height: var(--m3-headline-large-line-height);
        font-weight: var(--m3-headline-large-weight);
        letter-spacing: var(--m3-headline-large-tracking);
        color: var(--m3-on-surface);
    }
    
    h2, .h2 {
        font-size: var(--m3-headline-medium-font);
        line-height: var(--m3-headline-medium-line-height);
        font-weight: var(--m3-headline-medium-weight);
        letter-spacing: var(--m3-headline-medium-tracking);
        color: var(--m3-on-surface);
    }
    
    h3, .h3 {
        font-size: var(--m3-headline-small-font);
        line-height: var(--m3-headline-small-line-height);
        font-weight: var(--m3-headline-small-weight);
        letter-spacing: var(--m3-headline-small-tracking);
        color: var(--m3-on-surface);
    }
    
    h4, .h4 {
        font-size: var(--m3-title-large-font);
        line-height: var(--m3-title-large-line-height);
        font-weight: var(--m3-title-large-weight);
        letter-spacing: var(--m3-title-large-tracking);
        color: var(--m3-on-surface);
    }
    
    h5, .h5 {
        font-size: var(--m3-title-medium-font);
        line-height: var(--m3-title-medium-line-height);
        font-weight: var(--m3-title-medium-weight);
        letter-spacing: var(--m3-title-medium-tracking);
        color: var(--m3-on-surface);
    }
    
    h6, .h6 {
        font-size: var(--m3-title-small-font);
        line-height: var(--m3-title-small-line-height);
        font-weight: var(--m3-title-small-weight);
        letter-spacing: var(--m3-title-small-tracking);
        color: var(--m3-on-surface);
    }
    
    p, .p {
        font-size: var(--m3-body-large-font);
        line-height: var(--m3-body-large-line-height);
        font-weight: var(--m3-body-large-weight);
        letter-spacing: var(--m3-body-large-tracking);
        color: var(--m3-on-surface);
    }
    
    small, .small {
        font-size: var(--m3-body-small-font);
        line-height: var(--m3-body-small-line-height);
        font-weight: var(--m3-body-small-weight);
        letter-spacing: var(--m3-body-small-tracking);
        color: var(--m3-on-surface-variant);
    }
    
    /* Ensure proper touch targets */
    a, button, .btn, [role="button"] {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all var(--m3-motion-duration-short2) var(--m3-motion-easing-standard);
    }
    
    /* Update focus styles for accessibility */
    a:focus,
    button:focus,
    .btn:focus,
    .form-control:focus,
    [tabindex]:focus {
        outline: 2px solid var(--m3-primary);
        outline-offset: 2px;
        box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25);
    }
}

/* ===== Mobile-specific overrides for existing components ===== */

@media (max-width: 599px) {
    /* Ensure full width on mobile */
    .container,
    .container-fluid {
        padding-left: var(--m3-space-4);
        padding-right: var(--m3-space-4);
    }
    
    /* Stack form elements vertically */
    .row > [class*="col-"] {
        margin-bottom: var(--m3-space-3);
    }
    
    /* Adjust modal for mobile */
    .modal-dialog {
        margin: var(--m3-space-4);
        max-width: calc(100vw - var(--m3-space-8));
    }
    
    /* Adjust button sizes for mobile */
    .btn {
        padding: var(--m3-space-3) var(--m3-space-4);
        font-size: var(--m3-label-large-font);
        min-height: 44px;
    }
    
    .btn-sm {
        padding: var(--m3-space-2) var(--m3-space-3);
        font-size: var(--m3-label-medium-font);
        min-height: 40px;
    }
    
    .btn-lg {
        padding: var(--m3-space-4) var(--m3-space-6);
        font-size: var(--m3-label-large-font);
        min-height: 48px;
    }
    
    /* Adjust table for mobile */
    .table-responsive {
        border: none;
    }
    
    .table {
        font-size: var(--m3-body-medium-font);
    }
    
    .table th,
    .table td {
        padding: var(--m3-space-3);
        border-color: var(--m3-outline-variant);
    }
    
    /* Adjust card spacing for mobile */
    .card {
        margin-bottom: var(--m3-space-4);
    }
    
    .card-body {
        padding: var(--m3-space-4);
    }
    
    .card-header,
    .card-footer {
        padding: var(--m3-space-3) var(--m3-space-4);
    }
}