/* ==========================================================================
   ui-uniformity.css — cross-module alignment & layout normaliser
   --------------------------------------------------------------------------
   Loaded LAST on every page (after core.css, workflow.css and the per-module
   stylesheet) so it can settle the differences between them. Its only job is
   to make the same component look and measure the same on every page.

   Rules of the file:
     · No colours, gradients or shadows are invented here. Every colour comes
       from an existing --color-* token, so light/dark both work for free and
       the page/sidebar gradients and primary blue are untouched.
     · Only geometry, typography scale and alignment are normalised.
     · Deliberate module variants (admin side-nav, auth card, task-modal
       footer, icon stat cards) are left alone — they are more specific.
   ========================================================================== */


/* ==========================================================================
   1 · GLOBAL BOX MODEL
   Nothing may outgrow its container because of padding or a border.
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

img,
svg,
video,
canvas { max-width: 100%; }


/* ==========================================================================
   2 · CONTENT AREA
   One page gutter everywhere, and a hard stop on sideways overflow.
   `clip` is preferred over `hidden` where supported: `hidden` on one axis
   silently turns the other axis into a scroll container, which breaks
   position:sticky inside the page.
   ========================================================================== */
.content {
  flex: 1;
  padding: var(--space-4);
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  .content { overflow-x: clip; }
}

/* Direct children of the page may shrink — otherwise a wide table or a long
   unbroken string pushes the whole layout sideways. */
.content > * { min-width: 0; }


/* ==========================================================================
   3 · SECTION HEADS
   Title left, tools right, hint on its own line underneath. Same type scale
   and the same space below it on every page (admin used 1.35rem plus a rule,
   the stage pages 1.18rem, the refinement layer 1.02rem).
   ========================================================================== */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: 0;
  border-bottom: 0;
}

.section-head h2 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.section-head > div { min-width: 0; }

.section-head__tools,
.section-head__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

.section-head__hint,
.section-head .section-hint {
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-muted);
}

/* A paragraph dropped straight into the head (no wrapper div) belongs under
   the title, not opposite it. */
.section-head > p {
  flex: 1 1 100%;
  order: 1;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-muted);
}


/* ==========================================================================
   4 · PAGE HEADERS
   ========================================================================== */
.page-header {
  display: block;
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-lg);
  min-width: 0;
}

.page-header__title {
  margin: 0 0 4px;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-text);
}

.page-header__subtitle {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.page-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}


