/* ============================================
   responsive.css — Media Queries & Responsive Rules
   Premium Redesign V3
   ============================================ */

/* --- Disable 3D hover on touch devices (no hover capability) --- */
@media (hover: none) {
    .glass-card:hover,
    .kpi-card:hover,
    .chart-card:hover,
    .cat-card:hover,
    .season-card:hover,
    .prognose-card:hover,
    .comparison-col:hover {
        transform: none;
        box-shadow: none;
    }
    .cat-card:hover .cat-glow { opacity: 0; }
    .cat-card:hover .cat-arrow { transform: none; opacity: 0.3; }
}

/* --- Reduce backdrop-filter on mobile for performance --- */
@media (max-width: 768px) {
    .glass-card,
    .kpi-card,
    .chart-card,
    .cat-card,
    .season-card,
    .prognose-card,
    .comparison-col,
    .comparison-section,
    .table-card,
    .progress-bar-outer {
        backdrop-filter: blur(12px) saturate(130%);
        -webkit-backdrop-filter: blur(12px) saturate(130%);
    }
    /* Remove pseudo-element decorations on mobile for perf */
    .kpi-card::after,
    .chart-card::after,
    .cat-card::after,
    .glass-card::after {
        display: none;
    }
}

/* --- Tablet / Small Desktop (max-width: 768px) --- */
@media (max-width: 768px) {

    /* Body & Header */
    body { padding: 8px; }
    .header h1 { font-size: 20px; }
    .header p { font-size: 11px; }

    /* Page Header */
    .page-header { margin-bottom: 20px; }
    .page-header h1 { font-size: 26px; }
    .page-header .subtitle { font-size: 13px; margin-top: 4px; }

    /* Section Header */
    .section-header { margin: 4px 0 18px; padding-top: 18px; }
    .section-header h3 { font-size: 11px; }

    /* KPI Cards */
    .kpi-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; perspective: none; }
    .kpi-card { padding: 14px; border-radius: 14px; }
    .kpi-card .label,
    .kpi-card .kpi-label { font-size: 10px; margin-bottom: 8px; }
    .kpi-card .value,
    .kpi-card .kpi-value { font-size: 24px; }
    .kpi-card .sub,
    .kpi-card .kpi-sub { font-size: 10px; margin-top: 8px; }

    /* Chart Grid */
    .chart-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
    .chart-card { padding: 14px; border-radius: 14px; }
    .chart-card h3 { font-size: 13px; margin-bottom: 10px; }
    .chart-card canvas { max-height: 250px; }

    /* Category Grid — single column on mobile */
    .category-grid { grid-template-columns: 1fr; gap: 14px; }

    /* Category Cards — tighter spacing */
    .cat-inner { padding: 20px 18px 16px; }
    .cat-head { margin-bottom: 16px; }
    .cat-head-left { gap: 12px; }
    .cat-icon { width: 44px; height: 44px; border-radius: 12px; }
    .cat-icon svg { width: 22px; height: 22px; }
    .cat-title { font-size: 19px; }
    .cat-sub { font-size: 12px; }
    .cat-arrow { display: none; }
    .cat-strip { padding: 14px 18px 16px; }
    .cat-summary { margin-top: 14px; padding-top: 12px; font-size: 13px; }

    /* Category Metrics — 3 columns still, but tighter */
    .cat-metrics { gap: 8px; }
    .cm-wrap { padding: 10px 6px; }
    .cm-value { font-size: 22px; }
    .cm-label { font-size: 9px; margin-bottom: 4px; }

    /* Nav Row — horizontal scroll */
    .nav-row {
        gap: 4px; margin-bottom: 8px; overflow-x: auto; flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch; padding-bottom: 4px;
        scrollbar-width: none; /* Firefox */
    }
    .nav-row::-webkit-scrollbar { display: none; } /* Chrome/Safari */

    /* Buttons */
    .tab-btn, .year-btn { padding: 8px 14px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
    .timenav-btn { padding: 7px 12px; font-size: 12px; }
    .tab-btn .full-label { display: none; }
    .tab-btn .short-label { display: inline; }

    /* Comparison & Tables */
    .comparison-section { padding: 14px; margin-bottom: 16px; border-radius: 14px; }
    .comparison-grid { grid-template-columns: 1fr; gap: 12px; }
    .table-card { overflow-x: auto; border-radius: 14px; }
    .table-card table { font-size: 12px; min-width: 500px; }
    .comp-grid { grid-template-columns: 1fr; }

    /* Season & Prognose — 2 columns */
    .season-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .season-card { padding: 12px; border-radius: 12px; }
    .season-card .season-value { font-size: 22px; }
    .prognose-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .prognose-card { padding: 14px; border-radius: 12px; }
    .prognose-card .prog-value { font-size: 20px; }

    /* Progress Bar — smaller fonts */
    .progress-bar-label { font-size: 12px; flex-direction: column; gap: 4px; }
    .progress-bar-detail { font-size: 11px; }
    .progress-bar-track { height: 24px; }
    .progress-bar-fill { font-size: 12px; }

    /* Refresh Status */
    #refresh-status { font-size: 12px; padding: 6px 12px; }

    /* Input Form: single column on mobile */
    .inp-grid-2col { grid-template-columns: 1fr !important; }

    /* --- TimeNav: two rows on mobile --- */
    #year-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .timenav-units {
        justify-content: center;
        flex-wrap: wrap;
    }

    .timenav-nav {
        margin-left: 0;
        justify-content: center;
    }

    .timenav-label {
        min-width: 0;
        flex: 1;
        font-size: 13px;
    }

    .timenav-picker-dropdown {
        position: fixed;
        left: 50%;
        top: auto;
        transform: translateX(-50%);
        width: calc(100vw - 32px);
        max-width: 300px;
    }

    /* --- Sidebar: hidden on mobile, hamburger visible --- */
    .sidebar {
        width: 0;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar.open {
        width: 260px;
        transform: translateX(0);
    }
    .sidebar:hover { width: 0; }
    .sidebar.open:hover { width: 260px; }

    /* Labels + sub-items always visible when sidebar is open on mobile */
    .sidebar.open .sidebar-item .label { opacity: 1; }
    .sidebar.open .sidebar-label { opacity: 1; }
    .sidebar.open .sidebar-sub { max-height: 300px; }
    .sidebar.open .sidebar-divider { opacity: 1; }
    .sidebar.open .sidebar-brand { opacity: 1; }
    .sidebar.open .sidebar-header .sidebar-item .label { opacity: 1; }
    .sidebar.open .sidebar-header .sidebar-item .sidebar-label { opacity: 1; }

    .hamburger { display: block; }

    .sidebar-overlay.open { display: block; }

    .main-content { margin-left: 0; padding: 16px; padding-top: 56px; }

    /* Efficiency components */
    .efficiency-section { padding: 16px; border-radius: 14px; }
    .comparison-col-header { padding: 12px 16px; font-size: 14px; }
    .comparison-col-body { padding: 12px 16px; }
}

/* --- Small Phone (max-width: 400px) --- */
@media (max-width: 400px) {
    .kpi-row { grid-template-columns: 1fr 1fr; }
    .kpi-card .value,
    .kpi-card .kpi-value { font-size: 20px; }
    .kpi-card { padding: 12px; }
    .season-grid { grid-template-columns: 1fr; gap: 8px; }
    .prognose-grid { grid-template-columns: 1fr; gap: 8px; }
    .category-grid { grid-template-columns: 1fr; }
    .page-header h1 { font-size: 22px; }
    .cat-metrics { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .cm-value { font-size: 18px; }
    .cm-wrap { padding: 8px 4px; }
    .savings-badge { font-size: 12px; padding: 4px 10px; }
    .main-content { padding: 12px; padding-top: 52px; }
}