/* Label and control text size overrides */

/* Base styles for smaller screens (mobile) */
label,
.form-label,
.form-control,
input,
select,
textarea,
button,
.btn,
table,
th,
td {
    font-size: 0.875rem !important; /* 14px */
}

/* Medium screens and above (tablets, desktops) */
@media (min-width: 768px) {
    label,
    .form-label,
    .form-control,
    input,
    select,
    textarea,
    button,
    .btn,
    table,
    th,
    td {
        font-size: 1rem !important; /* Bootstrap fs-6 size */
    }
}

/* Table text color overrides */
table,
table th,
table td,
.table,
.table th,
.table td {
    color: #00273a !important;
}

/* Bootstrap secondary color overrides */
:root {
    --bs-secondary: #00273a !important;
    --bs-secondary-rgb: 0, 39, 58 !important;
}

.bg-secondary {
    background-color: #00273a !important;
}

.text-secondary {
    color: #00273a !important;
}

.btn-secondary {
    background-color: #00273a !important;
    border-color: #00273a !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #001d2a !important;
    border-color: #001d2a !important;
}

.btn-secondary:active,
.btn-secondary.active {
    background-color: #001420 !important;
    border-color: #001420 !important;
}

.btn-outline-secondary {
    color: #00273a !important;
    border-color: #00273a !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #00273a !important;
    border-color: #00273a !important;
}

.border-secondary {
    border-color: #00273a !important;
}

.alert-secondary {
    background-color: #00273a !important;
    border-color: #00273a !important;
    color: #ffffff !important;
}

.badge-secondary,
.badge.bg-secondary {
    background-color: #00273a !important;
}

.list-group-item-secondary {
    background-color: #00273a !important;
    color: #ffffff !important;
}

.table-secondary {
    background-color: #00273a !important;
    color: #ffffff !important;
}

.text-bg-secondary {
    background-color: #00273a !important;
    color: #ffffff !important;
}

/* form-select: underline-only, no rounding, fa-list icon */
.form-select {
    border: none !important;
    border-bottom: 1px solid #00273a !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect fill='%2300273a' x='0' y='96' width='512' height='32'/%3E%3Crect fill='%2300273a' x='0' y='240' width='512' height='32'/%3E%3Crect fill='%2300273a' x='0' y='384' width='512' height='32'/%3E%3C/svg%3E") !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    color: var(--bs-secondary) !important;
}

