/*
 * Grants-in-Aid Component dashboard.
 *
 * Scoped under .gia so nothing here reaches the rest of the site. Built
 * against a 1440px reference: 1304px of content inside 68px gutters. Below
 * 1200px the two-column rows collapse to one.
 *
 * Deliberately standalone — it does not share a stylesheet with the Adarsh
 * Gram module, so either can be changed without regressing the other.
 */

.gia {
    --gia-blue:      #1a73e8;
    --gia-blue-dark: #1a5fb4;
    --gia-ink:       #202124;
    --gia-muted:     #5f6368;
    --gia-line:      #e4e7ec;
    --gia-track:     #e8eaed;
    --gia-hero-bg:   #eef3fd;

    max-width: 1304px;
    margin: 0 auto;
    padding: 32px 0 56px;
    color: var(--gia-ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.gia *,
.gia *::before,
.gia *::after { box-sizing: border-box; }

/* ── Page header ─────────────────────────────────────────────────────────── */

.gia-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.gia-masthead h2.gia-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--gia-blue-dark);
    letter-spacing: -0.01em;
}

.gia-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/*
 * Every control below carries .gia in the selector on purpose.
 *
 * Elementor's global kit styles bare elements — `.elementor-kit-N button` is a
 * class plus an element, which outranks a lone `.gia-dl` or `.gia-reset` and
 * repaints them as themed buttons with a border, an 8px radius and 9px/16px
 * padding. Leading with the wrapper wins on specificity honestly, so none of
 * this needs !important.
 */

.gia select.gia-select,
.gia button.gia-apply,
.gia a.gia-reset {
    height: 36px;
    border: 1px solid #d5d9e0;
    border-radius: 18px;
    background-color: #fff;
    color: var(--gia-ink);
    font-size: 13px;
    font-family: inherit;
    font-weight: 400;
    line-height: normal;
    padding: 0 16px;
    cursor: pointer;
}

.gia select.gia-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235f6368' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* Reset is a link back to the unfiltered URL, not a button — so it needs the
   anchor's underline and inherited colour removed to sit level with the pill. */
.gia a.gia-reset {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--gia-blue);
    border-color: #bcd3f5;
}

.gia a.gia-reset:hover { background-color: #f4f8fe; text-decoration: none; }

.gia button.gia-apply {
    color: #fff;
    background-color: var(--gia-blue);
    border-color: var(--gia-blue);
}

.gia button.gia-apply:hover { background-color: #1663cc; border-color: #1663cc; }

/* The form submits on change once scripting is available, so the button is only
   there for people without it — and for keyboard users, who get it back on focus. */
.gia-filters.is-live .gia-apply {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.gia-filters.is-live .gia-apply:focus {
    position: static;
    width: auto;
    height: 36px;
    clip: auto;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.gia-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.38fr);
    gap: 34px;
    background: var(--gia-hero-bg);
    border-radius: 12px;
    padding: 38px 42px;
    margin-bottom: 34px;
}

.gia-hero-kpi { align-self: center; }

.gia-kpi-label {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #3c4043;
}

.gia-kpi-value {
    font-size: 62px;
    line-height: 1;
    font-weight: 700;
    color: var(--gia-blue);
    letter-spacing: -0.02em;
    margin: 0 0 20px;
}

.gia-kpi-note {
    margin: 0 0 24px;
    font-size: 14px;
    color: #3c4043;
    max-width: 400px;
}

.gia-kpi-note strong { font-weight: 700; color: var(--gia-ink); }

.gia-hero-meters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gia-meter {
    background: #fff;
    border-radius: 8px;
    padding: 15px 18px 13px;
}

.gia-meter-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.gia-meter-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--gia-ink);
}

.gia-meter-pct {
    font-size: 14px;
    font-weight: 700;
    color: var(--gia-blue);
}

.gia-meter-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--gia-muted);
}

/* ── Bars ────────────────────────────────────────────────────────────────── */

.gia-track {
    height: 6px;
    border-radius: 3px;
    background: var(--gia-track);
    overflow: hidden;
}

.gia-track > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--gia-blue);
}

