/* ==============================================
   Responsive Styles - VIEWPORT-FIT, NO SCROLL
   Works at 25%, 50%, 75%, 100% zoom
   Portrait & Landscape, Tablet & Phone
   Family Planner Application
   ============================================== */

/* ==============================================
   BASE: Smart overflow - allow scroll on mobile
   ============================================== */
html, body, .app-container {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* Allow scrolling on mobile */
@media (max-width: 800px) {
    html, body {
        overflow: auto !important;
        height: auto !important;
        min-height: 100vh;
    }

    .app-container {
        overflow: visible !important;
        height: auto !important;
        min-height: 100vh;
    }
}

/* Ensure main content fills viewport height on desktop */
.main-content {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}

/* Mobile: Allow content to flow naturally */
@media (max-width: 800px) {
    .main-content {
        height: auto !important;
        max-height: none !important;
        min-height: 60vh;
    }
}

/* Year header stays compact */
.year-header {
    flex-shrink: 0 !important;
}

/* Calendar panel fills remaining space */
#calendarPanel.active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Voice bar stays compact */
#calendarPanel .voice-command-bar {
    flex-shrink: 0 !important;
}

/* Year calendar fills remaining space */
#yearCalendar {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Expanded month fills year calendar */
.expanded-month {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding-bottom: var(--spacing-sm) !important;
}

/* Expanded header stays compact */
.expanded-header {
    flex-shrink: 0 !important;
}

/* Calendar grid - desktop viewport-based height */
.calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    grid-template-rows: auto repeat(6, 1fr) !important;
    height: calc(100vh - 140px);
    min-height: calc(100vh - 140px);
    max-height: calc(100vh - 140px);
}

/* Mobile: Calendar flows naturally and can scroll */
@media (max-width: 800px) {
    .calendar-grid {
        height: auto !important;
        min-height: 400px !important;
        max-height: none !important;
        grid-template-rows: auto repeat(6, minmax(60px, auto)) !important;
    }
}

/* Ensure calendar days stretch to fill their grid cells */
.calendar-day {
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
}

/* #yearCalendar needs explicit sizing */
#yearCalendar {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* ==============================================
   LANDSCAPE MODE (wide screens)
   Show sidebar, calendar fills remaining space
   ============================================== */
@media (orientation: landscape) {
    .sidebar {
        display: flex;
    }

    .main-content {
        margin-left: 0;
    }
}

/* ==============================================
   PORTRAIT MODE (tall screens)
   Transform sidebar to horizontal top bar on mobile
   ============================================== */
@media (orientation: portrait) and (max-width: 900px) {
    .app-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: auto !important;
        max-height: 35vh;
        flex-direction: column;
        border-right: none;
        border-bottom: 3px solid #B8860B;
        padding: clamp(8px, 2vmin, 16px);
        overflow-y: auto;
        gap: clamp(6px, 1vmin, 12px);
    }

    .sidebar-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: clamp(8px, 2vmin, 16px);
        padding-bottom: clamp(6px, 1vmin, 12px);
        flex-wrap: wrap;
    }

    .sidebar-header .current-time {
        font-size: clamp(24px, 6vw, 40px);
    }

    .sidebar-header .current-date {
        font-size: clamp(11px, 3vw, 16px);
        margin-top: 0;
    }

    .sidebar-header .family-name {
        font-size: clamp(8px, 2vw, 12px);
        margin-top: 0;
    }

    .month-nav {
        display: none;
    }

    .today-section {
        display: none;
    }

    .weather-widget {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: clamp(8px, 2vmin, 16px);
        padding: clamp(6px, 1.5vmin, 12px);
        text-align: left;
    }

    .weather-widget .weather-temp {
        font-size: clamp(18px, 5vw, 28px);
    }

    .weather-widget .weather-forecast {
        display: flex;
        flex-direction: row;
        gap: clamp(8px, 2vmin, 16px);
        border-top: none;
        border-left: 1px solid #ddd;
        padding-left: clamp(8px, 2vmin, 16px);
        padding-top: 0;
        margin-top: 0;
        flex: 1;
        overflow-x: auto;
    }

    .weather-widget .forecast-item {
        flex-direction: column;
        gap: 2px;
        min-width: 50px;
    }

    .rewards-widget {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: clamp(16px, 4vmin, 32px);
        padding: clamp(8px, 1.5vmin, 14px);
    }

    .rewards-widget .rewards-title {
        display: none;
    }

    .rewards-widget .rewards-kids {
        flex-direction: row;
        gap: clamp(16px, 4vmin, 32px);
    }

    .main-content {
        margin-left: 0;
        width: 100vw;
        flex: 1;
        min-height: 0;
    }
}

