/* MD3-era component styles. P11d: the dead md3-button* / md3-card* /
   md3-input* / md3-field / md3-text-field* / md3-menu* / md3-kpi__* /
   md3-sa-mode-switch* PRIMITIVE blocks (0x in templates — superadmin + app
   render the native xt-* ladder) were deleted in the final Xtrius rewire cut.
   The typographic primitives md3-num / md3-eyebrow / md3-title were folded onto
   the xt-num / xt-eyebrow / xt-title twins in the same cut (the num + title
   rules below are kept UNSCOPED here so consumers outside .xt-scope keep them;
   eyebrow uses the existing twin in xtrius_design.css). The remaining rules
   here are live feature composites (combobox, date-range picker, net-stock
   chip, plan-feature panel, etc.) and shared utilities (xt-num, xt-title,
   md3-checkbox, md3-radio, xt-inline-row, xt-chip). */

/* ── Utility: inline row — icon + text pairs (headings, links) ─── */
.xt-inline-row {
  display: inline-flex;
  align-items: center;
  gap: var(--xt-s-1);
}

/* ── Chip — borderless, lifts on selected via background tint + soft shadow ── */
.xt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--xt-s-2);
  min-height: 32px;
  padding: 0 var(--xt-s-3);
  border-radius: var(--xt-r-md);
  border: none;
  background: var(--md-sys-color-surface-container);
  color: var(--xt-fg-3);
  font: var(--md-sys-typescale-label-lg);
  cursor: pointer;
  transition: background-color var(--xt-dur-fast),
              box-shadow var(--xt-dur-fast);
}
.xt-chip:hover {
  background: var(--md-sys-color-surface-container-high);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.xt-chip--selected {
  background: var(--xt-graphite-bg);
  color: var(--xt-graphite-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}

/* Compact chip variant. Used for dense chip rows — language switcher,
   filter strips where the default 32px height feels too large. Promoted
   from the inline style="min-height: 28px; padding: 0 8px; font-size: 11px"
   previously scattered across templates. */
.xt-chip--sm {
  min-height: 28px;
  padding: 0 var(--xt-s-2);
  font-size: 11px;
}

/* Status variants — used for the verandah pending pill + tab counts so a
   non-zero pending backlog reads as "warm/important" without leaning on
   the saturated --selected surface. */
.xt-chip--quiet {
  background: transparent;
  color: var(--xt-fg-3);
}
.xt-chip--warn {
  background: var(--xt-ember-bg);
  color: var(--xt-ember-ink);
}
.xt-chip--danger {
  background: var(--xt-danger-bg);
  color: var(--xt-danger);
}
/* P11d: the dead `.md3-sa-mode-switch*` sandbox-banner PRIMITIVE was deleted
   (0× in templates — the superadmin dashboard renders native `.xt-mode-switch`,
   self-styled in xtrius_design.css). */

/* P10: the SA-mode badge (.xt-appbar__sa-badge*) + form-wrapped menu item
   (.xt-menu__form*) shell rules were re-homed into md3/xt-shell.css with the
   class rename. They no longer live here. */

/* Smaller than the default chip so it sits inline next to a percent
   value without dominating the cell — same tertiary palette as --warn. */
.xt-chip--legacy {
  background: var(--xt-ember-bg);
  color: var(--xt-ember-ink);
  font-size: 10px;
  min-height: 22px;
  padding: 0 6px;
  margin-inline-start: 4px;
}

/* P11d: the dead `.md3-field` (floating-label outlined field) + `.md3-input` /
   `.md3-input-group` (compact outlined input) PRIMITIVE blocks were deleted —
   0× in templates; the app + superadmin render native `.xt-input` / `.xt-field`
   (P6). The live `body.xt-page input[type=checkbox|radio]` control skin below
   stands on its own element selectors. */

/* ── Checkbox + radio ────────────────────────────────────────────
   Replace browser-native chrome with MD3-tinted controls so the form
   reads as a single floating-tile surface — no hard 1px chrome rings.
   Skins every checkbox/radio on an `.xt-page` body (the template-side
   `.md3-checkbox` / `.md3-radio` classes are layout hooks; the visual
   reset is keyed off the element selector). */
body.xt-page input[type="checkbox"],
body.xt-page input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  border: none;
  background: var(--md-sys-color-surface-container);
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.25);
  cursor: pointer;
  position: relative;
  transition: background-color var(--xt-dur-fast),
              box-shadow var(--xt-dur-fast);
  flex-shrink: 0;
}
body.xt-page input[type="checkbox"] { border-radius: 4px; }
body.xt-page input[type="radio"] { border-radius: 50%; }
body.xt-page input[type="checkbox"]:checked,
body.xt-page input[type="radio"]:checked {
  background: var(--xt-signal);
  box-shadow: inset 0 0 0 1.5px var(--xt-signal);
}
body.xt-page input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--xt-paper-3);
  border-bottom: 2px solid var(--xt-paper-3);
  transform: rotate(45deg);
}
body.xt-page input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--xt-paper-3);
}
body.xt-page input[type="checkbox"]:focus-visible,
body.xt-page input[type="radio"]:focus-visible {
  outline: 2px solid var(--xt-signal);
  outline-offset: 2px;
}

