/* =========================================================================
   ADA ERP — shared component layer
   =========================================================================
   Restyles the Bootstrap/WowDash primitives the 289 existing views already
   use (.card 521 uses, .btn 819, .form-control 913, .table 227), so an area
   adopts the design system without a single view file being edited.

   SCOPE: everything is nested under .ada-ui, applied by _DashboardLayout to
   every area EXCEPT those in its adaUiExcludedAreas set. The layer is the
   house style — areas opt OUT, they do not opt in. (This comment previously
   described an adaUiAreas opt-in set "currently Property and Payroll"; that
   set no longer exists.)

   Depends on ada-theme.css for tokens, and on ada-bridge.css for the vendor
   variables those tokens are pushed into.
   ========================================================================= */

.ada-ui {
  background: var(--ada-canvas);
}

/* Views wrap their content in .dashboard-main-body; give it breathing room
   consistent with the dashboard rather than the template's tighter default. */
.ada-ui .dashboard-main-body {
  padding: clamp(16px, 2.2vw, 24px);
}

/* -------------------------------------------------------------------------
   Cards — 521 uses
   Softer corners, a real shadow instead of a hard border, no heavy dividers.
   ------------------------------------------------------------------------- */

.ada-ui .card {
  background: var(--ada-surface);
  border: 0;
  border-radius: var(--ada-r-lg);
  box-shadow: var(--ada-shadow-md);
}

.ada-ui .card-header {
  background: transparent;
  border-bottom: 1px solid var(--ada-hairline);
  padding: 16px 20px;
  font-weight: 600;
  color: var(--ada-ink);
}

.ada-ui .card-footer {
  background: transparent;
  border-top: 1px solid var(--ada-hairline);
}

/* WowDash's radius utility is used 649 times; realign it to the new scale
   so hand-rolled surfaces match the components around them. */
.ada-ui .radius-8 {
  border-radius: var(--ada-r-sm) !important;
}

/* -------------------------------------------------------------------------
   Buttons — 826 uses, 84 distinct variants across the views

   Height comes from --input-height (42px), the same vendor token
   .form-control already uses. Before this, buttons carried padding only and
   let height fall out of line-height, which produced four different control
   heights: input 41.6, .btn 40.1, .btn-sm 38.6, .btn-icon.btn-md 35. In the
   filter-row pattern used on nearly every list page, nothing lined up.
   One anchor, one row that aligns.
   ------------------------------------------------------------------------- */

.ada-ui .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ada-space-2);
  min-height: var(--input-height);
  border-radius: var(--ada-r-pill);
  font-weight: var(--ada-weight-semi);
  font-size: var(--ada-text-md);
  line-height: var(--ada-leading-tight);
  padding: 0 var(--ada-space-5);
  transition: background-color var(--ada-dur) var(--ada-ease),
    border-color var(--ada-dur) var(--ada-ease),
    color var(--ada-dur) var(--ada-ease);
}

/* Sizes change the box, not just the type. The previous btn-xs shrank
   font-size and left padding at the base value, so an "extra small" button was
   the same width as a normal one with smaller text in it. */
.ada-ui .btn-sm {
  min-height: 36px;
  padding: 10px var(--ada-space-4);
  font-size: var(--ada-text-base);
  border-radius: var(--ada-r-pill);
}

.ada-ui .btn-xs {
  min-height: 30px;
  padding: 10px var(--ada-space-3);
  font-size: var(--ada-text-sm);
  border-radius: var(--ada-r-pill);
}

.ada-ui .btn-lg {
  min-height: 50px;
  padding: 12px var(--ada-space-6);
  font-size: var(--ada-text-lg);
  border-radius: var(--ada-r-pill);
}

/* btn-md is a WowDash size with no Bootstrap equivalent — 207 uses. It means
   "default", so it must agree with the base rule rather than fight it. */
.ada-ui .btn-md {
  min-height: var(--input-height);
  font-size: var(--ada-text-md);
}

/* Icon buttons are square and share the anchor height, so they sit level with
   text buttons and inputs in a toolbar. 210 uses — the action button in every
   table row in the application. */
