/* Mobile Specific Styles - SkyMap */

/* Default: Hide mobile elements on desktop */
.mobile-nav,
.mobile-only,
.mobile-info-container,
.mobile-aspects-container,
.mobile-chart-preview {
    display: none !important;
}

@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        overscroll-behavior-y: contain;
        /* Prevents pull-to-refresh */
    }

    body {
        height: auto;
        overflow-y: auto;
        display: block;
        padding-bottom: 80px;
        background-color: #fff;
        overscroll-behavior-y: contain;
        /* Prevents pull-to-refresh */
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-nav {
        display: flex !important;
        zoom: 0.85;
    }

    .mobile-only,
    .mobile-info-container,
    .mobile-aspects-container {
        display: block !important;
    }

    /* Mobile Top Header (Fixed) */
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: rgba(255, 255, 255, 0.95);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        z-index: 5000;
        /* Below modals (10000) and bottom sheet */
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-bottom: 1px solid #eee;
    }

    .header-logo {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-logo-img {
        max-height: 28px;
        width: auto;
        display: block;
    }

    .sub-badge-mobile {
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 0.3px;
    }

    .sub-badge-mobile.sub-Free {
        background: #f1f3f5;
        color: #666;
    }

    .sub-badge-mobile.sub-Pro {
        background: #e7f5ff;
        color: #228be6;
        border: 1px solid #a5d8ff;
    }

    .sub-badge-mobile.sub-Enterprise {
        background: #fff9db;
        color: #f08c00;
        border: 1px solid #ffec99;
    }

    body.dark-mode .sub-badge-mobile.sub-Free {
        background: #2a2a4a;
        color: #aaa;
    }

    body.dark-mode .sub-badge-mobile.sub-Pro {
        background: #1a3a5a;
        color: #4dabf7;
        border-color: #2a4a6a;
    }

    body.dark-mode .sub-badge-mobile.sub-Enterprise {
        background: #3a3a1a;
        color: #fcc419;
        border-color: #5a5a2a;
    }

    .user-badge-mobile {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 13px;
    }

    .header-link {
        color: #333;
        text-decoration: none;
        font-weight: 600;
    }

    .header-logout {
        color: #e74c3c;
        text-decoration: none;
        font-size: 16px;
    }

    .v-separator {
        color: #ddd;
        font-weight: normal;
    }

    /* Alignment fix for HamburgSymbols character */
    #mobileDarkToggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transform: translateY(2px);
        line-height: normal !important;
    }

    .main-container {
        flex-direction: column;
        height: auto;
        overflow: visible;
        margin-top: 50px;
        /* Offset for fixed header */
    }

    /* Mobile Bottom Navigation */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100% !important;
        height: 65px;
        background: white;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
        z-index: 12000 !important;
        border-top: 1px solid #eee;
        padding: 0 5px;
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #555;
        flex: 1;
        min-width: 0;
        cursor: pointer;
        touch-action: manipulation;
        /* Improves responsiveness and prevents unintended gestures */
    }

    .nav-icon {
        font-size: 18px;
        color: #444;
    }

    .nav-label {
        font-size: 9px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Chart Section Layout */
    .chart-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "user eclipse"
            "chart chart"
            "voc phase";
        gap: 5px;
        padding: 10px 5px 10px 5px;
        /* Reduced top padding as we use margin-top on container */
        align-items: start;
        height: auto !important;
    }

    .desktop-info-wrapper {
        display: contents;
    }

    .user-info-overlay,
    .eclipse-info,
    .voc-info,
    .phase-info {
        position: static !important;
        background: none !important;
        border: none !important;
        padding: 3px !important;
        width: auto !important;
        zoom: 0.8;
        color: #333 !important;
        font-size: 11px !important;
    }

    /* Firefox Specific External Text */
    .is-firefox .user-info-overlay,
    .is-firefox .eclipse-info,
    .is-firefox .voc-info,
    .is-firefox .phase-info,
    .is-firefox .info-sub,
    .is-firefox #userInfo,
    .is-firefox .voc-item,
    .is-firefox #lunarPhaseText {
        zoom: 1.0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .user-info-overlay {
        grid-area: user;
        text-align: left;
    }

    /* Eclipse info (which contains Transit info in JS logic) */
    .eclipse-info {
        grid-area: eclipse;
        text-align: right;
    }

    /* Transit info inside User Overlay (Left aligned) */
    .user-info-overlay .eclipse-info {
        text-align: left !important;
    }

    #astrologyChart {
        grid-area: chart;
        width: 100vw !important;
        height: 100vw !important;
        max-width: 100%;
        margin: 0;
        touch-action: pan-y pinch-zoom;
        /* Restore pan-y to allow scrolling the page when touching the chart */
    }

    .voc-info {
        grid-area: voc;
        text-align: left;
    }

    .phase-info {
        grid-area: phase;
        text-align: right;
    }

    .eclipse-title {
        display: block;
        font-weight: bold;
        margin-bottom: 2px;
        color: #000 !important;
        font-size: 10px !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Data Section Mobile Grid */
    .data-section {
        width: 100%;
        padding: 15px;
        background: #fff;
        border-top: 1px solid #eee;
        zoom: 0.8;
        display: flex !important;
        flex-direction: column !important;
    }

    .is-firefox .data-section {
        zoom: 1.0 !important;
        font-size: 11px !important;
    }

    /* Main Data Wrapper - Grid Layout */
    .data-scroll-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Left Column (Mobile Right Side) */
    .data-col-left {
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        align-items: stretch !important;
    }

    /* Mobile Right Side Order: Angles Top, Planets Bottom */
    .angles-wrapper {
        order: 1 !important;
        margin-top: 0 !important;
        border-top: none !important;
    }

    .planet-list-wrapper {
        order: 2 !important;
    }

    /* Right Column (Mobile Left Side) */
    .data-col-right {
        order: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        align-items: stretch !important;
    }

    /* Aspect Grid */
    .aspects-grid-mobile {
        border-collapse: collapse;
        width: 100%;
    }

    .aspects-grid-mobile td {
        width: 24px;
        height: 24px;
        border: 1px solid #ddd !important;
        text-align: center;
        font-size: 14px;
        font-family: 'HamburgSymbols', sans-serif;
        background: #fff;
    }

    .aspects-grid-mobile td.empty {
        border: none !important;
        background: transparent;
    }

    /* Chains - One below another */
    .chains-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    .chain-box {
        width: 100%;
        align-items: flex-start !important;
    }

    .graph-wrapper {
        height: 100px;
        background: none !important;
        border: none !important;
        width: 100%;
        justify-content: flex-start !important;
    }

    /* Planet List */
    .planet-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
    }

    .planet-item {
        justify-content: flex-end;
        padding: 4px 0;
        background: none !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-radius: 0;
        touch-action: manipulation;
        /* Improves responsiveness and prevents unintended gestures */
    }

    /* Stats Grid - Centered */
    .stats-grid {
        border-top: 1px solid #eee !important;
        margin-top: 20px !important;
        padding-top: 15px !important;
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        align-items: center !important;
    }

    .stat-box {
        justify-content: center !important;
        width: 100% !important;
        border-bottom: 1px solid #f9f9f9;
        padding-bottom: 10px !important;
    }

    /* All Modals as Bottom Sheets */
    .modal {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 90vh !important;
        /* Increased height */
        background: white !important;
        border: none !important;
        border-radius: 25px 25px 0 0 !important;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3) !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        /* Ensure scrolling */
        padding-bottom: 80px;
        overscroll-behavior-y: contain;
        /* Prevents pull-to-refresh when scrolling inside modal */
    }

    .modal-header {
        padding: 20px !important;
        background: #f8f9fa !important;
        color: #333 !important;
        border-bottom: 1px solid #eee !important;
        border-radius: 25px 25px 0 0 !important;
        position: sticky;
        top: 0;
        z-index: 11;
    }

    .modal-body {
        padding: 20px !important;
        background: white !important;
        overflow-y: visible !important;
        height: auto !important;
    }

    /* Fix for keyboard covering inputs */
    #dataModal {
        max-height: 95vh !important;
    }

    #dataModal .modal-body {
        padding-bottom: 300px !important;
        /* Extra space for keyboard */
    }

    /* Chart Type Menu - Fixed Bottom Sheet Style for Mobile */
    .chart-type-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 40vh !important;
        background: white !important;
        border-radius: 15px 15px 0 0 !important;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3) !important;
        z-index: 11000 !important;
        /* Above everything except nav */
        overflow-y: auto !important;
        padding: 10px 0 80px 0 !important;
        border: none !important;
        display: none;
        /* Toggled by JS */
    }

    .chart-type-option {
        padding: 15px 20px !important;
        font-size: 16px !important;
        border-bottom: 1px solid #eee !important;
        text-align: center !important;
        color: #333;
    }

    .chart-type-option.selected {
        background-color: #f0f7ff !important;
        color: var(--primary-color) !important;
        font-weight: bold;
    }

    /* Mobile Bottom Sheet */
    .mobile-bottom-sheet {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3);
        z-index: 10001;
        transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 20px 20px 85px 20px;
        border-radius: 25px 25px 0 0;
        max-height: 75vh;
        overflow-y: auto;
        display: block !important;
        overscroll-behavior-y: contain;
        /* Prevents pull-to-refresh when scrolling inside sheet */
    }

    .mobile-bottom-sheet.active {
        bottom: 0;
    }

    .sheet-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }

    .sheet-title {
        font-size: 18px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sheet-close {
        font-size: 24px;
        color: #999;
        cursor: pointer;
    }

    .sheet-main-info {
        background: #f8f9fa;
        padding: 12px;
        border-radius: 10px;
        margin-bottom: 15px;
        font-size: 13px;
        line-height: 1.5;
    }

    .sheet-section-title {
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;
        color: #666;
        margin-bottom: 8px;
        letter-spacing: 0.5px;
    }

    .sheet-aspects-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 20px;
    }

    .sheet-aspect-item {
        background: #fff;
        border: 1px solid #eee;
        padding: 6px;
        border-radius: 6px;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .sheet-full-btn {
        width: 100%;
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 12px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
    }

    .sheet-interp-btn {
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    }

    .sheet-interp-btn:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    .score-detail-item {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 4px;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .score-detail-item.pos {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .score-detail-item.neg {
        background: #ffebee;
        color: #c62828;
    }

    .score-summary {
        font-size: 12px;
        padding: 8px;
        background: #f1f3f5;
        border-radius: 6px;
    }

    /* Mobile Table Overrides for Ephemeris, Retrogrades, Rectification */
    #ephemerisTableContainer table th,
    #ephemerisTableContainer table td {
        padding: 5px 3px !important;
        font-size: 10px !important;
    }

    #retrogradesTableContainer table th,
    #retrogradesTableContainer table td {
        padding: 8px 5px !important;
        font-size: 11px !important;
    }

    .recti-results-table tr td[colspan] {
        font-size: 13px !important;
        padding: 6px !important;
    }

    /* Hide unnecessary headers or tweak them */
    .recti-results-table thead th {
        font-size: 11px !important;
    }

    /* Tools modal buttons - transparent style */
    #toolsMobileModal .build-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: var(--primary-color, #2980b9) !important;
        font-size: 14px !important;
        padding: 12px 8px !important;
        border-bottom: 1px solid #eee !important;
        border-radius: 0 !important;
        justify-content: center;
    }

    #toolsMobileModal .build-btn:last-child {
        border-bottom: none !important;
    }

    /* Mobile Chart Preview in viewModal */
    .mobile-chart-preview {
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 12;
        background: #f0f4f8;
        border-bottom: 2px solid #e0e0e0;
        padding: 8px;
        text-align: center;
        max-height: 45vh;
        overflow: hidden;
    }

    .mobile-chart-preview .preview-inner {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mobile-chart-preview .preview-inner svg {
        max-width: 100%;
        max-height: 40vh;
        height: auto;
    }

    body.dark-mode .mobile-chart-preview {
        background: #16213e !important;
        border-bottom-color: #2a2a4a !important;
    }

    /* viewModal specific: larger max-height for preview */
    #viewModal {
        max-height: 95vh !important;
    }

    #viewModal .modal-body {
        max-height: 40vh !important;
        overflow-y: auto !important;
    }
}

