/* ADM project-specific styles */

/* Feather icon sizes and colors */
.icon-gray {
    color: #69707a; /* --bs-gray-600 */
    stroke-width: 1;
}

.icon-lg {
    width: 32px;
    height: 32px;
}

/* Neutral outline button.

   The theme's `secondary` is a vivid purple (--bs-secondary: #6900c7), so
   `btn-outline-secondary` — the usual "not the main action" choice — paints
   chrome in a colour as loud as the ones that carry meaning. On the county hub
   analysis tab colour is the series (blue = Policy A, green = Policy B) and the
   superlatives (High Net, Best Value); controls should not compete with it.

   Written as plain rules rather than --bs-btn-* custom properties: styles.css
   is an older Bootstrap build whose .btn-outline-* rules are hardcoded, and it
   loads after the CDN, so the variables would not be read. */
.btn-outline-neutral {
    color: #69707a;          /* --bs-gray-600, the body colour */
    border-color: #c5ccd6;   /* --bs-gray-400 */
}

.btn-outline-neutral:hover,
.btn-outline-neutral:active,
.btn-outline-neutral.active {
    color: #fff;
    background-color: #69707a;
    border-color: #69707a;
}

.btn-outline-neutral:focus {
    box-shadow: 0 0 0 0.2rem rgba(105, 112, 122, 0.4);
}

.btn-outline-neutral:disabled,
.btn-outline-neutral.disabled {
    color: #a7aeb8;          /* --bs-gray-500 */
    background-color: transparent;
    border-color: #c5ccd6;
}

/* Card-header state annotation — a third badge channel.

   The analysis tab already spends colour on meaning: party marks are solid blue
   and the two superlatives solid green and amber (`selection.SUPERLATIVE_CSS`),
   and those live in the results table. A card *header* saying something about
   the whole card — New Business, Single Field — is a different kind of claim
   entirely, and painting it `bg-warning` made it the fourth amber thing on
   screen and read as another superlative.

   So it differs from them in shape, fill and type rather than only in hue: a
   notched ribbon, flat grey, uppercase and letter-spaced. Solid-and-saturated
   stays reserved for the per-candidate marks, and nothing here competes with
   the series colours — the same restraint `btn-outline-neutral` above shows.

   The shape is carrying a second load: these sit in a header beside `.btn-sm`
   controls, at the same height and the same rounded-rectangle silhouette, and a
   rectangle in a header reads as something you can click. The notch says at a
   glance that it is a label, not a control. The polygon below is the standard
   CSS ribbon cutout; the palette and sizing are this file's own. */
.badge-note {
    /* Cutout depth. `clip-path` cuts the padding box, so the inline padding is
       asymmetric — the text has to clear the notch on the right or the last
       letter sits in the bite; `padding-inline` below is written off this, so
       changing it here keeps the text clear on its own.

       0.9em rather than 0.7: the notch is the whole reason this does not read
       as a button, and at 0.7em on a 36px ribbon it was a nick rather than a
       shape. */
    --r: 0.9em;
    display: inline-block;
    /* `.badge` rounds to 0.35rem, and a rounded background under a square-
       cornered polygon shows as four small bites on the straight side. */
    border-radius: 0;
    padding-block: 0.5rem;
    padding-inline: 0.7rem calc(var(--r) + 0.35rem);
    clip-path: polygon(
        100% 0, 0 0, 0 100%, 100% 100%,
        100% calc(100% - 0.25em), calc(100% - var(--r)) 50%, 100% 0.25em
    );

    /* Three colours, named so a variant can restate them and nothing else —
       the shape, geometry and type below are the expensive half and no modifier
       should be repeating them. `--note-fill` is read by `::before`.

       The parent's background paints the 1px *edge*, not the fill; `::before`
       lays the fill over it, inset by a pixel. See that rule for why the border
       is built this way rather than with `border`. */
    --note-edge: #69707a;        /* --bs-gray-600 */
    --note-fill: #dee2e6;        /* --bs-gray-300 */
    --note-ink:  #495057;        /* --bs-gray-700 */
    background-color: var(--note-edge);
    color: var(--note-ink);

    /* One shadow, and only one. This was four zero-blur `drop-shadow`s faking
       an outline plus a fifth for the lift, and chained filters are
       order-dependent: each takes the previous *composite* as its input, so the
       second shadow cast from (shape + first shadow), the third from that, and
       the accumulated edge came out asymmetric. Two ribbons of different widths
       accumulate it differently, which is why they looked lit from different
       directions. With the edge moved into `::before` there is one directional
       filter left, so both ribbons are lit the same way.

       Offset diagonally, not straight down. A `0 2px` shadow falls behind the
       two diagonals and shows only along the flat bottom, so the notch — the
       one edge doing the work of saying this is not a button — was the one edge
       with no shadow on it. `2px 2px` lights from the upper left and drops
       shadow into the bite. */
    filter: drop-shadow(2px 2px 3px rgba(33, 40, 50, 0.35));

    /* `::before` is positioned against this, and the negative z-index below
       needs a stacking context to sit inside — `filter` already makes one, but
       stating it keeps the pair from breaking if the filter is ever dropped. */
    position: relative;
    z-index: 0;

    /* Sized off `.btn-sm` — the Quote Detail button sits in one of these very
       headers, so the two are read side by side and near-but-not-equal heights
       read as a mistake. One step more type than the button (0.85rem against
       0.75rem) because this is a statement rather than a control; on the
       button's own 0.5rem block padding that lands on 36px, its exact height.

       `line-height` is the override that matters, and not for size. `.badge`
       clips the line box to 1em, so the font's descent — which uppercase never
       uses — stays reserved below the caps and the ink rides visibly high in
       the box. 1.5 is the button's own value, which is why its label looks
       centred and this did not.

       36px is taller than the card title's 24px line box, so a header with no
       button in it — Candidates, whenever nothing has been removed — grows to
       fit. Deliberate: it makes the two headers the same height rather than
       leaving the badge looking shrunken beside the button on one of them. */
    font-size: 0.85rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* The ribbon's fill, and by omission its border: the parent is painted the edge
   colour and this covers all but a pixel of it, so what shows through is a 1px
   outline that follows the notch.

   `border` cannot do that here. `clip-path` cuts the border along with
   everything else, so a bordered ribbon renders with its straight sides stroked
   and its two diagonals as bare cut edges — the one part of the outline that
   matters is the part that goes missing.

   `clip-path: inherit` takes the parent's polygon and resolves its percentages
   against this box, so the inset shape is the notch again a pixel smaller. The
   diagonals are then fractionally non-parallel to the parent's; at 1px that is
   not visible, and it is what keeps the two shapes defined in one place.

   Negative z-index paints it above the parent's background but below the text,
   which is the whole trick — an opaque fill over the edge colour, with the
   label still on top of it. */
.badge-note::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: inherit;
    background-color: var(--note-fill);
}

