/*
 * MP072 visual identity for the web UI redesign.
 * See docs/superpowers/specs/2026-07-11-web-ui-redesign-design.md
 *
 * Palette reference (Alex Cristache, MP072):
 *   Paper (Palladian) #EEE9DF, rule (Oatmeal) #C9C1B1,
 *   primary ink (Abyssal) #1B2632, secondary ink (Blue Fantastic) #2C3B4D,
 *   muted #8D8779, accent (Burning Flame) #C87A1E / #FFB162,
 *   secondary accent (Truffle) #A35139.
 */

:root {
    --paper: #EEE9DF;
    --rule: #C9C1B1;
    /* Softer than --rule: chart gridlines and in-card hairline dividers. */
    --grid: #D6CFC2;
    --ink: #1B2632;
    --ink-2: #2C3B4D;
    --muted: #8D8779;
    --accent: #C87A1E;
    --accent-bright: #FFB162;
    --truffle: #A35139;
    --good: #2E7D4F;
    --warn: #B3830D;
    --crit: #B0402E;

    /* Fixed-slot chart series palette (validated for contrast + CVD on paper). */
    --series-1: #C87A1E;
    --series-2: #3E78B3;
    --series-3: #8A8C2E;
    --series-4: #1B9E82;
    --series-5: #B04A2E;

    /* Legacy-admin panel (Flat-UI content sitting on the Palladian page). */
    --panel-bg: #FDFBF7;

    /* Soft cream-to-amber gradient stops for hub heroes. */
    --hero-gradient-start: #FBF3E6;
    --hero-gradient-end: #F3C889;

    --font-display: "Iowan Old Style", Palatino, "Book Antiqua", Georgia, serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
}

h1, h2, h3,
.hero-number,
.cond-temp {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
}

h1,
.hero-number,
.cond-temp {
    font-weight: 800;
}

/* Bold uppercase label for section/card kickers ("Weather", "Energy now", ...). */
.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Fixed-width digits for readings/stat tiles so values don't jitter. */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Soft cream-to-amber gradient for hub hero sections. */
.hero-gradient {
    background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
}

/* ---------------------------------------------------------------------- */
/* Top bar (editorial masthead + six hub tabs)                            */
/* ---------------------------------------------------------------------- */

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.site-nav__brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.375rem;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.site-nav__brand:hover,
.site-nav__brand:focus-visible {
    color: var(--accent);
}

