/*
 * DCJ RAMCS component layer. Requires tokens.css (loaded first) and Bootstrap 5.3.
 * New components use the `rx-` prefix so they never collide with Bootstrap or the
 * Bootstrap classes used by pages not yet redesigned (see "Legacy content bridge").
 */

/* ================================================================== Base */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + var(--sp-4)); }
body.rx {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--surface-page);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.rx h1, .rx .h1 { font-size: var(--fs-3xl); }
.rx h2, .rx .h2 { font-size: var(--fs-2xl); }
.rx h3, .rx .h3 { font-size: var(--fs-xl); }
.rx h4, .rx .h4 { font-size: var(--fs-lg); }
.rx h5, .rx .h5 { font-size: var(--fs-md); }
.rx h1, .rx h2, .rx h3, .rx h4, .rx .h1, .rx .h2, .rx .h3, .rx .h4 {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--text);
}
.rx a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.rx ::selection { background: var(--brand-100); color: var(--brand-900); }
[data-bs-theme="dark"] .rx ::selection { background: var(--brand-800); color: #fff; }

.rx :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

.tnum, .rx .num, .rx table { font-variant-numeric: tabular-nums; }
.text-muted, .rx .text-muted { color: var(--text-muted) !important; }
.text-secondary-emphasis { color: var(--text-secondary) !important; }
.overline, .rx .overline, .rx h2.overline, .rx h3.overline, .rx h4.overline {
  font-size: var(--fs-2xs);
  line-height: var(--lh-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; }

/* Skip link */
.rx-skip {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: var(--z-palette);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  background: var(--surface-inverse); color: var(--text-inverse); font-weight: var(--fw-semibold);
  transform: translateY(-200%); transition: transform var(--dur) var(--ease-out);
}
.rx-skip:focus { transform: none; color: var(--text-inverse); }

/* ================================================================== App shell */
.rx-topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--gutter);
  background: var(--surface-glass);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border);
}
.rx-brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--text); text-decoration: none; min-width: 0; }
.rx-brand img { width: 36px; height: 40px; object-fit: contain; flex: none; }
.rx-brand strong { display: block; font-size: var(--fs-md); letter-spacing: var(--tracking-tight); line-height: 1.1; }
.rx-brand small { display: block; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-topbar .rx-search-trigger { margin-left: auto; }

.rx-shell { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.rx-sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
}
@media (min-width: 992px) {
  .rx-sidebar { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; }
}
.rx-nav { list-style: none; margin: 0; padding: var(--sp-3); }
.rx-nav-heading { padding: var(--sp-4) var(--sp-3) var(--sp-1); }
.rx-nav-link {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--touch); padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-secondary); font-weight: var(--fw-medium); text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.rx-nav-link .bi { font-size: 1.05rem; color: var(--text-muted); width: 1.25rem; text-align: center; }
.rx-nav-link:hover { background: var(--surface-hover); color: var(--text); }
.rx-nav-link[aria-current="page"] { background: var(--primary-soft); color: var(--primary-soft-text); }
.rx-nav-link[aria-current="page"] .bi { color: var(--primary-soft-text); }
.rx-nav-link .badge { margin-left: auto; }

.rx-main { flex: 1; min-width: 0; padding: var(--sp-6) var(--gutter) var(--sp-16); }
.rx-container { max-width: var(--content-max); margin-inline: auto; }

/* Page header */
.rx-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-6); }
.rx-page-head h1 { margin: 0; font-size: var(--fs-2xl); }
.rx-page-head p { margin: var(--sp-1) 0 0; color: var(--text-muted); }
.rx-page-head .rx-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Breadcrumbs */
.rx-crumbs { --bs-breadcrumb-divider: "›"; --bs-breadcrumb-margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.rx-crumbs .breadcrumb-item a { color: var(--text-muted); text-decoration: none; }
.rx-crumbs .breadcrumb-item a:hover { color: var(--link); text-decoration: underline; }
.rx-crumbs .breadcrumb-item.active { color: var(--text-secondary); }

/* ================================================================== Buttons */
.rx .btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-weight: var(--fw-semibold);
  --bs-btn-font-size: var(--fs-base);
  --bs-btn-border-radius: var(--r-sm);
  --bs-btn-focus-box-shadow: 0 0 0 3px var(--focus-ring);
  min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  position: relative;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast),
              box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.rx .btn:active:not(:disabled) { transform: translateY(1px); }
.rx .btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: var(--fs-md); min-height: 48px; --bs-btn-border-radius: var(--r-md); }
.rx .btn-sm { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.25rem; --bs-btn-font-size: var(--fs-sm); min-height: 32px; }
@media (pointer: coarse) { .rx .btn, .rx .btn-sm { min-height: var(--touch); } }

.rx .btn-primary {
  --bs-btn-color: var(--text-on-brand);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--text-on-brand);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--text-on-brand);
  --bs-btn-active-bg: var(--primary-active);
  --bs-btn-active-border-color: var(--primary-active);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  box-shadow: var(--sh-xs), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.rx .btn-secondary, .rx .btn-neutral {
  --bs-btn-color: var(--text);
  --bs-btn-bg: var(--surface-1);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--surface-hover);
  --bs-btn-active-border-color: var(--gray-400);
  --bs-btn-disabled-color: var(--text-disabled);
  --bs-btn-disabled-bg: var(--surface-1);
  --bs-btn-disabled-border-color: var(--border);
  box-shadow: var(--sh-xs);
}
.rx .btn-soft {
  --bs-btn-color: var(--primary-soft-text);
  --bs-btn-bg: var(--primary-soft);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--primary-soft-text);
  --bs-btn-hover-bg: color-mix(in oklab, var(--primary-soft) 70%, var(--brand-200));
  --bs-btn-active-bg: var(--brand-200);
  --bs-btn-active-color: var(--brand-800);
}
.rx .btn-ghost {
  --bs-btn-color: var(--text-secondary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-active-bg: var(--surface-hover);
  --bs-btn-active-color: var(--text);
}
.rx .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--danger-fg);
  --bs-btn-border-color: var(--danger-fg);
  --bs-btn-hover-bg: color-mix(in oklab, var(--danger-fg) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--danger-fg) 85%, #000);
  --bs-btn-active-bg: color-mix(in oklab, var(--danger-fg) 75%, #000);
}
[data-bs-theme="dark"] .rx .btn-danger { --bs-btn-bg: var(--danger-solid); --bs-btn-border-color: var(--danger-solid); }
.rx .btn-outline-danger {
  --bs-btn-color: var(--danger-fg);
  --bs-btn-border-color: var(--danger-bd);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--danger-fg);
  --bs-btn-hover-border-color: var(--danger-fg);
}
.rx .btn-success {
  --bs-btn-bg: var(--success-fg);
  --bs-btn-border-color: var(--success-fg);
  --bs-btn-hover-bg: color-mix(in oklab, var(--success-fg) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--success-fg) 85%, #000);
}
.rx .btn-link { --bs-btn-color: var(--link); --bs-btn-hover-color: var(--link-hover); font-weight: var(--fw-medium); }

.rx .btn-icon { --bs-btn-padding-x: 0; width: 40px; padding-inline: 0; }
.rx .btn-icon.btn-sm { width: 32px; }
@media (pointer: coarse) { .rx .btn-icon, .rx .btn-icon.btn-sm { width: var(--touch); } }

/* Loading state: keeps width, swaps label for spinner */
.rx .btn.is-loading { color: transparent !important; pointer-events: none; }
.rx .btn.is-loading > * { visibility: hidden; }
.rx .btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--bs-btn-color) var(--bs-btn-color) var(--bs-btn-color) transparent;
  animation: rx-spin 0.7s linear infinite;
}
.rx .btn-primary.is-loading::after, .rx .btn-danger.is-loading::after, .rx .btn-success.is-loading::after {
  border-color: #fff #fff #fff transparent;
}
@keyframes rx-spin { to { transform: rotate(360deg); } }

