/* =========================================================================
   ADA ERP — dashboard components
   =========================================================================
   Depends on ada-theme.css for tokens. Scoped under .ada-dash so nothing
   here leaks into module pages that still use the stock WowDash layout.
   ========================================================================= */

.ada-dash {
  background: var(--ada-canvas);
  padding: clamp(16px, 2.2vw, 24px);
  min-height: 100%;
}

/* ---------- Header ------------------------------------------------------ */

.ada-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(16px, 1.8vw, 24px);
}

.ada-greet {
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ada-ink);
  margin: 0;
  line-height: 1.15;
}

.ada-greet-sub {
  font-size: clamp(12px, 1vw, 13px);
  color: var(--ada-ink-mute);
  margin: 4px 0 0;
}

.ada-head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --ada-accent-fill, not --primary-600: white text sits on this, and in dark
   mode --primary-600 lightens for the text role, which dropped white-on-fill
   to 3.37:1. Height matches --input-height so the header button aligns with
   controls elsewhere. */
.ada-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ada-space-2);
  min-height: var(--input-height);
  padding: 0 var(--ada-space-4);
  border-radius: var(--ada-r-pill);
  background: var(--ada-accent-fill);
  color: #fff;
  font-size: var(--ada-text-base);
  font-weight: var(--ada-weight-semi);
  text-decoration: none;
  border: 0;
  transition: background var(--ada-dur) var(--ada-ease);
}

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

/* ---------- Layout shell ------------------------------------------------ */

/* Equal columns that stretch, so the two panels fill the row and their tops
   and bottoms align rather than one leaving dead space beside the other. */
.ada-shell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* ---------- Surfaces ---------------------------------------------------- */

.ada-card {
  position: relative;
  background: var(--ada-surface);
  border-radius: var(--ada-r-lg);
  box-shadow: var(--ada-shadow-md);
  overflow: hidden;
}

/* ---------- Motifs -----------------------------------------------------
   Representational module artwork, bottom-right. Two tones of one hue, flat
   and stroke-free. Fully inset rather than bled off the corner: a cropped
   icon stops being recognisable, and recognition is the whole point on a
   launcher. Always aria-hidden.
   ----------------------------------------------------------------------- */

.ada-motif {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Module launcher --------------------------------------------
   This is the page's primary action, not a footnote: opening a module is
   what people come here to do. It gets full width and card sizing on par
   with the launcher it replaced (~285x205), NOT a compact chip strip.
   ----------------------------------------------------------------------- */

/* Leads the page, so it separates from the summary row below it. */
.ada-modules-section { margin-bottom: clamp(20px, 2.2vw, 28px); }

.ada-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ada-section-title {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  color: var(--ada-ink);
  margin: 0;
  letter-spacing: -0.2px;
}

.ada-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--ada-accent-on-light);
  text-decoration: none;
}

.ada-link:hover { color: var(--ada-accent-on-light); text-decoration: underline; }

/* Ten modules, so the column count is chosen rather than derived: 5, 2 and 1
   all divide 10 evenly. auto-fill produced 4 columns at ~1024px, which left
   two dead slots in the last row of the page's primary element. */
.ada-modules {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ada-space-4);
}

