/* ============================================================================
   Nuvia — Component primitives (DS §7) + chrome (§7.18 header, §7.19 sidebar)
   + shell layout (§5). Everything scoped under `.nuvia`. BEM-ish intent
   classes; no utilities (DS §1, decision D3).
   ============================================================================ */

/* ── Shell layout (DS §5) ─────────────────────────────────────────────── */
.nuvia-shell {
  display: grid;
  grid-template-columns: var(--b-sidebar-w) 1fr;
  min-height: 100vh;
}
.nuvia-main {
  min-width: 0;
  padding: var(--b-s-7);
}
.nuvia-main__inner {
  max-width: var(--b-main-max);
  margin: 0 auto;
}

/* ── 7.1 Button ───────────────────────────────────────────────────────── */
.nuvia .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-s-2);
  padding: 10px 18px;
  font: var(--b-font-body-m);
  border: 1px solid transparent;
  border-radius: var(--b-r-pill);
  color: var(--b-ink-700);
  background: transparent;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
}
.nuvia .btn:active { opacity: 0.92; }
.nuvia .btn[disabled],
.nuvia .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nuvia .btn .ic { flex: none; }

.nuvia .btn--sm { padding: 6px 12px; font: var(--b-font-body-s); }
.nuvia .btn--lg { padding: 12px 22px; font: var(--b-font-body-l); }

.nuvia .btn--primary {
  background: var(--b-terracotta-500);
  color: var(--b-cream-50);
  box-shadow: var(--b-shadow-warm);
}
.nuvia .btn--primary:hover { background: var(--b-terracotta-600); color: var(--b-cream-50); }

.nuvia .btn--ghost { color: var(--b-ink-700); border-color: var(--b-border); }
.nuvia .btn--ghost:hover { background: var(--b-cream-100); color: var(--b-ink-700); }

.nuvia .btn--quiet { background: var(--b-cream-100); color: var(--b-ink-700); }
.nuvia .btn--quiet:hover { background: var(--b-cream-200); color: var(--b-ink-700); }

.nuvia .btn--danger { background: var(--b-rose-500); color: var(--b-cream-50); }
.nuvia .btn--danger:hover { background: var(--b-rose-700); color: var(--b-cream-50); }

.nuvia .btn--link { color: var(--b-terracotta-600); padding-left: 0; padding-right: 0; }
.nuvia .btn--link:hover { color: var(--b-terracotta-600); text-decoration: underline; }

/* icon-only button keeps a square-ish tap target */
.nuvia .btn--icon { padding: 8px; border-radius: var(--b-r-md); }

/* loading state keeps width, swaps label for a subtle spinner */
.nuvia .btn--loading { position: relative; color: transparent !important; }
.nuvia .btn--loading::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--b-cream-50);
  animation: nuvia-spin 0.7s linear infinite;
}
@keyframes nuvia-spin { to { transform: rotate(360deg); } }

/* ── 7.2 Field ────────────────────────────────────────────────────────── */
.nuvia .field { display: block; }
.nuvia .field__label {
  display: block;
  font: var(--b-font-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b-terracotta-600);
  margin-bottom: 6px;
}
.nuvia .field__input,
.nuvia .field__textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--b-border-strong);
  border-radius: var(--b-r-md);
  font: 400 14px/1.45 var(--b-body);
  color: var(--b-ink-900);
  background: var(--b-surface);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nuvia .field__input:focus,
.nuvia .field__textarea:focus {
  outline: none;
  border-color: var(--b-terracotta-500);
  box-shadow: 0 0 0 3px rgba(184, 90, 58, 0.12);
}
.nuvia .field__helper { font: 400 12px/1.4 var(--b-body); color: var(--b-ink-500); margin-top: 6px; }
.nuvia .field--error .field__input,
.nuvia .field--error .field__textarea { border-color: var(--b-rose-500); }
.nuvia .field--error .field__helper { color: var(--b-rose-700); }

/* ── 7.3 Checkbox / radio ─────────────────────────────────────────────── */
.nuvia .check {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--b-border-strong);
  border-radius: var(--b-r-sm);
  background: var(--b-surface);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.nuvia .check[type="radio"] { border-radius: 50%; }
.nuvia .check::after {
  content: "";
  width: 10px; height: 10px;
  transform: scale(0);
  transition: transform 0.12s ease;
  background: var(--b-cream-50);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.nuvia .check:checked { background: var(--b-sage-500); border-color: var(--b-sage-500); }
.nuvia .check:checked::after { transform: scale(1); }
/* selection checkbox (not a task) uses terracotta */
.nuvia .check--select:checked { background: var(--b-terracotta-500); border-color: var(--b-terracotta-500); }
.nuvia .check:disabled { background: var(--b-cream-200); cursor: not-allowed; }

/* ── 7.4 / 7.17 Select & filter pill ──────────────────────────────────── */
.nuvia .select,
.nuvia .filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--b-s-2);
  padding: 7px 12px 7px 14px;
  background: var(--b-surface);
  border: 1px solid var(--b-border-soft);
  border-radius: var(--b-r-pill);
  font: var(--b-font-body-xs);
  color: var(--b-ink-700);
  cursor: pointer;
}
.nuvia .select__label,
.nuvia .filter-pill__label { font: 500 11px/1.4 var(--b-body); color: var(--b-ink-500); }
.nuvia .select .ic,
.nuvia .filter-pill .ic { color: var(--b-ink-300); margin-left: 2px; }
.nuvia .filter-pill--active {
  background: var(--b-terracotta-50);
  color: var(--b-terracotta-600);
  border-color: var(--b-terracotta-100);
}
.nuvia .filter-pill--active .filter-pill__label { color: var(--b-terracotta-600); }

