/* =============================================================================
 * Atlas Cloud Tools — theme layer
 *
 * CANONICAL COPY. Distributed by scripts\Sync-AtlasTokens.ps1. Edit here only.
 * Load order matters: atlas-tokens.css, then bootstrap, then THIS, then app.css.
 *
 * WHY THIS FILE EXISTS
 * The tools are Bootstrap-shaped — ACH alone has forty .form-control and eleven
 * .alert. Replacing that markup with a bespoke component set is weeks of churn
 * across every screen for no user-visible gain. So the platform's look is
 * applied by restyling the classes already in the markup. One stylesheet, no
 * markup edits, and a tool adopts it by adding a <link>.
 *
 * Everything here resolves to a token. No literal colours.
 * See UnifiedLogin/docs/atlas-tools-style-guide.md (ACT-70).
 * ========================================================================== */

/* --- Bootstrap's own variables, repointed ------------------------------------
 * Cheapest win available: Bootstrap 5 reads these, so components we have not
 * written a rule for still come out in the right colour. */
:root {
    --bs-primary: var(--color-action);
    --bs-primary-rgb: 52, 73, 94;
    --bs-link-color: var(--color-link);
    --bs-link-hover-color: var(--color-link-hover);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-page-bg);
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-sm);
    --bs-font-sans-serif: var(--font-stack);
}


/* --- Type --------------------------------------------------------------------
 * ONE HEADING. There is no scale, because these tools do not need one.
 *
 * The tab strip already names the screen, so a page's headings are labelling
 * sections within one flat level — and a size ramp on top of that just makes
 * the page look uneven. Every heading is 1rem/600, whatever its level, and
 * the markup uses h1 throughout.
 *
 * h2 and h3 are given the identical treatment rather than dropped, so a stray
 * one cannot reintroduce a second size. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    /* Spacing is NOT set here. See the vertical rhythm block below — a heading
       that carries its own margin is half of what stacked to 68px. */
    margin: 0;
    /* Section headings sit hard against the content's left edge. No per-element
       padding: one left edge per screen, and only nested content indents in. */
    padding-left: 0;
}


/* --- Vertical rhythm ----------------------------------------------------------
 * ONE owner for the space between blocks.
 *
 * .main-content-area is a flex column, so margins DO NOT COLLAPSE inside it:
 * whatever a page sets is added to whatever its neighbour sets. On Warranty's
 * Adoption screen a .actions bottom margin (24px), a section bottom margin
 * (20px) and a heading top margin (24px) — each defensible on its own, each in
 * a different file — summed to 68px of dead space above "After an analysis".
 * Nobody wrote 68px, and no amount of tuning one of the three fixes it.
 *
 * So blocks carry no vertical margin at all and space is applied only as
 * margin-top on the FOLLOWING sibling (single-direction margins). Two margins
 * then cannot sum, the result does not depend on collapsing, and the first and
 * last block sit flush against the column's own padding.
 *
 * The lists are explicit rather than `*` so flex/grid rows, inline content and
 * table internals are left alone. :where() keeps every rule at 0,1,0, so these
 * four read in source order — general first, then the two heading cases.
 * KEEP THE LISTS IDENTICAL. */
.main-content-area :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, form,
                          fieldset, section, details, pre, blockquote, figure, hr,
                          .actions, .alert, .empty-state, .table-responsive,
                          .card, .ach-send-bar, .verdict) {
    margin-top: 0;
    margin-bottom: 0;
}


.main-content-area :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, form,
                          fieldset, section, details, pre, blockquote, figure, hr,
                          .actions, .alert, .empty-state, .table-responsive,
                          .card, .ach-send-bar, .verdict, button, .btn)
                  + :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, form,
                           fieldset, section, details, pre, blockquote, figure, hr,
                           .actions, .alert, .empty-state, .table-responsive,
                           .card, .ach-send-bar, .verdict) {
    margin-top: var(--space-4);
}


/* Controls and Bootstrap grid rows are deliberately NOT in the lists above:
   inside .actions, a .row or any other flex line they are placed by gap, and a
   margin-top there knocks them out of line. They still need spacing when they
   follow flow content, which is what this does — previous sibling must be a
   block, so button-next-to-button is untouched. */
.main-content-area :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, form,
                          fieldset, section, details, pre, blockquote, figure, hr,
                          .actions, .alert, .empty-state, .table-responsive,
                          .card, .ach-send-bar, .verdict, .row, .btn-link)
                  + :where(button, .btn, input[type="submit"], input[type="button"], .row,
                           input, select, textarea, .form-control, .form-select) {
    margin-top: var(--space-4);
}


/* A heading — or a section, which is a heading plus its content — opens a new
   group and gets one step more above it. */
.main-content-area * + :where(h1, h2, h3, h4, h5, h6, section) {
    margin-top: var(--space-6);
}


/* ...and sits tight to the content it introduces. Those two values are the
   whole scale; there is no third. */
.main-content-area :where(h1, h2, h3, h4, h5, h6) + * {
    margin-top: var(--space-2);
}


/* The strip is the screen's title, so the gap under it is the group gap
   whatever the page opens with — a heading on one screen, an alert on the
   next. Without this the first block moves depending on what it is. */
.main-content-area .nav-tabs + * {
    margin-top: var(--space-6);
}


/* Bootstrap pays for a row's vertical gutter with margin-top: -gutter on the
   row and margin-top: gutter on EVERY column — including the first line, which
   is not between anything. That is why a .row sat lower than every other block
   however the rhythm was tuned.
   So the mechanism is switched off and the same job is done by row-gap, which
   applies only BETWEEN wrapped lines. Wrapped fields still separate; the first
   line starts where the rhythm puts it. */
.main-content-area .row {
    --bs-gutter-y: 0px;
    row-gap: var(--space-4);
}


.main-content-area .row > * { margin-top: 0; }


.main-content-area * + .row { margin-top: var(--space-4); }


/* A heading sits as close to a row of fields as to any other content. */
.main-content-area :where(h1, h2, h3, h4, h5, h6) + .row { margin-top: var(--space-2); }


/* A BUTTON NEVER TOUCHES THE CONTROL NEXT TO IT. Inline siblings have no gap
   of their own, so one is given here; flex rows already space themselves with
   gap and opt out below. */
/* .form-control and .form-select are deliberately NOT here. They are block and
   width: 100%, so they never sit beside anything — the margin only indented a
   full-width field on its own line, which is why the logo picker looked inset
   under "Remove logo" for no reason. */
:is(button, .btn, .btn-link) + :is(input:not(.form-control), select:not(.form-select), textarea:not(.form-control), button, .btn),
:is(input:not(.form-control), select:not(.form-select), textarea:not(.form-control)) + :is(button, .btn) {
    margin-left: var(--space-5);
}


/* An action row spaces itself, which is what lets the no-touching rule opt out
   of it. Warranty defines .actions too; both are a flex row with a gap. */
.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 1em. The same gap the no-touch rule gives inline controls, so a row of
       them is spaced identically whether or not it has a container. */
    gap: var(--space-5);
}


/* A grid ROW of fields followed by an action row. The stack rules above pair
   flow content with flow content and flow content with controls, but a .row is
   in neither list on the .actions side — so the buttons under a form's last
   field row sat hard against it, which is how Save and Cancel ended up touching
   the vendor drop-down. */
.main-content-area .row + .actions,
.main-content-area .row + .ach-send-bar {
    margin-top: var(--space-5);
}


/* :is() above, not :where(): Bootstrap's reboot sets margin: 0 on input and
   select at 0,0,1, so a zero-specificity rule silently lost. These opt-outs are
   then qualified so they outscore it in turn. */
.main-content-area :is(.actions, .ach-send-bar, .input-group, .row > *) > * + * {
    margin-left: 0;
}


/* And the opt-out has to OUTSCORE the rule it opts out of, which for nine months
   it did not. The no-touch selector above carries an element inside its :not(),
   so it scores (0,2,1); this opt-out scored (0,2,0) and silently lost every
   time. Every action bar in every tool was therefore spaced at 32px — the flex
   gap plus a margin that was supposed to have been cancelled — while the table
   above it sat at 16px, which is the mismatch that made the buttons look adrift.
   Matching the offender's own shape takes this to (0,3,1) and lets it win. */
