.badge {
  font-size: 1rem;
}

/* Scoped to Feather placeholders. As a bare `i` selector this also hit every
   Font Awesome icon in the app -- the dropdown-arrow chevrons in base.html,
   for one -- and sized them at 50px. */
i[data-feather] {
  height: 50px;
}

.datatable-container .feather, h2 .feather, .list-group .feather, p .feather, .alert .feather,
.input-group-text .feather, .breadcrumb .feather, .card-footer .feather {
  width: 24px;
  height: 24px;
  margin: 0px 5px;
}

p .feather {
  margin: 0px;
}

/* Collapse toggles live on a region INSIDE the card header, not on the header
   itself, so that action buttons in the header are not descendants of the
   toggle.

   They have to be outside it. Bootstrap 5 registers its delegated data-api
   handlers with addEventListener(type, fn, isDelegated) -- that third argument
   is useCapture -- so the collapse handler fires on `document` during the
   CAPTURE phase, before the click ever reaches a nested button. An inline
   event.stopPropagation() runs in the bubble phase and is far too late. Worse,
   collapse.js does `if (event.target.tagName === 'A') event.preventDefault()`,
   so a nested <a> has its navigation cancelled outright: the card expands and
   the link never fires.

   Hence the descendant selector below rather than the attribute-on-header form
   this used to be. */
.card-header [data-bs-toggle='collapse'] {
  cursor: pointer;
  border-radius: var(--bs-border-radius-sm);
  margin: -0.35rem;
  padding: 0.35rem;
}

.card-header [data-bs-toggle='collapse']:hover {
  background-color: #e7f3ff;
}

/* Chevron rotation for card collapse toggles. SB Admin Pro does this for the
   sidenav via .sidenav-collapse-arrow but has no card-level equivalent. */
.collapse-indicator {
  transition: transform 0.15s ease-in-out;
}

[aria-expanded='true'] .collapse-indicator {
  transform: rotate(90deg);
}

/* The submitted/total bar in a period report card header. Sized here rather than
   inline so the markup carries no style attribute. */
.period-report-progress {
  height: 0.5rem;
  max-width: 14rem;
}

/* The taller version of the same bar, in the period roll-up card. */
.period-report-rollup-progress {
  height: 0.75rem;
}

/* Bootstrap separates list-group rows with `.list-group-item +
   .list-group-item { border-top: 0 }`, an adjacent-sibling rule -- and the
   collapse wrapper that holds a truncated group's hidden rows breaks that
   adjacency, so the first hidden row draws a second border once expanded. */
.period-report-more > .list-group-item:first-child {
  border-top: 0;
}

/* "Show all 8" / "Show fewer" on that group's toggle. Same [aria-expanded] hook
   as the card chevrons above, so no JavaScript is involved. */
.period-report-more-hide,
[aria-expanded='true'] > .period-report-more-show {
  display: none;
}

[aria-expanded='true'] > .period-report-more-hide {
  display: inline;
}

/* The quick-upload wait (page 02). open_tasks.html carried the same overlay as a
   style attribute on the element; here it is a class, so the markup stays clean
   and there is one place to change it. display is toggled to flex by
   quick-upload.js and by dropzone.js's data-drop-spinner hook. */
.quick-upload-spinner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.quick-upload-spinner .spinner-border {
  width: 4rem;
  height: 4rem;
}

.period-report-picker {
  width: 16.5rem;
}

.period-report-year {
  width: 7rem;
}

.period-report-quarter {
  width: 6rem;
}

/* The coverage-code filter on the payments page (04). Wider than the quarter
   select because a coverage group code is six characters. */
.period-report-coverage {
  width: 11rem;
}

.notification-unread {
  font-weight: bold;
  background-color: #f4f4f4;
}

.alert-heading .feather {
  height: 24px;
  width: 30px;
}

.highlight-drop-zone {
  /*background-color: red;*/
  /*color: white;*/
  font-weight: bold;
  border-width: 2px;
  border-style: dashed;
  border-color: black;
}

.highlight-hovered-drop-zone {
  background-color: #00ba94;
  color: white;
}