@media (max-width: 1199.98px) { .ada-modules { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 991.98px)  { .ada-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px)  { .ada-modules { grid-template-columns: minmax(0, 1fr); } }

.ada-module {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 172px;
  padding: 20px;
  border-radius: var(--ada-r-lg);
  background: var(--ada-surface);
  box-shadow: var(--ada-shadow-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--ada-dur) var(--ada-ease),
              box-shadow var(--ada-dur) var(--ada-ease),
              background-color var(--ada-dur) var(--ada-ease);
}

/* Every icon paints from three slots rather than fixed colours, so hover can
   restyle it without flattening it:
     --i-main  the dominant shape
     --i-soft  the second tone of the same hue
     --i-hole  knockouts — window panes, the gear's centre, the rupee glyph,
               the ruled lines on a document. These must match whatever is
               BEHIND the icon, which is the card, which changes on hover.
   Painting every shape one flat white (the earlier approach) erased all of
   the above, leaving blank silhouettes. */
.ada-module { --i-hole: var(--ada-surface); }

.ada-module[data-hue="indigo"] { --m-deep: var(--ada-motif-indigo-deep); --i-main: var(--ada-motif-indigo); --i-soft: var(--ada-motif-indigo-soft); }
.ada-module[data-hue="orange"] { --m-deep: var(--ada-motif-orange-deep); --i-main: var(--ada-motif-orange); --i-soft: var(--ada-motif-orange-soft); }
.ada-module[data-hue="teal"]   { --m-deep: var(--ada-motif-teal-deep);   --i-main: var(--ada-motif-teal);   --i-soft: var(--ada-motif-teal-soft); }
.ada-module[data-hue="violet"] { --m-deep: var(--ada-motif-violet-deep); --i-main: var(--ada-motif-violet); --i-soft: var(--ada-motif-violet-soft); }
.ada-module[data-hue="rose"]   { --m-deep: var(--ada-motif-rose-deep);   --i-main: var(--ada-motif-rose);   --i-soft: var(--ada-motif-rose-soft); }
.ada-module[data-hue="sky"]    { --m-deep: var(--ada-motif-sky-deep);    --i-main: var(--ada-motif-sky);    --i-soft: var(--ada-motif-sky-soft); }
.ada-module[data-hue="lime"]   { --m-deep: var(--ada-motif-lime-deep);   --i-main: var(--ada-motif-lime);   --i-soft: var(--ada-motif-lime-soft); }
.ada-module[data-hue="purple"] { --m-deep: var(--ada-motif-purple-deep); --i-main: var(--ada-motif-purple); --i-soft: var(--ada-motif-purple-soft); }
.ada-module[data-hue="pink"]   { --m-deep: var(--ada-motif-pink-deep);   --i-main: var(--ada-motif-pink);   --i-soft: var(--ada-motif-pink-soft); }
.ada-module[data-hue="green"]  { --m-deep: var(--ada-motif-green-deep);  --i-main: var(--ada-motif-green);  --i-soft: var(--ada-motif-green-soft); }
.ada-module[data-hue="red"]    { --m-deep: var(--ada-motif-red-deep);    --i-main: var(--ada-motif-red);    --i-soft: var(--ada-motif-red-soft); }
.ada-module[data-hue="blue"]   { --m-deep: var(--ada-motif-blue-deep);   --i-main: var(--ada-motif-blue);   --i-soft: var(--ada-motif-blue-soft); }
.ada-module[data-hue="fuchsia"] { --m-deep: var(--ada-motif-fuchsia-deep); --i-main: var(--ada-motif-fuchsia); --i-soft: var(--ada-motif-fuchsia-soft); }

.ada-module:hover,
.ada-module:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--ada-shadow-lg);
  background: var(--m-deep, var(--primary-700));

  /* Two levels of white keep the icon's internal contrast; the knockout
     switches to the fill colour so holes stay holes. */
  --i-main: rgba(255, 255, 255, 0.92);
  --i-soft: rgba(255, 255, 255, 0.45);
  --i-hole: var(--m-deep);
}

.ada-module:hover .ada-module-name,
.ada-module:hover .ada-module-metric,
.ada-module:hover .ada-module-go,
.ada-module:focus-visible .ada-module-name,
.ada-module:focus-visible .ada-module-metric,
.ada-module:focus-visible .ada-module-go {
  color: #FFFFFF;
}

.ada-module > *:not(.ada-motif) { position: relative; z-index: 1; }

.ada-module-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ada-ink);
  letter-spacing: -0.2px;
  line-height: 1.25;
}