/* ── 7.5 Tabs (segmented pill) ────────────────────────────────────────── */
.nuvia .tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--b-cream-100);
  border: 1px solid var(--b-border-soft);
  border-radius: var(--b-r-pill);
  padding: 3px;
}
.nuvia .tab {
  padding: 6px 14px;
  border-radius: var(--b-r-pill);
  font: 600 12px/1.4 var(--b-body);
  color: var(--b-ink-500);
  background: transparent;
  border: none;
}
.nuvia .tab--active { background: var(--b-surface); color: var(--b-ink-900); box-shadow: var(--b-shadow-1); }

/* ── 7.6 Tag / chip ───────────────────────────────────────────────────── */
.nuvia .tag {
  display: inline-flex;
  align-items: center;
  font: var(--b-font-caps);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--b-r-sm);
  background: var(--b-cream-200);
  color: var(--b-ink-700);
}
.nuvia .tag--venue        { background: var(--b-tag-venue-bg);        color: var(--b-tag-venue-fg); }
.nuvia .tag--vision       { background: var(--b-tag-vision-bg);       color: var(--b-tag-vision-fg); }
.nuvia .tag--foto         { background: var(--b-tag-foto-bg);         color: var(--b-tag-foto-fg); }
.nuvia .tag--catering     { background: var(--b-tag-catering-bg);     color: var(--b-tag-catering-fg); }
.nuvia .tag--musica       { background: var(--b-tag-musica-bg);       color: var(--b-tag-musica-fg); }
.nuvia .tag--flores       { background: var(--b-tag-flores-bg);       color: var(--b-tag-flores-fg); }
.nuvia .tag--vestir       { background: var(--b-tag-vestir-bg);       color: var(--b-tag-vestir-fg); }
.nuvia .tag--invitaciones { background: var(--b-tag-invitaciones-bg); color: var(--b-tag-invitaciones-fg); }
.nuvia .tag--transporte   { background: var(--b-tag-transporte-bg);   color: var(--b-tag-transporte-fg); }
.nuvia .tag--legal        { background: var(--b-tag-legal-bg);        color: var(--b-tag-legal-fg); }
.nuvia .tag--lunamiel     { background: var(--b-tag-lunamiel-bg);     color: var(--b-tag-lunamiel-fg); }
/* status chips */
.nuvia .tag--pending   { background: var(--b-cream-200); color: var(--b-ink-700); }
.nuvia .tag--confirmed { background: var(--b-sage-100);  color: var(--b-sage-700); }
.nuvia .tag--rejected  { background: var(--b-rose-300);  color: var(--b-rose-700); }

/* ── 7.7 Badge ────────────────────────────────────────────────────────── */
.nuvia .badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--b-r-pill);
  font: 600 11px/1.4 var(--b-body);
  background: var(--b-cream-200);
  color: var(--b-ink-500);
}

/* ── 7.8 Avatar / stack ───────────────────────────────────────────────── */
.nuvia .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-content: center;
  font-family: var(--b-display);
  font-style: italic;
  font-size: 13px;
  color: var(--b-cream-50);
  background: var(--b-sand-500);
  overflow: hidden;
  flex: none;
}
.nuvia .avatar img { width: 100%; height: 100%; object-fit: cover; }
.nuvia .avatar--sm { width: 22px; height: 22px; font-size: 11px; }
.nuvia .avatar--lg { width: 34px; height: 34px; font-size: 14px; }
.nuvia .avatar--xl { width: 44px; height: 44px; font-size: 16px; }
.nuvia .avatar--bride   { background: var(--b-sage-500); }
.nuvia .avatar--groom   { background: var(--b-terracotta-500); }
.nuvia .avatar--planner { background: var(--b-mustard-200); color: var(--b-ink-900); }
.nuvia .avatar--family  { background: var(--b-cream-300); color: var(--b-ink-900); }
.nuvia .avatar-stack { display: inline-flex; }
.nuvia .avatar-stack .avatar { margin-left: -8px; border: 2px solid var(--b-surface); }
.nuvia .avatar-stack .avatar:first-child { margin-left: 0; }

