/* =====================================================================
   Billing Module — Unified KPI Grid & Card Alignment
   ---------------------------------------------------------------------
   The 22 billing pages historically used 6 incompatible KPI styling
   systems (ca-*, da-*, rm-*, cn-*, kpi-cards-grid, plus N360Row/Col
   wrapping <N360Card class="kpi-card">). The result: inconsistent
   row heights, gaps, breakpoints and card paddings across pages.

   This file normalises ONLY the layout-critical properties (grid
   template, gap, card min-height/padding, value/label typography
   and responsive breakpoints) while preserving each page's bespoke
   colors, gradients and icon styling.

   Loaded after all scoped (.razor.css) and module CSS in App.razor,
   so layout rules win via cascade. `!important` is required because
   Blazor scoped CSS uses attribute selectors which beat plain class
   specificity.
   ===================================================================== */


/* ----- Unified KPI grid container ---------------------------------- */
/* Auto-fit keeps cards a consistent minimum width and reflows
   gracefully on narrow viewports without per-page breakpoints.       */
.kpi-cards-grid,
.ca-kpi-grid,
.da-kpi-grid,
.rm-kpi-grid,
.cn-stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
    margin-bottom: 20px !important;
}

@media (max-width: 991px) {
    .kpi-cards-grid,
    .ca-kpi-grid,
    .da-kpi-grid,
    .rm-kpi-grid,
    .cn-stats {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 12px !important;
    }
}

@media (max-width: 575px) {
    .kpi-cards-grid,
    .ca-kpi-grid,
    .da-kpi-grid,
    .rm-kpi-grid,
    .cn-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}


/* ----- Unified KPI card (CSS-Grid variants) ------------------------ */
/* Affects ca-kpi-card (Corporate Accounts), da-kpi-card (Discount
   Approval), rm-kpi-card (Refunds), cn-stat (Credit Notes).
   Bespoke gradient backgrounds remain untouched.                     */
.ca-kpi-card,
.da-kpi-card,
.rm-kpi-card,
.cn-stat {
    min-height: 96px !important;
    padding: 16px 18px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    height: 100% !important;
}


/* ----- Unified value typography ------------------------------------ */
.ca-kpi-value,
.da-kpi-value,
.rm-kpi-value,
.cn-stat__value {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

/* Long-currency variant keeps space, just smaller */
.da-kpi-value.da-kpi-value-sm {
    font-size: 1.15rem !important;
}


/* ----- Unified label typography ------------------------------------ */
.ca-kpi-label,
.da-kpi-label,
.rm-kpi-label,
.cn-stat__label {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    opacity: 0.92 !important;
}


/* ===================================================================
   N360Card-based KPI rows
   ---------------------------------------------------------------------
   AnalyticsDashboard, InsuranceClaimManagement and AgingAnalysis wrap
   <N360Card class="kpi-card"> in either <N360Row><N360Column Md="2|3">
   (which renders as Bootstrap `.row > .col-md-*`) or in .kpi-cards-grid.

   To align row heights, stretch the column to fill row height and the
   inner N360Card (.n360-card.kpi-card) to fill the column.
   =================================================================== */

/* Bootstrap-based KPI rows: stretch columns + cards to match tallest */
.row:has(> [class*="col-"] > .kpi-card),
.row:has(> [class*="col-"] > .n360-card.kpi-card) {
    align-items: stretch !important;
}
.row > [class*="col-"]:has(> .kpi-card),
.row > [class*="col-"]:has(> .n360-card.kpi-card) {
    display: flex !important;
}
.row > [class*="col-"] > .kpi-card,
.row > [class*="col-"] > .n360-card.kpi-card {
    width: 100% !important;
}

/* CSS-Grid based KPI rows (.kpi-cards-grid in AgingAnalysis) already
   stretch via the grid container rules above. */

/* Make every N360-rendered KPI card stretch and centre its content */
.kpi-card,
.n360-card.kpi-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Normalise inner spacing for the N360Card KPI variant */
.kpi-card .n360-card__content,
.n360-card.kpi-card .n360-card__content {
    padding: 18px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
}

/* Consistent value heading (h3 used by AnalyticsDashboard, InsuranceClaims) */
.kpi-card h3 {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin: 0.35rem 0 0.25rem 0 !important;
}

/* Consistent label (small / .kpi-label) */
.kpi-card small,
.kpi-card .kpi-label {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    display: block !important;
}

/* Sub-label and count rows in AgingAnalysis */
.kpi-card .kpi-sublabel {
    font-size: 0.72rem !important;
    opacity: 0.8 !important;
    margin-top: 4px !important;
}
.kpi-card .kpi-count {
    font-size: 0.72rem !important;
    opacity: 0.75 !important;
    margin-top: 2px !important;
}

/* Trend indicator pinned at bottom so cards with/without trend match */
.kpi-card .trend-indicator {
    margin-top: auto !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding-top: 0.4rem !important;
}


/* ===================================================================
   Page-toolbar / page-header consistency
   ---------------------------------------------------------------------
   Several billing pages mix <div class="d-flex justify-content-between">
   for page headers, with slightly different vertical alignment. Force a
   common baseline so the title and action buttons line up.
   =================================================================== */
.billing-page-header,
.page-header,
.page-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
}


/* ===================================================================
   Print: collapse decorative shadows/transforms (some pages used
   hover transforms that left ghost offsets in printed PDFs).
   =================================================================== */
@media print {
    .ca-kpi-card,
    .da-kpi-card,
    .rm-kpi-card,
    .cn-stat,
    .kpi-card {
        box-shadow: none !important;
        transform: none !important;
    }
}