.site-nav__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__tab {
    display: inline-block;
    padding: 0.25rem 0.125rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.site-nav__tab:hover {
    color: var(--accent);
}

.site-nav__tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.site-nav__tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

/* Sticky in-page section nav for the long scrollable hub pages. */
.hub-subnav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.hub-subnav__in {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 42px;
    display: flex;
    gap: 1.75rem;
    align-items: stretch;
    overflow-x: auto;
}

.hub-subnav a {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.hub-subnav a:hover {
    color: var(--ink-2);
}

.hub-subnav a.is-active {
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---------------------------------------------------------------------- */
/* Editorial hub page frame (Environment, Energy, ...)                     */
/* ---------------------------------------------------------------------- */

.hub-wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 2rem 6rem;
}

@media (max-width: 900px) {
    .hub-wrap {
        padding: 0 1.25rem 4.5rem;
    }

    .hub-subnav__in {
        padding: 0 1.25rem;
    }
}

.hub-head {
    padding: 2.75rem 0 1rem;
    background: radial-gradient(90% 170% at 0% 0%, rgba(255, 177, 98, 0.22) 0%, rgba(255, 177, 98, 0.08) 46%, rgba(255, 177, 98, 0) 74%);
}

.hub-head h1 {
    font-size: 3.375rem;
    line-height: 1;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
}

.hub-kick {
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.hub-kick a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.hub-kick a:hover {
    text-decoration: underline;
}

/* Photo banner variant (Home, Environment, Energy): the hub header sits on a
   prerendered weather/time-of-day view from Czeska 12. The photo shows through
   almost fully; instead of a wide cream wash, the title + subtitle sit on a
   compact dark bar (.hub-head__bar) so bright text stays readable over any
   weather look. The photo URL arrives per-request as --hub-banner. */
.hub-head--photo {
    position: relative;
    margin-top: 1.5rem;
    min-height: clamp(190px, 24vw, 320px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--hub-banner) center 52% / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Full-width dark bar along the bottom edge of the banner, behind the header
   text. The banner's overflow:hidden + radius rounds the bar's bottom corners. */
.hub-head--photo .hub-head__bar {
    box-sizing: border-box;
    width: 100%;
    padding: 1rem 1.75rem 1.15rem;
    background: rgba(18, 22, 28, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.2);
}

.hub-head--photo h1 {
    color: #fff;
    margin: 0 0 0.15rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.hub-head--photo .hub-kick {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hub-head--photo .hub-kick a {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .hub-head--photo {
        margin-top: 1rem;
        min-height: clamp(150px, 42vw, 240px);
        padding: 0;
        border-radius: 14px;
    }

    .hub-head--photo .hub-head__bar {
        padding: 0.8rem 1.25rem 0.9rem;
    }
}

.hub-block {
    padding: 2.375rem 0 2.125rem;
    border-top: 1px solid var(--rule);
    /* .hub-subnav is the only sticky chrome on these pages (.site-nav is
       not sticky), so this only needs to clear its own height. */
    scroll-margin-top: 56px;
}

.hub-block:first-of-type {
    border-top: none;
}

.hub-block h2 {
    font-size: 1.9375rem;
    line-height: 1.08;
    margin: 0.125rem 0 0.375rem;
}

.hub-block h3 {
    font-size: 1.125rem;
    margin: 0 0 0.25rem;
}

.hub-sec-note {
    font-size: 0.84rem;
    color: var(--ink-2);
    margin: 0;
}

.hub-sechead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.hub-subblock {
    margin-top: 2.75rem;
    padding-top: 1.875rem;
    border-top: 1px solid var(--grid);
}

.hub-pagefoot {
    border-top: 1px solid var(--rule);
    margin-top: 1.25rem;
    padding-top: 1.375rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* ---- range chips (chart time-range selector, and plain-link filter/state
   chips e.g. the Follow-ups state filter) ---- */

.chips {
    display: flex;
    flex-wrap: wrap;
}

.chips button,
.chips a {
    background: none;
    border: none;
    padding: 0.375rem 0.125rem;
    margin-left: 1.25rem;
    font-size: 0.78rem;
    color: var(--muted);
    text-decoration: none;
    display: inline-block;
}

.chips button:first-child,
.chips a:first-child {
    margin-left: 0;
}

.chips button:hover,
.chips a:hover {
    color: var(--ink-2);
}

.chips button.active,
.chips a.active {
    color: var(--ink);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---- chart legends, containers and tooltip ---- */

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.125rem;
    font-size: 0.75rem;
    color: var(--ink-2);
    margin-top: 1rem;
}

.chart-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.375rem;
}

.chart-box {
    position: relative;
    margin-top: 0.625rem;
}

/* Shown until the chart's first setOption() call (removed by JS); some of
   these fetches (the forecast, in particular) take a few seconds against
   real hardware, and a chart-box with nothing in it at all reads as broken
   rather than "still loading". */
.chart-box.is-loading::after {
    content: "Loading\2026";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.8125rem;
    font-style: italic;
}

.chart-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 1.125rem;
}

@media (max-width: 840px) {
    .chart-duo {
        grid-template-columns: 1fr;
    }
}

/* ECharts tooltip container, assigned via each chart's tooltip.className. */
.chart-tip {
    background: #F9F5EC;
    border: 1px solid var(--rule) !important;
    box-shadow: 0 2px 10px rgba(27, 38, 50, 0.10);
    border-radius: 3px !important;
}

.chart-tip-title {
    color: var(--muted);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.3125rem;
    font-variant-numeric: tabular-nums;
}

.chart-tip-row {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    line-height: 1.7;
    color: var(--ink-2);
    white-space: nowrap;
    font-size: 0.75rem;
}

.chart-tip-row i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
}

.chart-tip-row b {
    margin-left: auto;
    padding-left: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ---- conditions header (Environment hub) ---- */

.cond {
    display: flex;
    align-items: flex-end;
    gap: 3.25rem;
    flex-wrap: wrap;
    margin-top: 0.875rem;
}

.cond-temp {
    font-size: 5.875rem;
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.cond-feels {
    font-size: 0.8125rem;
    color: var(--muted);
    margin-top: 0.5rem;
}

.cstats {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1.125rem;
}

.cstat {
    padding: 0 1.625rem;
    border-left: 1px solid var(--rule);
}

.cstat:first-child {
    border-left: none;
    padding-left: 0;
}

.cstat .cstat-l {
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.cstat .cstat-v {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.cstat .cstat-v small {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ink-2);
}

.cond-indoor {
    margin-top: 1.875rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--grid);
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
}

.cond-indoor .cstat .cstat-v {
    font-size: 1.375rem;
}

/* ---- air quality (Environment hub) ---- */

.aqi-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    border: 1px solid rgba(46, 125, 79, 0.4);
    border-radius: 999px;
    padding: 0.1875rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--good);
    vertical-align: 2px;
}

.aqi-badge.is-warn {
    color: var(--warn);
    border-color: rgba(179, 131, 13, 0.4);
}

.aqi-badge.is-crit {
    color: var(--crit);
    border-color: rgba(176, 64, 46, 0.4);
}

.aqi-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.pollen-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.75rem;
    margin-top: 1.625rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--grid);
}

.pollen-item {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.pollen-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    min-width: 70px;
}

.pollen-seg {
    display: inline-flex;
    gap: 3px;
    align-self: center;
}

.pollen-seg i {
    width: 17px;
    height: 5px;
    background: #DED7C6;
    display: inline-block;
}

.pollen-seg i.is-lit {
    background: var(--truffle);
}

.pollen-level {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ---- energy stat tiles (Energy hub) ---- */

.stat-row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1.375rem;
    margin-top: 1.125rem;
}

.stat-row.is-compact .stat-v {
    font-size: 1.5rem;
}

.stat {
    padding: 0 1.875rem;
    border-left: 1px solid var(--rule);
}

.stat:first-child {
    border-left: none;
    padding-left: 0;
}

.stat .stat-l {
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.stat .stat-v {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.125rem;
    line-height: 1.15;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stat .stat-v small {
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--ink-2);
}

.stat .stat-s {
    font-size: 0.75rem;
    color: var(--muted);
}

.stat .stat-s.is-good {
    color: var(--good);
}

.notechip {
    display: inline-block;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.25rem 0.8125rem;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 1.375rem;
}

/* ---------------------------------------------------------------------- */
/* Legacy admin scoping                                                    */
/* ---------------------------------------------------------------------- */

/*
 * Unchanged Flat-UI/Bootstrap admin pages (base_admin.html) sit inside a
 * white panel on top of the Palladian page background, so old tables/forms
 * stay readable next to the new editorial nav.
 */
body.legacy-admin {
    background: var(--paper);
    font-family: var(--font-body);
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.6;
}

body.legacy-admin .page-body {
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 1.5rem;
    background: var(--panel-bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

/*
 * Everything below restyles the Flat-UI/Bootstrap internals themselves
 * (headings, links, tables, buttons, form controls, badges, the settings
 * pill nav, alerts, pagination) to MP072. Every selector is scoped with the
 * .legacy-admin class so it out-specifies Flat-UI's own un-scoped
 * element/single-class selectors regardless of load order (base_admin.html
 * loads bootstrap.min.css/flat-ui-pro.css *after* this stylesheet) -- no
 * !important needed. JS behaviour (SortableJS drag handles, jQuery
 * selectors in inline scripts) is untouched: nothing here renames a class
 * or id used as a hook.
 */

.legacy-admin .page-body h1,
.legacy-admin .page-body h2,
.legacy-admin .page-body h3,
.legacy-admin .page-body h4,
.legacy-admin .page-body h5 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
}

.legacy-admin .page-body a {
    color: var(--accent);
}

.legacy-admin .page-body a:hover,
.legacy-admin .page-body a:focus {
    color: var(--truffle);
}

.legacy-admin .page-body .text-muted {
    color: var(--muted) !important;
}

/* ---- tables ---- */

.legacy-admin .page-body .table {
    color: var(--ink-2);
    font-size: 0.875rem;
}

.legacy-admin .page-body .table > thead > tr > th {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    background: transparent;
    border-top: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem;
}

.legacy-admin .page-body .table > tbody > tr > td,
.legacy-admin .page-body .table > tbody > tr > th {
    border-top: 1px solid var(--grid);
    padding: 0.75rem;
    vertical-align: middle;
}

.legacy-admin .page-body .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(201, 193, 177, 0.14);
}

.legacy-admin .page-body .table-hover > tbody > tr:hover {
    background-color: rgba(255, 177, 98, 0.12);
}

/* ---- buttons ---- */

.legacy-admin .page-body .btn {
    font-family: var(--font-body);
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 6px;
}

/* Flat-UI ships two rules of equal specificity for icon glyphs:
   `.btn [class^="fui-"]` (margin: 0 1px, sits inline with the button label)
   and `.table [class*="fui-"]` (sized for a big icon centered in a tall,
   fixed-height data-table cell: font-size 20px, margin-top -42.5px). Source
   order lets the table rule win whenever an icon button (Edit, Delete, ...)
   sits inside a <table>, which yanks the glyph up and out of the button
   entirely instead of sitting inline before the label (seen on Users, Room
   Editor). Re-assert the button-icon behaviour at higher specificity so the
   glyph stays inline with its label everywhere, table or not. */
.legacy-admin .page-body .table .btn [class^="fui-"],
.legacy-admin .page-body .table .btn [class*="fui-"] {
    display: inline-block;
    position: relative;
    margin: 0 1px;
    vertical-align: middle;
}

.legacy-admin .page-body .btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.legacy-admin .page-body .btn-primary:hover,
.legacy-admin .page-body .btn-primary:focus,
.legacy-admin .page-body .btn-primary:active {
    background-color: var(--truffle);
    border-color: var(--truffle);
    color: #fff;
}

.legacy-admin .page-body .btn-default {
    background-color: #fff;
    border-color: var(--rule);
    color: var(--ink-2);
}

.legacy-admin .page-body .btn-default:hover,
.legacy-admin .page-body .btn-default:focus,
.legacy-admin .page-body .btn-default:active {
    background-color: var(--panel-bg);
    border-color: var(--muted);
    color: var(--ink);
}

.legacy-admin .page-body .btn-danger {
    background-color: var(--crit);
    border-color: var(--crit);
    color: #fff;
}

.legacy-admin .page-body .btn-danger:hover,
.legacy-admin .page-body .btn-danger:focus,
.legacy-admin .page-body .btn-danger:active {
    background-color: #8F3122;
    border-color: #8F3122;
    color: #fff;
}

.legacy-admin .page-body .btn-success {
    background-color: var(--good);
    border-color: var(--good);
    color: #fff;
}

.legacy-admin .page-body .btn-warning {
    background-color: var(--warn);
    border-color: var(--warn);
    color: #fff;
}

.legacy-admin .page-body .btn-info {
    background-color: var(--ink-2);
    border-color: var(--ink-2);
    color: #fff;
}

/* ---- form controls (inputs, selects, textareas, checkboxes) ---- */

.legacy-admin .page-body .form-control {
    font-family: var(--font-body);
    color: var(--ink);
    background-color: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.legacy-admin .page-body .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200, 122, 30, 0.16);
}

.legacy-admin .page-body input[type="checkbox"],
.legacy-admin .page-body input[type="radio"] {
    accent-color: var(--accent);
}

/* Flat-UI's checkbox() jQuery plugin (application.js) progressively
   enhances any input[data-toggle="checkbox"] at runtime into this faux
   widget (hidden native input + a sibling .icons glyph pair), which is why
   this isn't visible in the template source -- accent-color above has no
   effect on it, since the native input is opacity:0 and the glyph color is
   what actually renders. */
.legacy-admin .page-body .checkbox input.custom-checkbox:checked + .icons,
.legacy-admin .page-body .checkbox input.custom-checkbox:checked + .icons .icon-checked,
.legacy-admin .page-body .radio input.custom-radio:checked + .icons,
.legacy-admin .page-body .radio input.custom-radio:checked + .icons .icon-checked {
    color: var(--accent);
}

.legacy-admin .page-body .checkbox,
.legacy-admin .page-body .radio {
    color: var(--ink-2);
}

/* ---- labels / badges (bare class names with no Flat-UI/Bootstrap rules
   left to override, so this is additive rather than a reskin) ---- */

.legacy-admin .page-body .label {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--muted);
    border-radius: 999px;
}

.legacy-admin .page-body .label-default { background: var(--muted); }
.legacy-admin .page-body .label-info { background: var(--ink-2); }
.legacy-admin .page-body .label-primary { background: var(--accent); }
.legacy-admin .page-body .label-success { background: var(--good); }
.legacy-admin .page-body .label-warning { background: var(--warn); }
.legacy-admin .page-body .label-danger { background: var(--crit); }

/* ---- settings pill nav (settings/_tabs.html) ---- */

.legacy-admin .page-body .settings-tabs .nav-link {
    background: transparent;
    border: none;
    color: var(--ink-2);
    font-weight: 600;
    border-radius: 999px;
    padding: 0.5rem 1.125rem;
}

.legacy-admin .page-body .settings-tabs .nav-link:hover {
    background: var(--panel-bg);
    color: var(--accent);
}

.legacy-admin .page-body .settings-tabs .nav-link.active {
    background: var(--ink);
    color: #fff;
}

/* ---- alerts ---- */

.legacy-admin .page-body .alert {
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.legacy-admin .page-body .alert-info {
    background: #FBF3E6;
    border-color: rgba(255, 177, 98, 0.5);
    color: var(--ink-2);
}

.legacy-admin .page-body .alert-danger {
    background: #FBEAE6;
    border-color: rgba(176, 64, 46, 0.35);
    color: var(--crit);
}

/* ---- pagination (true Bootstrap .pagination markup; the news list's
   .pagination-bar is plain .btn-default links, already covered above) ---- */

.legacy-admin .page-body .pagination .page-link {
    color: var(--ink-2);
    border-color: var(--rule);
}

.legacy-admin .page-body .pagination .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
}

/* ---------------------------------------------------------------------- */
/* Status pills (e.g. Heating hub's Heating/DHW indicators)               */
/* ---------------------------------------------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.1875rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    vertical-align: 2px;
}

.pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.pill.is-on {
    color: var(--good);
    border-color: rgba(46, 125, 79, 0.4);
}

/* ---------------------------------------------------------------------- */
/* Home hub: overview card grid                                           */
/* ---------------------------------------------------------------------- */

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.875rem;
}