/* ── 7.9 Card ─────────────────────────────────────────────────────────── */
.nuvia .card {
  background: var(--b-surface);
  border: 1px solid var(--b-border-soft);
  border-radius: var(--b-r-xl);
  padding: var(--b-s-5);
  box-shadow: var(--b-shadow-1);
}
.nuvia .card--hero {
  border-radius: var(--b-r-2xl);
  box-shadow: var(--b-shadow-3);
  overflow: hidden;
  padding: 0;
}
.nuvia .card--dense { padding: var(--b-s-4) var(--b-s-5) var(--b-s-3); }
.nuvia .card--link { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.nuvia .card--link:hover { transform: translateY(-2px); box-shadow: var(--b-shadow-2); }

/* ── 7.10 Modal / drawer ──────────────────────────────────────────────── */
.nuvia-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 13, 0.42);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1080;
  animation: nuvia-fade-in 0.18s ease both;
}
.nuvia .modal {
  width: min(560px, calc(100vw - 32px));
  background: var(--b-surface);
  border-radius: var(--b-r-2xl);
  box-shadow: var(--b-shadow-3);
  animation: nuvia-modal-in 0.22s ease both;
}
.nuvia .drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(480px, 100vw);
  height: 100%;
  background: var(--b-surface);
  box-shadow: var(--b-shadow-3);
  animation: nuvia-drawer-in 0.22s ease both;
}
.nuvia .modal__head,
.nuvia .drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--b-s-5) var(--b-s-5) var(--b-s-3);
}
.nuvia .modal__title,
.nuvia .drawer__title { font: var(--b-font-display-m); }
.nuvia .modal__body,
.nuvia .drawer__body { padding: var(--b-s-3) var(--b-s-5) var(--b-s-5); }
.nuvia .modal__footer,
.nuvia .drawer__footer {
  display: flex;
  gap: var(--b-s-2);
  padding: var(--b-s-4) var(--b-s-5);
  border-top: 1px solid var(--b-border-soft);
}
@keyframes nuvia-modal-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes nuvia-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ── 7.11 Toast ───────────────────────────────────────────────────────── */
.nuvia-toasts {
  position: fixed;
  right: var(--b-s-5);
  bottom: var(--b-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--b-s-2);
  z-index: 1090;
}
.nuvia-toast {
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: var(--b-s-4);
  border-radius: var(--b-r-lg);
  box-shadow: var(--b-shadow-3);
  color: var(--b-cream-50);
  font: var(--b-font-body-s);
  background: var(--b-ink-900);
  animation: nuvia-toast-in 0.22s ease both;
}
.nuvia-toast--success { background: var(--b-sage-500); }
.nuvia-toast--warning { background: var(--b-rose-500); }
.nuvia-toast--info    { background: var(--b-ink-900); }
@keyframes nuvia-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── 7.12 Tooltip ─────────────────────────────────────────────────────── */
.nuvia .tooltip {
  position: relative;
}
.nuvia .tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--b-ink-900);
  color: var(--b-cream-50);
  padding: 6px 10px;
  border-radius: var(--b-r-md);
  font: 500 12px/1.4 var(--b-body);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.nuvia .tooltip:hover .tooltip__bubble,
.nuvia .tooltip:focus-within .tooltip__bubble { opacity: 1; }

/* ── 7.13 Empty state ─────────────────────────────────────────────────── */
.nuvia .empty {
  text-align: center;
  padding: var(--b-s-6) var(--b-s-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-s-3);
}
.nuvia .empty__glyph { color: var(--b-cream-300); }
.nuvia .empty__title { font: var(--b-font-display-m); color: var(--b-ink-900); }
.nuvia .empty__title em { font-style: italic; color: var(--b-terracotta-500); }
.nuvia .empty__body { font: 400 13px/1.5 var(--b-body); color: var(--b-ink-500); max-width: 320px; }

/* ── 7.14 Skeleton ────────────────────────────────────────────────────── */
.nuvia .skeleton {
  background: var(--b-cream-200);
  border-radius: var(--b-r-sm);
  background-image: linear-gradient(90deg, var(--b-cream-100) 0%, var(--b-cream-200) 40%, var(--b-cream-100) 80%);
  background-size: 200% 100%;
  animation: nuvia-shimmer 1.4s ease infinite;
}
@keyframes nuvia-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .nuvia .skeleton { animation: none; } }

/* ── 7.15 Progress bar ────────────────────────────────────────────────── */
.nuvia .progress {
  height: 6px;
  background: var(--b-cream-200);
  border-radius: var(--b-r-pill);
  overflow: hidden;
}
.nuvia .progress__fill {
  height: 100%;
  border-radius: var(--b-r-pill);
  background: var(--b-terracotta-500);
  transition: width 0.4s ease;
}
.nuvia .progress__fill--success { background: var(--b-sage-500); }
.nuvia .progress__fill--overrun { background: var(--b-rose-500); }
.nuvia .progress__fill--gift { background: linear-gradient(90deg, var(--b-terracotta-500), var(--b-mustard-400)); }

/* ── 7.16 Progress ring ───────────────────────────────────────────────── */
.nuvia .ring { position: relative; width: 56px; height: 56px; flex: none; }
.nuvia .ring svg { transform: rotate(-90deg); display: block; }
.nuvia .ring__track { stroke: var(--b-cream-200); }
.nuvia .ring__fill { stroke: var(--b-terracotta-500); stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
.nuvia .ring__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font: 400 18px/1 var(--b-display);
  color: var(--b-ink-900);
}

/* ── 7.18 Page header ─────────────────────────────────────────────────── */
.nuvia .page-header {
  padding-bottom: var(--b-s-5);
  border-bottom: 1px solid var(--b-border-soft);
  margin-bottom: var(--b-s-6);
}
.nuvia .ph-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--b-s-2);
  font: var(--b-font-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--b-terracotta-600);
  margin-bottom: var(--b-s-2);
}
.nuvia .ph-eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--b-terracotta-500);
}
.nuvia .ph-title { font: var(--b-font-display-l); }
@media (max-width: 600px) { .nuvia .ph-title { font: 400 38px/1.1 var(--b-display); letter-spacing: var(--b-display-letter); } }