.gia-hero .gia-track { background: #d9e4f7; }

/* ── Card shell ──────────────────────────────────────────────────────────── */

/*
 * minmax(0, …) on every track, not a bare fr.
 *
 * A plain `1fr` is `minmax(auto, 1fr)`, and that auto minimum resolves to the
 * track's min-content — which for a column holding a Chart.js <canvas> is the
 * canvas's own intrinsic width. The chart cards would otherwise drag their
 * column out to the full row width and squeeze their neighbour to nothing.
 */
.gia-row {
    display: grid;
    gap: 22px;
    margin-bottom: 22px;
}

.gia-row-charts { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
.gia-row-splits { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
.gia-row-exec   { grid-template-columns: minmax(0, 0.71fr) minmax(0, 1fr); }

.gia-card {
    background: #fff;
    border: 1px solid var(--gia-line);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.gia-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 18px;
    border-bottom: 1px solid var(--gia-line);
}

.gia-card-head h3 {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gia-ink);
}

.gia-card-head p {
    margin: 0;
    font-size: 12.5px;
    color: var(--gia-muted);
}

/* Download affordance — a bare glyph, no chrome. Inert while this is static. */
.gia button.gia-dl {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--gia-muted);
    cursor: pointer;
    line-height: 0;
}

.gia button.gia-dl:hover {
    color: var(--gia-blue);
    background: transparent;
}

.gia-card-body { padding: 22px; flex: 1 1 auto; }

.gia-card-foot {
    padding: 14px 22px 16px;
    border-top: 1px solid var(--gia-line);
    font-size: 12px;
    line-height: 1.5;
    color: var(--gia-muted);
}

.gia-card-foot strong { color: #3c4043; }
.gia-card-foot em { font-style: italic; }

/* ── Charts ──────────────────────────────────────────────────────────────── */

.gia-chart { position: relative; width: 100%; min-width: 0; }

/* Chart.js writes width/height attributes onto the canvas; keep them contained. */
.gia-chart canvas { max-width: 100%; }

.gia-chart-year  { height: 344px; }
.gia-chart-donut { height: 332px; }
.gia-chart-exec  { height: 226px; }

.gia-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
    font-size: 12px;
    color: #3c4043;
}

.gia-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.gia-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Doughnut legend stacks, and carries a share against each name. */
.gia-legend-stack {
    flex-direction: column;
    gap: 11px;
    margin-top: 22px;
}

.gia-legend-stack span { gap: 9px; }

.gia-legend-share {
    font-style: normal;
    font-weight: 600;
    color: var(--gia-ink);
    margin-left: 8px;
}

/* ── Breakdown lists ─────────────────────────────────────────────────────── */

.gia-list { display: flex; flex-direction: column; gap: 18px; }

.gia-list-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
}

.gia-list-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--gia-ink);
}

.gia-list-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--gia-ink);
    white-space: nowrap;
}

/* ── Execution tiles ─────────────────────────────────────────────────────── */

.gia-exec-tiles {
    display: flex;
    gap: 46px;
    margin-bottom: 22px;
}

.gia-exec-key {
    font-size: 12.5px;
    color: var(--gia-muted);
    margin-bottom: 4px;
}

.gia-exec-val {
    font-size: 27px;
    font-weight: 700;
    color: var(--gia-ink);
    line-height: 1.1;
}

.gia-exec-sub {
    font-size: 12px;
    color: var(--gia-muted);
    margin-top: 3px;
}

/* ── Endpoint unavailable ────────────────────────────────────────────────── */

/*
 * Shown in place of one panel when its endpoint has never been reached on this
 * site — a normal outage serves the last good figures instead, so this is rare.
 */
.gia-unavailable {
    padding: 18px 20px;
    border: 1px solid var(--gia-line);
    border-radius: 10px;
    background: #fafbfc;
    font-size: 13px;
    color: var(--gia-muted);
}

/* ── Partly-live ribbon ──────────────────────────────────────────────────── */


/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .gia-row-charts,
    .gia-row-splits,
    .gia-row-exec { grid-template-columns: 1fr; }

    .gia-hero { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 782px) {
    .gia { padding: 20px 0 40px; }

    .gia-masthead { flex-direction: column; align-items: flex-start; gap: 16px; }
    .gia-masthead h2.gia-title { font-size: 24px; }

    .gia-filters { flex-wrap: wrap; }

    .gia-hero { padding: 28px 22px; }
    .gia-kpi-value { font-size: 48px; }

    .gia-chart-year { height: 300px; }

    .gia-exec-tiles { gap: 28px; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
    .gia-filters,
    .gia-dl { display: none !important; }

    .gia-card { break-inside: avoid; }
}