.ov-card {
    background: var(--panel-bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.625rem 1.75rem;
    display: flex;
    flex-direction: column;
}

.ov-card-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.375rem;
    line-height: 1.1;
    color: var(--ink);
    margin-top: 0.625rem;
    font-variant-numeric: tabular-nums;
}

.ov-card-value small {
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--ink-2);
}

.ov-card-sub {
    font-size: 0.8125rem;
    color: var(--ink-2);
    margin-top: 0.25rem;
    min-height: 1.2em;
}

.ov-card-details {
    margin-top: 1.125rem;
    padding-top: 0.9375rem;
    border-top: 1px solid var(--grid);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.ov-card-detail {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

.ov-card-detail strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.ov-card-link {
    display: inline-block;
    margin-top: 1.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.ov-card-link:hover {
    text-decoration: underline;
}

.ov-soc-bar {
    background: var(--grid);
    border-radius: 4px;
    height: 6px;
    margin-top: 0.625rem;
    overflow: hidden;
}

.ov-soc-fill {
    background: var(--good);
    height: 100%;
    border-radius: 4px;
}

@media (max-width: 640px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------- */
/* Journal hub: to-do / news / follow-ups / notifications / calendar      */
/* ---------------------------------------------------------------------- */

.journal-row-list {
    display: flex;
    flex-direction: column;
    margin-top: 1.125rem;
}

.journal-empty {
    color: var(--muted);
    font-style: italic;
    font-size: 0.84rem;
    padding: 0.5rem 0;
    margin: 0;
}

.journal-more {
    display: inline-block;
    margin-top: 1.125rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.journal-more:hover {
    text-decoration: underline;
}

/* To-do */

.todo-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--grid);
    cursor: pointer;
}

.todo-row:first-child {
    border-top: none;
}

.todo-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 0.1875rem;
    flex: none;
    accent-color: var(--accent);
}

.todo-row span {
    font-size: 0.9375rem;
    color: var(--ink);
}

.todo-row.is-done span {
    text-decoration: line-through;
    color: var(--muted);
}

.todo-done-note {
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* News */

.news-row {
    padding: 0.875rem 0;
    border-top: 1px solid var(--grid);
}

.news-row:first-child {
    border-top: none;
}

.news-row-title {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9375rem;
}

.news-row-title:hover {
    color: var(--accent);
}

.news-row-meta {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.1875rem;
}

.news-row-summary {
    font-size: 0.8125rem;
    color: var(--ink-2);
    margin-top: 0.3125rem;
}

/* Follow-ups */

.fu-row-compact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--grid);
}

.fu-row-compact:first-child {
    border-top: none;
}

.fu-row-compact a {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9375rem;
}

.fu-row-compact a:hover {
    color: var(--accent);
}

.fu-row-domain {
    flex: none;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
}

/* Notifications */

.notif-row-compact {
    display: flex;
    gap: 1rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--grid);
}