.ada-module-metric {
  font-size: 13px;
  color: var(--ada-ink-mute);
  margin-top: 4px;
}

.ada-module-go {
  font-size: 18px;
  line-height: 1;
  color: var(--ada-ink);
  opacity: 0.28;
  transition: opacity var(--ada-dur) var(--ada-ease),
              transform var(--ada-dur) var(--ada-ease);
}

.ada-module:hover .ada-module-go,
.ada-module:focus-visible .ada-module-go {
  opacity: 0.9;
  transform: translateX(4px);
}

/* ---------- Side panel -------------------------------------------------- */

.ada-panel { padding: 16px; }

.ada-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ada-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ada-ink);
}

.ada-count {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  background: #FFE9EC;
  color: #C22A34; /* 4.9:1 on #FFE9EC */
}

/* ---------- Queue ------------------------------------------------------- */

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

.ada-queue-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 8px;
  margin: 0 -8px;
  border-radius: var(--ada-r-sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--ada-dur) var(--ada-ease);
}

.ada-queue-item + .ada-queue-item { border-top: 1px solid var(--ada-hairline); }
.ada-queue-item:hover { background: var(--ada-surface-2); color: inherit; }

.ada-queue-ico { flex-shrink: 0; margin-top: 1px; }

/* Title and meta stack. They are spans (an <a> may not contain block-level
   flow content in valid HTML), so the block behaviour comes from CSS. */
.ada-queue-body {
  display: block;
  min-width: 0;
}

.ada-queue-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ada-ink);
  line-height: 1.3;
}

.ada-queue-meta {
  display: block;
  font-size: 11px;
  color: var(--ada-ink-mute);
  margin-top: 2px;
}

/* ---------- Activity ---------------------------------------------------- */

.ada-activity { display: flex; flex-direction: column; gap: 12px; }