.form-select:focus {
    border-bottom-color: var(--bs-success) !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-select.is-valid,
.was-validated .form-select:valid {
    border-bottom-color: var(--bs-success) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect fill='%2300273a' x='0' y='96' width='512' height='32'/%3E%3Crect fill='%2300273a' x='0' y='240' width='512' height='32'/%3E%3Crect fill='%2300273a' x='0' y='384' width='512' height='32'/%3E%3C/svg%3E") !important;
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-bottom-color: var(--bs-danger) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect fill='%2300273a' x='0' y='96' width='512' height='32'/%3E%3Crect fill='%2300273a' x='0' y='240' width='512' height='32'/%3E%3Crect fill='%2300273a' x='0' y='384' width='512' height='32'/%3E%3C/svg%3E") !important;
}

/* No borders for form controls inside tables */
table .form-select,
td .form-select,
table .form-control,
td .form-control {
    border-bottom: none !important;
}

/* form-control: underline-only, no rounding */
.form-control {
    border: none !important;
    border-bottom: 1px solid #00273a !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-control:read-only,
.form-control[readonly] {
    background-color: white !important;
}

.form-control:focus {
    border-bottom-color: var(--bs-success) !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-bottom-color: var(--bs-success) !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-bottom-color: var(--bs-danger) !important;
}

/* SweetAlert confirmations/alerts must render above high z-index app overlays such as
   the disciplinary attachments viewer (z-index 9999). Without this the confirm dialog
   appears behind the overlay and its buttons are unreachable. */
body div.swal2-container.swal2-backdrop-show {
    z-index: 100000 !important;
}

/* Filter chips (the dropdown-toggle buttons in a list page's filter bar) keep browser
   focus after their menu closes, so Bootstrap's `.btn.show` / `:focus-visible` rules at
   codex.css:3220,3232 leave the chip looking pressed even once the user has clicked
   away. A chip's fill is meaningful here — btn-primary means "this filter is active" —
   so a lingering pressed state reads as a filter that is on when it is not.

   Only the *open* menu should tint the toggle; a closed chip renders from its own
   btn-light / btn-primary class alone. .cdx-chip is opt-in so ordinary dropdown buttons
   elsewhere in the app keep Bootstrap's default behaviour. */
.cdx-chip.dropdown-toggle:not(.show) {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
}

.cdx-chip.dropdown-toggle:not(.show):focus,
.cdx-chip.dropdown-toggle:not(.show):focus-visible {
    box-shadow: none;
    outline: 0;
}

/* Hover stays available so the chip still feels interactive. */
.cdx-chip.dropdown-toggle:not(.show):hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}

/* ── Filter chip menus ──────────────────────────────────────────────────────
   The option lists inside a filter chip's dropdown. Two rules at the top of this
   file work against them and neither can be dodged from the markup:

   1. every `button` is forced to 1rem !important (lines 4-33), so `btn-sm` never
      actually shrinks and full-size buttons crowd a ~290px menu;
   2. `btn-outline-secondary` resolves to #9568FF in codex.css — a saturated purple,
      not a neutral — so a menu of unselected options reads as a wall of alerts.

   Everything here is scoped to .cdx-chip-menu so ordinary buttons and dropdowns
   elsewhere in the app are untouched.

   The palette follows this file rather than Bootstrap's: navy #00273a is the app's
   --bs-secondary (card headers, table ink, control underlines) and carries selection,
   while green --bs-success #1EBA62 is what the form controls above already use for
   focus - so a focused row or pill matches a focused input. Bootstrap's --bs-primary
   (#01A3FF cyan) is deliberately unused here; it belongs to no other chrome on
   these pages.

   Names and codes get different controls because they are different shapes of data:
   variable-length names (payment methods, sales groups) wrap badly as pills and become
   rows; short tokens (tax codes) waste a full row each and become pills. */

/* The inline min-width on each menu would win on a narrow phone and push the menu past
   the viewport edge, so the cap is stated here where it can beat it. */
.cdx-chip-menu {
    max-width: calc(100vw - 1.5rem);

    --cdx-menu-navy: #00273a;
    --cdx-menu-ink: #00273a;
    --cdx-menu-faint: #61737d;
    --cdx-menu-line: rgba(0, 39, 58, 0.12);
    --cdx-menu-sunk: #eef2f4;
    --cdx-menu-header: #f6f8f9;

    /* Navy at 6% - the selected row's wash, tinted from the same hue as the rule
       beside it rather than a separate blue. */
    --cdx-menu-selected-wash: rgba(0, 39, 58, 0.06);

    padding: 0;
    overflow: hidden;
}

/* A section heading inside the menu — the bank account a group of payment methods
   settles into. Quiet enough that it never competes with the options under it. */
.cdx-chip-menu .cdx-menu-group {
    font-size: 0.65rem !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--cdx-menu-navy);
    opacity: 0.62;
    padding: 0.5rem 0.8rem 0.3rem;
    background: var(--cdx-menu-header);
    border-top: 1px solid var(--cdx-menu-line);
    border-bottom: 1px solid var(--cdx-menu-line);
}

.cdx-chip-menu .cdx-menu-group:first-child {
    border-top: 0;
}

/* ── Rows (payment methods, sales groups) ── */

/* The row is a <button>, so it needs the font-size override to land on it directly. */
.cdx-chip-menu .cdx-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--cdx-menu-ink);
    font-size: 0.875rem !important;
    line-height: 1.4;
    padding: 0.5rem 0.8rem 0.5rem 1rem;
}

.cdx-chip-menu .cdx-menu-row:hover,
.cdx-chip-menu .cdx-menu-row:focus-visible {
    background: var(--cdx-menu-sunk);
    outline: 0;
}

.cdx-chip-menu .cdx-menu-row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--bs-success);
}

/* The check mark is the selected state; the wash and rule reinforce it rather than
   carrying it alone, so the row still reads as selected in a grayscale screenshot. */
.cdx-chip-menu .cdx-menu-row.active {
    background: var(--cdx-menu-selected-wash);
    border-left-color: var(--cdx-menu-navy);
    font-weight: 600;
    padding-left: 0.8rem;
}

