/* ============================================================================
   responsive-main.css - site-wide mobile responsiveness layer
   ============================================================================
   Load this AFTER every other page-specific stylesheet on a page, so its
   media-query overrides win without needing !important. Pure CSS, no
   dependencies. Touches ONLY styling - never assumes or requires any JSP
   markup change (sections below that DO rely on a specific wrapper class are
   labelled "requires markup" and only activate once that wrapper exists).

   Breakpoints used throughout this app and followed here for consistency:
     - Tablet:  max-width: 768px
     - Mobile:  max-width: 480px
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Global resets & base rules (apply at all sizes - safe, non-visual on
      desktop since they just fix sizing math, not layout)
   ---------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
img, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------------------
   2. Reusable component: horizontally-scrollable table wrapper.
      Requires markup: wrap an existing <table> as-is (untouched) inside
      <div class="table-responsive"> ... </div>. No table markup/class/ID
      changes needed - this only adds a scrolling container around it.
   ---------------------------------------------------------------------------- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.table-responsive table {
    min-width: 560px; /* keeps columns from crushing before the scrollbar kicks in */
}
/* Subtle shadow hint on the right edge while there's more to scroll (desktop-safe: only shown under 768px) */
@media (max-width: 768px) {
    .table-responsive {
        box-shadow: inset -14px 0 10px -12px rgba(0,0,0,0.18);
    }
    .table-responsive.scrolled-end {
        box-shadow: none;
    }
}

/* ----------------------------------------------------------------------------
   3. Reusable component: aspect-ratio-locked chart container, for North/South
      Indian Kundli charts (SVG or div-grid based). Requires markup: wrap the
      existing chart element (untouched) in <div class="kundli-chart-frame">.
   ---------------------------------------------------------------------------- */
.kundli-chart-frame {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    position: relative;
}
.kundli-chart-frame > * {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}
/* Fallback for the rare engine without aspect-ratio support: padding-top trick */
@supports not (aspect-ratio: 1 / 1) {
    .kundli-chart-frame {
        height: 0;
        padding-top: 100%;
    }
    .kundli-chart-frame > * {
        position: absolute;
        top: 0; left: 0;
    }
}

/* ----------------------------------------------------------------------------
   4. Reusable component: auto-fit card/stat grid (Panchang cards, analytics
      tiles, dashboard stats). Requires markup: add class="responsive-card-grid"
      to an existing grid container alongside its current class(es) - does not
      replace or remove the existing class, so any JS reading that class still
      works. On desktop this only takes effect if the page's own CSS doesn't
      already set grid-template-columns with higher specificity; see the
      page-specific section below for exact overrides per page.
   ---------------------------------------------------------------------------- */
.responsive-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
@media (max-width: 480px) {
    .responsive-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ----------------------------------------------------------------------------
   5. Touch targets: form controls, buttons, and tap-sized icons at tablet/
      mobile widths. Generic element selectors - no markup change needed.
      Desktop (>768px) is untouched.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
    input[type="date"], input[type="time"], input[type="number"], input[type="search"],
    select, textarea {
        width: 100%;
        min-height: 46px;
        font-size: 16px; /* prevents iOS Safari auto-zoom-on-focus */
    }
    button, .btn, a.btn, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    /* Birth-detail style inline forms (DOB / TOB / Place side-by-side) stack vertically */
    .birth-details-row, .form-row-inline, .dob-tob-place-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .birth-details-row > *, .form-row-inline > *, .dob-tob-place-row > * {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ----------------------------------------------------------------------------
   6. Autocomplete/suggestion dropdowns (place search etc.) - keep them from
      overflowing the viewport width on small screens. Generic selector
      pattern covering this app's common naming (pac-container is Google
      Places' own injected class and is included for completeness).
   ---------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .autocomplete-dropdown, .suggestions-list, .place-suggestions {
        max-width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important;
    }
    /* .pac-container (Google Places' own injected element) positions itself inline based on
       the bound input's actual bounding rect - only cap its width defensively, don't force
       left/right or it'll detach visually from the input it belongs to. */
    .pac-container {
        max-width: calc(100vw - 24px) !important;
    }
}

/* ----------------------------------------------------------------------------
   7. Modals / popups / bottom sheets - generic class-pattern coverage.
      Desktop untouched; mobile gets a comfortable max-width/height and a
      guaranteed-tappable close control.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .modal, .modal-content, .modal-panel, .popup, .popup-content,
    .overlay-panel, .bottom-sheet,
    /* Shared across index.jsp/guest_result.jsp/result.jsp via cosmic-theme.css */
    .auth-modal-card, .cards-lock-modal-card {
        max-width: 95vw !important;
        width: 95vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }
    .modal-close, .popup-close, .close-btn, .close-button,
    /* .auth-close-btn (cosmic-theme.css) has no width/height anywhere today -
       this is the first explicit touch-target sizing it gets. */
    .auth-close-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .modal, .modal-content, .modal-panel, .popup, .popup-content,
    .overlay-panel, .bottom-sheet,
    .auth-modal-card, .cards-lock-modal-card {
        max-height: 92vh;
        overflow-y: auto;
    }
}

