/* HFHI Home page — issue #1003.
   KPI tiles use the shared `.texture-card` family in styles/kpi-cards.css. */

/* Grid row red-styling for Error / No Files Processed status.
   The descendant selector (`td *`) is needed to override Bootstrap's
   `.text-success` / `.text-danger` !important rules on spans inside
   the Rejected/Fixed column templates. */
.row-status-error,
.row-status-error td,
.row-status-error td * {
    color: #dc3545 !important;
}

/* Inline arrow icons inside delta cells.
   - .delta-arrow-dir : up/down triangle (▲▼) — large, tight-margined to sit close to the delta number
   - .delta-arrow-side: sideways arrow (↔) used when delta == 0 — original size, no negative margins
*/
.delta-arrow-dir {
    font-size: 29px;
    vertical-align: middle;
    line-height: 1;
    margin-left: -6px;
    margin-right: -6px;
}

.delta-arrow-side {
    font-size: 18px;
    vertical-align: middle;
    line-height: 1;
    margin-left: 0;
    margin-right: 0;
}

/* KPI row layout: months-since-last-file grid (cols 1-4) | current-month tiles (cols 5-8) | FY tiles (cols 9-12).
   Tile grids mirror .texture-card-grid from the column profile page. */
.home-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.home-tile-grid {
    display: grid;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

/* Grid items default to min-width:auto, which lets a tile push past its column. */
.home-tile-grid > .texture-card {
    min-width: 0;
    overflow: hidden;
}

/* All three sections share one header row height so tiles and grid top-align. */
.home-section-head {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

/* Both tile blocks are pinned to the same height as the months-since-last-file grid (245px)
   so the three sections form one even band across the top of the dashboard. */
.home-tile-grid-lg,
.home-tile-grid-sm {
    height: 245px;
}

.home-tile-grid > .texture-card {
    min-height: 0;
}

/* Three prominent tiles stacked vertically, full column width */
.home-tile-grid-lg {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
}

.texture-card.home-tile-lg {
    padding: 0.4rem 0.75rem;
    align-items: center;
}

.texture-card.home-tile-lg .card-content {
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
}

.texture-card.home-tile-lg .card-value {
    font-size: 2rem;
}

.texture-card.home-tile-lg .card-label {
    font-size: 1rem;
    margin-top: 0;
    white-space: nowrap;
}

.texture-card.home-tile-lg .card-icon {
    font-size: 2.25rem;
    align-self: center;
    margin: 0;
}

/* Four de-emphasised tiles in a 2x2 block */
.home-tile-grid-sm {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.texture-card.home-tile-sm {
    padding: 0.5rem 0.75rem;
}

.texture-card.home-tile-sm .card-value {
    font-size: 1.5rem;
}

.texture-card.home-tile-sm .card-label {
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.texture-card.home-tile-sm .card-sub {
    font-size: 0.7rem;
}

.texture-card.home-tile-sm .card-icon {
    font-size: 2rem;
}

@media (max-width: 480px) {
    .home-tile-grid-lg,
    .home-tile-grid-sm {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        height: auto;
    }
    .home-tile-grid > .texture-card {
        min-height: 90px;
    }
}

/* Overview container: one subtle bordered card with a header bar; the three
   sections sit inside as columns separated by hairline dividers. */
.home-overview {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.home-overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.home-overview-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #343a40;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.home-overview-subtitle {
    font-size: 0.8rem;
    color: #6c757d;
}

.home-overview-period-label {
    font-size: 0.85rem;
    color: #6c757d;
    white-space: nowrap;
}

.home-overview-section {
    padding: 0.75rem 1rem;
}

@media (min-width: 992px) {
    .home-overview-section + .home-overview-section {
        border-left: 1px solid #e9ecef;
    }
}

@media (max-width: 991.98px) {
    .home-overview-section + .home-overview-section {
        border-top: 1px solid #e9ecef;
    }
}