/* Warning variant. Colours only — everything that makes it a ribbon is above.

   Danger red rather than the amber this started as, and the swap is worth more
   than loudness: amber is Best Value's colour, so an amber ribbon put a second
   meaning on a hue the tab had already spent. Red is unspent here — nothing
   else on the analysis tab uses it — so it carries this one claim alone.

   The name stays `-warn` for what it means, not for which of Bootstrap's
   palettes it borrows. The fill is a 12% tint rather than flat `--bs-danger`,
   which at ribbon size would shout louder than the figures it is warning
   about; the edge and ink carry the signal. */
.badge-note-warn {
    --note-edge: #e81500;        /* --bs-danger */
    --note-fill: #fce3e0;        /* 12% of it on white */
    --note-ink:  #8a1000;        /* ~8:1 on the fill */
}

/* Orange table/border/bg utilities for analysis comparison */
.table-orange { background-color: rgba(253, 126, 20, 0.15) !important; }
.border-orange { border-color: #fd7e14 !important; }
.bg-orange-subtle { background-color: rgba(253, 126, 20, 0.1) !important; }

/* A figure that is also a button — the net values on the analysis tab's Summary
   card, where clicking one is how a configuration gets recommended.

   They sit directly under the cost figures, which are plain `<td>` text, and the
   two columns of numbers have to read as the same kind of number. `.btn` and
   `.btn-sm` (styles.css) override four things that break that: font-size drops
   to 0.75rem, the colour goes grey, line-height collapses to 1, and the weight
   is fixed at 400 whatever the cell asks for. This puts the figure back on the
   table's own type.

   The hover is deliberately colourless. On this card green and orange mean the
   incremental rule and blue means a party recommended, so a tinted hover would
   read as one of those for as long as the pointer sat there. */
.btn-figure {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
}

.btn-figure:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: inherit;
}

/* Sidenav footer: fixed 5rem height (from vendor styles.css) is too short
   once the change-password/log-out row is added; let it grow to fit. */
.sidenav .sidenav-footer {
    height: auto;
    min-height: 5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Collapse toggles: the chevron marks state, so it has to move.

   Consolidated here 2026-08-21. The rule already existed, twice, as page-local
   `<style>` in `county_hub.html` and `lands_county_manager.html` — so every
   other collapsing card in ADM (`county_add_land`, `county_aph_historical` and
   the rest) carried `.collapse-chevron` in its markup and got no rotation at
   all. Harmless on a card with one lone toggle; misleading on the policy
   queue's producer card, where three sections stack and the arrow is the only
   thing marking which one is open.

   ADM's convention, kept: chevron-down points *down* when open and swings to
   `-90deg` when shut. Keyed off Bootstrap's `.collapsed`, which it puts on the
   button whenever the target is closed. */
.collapse-chevron {
    transition: transform 0.2s ease;
}

.collapsed .collapse-chevron {
    transform: rotate(-90deg);
}

/* Collapse toggles: no focus ring for a mouse, still one for a keyboard.

   The vendor theme predates `:focus-visible` and rings every `.btn` on plain
   `:focus` — `.btn-check:focus + .btn, .btn:focus` in styles.css — so clicking
   a section header outlined the chevron and its label and left the ring sitting
   there until something else took focus. On a card header that reads as an
   error state rather than as focus.

   Removed only for collapse toggles, and only for the mouse: `:focus-visible`
   puts the same ring back for keyboard users, who have nothing else telling
   them where they are. The ring value is the theme's own, so the two agree.

   Equal specificity to `.btn:focus`, and custom.css is linked after styles.css
   (`base/head.html`), so source order settles it. */
[data-bs-toggle="collapse"]:focus {
    box-shadow: none;
    outline: none;
}

[data-bs-toggle="collapse"]:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(0, 97, 242, 0.25);
}