/* infratrack.theme.css — InfraTrack blue chrome (matches live infratrack.publon.press).
 * Theme = hyper-parameter variables only; the page-frame nav derives its
 * colour from --ui-primary, so a single uniform bar (no clashing bands). */

:root {
    --hp-primary-h: 222;
    --hp-primary-s: 83%;
    --hp-primary-l: 49%;
}

/* Map fills its panel (min-height lets it grow). Calendar (FullCalendar
 * height:100%) needs a definite height to resolve — viewport-relative, no px. */
.it-map { min-height: 60vh; }
.it-stage-fill { height: 72vh; }
/* FullCalendar's height:100% needs each wrapper in the chain to resolve. */
.it-stage-fill > .ui-bind-layout,
.it-stage-fill .ui-chart-calendar,
.it-stage-fill .ui-chart-calendar > .ui-chart-frame { height: 100%; min-height: 0; }

/* Unit-health report cards — responsive 3-up grid (flex + clamp, no fixed px). */
.it-unit-card { flex: 1 1 clamp(220px, 30%, 320px); }
/* Health-bar colour bands (green / amber / red by value). */
.it-bar-good .ui-progress-bar { background: #16a34a; }
.it-bar-warn .ui-progress-bar { background: #f59e0b; }
.it-bar-bad  .ui-progress-bar { background: #dc2626; }

/* HAZOP risk-matrix heatmap — definite height + fill the Plotly chain. */
.it-matrix { height: 42vh; }
.it-matrix > .ui-chart, .it-matrix > .ui-chart > .ui-chart-frame { height: 100%; min-height: 0; }

/* Active nav tab: keep white text + a white underline on the blue bar
 * (the base theme turns active text to --ui-primary, which is invisible
 * blue-on-blue in the page-frame). */
.ui-pageframe-tabs .ui-tabs-head.ui-active {
    color: #fff;
    border-bottom-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* About → User-guide feature screenshots (cropped, responsive). */
.it-guide-img { display: block; max-width: 100%; margin: 0.6rem 0 0.2rem;
    border: 1px solid var(--ui-gray-200); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-sm); }