/* ── 7.19 Sidebar ─────────────────────────────────────────────────────── */
.nuvia .sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  width: var(--b-sidebar-w);
  background: var(--b-bg-sidebar);
  border-right: 1px solid var(--b-border-soft);
  display: flex;
  flex-direction: column;
  padding: var(--b-s-5) var(--b-s-3) 0;
  overflow-y: auto;
  /* Rank the sidebar's stacking context above the main content's positioned
     widgets (z-index:1) so the fixed profile menu isn't trapped behind them.
     Stays below full-screen overlays (scrim 1040 / lightbox 1085). */
  z-index: 20;
}
.nuvia .brand { display: flex; align-items: center; gap: var(--b-s-3); padding: 0 var(--b-s-2) var(--b-s-4); }
.nuvia .brand__mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--b-terracotta-500);
  box-shadow: var(--b-shadow-warm);
  display: grid;
  place-content: center;
  font-family: var(--b-display);
  font-style: italic;
  font-size: 22px;
  color: var(--b-cream-50);
}
.nuvia .brand__word { font-family: var(--b-display); font-size: 22px; color: var(--b-ink-900); }
.nuvia .brand__word em { font-style: italic; color: var(--b-terracotta-600); }

.nuvia .event-context {
  padding: var(--b-s-3) var(--b-s-2);
  border-top: 1px solid var(--b-border-soft);
  border-bottom: 1px solid var(--b-border-soft);
  cursor: default;
}
.nuvia .event-context__name { font: var(--b-font-display-s); font-style: italic; color: var(--b-ink-900); }
.nuvia .event-context__meta { font: var(--b-font-body-xs); color: var(--b-ink-500); margin-top: 2px; }
.nuvia .event-context__sep { color: var(--b-terracotta-500); }

.nuvia .nav { display: flex; flex-direction: column; gap: 2px; padding: var(--b-s-3) 0; }
.nuvia .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--b-r-md);
  font: var(--b-font-body-m);
  color: var(--b-ink-700);
  border: 1px solid transparent;
}
.nuvia .nav-item .ic { color: var(--b-ink-500); flex: none; }
.nuvia .nav-item:hover { background: var(--b-cream-200); color: var(--b-ink-700); }
.nuvia .nav-item--active {
  background: var(--b-surface);
  border-color: var(--b-border-soft);
  box-shadow: var(--b-shadow-1);
  color: var(--b-ink-900);
}
.nuvia .nav-item--active .ic { color: var(--b-terracotta-500); }

.nuvia .sidebar__spacer { flex: 1 1 auto; min-height: var(--b-s-5); }