/* ==========================================================================
   5 · STAT CARDS
   Equal columns, equal heights. Cards stretch to the tallest in the row, so a
   two-line label can never make one card shorter than its neighbours.
   ========================================================================== */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  align-items: stretch;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 104px;
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* The icon variant keeps its icon-beside-figure layout, at the same height. */
.stat-card--icon {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.stat-card__content {
  flex: 1;
  min-width: 0;
}

.stat-card__label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* One KPI reading order everywhere. Eight of the eleven screens that emit
   stat cards put the figure first and the caption under it; three did the
   reverse, so the same component read differently page to page. Fixing the
   visual order here settles it for all of them without touching any JS. */
.stat-card__value { order: 1; }
.stat-card__label { order: 2; margin: 6px 0 0; }

.stat-card__value {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  /* .stat-card__value is painted with background-clip:text, so any glyph
     that overflows the element box gets no paint at all and the figure is
     silently truncated (a long money value read as "190,792.0"). Wrapping
     keeps it inside the box, so the number is always fully readable. */
  min-width: 0;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   6 · TABLES
   One header style, one cell rhythm, one hover/zebra pair — whichever module
   the table happens to live in.
   ========================================================================== */
.table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: auto;
  max-width: 100%;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrap thead th {
  padding: 10px var(--space-3);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--color-text-secondary);
  background: var(--color-thead-bg);
  border-bottom: 1px solid var(--color-border);
}
.table-wrap thead th.right,
.table-wrap thead th.num {
  text-align: right;
}

.table-wrap tbody td {
  padding: 10px var(--space-3);
  vertical-align: middle;
  line-height: 1.45;
  border-bottom: 1px solid var(--color-border-subtle);
}

.table-wrap tbody tr:last-child td { border-bottom: 0; }

.table-wrap tbody tr { transition: background var(--transition-fast); }
.table-wrap tbody tr:nth-child(even) { background: var(--color-surface-stripe); }
.table-wrap tbody tr:hover,
.table-wrap tbody tr:nth-child(even):hover { background: var(--color-surface-hover); }

/* Money and counts line up like a ledger. */
.table-wrap td.num,
.table-wrap th.num,
.table-wrap td[data-num],
.table-wrap .cell-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6b · TABLE ACTION BUTTONS
   Open / View / Edit / Rename / Remove and the rest of the row actions were
   each a different width and weight. One compact pill size, equal columns
   inside an actions cell, quiet chrome (filled primary/danger still read as
   the strong action). Icon-only controls (trash, ×, ±) stay compact.
   ========================================================================== */
.table-wrap tbody td.row-actions,
.table-wrap tbody td.dash-table-actions,
.table-wrap tbody td.backup-row-actions,
.table-wrap tbody td.fin-inbox-actions,
.table-wrap tbody td.fin-pay-queue-actions,
.table-wrap tbody td.doc-actions,
.table-wrap tbody td.reg-actions,
.table-wrap tbody td.accounts-chart-actions,
.table-wrap .row-actions,
td.row-actions,
td.dash-table-actions,
td.backup-row-actions,
td.fin-inbox-actions,
td.fin-pay-queue-actions,
td.doc-actions,
td.reg-actions,
td.accounts-chart-actions,
.doc-registry__actions {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  justify-content: end;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  vertical-align: middle;
}

.table-wrap tbody td .btn,
.table-wrap tbody td a.btn,
td.row-actions .btn,
td.dash-table-actions .btn,
td.backup-row-actions .btn,
.doc-registry__actions .btn,
.doc-registry__actions a.btn,
.srq-docs__item .btn,
.srq-docs__item a.btn {
  min-width: 6.75rem;
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: none;
  border-radius: var(--btn-radius, 999px);
}

.table-wrap tbody td.row-actions .btn,
.table-wrap tbody td.dash-table-actions .btn,
.table-wrap tbody td.backup-row-actions .btn,
.table-wrap tbody td.fin-inbox-actions .btn,
.table-wrap tbody td.fin-pay-queue-actions .btn,
.table-wrap tbody td.doc-actions .btn,
.table-wrap tbody td.reg-actions .btn,
.table-wrap tbody td.accounts-chart-actions .btn,
.table-wrap .row-actions .btn,
td.row-actions .btn,
td.dash-table-actions .btn,
td.backup-row-actions .btn,
td.fin-inbox-actions .btn,
td.fin-pay-queue-actions .btn,
td.doc-actions .btn,
td.reg-actions .btn,
td.accounts-chart-actions .btn,
.doc-registry__actions .btn,
.doc-registry__actions a.btn {
  width: 100%;
}

.table-wrap tbody td .btn:hover,
.table-wrap tbody td .btn:active,
.table-wrap tbody td a.btn:hover,
.doc-registry__actions .btn:hover,
.doc-registry__actions .btn:active,
.srq-docs__item .btn:hover {
  transform: none;
}

/* Default / ghost — outline pill, not the filled grey toolbar button */
.table-wrap tbody td .btn:not(.btn--primary):not(.btn--danger):not(.btn--success):not(.btn--info):not(.btn--warning):not(.btn--accent):not(.btn--purple),
td.row-actions .btn:not(.btn--primary):not(.btn--danger):not(.btn--success):not(.btn--info):not(.btn--warning):not(.btn--accent):not(.btn--purple),
.doc-registry__actions .btn:not(.btn--primary):not(.btn--danger):not(.btn--success):not(.btn--info):not(.btn--warning):not(.btn--accent):not(.btn--purple),
.srq-docs__item .btn:not(.btn--primary):not(.btn--danger):not(.btn--success):not(.btn--info):not(.btn--warning) {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  box-shadow: none;
}
.table-wrap tbody td .btn:not(.btn--primary):not(.btn--danger):not(.btn--success):not(.btn--info):not(.btn--warning):not(.btn--accent):not(.btn--purple):hover,
td.row-actions .btn:not(.btn--primary):not(.btn--danger):not(.btn--success):not(.btn--info):not(.btn--warning):not(.btn--accent):not(.btn--purple):hover,
.doc-registry__actions .btn:not(.btn--primary):not(.btn--danger):not(.btn--success):not(.btn--info):not(.btn--warning):not(.btn--accent):not(.btn--purple):hover,
.srq-docs__item .btn:not(.btn--primary):not(.btn--danger):not(.btn--success):not(.btn--info):not(.btn--warning):hover {
  background: var(--color-primary-light);
  border-color: transparent;
  color: var(--color-primary);
}

/* Open / info — same size as its neighbours, softer than a solid fill */
.table-wrap tbody td .btn--info,
td.row-actions .btn--info,
.doc-registry__actions .btn--info,
.srq-docs__item .btn--info {
  background: var(--color-primary-light);
  border-color: transparent;
  color: var(--color-primary);
  box-shadow: none;
}
.table-wrap tbody td .btn--info:hover,
.doc-registry__actions .btn--info:hover,
.srq-docs__item .btn--info:hover {
  background: var(--color-surface-active, var(--color-primary-light));
  color: var(--color-primary-dark, var(--color-primary));
  filter: none;
}

.table-wrap tbody td .btn--primary,
td.row-actions .btn--primary,
.doc-registry__actions .btn--primary {
  box-shadow: none;
}

.table-wrap tbody td .btn--danger:not(.crud-action--danger),
td.row-actions .btn--danger:not(.crud-action--danger) {
  box-shadow: none;
}

/* Icon-only / stepper controls must not be stretched to the labelled size */
.table-wrap tbody td .btn.dept-srq-rm,
.table-wrap tbody td .btn.crud-action--danger,
.table-wrap tbody td .btn[data-sm-steps],
.table-wrap tbody td .btn[data-srq-sm-steps],
td.row-actions .btn.crud-action--danger,
td.row-actions .btn.dept-srq-rm {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  padding: 0;
  flex: 0 0 30px;
  justify-self: center;
}


/* ==========================================================================
   7 · FILTER TOOLBARS
   `.filters` (core.css) and `.filters-bar` (workflow.css) were two different
   bars with different padding, gaps and control heights. They are one bar
   now, and every control inside is exactly 36px so the row has a single
   baseline.
   ========================================================================== */
.filters,
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.filters-bar--compact {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

.filters > *,
.filters-bar > * { min-width: 0; }

.filters label,
.filters .form__label,
.filters-bar label,
.filters-bar__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.filters .form__input,
.filters .form__select,
.filters-bar .form__input,
.filters-bar .form__select {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.filters .form__select,
.filters-bar .form__select { padding-right: 32px; }

.filters .btn,
.filters-bar .btn {
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  font-size: 0.875rem;
}

.filters .filters__actions,
.filters .filters-bar__actions,
.filters-bar .filters__actions,
.filters-bar__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

/* Checkbox filters sit on the input baseline, not above it. */
.filters-bar__field--check,
.filters .form__check {
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  min-width: 0;
}


/* ==========================================================================
   8 · FORM FIELDS
   One field height (38px), one radius, one focus ring, one label style.
   ========================================================================== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.form__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__textarea,
textarea.form__input {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

.form__input:hover,
.form__select:hover,
.form__textarea:hover { border-color: var(--color-border-strong); }

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.form__input:disabled,
.form__select:disabled,
.form__textarea:disabled {
  background: var(--color-surface-raised);
  color: var(--color-muted);
  cursor: not-allowed;
}

input[type="date"].form__input,
input[type="time"].form__input,
input[type="datetime-local"].form__input { padding-right: 8px; }

.form__hint {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-muted);
}

.form__check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 38px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.form__check input { flex-shrink: 0; margin: 0; }

/* --- Select dropdown arrow ------------------------------------------------
   Drawn with two gradients rather than an SVG data-URI, so the arrow colour
   is a live token: it follows the theme automatically instead of needing a
   second, hard-coded dark-mode image.
   -------------------------------------------------------------------------- */
.form__select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  text-overflow: ellipsis;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) calc(50% - 1px),
    calc(100% - 12px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.form__select:not([multiple]):not([size])::-ms-expand { display: none; }

/* --- Field grids ---------------------------------------------------------- */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-3);
  align-items: start;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid-2 > *,
.grid-3 > *,
.grid-4 > * { min-width: 0; }

/* Invalid keeps the geometry, only the colour changes. */
.form__label.is-invalid .form__input,
.form__label.is-invalid .form__select,
.form__label.is-invalid .form__textarea,
.form__input.is-invalid,
.form__select.is-invalid,
.form__textarea.is-invalid { border-color: var(--color-danger); }


/* ==========================================================================
   9 · FIELDSETS
   ========================================================================== */
.fieldset {
  min-width: 0;
  margin: 0 0 var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
}

.fieldset > legend {
  padding: 0 var(--space-2);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary-dark);
}


/* ==========================================================================
   10 · FORM ACTIONS & MODAL FOOTERS
   Always a right-aligned button row above a hairline.
   ========================================================================== */
.form-actions,
.form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--color-border-subtle);
}