/* The drop-zone highlights above were written for a small alert banner, where
   bolding every word and flooding the box green is proportionate. Page 02's
   drop target is now the whole obligation card (see
   gf-obligation-list-component.html), and those two rules applied to a list of
   companies, statuses, badges and buttons make it unreadable -- solid #00ba94
   under a green "Submitted" badge is the worst of it.

   So a card-sized zone gets the same two signals at card scale: a dashed accent
   border while any file drag is in progress, and a tint plus a heavier border
   under the cursor. The banner rules are untouched, because pages 05 and 06
   still use them at the size they were drawn for. */
.card.highlight-drop-zone {
  font-weight: inherit;
  border-color: #00ba94;
}

.card.highlight-hovered-drop-zone {
  background-color: rgba(0, 186, 148, 0.08);
  color: inherit;
  border-color: #00ba94;
  border-width: 2px;
  border-style: dashed;
}

/* A year chip in the compact coverage card (gf-collection-coverage-component
   with compact=True). btn-sm padding puts roughly eight chips on a half-width
   card, so a fund with a decade on file reads two ragged rows; this fits the
   usual span on one or two even ones. The icon is what stays -- colour alone
   does not carry the filed/not-filed distinction. */
.coverage-year-chip.btn {
  padding: 0.2rem 0.4rem;
}

.coverage-year-chip .feather {
  height: 14px;
  width: 14px;
}

table .feather {
  height: 26px;
  width: 30px;
  margin: 0 5px;
}

.datahub_green {
  color: #00673f;
}

.datahub_red {
  color: #e81500;
}

.badge.badge-space-left {
  margin-left: 10px;
}

.big-space-top {
  margin-top: 50px;
}

.small-space-top {
  margin-top: 20px;
}

.submit-button-space {
  margin-top: 10px;
  float: right;
}

.card-header .feather {
  height: 26px;
  width: 20px;
  margin: 0px 5px;
}

/* Descendant, to match the toggle moving inside the header: Bootstrap puts
   .collapsed on the trigger, which is no longer the .card-header itself. */
.card-header .collapsed .feather {
  height: 20px;
  width: 16px;
}

.org-btn:hover {
    background-color: #e2e6ea;
    color: white;
    border-color: #e2e6ea;
}


/* The Secure UDS explorer's container dropdown (pages 05/06).

   A receiver's containers are NAIC numbers with the insolvent company name
   underneath, and the default dropdown width truncates the names that make the
   numbers meaningful. */
.suds-container-menu {
  min-width: 22rem;
}


/* Chart chrome, shared by every page that draws one (pages 08 and 11).

   Every colour here is either an existing theme token or the validated series
   pair; no new hues enter the app. Text wears text tokens and never a series
   colour -- identity comes from the coloured mark beside it. */
.chart-figure svg {
  width: 100%;
  height: auto;
  display: block;
}

/* The anchor the hover panel is positioned inside. Set here rather than in
   chart-popover.js so the panel is never briefly placed against the page. */
.chart-figure {
  position: relative;
}

/* The hover panel, replacing the native SVG <title> tooltip -- see
   assets/js/chart-popover.js for why, and for the no-JS fallback.

   `pointer-events: none` is the load-bearing line: the panel follows the pointer
   and would otherwise sit under it, so the mark beneath would lose the hover the
   moment the panel appeared and the two would flicker against each other.

   Positioned by script but styled entirely here, so no inline style attribute is
   written and the CSP's style-src does not have to carry this. */
.chart-popover {
  position: absolute;
  z-index: 5;
  max-width: 280px;
  padding: 6px 9px;
  border-radius: 6px;
  background-color: #1f2d41;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(31, 45, 65, 0.28);
}

.chart-popover-hidden {
  display: none;
}

/* Two lines: what it is, then how much. The label wraps and the amount does not,
   because a broken figure is harder to read than a narrow panel is to fit. */
.chart-popover-label {
  display: block;
}