.notif-row-compact:first-child {
    border-top: none;
}

.notif-row-time {
    flex: none;
    width: 3.25rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: 0.8125rem;
}

.notif-row-title {
    font-size: 0.875rem;
    color: var(--ink);
}

/* Calendar */

.cal-row-compact {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--grid);
}

.cal-row-compact:first-child {
    border-top: none;
}

.cal-row-when {
    flex: none;
    width: 8rem;
    font-weight: 600;
    color: var(--ink-2);
    font-size: 0.8125rem;
}

.cal-row-title {
    font-size: 0.9375rem;
    color: var(--ink);
}

/* ---------------------------------------------------------------------- */
/* Quiet row-action buttons (news/notifications/follow-ups full list rows) */
/* ---------------------------------------------------------------------- */

.quiet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.quiet-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.28125rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
}

.quiet-btn:hover {
    border-color: var(--muted);
    color: var(--ink);
}

.quiet-btn.is-active {
    border-color: var(--accent);
    color: var(--accent);
}

.quiet-btn.is-danger:hover {
    border-color: var(--crit);
    color: var(--crit);
}

/* Small uppercase pill labels layered onto a row title (Pinned, Hidden, ...). */
.tag-chip {
    display: inline-block;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.0625rem 0.5625rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-left: 0.5rem;
    vertical-align: 1px;
}