/* Green check on the navy wash: the one place the two brand colours meet, and the
   only saturated mark in the menu, so the eye lands on the selected row first. */
.cdx-chip-menu .cdx-menu-row .cdx-menu-check {
    color: var(--bs-success);
    flex-shrink: 0;
}

/* ── Pills (tax codes) ── */

.cdx-chip-menu .cdx-menu-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.75rem 0.8rem;
}

/* Unselected pills are navy at low opacity rather than a grey from another palette,
   so the off state reads as the same family as the on state. */
.cdx-chip-menu .cdx-menu-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 39, 58, 0.16);
    background: rgba(0, 39, 58, 0.05);
    color: var(--cdx-menu-navy);
    font-size: 0.8125rem !important;
    line-height: 1.4;
    padding: 0.25rem 0.625rem;
    white-space: nowrap;
}

.cdx-chip-menu .cdx-menu-pill:hover {
    border-color: rgba(0, 39, 58, 0.32);
    background: rgba(0, 39, 58, 0.09);
}

.cdx-chip-menu .cdx-menu-pill:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(var(--bs-success-rgb), 0.5);
}

.cdx-chip-menu .cdx-menu-pill.active {
    background: var(--cdx-menu-navy);
    border-color: var(--cdx-menu-navy);
    color: #fff;
    font-weight: 500;
}

/* The check inside a selected pill sits on navy, so it takes the green rather than
   disappearing into the fill. */
.cdx-chip-menu .cdx-menu-pill.active i {
    color: #6fe6a4;
}

/* ── Menu header / footer ── */

.cdx-chip-menu .cdx-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem 0.55rem;
    border-bottom: 1px solid var(--cdx-menu-line);
}

.cdx-chip-menu .cdx-menu-title {
    font-size: 0.65rem !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--cdx-menu-navy);
    opacity: 0.62;
}

.cdx-chip-menu .cdx-menu-clear {
    border: 0;
    background: transparent;
    color: var(--bs-danger);
    font-size: 0.75rem !important;
    padding: 0;
}

.cdx-chip-menu .cdx-menu-note {
    padding: 0 0.8rem 0.75rem;
    font-size: 0.75rem !important;
    color: var(--cdx-menu-faint);
    line-height: 1.45;
}

/* The scroll lives on the list, so the header and footer stay put while the options
   under them scroll. */
.cdx-chip-menu .cdx-menu-scroll {
    max-height: 17rem;
    overflow-y: auto;
}

/* ── Action menus (.cdx-action-menu) ─────────────────────────────────────
   A row-level "Actions" dropdown in a results table. It reuses the chip-menu
   vocabulary above - same navy ink, same .cdx-menu-group section headings, same
   row metrics - so a menu opened from a table row reads as the same family as the
   filter chips at the top of the page, which is what the filter strip already
   taught the user.

   It differs from .cdx-chip-menu in one way that matters: these rows are commands,
   not selections. Nothing is ever ".active" here, so the left rule and the wash stay
   unused, and the two states a command does need - destructive and unavailable -
   are what the block below adds. */

.cdx-action-menu {
    max-width: calc(100vw - 1.5rem);
    min-width: 17rem;

    --cdx-menu-navy: #00273a;
    --cdx-menu-ink: #00273a;
    --cdx-menu-faint: #61737d;
    --cdx-menu-line: rgba(0, 39, 58, 0.12);
    --cdx-menu-sunk: #eef2f4;
    --cdx-menu-header: #f6f8f9;

    padding: 0;
    overflow: hidden;
}

/* Section heading between groups of commands (e.g. "Printing"). Same treatment as
   the chip menu's group heading so the two never drift apart. */
.cdx-action-menu .cdx-menu-group {
    font-size: 0.75rem !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--cdx-menu-navy);
    opacity: 0.62;
    padding: 0.5rem 0.8rem 0.3rem;
    background: var(--cdx-menu-header);
    border-top: 1px solid var(--cdx-menu-line);
    border-bottom: 1px solid var(--cdx-menu-line);
}

.cdx-action-menu .cdx-menu-group:first-child {
    border-top: 0;
}