/* ================================================================== Forms */
.rx .form-label { font-weight: var(--fw-medium); color: var(--text); margin-bottom: var(--sp-1); font-size: var(--fs-sm); }
.rx .form-text { color: var(--text-muted); font-size: var(--fs-xs); }
.rx .form-control, .rx .form-select {
  min-height: 44px;
  border-radius: var(--r-sm);
  border-color: var(--border-strong);
  background-color: var(--surface-1);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.rx textarea.form-control { min-height: 96px; }
.rx .form-control::placeholder { color: var(--text-disabled); }
.rx .form-control:hover, .rx .form-select:hover { border-color: var(--gray-400); }
.rx .form-control:focus, .rx .form-select:focus {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.rx .form-control.is-invalid, .rx .form-select.is-invalid { border-color: var(--danger-solid); }
.rx .form-control.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger-solid) 30%, transparent); }
.rx .invalid-feedback { color: var(--danger-fg); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.rx .form-control:disabled, .rx .form-select:disabled { background-color: var(--surface-sunken); color: var(--text-disabled); }
.rx .required::after { content: " *"; color: var(--danger-fg); }

/* Floating labels */
.rx .form-floating > .form-control, .rx .form-floating > .form-select { min-height: 56px; height: 56px; padding-top: 1.5rem; padding-bottom: 0.5rem; }
.rx .form-floating > textarea.form-control { height: 120px; }
.rx .form-floating > label { color: var(--text-muted); padding: 1rem 0.85rem; }
.rx .form-floating > .form-control:focus ~ label,
.rx .form-floating > .form-control:not(:placeholder-shown) ~ label,
.rx .form-floating > .form-select ~ label { color: var(--text-secondary); transform: scale(0.82) translateY(-0.6rem) translateX(0.15rem); }
.rx .form-floating > .form-control:focus ~ label::after,
.rx .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background: transparent; }

/* Input with leading icon */
.rx-input-icon { position: relative; }
.rx-input-icon > .bi { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.rx-input-icon > .form-control { padding-left: 2.5rem; }

/* Date input */
.rx input[type="date"].form-control { position: relative; }
.rx input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }
[data-bs-theme="dark"] .rx input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* Checks & switches */
.rx .form-check-input { border-color: var(--border-strong); background-color: var(--surface-1); }
.rx .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.rx .form-check-input:focus { box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--accent-500); }
.rx .form-switch .form-check-input { width: 2.5em; height: 1.4em; margin-top: 0.05em; }
.rx .form-check { min-height: 1.6rem; }
@media (pointer: coarse) { .rx .form-check { min-height: var(--touch); display: flex; align-items: center; gap: var(--sp-2); } }

/* Segmented control (radio buttons as pills) */
.rx-segmented { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--r-md); background: var(--surface-sunken); border: 1px solid var(--border); }
.rx-segmented .btn-check + .btn { --bs-btn-border-color: transparent; --bs-btn-bg: transparent; --bs-btn-color: var(--text-secondary); min-height: 36px; box-shadow: none; }
.rx-segmented .btn-check:checked + .btn { --bs-btn-active-bg: var(--surface-1); --bs-btn-active-color: var(--text); --bs-btn-active-border-color: var(--border); box-shadow: var(--sh-sm); }

/* ================================================================== Searchable select (combobox) */
.rx-combo { position: relative; }
.rx-combo-input { padding-right: 2.5rem !important; background-image: none !important; }
.rx-combo-caret { position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; transition: transform var(--dur-fast); }
.rx-combo[data-open] .rx-combo-caret { transform: translateY(-50%) rotate(180deg); }
.rx-combo-list {
  position: absolute; z-index: var(--z-popover); left: 0; right: 0; top: calc(100% + 4px);
  max-height: 280px; overflow-y: auto; margin: 0; padding: var(--sp-1); list-style: none;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg);
}
.rx-combo-list[hidden] { display: none; }
.rx-combo-option { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs); cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: var(--sp-2); }
.rx-combo-option[aria-selected="true"] { font-weight: var(--fw-semibold); color: var(--primary-soft-text); }
.rx-combo-option[aria-selected="true"]::after { content: "\F26E"; font-family: "bootstrap-icons"; margin-left: auto; }
.rx-combo-option.is-active { background: var(--surface-hover); }
.rx-combo-option mark { padding: 0; background: var(--gold-100); color: inherit; border-radius: 2px; }
[data-bs-theme="dark"] .rx-combo-option mark { background: var(--gold-900); }
.rx-combo-empty { padding: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }

/* ================================================================== File upload (drag & drop) */
.rx-drop {
  position: relative;
  display: grid; place-items: center; gap: var(--sp-2);
  min-height: 148px; padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2);
  transition: border-color var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
}
.rx-drop:hover { border-color: var(--accent-400); }
.rx-drop.is-dragover { border-color: var(--accent-500); background: var(--accent-50); }
[data-bs-theme="dark"] .rx-drop.is-dragover { background: var(--info-bg); }
.rx-drop:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rx-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.rx-drop-icon {
  width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--sh-xs); color: var(--accent-600); font-size: 1.4rem;
}
.rx-drop-title { font-weight: var(--fw-semibold); }
.rx-drop-title span { color: var(--link); }
.rx-drop.is-invalid { border-color: var(--danger-solid); background: var(--danger-bg); }
.rx-file {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); margin-top: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1);
}
.rx-file-thumb { width: 56px; height: 56px; flex: none; border-radius: var(--r-sm); background: var(--surface-sunken); display: grid; place-items: center; overflow: hidden; color: var(--danger-fg); font-size: 1.5rem; }
.rx-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rx-file-meta { min-width: 0; flex: 1; }
.rx-file-name { font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-file-size { font-size: var(--fs-xs); color: var(--text-muted); }
.rx-file-preview { margin-top: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface-sunken); }
.rx-file-preview iframe, .rx-file-preview object { display: block; width: 100%; height: 420px; border: 0; }
.rx-file-preview img { display: block; max-width: 100%; max-height: 420px; margin: auto; }

/* ================================================================== Badges, chips, status */
.rx .badge { font-weight: var(--fw-semibold); letter-spacing: 0.01em; border-radius: var(--r-pill); padding: 0.3em 0.6em; }
.rx-badge-soft { background: var(--surface-hover); color: var(--text-secondary); border: 1px solid var(--border); }
.rx-badge-brand { background: var(--primary-soft); color: var(--primary-soft-text); }

.rx-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 32px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--surface-1); color: var(--text-secondary);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.rx-chip:hover { background: var(--surface-hover); color: var(--text); }
.rx-chip[aria-pressed="true"], .rx-chip.is-active { background: var(--primary-soft); border-color: var(--brand-200); color: var(--primary-soft-text); }
[data-bs-theme="dark"] .rx-chip[aria-pressed="true"], [data-bs-theme="dark"] .rx-chip.is-active { border-color: var(--brand-800); }
.rx-chip-remove { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: -6px; border: 0; border-radius: 50%; background: transparent; color: inherit; padding: 0; }
.rx-chip-remove:hover { background: color-mix(in oklab, currentColor 15%, transparent); }
@media (pointer: coarse) { .rx-chip { min-height: 40px; } }

.rx-status {
  --dot: var(--st-draft-dot);
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.2em 0.65em 0.2em 0.55em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.5; white-space: nowrap;
  color: var(--st-draft-fg); background: var(--st-draft-bg);
}
.rx-status::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--dot); flex: none; }
.rx-status[data-status="submitted"] { color: var(--st-submitted-fg); background: var(--st-submitted-bg); --dot: var(--st-submitted-dot); }
.rx-status[data-status="verified"]  { color: var(--st-verified-fg);  background: var(--st-verified-bg);  --dot: var(--st-verified-dot); }
.rx-status[data-status="approved"]  { color: var(--st-approved-fg);  background: var(--st-approved-bg);  --dot: var(--st-approved-dot); }
.rx-status[data-status="returned"]  { color: var(--st-returned-fg);  background: var(--st-returned-bg);  --dot: var(--st-returned-dot); }
.rx-status[data-status="rejected"]  { color: var(--st-rejected-fg);  background: var(--st-rejected-bg);  --dot: var(--st-rejected-dot); }
.rx-status[data-status="pending"]   { color: var(--st-pending-fg);   background: var(--st-pending-bg);   --dot: var(--st-pending-dot); }
.rx-status[data-status="submitted"]::before, .rx-status[data-status="pending"]::before { animation: rx-pulse 2s var(--ease-in-out) infinite; }
@keyframes rx-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .rx-status::before { animation: none !important; } }

/* ================================================================== Cards */
.rx-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  min-width: 0;
}
.rx-card-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle); }
.rx-card-head h2, .rx-card-head h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: 0; }
.rx-card-head p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.rx-card-head .rx-actions { margin-left: auto; display: flex; gap: var(--sp-1); }
.rx-card-body { padding: var(--sp-5); }
.rx-card-foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-subtle); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.rx-card-link { display: block; color: inherit; text-decoration: none; transition: box-shadow var(--dur), transform var(--dur) var(--ease-out), border-color var(--dur); }
.rx-card-link:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); transform: translateY(-1px); color: inherit; }

