/* Descriptor-driven responsive dashboard defaults.
   Applies to both the viewer ([data-hm-scope^="page:"]) and the designer
   preview ([data-hm-preview-scope]). Two complementary strategies are used:

   1. @media queries  — fire on real mobile viewports (the viewer).
   2. @container queries — fire when the PREVIEW CONTAINER is narrow (the
      designer's simulated mobile view). The container is enabled by setting
      container-type: inline-size on [data-hm-preview-scope].
   3. Direct selectors — force grid overrides inside the designer mobile
      preview, bypassing viewport-based Tailwind breakpoints that can't be
      overridden with container queries alone.
*/

/* ── Make the designer preview panel a CSS container ─────────────────────── */
[data-hm-preview-scope] {
    container-type: inline-size;
}

/* ── Shared: prevent section children from overflowing their grid cell ────── */
:is([data-hm-scope^="page:"], [data-hm-preview-scope]) [data-hm-section-id] {
    min-width: 0;
}

/* Heatmap Intelligence is a full-width insight band; keep it readable even
   before descriptor-scoped col-span CSS has loaded. */
:is([data-hm-scope^="page:"], [data-hm-preview-scope]) [data-hm-band="bottom"] [data-hm-component="HeatmapIntelligenceSection"] {
    grid-column: 1 / -1;
}