/* ==============================================
   PHONE VIEW (< 600px)
   Simple compact header - time, weather, mic only
   Calendar scrollable below
   ============================================== */
@media (max-width: 600px) {
    html, body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .app-container {
        flex-direction: column;
        height: auto !important;
        min-height: 100vh;
    }

    .sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: auto !important;
        max-height: none !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        border-right: none;
        border-bottom: 2px solid #B8860B;
        padding: clamp(8px, 2vw, 14px) clamp(12px, 3vw, 20px);
        gap: clamp(8px, 2vw, 16px);
        background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    }

    .sidebar-header {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 0;
        border-bottom: none;
    }

    .sidebar-header .current-time {
        font-size: clamp(24px, 8vw, 36px);
        font-weight: 300;
    }

    .sidebar-header .current-date {
        font-size: clamp(11px, 3vw, 15px);
        margin-top: 2px;
    }

    .sidebar-header .family-name {
        display: none;
    }

    .smart-mic-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        position: static !important;
        flex-shrink: 0;
    }

    /* Hide these on phone */
    .month-nav,
    .today-section,
    .rewards-widget,
    .quick-actions {
        display: none !important;
    }

    .weather-widget {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: clamp(6px, 1.5vw, 12px);
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: none;
        margin: 0;
    }

    .weather-widget .weather-temp {
        font-size: clamp(20px, 6vw, 30px);
        font-weight: 500;
    }

    .weather-widget .weather-desc {
        font-size: clamp(16px, 5vw, 24px);
    }

    .weather-widget .weather-forecast {
        display: none;
    }

    .main-content {
        margin-left: 0;
        padding: clamp(6px, 1.5vw, 12px);
        flex: 1;
        min-height: 0;
        height: auto !important;
        max-height: none !important;
    }

    .year-header {
        padding: clamp(6px, 1.5vw, 10px) 0;
        margin-bottom: clamp(6px, 1.5vw, 10px);
        gap: clamp(6px, 1.5vw, 12px);
        flex-wrap: wrap;
        justify-content: center;
    }

    .year-nav {
        flex: 1 1 100%;
        justify-content: center;
    }

    .year-title {
        font-size: clamp(22px, 6vw, 32px) !important;
    }

    .year-arrow {
        width: clamp(32px, 9vw, 44px) !important;
        height: clamp(32px, 9vw, 44px) !important;
    }

    .header-actions {
        flex: 1 1 100%;
        justify-content: center;
        gap: clamp(6px, 1.5vw, 12px);
    }

    .action-pill {
        padding: clamp(8px, 2vw, 14px) clamp(14px, 4vw, 22px);
        font-size: clamp(12px, 3.5vw, 16px);
    }

    .preview-section,
    .voice-command-bar {
        display: none !important;
    }

    /* Calendar - scrollable, natural height */
    #yearCalendar,
    .expanded-month {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .calendar-grid {
        height: auto !important;
        min-height: 350px !important;
        max-height: none !important;
        grid-template-rows: auto repeat(6, minmax(55px, auto)) !important;
    }

    .calendar-day {
        padding: clamp(4px, 1vw, 8px) !important;
        min-height: 55px !important;
    }

    .day-num {
        font-size: clamp(13px, 4vw, 18px) !important;
        font-weight: 700 !important;
    }

    .moon-phase {
        font-size: clamp(10px, 3vw, 14px) !important;
    }

    .event-pill,
    .holiday-pill,
    .lunch-pill {
        font-size: clamp(9px, 2.5vw, 12px) !important;
        padding: clamp(2px, 0.5vw, 4px) clamp(4px, 1vw, 8px) !important;
        margin-bottom: 2px !important;
    }

    .day-header-cell {
        font-size: clamp(10px, 3vw, 14px) !important;
        padding: clamp(6px, 1.5vw, 10px) !important;
    }
}