/* Bootstrap .card picks up the same look */
.rx .card { --bs-card-border-color: var(--border); --bs-card-border-radius: var(--r-lg); --bs-card-inner-border-radius: calc(var(--r-lg) - 1px); --bs-card-bg: var(--surface-1); --bs-card-cap-bg: var(--surface-1); box-shadow: var(--sh-sm); }

/* ================================================================== KPI card */
.rx-kpi { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5); height: 100%; overflow: hidden; }
.rx-kpi-top { display: flex; align-items: center; gap: var(--sp-2); }
.rx-kpi-icon {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--primary-soft); color: var(--primary-soft-text); font-size: 1.05rem;
}
.rx-kpi-icon[data-tone="accent"] { background: var(--info-bg); color: var(--info-fg); }
.rx-kpi-icon[data-tone="gold"] { background: var(--gold-100); color: var(--gold-800); }
[data-bs-theme="dark"] .rx-kpi-icon[data-tone="gold"] { background: color-mix(in oklab, var(--gold) 16%, var(--gray-900)); color: var(--gold-300); }
.rx-kpi-icon[data-tone="success"] { background: var(--success-bg); color: var(--success-fg); }
.rx-kpi-icon[data-tone="danger"] { background: var(--danger-bg); color: var(--danger-fg); }
.rx-kpi-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); }
.rx-kpi-value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1.1; margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }
.rx-kpi-value small { font-size: 0.5em; font-weight: var(--fw-semibold); color: var(--text-muted); letter-spacing: 0; margin-left: 0.15em; }
.rx-kpi-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); }
.rx-delta { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: var(--r-pill); font-weight: var(--fw-semibold); font-size: var(--fs-xs); }
.rx-delta[data-trend="up"] { color: var(--success-fg); background: var(--success-bg); }
.rx-delta[data-trend="down"] { color: var(--danger-fg); background: var(--danger-bg); }
.rx-delta[data-trend="flat"] { color: var(--text-secondary); background: var(--surface-hover); }
.rx-spark { display: block; width: 100%; height: 40px; margin-top: var(--sp-3); overflow: visible; }
.rx-spark .line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rx-spark .area { fill: var(--chart-1); opacity: 0.1; }

/* Progress ring */
.rx-ring { --value: 0; --size: 72px; --track: var(--surface-hover); --fill: var(--primary); position: relative; width: var(--size); height: var(--size); flex: none; }
.rx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rx-ring circle { fill: none; stroke-width: 3.2; }
.rx-ring .track { stroke: var(--track); }
.rx-ring .fill { stroke: var(--fill); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--value)); transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.rx-ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: var(--fw-bold); font-size: calc(var(--size) * 0.24); font-variant-numeric: tabular-nums; }

/* Linear progress */
.rx .progress { --bs-progress-bg: var(--surface-hover); --bs-progress-bar-bg: var(--primary); --bs-progress-border-radius: var(--r-pill); --bs-progress-height: 8px; }

/* ================================================================== Data table */
.rx-table-card { overflow: hidden; }
.rx-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.rx-table-toolbar .rx-input-icon { flex: 1 1 220px; max-width: 360px; }
.rx-table-toolbar .rx-actions { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.rx-table-scroll { overflow: auto; max-height: var(--table-max-h, min(72vh, 760px)); overscroll-behavior: contain; }
.rx-table td { white-space: nowrap; }
.rx-table td.rx-card-title, .rx-table td.rx-wrap { white-space: normal; }
.rx-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); color: var(--text); }
.rx-table th, .rx-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; text-align: left; }
.rx-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-muted); white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.rx-table th.is-num, .rx-table td.is-num { text-align: right; }
.rx-table tbody tr { transition: background var(--dur-fast); }
.rx-table tbody tr:hover { background: var(--surface-hover); }
.rx-table tbody tr.is-selected { background: var(--primary-soft); }
.rx-table tbody tr:last-child td { border-bottom: 0; }
.rx-table .rx-clip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-table .rx-cell-title { font-weight: var(--fw-medium); color: var(--text); }
.rx-table .rx-cell-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.rx-table .rx-check-col { width: 44px; padding-right: 0; }
.rx-table .rx-actions-col { width: 1%; white-space: nowrap; text-align: right; }

.rx-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.rx-sort::after { content: "\F127"; font-family: "bootstrap-icons"; opacity: 0.35; font-size: 0.9em; }
th[aria-sort="ascending"] .rx-sort::after { content: "\F57B"; opacity: 1; }
th[aria-sort="descending"] .rx-sort::after { content: "\F57A"; opacity: 1; }
th[aria-sort] .rx-sort { color: var(--text); }
.rx-sort:hover { color: var(--text); }

.rx-table-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); color: var(--text-muted); }
.rx-table-foot .pagination { margin: 0 0 0 auto; }

.rx .pagination {
  --bs-pagination-color: var(--text-secondary);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: transparent;
  --bs-pagination-hover-color: var(--text);
  --bs-pagination-hover-bg: var(--surface-hover);
  --bs-pagination-hover-border-color: transparent;
  --bs-pagination-active-color: var(--text-on-brand);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: transparent;
  --bs-pagination-focus-box-shadow: 0 0 0 3px var(--focus-ring);
  gap: 2px;
}
.rx .page-link { border-radius: var(--r-sm) !important; min-width: 36px; text-align: center; font-weight: var(--fw-medium); }
@media (pointer: coarse) { .rx .page-link { min-width: var(--touch); min-height: var(--touch); display: grid; place-items: center; } }

/* Bulk action bar */
.rx-bulkbar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-inverse); color: var(--text-inverse);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.rx-bulkbar[hidden] { display: none; }
.rx-bulkbar .btn { --bs-btn-color: var(--text-inverse); --bs-btn-hover-color: var(--text-inverse); --bs-btn-hover-bg: rgb(255 255 255 / 0.12); --bs-btn-border-color: rgb(255 255 255 / 0.25); --bs-btn-bg: transparent; box-shadow: none; }
[data-bs-theme="dark"] .rx-bulkbar .btn { --bs-btn-hover-bg: rgb(0 0 0 / 0.08); --bs-btn-border-color: rgb(0 0 0 / 0.2); }

/* Column toggle menu */
.rx-colmenu { min-width: 220px; padding: var(--sp-2); }
.rx-colmenu .form-check { padding: var(--sp-1) var(--sp-2) var(--sp-1) 2.2rem; border-radius: var(--r-xs); }
.rx-colmenu .form-check:hover { background: var(--surface-hover); }
.rx-table [data-col-hidden] { display: none; }

/* Mobile: rows become cards */
@media (max-width: 767.98px) {
  .rx-table-scroll { max-height: none; overflow: visible; }
  .rx-table--stack td { white-space: normal; }
  .rx-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rx-table--stack, .rx-table--stack tbody, .rx-table--stack tr, .rx-table--stack td { display: block; width: 100%; }
  .rx-table--stack tbody { padding: var(--sp-2); display: grid; gap: var(--sp-2); }
  .rx-table--stack tr { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); padding: var(--sp-3) var(--sp-4); position: relative; }
  .rx-table--stack tbody tr:hover { background: var(--surface-1); }
  .rx-table--stack td { border: 0; padding: var(--sp-1) 0; display: grid; grid-template-columns: 38% 1fr; gap: var(--sp-3); text-align: left !important; }
  .rx-table--stack td::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
  .rx-table--stack td[data-label=""]::before, .rx-table--stack td.rx-card-title::before { display: none; }
  .rx-table--stack td.rx-card-title { display: block; font-size: var(--fs-base); padding-right: 2.5rem; }
  .rx-table--stack td.rx-check-col { position: absolute; top: var(--sp-3); right: var(--sp-3); width: auto; display: block; padding: 0; }
  .rx-table--stack td.rx-check-col::before { display: none; }
  .rx-table--stack td.rx-actions-col { display: flex; justify-content: flex-end; gap: var(--sp-2); padding-top: var(--sp-3); margin-top: var(--sp-2); border-top: 1px solid var(--border-subtle); width: 100%; }
  .rx-table--stack td.rx-actions-col::before { display: none; }
  .rx-table--stack .rx-clip { max-width: none; white-space: normal; }
  .rx-dept-table td { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* ================================================================== Dropdowns, modals, offcanvas, toasts, tooltips */
.rx .dropdown-menu {
  --bs-dropdown-bg: var(--surface-1);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--r-md);
  --bs-dropdown-box-shadow: var(--sh-lg);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--surface-hover);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-active-bg: var(--primary-soft);
  --bs-dropdown-link-active-color: var(--primary-soft-text);
  --bs-dropdown-item-padding-y: 0.5rem;
  --bs-dropdown-item-border-radius: var(--r-xs);
  --bs-dropdown-header-color: var(--text-muted);
  --bs-dropdown-divider-bg: var(--border);
  padding: var(--sp-1);
  box-shadow: var(--bs-dropdown-box-shadow);
  font-size: var(--fs-base);
}
.rx .dropdown-item { display: flex; align-items: center; gap: var(--sp-2); }
.rx .dropdown-item .bi { color: var(--text-muted); }