.ada-ui .btn-icon {
  width: calc(var(--input-height) - 4px);
  min-width: calc(var(--input-height) - 4px);
  min-height: calc(var(--input-height) - 4px);
  padding: 0;
  flex: 0 0 auto;
}

.ada-ui .btn-icon.btn-sm {
  width: 36px;
  min-width: 36px;
}

.ada-ui .btn-icon.btn-xs {
  width: 30px;
  min-width: 30px;
}

/* Pressed state. Buttons had hover, focus and disabled but nothing for the
   press itself, so a click gave no confirmation. */
.ada-ui .btn:active {
  transform: translateY(1px);
}

.ada-ui .btn-primary {
  background: var(--ada-accent-fill);
  border-color: var(--ada-accent-fill);
  color: #fff;
}

.ada-ui .btn-primary:hover,
.ada-ui .btn-primary:focus {
  background: var(--primary-700);
  border-color: var(--primary-700);
  color: #fff;
}

.ada-ui .btn-secondary,
.ada-ui .btn-light {
  background: var(--primary-50);
  border-color: transparent;
  color: var(--ada-accent-on-light);
}

.ada-ui .btn-secondary:hover,
.ada-ui .btn-light:hover {
  background: var(--primary-100);
  color: var(--ada-accent-on-light);
}

.ada-ui .btn-outline-primary {
  border-color: var(--primary-300);
  color: var(--ada-accent-on-light);
  background: transparent;
}

.ada-ui .btn-outline-primary:hover {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
}

/* Destructive actions stay visually distinct from the primary path.
   Was #C22A34 — a fourth red, alongside --ada-danger #CA2323 on badges,
   Bootstrap's #DC2626 on .btn-outline-danger and #E14B4B as --ada-danger-fill.
   All of them now resolve through the token. */
.ada-ui .btn-danger {
  background: var(--ada-danger-solid);
  border-color: var(--ada-danger-solid);
  color: #fff;
}

.ada-ui .btn-danger:hover,
.ada-ui .btn-danger:focus {
  background: var(--ada-danger-solid-hover);
  border-color: var(--ada-danger-solid-hover);
  color: #fff;
}

/* Bootstrap's success/warning fills had the same problem: stock #047857 and
   an amber that white text cannot sit on. Routed through the solid tokens. */
.ada-ui .btn-success {
  background: var(--ada-ok-solid);
  border-color: var(--ada-ok-solid);
  color: #fff;
}

.ada-ui .btn-success:hover,
.ada-ui .btn-success:focus {
  background: var(--ada-ok-solid-hover);
  border-color: var(--ada-ok-solid-hover);
  color: #fff;
}

.ada-ui .btn-warning {
  background: var(--ada-warn-solid);
  border-color: var(--ada-warn-solid);
  color: #fff;
}

.ada-ui .btn-warning:hover,
.ada-ui .btn-warning:focus {
  background: var(--ada-warn-solid-hover);
  border-color: var(--ada-warn-solid-hover);
  color: #fff;
}

/* Outline variants take the text-role token, which DOES invert per theme. */
.ada-ui .btn-outline-danger {
  border-color: var(--ada-danger);
  color: var(--ada-danger);
  background: transparent;
}

.ada-ui .btn-outline-success {
  border-color: var(--ada-ok);
  color: var(--ada-ok);
  background: transparent;
}

/* btn-outline-light was unstyled by this layer and inherited style.css's
   hardcoded #5d5d5d — fine on the light canvas, 2.71:1 in dark mode.

   Set through --bs-btn-* rather than `color`: Bootstrap 5 buttons resolve
   every colour from those variables inside .btn, so a plain `color` here loses
   to .btn's own declaration no matter how specific this selector is. Setting
   the variable is both the working fix and the same lever the token bridge
   uses everywhere else. */
.ada-ui .btn-outline-light {
  --bs-btn-color: var(--ada-ink-soft);
  --bs-btn-border-color: var(--ada-border);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--ada-accent-on-light);
  --bs-btn-hover-bg: var(--ada-surface-2);
  --bs-btn-hover-border-color: var(--primary-300);
  --bs-btn-active-color: var(--ada-accent-on-light);
  --bs-btn-active-bg: var(--ada-surface-2);
  --bs-btn-active-border-color: var(--primary-300);
}