/* ==============================================
   MEDIUM VIEWPORTS (tablets, medium zoom)
   ============================================== */
@media (min-width: 501px) and (max-width: 1000px) {
    :root {
        --sidebar-width: clamp(100px, 15vw, 180px);
    }

    .month-header {
        display: none;
    }
}

/* ==============================================
   LARGE VIEWPORTS (desktops, large zoom)
   ============================================== */
@media (min-width: 1001px) {
    :root {
        --sidebar-width: clamp(180px, 18vw, 350px);
    }
}

/* ==============================================
   EXTRA LARGE VIEWPORTS (big monitors)
   ============================================== */
@media (min-width: 1600px) {
    :root {
        --fs-xxs: clamp(10px, 0.9vmin, 16px);
        --fs-xs: clamp(12px, 1vmin, 18px);
        --fs-sm: clamp(14px, 1.2vmin, 22px);
        --fs-base: clamp(16px, 1.4vmin, 26px);
        --fs-md: clamp(18px, 1.6vmin, 30px);
        --fs-lg: clamp(22px, 2vmin, 36px);
        --fs-xl: clamp(28px, 2.5vmin, 44px);
        --fs-xxl: clamp(36px, 3.5vmin, 60px);
    }
}

/* ==============================================
   LANDSCAPE PHONE (short and wide)
   Compact sidebar on left, calendar fills rest
   ============================================== */
@media (max-height: 500px) and (orientation: landscape) {
    html, body, .app-container {
        overflow: hidden !important;
        height: 100vh !important;
    }

    .app-container {
        flex-direction: row !important;
    }

    .sidebar {
        display: flex !important;
        width: clamp(100px, 15vw, 160px) !important;
        min-width: 100px !important;
        max-width: 160px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-around !important;
        border-right: 2px solid #B8860B !important;
        border-bottom: none !important;
        padding: clamp(6px, 1.5vmin, 12px) !important;
        gap: clamp(6px, 1.5vmin, 12px) !important;
        overflow: hidden !important;
    }

    .sidebar-header {
        flex-direction: column;
        align-items: center;
        padding: 0;
        border: none;
    }

    .sidebar-header .current-time {
        font-size: clamp(20px, 5vh, 32px);
    }

    .sidebar-header .current-date {
        font-size: clamp(10px, 2.5vh, 14px);
    }

    .sidebar-header .family-name {
        display: none;
    }

    .smart-mic-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        position: static !important;
    }

    /* Hide on landscape phone */
    .month-nav,
    .today-section,
    .rewards-widget,
    .quick-actions,
    .weather-forecast {
        display: none !important;
    }

    .weather-widget {
        padding: clamp(4px, 1vmin, 8px);
        background: transparent;
        box-shadow: none;
        border: none;
    }

    .weather-widget .weather-temp {
        font-size: clamp(16px, 4vh, 26px);
    }

    .weather-widget .weather-desc {
        font-size: clamp(14px, 3.5vh, 22px);
    }

    .main-content {
        margin-left: 0 !important;
        flex: 1;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        padding: clamp(4px, 1vmin, 8px) !important;
    }

    .year-header {
        padding: clamp(2px, 0.5vh, 6px) 0 !important;
        margin-bottom: clamp(2px, 0.5vh, 6px) !important;
    }

    .year-title {
        font-size: clamp(18px, 5vh, 28px) !important;
    }

    .year-arrow {
        width: clamp(24px, 6vh, 36px) !important;
        height: clamp(24px, 6vh, 36px) !important;
    }

    .action-pill {
        padding: clamp(4px, 1vh, 10px) clamp(10px, 2.5vh, 18px) !important;
        font-size: clamp(10px, 2.5vh, 14px) !important;
    }

    .preview-section,
    .voice-command-bar {
        display: none !important;
    }

    .calendar-grid {
        height: calc(100vh - 45px) !important;
        min-height: calc(100vh - 45px) !important;
        max-height: calc(100vh - 45px) !important;
    }

    .calendar-day {
        padding: clamp(2px, 0.5vmin, 4px) !important;
    }

    .day-num {
        font-size: clamp(10px, 2.5vh, 14px) !important;
        font-weight: 700 !important;
    }

    .moon-phase {
        font-size: clamp(8px, 2vh, 12px) !important;
    }

    .event-pill,
    .holiday-pill,
    .lunch-pill {
        font-size: clamp(7px, 1.8vh, 11px) !important;
        padding: 1px 4px !important;
    }

    .day-header-cell {
        padding: clamp(3px, 0.8vh, 8px) !important;
        font-size: clamp(9px, 2.2vh, 13px) !important;
    }
}