.main-content-area :is(.actions, .ach-send-bar, .input-group, .row > *)
    > * + :is(input:not(.form-control), select:not(.form-select), textarea:not(.form-control), button, .btn, .btn-link) {
    margin-left: 0;
}


/* --- Sections -----------------------------------------------------------------
 * A screen with several independent panels — ACH Settings has five, each with
 * its own Save — reads as one long column unless the panels are banded. Every
 * other one takes the Clouds wash, so the boundary is visible without a rule,
 * a card border or a second heading size.
 *
 * The band bleeds past the text on both sides and pads itself back, so the left
 * edge of the words does not move. The padding IS the separation between
 * panels, so the rhythm margin between sections is dropped — otherwise the gap
 * is 24px of margin on top of 24px of padding. */
/* .page--narrow counts as the content area for banding: it is a wrapper a page puts
   around itself to take the 1200px cap, and without it here every section inside one
   would lose its Clouds band. */
:is(.main-content-area, .page--narrow) > section,
:is(.main-content-area, .page--narrow) > form > section {
    padding: var(--space-4);
    margin-inline: calc(-1 * var(--space-4));
    border-radius: var(--radius-sm);
}


:is(.main-content-area, .page--narrow) > section:nth-of-type(even),
:is(.main-content-area, .page--narrow) > form > section:nth-of-type(even) {
    background: var(--color-surface-2);
}


/* The padding IS the gap, for the first section as much as the rest — with the
   rhythm margin still on, a heading sat 24px of margin plus 12px of padding
   below the paragraph above it. */
:is(.main-content-area, .page--narrow) > section,
:is(.main-content-area, .page--narrow) > form > section { margin-top: 0; }


/* The collapsible section is defined in atlas-components.css, which every tool
   loads. It cannot live here: this sheet is the Bootstrap-era paint the React
   tools never take, so a control defined in it reaches half the platform. */


/* Expand all / Collapse all. Navigation of the page, not actions on the data in
   it, so it sits where the sections start — at the LEFT edge, over the first
   section's own disclosure triangle. It was flex-end, which put it in the
   opposite corner from the thing it operates: the eye had to cross the whole
   page to connect a control to the column of triangles it drives. The same
   control sits left of BIReports' Search box for the same reason. One rule, and
   ACH Settings, Warranty Settings and every future page of sections follow it. */
.atlas-section-bar {
    display: flex;
    justify-content: flex-start;
    gap: var(--space-3);
}


/* THE EXPAND/COLLAPSE TOGGLE.
 * This is BIReports' control, not a second one that resembles it: the same
 * .toggle-expand-btn box, the same 16px inline SVG at stroke 1.5, the same two
 * polylines. The declarations below are deliberately identical to the ones in
 * BIReports/frontend/src/components/LeftNavBar.css — that tool is React and does
 * not take this stylesheet, so the definition exists twice. IF EITHER IS
 * RETUNED, RETUNE BOTH.
 *
 * The glyph shows the ACTION, not the state: arrows closing on the rule between
 * them while there is something to collapse, opening away from it while there is
 * something to expand. atlas-collapse.js owns the is-collapsed class. */
.toggle-expand-btn {
    width: var(--control-h);
    height: var(--control-h);
    padding: 4px;
    border: 1px solid var(--color-action-edge);
    border-radius: var(--radius-sm);
    /* An action, not a toggle: filled, like every other button. */
    background: var(--color-action);
    color: var(--color-action-fg);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


.toggle-expand-btn:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-action-hover-fg);
}


.toggle-expand-btn .toggle-icon { display: block; }


.toggle-expand-btn:focus-visible {
    outline: var(--focus-ring-w) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}


.atlas-collapse-toggle .atlas-collapse-toggle__open { display: none; }

.atlas-collapse-toggle.is-collapsed .atlas-collapse-toggle__close { display: none; }

.atlas-collapse-toggle.is-collapsed .atlas-collapse-toggle__open { display: inline; }


/* --- Tab strip ---------------------------------------------------------------
 * Tabs are navigation, not hyperlinks. In accent blue they read as body links
 * and fight the dark bar above them. Neutral text, and the active tab is marked
 * by weight and an accent rule rather than by colouring all of them. */
.nav-tabs {
    border-bottom: 1px solid var(--color-border);
    gap: 2px;
    /* The gap below the strip is the rhythm's, like every other gap. */
    margin-bottom: 0;
}


.nav-tabs .nav-link {
    color: var(--color-text-muted);
    font-size: .875rem;
    font-weight: 500;
    padding: .5rem 1rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: transparent;
    position: relative;
    transition: color 120ms, background 120ms;
}


.nav-tabs .nav-link:hover {
    color: var(--color-text);
    background: var(--color-surface-2);
    border-color: transparent;
}


.nav-tabs .nav-link.active {
    color: var(--color-text);
    font-weight: 600;
    background: var(--color-surface);
    border-color: var(--color-border);
    border-bottom-color: var(--color-surface);
}


/* The only accent on the strip: a rule across the top of the active tab. */
.nav-tabs .nav-link.active::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 3px;
    background: var(--color-action);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}


.nav-tabs .nav-link:focus-visible {
    outline: var(--focus-ring-w) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}


/* --- Controls, whatever they are called ----------------------------------------
 * THE ELEMENT IS STYLED, NOT JUST THE BOOTSTRAP CLASS.
 *
 * Warranty's Labor guide shipped three different buttons on one screen: an
 * .btn-primary, a bare <button> rendering as the browser's grey 1990s default,
 * and a local .primary of its own. Styling only .btn left every unclassed
 * control looking like a different product. So the base rules below hit the
 * ELEMENT, and the class variants only change the intent — never the shape.
 *
 * That means a screen written with plain HTML comes out right with no classes
 * at all, which is the only version of "consistent" that survives contact with
 * a page nobody remembered to audit. */

/* THE BASE IS A PLAIN ELEMENT SELECTOR. Both of the other spellings failed:
     button:not(.btn-link)   scores 0,2,1 and beat the variants it exists to
                             support — .btn-primary rendered white
     :where(button)          scores 0,0,0 and lost to Bootstrap's own reboot,
                             `button { font-size: inherit }` at 0,0,1 — so
                             button.primary came out at the body's 16px while
                             every other control was 13px
   0,0,1 is the only weight that works: it ties reboot and wins on order
   because this file loads after Bootstrap, and every variant below carries a
   class, so every variant beats it. No :not() needed either — .btn-link resets
   what it needs to reset and outranks this on its own. */
button,
.btn,
button.primary,          /* WarrantyAnalysis' own class, 15 uses */
input[type="button"],
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--control-gap);
    font-family: inherit;
    font-size: var(--font-size-control);
    font-weight: 500;
    line-height: 1.4;
    padding: var(--control-pad-y) var(--control-pad-x);
    min-height: var(--control-h);
    /* THERE IS NO GREY BUTTON. A button is the accent — every one of them.
       The neutral white-on-grey treatment used to be the base, which meant
       every control nobody had explicitly classed came out grey: Run the
       follow-up, Choose File, Download, Suggest. Each was then fixed one at a
       time, which is the failure this file exists to prevent. Buttons that
       need to recede are TEXT (.btn-link, .icon-btn, a bare button in a table
       cell) — they are not grey boxes. */
    border: 1px solid var(--color-action-edge);
    border-radius: var(--radius-sm);
    background: var(--color-action);
    color: var(--color-action-fg);
    /* A Clouds button on a Clouds section band is the same colour as its ground,
       and an edge hard enough to fix that reads as a box drawn round the label.
       A shadow lifts it off instead. */
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background 120ms, border-color 120ms, box-shadow 120ms;
}


button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-action-hover-fg);
}


/* Disabled is Concrete, not a faded accent. opacity: .55 produced a washed-out
   copy of the live button next to it — Warranty's Import and Ingest both read
   as a rendering fault rather than as "not available yet". A flat neutral fill
   says inert, and it says it identically whatever the button's variant was. */
/* --- Text actions ---------------------------------------------------------------
 * A row action is a WORD, not a box. Edit and Remove in a table cell were being
 * given the full button chrome — border, surface, a 32px box — because the base
 * rule above matched .btn without exempting .btn-link. Two outlined boxes per
 * row in a dense table is the worst of both: heavy enough to compete with the
 * data, small enough to be a poor target.
 *
 * These are buttons for the right reasons (they act, they are keyboard
 * reachable, they can be disabled) and look like what they are: text. */