.ada-ui .btn-outline-danger:hover {
  background: var(--ada-danger-solid);
  border-color: var(--ada-danger-solid);
  color: #fff;
}

.ada-ui .btn-outline-success:hover {
  background: var(--ada-ok-solid);
  border-color: var(--ada-ok-solid);
  color: #fff;
}

.ada-ui .btn:disabled,
.ada-ui .btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The most-used colour variant in the app — 195 uses — and it was running on
   stock Bootstrap grey #6C757D, the one neutral that matches nothing else
   here. Now on the ADA ink ramp. */
.ada-ui .btn-outline-secondary {
  border-color: var(--ada-border);
  color: var(--ada-ink-soft);
  background: transparent;
}

.ada-ui .btn-outline-secondary:hover,
.ada-ui .btn-outline-secondary:focus {
  background: var(--ada-surface-2);
  border-color: var(--primary-300);
  color: var(--ada-accent-on-light);
}

/* 105 uses. Bootstrap draws the X as a background-image, so only the box needs
   correcting — but it must not inherit the 42px button height, or it dwarfs
   the header text beside it. */
.ada-ui .btn-close {
  min-height: auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--ada-r-sm);
  opacity: 0.55;
}

.ada-ui .btn-close:hover {
  opacity: 1;
  background-color: var(--ada-surface-2);
}

/* Should read as a link, not a pill. */
.ada-ui .btn-link {
  min-height: auto;
  padding: 0;
  color: var(--ada-accent-on-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ada-ui .btn-link:active {
  transform: none;
}

/* -------------------------------------------------------------------------
   Form controls — 913 inputs, 1011 labels
   ------------------------------------------------------------------------- */

.ada-ui .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ada-ink);
  margin-bottom: 8px;
}

.ada-ui .form-control,
.ada-ui .form-select {
  /* The vendor declares --input-height: 42px but its .form-control rule never
     consumes it — height fell out of padding and landed at 41.6px, 0.4px short
     of the buttons that DO use the token. Both families are anchored to it
     here so a control row lines up exactly rather than nearly. */
  min-height: var(--input-height);
  border: var(--ada-border-width) solid var(--ada-border);
  border-radius: var(--ada-r-sm);
  /* background-COLOR, never the `background` shorthand: the shorthand also
     resets background-image, and Bootstrap draws the select's dropdown
     chevron as a background-image data URI. An earlier version of this rule
     used the shorthand and silently removed the arrow from every select in
     the app — 89 views — leaving them looking like plain text boxes. */
  background-color: var(--ada-surface);
  color: var(--ada-ink);
  padding: 8px 12px;
  transition: border-color var(--ada-dur) var(--ada-ease),
    box-shadow var(--ada-dur) var(--ada-ease);
}

/* Chevron inset. Bootstrap parks it 12px from the border, which sits too tight
   against the edge on this rounded 10px control; moved to 16px.

   padding-right must clear the chevron's new position, not just its old one:
   16px inset + 16px glyph + 8px gap = 40px. Leaving it at Bootstrap's 36px
   would drag the selected text under the arrow. */
.ada-ui .form-select {
  padding-right: 40px;
  background-position: right 16px center;
}

.ada-ui .form-control::placeholder {
  color: var(--ada-ink-mute);
}

.ada-ui .form-control:focus,
.ada-ui .form-select:focus {
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.13);
  outline: 0;
}

/* Read-only must look different from disabled — they mean different things:
   one is "not yours to change", the other is "not available right now". */
.ada-ui .form-control[readonly] {
  background: var(--ada-surface-2);
  border-style: dashed;
}

.ada-ui .form-control:disabled,
.ada-ui .form-select:disabled {
  background: #F1F0F7;
  color: var(--ada-ink-mute);
  cursor: not-allowed;
}

.ada-ui .form-control.is-invalid,
.ada-ui .form-select.is-invalid {
  border-color: #C22A34;
}

.ada-ui .invalid-feedback {
  font-size: 12px;
  color: #C22A34;
}

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

.ada-ui .input-group-text {
  background: var(--ada-surface-2);
  border-color: var(--ada-border);
  border-radius: var(--ada-r-sm);
  color: var(--ada-ink-soft);
}

