/* 💙 HeartTime - Material Design 3 Utility Classes */

/* ===== Color Utilities ===== */

/* Text colors */
.m3-text-primary { color: var(--m3-primary) !important; }
.m3-text-on-primary { color: var(--m3-on-primary) !important; }
.m3-text-secondary { color: var(--m3-secondary) !important; }
.m3-text-on-secondary { color: var(--m3-on-secondary) !important; }
.m3-text-surface { color: var(--m3-on-surface) !important; }
.m3-text-surface-variant { color: var(--m3-on-surface-variant) !important; }
.m3-text-background { color: var(--m3-on-background) !important; }
.m3-text-error { color: var(--m3-error) !important; }
.m3-text-outline { color: var(--m3-outline) !important; }

/* Background colors */
.m3-bg-primary { background-color: var(--m3-primary) !important; }
.m3-bg-primary-container { background-color: var(--m3-primary-container) !important; }
.m3-bg-secondary { background-color: var(--m3-secondary) !important; }
.m3-bg-secondary-container { background-color: var(--m3-secondary-container) !important; }
.m3-bg-surface { background-color: var(--m3-surface) !important; }
.m3-bg-surface-variant { background-color: var(--m3-surface-variant) !important; }
.m3-bg-background { background-color: var(--m3-background) !important; }
.m3-bg-error { background-color: var(--m3-error) !important; }
.m3-bg-error-container { background-color: var(--m3-error-container) !important; }

/* Border colors */
.m3-border-primary { border-color: var(--m3-primary) !important; }
.m3-border-outline { border-color: var(--m3-outline) !important; }
.m3-border-outline-variant { border-color: var(--m3-outline-variant) !important; }
.m3-border-error { border-color: var(--m3-error) !important; }

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

/* Margin utilities */
.m3-m-0 { margin: 0 !important; }
.m3-m-1 { margin: var(--m3-space-1) !important; }
.m3-m-2 { margin: var(--m3-space-2) !important; }
.m3-m-3 { margin: var(--m3-space-3) !important; }
.m3-m-4 { margin: var(--m3-space-4) !important; }
.m3-m-5 { margin: var(--m3-space-5) !important; }
.m3-m-6 { margin: var(--m3-space-6) !important; }
.m3-m-8 { margin: var(--m3-space-8) !important; }
.m3-m-10 { margin: var(--m3-space-10) !important; }
.m3-m-12 { margin: var(--m3-space-12) !important; }
.m3-m-16 { margin: var(--m3-space-16) !important; }
.m3-m-20 { margin: var(--m3-space-20) !important; }
.m3-m-24 { margin: var(--m3-space-24) !important; }

/* Margin directional */
.m3-mt-0 { margin-top: 0 !important; }
.m3-mt-1 { margin-top: var(--m3-space-1) !important; }
.m3-mt-2 { margin-top: var(--m3-space-2) !important; }
.m3-mt-3 { margin-top: var(--m3-space-3) !important; }
.m3-mt-4 { margin-top: var(--m3-space-4) !important; }
.m3-mt-5 { margin-top: var(--m3-space-5) !important; }
.m3-mt-6 { margin-top: var(--m3-space-6) !important; }
.m3-mt-8 { margin-top: var(--m3-space-8) !important; }

.m3-mb-0 { margin-bottom: 0 !important; }
.m3-mb-1 { margin-bottom: var(--m3-space-1) !important; }
.m3-mb-2 { margin-bottom: var(--m3-space-2) !important; }
.m3-mb-3 { margin-bottom: var(--m3-space-3) !important; }
.m3-mb-4 { margin-bottom: var(--m3-space-4) !important; }
.m3-mb-5 { margin-bottom: var(--m3-space-5) !important; }
.m3-mb-6 { margin-bottom: var(--m3-space-6) !important; }
.m3-mb-8 { margin-bottom: var(--m3-space-8) !important; }

.m3-ml-0 { margin-left: 0 !important; }
.m3-ml-1 { margin-left: var(--m3-space-1) !important; }
.m3-ml-2 { margin-left: var(--m3-space-2) !important; }
.m3-ml-3 { margin-left: var(--m3-space-3) !important; }
.m3-ml-4 { margin-left: var(--m3-space-4) !important; }