.btn-link, button.link {
    display: inline;
    border: none;
    background: none;
    padding: 0;
    min-height: 0;
    font: inherit;
    font-size: var(--font-size-control);
    font-weight: 500;
    line-height: inherit;
    color: var(--color-link);
    text-decoration: none;
    cursor: pointer;
}


.btn-link:hover, button.link:hover {
    background: none;
    color: var(--color-link-hover);
    text-decoration: underline;
}


.btn-link:focus-visible, button.link:focus-visible {
    outline: none;
    border-radius: var(--radius);
    outline: var(--focus-ring-w) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}


/* Destructive text actions carry the danger colour, and only underline on
   hover like their neighbours — no box, no fill, so a Remove sitting beside an
   Edit reads as the same kind of thing with a different consequence. */
.btn-link.text-danger, button.link.danger { color: var(--color-danger); }

.btn-link.text-danger:hover, button.link.danger:hover { color: var(--color-danger); }


/* Row actions sit apart without utility classes doing the spacing. */
td .btn-link + .btn-link, td button.link + button.link,
th .btn-link + .btn-link { margin-left: 1rem; }


/* --- Icon actions ----------------------------------------------------------------
 * The same row action as .btn-link, drawn rather than spelled. Use it where the
 * action is one of a small, repeating set the operator learns once — edit and
 * delete on every row — and the label is then just noise down the column.
 *
 * Icons are INLINE SVG, not a font or a sprite: no extra request, no CDN, and
 * stroke: currentColor means one rule below colours every icon on the platform.
 *
 * ALWAYS give it an aria-label AND a title. An icon-only control is invisible to
 * a screen reader and ambiguous to anyone who has not learned it yet; the title
 * is what makes a first encounter survivable.
 *
 * The 28px box is deliberate — the glyph is 16px, but the target is not. */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}


/* An ICON is sometimes an anchor — a download has to be a real GET, and the
   browser already knows how to save one. It must not then pick up link ink or a
   link's underline: the affordance is the glyph and its hover, exactly as it is
   on the <button> beside it. */
a.icon-btn, a.icon-btn:hover, a.icon-btn:focus { text-decoration: none; }

a.icon-btn { color: var(--color-text-muted); }


.icon-btn:hover { background: var(--color-surface-3); color: var(--color-action-ink); }


.icon-btn.danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }


.icon-btn:disabled { cursor: not-allowed; background: none; color: var(--color-disabled); }


.icon-btn:focus-visible { outline: var(--focus-ring-w) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }


.icon-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* A LARGER ICON, for a glyph that has to be read rather than recognised.
   The 16px default is right for edit and remove, which repeat on every row and
   are learned once. It was too small for the labor guide's Suggest bulb: the
   rays and the base collapsed into a smudge and the operator could not tell
   what the control did. This is the same button in a 36px box with a 24px
   glyph — still an icon, just legible. Use it sparingly; a table of 36px
   buttons is a table of buttons again.

   It is also DARKER than the 16px icon. Asbestos is the right weight for a
   glyph that repeats down a column and is learned once; on a glyph the
   operator has to actually read, it made the thing look switched off. This
   one takes the body ink. */
.icon-btn--lg { width: 36px; height: 36px; color: var(--color-text); }

/* 26px, and a LIGHTER stroke than the 16px icon. A glyph with internal detail
   — a bulb with rays over it and a banded base under it — lives or dies on the
   gaps between its parts, and a 1.6 stroke swallows a 2-unit gap whole at this
   size: the rays weld to the glass and the base bands weld to each other. 1.4
   keeps them open. */
.icon-btn--lg svg { width: 26px; height: 26px; stroke-width: 1.4; }


/* Part of a glyph that is inside the thing rather than the outline of it — a
   bulb's filament, say. Drawn in the same ink at a lower weight, so it reads
   as detail and does not compete with the shape that carries the meaning. */
.icon-btn svg .glyph-secondary { opacity: .5; }


td .icon-btn + .icon-btn { margin-left: .125rem; }


/* A BARE <button> IN A TABLE CELL IS A ROW ACTION, so it is text by default.
 *
 * Stated as a rule rather than fixed per screen. ACH had to have three
 * Downloads and a Remove corrected one at a time because each page decided for
 * itself; Warranty carries Edit, Delete, Rename, Remove, Suggest and Clear in
 * cells, all of them boxed. A rule fixes the ones nobody has looked at yet.
 *
 * The escape hatch is ANY declared variant, not a hand-written list of four.
 * The list was the bug: .btn-outline-danger is not on it, so a delete button
 * in a table cell lost its box and rendered as bare red text — and so would
 * every variant nobody thought to add. A button that carries a btn-* class has
 * already said what it is; only an UNCLASSED button is a row action. */
td > button:not([class*="btn-"]):not(.primary):not(.btn):not(.icon-btn),
td > form > button:not([class*="btn-"]):not(.primary):not(.btn):not(.icon-btn),
td > span > button:not([class*="btn-"]):not(.primary):not(.btn):not(.icon-btn) {
    display: inline;
    border: none;
    background: none;
    padding: 0;
    min-height: 0;
    font-size: var(--font-size-control);
    font-weight: 500;
    line-height: inherit;
    color: var(--color-link);
    text-decoration: none;
}


td > button:not([class*="btn-"]):not(.primary):not(.btn):not(.icon-btn):hover,
td > form > button:not([class*="btn-"]):not(.primary):not(.btn):not(.icon-btn):hover,
td > span > button:not([class*="btn-"]):not(.primary):not(.btn):not(.icon-btn):hover {
    background: none;
    color: var(--color-link-hover);
    text-decoration: underline;
}


/* Two text actions in a cell need air between them, whatever they are called. */
td > button + button, td > button + a, td > a + button { margin-left: .875rem; }


/* The accent variants. .primary is Warranty's, .btn-primary is Bootstrap's;
   they are the same button.

   SPECIFICITY MATTERS HERE, AND IT BIT TWICE.
   The base rule above is `button:not(.btn-link):not(.link)`. :not() contributes
   its argument's specificity, so that scores 0,2,1 — one element and two
   classes. A plain `.btn-primary` is 0,1,0 and loses; `.btn.btn-primary` is
   0,2,0 and STILL loses, because the base carries the element component too.
   Filled buttons rendered white both times.
   Hence the element is named here as well. Keep the class-only variants for
   `<a class="btn btn-primary">`, which the element rule never matches. */
button.primary,
.btn-primary,
input[type="submit"] {
    background: var(--color-action);
    border-color: var(--color-action-edge);
    color: var(--color-action-fg);
}


button.primary:hover:not(:disabled),
.btn-primary:hover,
input[type="submit"]:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-action-hover-fg);
}


/* Bare inputs match .form-control without needing the class. */
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    font-family: inherit;
    font-size: var(--font-size-control);
    padding: var(--control-pad-y) var(--control-pad-x-tight);
    min-height: var(--control-h);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}


/* A NATIVE FIELD HOVERS LIKE A FLUENT ONE: it fills with --color-field-hover-bg
   and the border stays as it is at rest — the line never changes, in any state
   (see atlas-fluent.css). Without this the two halves of the platform disagreed
   on whether a field answers the pointer at all. Disabled and read-only are
   excluded — an inert field must not look live — and so is the field you are
   in, which keeps the active fill. */
/* :where() holds the state exclusions at zero specificity, so a bar control
   (.company-dropdown:hover, 0,2,0) keeps its own dark hover. The input line
   repeats the five type :not()s of the resting rule above (0,5,1) — without
   them the resting surface outranked the hover (measured on dev: no fill). */
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):where(:not(:disabled, [readonly], :focus)):hover,
textarea:where(:not(:disabled, [readonly], :focus)):hover,
select:where(:not(:disabled, :focus)):hover,
.form-control:where(:not(:disabled, [readonly], :focus)):hover,
.form-select:where(:not(:disabled, :focus)):hover {
    background-color: var(--color-field-hover-bg);
}

/* THE FIELD YOU ARE IN KEEPS THE ACTIVE FILL. atlas-components.css states it for
   every native field, but its input selector is (0,2,1) and the resting rule
   above is (0,5,1), so in the Bootstrap tools a focused native input stayed
   white (measured on Customer Statements' As of date). Same :not()s, plus
   :focus. select and textarea are not affected: their resting rule is (0,0,1). */
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus {
    background-color: var(--color-field-active-bg);
}