.tag-chip.is-accent {
    color: var(--accent);
    border-color: rgba(200, 122, 30, 0.4);
}

/* Filled uppercase pill badges (tier / follow-up state) -- MP072 family only,
   no violets. */
.tier-badge,
.state-chip {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.09375rem 0.5rem;
    border-radius: 999px;
    color: #fff;
    background: var(--muted);
}

.state-chip {
    margin-left: 0.5rem;
    vertical-align: 1px;
}

.tier-badge.tier-local { background: var(--accent); }
.tier-badge.tier-warsaw { background: var(--truffle); }
.tier-badge.tier-poland { background: var(--ink-2); }
.tier-badge.tier-global { background: var(--muted); }

.state-chip.state-new { background: var(--ink-2); }
.state-chip.state-fetched { background: var(--good); }
.state-chip.state-actioned { background: var(--accent); }
.state-chip.state-archived { background: var(--muted); }
.state-chip.state-failed { background: var(--crit); }

/* Tier/source filter bar (News full list). */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    margin: 1.125rem 0 1.75rem;
}

.filter-bar label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.filter-bar select {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 0.375rem 0.625rem;
}

.filter-bar select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200, 122, 30, 0.16);
}

/* Pagination (News full list). */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.25rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.pager a {
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.pager a:hover {
    text-decoration: underline;
}

/* News full list: row state modifiers (compact .news-row is shared with the
   Journal hub widget; these only apply on the full /news/ list). */
.news-row.is-hidden {
    opacity: 0.55;
}

.news-row-title.is-read {
    color: var(--muted);
}

/* Follow-ups full list rows (compact .fu-row-compact is shared with the
   Journal hub widget; the full /followups/ list needs excerpt/state/actions
   too, so it gets its own row treatment). */
.fu-row-full {
    padding: 1rem 0;
    border-top: 1px solid var(--grid);
}

.fu-row-full:first-child {
    border-top: none;
}

.fu-row-full-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ink);
    text-decoration: none;
}