.m3-mr-0 { margin-right: 0 !important; }
.m3-mr-1 { margin-right: var(--m3-space-1) !important; }
.m3-mr-2 { margin-right: var(--m3-space-2) !important; }
.m3-mr-3 { margin-right: var(--m3-space-3) !important; }
.m3-mr-4 { margin-right: var(--m3-space-4) !important; }

.m3-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.m3-mx-1 { margin-left: var(--m3-space-1) !important; margin-right: var(--m3-space-1) !important; }
.m3-mx-2 { margin-left: var(--m3-space-2) !important; margin-right: var(--m3-space-2) !important; }
.m3-mx-3 { margin-left: var(--m3-space-3) !important; margin-right: var(--m3-space-3) !important; }
.m3-mx-4 { margin-left: var(--m3-space-4) !important; margin-right: var(--m3-space-4) !important; }

.m3-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.m3-my-1 { margin-top: var(--m3-space-1) !important; margin-bottom: var(--m3-space-1) !important; }
.m3-my-2 { margin-top: var(--m3-space-2) !important; margin-bottom: var(--m3-space-2) !important; }
.m3-my-3 { margin-top: var(--m3-space-3) !important; margin-bottom: var(--m3-space-3) !important; }
.m3-my-4 { margin-top: var(--m3-space-4) !important; margin-bottom: var(--m3-space-4) !important; }

/* Padding utilities */
.m3-p-0 { padding: 0 !important; }
.m3-p-1 { padding: var(--m3-space-1) !important; }
.m3-p-2 { padding: var(--m3-space-2) !important; }
.m3-p-3 { padding: var(--m3-space-3) !important; }
.m3-p-4 { padding: var(--m3-space-4) !important; }
.m3-p-5 { padding: var(--m3-space-5) !important; }
.m3-p-6 { padding: var(--m3-space-6) !important; }
.m3-p-8 { padding: var(--m3-space-8) !important; }
.m3-p-10 { padding: var(--m3-space-10) !important; }
.m3-p-12 { padding: var(--m3-space-12) !important; }

/* Padding directional */
.m3-pt-0 { padding-top: 0 !important; }
.m3-pt-1 { padding-top: var(--m3-space-1) !important; }
.m3-pt-2 { padding-top: var(--m3-space-2) !important; }
.m3-pt-3 { padding-top: var(--m3-space-3) !important; }
.m3-pt-4 { padding-top: var(--m3-space-4) !important; }
.m3-pt-5 { padding-top: var(--m3-space-5) !important; }
.m3-pt-6 { padding-top: var(--m3-space-6) !important; }
.m3-pt-8 { padding-top: var(--m3-space-8) !important; }

.m3-pb-0 { padding-bottom: 0 !important; }
.m3-pb-1 { padding-bottom: var(--m3-space-1) !important; }
.m3-pb-2 { padding-bottom: var(--m3-space-2) !important; }
.m3-pb-3 { padding-bottom: var(--m3-space-3) !important; }
.m3-pb-4 { padding-bottom: var(--m3-space-4) !important; }
.m3-pb-5 { padding-bottom: var(--m3-space-5) !important; }
.m3-pb-6 { padding-bottom: var(--m3-space-6) !important; }
.m3-pb-8 { padding-bottom: var(--m3-space-8) !important; }

.m3-pl-0 { padding-left: 0 !important; }
.m3-pl-1 { padding-left: var(--m3-space-1) !important; }
.m3-pl-2 { padding-left: var(--m3-space-2) !important; }
.m3-pl-3 { padding-left: var(--m3-space-3) !important; }
.m3-pl-4 { padding-left: var(--m3-space-4) !important; }

.m3-pr-0 { padding-right: 0 !important; }
.m3-pr-1 { padding-right: var(--m3-space-1) !important; }
.m3-pr-2 { padding-right: var(--m3-space-2) !important; }
.m3-pr-3 { padding-right: var(--m3-space-3) !important; }
.m3-pr-4 { padding-right: var(--m3-space-4) !important; }