input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--color-action-edge);
    outline: var(--focus-ring-w) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}


/* The file picker's own button is a shadow element; ::file-selector-button is
   the only handle on it, and without this it stays the browser's grey default
   beside a styled Import button. */
input[type="file"] {
    font-size: var(--font-size-control);
    color: var(--color-text-muted);
}


/* As a .form-control the outer box supplies the height, so the shadow button
   must fill it rather than sit inside its padding — otherwise the control is
   34px of box around a 34px button. */
/* A file input is ONE LINE BOX: the shadow button is an inline-block and the
   filename is text beside it. Laying it out with flex cropped the button and
   left "No file chosen" riding high. So the control states the line height and
   the button is given an explicit height to match — no flex, no guessing. */
input[type="file"].form-control {
    padding: 0;
    line-height: calc(var(--control-h) - 2px);
}


/* THE FILE BUTTON IS AN ACTION, SO IT TAKES THE ACCENT.
   It had the neutral treatment, which left it the only grey control on a
   screen where every other button is green. On ACH's logo field it is not even
   secondary: <InputFile> uploads on change, so "Choose File" IS the action —
   there is nothing else to press. */
input[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: var(--font-size-control);
    font-weight: 500;
    /* The pseudo-element inherits neither line-height nor box-sizing, so both
       are stated — and the height is explicit rather than left to padding plus
       a line-height it never inherited. That is what cropped it. */
    box-sizing: border-box;
    height: var(--control-h);
    line-height: calc(var(--control-h) - 2px);
    padding: 0 var(--control-pad-x);
    vertical-align: top;
    /* ALL FOUR MARGINS. Chrome ships the shadow button with
       margin: -6px 12px -6px -12px so it can hug the input's own padding — and
       with the padding removed those negatives pulled the button up out of the
       field and off its left edge. That was the cropped top, not the height. */
    margin: 0 var(--space-4) 0 0;
    border: 1px solid var(--color-action-edge);
    border-radius: var(--radius-sm);
    background: var(--color-action);
    color: var(--color-action-fg);
    cursor: pointer;
}


/* ONE SELECTOR PER RULE, not a comma list: a list is atomic, so a browser that
   rejects one selector in it drops the whole rule — which is why the button
   kept its rest colour while its label flipped. A pseudo-element is also out of
   reach of the blanket hover-label rule, so each states its own. */
input[type="file"]:hover::file-selector-button {
    background-color: var(--color-action-hover) !important;
    border-color: var(--color-action-hover);
    color: var(--color-action-hover-fg);
}


input[type="file"]::file-selector-button:hover {
    background-color: var(--color-action-hover) !important;
    border-color: var(--color-action-hover);
    color: var(--color-action-hover-fg);
}


/* As a .form-control the outer box already draws the border and supplies the
   34px, so the shadow button fills it instead of adding a second box. AFTER
   the rule above, not before it — the two score the same and order decides. */
input[type="file"].form-control:hover::file-selector-button {
    background-color: var(--color-action-hover) !important;
    border-right-color: var(--color-action-hover);
    color: var(--color-action-hover-fg);
}


input[type="file"].form-control::file-selector-button:hover {
    background-color: var(--color-action-hover) !important;
    border-right-color: var(--color-action-hover);
    color: var(--color-action-hover-fg);
}


input[type="file"].form-control::file-selector-button {
    height: calc(var(--control-h) - 2px);
    line-height: calc(var(--control-h) - 2px);
    margin: 0 var(--space-4) 0 0;
    border-width: 0;
    border-right: 1px solid var(--color-action-edge);
    border-radius: var(--radius) var(--radius) var(--radius) 0 0 var(--radius) var(--radius) var(--radius);
}


/* The dark bar's own controls opt out: they sit on #1f2937, not on a surface. */
/* A select in the dark bar opens a popup that Chrome builds from the control.
   Without this it is a dark list with a system-blue highlight — the one list on
   the platform that does not match the others. */
.app-header select, .header-inner select, .company-dropdown { color-scheme: light; }


.app-header button, .app-header select, .app-header input,
.header-inner button, .header-inner select, .header-inner input,
.company-dropdown {
    background: var(--color-shell-control-bg);
    border-color: var(--color-shell-field-border);
    color: var(--color-shell-fg);
    min-height: 0;
}


/* --- Buttons ------------------------------------------------------------------ */
/* Variants only. Shape, size and transition are set once in the control layer
   above; restating them here is how the two blocks drift apart.

   Every selector below is written to beat `.btn:not(.btn-link)` (0,2,0). A bare
   `.btn-danger` scores 0,1,0 and would silently lose. */

.btn:focus, .btn:focus-visible, .btn:active:focus {
    outline: var(--focus-ring-w) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}


.btn-primary:active, .btn-primary:focus {
    background-color: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-action-hover-fg);
}


/* Secondary is the accent OUTLINED, not a grey box. It still recedes against a
   filled button beside it, and it introduces no third colour. */
/* THERE IS NO SECONDARY BUTTON. Bootstrap ships .btn-secondary and the whole
   .btn-outline-* family; the platform used to redefine them as a fill-less box,
   which is the same thing as having two buttons — and every tool duly copied it.
   They now resolve to the one button: Clouds, Silver edge, Midnight ink, from
   the .btn rule above. A quiet action is .btn-link, which is text. */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-light,
.btn-outline-dark {
    background-color: var(--color-action);
    border-color: var(--color-action-edge);
    color: var(--color-action-fg);
    box-shadow: var(--shadow-sm);
}


.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover {
    background-color: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-action-hover-fg);
}


.btn-danger { background-color: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-dark); }

.btn-danger:hover { background-color: var(--color-danger-hover); border-color: var(--color-danger-hover); color: var(--color-on-dark); }


/* Bootstrap's outline variants, which were never themed and so kept rendering
   in its own greys. That is why Download sat next to Send remittances looking
   like it came from a different application: same size, different border,
   different text colour, none of them ours.

   Every non-destructive outline variant resolves to the accent outline defined
   above; only the destructive one keeps its own colour, and it fills on hover
   so the consequence is obvious before the click. */
.btn-outline-danger {
    background: var(--color-surface);
    border-color: var(--color-danger);
    color: var(--color-danger);
}


.btn-outline-danger:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-on-dark);
}


/* An <a class="btn"> is a button and must not also be underlined like a link. */
a.btn, a.btn:hover { text-decoration: none; }


/* Compact, for dense rows and toolbars. */
/* Compact tightens the HORIZONTAL padding only. Every button on the platform
   is one height — a 26px button beside a 34px field is what made a toolbar
   look assembled from parts. */
.btn-sm { padding: var(--control-pad-y) var(--control-pad-x-tight); min-height: var(--control-h); }

/* Bootstrap's modal/alert dismiss. It ships as a black SVG mask on transparent,
   which is the one control on a themed screen still drawn in pure black. */
.btn-close {
    filter: none;
    opacity: .6;
    background-color: transparent;
    border: none;
    min-height: 0;
    padding: var(--control-pad-y);
}


.btn-close:hover { opacity: 1; }


.btn-close:focus-visible { outline: var(--focus-ring-w) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }


/* Bootstrap's REMAINING contextual buttons. Unused today, but every one of them
   is a landmine: the moment somebody writes .btn-success the screen grows a
   sixth colour. They are folded onto the three kinds — the two that carry a
   real status keep it, the rest are simply the secondary. */
.btn-success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-on-dark);
}


.btn-success:hover {
    background: var(--color-success);
    border-color: var(--color-success);
    filter: brightness(.92);
    color: var(--color-on-dark);
}


.btn-warning, .btn-warning.text-dark {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-on-dark);
}


.btn-warning:hover {
    background: var(--color-warning-hover);
    border-color: var(--color-warning-hover);
    color: var(--color-on-dark);
}


.btn-info, .btn-light, .btn-dark,
.btn-outline-info, .btn-outline-light, .btn-outline-dark {
    background: var(--color-surface);
    border-color: var(--color-action-edge);
    color: var(--color-action-ink);
}


.btn-info:hover, .btn-light:hover, .btn-dark:hover,
.btn-outline-info:hover, .btn-outline-light:hover, .btn-outline-dark:hover {
    background: var(--color-action);
    border-color: var(--color-action-edge);
    color: var(--color-action-fg);
}