/* No-event sidebar: profile identity header + account options (RAY-20). */
.nuvia .sidebar-account__id {
  display: flex;
  align-items: center;
  gap: var(--b-s-3);
  padding: var(--b-s-3) var(--b-s-2);
  border-top: 1px solid var(--b-border-soft);
  border-bottom: 1px solid var(--b-border-soft);
}
.nuvia .sidebar-account__body { min-width: 0; display: flex; flex-direction: column; }
.nuvia .sidebar-account__email {
  font: var(--b-font-body-xs);
  color: var(--b-ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nuvia .nav-item--danger { color: var(--b-rose-700); }
.nuvia .nav-item--danger .ic { color: var(--b-rose-500); }
.nuvia .nav-item--danger:hover { background: var(--b-rose-300); color: var(--b-rose-700); }

.nuvia .profile {
  display: flex;
  align-items: center;
  gap: var(--b-s-3);
  padding: var(--b-s-3) var(--b-s-2);
  border-top: 1px solid var(--b-border-soft);
  border-radius: 0;
  color: var(--b-ink-900);
}
.nuvia .profile:hover { color: var(--b-ink-900); }
.nuvia .profile__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.nuvia .profile__name { font: var(--b-font-body-s); font-weight: 600; color: var(--b-ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* Role shown as a small badge under the name (RAY-20). */
.nuvia .profile__role {
  display: inline-flex;
  align-items: center;
  font: var(--b-font-caps);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: var(--b-r-sm);
  background: var(--b-cream-200);
  color: var(--b-ink-700);
}
.nuvia .profile__role.tag--role-owner { background: var(--b-terracotta-50); color: var(--b-terracotta-600); }
.nuvia .profile__role.tag--role-admin { background: var(--b-sage-100); color: var(--b-sage-700); }
.nuvia .profile .ic { color: var(--b-ink-300); flex: none; }
/* RAY-19: profile as a dropdown trigger; menu floats out to the side. */
.nuvia button.profile { width: 100%; border: 0; border-top: 1px solid var(--b-border-soft); background: none; font: inherit; cursor: pointer; }
.nuvia .profile-menu { display: block; }
/* Fixed so it escapes the sidebar's overflow; anchored just past its right edge,
   bottom-aligned next to the profile. */
.nuvia .profile-menu .menu {
  position: fixed;
  left: calc(var(--b-sidebar-w) + 8px);
  right: auto;
  top: auto;
  bottom: var(--b-s-5);
  min-width: 200px;
}

.nuvia .ph-subtitle { font: var(--b-font-body-m); color: var(--b-ink-500); max-width: 480px; margin-top: var(--b-s-2); }

/* mobile topbar + drawer — only < 960px (DS §5 md/sm) */
.nuvia-topbar { display: none; }
.nuvia-scrim {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 13, 0.42);
  backdrop-filter: blur(2px);
  z-index: 1040;
  animation: nuvia-fade-in 0.18s ease both;
}

@media (max-width: 959px) {
  .nuvia-topbar {
    display: flex;
    align-items: center;
    gap: var(--b-s-3);
    padding: var(--b-s-3) var(--b-s-4);
    background: var(--b-bg-sidebar);
    border-bottom: 1px solid var(--b-border-soft);
    position: sticky;
    top: 0;
    z-index: 1030;
  }
  .nuvia-shell { grid-template-columns: 1fr; }
  .nuvia .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  .nuvia .sidebar.is-open { transform: translateX(0); }
  .nuvia-main { padding: var(--b-s-5) var(--b-s-4); }
}

@media (prefers-reduced-motion: reduce) {
  .nuvia .sidebar { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   RAY-14 Fase 1 — list/table primitives (no §-number in DS doc; designed to
   match the existing tokens). Powers the section toolbar + data table that
   base/list.html will adopt in Fase 2.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 7.20 Section toolbar (RAY-8: left-aligned, primary first) ─────────── */
.nuvia .toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-s-2);
  margin-bottom: var(--b-s-5);
}
/* push whatever follows (usually filters/search) to the right edge */
.nuvia .toolbar__spacer { flex: 1 1 auto; min-width: var(--b-s-4); }
.nuvia .toolbar__filters {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-s-2);
}

/* search input shaped like a filter pill (lives in the toolbar) */
.nuvia .search {
  display: inline-flex;
  align-items: center;
  gap: var(--b-s-2);
  padding: 7px 14px;
  background: var(--b-surface);
  border: 1px solid var(--b-border-soft);
  border-radius: var(--b-r-pill);
}
.nuvia .search .ic { color: var(--b-ink-300); flex: none; }
.nuvia .search__input {
  border: none;
  outline: none;
  background: transparent;
  font: var(--b-font-body-s);
  color: var(--b-ink-900);
  min-width: 160px;
}
.nuvia .search__input::placeholder { color: var(--b-ink-300); }

/* ── 7.21 Data table ──────────────────────────────────────────────────── */
.nuvia .data-table {
  background: var(--b-surface);
  border: 1px solid var(--b-border-soft);
  border-radius: var(--b-r-xl);
  box-shadow: var(--b-shadow-1);
  /* Desktop: visible so per-row action menus (.menu, absolute) aren't clipped
     by the table box. Header corners are rounded on the thead cells instead of
     relying on overflow:hidden. Mobile re-enables horizontal scroll below. */
  overflow: visible;
}
.nuvia .data-table--scroll { overflow-x: visible; }
/* Mobile web: wide tables scroll horizontally (the desktop menu-clipping
   trade-off doesn't apply on touch, where menus open as overlays). */
@media (max-width: 768px) {
  .nuvia .data-table--scroll { overflow-x: auto; }
}
.nuvia .table { width: 100%; border-collapse: collapse; font: var(--b-font-body-m); }
.nuvia .table thead th {
  text-align: left;
  font: var(--b-font-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b-ink-500);
  background: var(--b-cream-100);
  padding: var(--b-s-3) var(--b-s-4);
  border-bottom: 1px solid var(--b-border-soft);
  white-space: nowrap;
}
/* Round the header's top corners (the box no longer clips via overflow). */
.nuvia .table thead th:first-child { border-top-left-radius: var(--b-r-xl); }
.nuvia .table thead th:last-child { border-top-right-radius: var(--b-r-xl); }
.nuvia .table tbody td {
  padding: var(--b-s-1) var(--b-s-2);
  border-bottom: 1px solid var(--b-border-soft);
  color: var(--b-ink-700);
  vertical-align: middle;
}
.nuvia .table tbody tr:last-child td { border-bottom: none; }
.nuvia .table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--b-r-xl); }
.nuvia .table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--b-r-xl); }
.nuvia .table tbody tr:hover { background: var(--b-cream-50); }
.nuvia .table tbody tr.is-selected { background: var(--b-selection-bg); }
.nuvia .table .cell--strong { color: var(--b-ink-900); font-weight: 600; }
.nuvia .table .cell--muted { color: var(--b-ink-500); }
.nuvia .table .cell--num { text-align: right; font-variant-numeric: tabular-nums; }
.nuvia .table .cell--check,
.nuvia .table .cell--actions { width: 1%; white-space: nowrap; }
.nuvia .table .cell--actions { text-align: right; }

/* sortable header */
.nuvia .th--sortable { cursor: pointer; user-select: none; }
.nuvia .th__sort { display: inline-flex; align-items: center; gap: 4px; }
.nuvia .th__sort .ic { color: var(--b-ink-300); }
.nuvia .th--sorted { color: var(--b-ink-700); }
.nuvia .th--sorted .ic { color: var(--b-terracotta-500); }

/* compact row actions (DS §7.1: table buttons use --b-r-md, not pill) */
.nuvia .row-actions { display: inline-flex; gap: var(--b-s-1); justify-content: flex-end; }
.nuvia .row-actions .btn { border-radius: var(--b-r-md); padding: 6px; }

/* ── 7.21b Stat cards (list summary widgets) ──────────────────────────────
   Summary KPI cards above JS-driven list tables (suppliers, gifts, kanban).
   Fixed width on desktop so 1–2 cards don't stretch to the full row; full
   width on mobile. Cards opt in with `.stat-card`, wrapped in `.stat-cards`. */
.nuvia .stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-s-3);
  margin-bottom: var(--b-s-5);
}
.nuvia .stat-card { flex: 0 0 auto; width: 300px; min-width: 0; }
@media (max-width: 640px) { .nuvia .stat-card { flex: 1 1 100%; width: 100%; } }