/* A footer that spans the dialog (rather than sitting inside an already
   padded body) carries the dialog's own gutter. */
.modal__dialog > .modal__footer,
.modal__dialog > form > .modal__footer {
  margin-top: 0;
  padding: 18px var(--space-4);
  background: var(--color-surface);
}

.modal__footer-spacer { flex: 1 1 auto; }


/* ==========================================================================
   11 · TAB BARS
   Every tab the same height and weight, one active treatment: a soft primary
   wash plus a 2px indicator drawn as an inset shadow, so the indicator works
   on the pill shape the product already uses.
   ========================================================================== */
.tabbar__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-muted);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.tabbar__tab:not(.is-active):hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.tabbar__tab.is-active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 0 var(--color-primary);
}


/* --------------------------------------------------------------------------
   11b · DROPDOWN TAB BARS  (Administration, Report centre)

   Single-row menubar with floating <details> menus. Admin tabs split the
   bar equally (1fr). Report centre keeps content-sized triggers and
   scrolls horizontally when needed. Caret stays as the "opens a menu"
   affordance.
   -------------------------------------------------------------------------- */
.admin-top-nav,
.rptx-top-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  padding: 8px var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.admin-top-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: 100%;
}

.admin-nav-group,
.rptx-nav-all,
.rptx-nav-group {
  position: relative;
  flex: 0 0 auto;
  width: auto;
}