/* P11d: the dead `.md3-input-group select` / `select.md3-input` native-select
   chevron override + the `.md3-card-title` header + the `.md3-kpi__label` /
   `__value` / `__hint` cell PRIMITIVES were deleted (0× in templates). Native
   selects on `.xt-page` carry their chevron via `.xt-input` / `.xt-field`
   (P6); KPI surfaces use the `.xt-stat` / `.xt-kpi-tile` namespaces (P11a). */

/* Mono tabular figures — shared by KPI values, audit counts, id columns.
   P11d: folded md3-num onto this xt-num rule. Kept UNSCOPED here (loaded
   app-wide) so consumers outside .xt-scope (audit, onboarding) keep tabular
   figures; the `.xt-scope .xt-num` rule in xtrius_design.css is the scoped
   twin. */
.xt-num {
  font-family: var(--xt-font-mono);
  font-variant-numeric: tabular-nums;
}
/* #1178: code-valued cells (HSN / bin / location / chamber / slot codes)
   render text inside a nested <code> whose UA stylesheet forces its own
   monospace family — overriding the cell's Xtrius mono. Make the nested
   <code> inherit so it picks up `var(--xt-font-mono)` from the cell. */
.xt-num code {
  font-family: inherit;
}
/* Section/page display title — Source Serif 4. Canonical shared title
   primitive (component.css is loaded app-wide). font-family only, so
   existing Tailwind weight/size utilities on the heading are preserved.
   P11d: folded md3-title onto this rule (no pre-existing twin — this IS the
   canonical xt-title). md3-eyebrow folded to the existing xt-eyebrow twin in
   xtrius_design.css. */
.xt-title {
  font-family: var(--xt-font-display);
}

/* P11d: the dead `.md3-menu` / `.md3-menu__item` dropdown-surface PRIMITIVE was
   deleted (0× in templates — popover/menu surfaces render via the native shell
   `.xt-menu*` in md3/xt-shell.css and the `.xt-chip-menu` listbox above). */

/* ── Date range picker ─────────────────────────────────────────
   Billing dashboard filter strip. Preset chips + <details>-based custom
   popover (zero JS, CSP-safe). See templates/components/date_range_picker.html. */
