/* ==========================================================================
   READ VPN Backoffice — Components (DEV-GUIDE §4, READVPN-DESIGN-SYSTEM §5)
   Colours / sizes come from tokens.css (var(--rv-…)). The only literals are
   the overlay backdrop rgba(17,24,39,.4) (design §5.9 — no token exists) and
   the white check mark inside the checkbox data-URI (neutral-0).
   Breakpoints: ≥1200 desktop · 1024–1199 · 768–1023 tablet · <768 mobile.
   Touch (pointer:coarse): every control/hit area ≥ 44px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page layout, header, breadcrumb, section title
   -------------------------------------------------------------------------- */
.rv-page { display: flex; flex-direction: column; gap: var(--rv-space-4); min-width: 0; }
.rv-page-header { display: flex; flex-direction: column; gap: var(--rv-space-1); min-width: 0; }
.rv-page-header__row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--rv-space-3); min-width: 0; }
.rv-page-header__main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; min-width: 0; }
.rv-page-header__titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rv-space-2); min-width: 0; }
.rv-page-title { margin: 0; font-size: var(--rv-fs-page-title); line-height: var(--rv-lh-page-title); font-weight: 500; color: var(--rv-text-primary); overflow-wrap: anywhere; }
.rv-page-desc { margin: 0; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); }
.rv-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-1) var(--rv-space-3); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); }
.rv-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--rv-space-2); }
.rv-page-back { display: inline-flex; align-items: center; gap: var(--rv-space-1); align-self: flex-start; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); }
.rv-page-back:hover { color: var(--rv-primary-700); }
.rv-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); }
.rv-breadcrumb li { display: inline-flex; align-items: center; gap: var(--rv-space-2); color: var(--rv-text-muted); min-width: 0; }
.rv-breadcrumb li + li::before { content: "/"; color: var(--rv-neutral-400); }
.rv-breadcrumb a { color: var(--rv-text-secondary); }
.rv-breadcrumb a:hover { color: var(--rv-primary-700); }
.rv-breadcrumb [aria-current="page"] { color: var(--rv-text-primary); font-weight: 500; }
.rv-section-title { margin: 0; font-size: var(--rv-fs-section); line-height: var(--rv-lh-section); font-weight: 500; color: var(--rv-text-primary); }

/* --------------------------------------------------------------------------
   2. Cards
   -------------------------------------------------------------------------- */
.rv-card { min-width: 0; padding: var(--rv-space-4); background: var(--rv-surface); border: 1px solid var(--rv-card-border); border-radius: var(--rv-radius-card); box-shadow: var(--rv-shadow-card); }
.rv-card__head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--rv-space-2) var(--rv-space-3); }
.rv-card__heading { flex: 1 1 200px; min-width: 0; }
.rv-card__title { display: flex; align-items: center; gap: var(--rv-space-1); margin: 0; font-size: var(--rv-fs-card-title); line-height: var(--rv-lh-card-title); font-weight: 500; color: var(--rv-text-primary); }
.rv-card__sub { margin: 0; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); }
.rv-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); }
.rv-card__body { min-width: 0; }
.rv-card__head + .rv-card__body { margin-top: var(--rv-space-3); }
.rv-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--rv-space-2); margin-top: var(--rv-space-3); padding-top: var(--rv-space-3); border-top: 1px solid var(--rv-divider); }
.rv-card--flush { padding: 0; }
.rv-card--flush > .rv-card__head { padding: var(--rv-space-4) var(--rv-space-4) 0; }
.rv-card--flush > .rv-card__head + .rv-card__body { margin-top: var(--rv-space-3); }
.rv-card--flush > .rv-card__foot { margin-top: 0; padding: var(--rv-space-3) var(--rv-space-4); }
.rv-card--flush .rv-table-wrap { border-width: 1px 0 0; border-radius: 0; }
.rv-card--flush > .rv-card__body > .rv-dt > .rv-dt__toolbar,
.rv-card--flush > .rv-card__body > .rv-dt > .rv-dt__info,
.rv-card--flush > .rv-card__body > .rv-dt > .rv-dt__pager { padding: 0 var(--rv-space-4); }
.rv-card--flush > .rv-card__body > .rv-dt > .rv-dt__pager { padding-bottom: var(--rv-space-3); }
.rv-card--flush > .rv-card__body > .rv-dt > .rv-dt__body > .rv-dt__hbar { padding-left: var(--rv-space-4); padding-right: var(--rv-space-4); }
.rv-card--subtle { background: var(--rv-surface-subtle); }

/* --------------------------------------------------------------------------
   3. Stat cards
   -------------------------------------------------------------------------- */
.rv-stat { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--rv-space-3); background: var(--rv-surface); border: 1px solid var(--rv-card-border); border-radius: var(--rv-radius-card); color: var(--rv-text-primary); font: inherit; text-align: left; text-decoration: none; }
button.rv-stat { width: 100%; cursor: pointer; }
a.rv-stat, button.rv-stat, .rv-stat.is-clickable { transition: border-color var(--rv-motion-fast) var(--rv-motion-easing), background-color var(--rv-motion-fast) var(--rv-motion-easing); }
a.rv-stat:hover, button.rv-stat:hover, .rv-stat.is-clickable:hover { border-color: var(--rv-primary-700); background: var(--rv-surface-subtle); color: var(--rv-text-primary); text-decoration: none; }
a.rv-stat:focus-visible, button.rv-stat:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.rv-stat__hit { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.rv-stat__hit:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.rv-stat .rv-tip { position: relative; z-index: 2; }
.rv-stat__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rv-space-1); min-width: 0; }
.rv-stat__label { font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); }
.rv-stat__tag { margin-left: auto; padding: 0 6px; border-radius: var(--rv-radius-pill); background: var(--rv-neutral-100); color: var(--rv-neutral-700); font-size: var(--rv-fs-small); line-height: 18px; white-space: nowrap; }
.rv-stat__value { display: block; font-size: var(--rv-fs-stat); line-height: var(--rv-lh-stat); font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rv-stat__unit { margin-left: var(--rv-space-1); font-size: var(--rv-fs-small); font-weight: 400; color: var(--rv-text-secondary); }
.rv-stat--sm .rv-stat__value { font-size: var(--rv-fs-stat-sm); line-height: var(--rv-lh-stat-sm); }
.rv-stat__caption { display: block; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); }
.rv-stat__delta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--rv-space-1); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.rv-stat__delta.is-up { color: var(--rv-success); }
.rv-stat__delta.is-down { color: var(--rv-danger); }
.rv-stat__delta.is-flat { color: var(--rv-neutral); }
.rv-stat__delta.is-tone-success { color: var(--rv-success); }
.rv-stat__delta.is-tone-danger { color: var(--rv-danger); }
.rv-stat__delta.is-tone-neutral { color: var(--rv-neutral); }
.rv-stat__delta-text { font-weight: 400; color: var(--rv-text-muted); }
.rv-stat--primary .rv-stat__value { color: var(--rv-primary-700); }
.rv-stat--success .rv-stat__value { color: var(--rv-success); }
.rv-stat--warning .rv-stat__value { color: var(--rv-warning); }
.rv-stat--danger .rv-stat__value { color: var(--rv-danger); }
.rv-stat--info .rv-stat__value { color: var(--rv-info); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.rv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rv-space-2);
  min-height: var(--rv-control-h); padding: 0 var(--rv-space-3); margin: 0;
  border: 1px solid transparent; border-radius: var(--rv-radius-control);
  background: var(--rv-neutral-100); color: var(--rv-neutral-700);
  font: inherit; font-size: var(--rv-fs-small); line-height: 16px; font-weight: 500;
  white-space: nowrap; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none;
  transition: background-color var(--rv-motion-fast) var(--rv-motion-easing), color var(--rv-motion-fast) var(--rv-motion-easing), border-color var(--rv-motion-fast) var(--rv-motion-easing);
}
.rv-btn:hover { text-decoration: none; }
.rv-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.rv-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rv-btn--md { min-height: var(--rv-control-h-md); padding: 0 var(--rv-space-4); font-size: var(--rv-fs-body); line-height: 20px; }
.rv-btn--md svg { width: 18px; height: 18px; }
.rv-btn--icon { width: var(--rv-control-h); padding: 0; }
.rv-btn--icon.rv-btn--md { width: var(--rv-control-h-md); }
.rv-btn--block { display: flex; width: 100%; }

