/* =====================================================================
   TGILP MIS (web) - additions to the template stylesheets
   Only what the ASP.NET version needs on top of the prototype CSS.
   ===================================================================== */

/* Cards and figures rendered as links (template used <button>) */
a.kpi, a.gc-stat, a.jb-text { color: inherit; text-decoration: none; }
a.kpi:focus-visible, a.gc-stat:focus-visible, a.jb-text:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.kpi.is-static { cursor: default; }
.kpi.is-static:hover { transform: none; }
.jb-text { display: flex; flex-direction: column; }

/* "Not available": no data source yet - never shown as zero */
.kpi.is-na { background: var(--c-surface-2); border-style: dashed; filter: saturate(0.2); }
.kpi.is-na .kpi-support { color: var(--c-text-3); font-style: italic; }
.kpi-value.kpi-na { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 600; color: var(--c-text-3); }
.kpi-value.kpi-na svg { width: 16px; height: 16px; }
.gc-stat.is-na .gc-value { font-size: 0.875rem; color: var(--c-text-3); }
.gc-stat.is-na .gc-note { font-style: italic; }

/* Area table links and empty states */
.dt .cell-main { color: inherit; text-decoration: none; }
.dt a.cell-main:hover { text-decoration: underline; }
.empty-note { padding: 18px 20px; color: var(--c-text-2); font-size: 0.875rem; }
.chart-empty { display: flex; align-items: center; gap: 8px; min-height: 160px; justify-content: center; }
.chart-empty svg { width: 18px; height: 18px; }
.pct-legend-note { color: var(--c-text-3); margin-left: 6px; font-size: 0.75rem; }
.filter-bar.is-loading { opacity: 0.6; pointer-events: none; }

/* Drill-down table (GridView, auto columns) */
.dt-drill th, .dt-drill td { white-space: nowrap; }
.dt-drill th { position: sticky; top: 0; z-index: 1; }

/* Definitions panel */
.defs-panel details { padding: 12px 18px; }
.defs-panel summary { cursor: pointer; list-style: revert; }
.defs-panel summary h2 { display: inline; font-size: 0.95rem; margin: 0; }
.defs-list { margin: 10px 0 2px; padding-left: 18px; color: var(--c-text-2); font-size: 0.8125rem; line-height: 1.6; }

/* Login */
.login-body { min-height: 100vh; background: linear-gradient(160deg, var(--c-navy-900, #0B1F3A) 0%, var(--c-navy, #17365D) 60%, #245B8F 100%); }
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 400px; padding: 32px 30px 28px; border-top: 4px solid var(--c-gold); }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.login-emblem { height: 64px; }
.login-serp { height: 48px; border-radius: 6px; }
.login-title { text-align: center; font-size: 1.4rem; font-weight: 700; color: var(--c-ink); margin: 0; }
.login-sub { text-align: center; color: var(--c-text-2); font-size: 0.8125rem; margin: 4px 0 22px; }
.login-error { background: #FDECEA; color: #8A1C12; border-radius: 6px; padding: 8px 12px; margin-bottom: 14px; font-size: 0.875rem; }

@media print {
  .filter-panel, .dt-toolbar, .defs-panel, .back-link { display: none !important; }
}

/* 0% gauge: hide the arc so the round line cap does not show as a dot */
.gc-arc.is-zero { stroke-opacity: 0; }