.fu-row-full-title:hover {
    color: var(--accent);
}

.fu-row-full-meta {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

.fu-row-full-excerpt {
    font-size: 0.875rem;
    color: var(--ink-2);
    margin-top: 0.5rem;
}

.fu-row-full-error {
    font-size: 0.8125rem;
    color: var(--crit);
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------- */
/* Reader pages (news article, follow-up detail): clean ~65ch measure     */
/* ---------------------------------------------------------------------- */

.reader {
    max-width: 40rem;
    margin: 0 auto;
}

.reader h1 {
    font-size: 2.25rem;
    line-height: 1.12;
    margin: 0.375rem 0 0.625rem;
}

.reader-meta {
    font-size: 0.8125rem;
    color: var(--muted);
    margin-bottom: 1.75rem;
    word-break: break-word;
}

.reader-meta a {
    color: var(--ink-2);
}

.reader-meta a:hover {
    color: var(--accent);
}

.reader-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 1.75rem;
}

.reader-body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ink-2);
}

.reader-body p {
    margin: 0 0 1.25rem;
}

.reader-body h1,
.reader-body h2,
.reader-body h3 {
    color: var(--ink);
    margin: 2rem 0 0.75rem;
}

.reader-body img {
    max-width: 100%;
    border-radius: 6px;
}