.rv-btn--primary { background: var(--rv-primary-500); border-color: var(--rv-primary-500); color: var(--rv-on-primary); }
.rv-btn--primary:hover { background: var(--rv-primary-600); border-color: var(--rv-primary-600); color: var(--rv-neutral-900); }
.rv-btn--primary:active { background: var(--rv-primary-700); border-color: var(--rv-primary-700); color: var(--rv-neutral-0); }
.rv-btn--strong { background: var(--rv-primary-700); border-color: var(--rv-primary-700); color: var(--rv-neutral-0); }
.rv-btn--strong:hover { background: var(--rv-primary-800); border-color: var(--rv-primary-800); color: var(--rv-neutral-0); }
.rv-btn--secondary { background: var(--rv-neutral-100); color: var(--rv-neutral-700); }
.rv-btn--secondary:hover { background: var(--rv-neutral-200); color: var(--rv-neutral-800); }
.rv-btn--outline { background: var(--rv-surface); border-color: var(--rv-control-border); color: var(--rv-neutral-700); }
.rv-btn--outline:hover { background: var(--rv-neutral-50); border-color: var(--rv-neutral-700); color: var(--rv-neutral-800); }
.rv-btn--ghost { background: transparent; color: var(--rv-primary-700); }
.rv-btn--ghost:hover { background: var(--rv-primary-50); color: var(--rv-primary-800); }
.rv-btn--danger { background: var(--rv-danger); border-color: var(--rv-danger); color: var(--rv-neutral-0); }
.rv-btn--danger:hover { filter: brightness(.9); color: var(--rv-neutral-0); }
.rv-btn--danger-outline { background: var(--rv-surface); border-color: var(--rv-danger-border); color: var(--rv-danger); }
.rv-btn--danger-outline:hover { background: var(--rv-danger-bg); border-color: var(--rv-danger); color: var(--rv-danger); }
.rv-btn--link { min-height: 0; padding: 0; border: 0; background: none; color: var(--rv-link); font-weight: 500; }
.rv-btn--link:hover { background: none; color: var(--rv-link-hover); text-decoration: underline; }
.rv-btn:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.rv-btn:disabled, .rv-btn.is-disabled, .rv-btn[aria-disabled="true"] { background: var(--rv-neutral-100); border-color: var(--rv-neutral-100); color: var(--rv-text-muted); cursor: not-allowed; filter: none; }
.rv-btn--ghost:disabled, .rv-btn--ghost.is-disabled, .rv-btn--link:disabled, .rv-btn--link.is-disabled { background: transparent; border-color: transparent; }
.rv-btn.is-busy { cursor: progress; }
.rv-spinner { display: inline-block; width: 14px; height: 14px; flex-shrink: 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rv-spin .8s linear infinite; }
.rv-link-btn { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--rv-link); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.rv-link-btn:hover { color: var(--rv-link-hover); text-decoration: underline; }
.rv-link-btn:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; border-radius: 2px; }

/* --------------------------------------------------------------------------
   5. Badges, chips, pills
   -------------------------------------------------------------------------- */
.rv-badge { display: inline-flex; align-items: center; gap: var(--rv-space-1); min-height: 22px; padding: 1px var(--rv-space-2); border: 1px solid transparent; border-radius: var(--rv-radius-pill); font-size: var(--rv-fs-small); line-height: 18px; font-weight: 500; white-space: nowrap; vertical-align: middle; max-width: 100%; }
.rv-badge svg { width: 12px; height: 12px; }
.rv-badge__dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.rv-badge--success { color: var(--rv-success); background: var(--rv-success-bg); border-color: var(--rv-success-border); }
.rv-badge--warning { color: var(--rv-warning); background: var(--rv-warning-bg); border-color: var(--rv-warning-border); }
.rv-badge--danger { color: var(--rv-danger); background: var(--rv-danger-bg); border-color: var(--rv-danger-border); }
.rv-badge--info { color: var(--rv-info); background: var(--rv-info-bg); border-color: var(--rv-info-border); }
.rv-badge--neutral { color: var(--rv-neutral); background: var(--rv-neutral-bg); border-color: var(--rv-neutral-border); }
.rv-badge--violet { color: var(--rv-violet); background: var(--rv-violet-bg); border-color: var(--rv-violet-border); }
.rv-badge--primary { color: var(--rv-primary-900); background: var(--rv-primary-50); border-color: var(--rv-primary-200); }

.rv-chip { display: inline-flex; align-items: center; gap: var(--rv-space-1); max-width: 100%; min-height: 24px; padding: 1px var(--rv-space-2); border: 1px solid transparent; border-radius: var(--rv-radius-pill); background: var(--rv-neutral-100); color: var(--rv-neutral-700); font: inherit; font-size: var(--rv-fs-small); line-height: 18px; vertical-align: middle; }
.rv-chip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-chip.is-selected { background: var(--rv-primary-50); border-color: var(--rv-primary-200); color: var(--rv-primary-900); }
.rv-chip__remove { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; margin: 0 -4px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.rv-chip__remove:hover { background: var(--rv-primary-100); }
.rv-chip__remove:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 1px; }
button.rv-chip { cursor: pointer; }
.rv-chip--toggle { min-height: var(--rv-control-h); padding: 0 var(--rv-space-3); border-color: var(--rv-border); background: var(--rv-surface); color: var(--rv-neutral-700); }
.rv-chip--toggle:hover { border-color: var(--rv-neutral-500); }
.rv-chip--toggle[aria-pressed="true"] { background: var(--rv-primary-50); border-color: var(--rv-primary-700); color: var(--rv-primary-900); }
.rv-chip--toggle[aria-pressed="false"] .rv-chip__check { display: none; }
.rv-chip--toggle:disabled { opacity: 1; background: var(--rv-neutral-100); color: var(--rv-text-muted); cursor: not-allowed; }
.rv-chip--toggle:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.rv-chip__check { display: inline-flex; }
.rv-chipset { display: flex; flex-wrap: wrap; gap: var(--rv-space-2); }

.rv-pill-demo, .rv-pill-phase { display: inline-flex; align-items: center; padding: 0 6px; border-radius: var(--rv-radius-pill); font-size: var(--rv-fs-small); line-height: 18px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.rv-pill-demo { background: var(--rv-neutral-800); color: var(--rv-neutral-0); }
.rv-pill-phase { background: var(--rv-info-bg); color: var(--rv-info); border: 1px solid var(--rv-info-border); }

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */
.rv-field { display: flex; flex-direction: column; gap: var(--rv-space-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.rv-field__label { display: block; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); font-weight: 500; color: var(--rv-neutral-700); }
span.rv-field__label[data-label-for] { cursor: default; }
.rv-fieldset > legend.rv-field__label { float: left; width: 100%; margin-bottom: var(--rv-space-1); padding: 0; }
.rv-fieldset > legend + * { clear: both; }
.rv-field__req { margin-left: 2px; color: var(--rv-danger); }
.rv-field__control { min-width: 0; }
.rv-field__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rv-space-2); }
.rv-field__help { margin: 0; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); }
.rv-field__count { margin-left: auto; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-field__error { display: flex; align-items: flex-start; gap: var(--rv-space-1); margin: 0; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-danger); }
.rv-field__error svg { margin-top: 3px; }
.rv-fieldset { min-width: 0; }