.rx .modal {
  --bs-modal-bg: var(--surface-1);
  --bs-modal-border-color: var(--border);
  --bs-modal-border-radius: var(--r-xl);
  --bs-modal-inner-border-radius: calc(var(--r-xl) - 1px);
  --bs-modal-box-shadow: var(--sh-xl);
  --bs-modal-header-border-color: var(--border-subtle);
  --bs-modal-footer-border-color: var(--border-subtle);
  --bs-modal-padding: var(--sp-5);
  --bs-modal-header-padding: var(--sp-4) var(--sp-5);
}
.rx .modal-content { box-shadow: var(--bs-modal-box-shadow); }
.rx .modal-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.rx .modal-backdrop, .modal-backdrop { --bs-backdrop-bg: var(--gray-950); --bs-backdrop-opacity: 0.45; backdrop-filter: blur(3px); }
.rx .modal-footer { background: var(--surface-2); border-radius: 0 0 var(--bs-modal-inner-border-radius) var(--bs-modal-inner-border-radius); }
@media (max-width: 575.98px) {
  .rx .modal-dialog:not(.modal-fullscreen) { margin: auto 0 0; max-width: none; min-height: 100%; display: flex; align-items: flex-end; }
  .rx .modal-dialog:not(.modal-fullscreen) .modal-content { border-radius: var(--r-xl) var(--r-xl) 0 0; }
}

.rx .offcanvas { --bs-offcanvas-bg: var(--surface-1); --bs-offcanvas-border-color: var(--border); --bs-offcanvas-box-shadow: var(--sh-xl); }
.rx .offcanvas-bottom.rx-sheet { height: auto; max-height: 88vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.rx-sheet .offcanvas-header { position: relative; padding-top: var(--sp-6); }
.rx-sheet .offcanvas-header::before { content: ""; position: absolute; top: var(--sp-2); left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: var(--r-pill); background: var(--border-strong); }

.rx-toasts { position: fixed; z-index: var(--z-toast); right: var(--sp-4); bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); width: min(380px, calc(100vw - 2rem)); pointer-events: none; }
@media (max-width: 575.98px) { .rx-toasts { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); width: auto; } }
.rx-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--surface-1); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--tone, var(--info-solid));
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  animation: rx-toast-in var(--dur-slow) var(--ease-spring);
}
.rx-toast[data-tone="success"] { --tone: var(--success-solid); }
.rx-toast[data-tone="warning"] { --tone: var(--warning-solid); }
.rx-toast[data-tone="danger"]  { --tone: var(--danger-solid); }
.rx-toast > .bi { color: var(--tone, var(--info-solid)); font-size: 1.15rem; margin-top: 1px; }
.rx-toast-body { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.rx-toast-body strong { display: block; font-size: var(--fs-base); }
.rx-toast .btn-link { --bs-btn-padding-x: 0.25rem; min-height: 0; font-size: var(--fs-sm); }
.rx-toast.is-leaving { animation: rx-toast-out var(--dur) var(--ease-in-out) forwards; }
@keyframes rx-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes rx-toast-out { to { opacity: 0; transform: translateX(16px); } }

.rx .tooltip { --bs-tooltip-bg: var(--surface-inverse); --bs-tooltip-color: var(--text-inverse); --bs-tooltip-border-radius: var(--r-xs); --bs-tooltip-font-size: var(--fs-xs); }

/* Alerts */
.rx .alert { --bs-alert-border-radius: var(--r-md); display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
.rx .alert > .bi { font-size: 1.1rem; line-height: 1.3; }

/* ================================================================== Tabs, accordion */
.rx-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--sp-5); }
.rx-tabs::-webkit-scrollbar { display: none; }
.rx-tabs .nav-link {
  position: relative; border: 0; background: none; white-space: nowrap;
  min-height: var(--touch); padding: 0 var(--sp-3);
  color: var(--text-muted); font-weight: var(--fw-medium);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.rx-tabs .nav-link:hover { color: var(--text); }
.rx-tabs .nav-link.active { color: var(--text); }
.rx-tabs .nav-link.active::after { content: ""; position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); }
.rx-tabs .badge { background: var(--surface-hover); color: var(--text-secondary); }

.rx .accordion {
  --bs-accordion-bg: var(--surface-1);
  --bs-accordion-border-color: var(--border);
  --bs-accordion-border-radius: var(--r-lg);
  --bs-accordion-inner-border-radius: calc(var(--r-lg) - 1px);
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-active-color: var(--text);
  --bs-accordion-active-bg: var(--surface-2);
  --bs-accordion-btn-focus-box-shadow: inset 0 0 0 3px var(--focus-ring);
}
.rx .accordion-button { font-weight: var(--fw-semibold); }

/* ================================================================== Wizard / stepper */
.rx-steps { display: flex; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-6); padding: 0; counter-reset: step; }
.rx-step { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); counter-increment: step; }
.rx-step::before { content: ""; height: 4px; border-radius: var(--r-pill); background: var(--surface-hover); transition: background var(--dur); }
.rx-step-label { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-medium); }
.rx-step-label::before {
  content: counter(step); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--surface-hover); color: var(--text-secondary);
}
.rx-step[data-state="done"]::before, .rx-step[aria-current="step"]::before { background: var(--primary); }
.rx-step[data-state="done"] .rx-step-label::before { content: "\F26E"; font-family: "bootstrap-icons"; background: var(--primary); color: var(--text-on-brand); }
.rx-step[aria-current="step"] { color: var(--text); }
.rx-step[aria-current="step"] .rx-step-label::before { background: var(--primary-soft); color: var(--primary-soft-text); box-shadow: inset 0 0 0 2px var(--primary); }
@media (max-width: 575.98px) { .rx-step:not([aria-current="step"]) .rx-step-text { display: none; } }
.rx-step-panel[hidden] { display: none; }

/* ================================================================== Timeline (record history) */
.rx-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.rx-timeline-item { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-3); padding-bottom: var(--sp-5); }
.rx-timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--border); }
.rx-timeline-icon {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-1); border: 2px solid var(--dot, var(--border-strong)); color: var(--dot, var(--text-muted)); font-size: 0.85rem;
}
.rx-timeline-item[data-status="submitted"] { --dot: var(--st-submitted-dot); }
.rx-timeline-item[data-status="approved"] { --dot: var(--st-approved-dot); }
.rx-timeline-item[data-status="returned"] { --dot: var(--st-returned-dot); }
.rx-timeline-item[data-status="rejected"] { --dot: var(--st-rejected-dot); }
.rx-timeline-item[data-status="verified"] { --dot: var(--st-verified-dot); }
.rx-timeline-title { font-weight: var(--fw-medium); }
.rx-timeline-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.rx-timeline-note { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border-subtle); font-size: var(--fs-sm); }

/* ================================================================== Avatars */
.rx-avatar {
  --size: 40px;
  width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  display: inline-grid; place-items: center; overflow: hidden;
  font-size: calc(var(--size) * 0.4); font-weight: var(--fw-semibold); line-height: 1;
  background: var(--av-bg, var(--primary-soft)); color: var(--av-fg, var(--primary-soft-text));
  box-shadow: 0 0 0 2px var(--surface-1);
}
.rx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rx-avatar[data-tone="1"] { --av-bg: var(--info-bg); --av-fg: var(--info-fg); }
.rx-avatar[data-tone="2"] { --av-bg: var(--gold-100); --av-fg: var(--gold-800); }
.rx-avatar[data-tone="3"] { --av-bg: var(--success-bg); --av-fg: var(--success-fg); }
.rx-avatar[data-tone="4"] { --av-bg: var(--st-verified-bg); --av-fg: var(--st-verified-fg); }
[data-bs-theme="dark"] .rx-avatar[data-tone="2"] { --av-bg: color-mix(in oklab, var(--gold) 16%, var(--gray-900)); --av-fg: var(--gold-300); }
.rx-avatar-group { display: inline-flex; }
.rx-avatar-group .rx-avatar + .rx-avatar { margin-left: calc(var(--size) * -0.3); }