/* select2 is used in 106 views and renders its own DOM, so it needs to be
   matched to .form-control explicitly or the two sit side by side mismatched. */
.ada-ui .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 42px;
  padding: 4px 8px;
  border: var(--ada-border-width) solid var(--ada-border);
  border-radius: var(--ada-r-sm);
}

.ada-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ada-ink);
  line-height: 30px;
}

.ada-ui .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.13);
}

.ada-ui .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--primary-600);
}

/* -------------------------------------------------------------------------
   Tables — 193 views
   ------------------------------------------------------------------------- */

.ada-ui .table {
  --bs-table-bg: transparent;
  margin-bottom: 0;
  color: var(--ada-ink);
}

.ada-ui .table>thead th {
  background: var(--ada-surface-2);
  border-bottom: 1px solid var(--ada-hairline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ada-ink-mute);
  padding: 12px 16px;
  white-space: nowrap;
  max-width: 400px;
}

.ada-ui .table>tbody td {
  border-bottom: 1px solid var(--ada-hairline);
  padding: 12px 16px;
  vertical-align: middle;
  font-size: 14px;
  max-width: 400px;
}

.ada-ui .table>tbody tr:last-child td {
  border-bottom: 0;
}

.ada-ui .table>tbody tr:hover {
  background: var(--primary-50);
}

/* Figures line up column-wise only with tabular figures; proportional digits
   make amount columns ragged and hard to compare down the page. */
.ada-ui .table td.text-end,
.ada-ui .table th.text-end {
  font-variant-numeric: tabular-nums;
}

.ada-ui .table-responsive {
  border-radius: var(--ada-r-md);
}

/* -------------------------------------------------------------------------
   Status badges — 114 views
   Semantic and fixed: a given state is the same colour in every module.
   Never colour alone — the label always carries the meaning too.
   ------------------------------------------------------------------------- */

.ada-ui .badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.2px;
}

/* The app's actual status chip is `badge bg-{hue}-100 text-{hue}-600`. Those
   stock -600 values were chosen to sit on white; on their own -100 tint they
   fail AA badly — measured on a live Property page: warning 1.91:1, success
   3.00:1, primary 3.89:1, danger 3.95:1, info 4.24:1.

   Darkened here for the TEXT case only. The --{hue}-600 tokens themselves are
   left alone, so button fills, the dashboard hero and module hovers keep their
   colour — white-on-fill already passes in that direction.

   !important is required, not lazy: WowDash declares these utilities as
   `.text-success-600 { color: var(--success-600) !important }`, so extra
   specificity alone loses to it. Matching the flag plus higher specificity
   wins the cascade. */
.ada-ui .text-success-600 {
  color: #117F3A !important;
}

/* 4.64 on -100, 5.10 on white */
.ada-ui .text-warning-600 {
  color: #9E6319 !important;
}

/* 4.60 on -100, 4.94 on white */
.ada-ui .text-danger-600 {
  color: #CA2323 !important;
}

/* 4.55 on -100, 5.56 on white */
.ada-ui .text-info-600 {
  color: #245FE2 !important;
}

/* 4.52 on -100, 5.51 on white */
.ada-ui .text-primary-600 {
  color: #6153D0 !important;
}

/* 4.60 on -100, 5.74 on white */

/* The -focus tints are the other status pattern WowDash ships; kept in step. */
.ada-ui .bg-success-focus,
.ada-ui .badge.bg-success {
  background: #E7F8EF !important;
  color: #117F3A !important;
}

.ada-ui .bg-warning-focus,
.ada-ui .badge.bg-warning {
  background: #FEF3DC !important;
  color: #9E6319 !important;
}

.ada-ui .bg-danger-focus,
.ada-ui .badge.bg-danger {
  background: #FFE9EC !important;
  color: #CA2323 !important;
}

.ada-ui .bg-info-focus,
.ada-ui .badge.bg-info {
  background: #EAF3FE !important;
  color: #245FE2 !important;
}

.ada-ui .bg-primary-focus {
  background: var(--primary-50) !important;
  color: var(--ada-accent-on-light) !important;
}