.ada-act {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.ada-act-text {
  font-size: 12px;
  color: var(--ada-ink-soft);
  line-height: 1.35;
}

.ada-act-text b { color: var(--ada-ink); font-weight: 600; }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 991.98px) {
  .ada-shell { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .ada-head { align-items: flex-start; }
  .ada-head-tools { width: 100%; }
  .ada-motif { transform: scale(0.82); transform-origin: bottom right; }
}

/* =========================================================================
   Reduced motion — a calm variant, not a kill switch. Colour and background
   feedback stay; only movement is removed.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .ada-module,
  .ada-module-go,
  .ada-btn,
  .ada-queue-item {
    transition-property: background-color, color, box-shadow, opacity;
  }
  .ada-module:hover { transform: none; }
  .ada-module:hover .ada-module-go { transform: none; }
}

/* Print: drop decoration, keep the numbers. */
@media print {
  .ada-dash { background: #fff; }
  .ada-motif, .ada-head-tools { display: none; }
  .ada-card, .ada-module { box-shadow: none; border: 1px solid #ddd; }
}

/* =========================================================================
   Property dashboard — hero summary panel + scheme table
   =========================================================================
   Scoped under .ada-prop. Replaces .yojna_card, which lives in the compiled
   vendor style.css (line ~17410) and was never on the token system: slate
   greys, a #487FFF blue accent and 8px corners inside a violet 16px app.

   The vendor rules are left in place and simply not used — editing compiled
   vendor CSS is unreviewable and cannot be regenerated.
   ========================================================================= */


/* ---------- Hero summary panel ------------------------------------------
   One deep surface carrying the portfolio total, with the parts inset as
   translucent chips. Same --primary-700 as the module cards' hover fill, so
   this page and the ERP dashboard read as one system.
   ----------------------------------------------------------------------- */

.ada-hero {
  position: relative;
  overflow: hidden;
  /* --ada-accent-deep, not --primary-700: white text and translucent white
     chips sit on this panel, so it has to stay dark when the theme inverts.
     --primary-700 is free to lighten for its text role; this is not. */
  background: var(--ada-accent-deep);
  border-radius: var(--ada-r-lg);
  padding: var(--ada-space-5) var(--ada-space-6);
  display: flex;
  align-items: center;
  gap: var(--ada-space-6);
  flex-wrap: wrap;
  /* A shared component: the property page and the payroll page both use it.
     This was var(--prop-gap), which is declared on .ada-prop — a class only
     the property page carries. On payroll the variable was undefined, the
     declaration was invalid at computed-value time, and the margin silently
     collapsed to 0, welding the hero to the block beneath it. Shared
     components take global tokens, never page-scoped ones. */
  margin-bottom: var(--ada-space-4);
}

/* Concentric arcs, bled off the top-right. Decorative only, always
   aria-hidden, and never behind text: the flex row keeps content left. */
.ada-hero-motif {
  position: absolute;
  right: -26px;
  top: -30px;
  pointer-events: none;
}

.ada-hero-total { position: relative; }

/* Was rgba(255,255,255,.72) — 3.28:1 once composited over the chip surface
   (14% white on --primary-700), which fails AA at 11-12px. These label every
   figure in the panel, so the numbers read but their meaning did not.

   Opacity cannot fix it: the chip surface composites to rgb(113,98,215), where
   even PURE white reaches only 4.74:1. At .92 it measured 4.28 — still short.
   So the labels are full white and the hierarchy is carried by size and weight
   instead, which is where it belongs: 11px regular against a 22px bold figure
   is already a clear two-level difference without dimming anything.

   The panel gets the hard case right already: the alert chip flips to a solid
   white block so the danger figure reads at 11.3:1 instead of 4.1:1. */
.ada-hero-label {
  font-size: var(--ada-text-sm);
  color: #FFFFFF;
  font-weight: var(--ada-weight-normal);
}

.ada-hero-value {
  font-size: var(--ada-text-4xl);
  font-weight: var(--ada-weight-bold);
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.ada-hero-chips {
  position: relative;
  display: flex;
  gap: var(--ada-space-2);
  margin-left: auto;
  flex-wrap: wrap;
}

.ada-hero-chip {
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--ada-r-md);
  padding: var(--ada-space-3) var(--ada-space-4);
  min-width: 84px;
}

/* Same correction as .ada-hero-label above: .72 measured 3.28:1 composited,
   .92 measured 4.28 — both short of 4.5. Full white is 4.74:1, the ceiling
   this chip surface allows. */
.ada-hero-chip-label {
  font-size: var(--ada-text-xs);
  color: #FFFFFF;
  font-weight: var(--ada-weight-normal);
}

/* The chip surface is what caps the label at 4.74:1. Deepening it slightly
   raises the ceiling for everything sitting on it without changing the inset
   look — the chip still reads as lighter than the panel behind it. */
.ada-hero-chip {
  background: rgba(255, 255, 255, 0.10);
}

.ada-hero-chip-value {
  font-size: var(--ada-text-2xl);
  font-weight: var(--ada-weight-bold);
  color: #FFFFFF;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

/* The one figure that must not blend into the panel. White block, danger ink:
   11.3:1, versus 4.1:1 for the same red laid straight onto the violet. */
.ada-hero-chip.is-alert { background: var(--ada-surface); }
.ada-hero-chip.is-alert .ada-hero-chip-label,
.ada-hero-chip.is-alert .ada-hero-chip-value { color: var(--ada-danger); }

/* ---------- Scheme cards ------------------------------------------------
   Replaces the sortable table. The sort control moves above the grid, since
   cards have no column headers to hang it on.
   ----------------------------------------------------------------------- */

/* Restored: the markup uses these two, but they were dropped when the table
   section was replaced by cards, so the heading fell back to browser defaults
   and the sort control wrapped onto its own line. Rewritten for the new
   context — the header now sits on the canvas, not inside a white card, so it
   carries no padding of its own. */
.ada-schemes-head {
  display: flex;
  /* center, not baseline: the select is much taller than the heading text and
     baseline alignment drags the heading down beside it. */
  align-items: center;
  justify-content: space-between;
  gap: var(--ada-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--ada-space-3);
}

.ada-schemes-title {
  font-size: var(--ada-text-xl);
  font-weight: var(--ada-weight-bold);
  color: var(--ada-ink);
  letter-spacing: -0.2px;
  margin: 0;
}

.ada-schemes-tools {
  display: flex;
  align-items: center;
  gap: var(--ada-space-2);
}

.ada-schemes-tools label {
  font-size: var(--ada-text-sm);
  color: var(--ada-ink-mute);
  margin: 0;
}

/* Three per row, stepping down to two then one.

   minmax(0, 1fr) not 1fr — a bare 1fr keeps min-width:auto, so the longest
   scheme name ("Janki Vihar Residential Scheme") would widen its own column
   and the columns would stop matching. */
.ada-scheme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ada-space-4);
}

.ada-scheme-card {
  display: flex;
  flex-direction: column;
  background: var(--ada-surface);
  border-radius: var(--ada-r-lg);
  box-shadow: var(--ada-shadow-md);
  padding: var(--ada-space-4);
  text-decoration: none;
  color: inherit;
  transition: transform var(--ada-dur) var(--ada-ease),
              box-shadow var(--ada-dur) var(--ada-ease);
}

.ada-scheme-card:hover,
.ada-scheme-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ada-shadow-lg);
  color: inherit;
}