/* ================================================================== Skeleton */
.rx-skel {
  display: block; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--surface-hover) 0%, var(--surface-2) 40%, var(--surface-hover) 80%);
  background-size: 300% 100%;
  animation: rx-shimmer 1.4s ease-in-out infinite;
  color: transparent !important; user-select: none;
}
.rx-skel-text { height: 0.8em; margin: 0.45em 0; }
.rx-skel-title { height: 1.4em; width: 55%; }
.rx-skel-circle { border-radius: 50%; }
@keyframes rx-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .rx-skel { animation: none; } }

/* ================================================================== Empty states */
.rx-empty { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-12) var(--sp-4); }
.rx-empty-art {
  width: 72px; height: 72px; border-radius: var(--r-xl); display: grid; place-items: center; margin-bottom: var(--sp-2);
  background: radial-gradient(circle at 30% 25%, var(--surface-1), var(--surface-hover)); border: 1px solid var(--border);
  box-shadow: var(--sh-sm); color: var(--primary); font-size: 1.8rem;
}
.rx-empty h3, .rx-empty .rx-empty-title { font-size: var(--fs-lg); margin: 0; }
.rx-empty p { margin: 0; max-width: 42ch; color: var(--text-muted); }
.rx-empty .rx-actions { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }

/* ================================================================== Error / system pages */
.rx-error { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-8) var(--gutter); background:
  radial-gradient(60rem 30rem at 85% -10%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 70%),
  radial-gradient(40rem 24rem at -10% 110%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 70%),
  var(--surface-page); }
.rx-error-card { width: min(520px, 100%); text-align: center; }
.rx-error-card img { width: 64px; height: auto; margin-bottom: var(--sp-6); }
.rx-error-code { font-size: var(--fs-4xl); font-weight: var(--fw-bold); letter-spacing: -0.04em; line-height: 1; color: var(--primary); font-variant-numeric: tabular-nums; }
.rx-error-card h1 { font-size: var(--fs-2xl); margin: var(--sp-3) 0 var(--sp-2); }
.rx-error-card p { color: var(--text-muted); margin: 0 auto var(--sp-6); max-width: 44ch; }
.rx-error-card .rx-actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }

/* ================================================================== Command palette */
.rx-palette {
  width: min(640px, calc(100vw - 2rem)); max-height: min(560px, 80vh);
  margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface-1); color: var(--text); box-shadow: var(--sh-xl);
  overflow: hidden;
}
.rx-palette[open] { display: flex; flex-direction: column; animation: rx-pop var(--dur) var(--ease-out); }
.rx-palette::backdrop { background: rgb(13 15 19 / 0.45); backdrop-filter: blur(3px); }
@keyframes rx-pop { from { opacity: 0; transform: scale(0.98) translateY(-6px); } }
.rx-palette-search { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5); border-bottom: 1px solid var(--border); }
.rx-palette-search .bi { color: var(--text-muted); font-size: 1.1rem; }
.rx-palette-search input { flex: 1; min-height: 56px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--fs-md); }
.rx-palette-list { list-style: none; margin: 0; padding: var(--sp-2); overflow-y: auto; }
.rx-palette-group { padding: var(--sp-3) var(--sp-3) var(--sp-1); }
.rx-palette-item { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); padding: 0 var(--sp-3); border-radius: var(--r-sm); cursor: pointer; color: var(--text); text-decoration: none; }
.rx-palette-item .bi { color: var(--text-muted); width: 1.25rem; text-align: center; }
.rx-palette-item small { margin-left: auto; color: var(--text-muted); font-size: var(--fs-xs); }
.rx-palette-item.is-active { background: var(--primary-soft); color: var(--primary-soft-text); }
.rx-palette-item.is-active .bi { color: var(--primary-soft-text); }
.rx-palette-foot { display: flex; gap: var(--sp-4); padding: var(--sp-2) var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-2); }
.rx-kbd, .rx kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: var(--r-xs);
  font: var(--fw-semibold) var(--fs-2xs)/1.6 var(--font-sans); text-align: center;
  color: var(--text-secondary); background: var(--surface-1); border: 1px solid var(--border-strong); box-shadow: 0 1px 0 var(--border-strong);
}
.rx-search-trigger {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-2) 0 var(--sp-3); min-width: 240px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-muted);
  font-size: var(--fs-sm); cursor: pointer;
}
.rx-search-trigger:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.rx-search-trigger .rx-kbd { margin-left: auto; }
@media (max-width: 767.98px) { .rx-search-trigger { min-width: 0; width: 40px; padding: 0; justify-content: center; } .rx-search-trigger > :not(.bi) { display: none; } }

/* ================================================================== Sticky save bar */
.rx-savebar {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: var(--sp-6) calc(var(--gutter) * -1) calc(var(--sp-16) * -1);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--surface-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.rx-savebar .rx-savebar-status { font-size: var(--fs-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-2); }
.rx-savebar .rx-actions { margin-left: auto; display: flex; gap: var(--sp-2); }
@media (max-width: 575.98px) { .rx-savebar .rx-actions { width: 100%; } .rx-savebar .rx-actions .btn { flex: 1; } }

/* ================================================================== Sidebar groups (collapsible) */
.rx-nav-group > summary { list-style: none; cursor: pointer; }
.rx-nav-group > summary::-webkit-details-marker { display: none; }
.rx-nav-chev { margin-left: auto; font-size: 0.75rem; transition: transform var(--dur) var(--ease-out); }
.rx-nav-group[open] > summary .rx-nav-chev { transform: rotate(180deg); }
.rx-nav-sub { padding: 0 0 var(--sp-1) var(--sp-4); }
.rx-nav-sub .rx-nav-link { min-height: 38px; font-size: var(--fs-sm); }
@media (pointer: coarse) { .rx-nav-sub .rx-nav-link { min-height: var(--touch); } }
.rx-nav-link .badge { margin-left: auto; }
button.rx-nav-link { font: inherit; }

/* ================================================================== Sign-in / registration layout */
.rx-auth-body { background: var(--surface-page); }
.rx-auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .rx-auth { grid-template-columns: minmax(380px, 44%) 1fr; } }
.rx-auth-brand {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-8) var(--gutter) var(--sp-6);
  color: #fff;
  background:
    radial-gradient(40rem 26rem at 110% -10%, color-mix(in oklab, var(--accent) 45%, transparent), transparent 65%),
    radial-gradient(30rem 22rem at -20% 120%, color-mix(in oklab, var(--gold) 35%, transparent), transparent 60%),
    linear-gradient(160deg, var(--brand-700), var(--brand-900));
  overflow: hidden;
}
.rx-auth.has-photo .rx-auth-brand { background: linear-gradient(160deg, rgb(13 15 19 / .55), rgb(13 15 19 / .78)), var(--rx-auth-photo, none) center / cover; }
.rx-auth-brand::after {
  content: ""; position: absolute; inset: auto -12% -30% auto; width: 60%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 0 0 40px rgb(255 255 255 / .03), 0 0 0 90px rgb(255 255 255 / .025);
  pointer-events: none;
}
.rx-auth-brand-inner { position: relative; z-index: 1; max-width: 32rem; }
.rx-auth-logo { display: inline-grid; place-items: center; width: 88px; height: 96px; border-radius: var(--r-xl); background: rgb(255 255 255 / .94); box-shadow: var(--sh-lg); margin-bottom: var(--sp-5); }
.rx-auth-logo img { width: 64px; height: 72px; object-fit: contain; }
[data-bs-theme="dark"] .rx-auth-logo .rx-logo-dark { display: none; }
[data-bs-theme="dark"] .rx-auth-logo .rx-logo-light { display: inline-block; }
.rx-auth-college { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .12em; margin: 0 0 var(--sp-2); opacity: .85; }
.rx-auth-system { color: #fff !important; font-size: var(--fs-2xl) !important; line-height: 1.15 !important; margin: 0 0 var(--sp-3); max-width: 24ch; }
.rx-auth-tagline { margin: 0; opacity: .82; max-width: 40ch; font-size: var(--fs-md); }
.rx-auth-theme { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2; }
.rx-auth-theme .btn { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgb(255 255 255 / .14); }
@media (max-width: 991.98px) {
  .rx-auth-brand { padding: var(--sp-6) var(--gutter) var(--sp-10); }
  .rx-auth-brand-inner { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sp-4); align-items: center; }
  .rx-auth-logo { width: 64px; height: 70px; margin: 0; grid-row: span 2; border-radius: var(--r-lg); }
  .rx-auth-logo img { width: 46px; height: 52px; }
  .rx-auth-system { font-size: var(--fs-lg) !important; margin: 0; }
  .rx-auth-tagline { display: none; }
}
.rx-auth-main { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6); padding: var(--sp-8) var(--gutter); }
@media (max-width: 991.98px) { .rx-auth-main { justify-content: flex-start; margin-top: calc(var(--sp-8) * -1); padding-top: 0; } }
.rx-auth-card {
  width: min(440px, 100%); padding: var(--sp-8) var(--sp-6);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-lg);
}
.rx-auth-card.is-wide { width: min(680px, 100%); }
@media (max-width: 575.98px) { .rx-auth-card { padding: var(--sp-6) var(--sp-4); } }
.rx-auth-card h2 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-1); }
.rx-auth-card .rx-auth-lead { color: var(--text-muted); margin: 0 0 var(--sp-6); }
.rx-auth-card .rx-auth-alt { margin: var(--sp-6) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--border-subtle); text-align: center; font-size: var(--fs-sm); color: var(--text-muted); }
.rx-auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); }
.rx-auth-done { text-align: center; }
.rx-auth-done .rx-empty-art { margin: 0 auto var(--sp-4); color: var(--success-fg); }