.admin-top-nav .admin-nav-group {
  flex: none;
  width: 100%;
  min-width: 0;
}

.admin-top-nav .admin-nav-group[open],
.rptx-top-nav .rptx-nav-group[open] {
  z-index: 30;
}

.admin-top-nav__trigger,
.rptx-nav-all,
.rptx-nav-group__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.admin-top-nav .admin-top-nav__trigger {
  width: 100%;
}

.admin-top-nav .admin-nav-group:not(.is-active) > .admin-top-nav__trigger:hover,
.rptx-top-nav .rptx-nav-all:not(.is-active):hover,
.rptx-top-nav .rptx-nav-group:not(.is-active) > .rptx-nav-group__trigger:hover {
  background: var(--color-surface-hover);
  border-color: transparent;
  color: var(--color-text);
}

/* admin.css states are written as `.admin-top-nav .admin-nav-group… > …`
   (four classes), so these have to match that weight to win on load order. */
.admin-top-nav .admin-nav-group.is-active > .admin-top-nav__trigger,
.admin-top-nav .admin-nav-group[open] > .admin-top-nav__trigger,
.rptx-top-nav .rptx-nav-all.is-active,
.rptx-top-nav .rptx-nav-group.is-active > .rptx-nav-group__trigger,
.rptx-top-nav .rptx-nav-group[open] > .rptx-nav-group__trigger {
  background: var(--color-primary-light);
  border-color: transparent;
  color: var(--color-primary-dark);
  font-weight: 700;
}
.admin-top-nav .admin-nav-group.is-active > .admin-top-nav__trigger,
.rptx-top-nav .rptx-nav-all.is-active,
.rptx-top-nav .rptx-nav-group.is-active > .rptx-nav-group__trigger {
  box-shadow: inset 0 -2px 0 0 var(--color-primary);
}

