/* Mobile Responsive Styles */

/* ============================================
   MOBILE-FIRST RESPONSIVE DESIGN
   Breakpoints:
   - 768px: Tablets
   - 600px: Large phones
   - 480px: Standard phones
   - 360px: Small phones
   ============================================ */

/* Touch-friendly tap targets - minimum 44px */
@media (max-width: 768px) {
    /* Prevent horizontal scroll and ensure proper scaling */
    html, body {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    body {
        padding: 12px;
    }

    /* Header mobile adjustments */
    .header {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .header-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-row-top {
        padding-bottom: 8px;
    }

    .header-left-group {
        flex: 1;
        min-width: 0;
    }

    .app-title {
        font-size: 1rem;
        padding-right: 8px;
        margin-right: 0;
        border-right: none;
    }

    .header-center-group {
        display: none;
    }

    .header-right-group {
        gap: 6px;
    }

    .header-widgets {
        gap: 6px;
    }

    .header-divider {
        display: none;
    }

    /* User info - hide name on mobile */
    .user-name {
        display: none;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
    }

    /* Menu button */
    .header-menu-btn {
        padding: 10px 14px;
        min-height: 44px;
    }

    .header-menu-btn span:not(.menu-icon) {
        display: none;
    }

    /* Menu dropdown - full width on mobile */
    .header-menu.active {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
        min-width: auto;
        width: calc(100vw - 48px);
        max-width: 320px;
        left: 0;
        right: auto;
        max-height: 70vh;
        overflow-y: auto;
    }

    .menu-section {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .menu-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .menu-section-wide {
        grid-column: 1;
    }

    .menu-item {
        padding: 12px 14px;
        min-height: 44px;
    }

    /* Add task form */
    .add-task-form {
        max-width: 100%;
        min-width: 0;
    }

    .add-task-form input {
        padding: 14px 16px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Header buttons row */
    .header-row-bottom {
        display: none;
    }

    /* Board - single column */
    .board {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: auto;
        max-width: 100%;
    }

    .column {
        padding: 16px;
        border-radius: 16px;
        min-height: 200px;
        max-height: none;
    }

    .column-header {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .column-title {
        font-size: 0.75rem;
    }

    /* Task input */
    .task-input-row {
        flex-direction: column;
    }

    .task-input-main {
        font-size: 16px; /* Prevents iOS zoom */
        padding: 14px 16px;
    }

    .task-expand-btn {
        align-self: flex-end;
        padding: 12px 16px;
        min-height: 44px;
    }

    .task-input-extras.active {
        flex-direction: column;
    }

    .task-input-date,
    .task-input-tags {
        font-size: 16px;
        padding: 12px 14px;
    }

    /* Task items - touch friendly */
    .task-item {
        padding: 14px;
        border-radius: 14px;
        gap: 12px;
    }

    .task-text {
        font-size: 0.9rem;
    }

    .checkbox {
        width: 24px;
        height: 24px;
    }

    .checkbox svg {
        width: 14px;
        height: 14px;
    }

    /* Always show delete button on mobile */
    .delete-btn {
        opacity: 1;
        padding: 10px;
        min-width: 44px;
        min-height: 44px;
    }

    .delete-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Task timer and duration */
    .task-timer,
    .task-duration {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    /* Task tags */
    .task-tags {
        margin-top: 10px;
    }

    .task-tag {
        font-size: 0.65rem;
        padding: 4px 8px;
    }

    /* Waiting section */
    .waiting-section {
        padding: 16px;
        margin-top: 12px;
        border-radius: 14px;
    }

    .waiting-header {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .waiting-title {
        font-size: 0.8rem;
    }

    .waiting-tasks {
        gap: 10px;
    }

    .waiting-task {
        padding: 14px 16px;
        border-radius: 12px;
        width: 100%;
        max-width: none;
    }

    /* Clock widget */
    .clock-widget {
        padding: 8px 10px;
        min-height: 44px;
    }

    .clock-date {
        display: none;
    }

    /* Weather widget */
    .weather-widget {
        padding: 8px 10px;
        min-height: 44px;
    }

    .weather-desc {
        display: none;
    }

    /* Weather popup - centered on mobile */
    .weather-popup {
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        width: calc(100vw - 32px);
        max-width: 320px;
    }

    /* Calendar popup - centered */
    .calendar-popup {
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        width: calc(100vw - 32px);
        max-width: 320px;
    }

    /* Below fold section */
    .below-fold-section {
        margin-top: 24px;
        padding: 0 0 32px;
    }

    /* Calendar widget */
    .calendar-widget {
        padding: 12px;
        border-radius: 14px;
    }

    .calendar-events {
        gap: 8px;
    }

    .calendar-event {
        width: 160px;
        padding: 10px;
    }

    .event-title {
        font-size: 0.75rem;
    }

    .event-time {
        font-size: 0.65rem;
    }

    /* Quotes widget */
    .quotes-widget {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 10px;
    }

    .quotes-text {
        font-size: 0.75rem;
    }

    .quotes-author {
        font-size: 0.65rem;
    }

    .fact-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .fact-divider {
        display: none;
    }

    /* Buttons - touch friendly */
    .google-btn {
        padding: 14px 24px;
        min-height: 48px;
    }

    .logout-btn {
        padding: 10px 14px;
        min-height: 44px;
    }

    .close-btn {
        padding: 12px 16px;
        min-height: 44px;
    }

    /* Toast notifications */
    .toast-container {
        bottom: 20px;
        width: calc(100% - 32px);
        max-width: none;
    }

    .toast {
        padding: 14px 20px;
        font-size: 0.85rem;
        width: 100%;
    }
}

/* ============================================
   PANELS & MODALS - MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Stats/Archive overlay modals - full screen on mobile */
    .stats-overlay,
    #archive-overlay,
    #inbox-overlay,
    #notes-overlay,
    #wallpaper-overlay,
    #news-overlay,
    #bookmarks-overlay,
    #games-overlay,
    #gemini-overlay,
    #edit-task-overlay {
        padding: 0;
    }

    .stats-modal,
    .archive-modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
    }

    .stats-header {
        padding: 16px;
        position: sticky;
        top: 0;
        background: inherit;
        z-index: 10;
    }

    .stats-header h2 {
        font-size: 1.1rem;
    }

    /* Email inbox - full screen */
    .superhuman-inbox {
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .inbox-sidebar {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .inbox-sidebar-header {
        padding: 14px 16px;
    }

    .inbox-sidebar-header h2 {
        font-size: 1rem;
    }

    .inbox-list {
        padding: 8px;
    }

    .inbox-item {
        padding: 14px;
        border-radius: 10px;
    }

    .inbox-shortcuts-hint {
        display: none;
    }

    /* Email preview - show as separate screen */
    .email-preview {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        display: none;
        border-radius: 0;
    }

    .email-preview.active {
        display: block;
    }

    .preview-header {
        padding: 14px 16px;
        position: sticky;
        top: 0;
    }

    .preview-back-btn {
        display: flex !important;
    }

    /* Notes panel - full screen */
    .notes-panel {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    .notes-header {
        padding: 14px 16px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .notes-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .notes-textarea {
        font-size: 16px;
        padding: 16px;
    }

    /* Wallpaper panel */
    .wallpaper-panel {
        width: 100%;
        height: 100%;
        max-width: 100%;
        border-radius: 0;
    }

    .wallpaper-header {
        padding: 14px 16px;
    }

    .wallpaper-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 12px;
    }

    /* News panel */
    .news-modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .news-header {
        padding: 14px 16px;
    }

    .news-tabs {
        padding: 0 16px 12px;
    }

    .news-tab {
        padding: 10px 16px;
        font-size: 0.8rem;
    }

    .news-item {
        padding: 14px 16px;
    }

    /* Bookmarks panel */
    .bookmarks-modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .bookmarks-header {
        padding: 14px 16px;
    }

    .bookmarks-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .bookmark-item {
        padding: 14px;
    }

    /* Games panel */
    .games-modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .games-header {
        padding: 14px 16px;
    }

    /* Gemini AI panel */
    .gemini-panel {
        width: 100%;
        height: 100%;
        max-width: 100%;
        border-radius: 0;
        right: -100%; /* Off-screen when not active */
    }

    .gemini-panel.active {
        right: 0; /* On-screen when active */
    }

    .gemini-panel-header {
        padding: 14px 16px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .gemini-panel-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.2rem;
    }

    .gemini-clear-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .gemini-input-container input {
        font-size: 16px;
        padding: 14px 16px;
    }

    .gemini-send-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Hide overlay on mobile since panel is full-screen */
    .gemini-overlay.active {
        display: none;
    }

    /* Spotify popup */
    .spotify-popup {
        width: calc(100% - 32px);
        max-width: 100%;
        max-height: 90vh;
        border-radius: 16px;
        left: 16px;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    .spotify-popup-header {
        padding: 14px 16px;
    }

    .spotify-popup-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .spotify-input {
        font-size: 16px;
    }

    /* Edit task modal */
    .edit-task-modal {
        width: calc(100% - 32px);
        max-width: 100%;
        margin: 16px;
        border-radius: 16px;
    }

    .edit-task-header {
        padding: 16px;
    }

    .edit-task-content {
        padding: 16px;
    }

    .edit-task-input,
    .edit-task-textarea {
        font-size: 16px;
        padding: 14px;
    }

    .edit-task-actions {
        padding: 16px;
        gap: 12px;
    }

    .edit-task-actions button {
        padding: 14px 20px;
        min-height: 48px;
    }

    /* Coming soon popup */
    .coming-soon-popup {
        width: calc(100% - 32px);
        max-width: 100%;
        padding: 32px 24px;
        border-radius: 20px;
    }

    .coming-soon-icon {
        font-size: 3rem;
    }

    .coming-soon-title {
        font-size: 1.5rem;
    }

    .coming-soon-text {
        font-size: 0.9rem;
    }

    .coming-soon-btn {
        padding: 14px 28px;
        min-height: 48px;
    }
}

/* ============================================
   SMALL PHONES (480px and below)
   ============================================ */

@media (max-width: 480px) {
    body {
        padding: 8px;
    }

    .header {
        padding: 8px 10px;
    }

    .app-title {
        font-size: 0.9rem;
    }

    .header-menu-btn {
        padding: 8px 12px;
    }

    .board {
        gap: 10px;
    }

    .column {
        padding: 14px;
    }

    .task-item {
        padding: 12px;
    }

    .task-text {
        font-size: 0.85rem;
    }

    .waiting-section {
        padding: 14px;
    }

    .waiting-task {
        padding: 12px 14px;
    }

    /* Quotes widget - stack vertically */
    .quotes-widget {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Calendar events - smaller cards */
    .calendar-event {
        width: 140px;
    }

    /* Bookmark grid - single column */
    .bookmarks-grid {
        grid-template-columns: 1fr;
    }

    /* Wallpaper grid - 2 columns */
    .wallpaper-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   VERY SMALL PHONES (360px and below)
   ============================================ */

@media (max-width: 360px) {
    body {
        padding: 6px;
    }

    .header {
        padding: 6px 8px;
    }

    .header-menu-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .clock-widget,
    .weather-widget {
        padding: 6px 8px;
        font-size: 0.75rem;
    }

    .user-avatar {
        width: 28px;
        height: 28px;
    }

    .column {
        padding: 12px;
    }

    .column-title {
        font-size: 0.7rem;
    }

    .task-item {
        padding: 10px;
    }

    .checkbox {
        width: 22px;
        height: 22px;
    }

    .task-text {
        font-size: 0.8rem;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    .board {
        grid-template-columns: repeat(2, 1fr);
    }

    .column {
        min-height: 150px;
        max-height: 60vh;
    }

    /* Modals - don't go full height in landscape */
    .stats-modal,
    .archive-modal,
    .superhuman-inbox,
    .news-modal,
    .bookmarks-modal,
    .games-modal {
        max-height: 90vh;
        height: auto;
        border-radius: 16px;
        margin: 5vh auto;
    }
}

/* ============================================
   SAFE AREA INSETS (for notched phones)
   ============================================ */

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        body {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
            padding-bottom: max(12px, env(safe-area-inset-bottom));
        }

        .toast-container {
            bottom: max(20px, env(safe-area-inset-bottom));
        }
    }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .task-item,
    .column,
    .header,
    .waiting-section {
        border-width: 0.5px;
    }
}

/* ============================================
   REDUCED MOTION PREFERENCE
   ============================================ */

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

/* ============================================
   TOUCH DEVICE ENHANCEMENTS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* Always show interactive elements on touch devices */
    .delete-btn {
        opacity: 0.7;
    }

    .task-item:hover .delete-btn {
        opacity: 1;
    }

    .waiting-task .task-delete {
        opacity: 0.7;
    }

    /* Disable hover transforms on touch */
    .task-item:hover,
    .waiting-task:hover,
    .calendar-event:hover,
    .bookmark-item:hover,
    .inbox-item:hover,
    .news-item:hover {
        transform: none;
    }

    /* Add active states instead */
    .task-item:active,
    .waiting-task:active,
    .calendar-event:active,
    .bookmark-item:active,
    .inbox-item:active,
    .news-item:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    .google-btn:active,
    .menu-item:active,
    .close-btn:active {
        transform: scale(0.95);
    }
}

/* ============================================
   DARK MODE ADJUSTMENTS (system preference)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* App already uses dark theme, but ensure contrast */
    .task-text {
        color: rgba(255, 255, 255, 0.95);
    }
}

/* ============================================
   AUTH/LANDING PAGE MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    .auth-hero {
        padding: 40px 16px;
        min-height: 100vh;
        height: auto;
    }

    .header-login {
        top: 16px;
        right: 16px;
    }

    .header-login .google-btn {
        padding: 12px 16px;
        min-height: 44px;
    }

    .hero-content {
        padding: 0 16px;
        flex-direction: column;
        gap: 32px;
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-text h1 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .auth-tagline {
        font-size: 1rem;
    }

    .hero-cta {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .hero-cta button,
    .hero-demo-btn {
        width: 100%;
        max-width: 280px;
        min-height: 48px;
        padding: 14px 24px;
    }

    .hero-notify-row {
        flex-direction: column;
        width: 100%;
    }

    .hero-notify-row .hero-notify-form {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }

    .hero-notify-row .hero-notify-form input {
        width: 100%;
        font-size: 16px;
        padding: 14px 16px;
        min-height: 48px;
    }

    .hero-notify-row .hero-notify-form button {
        width: 100%;
        min-height: 48px;
        padding: 14px 18px;
    }

    /* Hide decorative elements on mobile */
    .orbit-container {
        display: none;
    }

    .floating-widget {
        display: none;
    }
}

@media (max-width: 480px) {
    .auth-hero {
        padding: 32px 12px;
    }

    .header-login {
        top: 12px;
        right: 12px;
    }

    .hero-text h1 {
        font-size: 1.8rem;
    }

    .auth-tagline {
        font-size: 0.9rem;
    }

    .hero-cta button,
    .hero-demo-btn {
        max-width: 100%;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .header-menu-container,
    .header-right-group,
    .delete-btn,
    .task-expand-btn,
    .stats-overlay,
    .toast-container {
        display: none !important;
    }

    .board {
        display: block;
    }

    .column {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 20px;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .task-item {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}