/* ==============================================
   PORTRAIT PHONE (tall and narrow)
   Show compact horizontal bar with key info
   ============================================== */
@media (max-width: 450px) and (orientation: portrait) {
    .year-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: clamp(4px, 1vw, 8px);
    }

    .year-nav {
        justify-content: center;
    }

    .header-actions {
        justify-content: center;
        flex-wrap: wrap;
        flex: 1 1 100%;
    }

    .preview-section {
        display: none;
    }
}

/* ==============================================
   TABLET PORTRAIT
   ============================================== */
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
    .sidebar {
        display: none;
    }

    .main-content {
        margin-left: 0;
    }

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

/* ==============================================
   TABLET LANDSCAPE
   ============================================== */
@media (min-width: 900px) and (max-width: 1200px) and (orientation: landscape) {
    :root {
        --sidebar-width: clamp(140px, 16vw, 220px);
    }
}

/* ==============================================
   NARROW SCREENS - Horizontal sidebar layout
   ============================================== */
@media (max-width: 800px) {
    .app-container {
        flex-direction: column !important;
    }

    .sidebar {
        display: flex !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: auto !important;
        max-height: 35vh;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        border-right: none !important;
        border-bottom: 3px solid #B8860B;
        padding: clamp(8px, 2vmin, 16px);
    }

    .main-content {
        margin-left: 0 !important;
        width: 100vw !important;
        flex: 1;
        min-height: 0;
    }
}

/* ==============================================
   MODAL RESPONSIVE SIZING
   ============================================== */
.modal-content {
    width: clamp(280px, 90vw, 500px);
    max-width: 95vw;
    max-height: 90vh;
    padding: var(--spacing-base);
    border-radius: var(--border-radius);
    overflow-y: auto;
}

.modal h2 {
    font-size: var(--fs-lg);
    margin-bottom: var(--spacing-base);
}

.modal-btns button {
    padding: var(--spacing-sm) var(--spacing-base);
    font-size: var(--fs-sm);
}

/* Day Events Modal */
.day-events-modal {
    max-width: clamp(300px, 85vw, 600px);
    max-height: 85vh;
}

/* ==============================================
   VOICE COMMAND BAR RESPONSIVE
   ============================================== */
.voice-command-bar {
    padding: var(--spacing-sm) var(--spacing-base);
    border-radius: clamp(20px, 3vmin, 50px);
}

.voice-command-bar .mic-btn {
    width: clamp(28px, 4vmin, 48px);
    height: clamp(28px, 4vmin, 48px);
    font-size: var(--fs-md);
}

.voice-command-bar .voice-input {
    padding: var(--spacing-sm);
    font-size: var(--fs-sm);
}

.voice-command-bar .voice-submit-btn {
    padding: var(--spacing-sm) var(--spacing-base);
    font-size: var(--fs-xs);
}

/* ==============================================
   ADD EVENT BUTTON (FAB) RESPONSIVE
   ============================================== */