/* An accordion header is a button too, and Bootstrap gives it its own blue. */
.accordion-button {
    font-size: .875rem;
    padding: .25rem .75rem;
    min-height: var(--control-h);
    color: var(--color-text);
    background: var(--color-surface-2);
}


.accordion-button:not(.collapsed) {
    color: var(--color-action-ink);
    background: var(--color-accent-wash);
    box-shadow: none;
}


.accordion-button:focus {
    border-color: var(--color-action-edge);
    outline: var(--focus-ring-w) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}


/* THE STATES, NOT JUST THE VARIANTS. Bootstrap ships a pressed, active, shown
   and disabled colour for EVERY contextual button, and theming .btn-primary
   alone leaves all of them alive: .btn-primary.active is still #0a58ca,
   .btn-outline-secondary.show still fills grey. Thirty-two of them were live on
   two tools — invisible in a screenshot because nothing was pressed at the
   moment it was taken (ACT-70). */
:is(.btn-primary, .btn-secondary, .btn-info, .btn-light, .btn-dark,
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-info,
    .btn-outline-light, .btn-outline-dark):is(:active, .active, .show),
:is(.btn-primary, .btn-secondary, .btn-info, .btn-light, .btn-dark,
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-info,
    .btn-outline-light, .btn-outline-dark).dropdown-toggle.show,
.btn-check:checked + :is(.btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary) {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-action-hover-fg);
}


:is(.btn-danger, .btn-outline-danger):is(:active, .active, .show),
.btn-outline-danger.dropdown-toggle.show {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
    color: var(--color-on-dark);
}


:is(.btn-success, .btn-outline-success):is(:active, .active, .show),
.btn-outline-success.dropdown-toggle.show {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-on-dark);
}


:is(.btn-warning, .btn-outline-warning):is(:active, .active, .show),
.btn-outline-warning.dropdown-toggle.show {
    background: var(--color-warning-hover);
    border-color: var(--color-warning-hover);
    color: var(--color-on-dark);
}


/* .btn-lg and .btn-sm are the same height as everything else. A size variant
   changes horizontal padding, never the box. */
.btn-lg {
    font-size: var(--font-size-control);
    padding: var(--control-pad-y) var(--control-pad-x-wide);
    min-height: var(--control-h);
    border-radius: var(--radius-sm);
}


/* --- Disabled ------------------------------------------------------------------
 * LAST, deliberately. Disabled is a STATE and must beat every variant above it;
 * sitting next to the base rule it lost to .btn-primary / button.primary, which
 * score the same and come later, so a disabled Import still rendered accent. */
button:disabled,
.btn:disabled, .btn.disabled,
.btn-check:disabled + .btn,
input[type="button"]:disabled,
input[type="submit"]:disabled,
button:disabled:hover,
.btn:disabled:hover {
    background: var(--color-disabled);
    border-color: var(--color-disabled);
    color: var(--color-disabled-fg);
    cursor: not-allowed;
}


/* A text button has no box, so it cannot go Concrete-filled — it goes
   Concrete-lettered. */
.btn-link:disabled, button.link:disabled, td > button:disabled {
    background: none;
    border-color: transparent;
    color: var(--color-disabled);
}


button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible {
    outline: var(--focus-ring-w) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}



/* --- Alerts -------------------------------------------------------------------
 * Bootstrap's pastels — the cyan .alert-info above all — are the loudest thing
 * on a screen that is otherwise greyscale, and they date the product. Replaced
 * with a quiet surface and a coloured left rule, so status is legible without
 * the page shouting. Colour is never the only signal; the text still says what
 * happened. */
.alert {
    font-size: .875rem;
    padding: .625rem .875rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}


.alert-info    { border-left-color: var(--color-link); background: var(--color-surface); }

.alert-success { border-left-color: var(--color-success); background: var(--color-success-bg); color: var(--color-text); }

.alert-danger  { border-left-color: var(--color-danger);  background: var(--color-danger-bg);  color: var(--color-text); }

.alert-warning { border-left-color: var(--color-warning); background: var(--color-surface); }


/* ONE RED. Bootstrap paints inline <code> its own #d63384 — a light pink that is
   not in this palette and reads as a second, louder alert colour beside the
   Pomegranate the warnings use. Every tool that takes Bootstrap inherited it;
   Warranty had already corrected it in its own app.css, which is the per-tool
   patching this file exists to stop. Stated here so the fix reaches all of them.

   <code> only — a .code CLASS is a tool's own token chip and is unaffected. */
code {
    color: var(--color-danger);
}


/* --- Tables --------------------------------------------------------------------
 * STATEMENTS V2'S .data-table IS THE REFERENCE, and these are its numbers:
 * 12px body, 10.5px uppercase headings, 2px/4px cells. ACH and Warranty were
 * running 13px text in 6px/8px cells with 11px headings — a third more vertical
 * space per row for the same information. These tools sit open beside Softbase
 * all day; density is the point.
 *
 * ZEBRA IS ON BY DEFAULT, not behind Bootstrap's .table-striped. Vendor ACH had
 * no alternating rows purely because its markup omitted that class, which is
 * exactly the kind of per-screen decision this file exists to remove. */
/* A TABLE IS AS WIDE AS ITS CONTENT, not as wide as the monitor.
 *
 * width: 100% stretched every data table to the content column, and the browser
 * spent the surplus by padding the gaps between columns. On a 1920px screen the
 * TV Dashboards per-slot table put ~200px of nothing between "1920x1032" and
 * "Comfortable"; on an ultra-wide it is worse, and the eye has to travel the
 * whole width to carry a row's value back to its own row. Density over
 * whitespace is the house rule (style guide §5.6) and this was the one place
 * the theme worked against it.
 *
 * max-width keeps it honest: a wide table still stops at its container and
 * scrolls inside .table-responsive rather than overflowing the page.
 *
 * A table that genuinely wants the full width says so locally — a column set to
 * width: 100%, or width: 100% on that one table. */
.table,
table.picker {
    width: auto;
    max-width: 100%;
    /* width: auto ALONE DOES NOT STOP THE STRETCH. .main-content-area is a flex
       column, and a block child of one gets align-items: stretch by default — so
       the table filled the column's full width whatever its own width said, and
       the ACH file list still spanned 1536px of a 1600px column with 300px
       columns holding a date. align-self: start hands it back to its content.

       On .table-responsive too: a table inside that wrapper is not the flex
       child, the wrapper is, and stretching the wrapper stretches the table. */
    align-self: start;
    border-collapse: collapse;
    font-size: 12px;
    color: var(--color-text);
    background: var(--color-surface);
    margin-bottom: 0;
    --bs-table-bg: var(--color-surface);
    --bs-table-border-color: var(--color-border);
    --bs-table-striped-bg: var(--color-surface-3);
    --bs-table-hover-bg: var(--color-row-hover);
}


.table-responsive {
    align-self: start;
    max-width: 100%;
}


/* PROSE TAKES THE COLUMN. There is no second cap on top of it.
 *
 * The column is already bounded — 1600px, or 1200 on a form-heavy screen — and
 * centred. Capping paragraphs again inside that is capping twice: it wastes the
 * width that was deliberately kept, and it makes the reader scroll for text that
 * would have fitted. The tools are dense working screens sitting open beside
 * Softbase, not an article.
 *
 * This rule exists to OVERRIDE the per-class caps the tools had grown — .hint at
 * 78ch, .reasoning at 80ch — which is what produced an intro paragraph at 572px
 * beside a warning at 1521px on the same Warranty screen. One rule, and it is
 * the column. A page that genuinely wants a narrower measure for one block sets
 * it on that block and says why. */
.main-content-area p,
.page--narrow p,
.main-content-area .hint,
.page--narrow .hint {
    max-width: none;
}


/* FORM-HEAVY SCREENS CAP AT 1200px (§5.8). 1600 is right for a screen that is
   mostly data; a settings page or a filter panel at 1600 puts a label and its
   control half a metre apart, which is the same complaint the 1600 cap fixed one
   level up. Applied per page, because only the page knows which it is:
   put .page--narrow on the page's own root element.

   align-self: start because .main-content-area is a flex column and its children
   stretch by default — a max-width alone would not hold. */
.page--narrow {
    align-self: start;
    width: 100%;
    max-width: var(--content-max-w-narrow);
}