/* ================================================================== Profile */
.rx-profile-card { text-align: center; }
.rx-profile-card .rx-avatar { margin: 0 auto var(--sp-3); }
.rx-profile-card h2 { font-size: var(--fs-lg); margin: 0; }
.rx-profile-meta { text-align: left; margin-top: var(--sp-5); grid-template-columns: 1fr; gap: 0; }
.rx-profile-meta dd { margin-bottom: var(--sp-3); }

/* ================================================================== Home: attention cards, categories, lists, bars */
.rx-attention { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); }
.rx-attention-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rx-attention-text span { font-size: var(--fs-sm); color: var(--text-muted); }
.rx-attention-action { display: flex; align-items: center; gap: var(--sp-2); flex: 0 1 auto; }
.rx-attention-action .rx-combo, .rx-attention-action select { min-width: min(320px, 70vw); }
@media (max-width: 575.98px) { .rx-attention-action { width: 100%; } .rx-attention-action .rx-combo, .rx-attention-action select { flex: 1; min-width: 0; } }

.rx-cats { list-style: none; margin: 0; padding: var(--sp-2); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--sp-1); }
.rx-cat { position: relative; display: flex; align-items: center; border-radius: var(--r-md); transition: background var(--dur-fast); }
.rx-cat:hover { background: var(--surface-hover); }
.rx-cat-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); color: var(--text); text-decoration: none; min-height: var(--touch); }
.rx-cat-main:hover { color: var(--text); }
.rx-cat-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary-soft-text); }
.rx-cat.is-empty .rx-cat-icon { background: var(--surface-hover); color: var(--text-muted); }
.rx-cat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rx-cat-name { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-cat-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.rx-cat-count { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.rx-cat.is-empty .rx-cat-count { color: var(--text-disabled); }
.rx-cat-add { margin-right: var(--sp-2); }

.rx-result-list { list-style: none; margin: 0; padding: var(--sp-1); }
.rx-result-list a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
.rx-result-list a:hover { background: var(--surface-hover); color: var(--text); }
.rx-result-icon { width: 1.25rem; text-align: center; color: var(--text-muted); flex: none; }
.rx-result-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rx-result-text .rx-cell-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-add-menu { max-height: min(70vh, 520px); overflow-y: auto; }

.rx-bars { margin: 0; }
.rx-bars-plot { display: grid; grid-template-columns: repeat(var(--bars), 1fr); align-items: end; gap: var(--sp-2); height: var(--bars-h, 140px); }
.rx-bar { height: 100%; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; min-width: 0; }
.rx-bar-value { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); align-self: end; }
.rx-bar-fill { width: 100%; max-width: 36px; align-self: end; min-height: 3px; border-radius: 6px 6px 2px 2px; background: color-mix(in oklab, var(--chart-1) 35%, var(--surface-1)); transition: height var(--dur-slow) var(--ease-out); }
.rx-bar.is-current .rx-bar-fill { background: var(--chart-1); }
.rx-bar-label { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; }

/* ================================================================== Record form (4.4) */
.rx-check-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rx-check-chips .btn-check + .rx-chip::before { content: "\F64D"; font-family: "bootstrap-icons"; font-size: 0.9em; opacity: 0.5; margin-right: 2px; }
.rx-check-chips .btn-check:checked + .rx-chip { background: var(--primary-soft); border-color: var(--brand-200); color: var(--primary-soft-text); }
.rx-check-chips .btn-check:checked + .rx-chip::before { content: "\F26E"; opacity: 1; }
.rx-check-chips .btn-check:focus-visible + .rx-chip { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
[data-bs-theme="dark"] .rx-check-chips .btn-check:checked + .rx-chip { border-color: var(--brand-800); }
.rx-multi-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); min-height: 32px; align-items: center; }
.rx-money-hint { font-variant-numeric: tabular-nums; }
@media (min-width: 1200px) { .rx-form-aside { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); } }
.rx-flow { list-style: none; display: flex; gap: var(--sp-1); margin: var(--sp-4) 0 0; padding: 0; counter-reset: flow; font-size: var(--fs-xs); }
.rx-flow li { flex: 1; text-align: center; padding: var(--sp-2) var(--sp-1); border-radius: var(--r-sm); background: var(--surface-hover); color: var(--text-muted); font-weight: var(--fw-medium); }
.rx-flow li[aria-current="step"] { background: var(--primary-soft); color: var(--primary-soft-text); font-weight: var(--fw-semibold); }
.rx-dup .btn { min-height: 32px; }
fieldset[disabled] .rx-drop { opacity: 0.6; pointer-events: none; }

/* ================================================================== Legacy content bridge (Phase 4.3 → 4.10)
   Pages not yet redesigned keep their Bootstrap markup inside the new shell. Stock Bootstrap classes
   already follow the tokens (body.rx); these rules cover the old custom classes and dark mode. */
.rx-legacy .stat { border-left: 4px solid var(--primary); }
.rx-legacy .stat .num { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--primary); line-height: 1; font-variant-numeric: tabular-nums; }
.rx-legacy .stat a { color: inherit; text-decoration: none; }
.rx-legacy .stat:hover { box-shadow: var(--sh-md); }
.rx-legacy .avatar { object-fit: cover; background: var(--surface-hover); }
.rx-legacy .avatar-fallback { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary-soft-text); font-weight: var(--fw-bold); }
.rx-legacy .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-hover-bg: var(--surface-hover); --bs-table-hover-color: var(--text); --bs-table-border-color: var(--border-subtle); margin-bottom: 0; }
.rx-legacy .table > :not(caption) > * > * { padding: var(--sp-3); }
.rx-legacy .table thead th { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); white-space: nowrap; }
.rx-legacy .table-light, .rx-legacy .table > thead.table-light > tr > th { --bs-table-bg: var(--surface-2); --bs-table-color: var(--text-muted); --bs-table-border-color: var(--border); background-color: var(--surface-2); }
.rx-legacy .table.records td.clip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-legacy .table.records th:last-child, .rx-legacy .table.records td:last-child { position: sticky; right: 0; background: var(--surface-1); box-shadow: -6px 0 8px -6px hsl(var(--shadow-color) / .2); }
.rx-legacy .table.records thead th:last-child { background: var(--surface-2); }
.rx-legacy .card-header, .rx-legacy .card-footer { background: var(--surface-1); border-color: var(--border-subtle); }
.rx-legacy .card-header { font-weight: var(--fw-semibold); padding: var(--sp-3) var(--sp-4); }
.rx-legacy .list-group { --bs-list-group-bg: var(--surface-1); --bs-list-group-color: var(--text); --bs-list-group-border-color: var(--border-subtle); }
.rx-legacy .empty { color: var(--text-muted); }
[data-bs-theme="dark"] .rx .bg-white { background-color: var(--surface-1) !important; }
[data-bs-theme="dark"] .rx .text-bg-light { background-color: var(--surface-hover) !important; color: var(--text) !important; }
.rx-legacy .modal-header .modal-title { font-size: var(--fs-lg); }
.rx-legacy .btn-icon.btn-sm { width: 32px; }

