/* 💙 HeartTime - Material Design 3 Mobile Layout System */

/* ===== Mobile Layout Foundation ===== */

/* Reset and base styles for mobile */
* {
    box-sizing: border-box;
}

html {
    /* Prevent horizontal scrolling on mobile */
    overflow-x: hidden;
    /* Improve text rendering */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', 'Microsoft JhengHei', system-ui, -apple-system, sans-serif;
    background-color: var(--m3-background);
    color: var(--m3-on-background);
    overflow-x: hidden;
}

/* ===== Mobile Container System ===== */

.m3-mobile-app {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.m3-mobile-content {
    flex: 1;
    padding-top: var(--m3-top-app-bar-height);
    padding-bottom: calc(var(--m3-nav-bar-height) + env(safe-area-inset-bottom, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    overflow-x: hidden;
}

.m3-content-container {
    max-width: 100%;
    margin: 0 auto;
    padding: var(--m3-space-4);
}

/* ===== Mobile Grid System ===== */

.m3-grid {
    display: grid;
    gap: var(--m3-space-4);
    width: 100%;
}

.m3-grid-1 { grid-template-columns: 1fr; }
.m3-grid-2 { grid-template-columns: repeat(2, 1fr); }
.m3-grid-3 { grid-template-columns: repeat(3, 1fr); }
.m3-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive grid adjustments */
@media (max-width: 599px) {
    .m3-grid-2,
    .m3-grid-3,
    .m3-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 600px) {
    .m3-grid-tablet-2 { grid-template-columns: repeat(2, 1fr); }
    .m3-grid-tablet-3 { grid-template-columns: repeat(3, 1fr); }
}

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

.m3-flex {
    display: flex;
}

.m3-flex-column {
    flex-direction: column;
}

.m3-flex-row {
    flex-direction: row;
}

.m3-flex-wrap {
    flex-wrap: wrap;
}

.m3-flex-center {
    align-items: center;
    justify-content: center;
}

.m3-flex-between {
    justify-content: space-between;
}

.m3-flex-around {
    justify-content: space-around;
}

.m3-flex-start {
    justify-content: flex-start;
}

.m3-flex-end {
    justify-content: flex-end;
}

.m3-align-center {
    align-items: center;
}

.m3-align-start {
    align-items: flex-start;
}

.m3-align-end {
    align-items: flex-end;
}

.m3-flex-1 { flex: 1; }
.m3-flex-2 { flex: 2; }
.m3-flex-3 { flex: 3; }

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

/* Margin utilities */
.m3-m-0 { margin: 0; }
.m3-m-1 { margin: var(--m3-space-1); }
.m3-m-2 { margin: var(--m3-space-2); }
.m3-m-3 { margin: var(--m3-space-3); }
.m3-m-4 { margin: var(--m3-space-4); }
.m3-m-5 { margin: var(--m3-space-5); }
.m3-m-6 { margin: var(--m3-space-6); }
.m3-m-8 { margin: var(--m3-space-8); }

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

/* Directional spacing */
.m3-mt-0 { margin-top: 0; }
.m3-mt-1 { margin-top: var(--m3-space-1); }
.m3-mt-2 { margin-top: var(--m3-space-2); }
.m3-mt-3 { margin-top: var(--m3-space-3); }
.m3-mt-4 { margin-top: var(--m3-space-4); }
.m3-mt-6 { margin-top: var(--m3-space-6); }
.m3-mt-8 { margin-top: var(--m3-space-8); }

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

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

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

.m3-pt-0 { padding-top: 0; }
.m3-pt-1 { padding-top: var(--m3-space-1); }
.m3-pt-2 { padding-top: var(--m3-space-2); }
.m3-pt-3 { padding-top: var(--m3-space-3); }
.m3-pt-4 { padding-top: var(--m3-space-4); }

.m3-pb-0 { padding-bottom: 0; }
.m3-pb-1 { padding-bottom: var(--m3-space-1); }
.m3-pb-2 { padding-bottom: var(--m3-space-2); }
.m3-pb-3 { padding-bottom: var(--m3-space-3); }
.m3-pb-4 { padding-bottom: var(--m3-space-4); }

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

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

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

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

.m3-text-primary { color: var(--m3-primary); }
.m3-text-secondary { color: var(--m3-secondary); }
.m3-text-on-surface { color: var(--m3-on-surface); }
.m3-text-on-surface-variant { color: var(--m3-on-surface-variant); }
.m3-text-error { color: var(--m3-error); }

.m3-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m3-text-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

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

.m3-block { display: block; }
.m3-inline { display: inline; }
.m3-inline-block { display: inline-block; }
.m3-flex { display: flex; }
.m3-grid { display: grid; }
.m3-hidden { display: none; }

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

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

/* ===== Mobile Width and Height Utilities ===== */

.m3-w-full { width: 100%; }
.m3-w-auto { width: auto; }
.m3-w-fit { width: fit-content; }

.m3-h-full { height: 100%; }
.m3-h-auto { height: auto; }
.m3-h-fit { height: fit-content; }

.m3-min-h-screen { min-height: 100vh; }
.m3-min-h-full { min-height: 100%; }

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

.m3-overflow-hidden { overflow: hidden; }
.m3-overflow-auto { overflow: auto; }
.m3-overflow-scroll { overflow: scroll; }
.m3-overflow-x-hidden { overflow-x: hidden; }
.m3-overflow-y-hidden { overflow-y: hidden; }
.m3-overflow-x-auto { overflow-x: auto; }
.m3-overflow-y-auto { overflow-y: auto; }

/* ===== Mobile Z-Index Utilities ===== */

.m3-z-0 { z-index: 0; }
.m3-z-10 { z-index: 10; }
.m3-z-20 { z-index: 20; }
.m3-z-30 { z-index: 30; }
.m3-z-40 { z-index: 40; }
.m3-z-50 { z-index: 50; }
.m3-z-100 { z-index: 100; }
.m3-z-1000 { z-index: 1000; }

/* ===== Mobile Interaction States ===== */

.m3-interactive {
    cursor: pointer;
    transition: all var(--m3-motion-duration-short2) var(--m3-motion-easing-standard);
}

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

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

/* Touch-specific interactions */
@media (hover: none) and (pointer: coarse) {
    .m3-interactive:hover {
        opacity: 1;
    }
    
    .m3-interactive:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

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

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

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    .m3-interactive {
        border: 1px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Mobile Safe Area Support ===== */

.m3-safe-area-top {
    padding-top: env(safe-area-inset-top, 0);
}

.m3-safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.m3-safe-area-left {
    padding-left: env(safe-area-inset-left, 0);
}

.m3-safe-area-right {
    padding-right: env(safe-area-inset-right, 0);
}

.m3-safe-area-all {
    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);
}