/* ═════════════════════════════════════════════════════════════════════════════
   Growth Intelligence — Sprint A Polish (Day 7)
   Shared styles for /growth, /growth/promotions, /growth/customers, /growth/churn

   - Responsive grid breakpoints (mobile-first via auto-fit)
   - Print-friendly cleanup
   - Hover utilities for clickable cards
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Page container ────────────────────────────────────────────────────── */
.growth-page {
    padding: 24px 32px;
    max-width: 1280px;
    margin: 0 auto;
    background: #f4f6fb;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .growth-page {
        padding: 16px 14px;
    }
}

/* ── Stat cards grid (4 cards) ────────────────────────────────────────── */
.growth-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* ── Two-column section grid (cash flow + cost, top customers + segments, etc.) ── */
.growth-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* ── Three-column nav grid (Quick Nav on Overview) ─────────────────────── */
.growth-three-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* ── Clickable nav card hover (Overview quick nav) ─────────────────────── */
.growth-nav-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.growth-nav-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.growth-nav-card.growth-phase-1:hover { border-color: #0f6e56; }
.growth-nav-card.growth-phase-2:hover { border-color: #b45309; }
.growth-nav-card.growth-phase-3:hover { border-color: #991b1b; }

/* ── Cohort heatmap — horizontal scroll on small screens ──────────────── */
.growth-heatmap-wrap {
    padding: 20px 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.growth-heatmap-wrap table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px;
    min-width: 720px; /* ป้องกัน table หดจนอ่านไม่ออก */
}

/* ── Print-friendly cleanup ───────────────────────────────────────────── */
@media print {
    /* Hide interactive elements that don't make sense on paper */
    button[disabled],
    select,
    .growth-nav-card {
        display: none !important;
    }

    /* Force light backgrounds + ensure text is readable */
    .growth-page {
        background: #fff !important;
        padding: 0 !important;
    }

    /* Remove sticky/fixed positioning */
    * {
        position: static !important;
    }

    /* Page break hints */
    .growth-page-break-before {
        page-break-before: always;
    }
}

/* ── Skeleton loader animation (subtle shimmer) ──────────────────────── */
@keyframes growth-shimmer {
    0%   { opacity: 0.6; }
    50%  { opacity: 1.0; }
    100% { opacity: 0.6; }
}

.growth-skeleton {
    animation: growth-shimmer 1.4s ease-in-out infinite;
}

/* ── Tablet & narrow screens — table density adjustments ─────────────── */
@media (max-width: 900px) {
    /* Make table cells more compact */
    .growth-page table th,
    .growth-page table td {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Headlines on overview — drop sub-label font slightly */
    .growth-headline-sub {
        font-size: 11px !important;
    }
}

/* ── Per-Promotion Deep Dive cards (Sprint A.1) ──────────────────────── */
/* 4 adaptive metric cards per promotion: 4 cols desktop → 2 cols mobile */
.growth-deepdive-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 14px 0;
}

@media (max-width: 600px) {
    .growth-deepdive-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}