/* No destination yet, so no hover lift and no pointer — both promise a click
   that does nothing. Applied when schemeDetailUrl is null; remove the class by
   setting a real route in Property.cshtml. */
.ada-scheme-card.is-static { cursor: default; }

.ada-scheme-card.is-static:hover {
  transform: none;
  box-shadow: var(--ada-shadow-md);
}

.ada-scheme-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ada-space-2);
}

.ada-scheme-card-name {
  font-size: var(--ada-text-lg);
  font-weight: var(--ada-weight-bold);
  color: var(--ada-ink);
  letter-spacing: -0.2px;
  line-height: 1.25;
  min-width: 0;
}

.ada-scheme-card-total {
  font-size: var(--ada-text-md);
  font-weight: var(--ada-weight-bold);
  color: var(--ada-accent-on-light);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* ---------- Composition bar ----------------------------------------------
   Full width, always. Violet is allotted, amber is vacant, and because the
   total IS allotted + vacant (see Property.cshtml) the two always fill the
   bar exactly — it is a true part-to-whole and cannot overflow.

   An earlier version also encoded scheme size in the bar's LENGTH, so a small
   scheme got a short bar. That failed: a horizontal bar in a card reads as a
   progress bar, and with no empty track behind it a short bar reads as "barely
   started" rather than "smaller scheme". Janakpuri is 98% allotted and looked
   like 20%. Size is carried by the total figure in the card header instead,
   where it cannot be mistaken for a proportion.
   ----------------------------------------------------------------------- */

.ada-scale-rail {
  margin-top: var(--ada-space-3);
  min-height: 8px;
}

.ada-scale-bar {
  display: flex;
  height: 8px;
  gap: 2px;
  width: 100%;
}

.ada-seg {
  height: 100%;
  border-radius: 999px;
}

.ada-seg-allotted { background: var(--primary-600); flex: 1 1 auto; }

/* Below about 1% the vacant slice would round away to nothing. A floor keeps
   a non-zero count visible; the exact number is in the legend either way. */
.ada-seg-vacant {
  background: var(--ada-warn-fill);
  flex: 0 0 auto;
  min-width: 5px;
}

.ada-scheme-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ada-space-3);
  margin-top: var(--ada-space-2);
}