/* -------------------------------------------------------------------------
   Vendor neutral text utilities that fail on the ADA canvas
   -------------------------------------------------------------------------
   Moving the page ground from white to --ada-canvas #F3F2FE lowered the bar
   for every vendor text colour. Measured, only two of them dropped below AA:

     text-neutral-500  #6B7280   4.83:1 on white  ->  4.36:1 on canvas   (1 use)
     text-neutral-400  #9CA3AF   2.54:1 on white  ->  2.29:1 on canvas   (4 uses)

   text-neutral-400 failed on white too, so it was never a text colour.
   --ada-ink-mute was tuned against the canvas specifically and measures
   4.87:1 there. The dominant utility, text-secondary-light (850 uses across
   182 views), measures 6.82:1 and is deliberately left alone.

   !important matches the vendor's own flag on these utilities. */
.ada-ui .text-neutral-400,
.ada-ui .text-neutral-500 {
  color: var(--ada-ink-mute) !important;
}

/* -------------------------------------------------------------------------
   Modals — 93 views
   ------------------------------------------------------------------------- */

/* Scoped. These previously listed a bare .modal-content alongside the scoped
   selector, so the radius and shadow leaked onto the public site — the one
   place the scoping decision explicitly excluded. */
.ada-ui .modal-content {
  border: 0;
  border-radius: var(--ada-r-xl);
  box-shadow: var(--ada-shadow-lg);
}

.ada-ui .modal-header {
  border-bottom: var(--ada-border-width) solid var(--ada-hairline);
  padding: var(--ada-space-4) var(--ada-space-5);
}

.ada-ui .modal-footer {
  border-top: var(--ada-border-width) solid var(--ada-hairline);
  padding: var(--ada-space-4) var(--ada-space-5);
}

/* -------------------------------------------------------------------------
   Breadcrumb + page heading — 89 views
   ------------------------------------------------------------------------- */

.ada-ui .breadcrumb {
  margin-bottom: 0;
  font-size: 13px;
}

.ada-ui .breadcrumb a {
  color: var(--ada-ink-mute);
  text-decoration: none;
}

.ada-ui .breadcrumb a:hover {
  color: var(--ada-accent-on-light);
}

.ada-ui .breadcrumb .active {
  color: var(--ada-ink);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Pagination — DataTables renders its own
   ------------------------------------------------------------------------- */

.ada-ui .page-link {
  border: 0;
  border-radius: var(--ada-r-sm);
  color: var(--ada-ink-soft);
  margin: 0 2px;
}

.ada-ui .page-item.active .page-link {
  background: var(--primary-600);
  color: #fff;
}

.ada-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
  color: #fff !important;
  border-radius: var(--ada-r-sm);
}

/* -------------------------------------------------------------------------
   Focus visibility
   -------------------------------------------------------------------------
   Defined once, in ada-theme.css, app-wide. The duplicate that used to sit
   here differed from it (no border-radius) which is exactly how two copies of
   one ring drift apart. Do not re-add it.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------
   The block that used to sit here set transition-property on .btn,
   .form-control and .form-select to a list LONGER than their defaults, so it
   added transitions under reduced motion rather than removing any — and none
   of the listed properties are motion in the first place. It was a copy of the
   dashboard block that had lost its purpose.

   The real motion in this layer is the button's :active translate; that is
   what needs neutralising.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ada-ui .btn:active {
    transform: none;
    filter: brightness(0.94);
  }
}

/* =========================================================================
   Composed patterns
   =========================================================================
   Higher-level pieces assembled from the tokens: stat cards, deltas,
   progress, chips, tabs, callouts, label/value lists. Purely additive — new
   class names, so nothing existing changes by their presence, and they work
   inside or outside .ada-ui.

   These serve module dashboards and report pages. They do NOT help the CRUD
   bulk of the app, which is served by the primitives above.
   ========================================================================= */

/* ---------- Stat card --------------------------------------------------- */

.ada-stat {
  background: var(--ada-surface);
  border-radius: var(--ada-r-lg);
  box-shadow: var(--ada-shadow-md);
  padding: 20px;
}

