/* The Investment Optimizer's own components. Everything shared with the other Kolekt services (header,
 * footer, bottom bar, buttons, fields, cards, tips, toasts) comes from base/layout/components.css
 * unchanged; this file adds what those services never needed: the sub-header band (from the EPR
 * Wizard), dialogs, tables, and the optimizer's own views.
 *
 * Same house rules: tokens only (no colour is defined here), BEM plus is-* state classes, and a
 * [hidden] twin for every rule that sets display - an author display rule beats the user agent's
 * [hidden], so without the twin a script that hides the element would hide nothing. */

/* --- Header lockup ----------------------------------------------------------
 * KOLEKT INVESTMENT OPTIMIZER is longer than the sister products' names, and layout.css measured its
 * phone step for those: at 390px the lockup plus the menu button needed 305px of the 298px free, and
 * the header row (which may wrap below 1220px) moved the button onto a second row instead. On a phone
 * the lockup steps down once more; and where even that does not fit (320px) the name wraps beside the
 * mark - flex-basis 0 lets the row keep the button - rather than doubling the header's height. */
@media (max-width: 40rem) {
    .page-header__brand { --brand-h: 1.5rem; }
    .page-header__left { flex-basis: 0; }
}

/* --- Page width ----------------------------------------------------------- */
.container--page { max-width: var(--container-page); }

/* The sub-header touches the site header, so the main area gives up its top padding. */
.site-main--flush { padding-top: 0; }

/* --- Sub-header -----------------------------------------------------------
 * The band under the site header: what this page is about, what you can do here and, where a page
 * has them, its views. Sticky like the site header on a screen tall and wide enough to afford it; on a
 * phone it scrolls away, because two stuck bands would leave the content a letterbox. */
.sub-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--sp-5);
}
@media (min-width: 768px) and (min-height: 600px) {
    .sub-header {
        position: sticky;
        top: var(--header-h, 0px);
        z-index: var(--z-sticky-sub);
    }
}

.sub-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding-block: var(--sp-4);
}
.sub-header__inner[hidden] { display: none; }
.sub-header__heading { min-width: 0; }
.sub-header__context {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-100);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.sub-header__title {
    margin: 0;
    font-size: var(--fs-500);
    overflow-wrap: anywhere;
}
.sub-header__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sub-header__actions[hidden] { display: none; }

/* The context line is a trail back (fragments/crumbs.html); a page script may add its last part. */
.crumbs__link { color: inherit; text-decoration: none; }
.crumbs__link:hover, .crumbs__link:focus-visible { color: var(--c-navy); text-decoration: underline; }
.crumbs__sep { margin: 0 var(--sp-1); }
.crumbs__more:not(:empty)::before { content: "\203A"; margin: 0 var(--sp-1); }

/* On a phone the page's actions fold behind one "..." button (components/sub-header.js). The state
   classes mean something only inside the media query, so a wider window restores the row. */
.sub-header__menu { position: relative; display: flex; align-items: center; }
.sub-header__menu[hidden] { display: none; }
.sub-header__more { display: none; }
@media (max-width: 767.98px) {
    .sub-header__inner { flex-wrap: nowrap; align-items: flex-start; }
    .sub-header__heading { flex: 1 1 auto; }
    .sub-header__menu.has-actions .sub-header__more { display: inline-flex; }
    .sub-header__menu.has-actions .sub-header__more[hidden] { display: none; }
    .sub-header__menu.has-actions .sub-header__actions { display: none; }
    .sub-header__menu.has-actions.is-actions-open .sub-header__actions {
        position: absolute;
        top: calc(100% + var(--sp-1));
        right: 0;
        z-index: var(--z-tip);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 14rem;
        padding: var(--sp-2);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
    }
    .sub-header__menu.has-actions.is-actions-open .sub-header__actions[hidden] { display: none; }
}

/* A page's views. A strip that scrolls sideways on a phone instead of wrapping into a second row of
   chrome; the current view has a green rule AND aria-current, never colour alone. */
.sub-header__tabs {
    display: flex;
    gap: var(--sp-1);
    overflow-x: auto;
    scrollbar-width: thin;
}
.sub-header__tabs[hidden] { display: none; }
.sub-header__tab {
    flex: 0 0 auto;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--c-navy);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast) ease;
}
.sub-header__tab:hover { background: var(--c-yellow); text-decoration: none; }
.sub-header__tab:focus-visible { outline: 3px solid var(--c-blue); outline-offset: -3px; }
.sub-header__tab.is-active { border-bottom-color: var(--action); font-weight: 700; }