.m3-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.m3-px-1 { padding-left: var(--m3-space-1) !important; padding-right: var(--m3-space-1) !important; }
.m3-px-2 { padding-left: var(--m3-space-2) !important; padding-right: var(--m3-space-2) !important; }
.m3-px-3 { padding-left: var(--m3-space-3) !important; padding-right: var(--m3-space-3) !important; }
.m3-px-4 { padding-left: var(--m3-space-4) !important; padding-right: var(--m3-space-4) !important; }

.m3-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.m3-py-1 { padding-top: var(--m3-space-1) !important; padding-bottom: var(--m3-space-1) !important; }
.m3-py-2 { padding-top: var(--m3-space-2) !important; padding-bottom: var(--m3-space-2) !important; }
.m3-py-3 { padding-top: var(--m3-space-3) !important; padding-bottom: var(--m3-space-3) !important; }
.m3-py-4 { padding-top: var(--m3-space-4) !important; padding-bottom: var(--m3-space-4) !important; }

/* ===== Display Utilities ===== */

.m3-d-none { display: none !important; }
.m3-d-block { display: block !important; }
.m3-d-inline { display: inline !important; }
.m3-d-inline-block { display: inline-block !important; }
.m3-d-flex { display: flex !important; }
.m3-d-inline-flex { display: inline-flex !important; }
.m3-d-grid { display: grid !important; }

/* ===== Flexbox Utilities ===== */

.m3-flex-row { flex-direction: row !important; }
.m3-flex-column { flex-direction: column !important; }
.m3-flex-row-reverse { flex-direction: row-reverse !important; }
.m3-flex-column-reverse { flex-direction: column-reverse !important; }

.m3-flex-wrap { flex-wrap: wrap !important; }
.m3-flex-nowrap { flex-wrap: nowrap !important; }
.m3-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

.m3-justify-start { justify-content: flex-start !important; }
.m3-justify-end { justify-content: flex-end !important; }
.m3-justify-center { justify-content: center !important; }
.m3-justify-between { justify-content: space-between !important; }
.m3-justify-around { justify-content: space-around !important; }
.m3-justify-evenly { justify-content: space-evenly !important; }

.m3-align-start { align-items: flex-start !important; }
.m3-align-end { align-items: flex-end !important; }
.m3-align-center { align-items: center !important; }
.m3-align-baseline { align-items: baseline !important; }
.m3-align-stretch { align-items: stretch !important; }

.m3-align-self-start { align-self: flex-start !important; }
.m3-align-self-end { align-self: flex-end !important; }
.m3-align-self-center { align-self: center !important; }
.m3-align-self-baseline { align-self: baseline !important; }
.m3-align-self-stretch { align-self: stretch !important; }

.m3-flex-fill { flex: 1 1 auto !important; }
.m3-flex-grow-0 { flex-grow: 0 !important; }
.m3-flex-grow-1 { flex-grow: 1 !important; }
.m3-flex-shrink-0 { flex-shrink: 0 !important; }
.m3-flex-shrink-1 { flex-shrink: 1 !important; }

/* ===== Position Utilities ===== */

.m3-position-static { position: static !important; }
.m3-position-relative { position: relative !important; }
.m3-position-absolute { position: absolute !important; }
.m3-position-fixed { position: fixed !important; }
.m3-position-sticky { position: sticky !important; }

/* ===== Size Utilities ===== */

.m3-w-25 { width: 25% !important; }
.m3-w-50 { width: 50% !important; }
.m3-w-75 { width: 75% !important; }
.m3-w-100 { width: 100% !important; }
.m3-w-auto { width: auto !important; }

.m3-h-25 { height: 25% !important; }
.m3-h-50 { height: 50% !important; }
.m3-h-75 { height: 75% !important; }
.m3-h-100 { height: 100% !important; }
.m3-h-auto { height: auto !important; }

.m3-mw-100 { max-width: 100% !important; }
.m3-mh-100 { max-height: 100% !important; }

.m3-min-vw-100 { min-width: 100vw !important; }
.m3-min-vh-100 { min-height: 100vh !important; }