.rv-input, .rv-select, .rv-textarea {
  display: block; width: 100%; min-width: 0; min-height: var(--rv-control-h); margin: 0; padding: 5px var(--rv-space-3);
  background-color: var(--rv-surface); color: var(--rv-text-primary);
  border: 1px solid var(--rv-control-border); border-radius: var(--rv-radius-control);
  font: inherit; font-size: var(--rv-fs-small); line-height: 20px;
  transition: border-color var(--rv-motion-fast) var(--rv-motion-easing);
}
.rv-input:hover, .rv-select:hover, .rv-textarea:hover { border-color: var(--rv-neutral-700); }
.rv-input:focus, .rv-select:focus, .rv-textarea:focus { outline: 2px solid var(--rv-focus); outline-offset: 2px; border-color: var(--rv-primary-700); }
.rv-input::placeholder, .rv-textarea::placeholder { color: var(--rv-text-muted); opacity: 1; }
.rv-input[aria-invalid="true"], .rv-select[aria-invalid="true"], .rv-textarea[aria-invalid="true"] { border-color: var(--rv-danger); }
.rv-input:disabled, .rv-select:disabled, .rv-textarea:disabled { background-color: var(--rv-neutral-100); border-color: var(--rv-neutral-300); color: var(--rv-neutral-500); cursor: not-allowed; }
.rv-input[readonly] { background-color: var(--rv-surface-subtle); }
.rv-input.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.rv-input[type="search"] { -webkit-appearance: none; appearance: none; }
.rv-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.rv-input--date { font-variant-numeric: tabular-nums; }
.rv-textarea { min-height: 96px; padding: var(--rv-space-2) var(--rv-space-3); resize: vertical; }
.rv-select {
  -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer; text-overflow: ellipsis; white-space: nowrap;
  background-image: linear-gradient(45deg, transparent 50%, var(--rv-neutral-600) 50%), linear-gradient(135deg, var(--rv-neutral-600) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.rv-select::-ms-expand { display: none; }
button.rv-select { text-align: left; overflow: hidden; }

.rv-input-group { display: flex; align-items: stretch; min-width: 0; }
.rv-input-group > .rv-input { flex: 1 1 auto; border-radius: 0; }
.rv-input-group > :first-child { border-top-left-radius: var(--rv-radius-control); border-bottom-left-radius: var(--rv-radius-control); }
.rv-input-group > :last-child { border-top-right-radius: var(--rv-radius-control); border-bottom-right-radius: var(--rv-radius-control); }
.rv-input-group__addon { display: inline-flex; align-items: center; flex-shrink: 0; padding: 0 10px; border: 1px solid var(--rv-control-border); background: var(--rv-neutral-50); color: var(--rv-neutral-600); font-size: var(--rv-fs-small); white-space: nowrap; }
.rv-input-group__addon:first-child { border-right: 0; }
.rv-input-group__addon:last-child { border-left: 0; }

/* checkbox / radio (16px visual, primary-700 when selected) */
.rv-check, .rv-radio { position: relative; display: inline-flex; align-items: flex-start; gap: var(--rv-space-2); font-size: var(--rv-fs-small); line-height: 20px; color: var(--rv-text-primary); cursor: pointer; }
.rv-check > span, .rv-radio > span { min-width: 0; }
.rv-check input[type="checkbox"], .rv-radio input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; padding: 0;
  border: 1px solid var(--rv-control-border); background-color: var(--rv-surface); background-repeat: no-repeat; background-position: center;
  cursor: pointer; transition: background-color var(--rv-motion-fast), border-color var(--rv-motion-fast);
}
.rv-check input[type="checkbox"] { border-radius: 3px; }
.rv-radio input[type="radio"] { border-radius: 50%; }
.rv-check input[type="checkbox"]:hover, .rv-radio input[type="radio"]:hover { border-color: var(--rv-neutral-700); }
.rv-check input[type="checkbox"]:checked {
  background-color: var(--rv-primary-700); border-color: var(--rv-primary-700); background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.rv-check input[type="checkbox"]:indeterminate { background-color: var(--rv-primary-700); border-color: var(--rv-primary-700); background-image: linear-gradient(var(--rv-neutral-0), var(--rv-neutral-0)); background-size: 8px 2px; }
.rv-radio input[type="radio"]:checked { background-color: var(--rv-primary-700); border-color: var(--rv-primary-700); background-image: radial-gradient(circle, var(--rv-neutral-0) 0 3px, transparent 3.5px); }
.rv-check input:focus-visible, .rv-radio input:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.rv-check input:disabled, .rv-radio input:disabled { background-color: var(--rv-neutral-100); border-color: var(--rv-neutral-300); cursor: not-allowed; }
.rv-check input:disabled:checked, .rv-radio input:disabled:checked { background-color: var(--rv-neutral-400); border-color: var(--rv-neutral-400); }
.rv-check:has(input:disabled), .rv-radio:has(input:disabled) { color: var(--rv-text-muted); cursor: not-allowed; }
.rv-check--solo { justify-content: center; vertical-align: middle; }
.rv-check--solo input[type="checkbox"] { margin: 0; }
.rv-options { display: flex; flex-direction: column; gap: var(--rv-space-2); }
.rv-options--inline { flex-direction: row; flex-wrap: wrap; gap: var(--rv-space-2) var(--rv-space-4); }
.rv-option__help { display: block; font-size: var(--rv-fs-small); color: var(--rv-text-muted); }

/* switch 36×20 */
input[type="checkbox"].rv-switch {
  -webkit-appearance: none; appearance: none; flex: 0 0 36px; width: 36px; height: 20px; margin: 0; padding: 0; border: 0;
  border-radius: var(--rv-radius-pill); background-color: var(--rv-neutral-500); vertical-align: middle; cursor: pointer;
  background-image: radial-gradient(circle, var(--rv-neutral-0) 0 7px, transparent 7.5px);
  background-size: 20px 20px; background-position: 0 0; background-repeat: no-repeat;
  transition: background-position var(--rv-motion-fast) var(--rv-motion-easing), background-color var(--rv-motion-fast) var(--rv-motion-easing);
}
input[type="checkbox"].rv-switch:checked { background-color: var(--rv-primary-700); background-position: 16px 0; }
input[type="checkbox"].rv-switch:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
input[type="checkbox"].rv-switch:disabled { background-color: var(--rv-neutral-300); cursor: not-allowed; }
.rv-switch-field { display: inline-flex; align-items: center; gap: var(--rv-space-2); font-size: var(--rv-fs-small); line-height: 20px; color: var(--rv-text-primary); cursor: pointer; }

/* read-only value + reason */
.rv-readonly { display: flex; flex-direction: column; gap: 2px; min-height: var(--rv-control-h); padding: 5px var(--rv-space-3); background: var(--rv-surface-subtle); border: 1px dashed var(--rv-border); border-radius: var(--rv-radius-control); }
.rv-readonly__value { font-size: var(--rv-fs-small); line-height: 20px; color: var(--rv-text-primary); overflow-wrap: anywhere; user-select: text; }
.rv-readonly__reason { display: flex; align-items: center; gap: var(--rv-space-1); font-size: var(--rv-fs-small); line-height: 18px; color: var(--rv-text-muted); }

/* search box (leading icon, clear button) */
.rv-search { position: relative; display: flex; align-items: center; min-width: 0; }
.rv-search__icon { position: absolute; left: 10px; top: 50%; display: inline-flex; color: var(--rv-neutral-500); pointer-events: none; transform: translateY(-50%); }
.rv-search .rv-input { padding-left: 32px; padding-right: 32px; }
.rv-search__clear { position: absolute; right: 4px; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--rv-radius-control); background: none; color: var(--rv-neutral-500); cursor: pointer; transform: translateY(-50%); }
.rv-search__clear:hover { background: var(--rv-neutral-100); color: var(--rv-neutral-800); }
.rv-search__clear:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 0; }

/* form action bar */
.rv-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--rv-space-2); margin-top: var(--rv-space-4); padding-top: var(--rv-space-4); border-top: 1px solid var(--rv-divider); }
.rv-form-actions > .is-start { margin-right: auto; }

/* rich text */
.rv-rte { min-width: 0; overflow: hidden; background: var(--rv-surface); border: 1px solid var(--rv-control-border); border-radius: var(--rv-radius-control); }
.rv-rte:focus-within { outline: 2px solid var(--rv-focus); outline-offset: 2px; border-color: var(--rv-primary-700); }
.rv-rte.is-disabled { background: var(--rv-neutral-100); }
.rv-field.is-invalid .rv-rte { border-color: var(--rv-danger); }
.rv-rte__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: var(--rv-space-1); background: var(--rv-neutral-50); border-bottom: 1px solid var(--rv-divider); }
.rv-rte__btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--rv-radius-control); background: none; color: var(--rv-neutral-700); cursor: pointer; }
.rv-rte__btn:hover { background: var(--rv-neutral-200); }
.rv-rte__btn[aria-pressed="true"] { background: var(--rv-primary-50); border-color: var(--rv-primary-200); color: var(--rv-primary-900); }
.rv-rte__btn:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 0; }
.rv-rte__btn:disabled { color: var(--rv-neutral-400); cursor: not-allowed; background: none; }
.rv-rte__sep { width: 1px; height: 20px; margin: 0 var(--rv-space-1); background: var(--rv-divider); }
.rv-rte__editor { position: relative; max-height: 480px; overflow-y: auto; padding: var(--rv-space-3); outline: none; font-family: var(--rv-font-family); font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); color: var(--rv-text-primary); overflow-wrap: anywhere; }
.rv-rte__editor.is-empty::before { content: attr(data-placeholder); position: absolute; left: var(--rv-space-3); top: var(--rv-space-3); color: var(--rv-text-muted); pointer-events: none; }
.rv-prose { font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); overflow-wrap: anywhere; }
.rv-prose p { margin: 0 0 var(--rv-space-2); }
.rv-prose h3 { margin: var(--rv-space-3) 0 6px; font-size: var(--rv-fs-card-title); line-height: var(--rv-lh-card-title); font-weight: 600; }
.rv-prose h4 { margin: var(--rv-space-3) 0 var(--rv-space-1); font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); font-weight: 600; }
.rv-prose > :first-child { margin-top: 0; }
.rv-prose ul, .rv-prose ol { margin: 0 0 var(--rv-space-2); padding-left: var(--rv-space-6); }
.rv-prose li { margin: 2px 0; }
.rv-prose a { color: var(--rv-link); text-decoration: underline; }
.rv-prose img { display: block; max-width: 100%; height: auto; margin: var(--rv-space-2) 0; border-radius: var(--rv-radius-control); }

/* upload / dropzone / file rows */
.rv-upload { display: flex; flex-direction: column; gap: var(--rv-space-2); min-width: 0; }
.rv-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: var(--rv-space-4); border: 1px dashed var(--rv-neutral-400); border-radius: var(--rv-radius-card); background: var(--rv-neutral-50); color: var(--rv-text-secondary); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); text-align: center; transition: background-color var(--rv-motion-fast), border-color var(--rv-motion-fast); }
.rv-dropzone--compact { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; min-height: 0; padding: var(--rv-space-2); text-align: left; }
.rv-dropzone.is-over { background: var(--rv-primary-50); border-color: var(--rv-primary-700); }
.rv-dropzone__icon { color: var(--rv-neutral-400); }
.rv-dropzone__text, .rv-dropzone__hint { margin: 0; }
.rv-dropzone__hint { color: var(--rv-text-muted); }
.rv-upload__input:focus-visible + .rv-upload__btn { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.rv-field.is-busy .rv-upload__btn { cursor: progress; opacity: .7; }
.rv-field.is-invalid .rv-dropzone { border-color: var(--rv-danger); }
.rv-upload__error { margin: 0; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-danger); }
.rv-files { display: flex; flex-direction: column; gap: var(--rv-space-1); margin: 0; padding: 0; list-style: none; }
.rv-files:empty { display: none; }
.rv-file { display: flex; align-items: center; gap: var(--rv-space-2); min-height: 40px; min-width: 0; padding: var(--rv-space-1) var(--rv-space-1) var(--rv-space-1) var(--rv-space-2); border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-control); background: var(--rv-surface); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); }
.rv-file__icon { display: inline-flex; color: var(--rv-neutral-500); }
.rv-file__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.rv-file__meta { color: var(--rv-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-files--images { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--rv-space-2); }
.rv-file--image { flex-direction: column; align-items: stretch; gap: var(--rv-space-1); padding: 6px; }
.rv-file__preview { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rv-radius-control); background: var(--rv-neutral-100); }
.rv-file__preview.is-empty { display: flex; align-items: center; justify-content: center; color: var(--rv-neutral-400); }
.rv-file__row { display: flex; align-items: center; gap: var(--rv-space-1); min-width: 0; }