/* ── 7.22 Pagination ──────────────────────────────────────────────────── */
.nuvia .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-s-3);
  margin-top: var(--b-s-4);
  flex-wrap: wrap;
}
.nuvia .pagination__info { font: var(--b-font-body-s); color: var(--b-ink-500); }
.nuvia .pagination__pages { display: inline-flex; gap: var(--b-s-1); }
.nuvia .page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  display: inline-grid;
  place-content: center;
  border-radius: var(--b-r-md);
  border: 1px solid var(--b-border-soft);
  background: var(--b-surface);
  font: var(--b-font-body-s);
  color: var(--b-ink-700);
  cursor: pointer;
}
.nuvia .page-btn:hover { background: var(--b-cream-100); }
.nuvia .page-btn--active {
  background: var(--b-terracotta-500);
  border-color: var(--b-terracotta-500);
  color: var(--b-cream-50);
}
.nuvia .page-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── 7.23 Dropdown / actions menu ─────────────────────────────────────── */
.nuvia .menu-wrap { position: relative; display: inline-block; }
.nuvia .menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 184px;
  background: var(--b-surface);
  border: 1px solid var(--b-border-soft);
  border-radius: var(--b-r-lg);
  box-shadow: var(--b-shadow-3);
  padding: var(--b-s-1);
  z-index: 1050;
  animation: nuvia-fade-in 0.14s ease both;
}
.nuvia .menu[hidden] { display: none; }
.nuvia .menu__item {
  display: flex;
  align-items: center;
  gap: var(--b-s-2);
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--b-r-sm);
  font: var(--b-font-body-s);
  color: var(--b-ink-700);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.nuvia .menu__item:hover { background: var(--b-cream-100); }
.nuvia .menu__item .ic { color: var(--b-ink-500); flex: none; }
.nuvia .menu__item--danger { color: var(--b-rose-700); }
.nuvia .menu__item--danger .ic { color: var(--b-rose-500); }
.nuvia .menu__sep { height: 1px; background: var(--b-border-soft); margin: var(--b-s-1) 0; }
.nuvia .menu__item.is-active { background: var(--b-terracotta-50); color: var(--b-terracotta-600); }

/* Mobile web: table row actions drop the floating kebab menu (which would be
   clipped by the table's horizontal scroll) and lay the items out inline as
   individual buttons. Scoped to .row-actions so the sidebar/profile menus and
   other dropdowns keep their normal popover behavior. */
@media (max-width: 768px) {
  .nuvia .row-actions [data-menu-toggle] { display: none; }
  .nuvia .row-actions .menu-wrap { position: static; display: inline-flex; }
  .nuvia .row-actions .menu,
  .nuvia .row-actions .menu[hidden] {
    position: static;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--b-s-1);
    min-width: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    animation: none;
  }
  .nuvia .row-actions .menu__sep { display: none; }
  .nuvia .row-actions .menu__item {
    width: auto;
    border: 1px solid var(--b-border-soft);
    border-radius: var(--b-r-pill);
    background: var(--b-surface);
    padding: 6px 12px;
  }
}

/* ── 7.24 Native select (form control; the §7.4 .select is a display pill) ─ */
.nuvia .field__select {
  width: 100%;
  padding: 10px 38px 10px 14px;
  border: 1px solid var(--b-border-strong);
  border-radius: var(--b-r-md);
  font: 400 14px/1.45 var(--b-body);
  color: var(--b-ink-900);
  background-color: var(--b-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C6B5E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nuvia .field__select:focus {
  outline: none;
  border-color: var(--b-terracotta-500);
  box-shadow: 0 0 0 3px rgba(184, 90, 58, 0.12);
}

/* ── 7.25 File field (upload + preview) ───────────────────────────────── */
.nuvia .filefield {
  display: flex;
  align-items: center;
  gap: var(--b-s-3);
  padding: var(--b-s-4);
  border: 1.5px dashed var(--b-border-strong);
  border-radius: var(--b-r-lg);
  background: var(--b-cream-50);
  cursor: pointer;
  color: var(--b-ink-500);
  font: var(--b-font-body-s);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.nuvia .filefield:hover { border-color: var(--b-terracotta-400); background: var(--b-cream-100); }
.nuvia .filefield .ic { color: var(--b-ink-300); flex: none; }
.nuvia .filefield input[type="file"] { display: none; }
.nuvia .filefield__preview {
  width: 48px; height: 48px;
  border-radius: var(--b-r-md);
  object-fit: cover;
  background: var(--b-cream-200);
  flex: none;
}
.nuvia .filefield__body { min-width: 0; }
.nuvia .filefield__name { color: var(--b-ink-900); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 7.26 Form layout helpers (used by base/nuvia_create.html) ────────── */
.nuvia .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--b-s-4); }
.nuvia .form-grid .col-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .nuvia .form-grid { grid-template-columns: 1fr; } }
/* RAY-8: form actions are primary-first, left-aligned (same rule as toolbars) */
.nuvia .form-actions { display: flex; flex-wrap: wrap; gap: var(--b-s-2); margin-top: var(--b-s-5); }
.nuvia .form-actions--split { justify-content: space-between; }

.nuvia .nuvia-alert {
  padding: var(--b-s-3) var(--b-s-4);
  border-radius: var(--b-r-md);
  margin-bottom: var(--b-s-4);
  font: var(--b-font-body-m);
}
.nuvia .nuvia-alert--success { background: var(--b-sage-100); color: var(--b-sage-700); }
.nuvia .nuvia-alert--error,
.nuvia .nuvia-alert--danger { background: var(--b-rose-300); color: var(--b-rose-700); }
.nuvia .nuvia-alert--warning { background: var(--b-mustard-50); color: var(--b-mustard-500); }
.nuvia .nuvia-alert--info { background: var(--b-cream-200); color: var(--b-ink-700); }

/* ── 7.27 Bootstrap-widget compatibility ──────────────────────────────────
   Django form widgets ship .form-control / .form-select / .form-check-input /
   .form-label (Able Pro). Re-skin them under .nuvia to the §7.2 field look so
   migrated forms style correctly without rewriting every widget definition. */
.nuvia .form-label {
  display: block;
  font: var(--b-font-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b-terracotta-600);
  margin-bottom: 6px;
}
.nuvia .form-control,
.nuvia .form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--b-border-strong);
  border-radius: var(--b-r-md);
  font: 400 14px/1.45 var(--b-body);
  color: var(--b-ink-900);
  background-color: var(--b-surface);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nuvia .form-select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C6B5E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.nuvia .form-control:focus,