/* ----------------------------------------------------------------------------
   7b. Page-specific: result.jsp's planetary-position and Dasha-summary tables
       are already horizontally scrollable (inline overflow-x:auto on their
       wrapper divs) but have no breakpoint-driven shrink, unlike guest_result
       .jsp's .guest-table. Targeting their stable class/ID selectors directly
       - no markup change needed in result.jsp for this.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .dasha-summary-table, #d1-planets-section table {
        font-size: 12.5px;
    }
    .dasha-summary-table th, .dasha-summary-table td,
    #d1-planets-section table th, #d1-planets-section table td {
        padding: 6px 8px;
    }
}
@media (max-width: 480px) {
    .dasha-summary-table, #d1-planets-section table {
        font-size: 11.5px;
    }
}

/* ----------------------------------------------------------------------------
   8. Reusable component: mobile hamburger nav toggle + slide-out drawer.
      Requires markup: this is a NEW, additive component - add a button with
      class="mobile-nav-toggle" and a drawer with class="mobile-nav-drawer"
      alongside the existing desktop nav (which stays exactly as-is and is
      simply hidden under 768px via the rule below). No existing nav markup,
      classes, or IDs are removed or altered - the desktop nav is only hidden
      with CSS at narrow widths, never deleted.
   ---------------------------------------------------------------------------- */
.mobile-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.mobile-nav-toggle span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.mobile-nav-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.mobile-nav-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(82vw, 320px);
    background: var(--bg-color, #fff);
    box-shadow: -8px 0 24px rgba(0,0,0,0.18);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 2000;
    overflow-y: auto;
    padding: 20px 18px;
}
.mobile-nav-drawer.open {
    transform: translateX(0);
}
.mobile-nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1999;
}
.mobile-nav-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.mobile-nav-drawer a {
    display: block;
    padding: 12px 6px;
    min-height: 44px;
    font-size: 15.5px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: flex;
    }
}

/* ----------------------------------------------------------------------------
   9. prefers-reduced-motion: disable the drawer/hamburger transitions for
      users who've asked for reduced motion, site-wide.
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mobile-nav-toggle span, .mobile-nav-drawer, .mobile-nav-drawer-backdrop,
    .app-header .app-nav {
        transition: none !important;
    }
}

/* ----------------------------------------------------------------------------
   10. nav_header.jspf (shared by index.jsp + user_dashboard.jsp): turns the
       EXISTING .app-nav element itself into an off-canvas drawer at mobile
       widths only - desktop's flex layout above 768px is completely
       untouched, no DOM restructuring, no class/ID removed. Driven by the
       same .mobile-nav-toggle button + responsive-nav.js that control the
       generic .mobile-nav-drawer component above; .app-nav just gets .open
       toggled directly onto it instead of needing a separate wrapper.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .app-header .app-nav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(82vw, 320px);
        max-width: none;
        background: var(--bg-color, #0f172a);
        box-shadow: -8px 0 24px rgba(0,0,0,0.25);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 2000;
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap !important;
        padding: 70px 18px 24px;
    }
    .app-header .app-nav.open {
        transform: translateX(0);
    }
    .app-header .app-nav .nav-btn,
    .app-header .app-nav .nav-item-dropdown {
        width: 100%;
    }
}

/* ----------------------------------------------------------------------------
   11. Site-wide Kundli SVG & Canvas Astrology Chart Responsiveness
   ---------------------------------------------------------------------------- */