/* picker (searchable select) */
.rv-picker { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rv-picker__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-picker__chips:empty { display: none; }
.rv-picker__chip { min-height: 28px; padding-left: 4px; }
.rv-picker__chip .rv-picker__media { display: inline-flex; }
.rv-picker__search { position: relative; }
.rv-picker__search .rv-input { padding-left: 32px; }
.rv-picker__list { position: absolute; top: 100%; left: 0; right: 0; z-index: var(--rv-z-popover); max-height: 280px; margin: var(--rv-space-1) 0 0; padding: var(--rv-space-1); overflow-y: auto; list-style: none; background: var(--rv-surface); border: 1px solid var(--rv-neutral-300); border-radius: var(--rv-radius-menu); box-shadow: var(--rv-shadow-popover); }
.rv-picker__opt { display: flex; align-items: center; gap: var(--rv-space-2); min-height: 32px; padding: 6px var(--rv-space-2); border-radius: 4px; font-size: var(--rv-fs-small); line-height: 18px; color: var(--rv-text-primary); cursor: pointer; }
.rv-picker__opt.is-active { background: var(--rv-neutral-100); }
.rv-picker__opt[aria-selected="true"] { background: var(--rv-primary-50); }
.rv-picker__opt.is-active[aria-selected="true"] { background: var(--rv-primary-100); }
.rv-picker__opt[aria-disabled="true"] { color: var(--rv-text-muted); cursor: not-allowed; }
.rv-picker__media { display: inline-flex; flex-shrink: 0; }
.rv-picker__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.rv-picker__label { overflow-wrap: anywhere; }
.rv-picker__sub { color: var(--rv-text-muted); overflow-wrap: anywhere; }
.rv-picker__check { display: inline-flex; flex-shrink: 0; width: 16px; color: var(--rv-primary-700); }
.rv-picker__empty { padding: var(--rv-space-2); color: var(--rv-text-muted); font-size: var(--rv-fs-small); cursor: default; }
.rv-picker__hint { margin: 0; font-size: var(--rv-fs-small); color: var(--rv-text-muted); }
.rv-field.is-invalid .rv-picker__input { border-color: var(--rv-danger); }

/* rich select (RVA.richSelect — course / assessment / instructor) */
select.rv-rs__native, select.rv-select.rv-rs__native {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; max-width: 1px !important;
  min-height: 0 !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); opacity: 0; pointer-events: none; white-space: nowrap;
}
button.rv-rs__trigger { display: flex; align-items: center; min-width: 0; text-align: left; }
.rv-rs__tbody { display: flex; align-items: center; gap: var(--rv-space-2); flex: 1 1 auto; min-width: 0; }
.rv-rs__tmedia { display: inline-flex; flex-shrink: 0; }
.rv-rs__tval { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-rs__tval.is-placeholder { color: var(--rv-text-secondary); }
.rv-rs__trigger[aria-expanded="true"] { border-color: var(--rv-primary-700); }
.rv-rs__pop {
  position: fixed; top: 0; left: 0; z-index: var(--rv-z-popover); display: flex; flex-direction: column; max-width: calc(100vw - 16px); max-height: 420px;
  padding: var(--rv-space-1); background: var(--rv-surface); border: 1px solid var(--rv-neutral-300); border-radius: var(--rv-radius-menu);
  box-shadow: var(--rv-shadow-popover); outline: none;
}
.rv-rs__search { position: relative; flex-shrink: 0; padding: var(--rv-space-1); }
.rv-rs__sicon { position: absolute; left: 14px; top: 50%; display: inline-flex; color: var(--rv-neutral-500); pointer-events: none; transform: translateY(-50%); }
.rv-rs__q.rv-input { padding-left: 32px; }
.rv-rs__list { flex: 1 1 auto; min-height: 0; max-height: 320px; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.rv-rs__opt { display: flex; align-items: center; gap: var(--rv-space-3); min-height: 56px; padding: var(--rv-space-2); border-radius: 4px; color: var(--rv-text-primary); cursor: pointer; }
.rv-rs__pop[data-entity="course"] .rv-rs__opt { min-height: 64px; }
.rv-rs__pop .rv-rs__opt--none { min-height: 40px; color: var(--rv-text-secondary); }
.rv-rs__opt.is-active { background: var(--rv-neutral-100); }
.rv-rs__opt[aria-selected="true"] { background: var(--rv-selected-bg); }
.rv-rs__opt.is-active[aria-selected="true"] { background: var(--rv-primary-100); }
.rv-rs__opt.rv-rs__opt--none[aria-selected="true"] { background: none; }
.rv-rs__opt.rv-rs__opt--none.is-active { background: var(--rv-neutral-100); }
.rv-rs__opt[aria-disabled="true"] { cursor: not-allowed; }
.rv-rs__opt[aria-disabled="true"] .rv-rs__title, .rv-rs__opt[aria-disabled="true"] .rv-rs__meta { color: var(--rv-text-muted); }
.rv-rs__opt[aria-disabled="true"] .rv-rs__media { opacity: .5; }
.rv-rs__media { display: inline-flex; flex-shrink: 0; }
.rv-rs__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rv-rs__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--rv-fs-body); line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }
.rv-rs__opt--none .rv-rs__title { font-weight: 400; }
.rv-rs__title .rv-badge { min-height: 18px; padding: 0 6px; line-height: 16px; vertical-align: 1px; }
.rv-rs__meta { overflow: hidden; font-size: var(--rv-fs-small); line-height: 18px; color: var(--rv-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.rv-rs__reason { font-size: var(--rv-fs-small); line-height: 18px; color: var(--rv-text-muted); overflow-wrap: anywhere; }
.rv-rs__check { display: inline-flex; flex-shrink: 0; width: 16px; color: var(--rv-primary-700); }
.rv-rs__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--rv-radius-menu); background: var(--rv-primary-50); color: var(--rv-primary-700); }
.rv-rs__icon--row { width: 40px; height: 40px; }
.rv-rs__icon--mini { width: 20px; height: 20px; border-radius: 4px; }
.rv-rs__empty { display: flex; flex-direction: column; align-items: center; gap: var(--rv-space-2); padding: var(--rv-space-6) var(--rv-space-4); color: var(--rv-text-muted); font-size: var(--rv-fs-small); text-align: center; }
.rv-rs__hint { margin: 0; padding: var(--rv-space-1) var(--rv-space-2) 0; font-size: var(--rv-fs-small); color: var(--rv-text-muted); }
.rv-rs__pop--sheet { position: static; width: auto; max-width: none; max-height: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.rv-rs__pop--sheet .rv-rs__search { position: sticky; top: 0; z-index: 1; padding: var(--rv-space-2) 0; background: var(--rv-surface); }
.rv-rs__pop--sheet .rv-rs__list { max-height: none; overflow: visible; }
.rv-rs__pop--sheet .rv-rs__sicon { left: 10px; }
.rv-rs__sheet .rv-sheet__body { padding-top: 0; }
.rv-picker--rich .rv-picker__chip .rv-picker__media { align-items: center; }
@media print { .rv-rs__pop { display: none !important; } }

/* --------------------------------------------------------------------------
   7. DataTable, tables, mobile cards, pagination
   -------------------------------------------------------------------------- */
.rv-dt { display: flex; flex-direction: column; gap: var(--rv-space-3); min-width: 0; max-width: 100%; }
.rv-dt__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); min-width: 0; }
.rv-dt__toolbar-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); flex: 1 1 280px; min-width: 0; }
.rv-dt__toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); margin-left: auto; }
.rv-dt__search { flex: 1 1 220px; max-width: 360px; }
.rv-dt__info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2) var(--rv-space-3); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); }
.rv-dt__info:empty { display: none; }
.rv-dt__selinfo { color: var(--rv-primary-900); font-weight: 500; }
.rv-dt__msort { display: inline-flex; align-items: center; gap: var(--rv-space-2); margin-left: auto; color: var(--rv-text-secondary); }
.rv-dt__msort .rv-select { width: auto; max-width: 220px; }
.rv-dt__main { min-width: 0; }
.rv-dt__body { position: relative; min-width: 0; }
/* horizontal scroll controls: sticky under the topbar, scoped to the table body (never over the pager) — 13 ต.ค. 2569 */
.rv-dt__hbar { position: sticky; top: var(--rv-header-height); z-index: var(--rv-z-sticky); display: flex; align-items: center; gap: var(--rv-space-2) var(--rv-space-3); margin-bottom: var(--rv-space-2); padding: var(--rv-space-1) 0; background: var(--rv-page-bg); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); }
.rv-dt__hbar-hint { min-width: 0; }
.rv-dt__hbar-btns { display: flex; flex-shrink: 0; gap: var(--rv-space-3); margin-left: auto; }
.rv-dt__hbar .rv-btn { position: relative; }
.rv-dt__hbar .rv-btn::after { content: ""; position: absolute; inset: -6px; }   /* 32px control → 44px hit area (12px gap keeps the areas apart) */
.rv-card--subtle .rv-dt__hbar { background: var(--rv-surface-subtle); }
.rv-modal__body .rv-dt__hbar, .rv-drawer__body .rv-dt__hbar, .rv-sheet__body .rv-dt__hbar { top: 0; }   /* the overlay body is the scroller there */
.rv-table-wrap[tabindex]:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: -2px; }
.rv-dt__pager:empty { display: none; }
.rv-dt__state { border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-card); background: var(--rv-surface); }
.rv-dt__state > .rv-error-state { border: 0; }