.nuvia .form-select:focus {
  outline: none;
  border-color: var(--b-terracotta-500);
  box-shadow: 0 0 0 3px rgba(184, 90, 58, 0.12);
}
.nuvia textarea.form-control { min-height: 96px; resize: vertical; }
.nuvia .form-control[readonly] { background: var(--b-cream-100); color: var(--b-ink-500); }
.nuvia .form-check { display: flex; align-items: center; gap: var(--b-s-2); }
.nuvia .form-check-input {
  width: 18px; height: 18px;
  margin: 0;
  border: 1.5px solid var(--b-border-strong);
  border-radius: var(--b-r-sm);
  accent-color: var(--b-terracotta-500);
  cursor: pointer;
  flex: none;
}
.nuvia .form-check-label { font: var(--b-font-body-m); color: var(--b-ink-700); }
.nuvia .invalid-feedback { font: 400 12px/1.4 var(--b-body); color: var(--b-rose-700); margin-top: 6px; }

/* ── 7.28 EditableTable (nuvia mode) overrides ────────────────────────────
   editable-table.js with {nuvia:true} renders into .data-table and uses the
   inline-SVG icons; these tidy up its remaining runtime classes under .nuvia. */
.nuvia .et-th-inner { display: flex; align-items: center; gap: 4px; }
.nuvia .et-filter-btn { color: var(--b-ink-300); }
.nuvia .et-filter-btn:hover { color: var(--b-ink-500); }
.nuvia .et-action--danger { color: var(--b-rose-700); }
.nuvia .et-filter-popover {
  background: var(--b-surface);
  border: 1px solid var(--b-border-soft);
  border-radius: var(--b-r-lg);
  box-shadow: var(--b-shadow-3);
  padding: var(--b-s-3);
  min-width: 210px;
}
.nuvia .et-row-inactive { opacity: 0.55; }
/* keep action buttons on one inline row, give the grid room to breathe */
.nuvia .data-table .table { min-width: 720px; }
.nuvia .table td.text-end { text-align: right; white-space: nowrap; }
.nuvia .table td.text-end .btn { width: auto; margin-left: 2px; vertical-align: middle; }
.nuvia .table td .form-check.form-switch { display: inline-flex; }

/* Switch editor (e.g. "Activo") — render the form-switch checkbox as a real
   pill toggle with a sliding knob, in every editable-table list/grid (Nuvia
   ships .form-check-input as a square checkbox only). Scoped to .form-switch
   so plain checkboxes (row select, multiselect filters) stay square. */
.nuvia .table .form-switch .form-check-input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--b-border-strong);
  border-radius: var(--b-r-pill);
  background: var(--b-cream-200);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.nuvia .table .form-switch .form-check-input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(43, 32, 26, 0.25);
  transition: left 0.18s ease;
}
.nuvia .table .form-switch .form-check-input:checked {
  background: var(--b-terracotta-500);
  border-color: var(--b-terracotta-500);
}
.nuvia .table .form-switch .form-check-input:checked::before { left: 18px; }
.nuvia .table .form-switch .form-check-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184, 90, 58, 0.18);
}

/* ── 7.30 Supplier edit mode — fullscreen spreadsheet (RAY-18) ──────────────
   Served from base/nuvia_fullscreen.html (no sidebar/topbar). A compact top bar
   + a grid that fills the rest of the viewport with internal scroll. Square
   corners, full gridlines, sticky header and sticky Nº column = "planilla". */
.nuvia-fullscreen { min-height: 100vh; }
.nuvia-fullscreen .sem {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--b-cream-50);
}
.nuvia-fullscreen .sem__bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-s-3) var(--b-s-5);
  padding: var(--b-s-3) var(--b-s-4);
  background: var(--b-surface);
  border-bottom: 1px solid var(--b-border-soft);
}
.nuvia-fullscreen .sem__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-s-2);
}
.nuvia-fullscreen .sem__widgets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-s-5);
}