.table > thead > tr > th,
table.picker > thead > tr > th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    padding: 5px 8px;
}


/* A form laid out as a table. Warranty's Manufacturer, Coverage type, Truck
   classes and Document are <tr><td>label</td><td>control</td></tr>, and the
   table is width:100%, so the browser gave the label column its share — the
   control ended up 450px from its own label and looked unrelated to it.
   The discriminator is structural, not a class somebody has to remember: a
   picker with no <thead> is a field list, not a data table. The label column
   shrinks to its text and the control follows 2em later, on every such screen
   at once. */
table.picker:not(:has(thead)) > tbody > tr > td:first-child,
.table:not(:has(thead)) > tbody > tr > td:first-child {
    width: 1px;
    white-space: nowrap;
    padding-right: 1.75em;
}


/* ...and it is a FORM, so it takes no surface, no zebra and no row rules. A
   white strip of form controls sitting on a washed section reads as a panel
   that lost its heading. It matches whatever it is standing on. */
table.picker:not(:has(thead)),
.table:not(:has(thead)) {
    background: transparent;
    --bs-table-bg: transparent;
}


/* :nth-child(n) matches every row and buys the one point of specificity that
   puts this ahead of the zebra rule, which would otherwise tint the form. */
table.picker:not(:has(thead)) > tbody > tr:nth-child(n) > td,
.table:not(:has(thead)) > tbody > tr:nth-child(n) > td {
    background: transparent;
    border-top: none;
}


.table > tbody > tr > td,
table.picker > tbody > tr > td {
    padding: 4px 8px;
    line-height: 1.3;
    vertical-align: middle;
    border-top: 1px solid var(--color-border);
    border-bottom: none;
    border-color: var(--color-border);
}


/* The outer edges get the breathing room the inner cells do not. */
.table > thead > tr > th:first-child, .table > tbody > tr > td:first-child,
table.picker > thead > tr > th:first-child, table.picker > tbody > tr > td:first-child { padding-left: 12px; }

.table > thead > tr > th:last-child, .table > tbody > tr > td:last-child,
/* The gutter a cell keeps on its right belongs to the column that FOLLOWS it.
   The last cell has no follower, so 12px there is not spacing between anything
   — it is a margin pinned inside the table, and it pushed a right-aligned
   control (Warranty's close-the-suggestions cross) a visible step away from
   the edge the eye goes to. It keeps the ordinary cell gutter and no more. */
table.picker > thead > tr > th:last-child, table.picker > tbody > tr > td:last-child { padding-right: var(--space-3); }


/* A HINT THAT FOLLOWS SOMETHING IN A CELL GOES ON ITS OWN LINE.
   A .hint is a span, Razor strips the whitespace between two elements, and the
   result was 2019-07-21CustomerWarrantyDate and 2026-09-15 01:37work order
   changed — a date welded to the label that qualifies it, which reads as one
   corrupt string. The hint is the secondary line of the cell, so it is drawn as
   one. Scoped to a direct child of the cell: a hint inside a list item or a
   panel is part of that line and stays inline. */
table.picker > tbody > tr > td > .hint { display: block; }


/* A COLUMN OF ICONS CENTRES ITS ICONS.
   A glyph is a symbol in a box, not a word with a left edge, so left-aligning
   one leaves it adrift against a header that is wider than it is. */
table.picker > thead > tr > th.col-icon,
table.picker > tbody > tr > td.col-icon { text-align: center; }


/* DRAG TO REORDER.
   Grab the handle, drop on the row you want to sit at. HTML5 drag and drop, no
   library and no interop; the page keeps the order in its own list and only
   commits on the drop, so an abandoned drag changes nothing. Lifted here out of
   tvscreens, which had it first — a second screen that reorders rows should not
   have to reinvent what a drag looks like. */
.col-drag { width: 2rem; }


.drag-handle {
    display: inline-block;
    color: var(--color-text-subtle);
    cursor: grab;
    line-height: 1;
    user-select: none;
}


.drag-handle:active { cursor: grabbing; }


tr.is-dragging { opacity: 0.45; }


/* Where it will land. A top rule rather than a fill: the row underneath still
   has to be readable while the dragged row hovers over it. */
tr.is-drop-target > td { box-shadow: inset 0 2px 0 0 var(--color-action-ink); }


.table > tbody > tr:first-child > td,
table.picker > tbody > tr:first-child > td { border-top: none; }


/* ON THE CELLS, NOT THE ROW. Bootstrap 5 paints every table background at cell
   level — `.table > :not(caption) > * > * { background-color: var(--bs-table-bg) }`
   — so a background set on the <tr> sits behind each <td> and never appears.
   That is why Vendor ACH still had no stripes after zebra was "turned on". */
/* The zebra starts on the FIRST row, not the second. The head is the darker
   band, so a white row directly under it read as a gap in the table rather than
   as its first row. Odd rows tinted, even rows the surface. */
.table > tbody > tr:nth-child(odd) > td,
.table > tbody > tr:nth-child(odd) > th,
table.picker > tbody > tr:nth-child(odd) > td { background: var(--color-surface-3); }


.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th,
table.picker > tbody > tr:hover > td { background: var(--color-row-hover); }


.table > tbody > tr.selected > td, .table > tbody > tr.is-selected > td,
table.picker > tbody > tr.selected > td { background: var(--color-row-selected); }


.table > tfoot > tr > th,
.table > tfoot > tr > td { font-size: 12px; padding: 4px; border-color: var(--color-border); }


/* .table-sm is already the density above, so it changes nothing. Named so a
   screen that carries the class does not silently get something else. */
.table-sm > :not(caption) > * > * { padding: 4px 8px; }





/* A sortable column header. The arrow sits in the box at all times so nothing
   reflows when a column is sorted — it is simply invisible until hover or until
   that column is the sorted one. */
.table > thead > tr > th.sortable,
table.picker > thead > tr > th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}


.table > thead > tr > th.sortable:hover,
table.picker > thead > tr > th.sortable:hover { color: var(--color-text); }


.table > thead > tr > th.sortable::after,
table.picker > thead > tr > th.sortable::after {
    content: "↕";
    margin-left: .35em;
    opacity: 0;
}


.table > thead > tr > th.sortable:hover::after,
table.picker > thead > tr > th.sortable:hover::after { opacity: .45; }


.table > thead > tr > th.sortable.asc::after,
table.picker > thead > tr > th.sortable.asc::after { content: "↑"; opacity: 1; color: var(--color-action-ink); }


.table > thead > tr > th.sortable.desc::after,
table.picker > thead > tr > th.sortable.desc::after { content: "↓"; opacity: 1; color: var(--color-action-ink); }