.reader-body pre {
    background: var(--panel-bg);
    border: 1px solid var(--rule);
    padding: 0.875rem 1rem;
    border-radius: 6px;
    overflow-x: auto;
}

.reader-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
}

.reader-body th,
.reader-body td {
    border-bottom: 1px solid var(--grid);
    padding: 0.5rem 0.625rem;
    text-align: left;
}

.reader-summary {
    background: var(--panel-bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.125rem 1.25rem;
    margin-bottom: 1.75rem;
}

.reader-summary h3 {
    margin-top: 0;
}

.reader-tags {
    margin-top: 0.625rem;
}

.reader-tags span {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    margin-right: 0.375rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.6875rem;
    color: var(--ink-2);
}

/* ---------------------------------------------------------------------- */
/* Climate hub                                                             */
/* ---------------------------------------------------------------------- */

.climate-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.375rem;
}

.climate-warn-banner {
    margin: 1.125rem 0 0;
    padding: 0.6875rem 1.125rem;
    border: 1px solid rgba(179, 131, 13, 0.4);
    background: rgba(179, 131, 13, 0.08);
    border-radius: 6px;
    color: var(--warn);
    font-size: 0.8125rem;
    font-weight: 600;
}

.climate-room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 640px) {
    .climate-room-grid {
        grid-template-columns: 1fr;
    }
}