.rv-table-wrap { position: relative; width: 100%; max-width: 100%; overflow-x: auto; background: var(--rv-surface); border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-card); -webkit-overflow-scrolling: touch; }
.rv-table-wrap.is-sticky { max-height: calc(100vh - 120px); max-height: max(360px, calc(100dvh - 120px)); overflow: auto; overscroll-behavior-x: contain; }
.rv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--rv-fs-small); line-height: 20px; color: var(--rv-text-primary); }
.rv-table th, .rv-table td { padding: var(--rv-space-1) var(--rv-space-2); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rv-divider); }
.rv-table thead th { height: 40px; background: var(--rv-neutral-50); font-weight: 600; color: var(--rv-text-primary); white-space: nowrap; }
.rv-table-wrap.is-sticky thead th { position: sticky; top: 0; z-index: 2; }
.rv-table tbody td, .rv-table tbody th { height: 40px; }
.rv-table tbody tr:last-child > td, .rv-table tbody tr:last-child > th { border-bottom: 0; }
.rv-table tbody tr:hover > td, .rv-table tbody tr:hover > th { background: var(--rv-row-hover); }
.rv-table tbody tr.is-selected > td { background: var(--rv-selected-bg); }
.rv-table tbody tr.is-clickable { cursor: pointer; }
.rv-table tbody tr:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: -2px; }
.rv-table tfoot td, .rv-table tfoot th { height: 40px; border-top: 1px solid var(--rv-border); border-bottom: 0; background: var(--rv-neutral-50); font-weight: 600; }
.rv-table .is-num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-table .is-center { text-align: center; }
.rv-table th.rv-table__select, .rv-table td.rv-table__select { width: 44px; padding-left: var(--rv-space-3); padding-right: var(--rv-space-1); text-align: center; }
.rv-table .rv-table__actions { width: 1%; text-align: right; white-space: nowrap; }
.rv-table__actions-inner { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--rv-space-1); }
.rv-table .rv-table__actions.is-first { text-align: left; }
.rv-table__actions.is-first .rv-table__actions-inner { justify-content: flex-start; }
.rv-table--dense th, .rv-table--dense td { padding-top: 2px; padding-bottom: 2px; }
.rv-table--dense tbody td { height: 32px; }
.rv-table__skeleton td { height: 40px; }
.rv-th-sort { display: inline-flex; align-items: center; gap: var(--rv-space-1); margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.rv-th-sort svg { color: var(--rv-neutral-400); }
.rv-th-sort:hover { color: var(--rv-primary-700); }
.rv-th-sort:hover svg, th.is-sorted .rv-th-sort svg { color: var(--rv-primary-700); }
.rv-th-sort:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; border-radius: 2px; }
.rv-table th .rv-tip { margin-left: 2px; }

/* mobile card list */
.rv-mcards { display: flex; flex-direction: column; gap: var(--rv-space-2); }
.rv-mcards__bar { display: flex; align-items: center; padding: 0 var(--rv-space-1); }
.rv-mcards__foot { margin-top: var(--rv-space-2); }
.rv-mcard { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--rv-space-3); background: var(--rv-surface); border: 1px solid var(--rv-card-border); border-radius: var(--rv-radius-card); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); }
.rv-mcard.is-selected { background: var(--rv-selected-bg); border-color: var(--rv-primary-700); }
.rv-mcard.is-clickable { cursor: pointer; }
.rv-mcard:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.rv-mcard__head { display: flex; align-items: flex-start; gap: var(--rv-space-2); min-width: 0; }
.rv-mcard__select { display: flex; flex-shrink: 0; }
.rv-mcard.is-custom > .rv-mcard__select { align-self: flex-start; }
.rv-mcard__title { flex: 1 1 auto; min-width: 0; font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); font-weight: 500; overflow-wrap: anywhere; }
.rv-mcard__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--rv-space-1); flex-shrink: 0; max-width: 50%; }
.rv-mcard__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-1); color: var(--rv-text-secondary); overflow-wrap: anywhere; }
.rv-mcard__dot { color: var(--rv-neutral-400); }
.rv-mcard__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rv-space-1) var(--rv-space-3); margin: 0; }
.rv-mcard__meta-item { min-width: 0; }
.rv-mcard__meta dt { color: var(--rv-text-muted); }
.rv-mcard__meta dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rv-mcard__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--rv-space-2); padding-top: var(--rv-space-2); border-top: 1px solid var(--rv-divider); }
.rv-mcard--skeleton { gap: 10px; }

/* pagination */
.rv-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rv-space-2) var(--rv-space-4); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); }
.rv-pagination__count { color: var(--rv-text-secondary); font-variant-numeric: tabular-nums; }
.rv-pagination__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2) var(--rv-space-3); }
.rv-pagination__size { display: inline-flex; align-items: center; gap: 6px; color: var(--rv-text-secondary); white-space: nowrap; }
.rv-pagination__size .rv-select { width: auto; min-width: 68px; }
.rv-pagination__nav { display: inline-flex; align-items: center; gap: var(--rv-space-1); }
.rv-pagination__pages { display: inline-flex; align-items: center; gap: var(--rv-space-1); }
.rv-pagination__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--rv-space-1); min-width: var(--rv-control-h); min-height: var(--rv-control-h); padding: 0 var(--rv-space-2); border: 1px solid transparent; border-radius: var(--rv-radius-control); background: var(--rv-neutral-100); color: var(--rv-neutral-700); font: inherit; font-size: var(--rv-fs-small); font-variant-numeric: tabular-nums; cursor: pointer; }
.rv-pagination__btn:hover:not(:disabled) { background: var(--rv-neutral-200); }
.rv-pagination__btn.is-current { background: var(--rv-primary-500); border-color: var(--rv-primary-500); color: var(--rv-on-primary); font-weight: 600; }
.rv-pagination__btn:disabled { background: var(--rv-neutral-50); border-color: var(--rv-neutral-200); color: var(--rv-neutral-400); cursor: not-allowed; }
.rv-pagination__btn:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.rv-pagination__gap { min-width: 20px; color: var(--rv-text-muted); text-align: center; }
.rv-pagination__status { display: none; padding: 0 var(--rv-space-2); color: var(--rv-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   8. Tabs / segmented
   -------------------------------------------------------------------------- */
.rv-tabs { position: relative; display: flex; gap: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--rv-divider); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rv-tabs::-webkit-scrollbar { display: none; }
.rv-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 48px; margin: 0; padding: 0 var(--rv-space-3); border: 0; background: none; color: var(--rv-neutral-600); font: inherit; font-size: var(--rv-fs-card-title); line-height: var(--rv-lh-card-title); font-weight: 400; white-space: nowrap; cursor: pointer; }
.rv-tab:hover { color: var(--rv-primary-700); }
.rv-tab[aria-selected="true"] { color: var(--rv-primary-700); font-weight: 500; }
.rv-tabs .rv-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rv-primary-700); }
.rv-tab:disabled { color: var(--rv-neutral-400); cursor: not-allowed; }
.rv-tab:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: -2px; }
.rv-tab__label { min-width: 0; }
.rv-tab__count { min-width: 20px; padding: 0 6px; border-radius: var(--rv-radius-pill); background: var(--rv-neutral-100); color: var(--rv-neutral-700); font-size: var(--rv-fs-small); line-height: 18px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.rv-tab[aria-selected="true"] .rv-tab__count { background: var(--rv-primary-50); color: var(--rv-primary-900); }
.rv-tabs--sub .rv-tab { height: 36px; font-size: var(--rv-fs-body); line-height: 20px; }
.rv-segmented { position: relative; display: inline-flex; gap: 2px; max-width: 100%; padding: 2px; overflow-x: auto; background: var(--rv-neutral-100); border-radius: var(--rv-radius-control); scrollbar-width: none; vertical-align: middle; }
.rv-segmented::-webkit-scrollbar { display: none; }
.rv-segmented .rv-tab { height: 28px; padding: 0 var(--rv-space-3); border-radius: 2px; color: var(--rv-neutral-700); font-size: var(--rv-fs-small); line-height: 16px; }
.rv-segmented .rv-tab[aria-selected="true"] { background: var(--rv-surface); color: var(--rv-primary-900); font-weight: 500; box-shadow: 0 0 0 1px var(--rv-border); }

/* --------------------------------------------------------------------------
   9. Overlays: backdrop, layers, modal, drawer, sheet, toast, menu, tooltip
   -------------------------------------------------------------------------- */
.rv-scroll-locked, .rv-scroll-locked body { overflow: hidden; }
.rv-backdrop { position: fixed; inset: 0; z-index: var(--rv-z-backdrop); background: rgba(17, 24, 39, .4); animation: rv-fade-in var(--rv-motion-base) var(--rv-motion-easing); }
.rv-layer { position: fixed; inset: 0; z-index: var(--rv-z-modal); display: flex; padding: var(--rv-space-4) var(--rv-space-3); pointer-events: none; }
.rv-layer--modal { align-items: center; justify-content: center; }
.rv-layer--drawer { justify-content: flex-end; padding: 0; }
.rv-layer--sheet { align-items: flex-end; justify-content: center; padding: 0; }
.rv-modal, .rv-drawer, .rv-sheet { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--rv-surface); color: var(--rv-text-primary); box-shadow: var(--rv-shadow-modal); pointer-events: auto; outline: none; }
.rv-modal { width: 560px; max-width: calc(100vw - 24px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border-radius: var(--rv-radius-overlay); animation: rv-pop-in var(--rv-motion-base) var(--rv-motion-easing); }
.rv-modal--confirm { width: 400px; }
.rv-modal--md { width: 560px; }
.rv-modal--lg { width: 800px; }
.rv-modal--xl { width: 1040px; }
.rv-modal--full { width: calc(100vw - 24px); height: calc(100vh - 32px); height: calc(100dvh - 32px); }
.rv-modal__head, .rv-drawer__head, .rv-sheet__head { display: flex; align-items: flex-start; gap: var(--rv-space-3); flex-shrink: 0; padding: 20px var(--rv-space-6) var(--rv-space-3); }
.rv-modal__heading, .rv-drawer__heading, .rv-sheet__heading { flex: 1 1 auto; min-width: 0; }
.rv-modal__title, .rv-drawer__title, .rv-sheet__title { margin: 0; font-size: var(--rv-fs-section); line-height: var(--rv-lh-section); font-weight: 500; overflow-wrap: anywhere; }
.rv-modal__sub, .rv-drawer__sub, .rv-sheet__sub { margin: 2px 0 0; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); }
.rv-overlay-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--rv-touch); height: var(--rv-touch); margin: -8px -14px -8px 0; padding: 0; border: 0; border-radius: var(--rv-radius-control); background: none; color: var(--rv-neutral-600); cursor: pointer; }
.rv-overlay-close:hover { background: var(--rv-neutral-100); color: var(--rv-neutral-900); }
.rv-overlay-close:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: -2px; }
.rv-modal__body, .rv-drawer__body, .rv-sheet__body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--rv-space-1) var(--rv-space-6) var(--rv-space-6); }
.rv-modal__foot, .rv-drawer__foot, .rv-sheet__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--rv-space-2); flex-shrink: 0; padding: var(--rv-space-3) var(--rv-space-6); border-top: 1px solid var(--rv-divider); }
.rv-confirm { display: flex; flex-direction: column; gap: var(--rv-space-3); font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); color: var(--rv-text-secondary); }
.rv-confirm__msg p { margin: 0 0 var(--rv-space-2); }

