/* ── UI Adaptation & PWA Styles ──────────────────────────────────────── */

/* ── Device Breakpoints ─────────────────────────────────────────────── */
/*
 * Mobile Portrait:  ≤ 430px
 * Mobile Landscape: 431-767px
 * Tablet Portrait:  768-1023px
 * Tablet/Desktop:   1024-1279px
 * Desktop:          ≥ 1280px
 */

/* ── Safe Area Support (iPhone 16 Pro Max) ──────────────────────────── */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    
    /* Navigation heights */
    --nav-height-top: 52px;
    --nav-height-bottom: 64px;
    
    /* Content padding — safe-area handled by .top-nav, only nav height + spacing needed */
    --content-padding-top: calc(var(--nav-height-top) + 16px);
    --content-padding-bottom: calc(var(--nav-height-bottom) + var(--safe-area-bottom) + 16px);
}

/* ── Base Layout Adjustments ────────────────────────────────────────── */
/* safe-area padding moved to .top-nav (mobile) and .sidebar (desktop) —
   NOT on body, which causes a visible black gap on PWA standalone mode */
body {
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

.main-content {
    padding-top: 16px;
    padding-bottom: var(--content-padding-bottom);
}

/* Shared loading affordance for all five-state page shells. */
.loading-icon {
    color: var(--accent);
    display: inline-flex;
    margin-bottom: 12px;
}

.loading-icon svg {
    animation: loading-spin 0.9s linear infinite;
}

@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

/* ── Mobile Bottom Navigation (style.css owns .bottom-nav-shell pill styling) ── */

.bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: var(--nav-height-bottom);
    max-width: 500px;
    margin: 0 auto;
}

.bottom-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
    min-width: 48px;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
    color: var(--accent-blue);
}

.bottom-nav-item.active .bottom-nav-icon {
    transform: scale(1.15);
    transition: transform 0.3s var(--spring-bounce);
}
.bottom-nav-item.active .bottom-nav-label {
    font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
    .bottom-nav-item.active .bottom-nav-icon { transform: none; }
    .bottom-nav-item { transition: none; }
}

.bottom-nav-icon {
    font-size: 22px;
    line-height: 1;
}

.bottom-nav-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ── Mobile: Hide Top Navigation ────────────────────────────────────── */
@media (max-width: 767px) {
    .nav-bar {
        display: none;
    }
    
    .main-content {
        padding-top: 16px; /* safe-area handled by .top-nav, not content */
        padding-bottom: var(--content-padding-bottom);
    }
}

/* ── Tablet: Adjust Layout ──────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: 100%;
        padding: 0 var(--spacing-lg);
    }
    
    .holdings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .chart-container {
        height: 320px;
    }
}

/* ── Desktop: Enhanced Layout ───────────────────────────────────────── */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        padding: 0 var(--spacing-xl);
    }
    
    .nav-inner {
        max-width: 1200px;
    }
    
    .holdings-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .chart-container {
        height: 400px;
    }
    
    .summary-total {
        font-size: 48px;
    }
    
    .summary-row {
        gap: var(--spacing-xl);
    }
    
    .indices-strip {
        gap: var(--spacing-sm);
    }
    
    .index-chip {
        padding: 10px 16px;
    }
}

/* ── Large Desktop: Max Width ───────────────────────────────────────── */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
    
    .nav-inner {
        max-width: 1400px;
    }
}

/* ── Mobile Specific Adjustments ────────────────────────────────────── */
@media (max-width: 430px) {
    /* iPhone 16 Pro Max specific */
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .holdings-grid {
        grid-template-columns: 1fr;
    }
    
    .holding-card {
        padding: var(--spacing-sm);
    }
    
    .holding-name {
        font-size: 13px;
        max-width: 65%;
    }
    
    .holding-nav-value {
        font-size: 16px;
    }
    
    .holding-change {
        font-size: 12px;
    }
    
    .summary-total {
        font-size: 32px;
    }
    
    .summary-row {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .summary-metric {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-xs) 0;
        border-bottom: 0.5px solid var(--border-1);
    }
    
    .metric-label {
        font-size: 13px;
    }
    
    .metric-value {
        font-size: 15px;
    }
    
    .indices-strip {
        gap: 6px;
        padding: 0 var(--spacing-xs);
    }
    
    .index-chip {
        padding: 6px 10px;
    }
    
    .index-name {
        font-size: 11px;
    }
    
    .index-price {
        font-size: 12px;
    }
    
    .index-change {
        font-size: 11px;
    }
    
    .sector-card {
        padding: var(--spacing-sm);
    }
    
    .sector-row {
        padding: 6px 0;
    }
    
    .sector-name {
        font-size: 12px;
    }
    
    .sector-change {
        font-size: 12px;
        min-width: 45px;
    }
    
    .chart-container {
        height: 220px;
    }
    
    .chart-nav-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--spacing-xs);
    }
    
    .pill-btn {
        flex-shrink: 0;
    }
    
    /* Touch-friendly targets */
    .nav-page-link,
    .type-tab,
    .module-nav-pill,
    .pill-btn {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Bottom navigation spacing */
    .main-content {
        padding-bottom: calc(var(--nav-height-bottom) + var(--safe-area-bottom) + 24px);
    }
    
    /* Metric overflow on narrow screens */
    .metric { gap: 6px; }
    .metric-label { font-size: 12px; }
    .metric-value { font-size: 13px; margin-left: 6px; }
    
    /* Badge text truncation */
    .badge { font-size: 11px; padding: 2px 8px; }
}