.admin-top-nav .admin-nav-group__panel,
.rptx-top-nav .rptx-nav-group__panel {
  z-index: 1000;
}

.tab-count:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  background: var(--color-danger);
  color: var(--color-sidebar-active);
  flex-shrink: 0;
}


/* ==========================================================================
   12 · TOPBAR
   ========================================================================== */
.topbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  min-width: 0;
  flex-shrink: 0;
}


/* ==========================================================================
   13 · BUTTONS
   36px is the shared toolbar control height, so a button never sits a pixel
   or two off from the input beside it.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 6px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.btn--sm {
  min-height: 30px;
  padding: 2px 12px;
  font-size: 0.82rem;
}

.btn--lg {
  min-height: 44px;
  padding: 8px 22px;
  font-size: 0.95rem;
}

.btn:disabled,
.btn[disabled] { cursor: not-allowed; }

.btn-group,
.row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* ==========================================================================
   14 · MODALS
   ========================================================================== */
/* Only `width` is normalised here. max-width / max-height / overflow /
   border-radius are deliberately NOT re-declared: core.css already sets sane
   defaults, and modules legitimately vary them (the supplier portal's drawer
   is 880px and clips its own scroll). Re-stating them in this layer would
   silently win over those module rules purely because it loads last. */
.modal__dialog {
  width: 100%;
}

.modal__dialog--sm { max-width: 420px; }
.modal__dialog--md { max-width: 640px; }
.modal__dialog--lg { max-width: 820px; }
.modal__dialog--xl { max-width: 1040px; }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 18px var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.modal__header h3 {
  margin: 0;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.modal__body {
  padding: var(--space-4);
  min-width: 0;
}

.modal__close {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}


/* ==========================================================================
   15 · STATUS PILLS
   Every st-* pill is the same capsule with the same dot, whatever the state.
   The dot uses currentColor, so it is always the state's own token colour and
   needs neither a per-status rule nor a dark-mode override.
   ========================================================================== */
[class^="st-"],
[class*=" st-"],
.status-pill,
.urg-low,
.urg-medium,
.urg-high,
.urg-critical {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

[class^="st-"]::before,
[class*=" st-"]::before,
.status-pill::before,
.urg-low::before,
.urg-medium::before,
.urg-high::before,
.urg-critical::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}


/* ==========================================================================
   16 · SIDEBAR
   ========================================================================== */
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.3;
}

.sidebar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.sidebar__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.sidebar__label {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.sidebar__badge,
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}


/* ==========================================================================
   17 · RESPONSIVE
   ========================================================================== */