/* Scoped to .ada-scheme-legend deliberately. ada-components.css declares a
   generic .ada-legend-item / .ada-legend-dot at the same specificity and loads
   AFTER this file, so the bare selectors here lost: the scheme legends
   rendered at 13px with 9px dots instead of the intended 11px/6px. A
   descendant selector (0,2,0) wins regardless of load order, and the generic
   legend stays available for anything else. */
.ada-scheme-legend .ada-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ada-space-1);
  font-size: var(--ada-text-xs);
  color: var(--ada-ink-mute);
  font-variant-numeric: tabular-nums;
}

.ada-scheme-legend .ada-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.ada-scheme-legend .ada-legend-dot.is-allotted { background: var(--primary-600); }
.ada-scheme-legend .ada-legend-dot.is-vacant   { background: var(--ada-warn-fill); }

/* ---------- Card footer --------------------------------------------------
   The one line that decides whether this scheme needs anyone's attention.
   Colour is never alone: the icon shape and the wording both carry it.
   ----------------------------------------------------------------------- */

.ada-scheme-foot {
  display: flex;
  align-items: center;
  gap: var(--ada-space-2);
  margin-top: auto;
  padding-top: var(--ada-space-3);
  border-top: 1px solid var(--ada-hairline);
  font-size: var(--ada-text-md);
}

.ada-scheme-foot > svg { flex: 0 0 auto; }

.ada-scheme-foot.is-danger { color: var(--ada-danger); }
.ada-scheme-foot.is-ok     { color: var(--ada-ok); }


/* Card content wants roughly 276px. Measured on this layout the content
   column is ~1131px at a 1194px viewport, so three columns still clear 360px
   each down to the xl breakpoint — no reason to drop to two before then. */
@media (max-width: 1199.98px) {
  .ada-scheme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .ada-scheme-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .ada-hero { padding: var(--ada-space-4); gap: var(--ada-space-4); }
  .ada-hero-chips { margin-left: 0; width: 100%; }
  .ada-hero-chip { flex: 1 1 auto; }
  .ada-hero-motif { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ada-scheme-card { transition-property: box-shadow; }
  .ada-scheme-card:hover { transform: none; }
}

/* =========================================================================
   Payroll dashboard
   =========================================================================
   Reuses .ada-hero above rather than restating it — the panel is a shared
   component, not a property-page one. Only the pieces the payroll page needs
   and the property page does not are defined here.
   ========================================================================= */

/* Amber reads as a warning on white but disappears into violet. This is the
   on-deep variant, used for the deductions figure and its bar segment. */
.ada-hero-chip-value.is-sub { color: var(--ada-warn-on-deep); }

/* ---------- Workforce strip ----------------------------------------------
   One surface, five cells, hairline dividers. Replaces a card that spent two
   full-width bars on a 2:3 and a 3:2 division of five people — at that scale
   the counts are the data and a proportional bar is decoration.

   The hero above carries money only; people live here. Nothing appears in
   both, so the same 5 is never shown twice.
   ----------------------------------------------------------------------- */

.ada-wf-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--ada-surface);
  border-radius: var(--ada-r-lg);
  box-shadow: var(--ada-shadow-md);
  overflow: hidden;
  margin-bottom: var(--ada-space-4);
}

.ada-wf-cell {
  padding: var(--ada-space-3) var(--ada-space-4);
  border-left: 1px solid var(--ada-hairline);
  min-width: 0;
}

.ada-wf-cell:first-child { border-left: 0; }