/* ===== DARK MODE: Mobile Specific Overrides ===== */
@media (max-width: 768px) {

    /* Body background */
    body.dark-mode {
        background-color: #1a1a2e !important;
    }

    /* Bottom Navigation Bar */
    body.dark-mode .mobile-nav {
        background: #0f1527 !important;
        border-top-color: #2a2a4a !important;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4) !important;
    }

    body.dark-mode .nav-item {
        color: #aaa !important;
    }

    body.dark-mode .nav-icon {
        color: #bbb !important;
    }

    body.dark-mode .nav-label {
        color: #aaa !important;
    }

    /* Chart section info overlays */
    body.dark-mode .user-info-overlay,
    body.dark-mode .eclipse-info,
    body.dark-mode .voc-info,
    body.dark-mode .phase-info {
        color: #d0d0d0 !important;
    }

    /* Aspect Grid Table - Mobile */
    body.dark-mode .aspects-grid-mobile td {
        background: #1e2740 !important;
        border-color: #3a3a5a !important;
        color: #d0d0d0 !important;
    }

    body.dark-mode .aspects-grid-mobile td.empty {
        background: transparent !important;
        border: none !important;
    }

    /* Chain / Graph Wrapper - Invert dark texts */
    body.dark-mode .graph-wrapper svg text {
        fill: #d0d0d0 !important;
    }

    body.dark-mode .graph-wrapper svg polygon,
    body.dark-mode .graph-wrapper svg path {
        stroke: #aaa !important;
    }

    body.dark-mode .graph-wrapper svg ellipse {
        stroke: #888 !important;
        fill: #1e2740 !important;
    }

    body.dark-mode .chain-title {
        color: #7ab8ff !important;
    }

    /* Mobile Bottom Sheets */
    body.dark-mode .mobile-bottom-sheet {
        background: #1e2740 !important;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5) !important;
        color: #d0d0d0 !important;
    }

    body.dark-mode .sheet-header {
        border-bottom-color: #3a3a5a !important;
    }

    body.dark-mode .sheet-title {
        color: #e0e0e0 !important;
    }

    body.dark-mode .sheet-close {
        color: #888 !important;
    }

    body.dark-mode .sheet-main-info {
        background: #2a3a5a !important;
        color: #d0d0d0 !important;
    }

    body.dark-mode .sheet-section-title {
        color: #7ab8ff !important;
    }

    body.dark-mode .sheet-aspect-item {
        background: #2a3a5a !important;
        border-color: #3a4a6a !important;
        color: #d0d0d0 !important;
    }

    /* Mobile Info Panel (planet tap) */
    body.dark-mode #mobileInfoPanel {
        background: #1e2740 !important;
        color: #d0d0d0 !important;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5) !important;
    }

    /* Mobile Modals - bottom sheet style */
    body.dark-mode .modal {
        background: #1e2740 !important;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5) !important;
    }

    body.dark-mode .modal-header {
        background: #0f1527 !important;
        color: #e0e0e0 !important;
        border-bottom-color: #2a2a4a !important;
    }

    body.dark-mode .modal-body {
        background: #1e2740 !important;
        color: #d0d0d0 !important;
    }

    /* Data Section */
    body.dark-mode .data-section {
        background: #16213e !important;
        border-top-color: #2a2a4a !important;
        color: #d0d0d0 !important;
    }

    /* Planet List Items */
    body.dark-mode .planet-item {
        border-bottom-color: #2a2a4a !important;
        background: none !important;
    }

    /* Stats Grid */
    body.dark-mode .stats-grid {
        border-top-color: #2a2a4a !important;
    }

    body.dark-mode .stat-box {
        border-bottom-color: #2a2a4a !important;
    }

    /* User Badge (Auth buttons) */
    body.dark-mode .mobile-header {
        background: rgba(15, 21, 39, 0.95) !important;
        border-bottom-color: #2a2a4a !important;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4) !important;
    }

    body.dark-mode .header-link {
        color: #d0d0d0 !important;
    }

    body.dark-mode .user-badge {
        background: rgba(30, 39, 64, 0.95) !important;
        color: #d0d0d0 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    }

    body.dark-mode .user-badge a {
        color: #d0d0d0 !important;
    }

    /* Score detail items */
    body.dark-mode .score-detail-item {
        color: #bbb !important;
    }

    body.dark-mode .score-detail-item.pos {
        background: #1a3a2a !important;
        color: #4dff88 !important;
    }

    body.dark-mode .score-detail-item.neg {
        background: #3a1a1a !important;
        color: #ff6666 !important;
    }

    body.dark-mode .score-summary {
        background: #2a3a5a !important;
        color: #d0d0d0 !important;
    }

    /* Chart Type Menu */
    body.dark-mode .chart-type-menu {
        background: #1e2740 !important;
    }

    body.dark-mode .chart-type-option {
        color: #d0d0d0 !important;
        border-bottom-color: #2a2a4a !important;
    }

    body.dark-mode .chart-type-option.selected {
        background-color: #2a3a5a !important;
        color: #4da6ff !important;
    }

    /* Ephemeris & Retrogrades tables */
    body.dark-mode #ephemerisTableContainer table,
    body.dark-mode #retrogradesTableContainer table {
        color: #d0d0d0 !important;
    }

    body.dark-mode #ephemerisTableContainer table th,
    body.dark-mode #retrogradesTableContainer table th {
        background: #0f1527 !important;
        color: #e0e0e0 !important;
    }

    body.dark-mode #ephemerisTableContainer table td,
    body.dark-mode #retrogradesTableContainer table td {
        border-color: #2a2a4a !important;
    }

    /* Tools modal buttons dark mode */
    body.dark-mode #toolsMobileModal .build-btn {
        color: #4da6ff !important;
        border-bottom-color: #2a2a4a !important;
    }
}