.chart-popover-value {
  display: block;
  margin-top: 1px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart-popover-value:empty {
  display: none;
}

/* The key that picks one series, and the views it switches between -- see
   assets/js/chart-isolate.js. Every view is a complete server-rendered chart and
   all of them ship in the document; only one is displayed.

   THE NO-SCRIPT STATE IS THE ONE DEFINED FIRST, and it is the card as it was
   before the control existed: no key at all, and only the first view drawn. That
   matters more here than in most progressive enhancement, because the failure it
   prevents is not a dead button -- it is eleven full-size charts stacked down the
   page under a set of radios that do nothing.

   `.chart-isolate-ready` is set by the script once it has paired the inputs to the
   views, so visibility only changes hands after something is there to drive it. */
.chart-isolate-key {
  display: none;
}

.chart-isolate-view + .chart-isolate-view {
  display: none;
}

/* A fieldset ships with a border, padding and margin of its own; it is here for
   the grouping and the legend, not for the box it draws by default. */
.chart-isolate-ready .chart-isolate-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  border: 0;
  padding: 0;
  margin: 0 0 0.5rem;
}

.chart-isolate-ready .chart-isolate-view {
  display: none;
}

.chart-isolate-ready .chart-isolate-current {
  display: block;
}

.chart-isolate-label {
  cursor: pointer;
  font-size: 0.875rem;
}

/* Weight, not colour: the entries already carry a swatch each, and a second
   colour to mean "selected" would compete with the one that means "this line". */
.chart-isolate-label-current {
  font-weight: 600;
}

/* The radio inside the label is visually hidden, so the ring has to be drawn on
   the label. `:has(:focus-visible)` rather than `:focus-within`, so a mouse click
   does not leave one behind -- the same distinction .chart-band-group-reveal
   already makes. Where :has() is unsupported the only loss is the ring; the
   control still works, and the selected entry is still bold. */
.chart-isolate-label:has(:focus-visible) {
  outline: 2px solid #0061f2;
  outline-offset: 2px;
  border-radius: 4px;
}

/* The legend swatch for a ramp step, whose colour is computed in Python and so
   cannot come from a class. An SVG rect takes it as a presentation attribute --
   the same way every bar in every chart is filled -- which keeps it out of a
   style attribute and out of the CSP's way. */
.chart-key-svg {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
}

/* The rank number in front of a ramp legend entry. Ten steps of one hue cannot be
   matched to a slice by eye, so the number is what makes the key usable; it is
   muted because it is an index, not a value. */
.chart-key-rank {
  display: inline-block;
  min-width: 1.1em;
  color: #69707a;
  font-variant-numeric: tabular-nums;
}

/* Hairline, solid, one step off the surface. Never dashed: dashing reads as a
   threshold or a projection when it is only a grid. */
.chart-grid {
  stroke: #e0e5ec;
  stroke-width: 1;
}

.chart-axis {
  stroke: #c5ccd6;
  stroke-width: 1;
}