/* --- Forms ---------------------------------------------------------------------- */
.form-label {
    font-size: var(--font-size-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    margin-bottom: .25rem;
}


.form-control, .form-select {
    font-size: var(--font-size-control);
    padding: var(--control-pad-y) var(--control-pad-x-tight);
    min-height: var(--control-h);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
}


/* THE SAME ACTIVE STATE AS EVERY OTHER FIELD — see atlas-components.css: the
   fill changes, the line never does.
   These selectors have to be written out. This sheet and Bootstrap both reach
   .form-select at (0,2,0) and a bare `select:focus` in atlas-components.css does
   not, so Bootstrap's own focus styling won on the three apps that load it;
   box-shadow: none is what clears its blue glow and border-color pins the line
   to the colour it has at rest.
   .form-check-input keeps the outline ring: a tick is not a field, it has no
   fill of its own to change. */
.form-control:focus, .form-select:focus {
    background: var(--color-field-active-bg);
    border-color: var(--color-border-strong);
    outline: none;
    box-shadow: none;
}

.form-check-input:focus {
    outline: var(--focus-ring-w) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}


.form-control::placeholder { color: var(--color-text-subtle); }

.form-control:disabled, .form-select:disabled { background-color: var(--color-surface-2); color: var(--color-text-muted); }

/* Ticks and radios take --color-check, not the action colour: they are a state
   of the row they sit in, not a button. accent-color covers every native one at
   once, including the ones no stylesheet reaches. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-check); }


/* And they answer the pointer the way fluent-checkbox does — the stroke goes to
   --color-check. A native tick had no hover at all while the Fluent one did. */
/* The platform hover; a ticked box keeps its --color-check edge. */
input[type="checkbox"]:hover:not(:disabled):not(:checked),
input[type="radio"]:hover:not(:disabled):not(:checked),
.form-check-input:hover:not(:disabled):not(:checked) {
    border-color: var(--color-action-hover);
}


.form-check-input:checked { background-color: var(--color-check); border-color: var(--color-check); }


/* --- Dropdown lists ------------------------------------------------------------
 * A list is a list. Every dropdown in every tool uses the left nav's colours:
 * the page surface at rest, Clouds lifted on hover, Clouds when chosen. NO BLUE
 * — the browser's own highlight is a system blue that belongs to no palette,
 * and it has to be overridden on the option itself to be beaten.
 *
 * A CLOSED native select draws its popup through the OS on Windows, so this
 * reaches the open list, multi-selects, size>1 lists and every list a tool
 * draws itself. */
option,
select option {
    background-color: var(--color-surface);
    color: var(--color-text);
}


option:hover,
option:focus,
select option:hover,
select[multiple] option:hover,
select[size] option:hover {
    background-color: var(--color-surface-3);
    color: var(--color-text);
}


option:checked,
option[selected],
select option:checked,
select[multiple] option:checked,
select[size] option:checked {
    /* !important: Chrome paints the chosen row with the system highlight and
       will not give it up otherwise. */
    background-color: var(--color-surface-2) !important;
    background-image: linear-gradient(var(--color-surface-2), var(--color-surface-2)) !important;
    color: var(--color-text-strong) !important;
    font-weight: 600;
}


/* Bootstrap's OWN lists, which ship a #0d6efd row and were the "regular blue"
   left in the dropdowns. Its dropdown, list group and pager each read their own
   scoped variables, so the variables are repointed AND the rules are stated —
   a component that ignores the variable still lands on the palette. Same three
   colours as the native list above: surface at rest, grey on hover, Clouds when
   chosen. */
.dropdown-menu {
    --bs-dropdown-bg: var(--color-surface);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-bg: var(--color-surface-3);
    --bs-dropdown-link-hover-color: var(--color-text-strong);
    --bs-dropdown-link-active-bg: var(--color-surface-2);
    --bs-dropdown-link-active-color: var(--color-text-strong);
    --bs-dropdown-border-color: var(--color-border);
}


.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-surface-3);
    color: var(--color-text-strong);
}


.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-surface-2);
    color: var(--color-text-strong);
    font-weight: 600;
}


.list-group {
    --bs-list-group-action-hover-bg: var(--color-surface-3);
    --bs-list-group-active-bg: var(--color-surface-2);
    --bs-list-group-active-color: var(--color-text-strong);
    --bs-list-group-active-border-color: var(--color-border);
}


.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--color-surface-3);
    color: var(--color-text-strong);
}


.list-group-item.active {
    background-color: var(--color-surface-2);
    border-color: var(--color-border);
    color: var(--color-text-strong);
    font-weight: 600;
}


/* The pager and pill navs draw the same blue for the current page or tab. */
.page-link {
    color: var(--color-action-ink);
    background-color: var(--color-surface);
    border-color: var(--color-border);
}


.page-link:hover { background-color: var(--color-surface-3); color: var(--color-text-strong); }


.page-item.active .page-link {
    background-color: var(--color-surface-2);
    border-color: var(--color-border-strong);
    color: var(--color-text-strong);
    font-weight: 600;
}


.nav-pills {
    --bs-nav-pills-link-active-bg: var(--color-surface-2);
    --bs-nav-pills-link-active-color: var(--color-text-strong);
}


.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-surface-2);
    color: var(--color-text-strong);
}


/* --- Sweep: the rest of what the tools actually use ------------------------------
 * Found by enumerating every class in the markup and diffing it against this
 * file, rather than by waiting for each one to be spotted on a screenshot.
 * Anything Bootstrap ships and a tool uses has to be answered here, or its
 * default leaks through and that one control looks like a different product. */

/* Badges. Bootstrap's .bg-warning yellow with .text-dark on it is the loudest
   thing on a grey page. Same quiet treatment as the alerts: a tint, a matching
   rule, and the text carries the meaning. */
.badge {
    display: inline-block;
    padding: .15rem .45rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
}


/* !important ON THE BACKGROUND, AND ONLY THERE.
   Bootstrap's colour utilities are written `.bg-success { background-color:
   var(--bs-success) !important }`. These rules load after it and still lost, so
   the four badges below took the TINT from here and the FILL from Bootstrap:
   .bg-primary came out #34495E behind #2C3E50 text and .bg-danger #DC3545 behind
   #C0392B — dark ink on a dark fill, unreadable, and Bootstrap's red is not the
   platform's one red. Measuring the badges is what showed it; they had read as
   "coloured, therefore fine" on every screenshot. Nothing else here needs the
   flag: border and colour are not utilities. */
.badge.bg-warning, .badge.bg-warning.text-dark {
    background: var(--color-surface-2) !important;
    border-color: var(--color-warning);
    color: var(--color-warning);
}


.badge.bg-success { background: var(--color-success-bg) !important; border-color: var(--color-success); color: var(--color-success); }

.badge.bg-danger  { background: var(--color-danger-bg) !important;  border-color: var(--color-danger);  color: var(--color-danger); }

.badge.bg-primary { background: var(--color-accent-wash) !important; border-color: var(--color-action-edge); color: var(--color-action-ink); }


/* Small controls line up with .btn-sm so a compact row is compact throughout
   rather than a 26px button beside a 34px field. */
.form-control-sm, .form-select-sm {
    padding: var(--control-pad-y) var(--control-pad-x-tight);
    min-height: var(--control-h);
}


/* Almost square, the same as fluent-checkbox — Bootstrap rounds a tick at .25em
   and the native ones in the Blazor tools were a different corner from the
   Fluent ones two screens away. A radio keeps its circle. */
.form-check-input {
    border-color: var(--color-border-strong);
    min-height: 0;
    border-radius: var(--radius-tight);
}

.form-check-input[type="radio"] { border-radius: 50%; }


.form-check-label { font-size: var(--font-size-control); color: var(--color-text); }


/* Bootstrap's text utilities, repointed. Kept as utilities because the markup
   already uses them; a tool should not have to learn new names to get the
   platform's colours. */
.text-danger  { color: var(--color-danger) !important; }

.text-success { color: var(--color-success) !important; }

.text-dark    { color: var(--color-text) !important; }

.small, small { font-size: .75rem; }


/* --- Shared components -----------------------------------------------------------
 * Available to any tool. Nothing is required to use them, but a tool that needs
 * one of these takes it from here rather than inventing its own. */

/* An empty result is a state, not an error and not news. Quiet, and it does not
   use a colour that means something elsewhere. */
.empty-state {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: .875rem;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius);
}


.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}


.surface {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}


.text-muted { color: var(--color-text-muted) !important; }


.num { text-align: right; font-variant-numeric: tabular-nums; }


/* A wide table scrolls inside its own box. The document is overflow-x: hidden,
   so a table that spills past its container loses its right-hand columns
   outright rather than merely looking awkward. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }



/* --- The hover label -------------------------------------------------------- atlas-hover-label
 * A button fills with Peter River on hover, and Midnight Blue on Peter River is
 * 3.9:1 — so the label flips to white with the fill. Stated once, here, rather
 * than in each of the twenty-odd hover rules that set a background and would
 * each have to remember: forgetting it is invisible until somebody hovers.
 *
 * Text buttons opt out — they have no fill to sit on. */
:is(button, .btn, input[type="button"], input[type="submit"]):hover:not(:disabled):not(.btn-link):not(.icon-btn):not(.btn-close):not(.cr-link):not(.subs__link):not(.btn--ghost):not(.btn--icon) {
    color: var(--color-action-hover-fg);
}


/* --- The controls the browser draws for us -------------------------------------
 * Everything in this block is a control with a USER-AGENT-drawn part: a calendar
 * button, a spinner, a resize grip, a disclosure triangle, a clear button. Each
 * one was shipping in the browser's default grey next to controls that had been
 * themed, and each one was found by inventory rather than by somebody
 * photographing it — which is the only reason it is one block and not six
 * rounds of fixes.
 *
 * The limit, stated once: a date or time field's POPUP is drawn by the operating
 * system, exactly like a closed select's. CSS reaches the field and its icon and
 * stops there. Replacing those popups means a picker component, which is a
 * bigger piece of work than this block. */