/* ── KPI detail visibility (responsive variant CSS var hook) ──────────────── */
:is([data-hm-scope^="page:"], [data-hm-preview-scope]) [data-hm-section-id] .hm-kpi-detail {
    display: var(--hm-responsive-kpi-detail-display, initial);
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGNER MOBILE PREVIEW — direct selector overrides
   The designer shows "Mobile" by adding max-w-[390px] to [data-hm-preview-scope].
   Tailwind's md:/lg:/xl: breakpoints still fire at the browser viewport width
   (typically 1024–1440px), so we must override layout grids explicitly here.
   ══════════════════════════════════════════════════════════════════════════ */

/* KPI grid: override md:grid-cols-4 → 2-col in mobile preview */
[data-hm-preview-scope="designer"].max-w-\[390px\] [data-hm-band="kpis"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* KPI grid: 3-row layout — cards 3 & 4 span full width (eliminates height misalignment) */
[data-hm-preview-scope="designer"].max-w-\[390px\] [data-hm-band="kpis"] > *:nth-child(n+3) {
    grid-column: 1 / -1 !important;
}

/* Main-sidebar: override xl:grid-cols-[2fr_1fr] → single col in mobile preview */
[data-hm-preview-scope="designer"].max-w-\[390px\] [data-hm-band="main-sidebar"] {
    grid-template-columns: 1fr !important;
}

/* Bottom band: override lg:grid-cols-12 → single col in mobile preview */
[data-hm-preview-scope="designer"].max-w-\[390px\] [data-hm-band="bottom"] {
    grid-template-columns: 1fr !important;
}
[data-hm-preview-scope="designer"].max-w-\[390px\] [data-hm-band="bottom"] > * {
    grid-column: 1 / -1 !important;
}

/* Intelligence card grid: override sm:grid-cols-2 / xl:grid-cols-3 → single col */
[data-hm-preview-scope="designer"].max-w-\[390px\] .hm-intelligence-grid {
    grid-template-columns: 1fr !important;
}

/* Scorecard paired rows: override sm:grid-cols-2 → single col in mobile preview */
[data-hm-preview-scope="designer"].max-w-\[390px\] .hm-scorecard-pair {
    grid-template-columns: 1fr !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGNER TABLET PREVIEW — direct selector overrides
   The designer shows "Tablet" by adding max-w-[820px] to [data-hm-preview-scope].
   Same viewport-mismatch problem as mobile: lg:/xl: fire at browser viewport,
   but the preview container is only 820px. The compiled section col-span CSS
   is scoped to [data-hm-scope^="page:"] so it does NOT apply in the designer,
   leaving all bottom-band sections at span-1 (~68px each in a 12-col grid).
   ══════════════════════════════════════════════════════════════════════════ */

/* Bottom band: reset lg:grid-cols-12 → sensible 2-col layout for tablet */
[data-hm-preview-scope="designer"].max-w-\[820px\] [data-hm-band="bottom"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Reset any viewport-compiled col-span so every section starts clean */
[data-hm-preview-scope="designer"].max-w-\[820px\] [data-hm-band="bottom"] > * {
    grid-column: auto !important;
}
/* Heatmap Intelligence spans full width in the 2-col bottom grid */
[data-hm-preview-scope="designer"].max-w-\[820px\] [data-hm-band="bottom"] [data-hm-section-id="hm-intelligence"] {
    grid-column: 1 / -1 !important;
}

/* Intelligence card grid: 2-col on tablet (good at ~390px per card) */
[data-hm-preview-scope="designer"].max-w-\[820px\] .hm-intelligence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Scorecard paired rows: single col — sidebar is ~267px, too narrow for 2-col pairs */
[data-hm-preview-scope="designer"].max-w-\[820px\] .hm-scorecard-pair {
    grid-template-columns: 1fr !important;
}

/* KPI value font: slightly smaller at tablet so long values don't wrap (designer) */
[data-hm-preview-scope="designer"].max-w-\[820px\] [data-hm-component="KpiCard"] {
    --hm-kpi-value-font-size: 1.25rem !important;
}

/* Compact gap for the outer preset grid in mobile preview */
[data-hm-preview-scope="designer"].max-w-\[390px\] .preset-kpi-hero-with-sidebar {
    gap: var(--hm-dashboard-gap-mobile, 0.875rem);
}

/* Alert row: override sm:flex-row → column + full-width buttons in mobile preview */
[data-hm-preview-scope="designer"].max-w-\[390px\] .hm-alert-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
}
[data-hm-preview-scope="designer"].max-w-\[390px\] .hm-alert-actions {
    width: 100% !important;
}
[data-hm-preview-scope="designer"].max-w-\[390px\] .hm-alert-actions a {
    flex: 1 !important;
}

/* Hero banner: override sm:flex-row → column in mobile preview */
[data-hm-preview-scope="designer"].max-w-\[390px\] .hm-hero-insight {
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
}
[data-hm-preview-scope="designer"].max-w-\[390px\] .hm-hero-cta {
    width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTAINER QUERIES — apply inside the designer preview container
   These fire when the [data-hm-preview-scope] container is ≤ 767px wide
   (i.e. when the designer shows "Mobile" preview). They mirror the @media
   rules below so the designer preview and the real mobile viewer look the same.
   ══════════════════════════════════════════════════════════════════════════ */
@container (max-width: 767px) {

    /* Elements with hm-context-strip-sm-only are hidden when the container
       is narrow — mirrors the viewport-based hidden sm:inline behavior for
       the designer preview which runs at a wide viewport. */
    .hm-context-strip-sm-only {
        display: none !important;
    }

    /* KPI card: compact padding + smaller value font */
    [data-hm-component="KpiCard"] {
        --hm-card-padding: 0.625rem;
        --hm-kpi-value-font-size: 1.125rem;
    }

    /* Context Engine strip: wrap CTA to second line */
    .hm-context-strip-inner {
        flex-wrap: wrap;
        gap: 0.375rem 0.5rem;
    }

    .hm-context-strip-cta {
        order: 10;
        width: 100%;
    }

    /* Expand-right trigger: smaller touch target in narrow container */
    .hm-expand-right-trigger {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    /* Section title: scale down slightly */
    .hm-mobile-section-title {
        font-size: 0.8125rem;
    }

    /* Intelligence card grid: single column on mobile */
    .hm-intelligence-grid {
        grid-template-columns: 1fr !important;
    }

    /* Scorecard paired rows: force single column on mobile */
    .hm-scorecard-pair {
        grid-template-columns: 1fr !important;
    }

}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE  (max-width: 767px) — applies to the REAL viewer at phone viewport
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Layout gap ────────────────────────────────────────────────────────── */
    [data-hm-scope^="page:"] .preset-kpi-hero-with-sidebar {
        gap: var(--hm-dashboard-gap-mobile, 0.875rem);
    }

    /* ── KPI card: compact padding + smaller value font ───────────────────── */
    [data-hm-scope^="page:"] [data-hm-component="KpiCard"] {
        --hm-card-padding: 0.625rem;
        --hm-kpi-value-font-size: 1.125rem;
    }

    /* ── Mover rows: wrap secondary info below the main row ──────────────── */
    [data-hm-scope^="page:"] .hm-mobile-stack-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    [data-hm-scope^="page:"] .hm-mobile-stack-row .hm-mobile-row-main {
        min-width: 0;
        flex-basis: calc(100% - 2.75rem);
    }

    [data-hm-scope^="page:"] .hm-mobile-stack-row .hm-mobile-secondary {
        margin-left: 2.75rem;
        width: calc(100% - 2.75rem);
    }

    /* ── Hide sparklines on mobile ───────────────────────────────────────── */
    [data-hm-scope^="page:"] .hm-mobile-stack-row .hm-mobile-hide {
        display: none !important;
    }

    /* ── Section title scale ─────────────────────────────────────────────── */
    [data-hm-scope^="page:"] .hm-mobile-section-title {
        font-size: 0.8125rem;
    }

    /* ── Two-column grids → single column ───────────────────────────────── */
    [data-hm-scope^="page:"] .hm-mobile-two-col {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* ── Context Engine strip: wrap CTA to second line ───────────────────── */
    [data-hm-scope^="page:"] .hm-context-strip-inner {
        flex-wrap: wrap;
        gap: 0.375rem 0.5rem;
    }

    [data-hm-scope^="page:"] .hm-context-strip-cta {
        margin-left: 0 !important;
        order: 10;
        width: 100%;
    }

    /* ── Expand-right trigger: smaller touch target ───────────────────────── */
    [data-hm-scope^="page:"] .hm-expand-right-trigger {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    /* ── Expand-right panel: fixed bottom sheet ─────────────────────────── */
    /*    position:fixed escapes overflow:hidden parents, rendering cleanly   */
    /*    above all content relative to the mobile viewport.                  */
    [data-hm-scope^="page:"] .hm-expandable-section--right .hm-expand-right-panel {
        position: fixed !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: 1rem !important;
        top: auto !important;
        width: auto !important;
        max-height: 65vh !important;
        border-radius: 1.25rem !important;
        overflow-y: auto !important;
        z-index: 50 !important;
        /* Large spread shadow creates a visual backdrop behind the sheet */
        box-shadow:
            0 0 0 100vmax rgba(0, 0, 0, 0.35),
            0 -4px 40px rgba(0, 0, 0, 0.15) !important;
    }
}

/* ── KPI grid: 3-row layout on real mobile viewport (cards 3 & 4 full width) ─ */
@media (max-width: 767px) {
    [data-hm-scope^="page:"] [data-hm-band="kpis"] > *:nth-child(n+3) {
        grid-column: 1 / -1;
    }
}

/* ── Hero banner: stack vertically on real mobile viewport ───────────────── */
@media (max-width: 639px) {
    [data-hm-scope^="page:"] .hm-hero-insight {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }
    [data-hm-scope^="page:"] .hm-hero-cta {
        width: 100% !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET  (min-width: 768px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    [data-hm-scope^="page:"] .hm-tablet-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* KPI value font: slightly smaller at tablet (768–1023px) so long values don't wrap */
@media (min-width: 768px) and (max-width: 1023px) {
    [data-hm-scope^="page:"] [data-hm-component="KpiCard"] {
        --hm-kpi-value-font-size: 1.25rem;
    }
}