.chart-tick,
.chart-band {
  fill: #869099;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* The second line of a row label -- a line number under its name. One step
   lighter than the name, so the pair reads as one label. */
.chart-sublabel {
  fill: #a7aeb8;
  font-size: 10px;
}

/* A direct label rides its mark, so it is the one place a value is emphasised.
   Still ink, not the series colour. */
.chart-value {
  fill: #3f4d5a;
  font-size: 12px;
  font-weight: 600;
}

/* Reveal-on-hover, for a chart that labels every band. The figures are in the
   markup from the start -- hidden, not absent -- so the accessible name and the
   SVG <title> still carry them and no script has to run to produce them.

   The hit rectangle is transparent rather than `display:none`, because a group
   with nothing paintable in it has no pointer target and cannot be hovered. It
   spans the whole band slot so there is no dead gap between the two columns.

   `:focus-visible` and not `:focus`, so a mouse click does not leave a ring
   behind; `tabindex` on the group is what puts it in the tab order at all. */
.chart-band-hit {
  fill: transparent;
}

.chart-band-group-reveal .chart-value,
.chart-band-group-reveal .chart-value-sm {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.chart-band-group-reveal:hover .chart-value,
.chart-band-group-reveal:hover .chart-value-sm,
.chart-band-group-reveal:focus-visible .chart-value,
.chart-band-group-reveal:focus-visible .chart-value-sm {
  opacity: 1;
}

.chart-band-group-reveal:focus-visible {
  outline: 2px solid #0061f2;
  outline-offset: 2px;
}

/* A reader who has asked for less motion gets the reveal without the fade. */
@media (prefers-reduced-motion: reduce) {
  .chart-band-group-reveal .chart-value,
  .chart-band-group-reveal .chart-value-sm {
    transition: none;
  }
}

/* One slice of a stacked bar. The 2px gap between slices is cut in the geometry,
   not drawn here -- the surface separates them, so no slice needs a stroke. */
.chart-segment path {
  transition: opacity 120ms ease-out;
}

.chart-segment:hover path {
  opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
  .chart-segment path {
    transition: none;
  }
}

/* The same label where *every* column carries one. Smaller, because a figure on
   each column only fits at this size, and tabular so a row of them lines up.
   Same ink as .chart-value -- the size is the only thing that changes. */
.chart-value-sm {
  fill: #3f4d5a;
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The amount beside a share: the reference, not the comparison. */
.chart-detail {
  fill: #869099;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* The hero figure: same sans as everything else, and proportional figures --
   tabular-nums would make a two-digit number look loose at this size. */
.chart-hero {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: proportional-nums;
}

/* Columns of numbers do want tabular figures, so they align vertically. */
.chart-table td,
.chart-table th {
  font-variant-numeric: tabular-nums;
}

/* The legend swatch. A short bar rather than a dot, matching the mark it names. */
.chart-key {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: -1px;
}

.chart-key-primary {
  background-color: #0061f2;
}

.chart-key-secondary {
  background-color: #f76400;
}

/* A line drawn over a column plot. 2px, round joins, no fill -- the stroke is the
   mark, and a filled polyline would read as an area chart. */
.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The vertex. The surface-coloured ring is what keeps the dot readable where it
   lands on a column of a similar value -- without it the two fills merge. */
.chart-line-dot {
  stroke: #ffffff;
  stroke-width: 1.5;
}

/* The legend swatch for a line, matching the mark: a rule, not a block. */
.chart-key-line {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: 3px;
}

/* The four stacked-series swatches, in stack order. Validated together with the
   fills they name -- see charts.SERIES_RAMP. */
.chart-key-series-1 {
  background-color: #0061f2;
}

.chart-key-series-2 {
  background-color: #6900c7;
}

.chart-key-series-3 {
  background-color: #00806a;
}

.chart-key-series-4 {
  background-color: #f76400;
}

/* The folded tail. Matches charts.OTHER_COLOR, and it is a neutral rather than a
   fifth categorical hue on purpose: "everything else" is not an entity, so it does
   not earn a step in a validated ramp. Only stacked charts need this -- a row
   chart's tail is named in its own gutter and carries no legend. */
.chart-key-other {
  background-color: #a7aeb8;
}

/* The filing-completeness grid. A table with a fill, not a chart -- two
   categorical axes and a count per cell.

   Every cell carries its number as well as its tint. The tints are the theme's
   soft surfaces rather than the series ramp: these cells are a state, not a
   series, and reusing a categorical hue for a status is what makes a palette stop
   meaning anything. */
.filing-grid th[scope="row"] {
  white-space: nowrap;
}

.filing-cell {
  font-variant-numeric: tabular-nums;
}

.filing-cell-full {
  background-color: #d9f2ec;
}

.filing-cell-partial {
  background-color: #fdead7;
}

/* Nothing filed. Ink, not a fill -- an absence should read as quieter than a
   presence, and a third tint would make the grid look like three states of the
   same kind of thing. */
.filing-cell-none {
  color: #a7aeb8;
}

/* ---------------------------------------------------------------------------
   Page 09 -- UDS Data Mapper batch rows.

   Carried over from docs/ui-mockups/_mockup.css, minus the `.mockup` scope and
   minus `.rt-chip`, which the mockup itself stopped using once the record-type
   chips became plain badges rather than toggles.

   The rows are <div>, not <a class="list-group-item-action">, because a row is a
   selector for the card beside it rather than a link somewhere. SB Admin Pro's
   .active only targets anchors inside a list group, so selection needs its own
   class. Every value below is an existing theme token.
   --------------------------------------------------------------------------- */
.batch-row {
  cursor: pointer;
}

.batch-row.selected {
  background-color: var(--bs-primary-soft);
  box-shadow: inset 3px 0 0 0 var(--bs-primary);
}

/* Keyboard parity with the pointer. The row carries tabindex and toggles on
   Enter or Space, so it needs a visible focus state -- without this the only
   people who cannot see which row they are on are the ones not using a mouse. */
.batch-row:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

/* Roomier cells for the file tables. Bootstrap's own cell-padding selector with
   a larger value -- no new design token. */
.table-roomy > :not(caption) > * > * {
  padding: 0.85rem 1rem;
}

.table-roomy thead th {
  padding-top: 1rem;
  padding-bottom: 1rem;
  vertical-align: bottom;
}

/* ---------------------------------------------------------------------------
   Page 12 -- the NAIC company register.

   Two problems, one root. The table is server-side, so DataTables measures a
   different 25 rows on every draw; with its default autoWidth it wrote fresh
   inline widths each time and the columns jumped as you paged.
   naic-companies.js turns autoWidth off and declares a width per column
   instead -- in the init rather than as a <colgroup> in the template, because
   DataTables prepends a colgroup of its own and a second one would address
   columns 9-16. The rule below is what makes the browser honour the declared
   widths rather than growing each cell to fit its content.
   --------------------------------------------------------------------------- */
#naic-companies {
  table-layout: fixed;
  /* Eight columns do not fit a tablet. Below this the table's own layout row
     scrolls sideways rather than crushing Address and Email into slivers. */
  min-width: 1100px;
}

/* NAIC writes sentence-length status descriptions -- "Active - No regulatory
   action in process" is 39 characters. `.badge` is `white-space: nowrap`, which
   is right for a one-word chip and wrong here: in a fixed-width column it
   overflows the cell instead of using the second line already available. */
#naic-companies .badge {
  white-space: normal;
  text-align: left;
}

/* ---------------------------------------------------------------------------
   A DataTables table filling a card, with its info line and pager inset to the
   card's own gutter. Written as a class rather than against #naic-companies so
   a second table can adopt it without a second copy.

   The selectors are the ones the Bootstrap 5 integration actually emits. It
   deep-merges over DataTables' core class map and replaces `layout.row` and
   `layout.cell`, so `dt-layout-row` and `dt-layout-cell` never reach the DOM --
   a row is a plain Bootstrap `.row mt-2 justify-content-between`, and only the
   table's row additionally carries `dt-layout-table`.
   --------------------------------------------------------------------------- */

/* Only the table scrolls. `.table-responsive` on the card would scroll the info
   line and the pager with it, because DataTables inserts its wrapper around the
   table -- there is no way to leave them outside an overflow container placed
   further out. */
.dt-card-table > .dt-container > .dt-layout-table > .dt-layout-full {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* The layout rows are Bootstrap `.row`, whose negative gutters would pull them
   past the card border. datatables.css neutralises that only for a wrapper whose
   parent is `.table-responsive`, which this one deliberately is not. Zeroing the
   gutter is the Bootstrap-native equivalent, and it drops the cells' own padding
   too -- which leaves the card gutter below as the single source of inset. */
.dt-card-table > .dt-container > .row {
  --bs-gutter-x: 0;
}

/* `mt-2` comes from DataTables' own Bootstrap 5 row classes and would open a gap
   between the card header and the first table row. */
.dt-card-table > .dt-container > .dt-layout-table {
  margin-top: 0;
}

/* The info and pager row, on the card's 1.35rem gutter so "Showing 1 to 25 of
   3,745 entries" lines up with the card header above it. `mt-2` supplies the
   space above; 1rem below matches the card-footer rhythm. */
.dt-card-table > .dt-container > .row:not(.dt-layout-table) {
  padding: 0 1.35rem 1rem;
}