.md3-date-range-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
  flex-wrap: wrap;
}
.md3-date-range-picker__label {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 500;
  margin-right: var(--md-sys-spacing-1);
}
.md3-date-range-picker__custom {
  position: relative;
}
.md3-date-range-picker__custom > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
  min-height: 32px;
  padding: 0 var(--md-sys-spacing-3);
  border-radius: var(--md-sys-shape-corner-sm);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-lg);
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short);
  white-space: nowrap;
}
.md3-date-range-picker__custom > summary::-webkit-details-marker { display: none; }
.md3-date-range-picker__custom > summary::marker { content: ''; }
.md3-date-range-picker__custom > summary:hover {
  background: var(--md-sys-color-surface-container-high);
}
.md3-date-range-picker__custom[data-selected='true'] > summary {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}
.md3-date-range-picker__custom > summary .caret {
  transition: transform var(--md-sys-motion-duration-short);
}
.md3-date-range-picker__custom[open] > summary .caret {
  transform: rotate(180deg);
}
.md3-date-range-picker__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-4);
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-md);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12);
  min-width: 280px;
  border: 1px solid var(--md-sys-color-outline-variant);
}
.md3-date-range-picker__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--md-sys-spacing-3);
}
.md3-date-range-picker__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-sys-spacing-2);
  margin-top: var(--md-sys-spacing-1);
}
@media (max-width: 768px) {
  .md3-date-range-picker {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
  }
  .md3-date-range-picker__popover {
    left: 0;
    right: 0;
    min-width: 0;
  }
}


/* Suppress native number-input spinners (Edge/Chrome render as glued
   up/down arrows that visually collide with adjacent buttons). */
.md3-no-spinner::-webkit-outer-spin-button,
.md3-no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.md3-no-spinner {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Plan-feature override panel — one form per registered feature, grid
   layout keeps the title / plan default / override badge / reason / actions
   on a single row at desktop widths. Mobile collapses to a stacked column. */
.md3-plan-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: var(--md-sys-spacing-2);
  align-items: center;
  padding: var(--md-sys-spacing-2) 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-size: 13px;
}
@media (max-width: 768px) {
  .md3-plan-feature-row {
    grid-template-columns: 1fr;
  }
}

/* ── Client / Representative combobox ─────────────────────────────────
   Shared rules for the unified picker (_client_rep_combobox.html) and
   the split picker (_split_client_rep_combobox.html). Both render the
   same result rows via fragments/client_rep_combobox/_results.html.
   Keeping the rules here (not inline per component) is what lets the
   split picker style its rows — see tests/test_combobox_result_styles.py.
*/
.md3-client-rep-combobox { position: relative; }
.md3-client-rep-combobox__search {
  position: relative;
  display: flex;
  align-items: center;
}
.md3-client-rep-combobox__search-icon {
  position: absolute;
  left: 10px;
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
}
.md3-client-rep-combobox__input {
  padding-left: 32px !important;
  width: 100%;
}
.md3-client-rep-combobox__clear {
  position: absolute;
  right: 4px;
}
/* Entity combobox (Stock Inward commodity/variety/grade): the clear (×)
   button stays quiet and only reveals on hover / keyboard focus of the field
   — matches the Client picker's restraint. `.xt-icon-btn { display:flex }`
   overrides the `hidden` attribute, so gate visibility via opacity instead of
   relying on `hidden`. Scoped to [data-entity-combobox] so the Client/Rep,
   billing and reports comboboxes are unaffected. */
[data-entity-combobox] .md3-client-rep-combobox__clear {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
[data-entity-combobox] .md3-client-rep-combobox__search:hover .md3-client-rep-combobox__clear:not([hidden]),
[data-entity-combobox]:focus-within .md3-client-rep-combobox__clear:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}
.md3-client-rep-combobox__selected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--md-sys-color-primary);
}
.md3-client-rep-combobox__results {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  background: var(--md-sys-color-surface);
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
.md3-client-rep-combobox__results:not(:empty) { display: block; }
.md3-client-rep-combobox__row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  cursor: pointer;
  font-family: var(--xt-font-body);
}
.md3-client-rep-combobox__row:last-child { border-bottom: none; }
.md3-client-rep-combobox__row:hover,
.md3-client-rep-combobox__row:focus { background: var(--md-sys-color-surface-container-high); }
.md3-client-rep-combobox__row-client {
  font-weight: 400;
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
}
.md3-client-rep-combobox__row-rep {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
}
.md3-client-rep-combobox__row-rep .material-symbols-outlined {
  vertical-align: middle;
  margin-right: 2px;
}
.md3-client-rep-combobox__quickadd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--xt-font-body);
}
.md3-client-rep-combobox__empty {
  padding: 16px 12px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  text-align: center;
  font-family: var(--xt-font-body);
}
.md3-client-rep-combobox__self-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  font-size: 10px;
  font-weight: 500;
}