.m3-vw-100 { width: 100vw !important; }
.m3-vh-100 { height: 100vh !important; }

/* ===== Text Utilities ===== */

.m3-text-left { text-align: left !important; }
.m3-text-right { text-align: right !important; }
.m3-text-center { text-align: center !important; }
.m3-text-justify { text-align: justify !important; }

.m3-text-lowercase { text-transform: lowercase !important; }
.m3-text-uppercase { text-transform: uppercase !important; }
.m3-text-capitalize { text-transform: capitalize !important; }

.m3-font-weight-light { font-weight: 300 !important; }
.m3-font-weight-normal { font-weight: 400 !important; }
.m3-font-weight-medium { font-weight: 500 !important; }
.m3-font-weight-bold { font-weight: 600 !important; }

.m3-font-italic { font-style: italic !important; }

.m3-text-decoration-none { text-decoration: none !important; }
.m3-text-decoration-underline { text-decoration: underline !important; }

.m3-text-break { word-wrap: break-word !important; word-break: break-word !important; }
.m3-text-nowrap { white-space: nowrap !important; }
.m3-text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ===== Border Utilities ===== */

.m3-border { border: 1px solid var(--m3-outline-variant) !important; }
.m3-border-0 { border: 0 !important; }
.m3-border-top { border-top: 1px solid var(--m3-outline-variant) !important; }
.m3-border-right { border-right: 1px solid var(--m3-outline-variant) !important; }
.m3-border-bottom { border-bottom: 1px solid var(--m3-outline-variant) !important; }
.m3-border-left { border-left: 1px solid var(--m3-outline-variant) !important; }

.m3-border-0 { border: 0 !important; }
.m3-border-top-0 { border-top: 0 !important; }
.m3-border-right-0 { border-right: 0 !important; }
.m3-border-bottom-0 { border-bottom: 0 !important; }
.m3-border-left-0 { border-left: 0 !important; }

/* ===== Overflow Utilities ===== */

.m3-overflow-auto { overflow: auto !important; }
.m3-overflow-hidden { overflow: hidden !important; }
.m3-overflow-visible { overflow: visible !important; }
.m3-overflow-scroll { overflow: scroll !important; }

.m3-overflow-x-auto { overflow-x: auto !important; }
.m3-overflow-x-hidden { overflow-x: hidden !important; }
.m3-overflow-x-visible { overflow-x: visible !important; }
.m3-overflow-x-scroll { overflow-x: scroll !important; }

.m3-overflow-y-auto { overflow-y: auto !important; }
.m3-overflow-y-hidden { overflow-y: hidden !important; }
.m3-overflow-y-visible { overflow-y: visible !important; }
.m3-overflow-y-scroll { overflow-y: scroll !important; }

/* ===== Shadow Utilities ===== */

.m3-shadow-none { box-shadow: none !important; }
.m3-shadow-sm { box-shadow: var(--m3-elevation-level1) !important; }
.m3-shadow { box-shadow: var(--m3-elevation-level2) !important; }
.m3-shadow-lg { box-shadow: var(--m3-elevation-level3) !important; }
.m3-shadow-xl { box-shadow: var(--m3-elevation-level4) !important; }

/* ===== Interaction Utilities ===== */

.m3-user-select-all { user-select: all !important; }
.m3-user-select-auto { user-select: auto !important; }
.m3-user-select-none { user-select: none !important; }

.m3-pointer-events-none { pointer-events: none !important; }
.m3-pointer-events-auto { pointer-events: auto !important; }

/* ===== Responsive Utilities ===== */

@media (max-width: 599px) {
    .m3-d-compact-none { display: none !important; }
    .m3-d-compact-block { display: block !important; }
    .m3-d-compact-flex { display: flex !important; }
}

@media (min-width: 600px) and (max-width: 839px) {
    .m3-d-medium-none { display: none !important; }
    .m3-d-medium-block { display: block !important; }
    .m3-d-medium-flex { display: flex !important; }
}

@media (min-width: 840px) {
    .m3-d-expanded-none { display: none !important; }
    .m3-d-expanded-block { display: block !important; }
    .m3-d-expanded-flex { display: flex !important; }
}
/* =
==== Mobile Layout Utilities ===== */