/* The field itself, so a date sits at the same height and weight as a text box. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="number"],
input[type="search"] {
    min-height: var(--control-h);
    padding: var(--control-pad-y) var(--control-pad-x-tight);
    font-family: inherit;
    font-size: var(--font-size-control);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
}


/* Chrome draws the calendar and clock buttons as a dark glyph on transparent.
   The filter tints it to the action ink rather than leaving one black mark on a
   themed row; it is a filter and not a colour because the glyph is an image. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .65;
    /* Midnight Blue. Measured, not guessed: brightness(0) makes it black, then
       the hue/saturation pair lands on #2C3E50. */
    filter: brightness(0) saturate(100%) invert(19%) sepia(28%) saturate(900%) hue-rotate(169deg) brightness(94%) contrast(90%);
}


input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }


/* An empty date field shows mm/dd/yyyy in the UA's own grey. */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field { color: var(--color-text); }


input[type="date"]:invalid::-webkit-datetime-edit,
input[type="time"]:invalid::-webkit-datetime-edit { color: var(--color-text-subtle); }


/* Number spinners are kept — they are how people step a value — but they take
   the platform's ink instead of the UA's blue-grey, and they stop making the
   field taller than every other control. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: .6;
    height: calc(var(--control-h) - 4px);
    cursor: pointer;
}


input[type="number"]:hover::-webkit-inner-spin-button { opacity: 1; }


/* Firefox draws its own; the platform keeps one look. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

input[type="number"]:hover,
input[type="number"]:focus { -moz-appearance: number-input; }


/* The search clear button is a UA glyph in UA grey. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 12px; width: 12px;
    cursor: pointer;
    background: var(--color-text-muted);
    /* A cross, drawn rather than imported, so it needs no asset. */
    mask: linear-gradient(45deg, transparent 45%, #000 45%, #000 55%, transparent 55%),
          linear-gradient(-45deg, transparent 45%, #000 45%, #000 55%, transparent 55%);
    -webkit-mask: linear-gradient(45deg, transparent 45%, #000 45%, #000 55%, transparent 55%),
                  linear-gradient(-45deg, transparent 45%, #000 45%, #000 55%, transparent 55%);
}


input[type="search"]:hover::-webkit-search-cancel-button { background: var(--color-text-strong); }


/* A textarea is a field: same border, same ink, same type. It is the one control
   that may be taller than --control-h, and it resizes vertically only — a
   horizontal drag breaks every layout it sits in. */
textarea {
    font-family: inherit;
    font-size: var(--font-size-control);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: var(--control-pad-y) var(--control-pad-x-tight);
    resize: vertical;
}


textarea:focus-visible,
input[type="date"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="time"]:focus-visible,
input[type="month"]:focus-visible,
input[type="number"]:focus-visible,
input[type="search"]:focus-visible {
    outline: none;
    border-color: var(--color-action-hover);
    outline: var(--focus-ring-w) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}


textarea:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="number"]:disabled,
input[type="search"]:disabled {
    background: var(--color-surface-3);
    border-color: var(--color-disabled);
    color: var(--color-disabled-fg);
    cursor: not-allowed;
}


/* <details> ships a black triangle. One disclosure marker, in the ink, that
   turns — the same affordance the rest of the platform uses. */
details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--control-gap);
    color: var(--color-action-ink);
    font-size: var(--font-size-control);
}


details > summary::-webkit-details-marker { display: none; }


details > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0; height: 0;
    border-left: 4px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 120ms;
}


details[open] > summary::before { transform: rotate(90deg); }


details > summary:hover { color: var(--color-action-hover); }


details > summary:focus-visible {
    outline: var(--focus-ring-w) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
}


/* Ticks and radios, wherever they are: one accent, no UA blue. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-check); }


/* A native progress bar and meter are UA-drawn end to end. */
progress { accent-color: var(--color-action-hover); height: 6px; }



/* --- App bar controls ------------------------------------------------------------
 * MOVED OUT. Return to Tools, the user-menu caret, the bar's width and the
 * treatment of a button pinned over the bar now live in atlas-appbar.css.
 *
 * They were here, and this file goes only to the three tools that use Bootstrap
 * — so BIReports and Statements V2, which draw the same bar, never received a
 * single one of those fixes. Splitting the bar out of the Bootstrap repaint is
 * what makes "every tool has the same header" enforceable rather than a thing
 * somebody has to remember to copy. Do not restate them here. */


/* --- Reconnect notice ---------------------------------------------------------- atlas-reconnect
 * Blazor's own reconnect UI is a grey band across the top of the page reading
 * "Could not reconnect to the server. Reload the page to restore functionality."
 * — framework language for what is, almost always, a deploy that has just
 * replaced the app underneath you. It is replaced with the same toast the React
 * tools show for a new version: a dark pill at the foot of the page, one
 * sentence, one button.
 *
 * Blazor drives it entirely by CLASS on #components-reconnect-modal —
 * components-reconnect-show while it retries, -failed when a retry is possible,
 * -rejected when the circuit is gone for good — so each line and each button
 * declares the state it belongs to and the rules below reveal the right pair. */
#components-reconnect-modal.atlas-reconnect {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 4000;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px 10px 18px;
    background: var(--color-shell-bg);
    color: var(--color-on-dark, #fff);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
}


#components-reconnect-modal.atlas-reconnect.components-reconnect-show,
#components-reconnect-modal.atlas-reconnect.components-reconnect-failed,
#components-reconnect-modal.atlas-reconnect.components-reconnect-rejected {
    display: flex;
}


.atlas-reconnect [data-state] { display: none; }

.atlas-reconnect__msg { line-height: 1.3; }


.components-reconnect-show .atlas-reconnect__spinner,
.components-reconnect-show [data-state~='show'],
.components-reconnect-failed [data-state~='failed'],
.components-reconnect-rejected [data-state~='rejected'] { display: inline-flex; }


/* The spinner is the whole affordance while it is still trying — there is
   nothing for anyone to press yet. */
.atlas-reconnect__spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: var(--color-action);
    border-radius: 50%;
    animation: atlas-reconnect-spin 0.8s linear infinite;
}


@keyframes atlas-reconnect-spin { to { transform: rotate(360deg); } }


/* --- The Blazor calendar -------------------------------------------------- atlas-calendar
 * Two calendars ship on this platform and they did not match. The React tools
 * open Fluent's <fluent-calendar> web component, themed in atlas-fluent.css:
 * the chosen day is a filled square in the platform's steel blue and today is
 * underlined. Fluent's BLAZOR FluentDatePicker renders its own calendar as
 * ordinary markup instead — light DOM, class .fluent-calendar — so none of that
 * reached it and it kept the library's look: today drawn as a filled CIRCLE in
 * Fluent's own accent, which is the odd one out of the two.
 *
 * Same rules, same order of emphasis: the day you PICKED is the filled one, and
 * today is a marker under it. Filling today competes with the selection.
 */
.fluent-calendar .day {
    border-radius: var(--radius-sm);
    color: var(--color-text);
}


.fluent-calendar .day:hover:not(.disabled) {
    background: var(--color-surface-3);
    color: var(--color-text-strong);
}


.fluent-calendar .day.selected,
.fluent-calendar .day.selected:hover {
    background: var(--color-action-hover);
    color: var(--color-action-hover-fg);
    border-color: var(--color-action-hover);
    border-radius: var(--radius-sm);
    font-weight: 600;
}


/* Today is marked, not filled — and never a circle. */
.fluent-calendar .day.today:not(.selected) {
    background: none;
    color: var(--color-text-strong);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 -2px 0 var(--color-action-hover);
    font-weight: 600;
}


/* The library draws today's number in a round accent badge of its own. */
.fluent-calendar .day .date,
.fluent-calendar .day.today .date {
    background: none;
    color: inherit;
    border-radius: 0;
}


.fluent-calendar .day.inactive { color: var(--color-text-subtle); }


.fluent-calendar .day.disabled {
    color: var(--color-disabled);
    background: none;
    cursor: not-allowed;
}


.fluent-calendar .week-day {
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: var(--font-size-micro, 10px);
    letter-spacing: 0.04em;
}


.fluent-calendar .title,
.fluent-calendar .label {
    color: var(--color-text-strong);
    font-weight: 600;
}