.ada-wf-cell-label {
  font-size: var(--ada-text-sm);
  color: var(--ada-ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ada-wf-cell-value {
  font-size: var(--ada-text-2xl);
  font-weight: var(--ada-weight-bold);
  color: var(--ada-ink);
  line-height: 1.25;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}

/* The divider in "3 / 2" is punctuation, not a value — it should not read at
   the same weight as the two numbers it separates. */
.ada-wf-cell-sep {
  color: var(--ada-ink-mute);
  font-weight: var(--ada-weight-normal);
  margin: 0 var(--ada-space-1);
}

/* Five cells stop fitting well before the page does. At two columns the
   dividers rotate: vertical between the pair, horizontal between rows. */
@media (max-width: 991.98px) {
  .ada-wf-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ada-wf-cell { border-left: 0; border-top: 1px solid var(--ada-hairline); }
  .ada-wf-cell:nth-child(-n+2) { border-top: 0; }
  .ada-wf-cell:nth-child(even) { border-left: 1px solid var(--ada-hairline); }
}

@media (max-width: 479.98px) {
  .ada-wf-strip { grid-template-columns: minmax(0, 1fr); }
  .ada-wf-cell { border-left: 0; border-top: 1px solid var(--ada-hairline); }
  .ada-wf-cell:first-child { border-top: 0; }
}

/* ---------- Attendance banner -------------------------------------------
   The old Marked tile was hardcoded to the success colour, so "0 of 5 marked"
   rendered green with a checkmark directly above a warning that all five
   would generate a full month. The state now drives the colour: unmarked is
   a warning, fully marked is the resolved variant.
   ----------------------------------------------------------------------- */

/* Tinted panel, with a deliberately NEUTRAL ring sitting on it. An earlier
   version tinted both and the ring dissolved into its own background; the
   contrast between a cool grey ring and a warm panel is what makes the arc
   findable. Tint one or the other, never both. */
.ada-att-alert {
  display: flex;
  align-items: center;
  gap: var(--ada-space-3);
  border-radius: var(--ada-r-md);
  padding: var(--ada-space-3);
  margin-bottom: var(--ada-space-3);
  background: var(--ada-warn-bg);
  flex-wrap: wrap;
}

/* Neutral: the heading states the fact, the line under it carries the tone.
   Colour is never the only signal — the wording changes with the state too. */
.ada-att-alert-title {
  font-size: var(--ada-text-md);
  font-weight: var(--ada-weight-semi);
  color: var(--ada-ink);
}

.ada-att-alert-sub { font-size: var(--ada-text-sm); color: var(--ada-warn); }

.ada-att-alert-aside {
  margin-left: auto;
  font-size: var(--ada-text-base);
  color: var(--ada-warn);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ada-att-alert > svg { flex: 0 0 auto; color: var(--ada-warn); }

/* Resolved: everyone marked. Panel, sub-line and arc all go green together.
   A card that looks identical whether the work is done or not trains people
   to stop reading it. */
.ada-att-alert.is-ok { background: var(--ada-ok-bg); }
.ada-att-alert.is-ok .ada-att-alert-sub,
.ada-att-alert.is-ok .ada-att-alert-aside { color: var(--ada-ok); }

.ada-att-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ada-space-2);
}

.ada-att-stat {
  background: var(--ada-surface-2);
  border-radius: var(--ada-r-sm);
  padding: var(--ada-space-2) var(--ada-space-3);
}

.ada-att-stat-label { font-size: var(--ada-text-xs); color: var(--ada-ink-mute); }

/* These are counts of things that went wrong. At zero they are good news and
   should stay quiet; only a non-zero value earns full ink. */
.ada-att-stat-value {
  font-size: var(--ada-text-xl);
  font-weight: var(--ada-weight-semi);
  color: var(--ada-ink-mute);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.ada-att-stat-value.is-set { color: var(--ada-ink); }

/* ---------- Attendance ring ----------------------------------------------
   Arc length is set in the view from marked / total.

   The ring sits INSIDE a state-tinted panel, so its neutrals have to belong to
   the panel's hue family. A violet track (--primary-200) inside an amber panel
   read as a foreign object — violet and amber sit almost opposite each other,
   and the system's violet-tinted greys only look neutral on a white or
   lavender ground.

   So the track and caption follow the state, and the arc is separated from
   them by saturation and depth rather than by being the only warm thing. The
   white backing keeps the ring crisp against the tint either way.
   ----------------------------------------------------------------------- */

.ada-att-ring { flex: 0 0 auto; }

.ada-att-ring-bg  { fill: var(--ada-surface); }
.ada-att-ring-num { fill: var(--ada-ink); font-family: inherit; }

/* Unmarked — warm. Track is a desaturated step of the same amber, ~1.5:1 on
   white: enough to describe the circle, quiet next to the arc. */
.ada-att-ring-track { stroke: #E5D0AC; }
.ada-att-ring-arc   { stroke: var(--ada-warn-fill); }
.ada-att-ring-cap   { fill: var(--ada-warn); font-family: inherit; }

/* Complete — the panel turns green, so the ring does too. */
.ada-att-alert.is-ok .ada-att-ring-track { stroke: #C2DECB; }
.ada-att-alert.is-ok .ada-att-ring-arc   { stroke: var(--ada-ok-fill); }
.ada-att-alert.is-ok .ada-att-ring-cap   { fill: var(--ada-ok); }

/* ---------- Chart cards --------------------------------------------------
   The three breakdown charts previously sat two-up: a donut alone in the
   left half, and the two bar charts stacked in the right. Bootstrap's h-100
   then stretched the donut card to match the taller column, leaving 582px of
   empty card under a 232px chart. Three equal columns fix it at the source —
   equal siblings need no stretching — so nothing here sets a height.

   The meta figure moves under the title rather than beside it. At a third of
   the row there is no width for both on one line, and each of these numbers
   (entries, average, deduction share, suspended count) appears nowhere else
   on the page now that the hero carries money only.
   ----------------------------------------------------------------------- */

.ada-chart-head { margin-bottom: var(--ada-space-3); }

.ada-chart-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--ada-text-xs);
  color: var(--ada-ink-mute);
  font-variant-numeric: tabular-nums;
}

/* ---------- Compact dashboard tables -------------------------------------
   .bordered-table is the template's wide-data-grid style: it sets the table
   itself to min-width:max-content, the first column to 100px and EVERY other
   column to 200px. A five-column table therefore cannot render narrower than
   900px, so in a half-row card (~640px of body) it always overflowed and
   .table-responsive put a scrollbar under it.

   The two dashboard tables hold short, fixed-shape values — a code, a name, a
   month, an amount, a status — and size themselves fine. Dropping the floor
   lets auto table layout do its job. .table-responsive stays, so a genuinely
   narrow phone still scrolls rather than crushing the columns.
   ----------------------------------------------------------------------- */

.ada-table-fit { min-width: 0; }

.ada-table-fit thead tr th:first-child,
.ada-table-fit thead tr th:not(:first-child) { min-width: 0; }

/* ---------- Empty states -------------------------------------------------
   Both table cards are h-100 next to a sibling that has rows, so whichever is
   empty gets stretched to the other's height — 684px of card above one line
   of text pinned to the top, which reads as content that failed to load.

   Equal heights are right when both cards have data, so the fix is not to
   drop h-100 but to let the empty state own the height it is given: it grows
   into the card body and centres in it, and the icon makes the space look
   deliberate rather than broken.
   ----------------------------------------------------------------------- */

.ada-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ada-space-2);
  min-height: 140px;
  padding: var(--ada-space-4) 0;
  text-align: center;
}

.ada-empty > svg { flex: 0 0 auto; color: var(--ada-ink-mute); opacity: 0.5; }

.ada-empty-text { margin: 0; font-size: var(--ada-text-base); color: var(--ada-ink-soft); }
.ada-empty-hint { margin: 0; font-size: var(--ada-text-sm);   color: var(--ada-ink-mute); }

/* Caption under a table whose rows are illustrative rather than records.
   Quiet on purpose — it should not read as an error state — but present, so
   nothing on a payroll screen can be mistaken for a real employee record. */
.ada-table-note {
  margin: var(--ada-space-3) 0 0;
  font-size: var(--ada-text-xs);
  color: var(--ada-ink-mute);
}