.rv-drawer { width: 480px; max-width: 100vw; height: 100%; border-radius: var(--rv-radius-overlay) 0 0 var(--rv-radius-overlay); animation: rv-slide-left var(--rv-motion-base) var(--rv-motion-easing); }
.rv-drawer--sm { width: 400px; }
.rv-drawer--md { width: 480px; }
.rv-drawer--lg { width: 640px; }
.rv-drawer--xl { width: 860px; }
.rv-drawer__tabs { flex-shrink: 0; padding: 0 var(--rv-space-6); }
.rv-drawer__body { padding-top: var(--rv-space-4); }
.rv-drawer__panel { min-width: 0; }
.rv-drawer__panel:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }

.rv-sheet { width: 100%; max-height: 85vh; max-height: 85dvh; border-radius: var(--rv-radius-overlay) var(--rv-radius-overlay) 0 0; animation: rv-slide-up var(--rv-motion-base) var(--rv-motion-easing); }
.rv-sheet__grip { flex-shrink: 0; width: 36px; height: 4px; margin: var(--rv-space-2) auto 0; border-radius: var(--rv-radius-pill); background: var(--rv-neutral-300); }
.rv-sheet__head { padding-top: var(--rv-space-3); }
.rv-sheet__foot { padding-bottom: calc(var(--rv-space-3) + env(safe-area-inset-bottom)); }

.rv-toast-stack { position: fixed; top: var(--rv-space-4); right: var(--rv-space-4); z-index: var(--rv-z-toast); display: flex; flex-direction: column; gap: var(--rv-space-2); width: 360px; max-width: calc(100vw - 24px); pointer-events: none; }
.rv-toast { display: flex; align-items: flex-start; gap: var(--rv-space-2); padding: 10px var(--rv-space-3); background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-menu); box-shadow: var(--rv-shadow-popover); font-size: var(--rv-fs-body); line-height: 20px; color: var(--rv-text-primary); pointer-events: auto; animation: rv-slide-down var(--rv-motion-base) var(--rv-motion-easing); }
.rv-toast__icon { display: inline-flex; flex-shrink: 0; margin-top: 1px; }
.rv-toast__msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rv-toast__action { flex-shrink: 0; margin: -2px 0; padding: 2px 6px; border: 0; border-radius: var(--rv-radius-control); background: none; color: var(--rv-link); font: inherit; font-size: var(--rv-fs-small); font-weight: 600; cursor: pointer; }
.rv-toast__action:hover { background: var(--rv-primary-50); }
.rv-toast__close { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; margin: -2px -4px -2px 0; padding: 0; border: 0; border-radius: var(--rv-radius-control); background: none; color: var(--rv-neutral-500); cursor: pointer; }
.rv-toast__close:hover { background: var(--rv-neutral-100); color: var(--rv-neutral-800); }
.rv-toast__action:focus-visible, .rv-toast__close:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 1px; }
.rv-toast--success { background: var(--rv-success-bg); border-color: var(--rv-success-border); }
.rv-toast--success .rv-toast__icon { color: var(--rv-success); }
.rv-toast--info { background: var(--rv-info-bg); border-color: var(--rv-info-border); }
.rv-toast--info .rv-toast__icon { color: var(--rv-info); }
.rv-toast--warning { background: var(--rv-warning-bg); border-color: var(--rv-warning-border); }
.rv-toast--warning .rv-toast__icon { color: var(--rv-warning); }
.rv-toast--danger { background: var(--rv-danger-bg); border-color: var(--rv-danger-border); }
.rv-toast--danger .rv-toast__icon { color: var(--rv-danger); }

.rv-menu { position: fixed; z-index: var(--rv-z-popover); min-width: 180px; max-width: min(320px, calc(100vw - 16px)); padding: var(--rv-space-1); overflow-y: auto; background: var(--rv-surface); border: 1px solid var(--rv-neutral-300); border-radius: var(--rv-radius-menu); box-shadow: var(--rv-shadow-popover); outline: none; animation: rv-fade-in var(--rv-motion-fast) var(--rv-motion-easing); }
.rv-menu__item { display: flex; align-items: center; gap: var(--rv-space-2); width: 100%; min-height: 32px; margin: 0; padding: 6px var(--rv-space-3); border: 0; border-radius: 4px; background: none; color: var(--rv-text-primary); font: inherit; font-size: var(--rv-fs-small); line-height: 20px; text-align: left; text-decoration: none; cursor: pointer; }
.rv-menu__item svg { color: var(--rv-neutral-600); }
.rv-menu__item:hover, .rv-menu__item:focus { background: var(--rv-neutral-100); color: var(--rv-text-primary); text-decoration: none; outline: none; }
.rv-menu__item:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: -2px; }
.rv-menu__item.is-selected { background: var(--rv-primary-50); }
.rv-menu__item.is-danger, .rv-menu__item.is-danger svg { color: var(--rv-danger); }
.rv-menu__item.is-danger:hover, .rv-menu__item.is-danger:focus { background: var(--rv-danger-bg); color: var(--rv-danger); }
.rv-menu__item:disabled, .rv-menu__item:disabled svg { color: var(--rv-neutral-400); background: none; cursor: not-allowed; }
.rv-menu__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rv-menu__check { display: inline-flex; color: var(--rv-primary-700); }
.rv-menu__sep { height: 1px; margin: var(--rv-space-1) 0; background: var(--rv-divider); }

.rv-tooltip { position: fixed; z-index: var(--rv-z-tooltip); max-width: 280px; padding: 6px var(--rv-space-2); border-radius: 4px; background: var(--rv-neutral-800); color: var(--rv-neutral-0); box-shadow: var(--rv-shadow-popover); font-size: var(--rv-fs-small); line-height: 18px; white-space: normal; overflow-wrap: anywhere; pointer-events: none; }
.rv-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--rv-neutral-500); vertical-align: middle; cursor: help; }
.rv-tip:hover { color: var(--rv-primary-700); }
.rv-tip:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   10. States: empty, error, skeleton, alert
   -------------------------------------------------------------------------- */
.rv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rv-space-1); padding: var(--rv-space-8); text-align: center; color: var(--rv-text-secondary); }
.rv-empty__icon { display: inline-flex; margin-bottom: var(--rv-space-1); color: var(--rv-neutral-400); }
.rv-empty__icon svg { width: 32px; height: 32px; }
.rv-empty__title { margin: 0; font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); font-weight: 500; color: var(--rv-text-primary); }
.rv-empty__desc { max-width: 420px; margin: 0; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); }
.rv-empty__action { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--rv-space-2); margin-top: var(--rv-space-2); }

.rv-error-state { display: flex; align-items: flex-start; gap: var(--rv-space-3); padding: var(--rv-space-4); background: var(--rv-danger-bg); border: 1px solid var(--rv-danger-border); border-radius: var(--rv-radius-card); color: var(--rv-text-primary); }
.rv-error-state__icon { display: inline-flex; flex-shrink: 0; color: var(--rv-danger); }
.rv-error-state__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-error-state__title { margin: 0; font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); font-weight: 500; color: var(--rv-danger); }
.rv-error-state__desc { margin: 0; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); }
.rv-error-state__action { margin-top: var(--rv-space-2); }

.rv-skeleton { display: flex; flex-direction: column; gap: var(--rv-space-2); }
.rv-skeleton__block { display: block; height: 12px; max-width: 100%; border-radius: 3px; background: var(--rv-neutral-100); animation: rv-pulse 1.4s ease-in-out infinite; }
.rv-skeleton__block--lg { height: 24px; }
.rv-skeleton--table { gap: 0; border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-card); overflow: hidden; }
.rv-skeleton__row { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--rv-space-4); align-items: center; height: 40px; padding: 0 var(--rv-space-3); border-bottom: 1px solid var(--rv-divider); }
.rv-skeleton__row:last-child { border-bottom: 0; }
.rv-skeleton__head { background: var(--rv-neutral-50); }
.rv-skeleton__head .rv-skeleton__block { background: var(--rv-neutral-200); }
.rv-skeleton--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--rv-space-3); }
.rv-skeleton__card { display: flex; flex-direction: column; gap: var(--rv-space-2); padding: var(--rv-space-3); border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-card); }
.rv-skeleton__chart { display: flex; align-items: flex-end; gap: var(--rv-space-2); padding: var(--rv-space-4) var(--rv-space-3) 0; border-bottom: 1px solid var(--rv-divider); }
.rv-skeleton__bar { flex: 1 1 0; border-radius: 3px 3px 0 0; background: var(--rv-neutral-100); animation: rv-pulse 1.4s ease-in-out infinite; }