/* The icon leads and the label follows, so commands align down a single icon column -
   unlike a filter row, which pushes its check mark to the far edge. */
.cdx-action-menu .cdx-menu-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--cdx-menu-ink);
    font-size: 1rem !important;
    line-height: 1.45;
    padding: 0.6rem 1rem;
}

.cdx-action-menu .cdx-menu-action:hover,
.cdx-action-menu .cdx-menu-action:focus-visible {
    background: var(--cdx-menu-sunk);
    outline: 0;
}

.cdx-action-menu .cdx-menu-action:focus-visible {
    box-shadow: inset 0 0 0 2px var(--bs-success);
}

/* A fixed-width icon column keeps labels aligned whether or not a glyph is wide. */
.cdx-action-menu .cdx-menu-action i {
    width: 1.15rem;
    text-align: center;
    flex-shrink: 0;
    color: #547792;
}

/* Destructive commands carry the danger colour on the glyph as well as the label, so
   the row reads as destructive before the label is even parsed. */
.cdx-action-menu .cdx-menu-action.danger,
.cdx-action-menu .cdx-menu-action.danger i {
    color: var(--bs-danger);
}

.cdx-action-menu .cdx-menu-action.danger:hover,
.cdx-action-menu .cdx-menu-action.danger:focus-visible {
    background: rgba(var(--bs-danger-rgb), 0.08);
}

/* Unavailable commands stay in place rather than disappearing, so the menu does not
   change shape between rows and the user learns one stable layout. */
.cdx-action-menu .cdx-menu-action:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.cdx-action-menu .cdx-menu-action:disabled:hover {
    background: transparent;
}

.cdx-action-menu .cdx-menu-note {
    padding: 0 1rem 0.75rem;
    font-size: 0.8125rem !important;
    color: var(--cdx-menu-faint);
    line-height: 1.45;
}

/* The row's Actions toggle carries no fill and no border - in a table of many rows a
   solid or outlined button per row would out-shout the data it belongs to. The label
   and caret carry the affordance instead, so losing the fill costs no clarity; hover
   and focus supply the rest.

   The base .btn rules still apply, so background and border are cleared explicitly
   rather than relying on their absence. */
.cdx-action-toggle,
.cdx-action-toggle:disabled {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #00273a;
    font-size: 0.875rem !important;
    font-weight: 500;
    white-space: nowrap;
}

/* The label is the affordance, so it must not wrap or shrink into the amount column
   beside it. The leading glyph takes the muted icon accent used elsewhere. */
.cdx-action-toggle i {
    color: #547792;
}

.cdx-action-toggle:hover,
.cdx-action-toggle:focus-visible,
.cdx-action-toggle.show {
    background: rgba(0, 39, 58, 0.06);
    border-color: transparent;
    color: #00273a;
}

.cdx-action-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(var(--bs-success-rgb), 0.5);
}

/* ── Row action menus escaping the results table ─────────────────────────
   .table-responsive sets overflow-x: auto, which establishes a clipping box: a
   dropdown opened on one of the last rows is cut off at the table's edge rather
   than merely stacked behind what follows it. No z-index fixes that - a clipped
   element cannot paint outside its scroll container - so the overflow itself has
   to yield while a menu is open.

   :has() keeps that scoped to the moment it matters. With no menu open the table
   still scrolls horizontally exactly as before, which is what narrow screens need. */
.cdx-table-actions:has(.dropdown-menu.show) {
    overflow: visible;
}

/* The pager footer below the table paints after it in document order, so an open
   menu needs to outrank it. 1021 clears Bootstrap's sticky band (1020) while
   staying below modals (1055), so a dialog opened from a menu still covers it. */
.cdx-action-menu.show {
    z-index: 1021;
}

/* A separator inside an action menu. Bootstrap's .dropdown-divider draws a hairline
   from --bs-border-color-translucent and takes its spacing from a variable scoped to
   .dropdown-menu, so it reads as a faint seam here rather than a break between two
   kinds of command. This states both explicitly, in the menu's own navy line colour,
   with enough room around it to actually separate what it sits between. */
.cdx-action-menu .cdx-menu-separator {
    height: 0;
    margin: 0.4rem 0;
    border-top: 1px solid var(--cdx-menu-line);
}