/* Compact inline status widget: "Valor1 / Valor2 (xx%)" + thin text-width bar */
.nuvia-fullscreen .sem-widget { display: inline-flex; flex-direction: column; gap: 4px; }
.nuvia-fullscreen .sem-widget__eyebrow {
  font: var(--b-font-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b-ink-500);
}
.nuvia-fullscreen .sem-widget__value {
  font: var(--b-font-body-m);
  color: var(--b-ink-900);
  white-space: nowrap;
}
.nuvia-fullscreen .sem-widget__value .sem-widget__sub { color: var(--b-ink-500); }
.nuvia-fullscreen .sem-widget .progress { width: 100%; height: 4px; }

/* Table area fills remaining height; scroll lives inside it */
.nuvia-fullscreen .sem__table {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--b-surface);
}
/* editable-table.js renders a .data-table wrapper inside; flatten it to a
   borderless full-bleed grid (square corners, no card shadow). */
.nuvia-fullscreen .sem__table .data-table {
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.nuvia-fullscreen .sem__table .table { min-width: 0; }
.nuvia-fullscreen .sem__table .table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  border-right: 1px solid var(--b-border-soft);
}
.nuvia-fullscreen .sem__table .table tbody td {
  border-right: 1px solid var(--b-border-soft);
  /* Uniform row height across data and empty (dummy) rows */
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}
/* Nº column (first cell) — sticky left, muted, non-editable */
.nuvia-fullscreen .sem__table .table thead th:first-child,
.nuvia-fullscreen .sem__table .table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--b-cream-100);
  color: var(--b-ink-500);
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 48px;
}
.nuvia-fullscreen .sem__table .table thead th:first-child { z-index: 4; }
/* Fullscreen sheet stays flat (the generic rounded corners don't apply). */
.nuvia-fullscreen .sem__table .table thead th:first-child,
.nuvia-fullscreen .sem__table .table thead th:last-child,
.nuvia-fullscreen .sem__table .table tbody tr:last-child td:first-child,
.nuvia-fullscreen .sem__table .table tbody tr:last-child td:last-child { border-radius: 0; }

/* Cell buttons (delete action, comment): icon only — no fill/border, just the
   icon with a hover background and minimal padding (RAY-18 refinements). */
.nuvia-fullscreen .sem__table .table td .btn,
.nuvia-fullscreen .sem__table .table td .sc-open-btn {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 3px;
  border-radius: var(--b-r-sm);
}
.nuvia-fullscreen .sem__table .table td .btn:hover,
.nuvia-fullscreen .sem__table .table td .sc-open-btn:hover {
  background: var(--b-cream-200);
}

/* Editing a cell: the input fills the whole cell (no padding) with square
   corners, so it reads like a spreadsheet cell. */
.nuvia-fullscreen .sem__table .table td.et-editing { padding: 0; }
.nuvia-fullscreen .sem__table .table td.et-editing .form-control,
.nuvia-fullscreen .sem__table .table td.et-editing .form-select {
  border-radius: 0;
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* ── Row color highlight (RAY-18) ───────────────────────────────────────────
   Click the Nº cell → pick a color from the picker modal. Stored on the
   supplier; re-applied via the rowClass hook on every render. The Nº cell acts
   as a color "tab" (accent fill); the rest of the row gets a light tint. */
.nuvia-fullscreen .sem__table .table tbody td:first-child { cursor: pointer; }
.nuvia-fullscreen .sem__table .table tbody tr[class*="sem-row--"] td {
  transition: background-color 0.15s ease;
}
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--terracotta td { background: #FBEEE7; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--mustard td { background: #FBF3DC; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--sage td { background: #E4EBDE; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--rose td { background: #F7E4DF; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--sand td { background: #F2EADC; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--terracotta td:first-child { background: var(--b-terracotta-500); color: #fff; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--mustard td:first-child { background: var(--b-mustard-400); color: #fff; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--sage td:first-child { background: var(--b-sage-500); color: #fff; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--rose td:first-child { background: var(--b-rose-500); color: #fff; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--sand td:first-child { background: var(--b-sand-500); color: #fff; }
/* Readonly (computed) cells in a colored row: a slightly darker shade of the
   same color instead of the default grey, so the row reads as one block. */
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--terracotta td.et-cell-readonly { background: #F4D6C5; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--mustard td.et-cell-readonly { background: #F3E4B5; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--sage td.et-cell-readonly { background: #D3DECB; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--rose td.et-cell-readonly { background: #EFCFC6; }
.nuvia-fullscreen .sem__table .table tbody tr.sem-row--sand td.et-cell-readonly { background: #E6D8C0; }

/* Color picker swatches (in the modal) */
.sem-swatches { display: flex; flex-direction: column; gap: 4px; }
.sem-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--b-r-md);
  background: transparent;
  cursor: pointer;
  font: var(--b-font-body-m);
  color: var(--b-ink-700);
  text-align: left;
}
.sem-swatch:hover { background: var(--b-cream-100); }
.sem-swatch.is-active { border-color: var(--b-border-strong); background: var(--b-cream-100); }
.sem-swatch__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(43, 32, 26, 0.1);
  flex: none;
}
.sem-swatch__dot--none { background: #fff; border: 1px dashed var(--b-border-strong); }
.sem-swatch__dot--terracotta { background: var(--b-terracotta-500); }
.sem-swatch__dot--mustard { background: var(--b-mustard-400); }
.sem-swatch__dot--sage { background: var(--b-sage-500); }
.sem-swatch__dot--rose { background: var(--b-rose-500); }
.sem-swatch__dot--sand { background: var(--b-sand-500); }