/* Mobile content spacing utilities */
.m3-mobile-content {
    padding: var(--m3-space-4);
    min-height: calc(100vh - var(--m3-top-app-bar-height) - var(--m3-nav-bar-height));
}

.m3-mobile-safe-content {
    padding: var(--m3-space-4);
    padding-top: calc(var(--m3-space-4) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--m3-space-4) + env(safe-area-inset-bottom, 0px));
    padding-left: calc(var(--m3-space-4) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--m3-space-4) + env(safe-area-inset-right, 0px));
}

/* Mobile navigation spacing utilities */
.m3-nav-top-spacing {
    margin-top: var(--m3-top-app-bar-height);
}

.m3-nav-top-spacing-extra {
    margin-top: calc(var(--m3-top-app-bar-height) + var(--m3-space-4));
}

.m3-nav-bottom-spacing {
    margin-bottom: var(--m3-nav-bar-height);
}

.m3-nav-full-spacing {
    margin-top: var(--m3-top-app-bar-height);
    margin-bottom: var(--m3-nav-bar-height);
}

.m3-nav-full-spacing-extra {
    margin-top: calc(var(--m3-top-app-bar-height) + var(--m3-space-4));
    margin-bottom: var(--m3-nav-bar-height);
}

/* Mobile-only utilities */
@media (max-width: 599px) {
    .m3-mobile-only { display: block !important; }
    .m3-desktop-only { display: none !important; }
    
    /* Mobile content containers */
    .m3-mobile-container {
        padding: var(--m3-space-4);
        width: 100%;
        max-width: 100%;
    }
    
    /* Mobile card adjustments */
    .m3-mobile-card {
        margin: 0 0 var(--m3-space-4) 0;
        border-radius: var(--m3-shape-corner-medium);
        box-shadow: var(--m3-elevation-level1);
    }
    
    /* Mobile form adjustments */
    .m3-mobile-form {
        padding: var(--m3-space-4);
    }
    
    .m3-mobile-form .form-group,
    .m3-mobile-form .mb-3 {
        margin-bottom: var(--m3-space-4);
    }
    
    /* Mobile button adjustments */
    .m3-mobile-btn {
        width: 100%;
        margin-bottom: var(--m3-space-2);
        min-height: 48px;
    }
    
    /* Mobile text adjustments */
    .m3-mobile-text-center { text-align: center; }
    .m3-mobile-text-left { text-align: left; }
    .m3-mobile-text-right { text-align: right; }
}

/* Desktop-only utilities */
@media (min-width: 600px) {
    .m3-mobile-only { display: none !important; }
    .m3-desktop-only { display: block !important; }
}

/* ===== Mobile Touch Utilities ===== */

/* Touch target utilities */
.m3-touch-target {
    min-height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m3-touch-target-small {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Interactive utilities */
.m3-interactive {
    cursor: pointer;
    transition: all var(--m3-motion-duration-short2) var(--m3-motion-easing-standard);
    position: relative;
    overflow: hidden;
}

.m3-interactive:hover {
    opacity: 0.8;
}

.m3-interactive:active {
    transform: scale(0.98);
}

/* Ripple effect utility */
.m3-ripple {
    position: relative;
    overflow: hidden;
}

.m3-ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.2;
    transform: translate(-50%, -50%);
    transition: width var(--m3-motion-duration-medium1) var(--m3-motion-easing-standard),
                height var(--m3-motion-duration-medium1) var(--m3-motion-easing-standard);
}

.m3-ripple:active::before {
    width: 48px;
    height: 48px;
}

/* ===== Mobile Accessibility Utilities ===== */

/* Screen reader utilities */
.m3-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.m3-sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Focus utilities */
.m3-focusable:focus {
    outline: 2px solid var(--m3-primary);
    outline-offset: 2px;
}

/* High contrast utilities */
@media (prefers-contrast: high) {
    .m3-high-contrast-border {
        border: 2px solid currentColor !important;
    }
}

/* Reduced motion utilities */
@media (prefers-reduced-motion: reduce) {
    .m3-no-motion * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}