/* Light / dark logo variants (Settings → General) */
.rx-logo-dark, [data-bs-theme="dark"] .rx-logo-light { display: none; }
[data-bs-theme="dark"] .rx-logo-dark { display: inline-block; }

/* ================================================================== Settings screen */
.rx-settings { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.rx-settings > * { min-width: 0; }
@media (min-width: 1200px) { .rx-settings { grid-template-columns: 232px minmax(0, 1fr); } }
.rx-subnav { list-style: none; margin: 0; padding: var(--sp-2); }
@media (min-width: 1200px) { .rx-subnav-wrap { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); } }
@media (max-width: 1199.98px) {
  .rx-subnav { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
  .rx-subnav::-webkit-scrollbar { display: none; }
  .rx-subnav .rx-nav-link { white-space: nowrap; }
}
.rx-settings .rx-savebar { margin: var(--sp-5) 0 0; bottom: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.rx-setting { display: grid; gap: var(--sp-2) var(--sp-6); padding: var(--sp-5) 0; border-bottom: 1px solid var(--border-subtle); }
.rx-setting:first-child { padding-top: 0; }
.rx-setting:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 768px) { .rx-setting { grid-template-columns: minmax(180px, 34%) minmax(0, 1fr); } }
.rx-setting-label { font-weight: var(--fw-semibold); display: block; margin-bottom: var(--sp-1); }
.rx-setting-help { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.rx-setting-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rx-setting-meta .btn { min-height: 0; padding: 0; font-size: var(--fs-xs); }
.rx-setting .mb-3:last-child { margin-bottom: 0 !important; }
.rx-color { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rx-color input[type="color"] { width: 52px; height: 44px; padding: 4px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface-1); cursor: pointer; }
.rx-color .form-control { max-width: 130px; font-family: var(--font-mono); text-transform: lowercase; }
.rx-img-current { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.rx-img-current img { max-height: 72px; max-width: 200px; object-fit: contain; border-radius: var(--r-sm); border: 1px solid var(--border); background: repeating-conic-gradient(var(--surface-hover) 0 25%, var(--surface-1) 0 50%) 0 0 / 16px 16px; padding: var(--sp-1); }
.rx-list-preview { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.rx-list-preview .badge { font-weight: var(--fw-medium); }
.rx-preview { display: grid; gap: var(--sp-3); }
.rx-preview .rx-row { --gap: var(--sp-2); }
.rx-history td { vertical-align: top; }
.rx-history .rx-val { max-width: 280px; white-space: normal; word-break: break-word; font-size: var(--fs-xs); font-family: var(--font-mono); }

/* ================================================================== Theme toggle */
.rx-theme-toggle .bi-sun, [data-bs-theme="dark"] .rx-theme-toggle .bi-moon-stars { display: none; }
[data-bs-theme="dark"] .rx-theme-toggle .bi-sun { display: inline; }

/* ================================================================== Utilities */
.rx-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 240px)), 1fr)); }
.rx-stack { display: flex; flex-direction: column; gap: var(--gap, var(--sp-4)); }
.rx-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--sp-2)); }
.rx-divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-6) 0; opacity: 1; }
.rx-dl { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.rx-dl dt { color: var(--text-muted); font-weight: var(--fw-medium); }
.rx-dl dd { margin: 0; word-break: break-word; }
@media (max-width: 575.98px) { .rx-dl { grid-template-columns: 1fr; gap: 0; } .rx-dl dd { margin-bottom: var(--sp-3); } }

/* ================================================================== Approval queue + review (4.6) */
.rx-dl > div { display: contents; }
.rx-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); padding: var(--sp-4); }
.rx-filterbar .rx-filter { flex: 1 1 170px; min-width: 0; }
.rx-filterbar .rx-filter-grow { flex: 2 1 220px; }
.rx-filterbar .rx-filter-actions { flex: 0 0 auto; display: flex; gap: var(--sp-2); }
.rx-filterbar .form-label { font-size: var(--fs-xs); margin-bottom: var(--sp-1); }
.rx-review { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (min-width: 1200px) {
  .rx-review { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); }
  .rx-review-proof { position: sticky; top: calc(var(--topbar-h, 64px) + var(--sp-4)); }
}
.rx-review-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
@media (max-width: 575.98px) { .rx-review-who > .text-end { flex-basis: 100%; text-align: start !important; display: flex; gap: var(--sp-2); align-items: center; } .rx-review-who > .text-end .mt-1 { margin: 0 !important; } }
.rx-review-who > .flex-grow-1 { flex-basis: 12rem; }
.rx-review-who .rx-review-name { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin: 0; }
.rx-review-pager { --gap: var(--sp-2); align-items: center; }
.rx-review-pager .disabled { pointer-events: none; opacity: .45; }
.rx-proof-frame { display: block; width: 100%; height: min(78vh, 900px); border: 0; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.rx-proof-img { border-top: 1px solid var(--border); padding: var(--sp-3); background: var(--surface-2); text-align: center; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.rx-proof-img img { max-width: 100%; max-height: 78vh; height: auto; border-radius: var(--r-sm); }
.rx-decision { border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); }
.min-w-0 { min-width: 0; }
/* ================================================================== My records (4.5) */
.rx-danger-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px dashed color-mix(in oklab, var(--danger-fg) 35%, var(--border)); border-radius: var(--r-md); }

/* ================================================================== People & roles (4.7) */
.rx-role-check { padding: var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 1.5em); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--sp-2); }
.rx-role-check:has(:checked) { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: color-mix(in oklab, var(--primary) 5%, var(--surface-1)); }
.rx-role-check .form-check-label { cursor: pointer; }

/* ================================================================== Charts (5.2) */
.rx-chart .rx-card-head { align-items: flex-start; }
.rx-chart-body { position: relative; min-height: var(--chart-h, 300px); padding: var(--sp-2) var(--sp-3) 0; }
.rx-chart-plot { min-height: var(--chart-h, 300px); }
.rx-chart-state { position: absolute; inset: var(--sp-2) var(--sp-4) var(--sp-3); display: grid; place-items: center; }
.rx-chart-state[hidden] { display: none; }
.rx-chart-skel { width: 100%; height: 100%; min-height: calc(var(--chart-h, 300px) - 24px); border-radius: var(--r-md); }
.rx-chart-msg { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); max-width: 32ch; }
.rx-chart-msg .bi { font-size: 1.75rem; opacity: .6; }
.rx-chart-table { border-top: 1px solid var(--border); }
.rx-chart-table > summary { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); min-height: var(--touch); cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary); list-style: none; }
.rx-chart-table > summary::-webkit-details-marker { display: none; }
.rx-chart-table > summary:hover { color: var(--text); }
.rx-chart-table[open] > summary { border-bottom: 1px solid var(--border); }
.rx-chart-table-body { padding: var(--sp-2) var(--sp-4) var(--sp-3); max-height: 360px; overflow: auto; font-size: var(--fs-sm); }
.rx-chart .apexcharts-tooltip { box-shadow: var(--sh-md, 0 4px 12px rgb(0 0 0 / .12)); border-radius: var(--r-sm); }
.rx-chart .apexcharts-legend-text { color: var(--text-secondary) !important; }
@media print {
  .rx-chart { break-inside: avoid; }
  .rx-chart-state, .rx-chart-table > summary { display: none !important; }
  .rx-chart-table-body { max-height: none; overflow: visible; }
}