.rv-alert { display: flex; align-items: flex-start; gap: var(--rv-space-2); padding: 10px var(--rv-space-3); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-card); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-primary); }
.rv-alert__icon { display: inline-flex; flex-shrink: 0; margin-top: 1px; }
.rv-alert__body { flex: 1 1 auto; min-width: 0; }
.rv-alert__title { margin: 0; font-size: var(--rv-fs-body); line-height: 20px; font-weight: 600; }
.rv-alert__text { margin: 0; color: var(--rv-text-secondary); }
.rv-alert__action { display: flex; flex-wrap: wrap; gap: var(--rv-space-2); flex-shrink: 0; align-self: center; }
.rv-alert--info { background: var(--rv-info-bg); border-color: var(--rv-info-border); }
.rv-alert--info .rv-alert__icon { color: var(--rv-info); }
.rv-alert--success { background: var(--rv-success-bg); border-color: var(--rv-success-border); }
.rv-alert--success .rv-alert__icon { color: var(--rv-success); }
.rv-alert--warning { background: var(--rv-warning-bg); border-color: var(--rv-warning-border); }
.rv-alert--warning .rv-alert__icon { color: var(--rv-warning); }
.rv-alert--danger { background: var(--rv-danger-bg); border-color: var(--rv-danger-border); }
.rv-alert--danger .rv-alert__icon, .rv-alert--danger .rv-alert__title { color: var(--rv-danger); }

/* --------------------------------------------------------------------------
   11. Data display: kv, cell, avatar, thumb, progress, timeline, thread, lists
   -------------------------------------------------------------------------- */
.rv-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rv-space-2) var(--rv-space-6); margin: 0; }
.rv-kv--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-kv__row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--rv-space-3); align-items: baseline; min-width: 0; }
.rv-kv__row.is-full { grid-column: 1 / -1; }
.rv-kv dt { font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); }
.rv-kv dd { min-width: 0; margin: 0; font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); color: var(--rv-text-primary); overflow-wrap: anywhere; }

.rv-cell { display: flex; align-items: center; gap: var(--rv-space-2); min-width: 0; max-width: 100%; }
.rv-cell__media { display: inline-flex; flex-shrink: 0; }
.rv-cell__body { display: flex; flex-direction: column; min-width: 0; }
.rv-cell__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-1) 6px; min-width: 0; }
.rv-cell__title { font-size: var(--rv-fs-small); line-height: 20px; font-weight: 500; color: var(--rv-text-primary); overflow-wrap: anywhere; }
a.rv-cell__title, button.rv-cell__title { color: var(--rv-link); }
a.rv-cell__title:hover, button.rv-cell__title:hover { color: var(--rv-link-hover); text-decoration: underline; }
.rv-cell__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--rv-space-2); font-size: var(--rv-fs-small); line-height: 18px; color: var(--rv-text-muted); overflow-wrap: anywhere; }
.rv-cell__code { font-variant-numeric: tabular-nums; }

.rv-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border-radius: 50%; font-weight: 600; line-height: 1; letter-spacing: 0; user-select: none; vertical-align: middle; }
.rv-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rv-avatar.has-photo .rv-avatar__initials { visibility: hidden; }
.rv-avatar--c0 { background: var(--rv-primary-100); color: var(--rv-primary-900); }
.rv-avatar--c1 { background: var(--rv-info-bg); color: var(--rv-info); }
.rv-avatar--c2 { background: var(--rv-violet-bg); color: var(--rv-violet); }
.rv-avatar--c3 { background: var(--rv-warning-bg); color: var(--rv-warning); }
.rv-avatar--c4 { background: var(--rv-success-bg); color: var(--rv-success); }
.rv-avatar--c5 { background: var(--rv-neutral-200); color: var(--rv-neutral-700); }

.rv-thumb { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border-radius: var(--rv-radius-control); background: var(--rv-neutral-100); color: var(--rv-neutral-400); vertical-align: middle; }
.rv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rv-thumb__ph { display: inline-flex; }
.rv-thumb--xs { width: 32px; height: 18px; border-radius: 2px; }
.rv-thumb--sm { width: 48px; height: 27px; }
.rv-thumb--md { width: 64px; height: 36px; }
.rv-thumb--opt { width: 80px; height: 45px; }
.rv-thumb--lg { width: 160px; height: 90px; }
.rv-thumb--hero { width: 320px; max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
.rv-img { max-width: 100%; background: var(--rv-neutral-100); }

.rv-progress { display: flex; align-items: center; gap: var(--rv-space-2); min-width: 96px; }
.rv-progress__track { position: relative; flex: 1 1 auto; min-width: 48px; height: 6px; overflow: hidden; border-radius: var(--rv-radius-pill); background: var(--rv-neutral-200); }
.rv-progress__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--rv-primary-700); }
.rv-progress--lg .rv-progress__track { height: 8px; }
.rv-progress__label { min-width: 40px; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); text-align: right; font-variant-numeric: tabular-nums; }

.rv-timeline { margin: 0; padding: 0; list-style: none; }
.rv-timeline__item { position: relative; padding: 0 0 var(--rv-space-4) var(--rv-space-6); }
.rv-timeline__item::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: 0; width: 2px; background: var(--rv-divider); }
.rv-timeline__item:last-child { padding-bottom: 0; }
.rv-timeline__item:last-child::before { display: none; }
.rv-timeline__dot { position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border: 2px solid var(--rv-primary-700); border-radius: 50%; background: var(--rv-surface); }
.rv-timeline__item.is-success .rv-timeline__dot { border-color: var(--rv-success); }
.rv-timeline__item.is-warning .rv-timeline__dot { border-color: var(--rv-warning); }
.rv-timeline__item.is-danger .rv-timeline__dot { border-color: var(--rv-danger); }
.rv-timeline__item.is-info .rv-timeline__dot { border-color: var(--rv-info); }
.rv-timeline__item.is-neutral .rv-timeline__dot { border-color: var(--rv-neutral-400); }
.rv-timeline__content { min-width: 0; }
.rv-timeline__time { font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); font-variant-numeric: tabular-nums; }
.rv-timeline__title { font-size: var(--rv-fs-body); line-height: 20px; font-weight: 500; }
.rv-timeline__text { font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); overflow-wrap: anywhere; }
.rv-timeline__meta { margin-top: 2px; font-size: var(--rv-fs-small); color: var(--rv-text-muted); }

.rv-thread { display: flex; flex-direction: column; gap: var(--rv-space-3); }
.rv-bubble { max-width: min(560px, 85%); padding: 10px var(--rv-space-3); border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-menu); background: var(--rv-surface-subtle); font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); overflow-wrap: anywhere; }
.rv-bubble.is-member { align-self: flex-start; border-top-left-radius: 2px; }
.rv-bubble.is-staff { align-self: flex-end; background: var(--rv-primary-50); border-color: var(--rv-primary-100); border-top-right-radius: 2px; }
.rv-bubble__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--rv-space-2); margin-bottom: 2px; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-muted); }
.rv-bubble__name { font-weight: 600; color: var(--rv-text-secondary); }
.rv-bubble__body p { margin: 0 0 6px; }
.rv-bubble__body p:last-child { margin-bottom: 0; }

.rv-bullets { margin: 0; padding-left: var(--rv-space-5); }
.rv-bullets li { margin: 2px 0; }

/* wizard stepper (RVA.ui.stepper) — same look as the course wizard, any number of steps */
.rv-stepper { min-width: 0; }
.rv-stepper__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; }
.rv-stepper__step { position: relative; min-width: 0; }
.rv-stepper__step:not(:last-child)::after { content: ""; position: absolute; top: 22px; right: -4px; width: 8px; height: 1px; background: var(--rv-neutral-300); }
.rv-stepper__btn { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--rv-border); border-radius: var(--rv-radius-card);
  background: var(--rv-surface); color: var(--rv-text-secondary); font-size: 13px; line-height: 18px; text-align: left; transition: background-color var(--rv-motion-fast), border-color var(--rv-motion-fast); }
.rv-stepper__btn:hover:not(:disabled) { border-color: var(--rv-primary-600); background: var(--rv-primary-50); }
.rv-stepper__btn:disabled { cursor: not-allowed; opacity: .6; }
.rv-stepper__num { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--rv-neutral-100); color: var(--rv-neutral-700); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-stepper__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-stepper__warn { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rv-radius-pill);
  background: var(--rv-warning-bg); color: var(--rv-warning); border: 1px solid var(--rv-warning-border); font-size: 11px; font-weight: 600; }