.room-card {
    background: var(--panel-bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.375rem 1.5rem 1.625rem;
    display: flex;
    flex-direction: column;
}

.room-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.room-card-head h3 {
    margin: 0;
}

.room-card-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.room-card-temp {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.125rem;
    line-height: 1.15;
    color: var(--ink);
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.room-card-target {
    font-size: 0.75rem;
    color: var(--muted);
    min-height: 1.1em;
}

.room-card-peak {
    font-size: 0.8125rem;
    color: var(--ink-2);
    margin: 0.375rem 0 0;
}

.room-off-note {
    padding: 1.5rem 0;
    text-align: center;
}

.room-card-actions-head {
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 1.125rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--grid);
}

/* Filled mode pill, sharing .state-chip's base look (theme.css "Filled
   uppercase pill badges" above) so off/shadow/live and the decision log's
   shadow/executed badges read as one family. */
.state-chip.mode-off { background: var(--muted); }
.state-chip.mode-shadow { background: var(--warn); }
.state-chip.mode-live { background: var(--good); }

/* ---- decision log ---- */

.decision-row {
    display: grid;
    grid-template-columns: 6.5rem 6.5rem 1fr auto;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--grid);
}

.decision-row:first-child {
    border-top: none;
}

.decision-row-time {
    color: var(--muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.decision-row-room {
    font-weight: 600;
    color: var(--ink-2);
    font-size: 0.8125rem;
}

.decision-row-detail {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.decision-row-plan {
    font-size: 0.75rem;
    color: var(--ink);
}

.decision-row-reason {
    font-size: 0.8125rem;
    color: var(--ink-2);
}

.decision-row-badges {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .decision-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .decision-row-badges {
        justify-content: flex-start;
    }
}

/* ---------------------------------------------------------------------- */
/* Login page                                                              */
/* ---------------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.login-wrap {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background: radial-gradient(120% 90% at 50% 0%, rgba(255, 177, 98, 0.28) 0%, rgba(255, 177, 98, 0.08) 45%, rgba(255, 177, 98, 0) 72%);
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--panel-bg);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 2.75rem 2.25rem 2.5rem;
    text-align: center;
    box-shadow: 0 2px 20px rgba(27, 38, 50, 0.08);
}

.login-card h1 {
    font-size: 2.375rem;
    margin: 0 0 0.375rem;
}

.login-kick {
    font-size: 0.8125rem;
    color: var(--muted);
    margin: 0 0 2rem;
}

.login-field {
    margin-bottom: 1rem;
    text-align: left;
}

.login-input {
    width: 100%;
    padding: 0.75rem 0.9375rem;
    font-size: 0.9375rem;
    font-family: var(--font-body);
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.login-input::placeholder {
    color: var(--muted);
}

.login-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200, 122, 30, 0.18);
}

.login-submit {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.8125rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.login-submit:hover {
    background: var(--truffle);
}

.login-submit:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}