/* --- Small shared pieces ----------------------------------------------- */

/* The lead paragraph under a heading. */
.lede { color: var(--color-text-muted); max-width: 46rem; }

.is-worse { color: var(--delta-worse); }
.is-better { color: var(--delta-better); }

/* A state that is fine (an import file, a country's data); base.css's .badge--danger is the one that stops something. */
.badge--ok { background: var(--success-bg); color: var(--success-ink); }

/* A definition list of short facts, label left and value right. */
.fact-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--sp-1) var(--sp-4);
    margin: 0;
    font-size: var(--fs-200);
}
.fact-list[hidden] { display: none; }
.fact-list dt { color: var(--color-text-muted); }
.fact-list dd { margin: 0; font-weight: 600; color: var(--c-navy); }
/* On a phone the label column (max-content) leaves the value too narrow for one long word. */
@media (max-width: 480px) {
    .fact-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .fact-list dd { margin-bottom: var(--sp-2); }
}

.stack { display: grid; gap: var(--sp-3); }
.stack[hidden] { display: none; }

/* A checkbox whose wording may run to two lines: the box stays level with the first line (EPR Wizard). */
.check-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-200);
}
.check-row[hidden] { display: none; }
.check-row > input { flex: 0 0 auto; margin-top: 0.3em; }

/* --- Dialog -------------------------------------------------------------
 * The native <dialog>: focus is trapped and Escape closes it without a line of script. */
.dialog {
    width: min(34rem, calc(100vw - 2 * var(--sp-4)));
    max-height: calc(100vh - 2 * var(--sp-4));
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow);
}
.dialog::backdrop { background: rgba(11, 45, 68, 0.45); }
.dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--color-border);
}
.dialog__head[hidden] { display: none; }
.dialog__title { margin: 0; font-size: var(--fs-400); }
.dialog__body { padding: var(--sp-5); }
.dialog__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--color-border);
}
.dialog__foot[hidden] { display: none; }
/* A dialog holding a form of many fields or a report: wider on a wide screen, the width of a phone on one. */
.dialog--wide { width: min(56rem, calc(100vw - 2 * var(--sp-4))); }

/* --- Tables ------------------------------------------------------------
 * Real <table>s: the admin lists and the plan's figures are read row by row, and a screen reader
 * announces the column of each cell. Below 600px a .table--stack turns every row into a card, each
 * cell introduced by its column name (data-label), instead of scrolling sideways. */
.table-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow-x: auto;
}
.table-card[hidden] { display: none; }
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-200);
}
.table th,
.table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}
.table th {
    font-size: var(--fs-100);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .table--stack thead {
        position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .table--stack tr { display: block; padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border); }
    .table--stack tr[hidden] { display: none; }
    .table--stack tbody tr:last-child { border-bottom: 0; }
    .table--stack td { display: block; padding: var(--sp-1) var(--sp-3); border: 0; text-align: left; }
    .table--stack td[hidden] { display: none; }
    /* A card of a stacked row shows only the columns that have something to say. */
    .table--stack td:empty { display: none; }
    .table--stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--fs-100);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }
}

/* --- Home ----------------------------------------------------------------- */
.feature-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    margin-bottom: var(--sp-6);
}
.feature-grid[hidden] { display: none; }
.feature__title { font-size: var(--fs-400); margin-bottom: var(--sp-2); }
.feature__text { margin: 0; color: var(--color-text-muted); }

/* The home page's buttons, centred under the centred hero text. */
.home-cta { justify-content: center; margin-top: var(--sp-5); }

/* --- Legal notice (from ExchangeCertificates) --------------------------------------------------
 * The company's facts: label left, value right; stacked on a phone. */
.legal-facts {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-4);
    margin: 0 0 var(--sp-4);
}
.legal-facts[hidden] { display: none; }
.legal-facts dt { font-weight: 600; color: var(--c-navy); }
.legal-facts dd { margin: 0; }
@media (max-width: 40rem) {
    .legal-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .legal-facts dd { margin-bottom: var(--sp-3); }
}

/* --- Admin ------------------------------------------------------------------ */
.admin-search { flex: 1 1 20rem; }
/* Level with the field beside it, which carries the field's bottom margin. */
.admin-search__submit { margin-bottom: var(--sp-4); }
.admin-dates { display: block; font-size: var(--fs-100); }
/* display:block beats the user agent's [hidden] as flex does, so it needs the same twin. */
.admin-dates[hidden] { display: none; }
.select--sm { width: auto; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-200); }