/* ── Landscape Mobile ───────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .bottom-nav-inner {
        height: 52px;
    }
    
    .bottom-nav-icon {
        font-size: 18px;
    }
    
    .bottom-nav-label {
        font-size: 9px;
    }
    
    .main-content {
        padding-bottom: calc(52px + var(--safe-area-bottom) + 16px);
    }
}

/* ── Touch Device Optimizations ─────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .report-pill,
    .timeline-pill,
    .nav-page-link,
    .type-tab,
    .module-nav-pill,
    .pill-btn {
        min-height: 44px;
        padding: 10px 16px;
    }
    
    /* Remove hover effects on touch devices */
    .glass:hover,
    .holding-card:hover,
    .report-card:hover,
    .report-pill:hover,
    .timeline-pill:hover {
        transform: none;
        background: var(--glass-2);
        border-color: var(--glass-2-border);
    }
    
    /* Active state instead of hover */
    .glass:active,
    .holding-card:active,
    .report-card:active {
        background: var(--glass-press);
        transform: scale(0.992);
    }

    .nav-icon-btn,
    .page-status-refresh,
    .top-nav-back {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 767px) {
    .glass,
    .glass-deep,
    .reading-surface {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .mesh-gradient,
    .pnl-glow.color-up,
    .pnl-glow.color-down {
        animation: none;
    }

    .page-status {
        -webkit-backdrop-filter: blur(8px) saturate(125%);
        backdrop-filter: blur(8px) saturate(125%);
    }
}

/* ── High DPI Displays ──────────────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    /* Sharper borders on high DPI */
    .glass,
    .glass-deep,
    .glass-shallow {
        border-width: 0.33px;
    }
    
    /* Sharper icons */
    .bottom-nav-icon,
    .report-card-emoji,
    .report-pill-emoji,
    .timeline-pill-emoji {
        -webkit-font-smoothing: antialiased;
    }
}

/* ── Notch/Dynamic Island Support ───────────────────────────────────── */
@supports (padding-top: env(safe-area-inset-top)) {
    .nav-bar {
        padding-top: var(--safe-area-top);
    }
    .top-nav {
        padding-top: var(--safe-area-top);
    }
}

/* ── PWA Standalone Mode ────────────────────────────────────────────── */
@media (display-mode: standalone) {
    .nav-bar {
        padding-top: var(--safe-area-top);
    }
    .top-nav {
        padding-top: var(--safe-area-top);
    }
    
    .browser-only {
        display: none !important;
    }
}

/* ── Mobile: safe-area bottom — apply to shell, NOT the pill itself ── */
@media (max-width: 767px) {
    .bottom-nav-shell {
        padding-bottom: var(--safe-area-bottom, 0px);
    }
}



/* ── Accessibility: Reduced Motion ──────────────────────────────────── */
@media (max-width: 360px) {
    .bottom-nav-shell { max-width: calc(100vw - 12px); }
    .bottom-nav-track { gap: 0; }
    .bottom-nav-item { min-width: 44px; min-height: 44px; padding: 6px 4px; }
    .bottom-nav-label { font-size: 9px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bottom-nav-item,
    .glass,
    .glass-deep,
    .nav-page-link {
        transition: none;
        animation: none;
    }
    .glass::after,
    .glass-deep::before,
    .bottom-nav::before {
        animation: none;
    }
    .glass:active,
    .holding-card:active,
    .report-card:active {
        transform: none;
    }
}

/* ── Print Styles ───────────────────────────────────────────────────── */
@media print {
    .bottom-nav {
        display: none !important;
    }
    
    .nav-bar {
        position: static;
    }
    
    .main-content {
        padding-top: 0;
        padding-bottom: 0;
    }
}