/* ================================================================== Research dashboard (5.3) */
[data-rx-fragment] { transition: opacity .15s; }
[data-rx-fragment].is-refreshing { opacity: .55; }
@media (prefers-reduced-motion: reduce) { [data-rx-fragment] { transition: none; } }
.rx-pending { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-2) var(--sp-4); }
.rx-pending-num { font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--primary); }
.rx-pending[data-state="clear"] .rx-pending-num { color: var(--success-fg); }
.rx-pending > .btn { grid-column: 1 / -1; justify-self: start; }
.rx-contrib { font-size: var(--fs-sm); }
.rx-contrib th, .rx-contrib td { vertical-align: middle; padding: var(--sp-2) var(--sp-3); }
.rx-contrib thead th { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-medium); border-bottom-color: var(--border); }
.rx-contrib-rank { width: 2.5rem; text-align: center; }
.rx-contrib tbody tr:first-child .rx-contrib-rank { color: var(--gold-700, #b45309) !important; font-weight: 700; }

/* ================================================================== Department dashboard (5.4) */
.rx-dept-card { display: grid; gap: 2px; padding: var(--sp-4); text-decoration: none; color: var(--text); }
.rx-dept-name { font-weight: var(--fw-semibold); }
.rx-dept-count { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--primary); margin-top: var(--sp-2); }
.rx-matrix-wrap { max-height: 560px; }
.rx-matrix { font-size: var(--fs-sm); }
.rx-matrix th, .rx-matrix td { padding: var(--sp-1) var(--sp-3); white-space: nowrap; }
.rx-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); }
.rx-matrix .rx-matrix-name { position: sticky; left: 0; z-index: 1; background: var(--surface-1); min-width: 12rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.rx-matrix thead .rx-matrix-name { z-index: 3; background: var(--surface-2); }
.rx-matrix tfoot th, .rx-matrix tfoot td { border-top: 2px solid var(--border); background: var(--surface-2); }
.rx-matrix-zero th { color: var(--text-muted); }
@media print { .rx-matrix-wrap { max-height: none; } .rx-matrix th, .rx-matrix td { position: static !important; } }
/* ================================================================== Personal analytics (5.5) */
.rx-incomplete .rx-incomplete-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.rx-incomplete .rx-cell-sub { white-space: normal; }
.rx-result-go { margin-left: auto; color: var(--text-muted); }

/* ================================================================== Compiled reports (5.6) */
.rx-report { display: grid; gap: var(--sp-4); }
.rx-report-table { font-size: var(--fs-sm); }
.rx-report-table th, .rx-report-table td { padding: var(--sp-1) var(--sp-3); vertical-align: top; }
.rx-report-table thead th { background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); white-space: nowrap; }
.rx-report-table tfoot th, .rx-report-table tfoot td { border-top: 2px solid var(--border); }
.rx-report-table td { max-width: 28rem; overflow-wrap: anywhere; }
.rx-report-table td:first-child, .rx-report-table th:first-child { white-space: nowrap; }
.rx-report-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); border-top: 1px solid var(--border); }
.rx .rx-report-facts h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.rx-report-end { text-align: center; margin: var(--sp-2) 0 0; }
.rx-scope-choice { display: flex; gap: var(--sp-3); align-items: flex-start; padding-left: var(--sp-3); cursor: pointer; }
.rx-scope-choice .form-check-input { margin: .2rem 0 0; flex: none; }
@page report { size: A4 landscape; margin: 12mm 10mm 14mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt sans-serif; color: #555; } }
@media print {
  .rx-report-page .rx-container { page: report; }
  .rx-report { display: block; }
  .rx-report-section { margin-bottom: 10px; break-inside: auto !important; }
  .rx-report-section .rx-card-head { break-after: avoid; }
  .rx-report-table { font-size: 8.5pt; width: 100%; }
  .rx-report-table thead { display: table-header-group; }
  .rx-report-table th, .rx-report-table td { padding: 2px 4px; max-width: none; }
  .rx-report-table tr { break-inside: avoid; }
  .rx-report-table a { text-decoration: none; }
  .rx-report-meta .rx-dl { font-size: 9pt; }
}
/* ================================================================== Open/closed academic years (6.1) */
.rx-year-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-1) var(--sp-4); }
.rx-year-switch { margin: 0; padding: var(--sp-1) 0 var(--sp-1) 2.75em; }
.rx-year-switch .form-check-label { display: flex; align-items: center; gap: var(--sp-2); width: 100%; cursor: pointer; }
.rx-year-state { margin-left: auto; font-size: var(--fs-xs); color: var(--success-fg); }
.rx-year-switch .form-check-input:not(:checked) + .form-check-label { color: var(--text-muted); }
.rx-year-switch .form-check-input:not(:checked) + .form-check-label .rx-year-state { color: var(--danger-fg); }
.rx-year-switch.is-current .tnum { font-weight: var(--fw-semibold); }
/* ================================================================== Unlock requests (6.2) */
.rx-unlock-state { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; padding: 2px var(--sp-2); border-radius: 999px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.rx-unlock-state[data-tone="accent"] { background: var(--info-bg); color: var(--info-fg); }
.rx-unlock-state[data-tone="success"] { background: var(--success-bg); color: var(--success-fg); }
.rx-unlock-state[data-tone="danger"] { background: var(--danger-bg); color: var(--danger-fg); }
.rx-unlock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.rx-unlock-list > li { display: flex; align-items: flex-start; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.rx-unlock-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.rx-unlock-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.rx-card h2.rx-unlock-title { font-size: var(--fs-base); font-weight: var(--fw-regular); margin: 0 0 2px; line-height: 1.4; }
.rx-unlock-reason { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--border-strong); background: var(--surface-2); white-space: normal; }
.rx-unlock-decide { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
@media (max-width: 575.98px) {
  .rx-unlock-head { flex-wrap: wrap; }
  .rx-unlock-list > li { flex-wrap: wrap; }
}
/* ================================================================== Categories & fields (6.3) */
.rx-icon-pick { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.rx-icon-pick .btn { width: 2.5rem; height: 2.5rem; padding: 0; display: inline-grid; place-items: center; font-size: 1.15rem;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-muted); }
.rx-icon-pick .btn-check:checked + .btn { border-color: var(--brand); background: var(--surface-2); color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.rx-icon-pick .btn-check:focus-visible + .btn { box-shadow: 0 0 0 3px var(--focus-ring); }
.rx-field-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--sp-1); white-space: nowrap; }
.rx-field-actions form { display: inline-flex; gap: 2px; margin: 0; }
.rx-field-fixed th, .rx-field-fixed td { color: var(--text-muted); }
.rx-field-hidden th, .rx-field-hidden td { color: var(--text-muted); }
.rx-field-hidden th a { color: inherit; }
.rx-card-warn { border-color: var(--warning-bd); background: var(--warning-bg); }
/* ================================================================== Print */
.rx-print-head { display: none; }
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  .rx-topbar, .rx-sidebar, .rx-savebar, .rx-toasts, .rx-table-toolbar, .rx-bulkbar, .rx-actions, .btn, .rx-skip,
  .rx-filterbar, .rx-tabs, .rx-danger-zone, .rx-review-pager, .rx-table-foot nav, .rx-check-col, .rx-actions-col,
  .rx-breadcrumbs, .breadcrumb, .modal, dialog, .dropdown-menu, #draft-restore, .rx-proof-frame, .rx-palette { display: none !important; }
  html, body.rx { background: #fff !important; color: #000; font-size: 10.5pt; }
  .rx-shell, .rx-main, .rx-container { display: block; margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .rx-print-head { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 2px solid #000; }
  .rx-print-head img { width: 56px; height: 56px; object-fit: contain; }
  .rx-print-college { font-weight: 700; font-size: 13pt; letter-spacing: .04em; }
  .rx-print-title { font-size: 11pt; }
  .rx-print-meta { font-size: 8.5pt; color: #444; }
  h1, .h1 { font-size: 15pt; }
  .rx-card, .rx .card { box-shadow: none !important; border-color: #bbb; break-inside: avoid; background: #fff !important; }
  .rx-review, .row { display: block !important; }
  .rx-review > *, .row > * { width: auto !important; max-width: none !important; position: static !important; margin-bottom: 10px; }
  .rx-table-scroll { overflow: visible !important; }
  .rx-table { width: 100%; }
  .rx-table--stack thead { display: table-header-group !important; }
  .rx-table--stack tr { display: table-row !important; }
  .rx-table--stack td, .rx-table--stack th { display: table-cell !important; }
  .rx-table--stack td::before { content: none !important; }
  .rx-table thead th { position: static; background: #eee !important; color: #000; }
  .rx-table tr { break-inside: avoid; }
  .rx-status { border: 1px solid #888; background: none !important; color: #000 !important; }
  .rx-timeline { break-inside: auto; }
  .alert { border: 1px solid #888 !important; background: none !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  .rx-dl a[href^="http"]::after, .rx-legacy a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* filter forms are for the screen; the printout shows their result */
  main form[method="get"], main form[method="GET"] { display: none !important; }
  .rx-review-proof:has(.rx-proof-frame), .rx-review-proof:has(.rx-empty) { display: none !important; }
  /* wide report tables: landscape pages, nothing clipped */
  .table-responsive { overflow: visible !important; max-height: none !important; }
  .rx-legacy .table-responsive, .rx-legacy table.table { page: wide; }
  .rx-legacy table.table { font-size: 8.5pt; width: 100%; table-layout: auto; }
  .rx-legacy table.table td, .rx-legacy table.table th { padding: 3px 4px; overflow-wrap: anywhere; word-break: normal; }
}
@page wide { size: A4 landscape; margin: 10mm; }