svg[id^="chart_"],
svg[id*="chart"],
svg.ps-av-chart,
.kundli-chart-frame,
.chart-wrapper svg,
.chart-frame-wrapper,
.chart-frame-wrapper svg {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    /* Side-by-side Kundali charts stack to single column */
    .d1-top-dashboard,
    .charts-row,
    .d1-d9-row,
    .dual-chart-container,
    .charts-split-view {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .d1-col-left,
    .d1-col-middle,
    .d1-col-right {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 / -1 !important;
    }

    svg[id^="chart_"] {
        max-width: 100% !important;
        border-radius: 8px;
    }
}

/* ----------------------------------------------------------------------------
   12. Universal Table Horizontal Scrolling & Containment
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Prevent table blowouts across all card and panel containers */
    .card, .submodule-section, .tab-pane, .panel-body, .content-box {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Wrap wide tables in automatic horizontal scroll when not already wrapped */
    .card > table,
    .submodule-section > table,
    .table-responsive,
    .ps-av-table-wrap,
    .dasha-table-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Keep table text legible and compact on mobile */
    .guest-table th, .guest-table td,
    .dasha-summary-table th, .dasha-summary-table td,
    .ps-av-table th, .ps-av-table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

/* ----------------------------------------------------------------------------
   13. Vedic Panchang, Analytics & Stat Card Grids
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .dob-panchang-row,
    .panchang-cards-grid,
    .panchang-grid,
    .responsive-card-grid,
    .analytics-grid,
    .quick-stats-grid,
    .samir-cards-row {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .dob-panchang-row,
    .panchang-cards-grid,
    .panchang-grid,
    .responsive-card-grid,
    .analytics-grid,
    .quick-stats-grid,
    .samir-cards-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .dob-card, .panchang-card, .stat-card {
        padding: 10px 8px !important;
    }
}

/* ----------------------------------------------------------------------------
   14. Horizontal Scrollable Tab Navigation (Prevents Multi-row Stacking)
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .submodule-tabs-list,
    .tabs-nav,
    .chart-tab-buttons,
    .nav-tabs,
    .kundli-tabs-bar,
    .dasha-tabs-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding: 6px 4px 10px !important;
        scrollbar-width: none !important; /* Firefox */
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    .submodule-tabs-list::-webkit-scrollbar,
    .tabs-nav::-webkit-scrollbar,
    .chart-tab-buttons::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }

    .submodule-tabs-list > *,
    .tabs-nav > *,
    .chart-tab-buttons > *,
    .nav-tabs > * {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 6px 12px !important;
    }
}

/* ----------------------------------------------------------------------------
   15. Top Head Bar (Date, Time, Location & Timezone Utility Bar)
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .top-head-bar .top-head-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .top-head-bar .top-head-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .top-head-bar {
        padding: 8px 10px !important;
    }
}

/* ----------------------------------------------------------------------------
   16. App Container & Overall Section Fluid Spacing
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .app-container,
    .main-container,
    .dashboard-container {
        padding: 12px 14px 40px !important;
    }

    .header-banner {
        padding: 16px 18px !important;
        border-radius: 14px !important;
    }

    .header-banner h2 {
        font-size: 20px !important;
    }

    .profile-card {
        padding: 12px 14px !important;
        gap: 12px !important;
    }

    .profile-item {
        min-width: 130px !important;
    }
}

@media (max-width: 480px) {
    .app-container,
    .main-container,
    .dashboard-container {
        padding: 8px 10px 30px !important;
    }

    .header-banner h2 {
        font-size: 18px !important;
    }

    .profile-item {
        min-width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 6px;
    }
}