/* ── Net-stock segmented chip — Total · Bonded · Free (Bonds sub-D) ──
   Used in dashboard KPI tile, drilldown matrix, client-stock-statement
   report, and outward suggestion. `--undercollat` tint signals
   bonded > total (over-encumbered lot). Optional anchor variant
   carries a click_url to the bond list filtered by (client, commodity). */
.md3-netstock-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
  padding: 2px var(--md-sys-spacing-3);
  border-radius: 999px;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
}
.md3-netstock-chip:hover {
  background: var(--md-sys-color-surface-container-high);
}
.md3-netstock-chip__segment--total { font-weight: 600; }
.md3-netstock-chip__segment--bonded { color: var(--md-sys-color-primary); }
.md3-netstock-chip__segment--free { color: var(--md-sys-color-tertiary); }
.md3-netstock-chip__sep { color: var(--md-sys-color-outline); }
.md3-netstock-chip--undercollat {
  border: 1px solid var(--md-sys-color-error);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.md3-netstock-chip__warn { color: var(--md-sys-color-error); }

/* ── Under-collat banner (Bonds sub-D) ──
   Red when an admin has not yet acknowledged that an active bond's
   bag_count exceeds the (client, commodity) net stock. After ack the
   banner persists in amber for audit visibility — see
   _undercollat_banner.html. */
.md3-undercollat-banner {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  align-items: flex-start;
}
.md3-undercollat-banner__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.md3-undercollat-banner--red {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border-left: 4px solid var(--md-sys-color-error);
}
.md3-undercollat-banner--amber {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-left: 4px solid var(--md-sys-color-secondary);
}

/* Smart quick-add client dialog (inward / verandah) — delta "add existing"
   list + create-new disclosure. Loaded globally (renders into #modal-body). */
.xqa-delta-wrap {
  max-height: 12rem;
  overflow-y: auto;
}
.xqa-delta {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  overflow: hidden;
}
.xqa-delta__row + .xqa-delta__row {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.xqa-delta__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
}
.xqa-delta__label:hover {
  background: var(--md-sys-color-surface-container-high);
}
.xqa-delta__check {
  flex: 0 0 auto;
}
.xqa-delta__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}
.xqa-delta__name {
  color: var(--md-sys-color-on-surface);
}
.xqa-delta__locs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.2;
}
.xqa-delta__at {
  color: var(--md-sys-color-on-surface-variant);
}
.xqa-delta__none {
  color: var(--md-sys-color-on-surface-variant);
  font-style: italic;
}
.xqa-delta__here {
  color: var(--md-sys-color-primary);
  font-weight: 600;
}
.xqa-delta__label--here {
  opacity: 0.7;
}
.xqa-delta__type {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container);
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
}
.xqa-delta__empty {
  padding: 0.5rem 0.25rem;
}
.xqa-attach-actions {
  justify-content: flex-start;
  margin-bottom: 0.25rem;
}
.xqa-create {
  margin-top: 0.5rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding-top: 0.5rem;
}
.xqa-create__summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-sys-color-primary);
  padding: 0.25rem 0;
  list-style: none;
}
.xqa-create__summary::-webkit-details-marker {
  display: none;
}
.xqa-create__summary::before {
  content: "+ ";
}
.xqa-create[open] .xqa-create__summary::before {
  content: "− ";
}