/* --- 1024px: four-up field grids become two-up -------------------------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 768px: single column, tighter gutters, sheet-style modals ---------- */
@media (max-width: 768px) {
  .content { padding: var(--space-3); }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .section-head__tools,
  .section-head__actions {
    width: 100%;
    margin-left: 0;
  }

  .filters .filters__actions,
  .filters-bar__actions {
    width: 100%;
    margin-left: 0;
  }

  /* Modals dock to the bottom of the screen like a sheet. */
  .modal {
    align-items: flex-end;
    padding: 0;
  }
  .modal__dialog,
  .modal__dialog--sm,
  .modal__dialog--md,
  .modal__dialog--lg,
  .modal__dialog--xl,
  .modal__dialog--wide {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal__header,
  .modal__body,
  .modal__dialog > .modal__footer,
  .modal__dialog > form > .modal__footer { padding: var(--space-3); }
}

/* --- 480px: thumb-friendly, and no iOS zoom-on-focus -------------------- */
@media (max-width: 480px) {
  .form__input,
  .form__select,
  .form__textarea,
  input,
  select,
  textarea { font-size: 16px; }

  .btn { min-height: 40px; }
  .btn--sm { min-height: 34px; }

  .table-wrap tbody td .btn,
  .doc-registry__actions .btn,
  .srq-docs__item .btn,
  td.row-actions .btn {
    min-height: 34px;
    height: 34px;
  }

  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card {
    min-height: 88px;
    padding: var(--space-3);
  }
  .stat-card__value { font-size: 1.5rem; }

  .filters .form__input,
  .filters .form__select,
  .filters .btn,
  .filters-bar .form__input,
  .filters-bar .form__select,
  .filters-bar .btn {
    height: 40px;
    min-height: 40px;
  }

  .filters > *,
  .filters-bar > * { flex: 1 1 100%; }
}


/* ==========================================================================
   18 · DARK MODE
   Nothing above needs a dark-mode branch: every colour is a --color-* token
   that :root[data-theme="dark"] already redefines, and the select arrow is
   painted with var(--color-muted) instead of a baked-in image. The rules
   below are the only ones that have to be re-stated, because the element
   sits on top of another surface.
   ========================================================================== */
:root[data-theme="dark"] .table-wrap thead th { background: var(--color-thead-bg); }

:root[data-theme="dark"] .modal__dialog > .modal__footer,
:root[data-theme="dark"] .modal__dialog > form > .modal__footer { background: var(--color-surface); }


/* ==========================================================================
   19 · PRINT
   Chrome off, content full width.
   ========================================================================== */
@media print {
  .sidebar,
  .topbar,
  .tabbar,
  .filters,
  .filters-bar,
  .toast-stack,
  .ai-fab,
  .ai-panel,
  .floating-save-bar,
  .nav-hamburger,
  .app-nav-backdrop,
  .cmdk-overlay,
  .form-actions,
  .modal__footer { display: none !important; }

  .app-main {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .content {
    padding: 0 !important;
    overflow: visible !important;
  }

  .table-wrap {
    overflow: visible !important;
    box-shadow: none;
  }

  .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-card {
    box-shadow: none;
    break-inside: avoid;
  }
  .section-head { break-after: avoid; }
}


/* ==========================================================================
   20 · AUTH PAGES (login / forgot / reset / enter)
   The auth card keeps its own deliberately larger, light-only styling. All
   this does is make its fields and its submit button exactly the same height
   so they line up, and put its labels on the same type scale as the rest of
   the product.
   ========================================================================== */
.auth-card .form__label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.auth-card .form__input { min-height: 48px; }

.auth-card .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

/* ==========================================================================
   20b · PHONE SHELL HARDENING (loads last — wins over module floors)
   ========================================================================== */
@media (max-width: 900px) {
  .table-wrap table,
  .workflow-page .table-wrap table,
  .fin-pay-confirm-table {
    min-width: 0 !important;
  }
  .table-wrap,
  .tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .app-main {
    margin-left: 0 !important;
  }
}

@media (max-width: 640px) {
  .stat-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .filters-bar,
  .ready-issue-toolbar,
  .users-list-toolbar {
    width: 100%;
  }
  .card__body {
    padding: var(--space-3);
  }
  .collection-hub__hero,
  .collection-hub__tools {
    flex-direction: column;
    align-items: stretch;
  }
  .collection-hub__tools .btn {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .stat-row {
    grid-template-columns: 1fr;
  }
  .topbar__tools .btn,
  .topbar__tools button {
    min-width: 40px;
  }
}


/* ==========================================================================
   21 · THE hidden ATTRIBUTE
   --------------------------------------------------------------------------
   Last rule in the last stylesheet, deliberately.

   `hidden` is how this codebase hides things from PHP and from JS
   (`host.hidden = true`), but the UA rule behind it is weaker than any author
   rule — so a component rule such as `.stat-row { display: grid }` silently
   un-hid the element and left an empty grid plus its margin on the page.
   Declaring it here, after every display declaration above, makes `hidden`
   win at equal specificity again. No !important: an inline style.display set
   by JS, and any more specific module rule, still take precedence.
   ========================================================================== */
[hidden] { display: none; }