.ada-stat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ada-stat-ico {
  width: 34px;
  height: 34px;
  border-radius: var(--ada-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--primary-50);
  color: var(--ada-accent-on-light);
}

.ada-stat-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ada-ink);
  flex: 1;
  min-width: 0;
}

.ada-stat-action {
  color: var(--ada-ink-mute);
  background: none;
  border: 0;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}

.ada-stat-action:hover {
  color: var(--ada-ink);
  background: var(--ada-surface-2);
}

.ada-stat-figure {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.ada-stat-value {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--ada-ink);
  font-variant-numeric: tabular-nums;
}

.ada-stat-unit {
  font-size: 15px;
  font-weight: 600;
  color: var(--ada-ink-mute);
}

.ada-stat-note {
  font-size: 13px;
  color: var(--ada-ink-mute);
  margin-top: 8px;
}

/* ---------- Delta ------------------------------------------------------
   Direction is carried by an arrow glyph, not colour alone — red/green with
   no other cue is unreadable for a large share of colour-blind users.
   ----------------------------------------------------------------------- */

.ada-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ada-delta.is-up {
  color: #15803D;
}

.ada-delta.is-down {
  color: #C22A34;
}

.ada-delta.is-flat {
  color: var(--ada-ink-mute);
}

.ada-delta::before {
  font-size: 11px;
}

.ada-delta.is-up::before {
  content: "\25B2";
}

.ada-delta.is-down::before {
  content: "\25BC";
}

.ada-delta.is-flat::before {
  content: "\2013";
}

/* ---------- Progress ---------------------------------------------------- */

.ada-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--ada-surface-2);
  overflow: hidden;
}

.ada-bar>span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary-600);
}

/* Segmented: parts of a whole, side by side. */
.ada-bar-split {
  display: flex;
  gap: 4px;
  height: 8px;
}

.ada-bar-split>span {
  height: 100%;
  border-radius: 999px;
}

.ada-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
}

.ada-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ada-ink-soft);
}

.ada-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ada-legend-value {
  margin-left: auto;
  font-weight: 600;
  color: var(--ada-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- Filter chips ------------------------------------------------ */

.ada-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ada-filter {
  border: 1px solid var(--ada-hairline);
  background: var(--ada-surface);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ada-ink-soft);
  cursor: pointer;
  transition: background var(--ada-dur) var(--ada-ease),
    color var(--ada-dur) var(--ada-ease),
    border-color var(--ada-dur) var(--ada-ease);
}

.ada-filter:hover {
  border-color: var(--primary-300);
  color: var(--ada-accent-on-light);
}

.ada-filter[aria-pressed="true"],
.ada-filter.is-active {
  background: var(--primary-50);
  border-color: transparent;
  color: var(--ada-accent-on-light);
}

/* ---------- Underline tabs ---------------------------------------------- */

.ada-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--ada-hairline);
}

.ada-tab {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ada-ink-mute);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

.ada-tab:hover {
  color: var(--ada-ink);
}

.ada-tab[aria-selected="true"],
.ada-tab.is-active {
  color: var(--ada-accent-on-light);
  border-bottom-color: var(--primary-600);
}

/* ---------- Callout row ------------------------------------------------- */

.ada-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--ada-hairline);
  background: var(--ada-surface);
  color: var(--ada-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--ada-dur) var(--ada-ease),
    border-color var(--ada-dur) var(--ada-ease);
}

.ada-callout:hover {
  background: var(--ada-surface-2);
  border-color: var(--primary-300);
  color: var(--ada-ink);
}

.ada-callout-arrow {
  margin-left: auto;
  color: var(--ada-ink-mute);
}

/* Rectangular variant for multi-line advisory text. */
.ada-callout.is-block {
  border-radius: var(--ada-r-sm);
  background: var(--ada-surface-2);
  border-color: transparent;
  font-weight: 500;
  color: var(--ada-ink-soft);
  align-items: flex-start;
  line-height: 1.5;
}

/* ---------- Label / value list ------------------------------------------
   Title with a quiet sub-caption, then right-aligned figures.
   ----------------------------------------------------------------------- */

.ada-rows {
  display: flex;
  flex-direction: column;
}

.ada-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ada-hairline);
}