.add-event-btn {
    width: clamp(36px, 5vmin, 60px);
    height: clamp(36px, 5vmin, 60px);
    font-size: clamp(16px, 2.5vmin, 28px);
    bottom: clamp(10px, 2vmin, 25px);
    right: clamp(10px, 2vmin, 25px);
}

/* ==============================================
   KIDS PANEL RESPONSIVE
   ============================================== */
.kids-header {
    gap: var(--spacing-sm);
}

.kid-card {
    padding: var(--spacing-base) var(--spacing-sm);
}

.kid-card .emoji {
    font-size: clamp(20px, 4vmin, 40px);
}

.kid-card .name {
    font-size: var(--fs-sm);
}

.kid-card .points {
    font-size: var(--fs-base);
}

.chore-grid {
    gap: var(--spacing-sm);
}

.chore-btn {
    padding: var(--spacing-sm);
}

.chore-btn .icon {
    font-size: clamp(16px, 2.5vmin, 28px);
}

/* ==============================================
   MEAL PANEL RESPONSIVE
   ============================================== */
.meal-day {
    padding: var(--spacing-sm) var(--spacing-base);
}

.meal-day .day-name {
    width: clamp(50px, 8vmin, 80px);
    font-size: var(--fs-xs);
}

.meal-day .meal-icon {
    font-size: var(--fs-lg);
}

/* ==============================================
   FIA CHAT MODAL RESPONSIVE
   ============================================== */
.fia-modal-content {
    width: clamp(280px, 90vw, 500px);
    height: clamp(300px, 80vh, 600px);
}

.fia-header .avatar {
    font-size: clamp(24px, 4vmin, 40px);
}

.fia-header .title {
    font-size: var(--fs-md);
}

.message-bubble {
    padding: var(--spacing-sm) var(--spacing-base);
    font-size: var(--fs-sm);
    max-width: 85%;
}

.fia-input-container input {
    padding: var(--spacing-sm);
    font-size: var(--fs-sm);
}

/* ==============================================
   PRINT STYLES
   ============================================== */
@media print {
    .sidebar,
    .header-actions,
    .today-btn,
    .add-event-btn,
    .voice-command-bar,
    .nav-arrow,
    .preview-section {
        display: none !important;
    }

    html, body, .app-container, .main-content {
        overflow: visible !important;
        height: auto !important;
    }

    .main-content {
        margin-left: 0;
    }

    .calendar-grid {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .calendar-day {
        border: 1px solid #ddd;
        min-height: 60px;
    }

    .event-pill {
        color: black !important;
        background: #eee !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        background: white !important;
    }

    .december-theme {
        background: white !important;
    }

    .snowfall,
    .december-decorations {
        display: none !important;
    }
}

/* ==============================================
   HIGH CONTRAST / ACCESSIBILITY
   ============================================== */
@media (prefers-contrast: high) {
    .event-pill {
        border: 2px solid currentColor;
    }

    .calendar-day.today {
        box-shadow: inset 0 0 0 4px var(--accent-orange) !important;
    }

    .btn-secondary {
        border-width: 3px;
    }

    .day-num {
        font-weight: 700;
    }
}

/* ==============================================
   REDUCED MOTION
   ============================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .snowflake,
    .december-decorations {
        animation: none !important;
    }

    .lunch-pill {
        animation: none !important;
    }

    .lunch-pill .emoji {
        animation: none !important;
    }
}

/* ==============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================== */
@media (pointer: coarse) {
    .calendar-day {
        min-height: clamp(40px, 8vh, 100px);
    }

    .event-pill,
    .holiday-pill,
    .lunch-pill {
        min-height: clamp(20px, 3vh, 32px);
    }

    .action-pill,
    .today-btn,
    .year-arrow,
    .nav-arrow {
        min-height: clamp(32px, 5vh, 48px);
        min-width: clamp(32px, 5vh, 48px);
    }
}

/* ==============================================
   DARK MODE SUPPORT (future)
   ============================================== */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here */
}