.rv-stepper__step.is-current .rv-stepper__btn { border-color: var(--rv-primary-700); background: var(--rv-primary-50); color: var(--rv-primary-900); font-weight: 600; box-shadow: inset 0 -2px 0 var(--rv-primary-700); }
.rv-stepper__step.is-current .rv-stepper__num { background: var(--rv-primary-700); color: #fff; }
.rv-stepper__step.is-done .rv-stepper__num { background: var(--rv-success-bg); color: var(--rv-success); }
.rv-stepper__step.is-done .rv-stepper__btn { color: var(--rv-text-primary); }
.rv-stepper__step.is-error .rv-stepper__num { background: var(--rv-warning-bg); color: var(--rv-warning); }
.rv-stepper__m { display: none; }
.rv-stepper__mrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rv-stepper__mcount { font-size: 12px; color: var(--rv-text-muted); white-space: nowrap; }
.rv-stepper__mlabel { min-width: 0; font-size: 14px; color: var(--rv-primary-900); }
.rv-stepper__bar { height: 4px; margin-top: 6px; background: var(--rv-neutral-200); border-radius: var(--rv-radius-pill); overflow: hidden; }
.rv-stepper__bar > span { display: block; height: 100%; background: var(--rv-primary-700); border-radius: inherit; }
@media (max-width: 1023px) { .rv-stepper__label { font-size: 12px; } }
@media (max-width: 767px) {
  .rv-stepper__list { display: none; }
  .rv-stepper__m { display: block; padding: 8px 12px; border: 1px solid var(--rv-border); border-radius: var(--rv-radius-card); background: var(--rv-surface); }
}

/* --------------------------------------------------------------------------
   12. FilterBar
   -------------------------------------------------------------------------- */
.rv-fb { display: flex; flex-direction: column; gap: var(--rv-space-2); min-width: 0; }
.rv-fb__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); min-width: 0; }
.rv-fb__search { flex: 1 1 240px; min-width: 200px; }
.rv-fb__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); min-width: 0; }
.rv-fb__ctrl { min-width: 0; }
.rv-fb__ctrl--select .rv-select, .rv-fb__ms-btn { width: auto; min-width: 160px; max-width: 220px; }
.rv-fb__ms { position: relative; }
.rv-fb__ms-btn { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-fb__pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--rv-z-popover); display: flex; flex-direction: column; gap: var(--rv-space-1); width: 280px; max-width: calc(100vw - 24px); padding: var(--rv-space-2); background: var(--rv-surface); border: 1px solid var(--rv-neutral-300); border-radius: var(--rv-radius-menu); box-shadow: var(--rv-shadow-popover); }
.rv-fb__pop.is-end { left: auto; right: 0; }
.rv-fb__ms-all { padding: var(--rv-space-1) var(--rv-space-1) var(--rv-space-2); border-bottom: 1px solid var(--rv-divider); font-weight: 500; }
.rv-fb__ms-list { position: relative; display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.rv-fb__ms-list .rv-check { padding: var(--rv-space-1); border-radius: 4px; }
.rv-fb__ms-list .rv-check:hover { background: var(--rv-neutral-50); }
.rv-fb__range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.rv-fb__range-sel { position: relative; display: inline-flex; align-items: center; }
.rv-fb__range-sel > svg { position: absolute; left: 10px; color: var(--rv-neutral-500); pointer-events: none; }
.rv-fb__range-sel .rv-select { width: auto; min-width: 150px; padding-left: 32px; }
.rv-fb__custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rv-fb__custom .rv-input { width: 150px; }
.rv-fb__dash { color: var(--rv-text-muted); }
.rv-fb__error { flex-basis: 100%; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-danger); }
.rv-fb__toggle { display: inline-flex; align-items: center; gap: var(--rv-space-2); min-height: var(--rv-control-h); font-size: var(--rv-fs-small); line-height: 20px; color: var(--rv-text-primary); cursor: pointer; white-space: nowrap; }
.rv-fb__open { display: none; }
.rv-fb__open.is-active { border-color: var(--rv-primary-700); color: var(--rv-primary-900); background: var(--rv-primary-50); }
.rv-fb__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); margin-left: auto; }
.rv-fb__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rv-fb__chips:empty { display: none; }
.rv-fb__reset { min-height: 24px; padding: 0 var(--rv-space-2); }
.rv-fb--sheet .rv-fb__filters { flex-direction: column; align-items: stretch; gap: var(--rv-space-4); }
.rv-fb--sheet .rv-fb__range, .rv-fb--sheet .rv-fb__range-sel, .rv-fb--sheet .rv-fb__range-sel .rv-select { width: 100%; }
.rv-fb--sheet .rv-fb__custom { width: 100%; }
.rv-fb--sheet .rv-fb__custom .rv-input { flex: 1 1 0; width: auto; min-width: 0; }
.rv-fb--sheet .rv-fb__ms-list { max-height: none; }
.rv-fb--sheet .rv-fb__toggle { white-space: normal; }

/* --------------------------------------------------------------------------
   13. Motion
   -------------------------------------------------------------------------- */
@keyframes rv-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rv-slide-left { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes rv-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rv-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes rv-pulse { 0%, 100% { background-color: var(--rv-neutral-100); } 50% { background-color: var(--rv-neutral-200); } }
@keyframes rv-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .rv-drawer--xl { width: 100vw; max-width: 860px; }
}
@media (min-width: 768px) {
  .rv-layer--sheet { align-items: center; padding: var(--rv-space-4) var(--rv-space-3); }
  .rv-sheet { width: 560px; max-width: calc(100vw - 24px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border-radius: var(--rv-radius-overlay); animation-name: rv-pop-in; }
  .rv-sheet__grip { display: none; }
  .rv-sheet__foot { padding-bottom: var(--rv-space-3); }
}
@media (max-width: 767px) {
  .rv-page-actions { width: 100%; justify-content: flex-start; }
  .rv-kv--2 { grid-template-columns: minmax(0, 1fr); }
  .rv-kv__row { grid-template-columns: 112px minmax(0, 1fr); gap: var(--rv-space-2); }

  /* form action bar sticks above the 56px bottom navigation */
  .rv-form-actions { position: sticky; bottom: calc(var(--rv-mobile-nav-height) + env(safe-area-inset-bottom)); z-index: var(--rv-z-sticky); margin-top: var(--rv-space-4); padding: var(--rv-space-2) 0; background: var(--rv-surface); }

  /* overlays: md/lg/xl/full modals and drawers become full screen */
  .rv-layer--modal { padding: var(--rv-space-3); }
  .rv-layer--fs { padding: 0; }
  .rv-layer--fs .rv-modal { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  .rv-drawer, .rv-drawer--sm, .rv-drawer--md, .rv-drawer--lg, .rv-drawer--xl { width: 100vw; max-width: 100vw; border-radius: 0; }
  .rv-modal__head, .rv-drawer__head, .rv-sheet__head { padding: var(--rv-space-3) var(--rv-space-4) var(--rv-space-2); }
  .rv-modal__body, .rv-drawer__body, .rv-sheet__body { padding: var(--rv-space-1) var(--rv-space-4) var(--rv-space-4); }
  .rv-drawer__body { padding-top: var(--rv-space-3); }
  .rv-drawer__tabs { padding: 0 var(--rv-space-4); }
  .rv-modal__foot, .rv-drawer__foot, .rv-sheet__foot { padding: var(--rv-space-3) var(--rv-space-4) calc(var(--rv-space-3) + env(safe-area-inset-bottom)); }
  .rv-layer--fs .rv-modal__foot > .rv-btn, .rv-drawer__foot > .rv-btn { flex: 1 1 auto; }

  /* toasts: top, full width minus 24px */
  .rv-toast-stack { top: var(--rv-space-3); left: var(--rv-space-3); right: var(--rv-space-3); width: auto; max-width: none; }

  /* table toolbar & pagination: count and controls on separate lines */
  .rv-dt__search { max-width: none; }
  .rv-dt__toolbar-right { margin-left: 0; }
  .rv-dt__hbar { display: none; }   /* card view has no horizontal scroller */
  .rv-pagination { flex-direction: column; align-items: stretch; }
  .rv-pagination__controls { justify-content: space-between; }
  .rv-pagination__pages { display: none; }
  .rv-pagination__status { display: inline; }
  .rv-pagination__btn span { display: none; }
  .rv-pagination__prev, .rv-pagination__next { padding: 0 var(--rv-space-3); }

  /* filter bar: search + "ตัวกรอง (n)"; the other filters live in a sheet */
  .rv-fb__row > .rv-fb__filters { display: none; }
  .rv-fb__open { display: inline-flex; }
  .rv-fb__search { flex: 1 1 0; min-width: 0; }
  .rv-fb__actions { width: 100%; margin-left: 0; }

  .rv-bubble { max-width: 92%; }
}

/* touch targets ≥ 44px */
@media (pointer: coarse) {
  .rv-btn { min-height: var(--rv-touch); }
  .rv-btn--icon, .rv-btn--icon.rv-btn--md { width: var(--rv-touch); }
  .rv-btn--link { min-height: 0; }
  .rv-input, .rv-select, .rv-textarea { font-size: 16px; line-height: 24px; }
  .rv-input, .rv-select { min-height: var(--rv-touch); }
  .rv-check, .rv-radio, .rv-switch-field, .rv-fb__toggle { min-height: var(--rv-touch); align-items: center; }
  .rv-check input[type="checkbox"], .rv-radio input[type="radio"] { margin-top: 0; }
  .rv-check--solo { min-width: var(--rv-touch); }
  .rv-chip--toggle { min-height: var(--rv-touch); }
  .rv-chip__remove::after, .rv-tip::after, .rv-search__clear::after, .rv-toast__close::after { content: ""; position: absolute; inset: -12px; }
  .rv-pagination__btn { min-width: var(--rv-touch); min-height: var(--rv-touch); }
  .rv-tabs--sub .rv-tab, .rv-segmented .rv-tab { min-height: var(--rv-touch); }
  .rv-th-sort { min-height: var(--rv-touch); }
  .rv-menu__item { min-height: var(--rv-touch); font-size: var(--rv-fs-body); }
  .rv-picker__opt { min-height: var(--rv-touch); }
  .rv-rte__btn { width: var(--rv-touch); height: var(--rv-touch); }
  .rv-rte__editor { font-size: 16px; }
  .rv-link-btn { padding: var(--rv-space-2) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-skeleton__block, .rv-skeleton__bar { animation: none; }
  .rv-modal, .rv-drawer, .rv-sheet, .rv-toast, .rv-menu, .rv-backdrop { animation: none; }
  input[type="checkbox"].rv-switch { transition: none; }
}

@media print {
  .rv-backdrop, .rv-layer, .rv-toast-stack, .rv-menu, .rv-tooltip, .rv-fb__open, .rv-pagination__controls, .rv-dt__hbar { display: none !important; }
  .rv-table-wrap, .rv-table-wrap.is-sticky { max-height: none; overflow: visible; }
  .rv-form-actions { position: static; }
}