.ada-row:last-child {
  border-bottom: 0;
}

.ada-row-main {
  flex: 1;
  min-width: 0;
}

.ada-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ada-ink);
}

.ada-row-sub {
  font-size: 13px;
  color: var(--ada-ink-mute);
  margin-top: 2px;
}

.ada-row-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ada-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 62px;
}

/* ---------- Split comparison -------------------------------------------- */

.ada-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
}

.ada-split-item {
  padding-left: 12px;
  border-left: 3px solid var(--ada-hairline);
}

.ada-split-item.is-accent {
  border-left-color: var(--primary-600);
}

.ada-split-label {
  font-size: 13px;
  color: var(--ada-ink-mute);
}

.ada-split-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ada-ink);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {

  .ada-filter,
  .ada-callout {
    transition-property: background-color, border-color, color;
  }
}

/* ======== DataTables — header & footer scroll fix ===== */

/* The outer container must not scroll — the controls stay put. */
div.dt-container {
  overflow-x: hidden;
}

/* Top row (length + search) and bottom row (info + paging):
   clip to the container width, never scroll. */
div.dt-container div.dt-layout-row:not(.dt-layout-table) {
  overflow-x: hidden;
  width: 100%;
}

/* Only the table row gets horizontal scroll. */
div.dt-container div.dt-layout-row.dt-layout-table {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  /* Show a scrollbar track so the user can always see it's scrollable. */
  -webkit-overflow-scrolling: touch;
}

/* Prevent the table inside from collapsing below its natural width. */
div.dt-container div.dt-layout-row.dt-layout-table table.dataTable {
  min-width: 100%;
}

/* =========================================================================
   Typography classes
   ========================================================================= */

.ada-title-xl,
.ada-title-lg,
.ada-title-md,
.ada-title-sm,
.ada-title-xs {
  color: var(--ada-ink);
  letter-spacing: var(--ada-tracking-snug);
  margin: 0;
  text-wrap: balance;
}

.ada-title-xl {
  font-size: var(--ada-text-2xl);
  font-weight: var(--ada-weight-bold);
  line-height: var(--ada-leading-tight);
}

.ada-title-lg {
  font-size: var(--ada-text-xl);
  font-weight: var(--ada-weight-bold);
  line-height: var(--ada-leading-tight);
}

.ada-title-md {
  font-size: var(--ada-text-lg);
  font-weight: var(--ada-weight-semi);
  line-height: var(--ada-leading-snug);
}

.ada-title-sm {
  font-size: var(--ada-text-md);
  font-weight: var(--ada-weight-semi);
  line-height: var(--ada-leading-snug);
}

/* Section eyebrow — small, uppercase, quiet. This is what most of the 614
   <h6> elements were actually reaching for. */
.ada-title-xs {
  font-size: var(--ada-text-sm);
  font-weight: var(--ada-weight-bold);
  letter-spacing: var(--ada-tracking-wide);
  text-transform: uppercase;
  color: var(--ada-ink-mute);
  line-height: var(--ada-leading-snug);
}

/* -------------------------------------------------------------------------
   Global Sticky Table Header
   -------------------------------------------------------------------------
   This replaces DataTables' built-in scrollY which physically splits tables 
   and breaks column width synchronization when responsive mode is on. 
   By using standard CSS, the table remains a single element and natively 
   aligns perfectly. */

/* .ada-ui .table-responsive {
  max-height: calc(100vh - 250px);
  overflow-y: auto;
} */

.ada-ui .table-responsive thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--ada-surface-2, #fff);
  box-shadow: inset 0 -1px 0 var(--ada-hairline, #dee2e6), inset 0 1px 0 var(--ada-hairline, #dee2e6);
}

.ada-ui table.dataTable {
  margin-top: 0 !important;
}
/* Added for table columns fixing wrapping */
th.tbl-date, td.tbl-date { min-width: 150px !important; white-space: nowrap !important; }
th.tbl-scheme, td.tbl-scheme { min-width: 200px !important; white-space: nowrap !important; }
th.tbl-state, td.tbl-state { min-width: 150px !important; white-space: nowrap !important; }

.min-w-200 { min-width: 200px !important; }