/*
 * DiacoUI kit — shared component styles for new pages (Tier 3+).
 * Namespace: rui-*  · built on the design tokens in main.css · theme-aware (data-theme) · RTL.
 * Per-tone color via --rui-accent / --rui-tint / --rui-ink set on .rui-tone-* classes.
 */

/* Shared button interaction contract. Visual variants remain owned by
   .btn/.rui-btn; this baseline keeps typography, keyboard focus, disabled
   state and Material-icon sizing consistent across product pages. */
:where(#content, .ds-modal, .ds-drawer) button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
:where(#content, .ds-modal, .ds-drawer) button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-500) 30%, transparent);
  outline-offset: 2px;
}
:where(#content, .ds-modal, .ds-drawer) button:disabled,
:where(#content, .ds-modal, .ds-drawer) button[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .52;
  box-shadow: none !important;
  transform: none !important;
}
.btn {
  justify-content: center;
  min-inline-size: 40px;
  line-height: 1;
  cursor: pointer;
  isolation: isolate;
}
.btn > :where(.ds-ico, [data-ds-icon]) {
  inline-size: 18px;
  block-size: 18px;
  flex: 0 0 auto;
}
.btn.ghost:hover {
  background: color-mix(in srgb, var(--pastel-sky) 34%, var(--surface));
  border-color: color-mix(in srgb, var(--brand-500) 26%, var(--border));
}
.btn.danger { background: color-mix(in srgb, var(--pastel-rose) 34%, var(--surface)); }
.btn.danger:hover {
  background: color-mix(in srgb, var(--pastel-rose) 58%, var(--surface));
  border-color: color-mix(in srgb, var(--red-500) 65%, var(--border));
}
.btn.sm {
  min-block-size: 32px;
  block-size: 32px;
  padding-inline: 12px;
  border-radius: 10px;
  font-size: 12px;
}

/* ---------- tone map ---------- */
.rui-tone-neutral { --rui-accent:#2c7873; --rui-tint:rgba(44,120,115,.10); --rui-ink:#3f4a78; }
.rui-tone-mint    { --rui-accent:#2fb98a; --rui-tint:rgba(184,230,211,.35); --rui-ink:#1c6f53; }
.rui-tone-sky     { --rui-accent:#3b82c4; --rui-tint:rgba(184,212,241,.35); --rui-ink:#255a86; }
.rui-tone-peach   { --rui-accent:#e8955f; --rui-tint:rgba(255,228,204,.40); --rui-ink:#9a5a2b; }
.rui-tone-lilac   { --rui-accent:#8b74e0; --rui-tint:rgba(221,214,254,.40); --rui-ink:#5a45a8; }
.rui-tone-rose    { --rui-accent:#e0607a; --rui-tint:rgba(245,194,199,.35); --rui-ink:#a83a52; }
.rui-tone-lemon   { --rui-accent:#d9a23b; --rui-tint:rgba(254,243,199,.45); --rui-ink:#8a6410; }
.rui-tone-red     { --rui-accent:#e05353; --rui-tint:rgba(224,83,83,.10);   --rui-ink:#a83232; }
.rui-tone-amber   { --rui-accent:#d99321; --rui-tint:rgba(217,147,33,.12);  --rui-ink:#8a5e10; }
.rui-tone-green   { --rui-accent:#2fb98a; --rui-tint:rgba(47,185,138,.12);  --rui-ink:#1c6f53; }
.rui-tone-blue    { --rui-accent:#3b82c4; --rui-tint:rgba(59,130,196,.12);  --rui-ink:#255a86; }
.rui-tone-purple  { --rui-accent:#8b74e0; --rui-tint:rgba(139,116,224,.12); --rui-ink:#5a45a8; }

[data-theme="dark"] [class*="rui-tone-"] { --rui-ink: color-mix(in srgb, var(--rui-accent) 78%, #fff); }

/* ---------- section head ---------- */
.rui-sechead { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:18px 0 12px; }
.rui-sechead__sub { display:block; font-size:11px; font-weight:600; color:var(--muted, #8a90a6); letter-spacing:.2px; }
.rui-sechead__title { font-size:15px; font-weight:800; margin:2px 0 0; color:var(--text, #23283b); }
.rui-sechead__actions { display:flex; gap:8px; }

/* ---------- card ---------- */
.rui-card {
  --rui-accent-edge: var(--rui-accent, var(--brand-500));
  --rui-accent-edge-w: 4px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e9ebf3);
  border-inline-start: var(--rui-accent-edge-w) solid var(--rui-accent-edge);
  border-radius: var(--radius, 16px);
  padding: 16px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(20, 25, 50, .04),
    0 12px 32px -14px color-mix(in srgb, var(--rui-accent-edge) 32%, transparent);
  transition: transform .25s cubic-bezier(.22, .7, .16, 1), box-shadow .25s ease, border-color .25s ease;
}
.rui-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px -12px color-mix(in srgb, var(--rui-accent-edge) 42%, transparent),
    0 4px 14px rgba(15, 23, 42, .06);
}
.rui-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.rui-card__eyebrow { display:block; font-size:10.5px; font-weight:700; color:var(--rui-ink); letter-spacing:.3px; }
.rui-card__title { font-size:14px; font-weight:800; margin:2px 0 0; color:var(--text, #23283b); }
.rui-card__actions { display:flex; gap:6px; flex:0 0 auto; }

/* ---------- KPI tile ---------- */
.rui-kpi { background:var(--surface, #fff); border:1px solid var(--border, #e9ebf3); border-radius:var(--radius, 16px);
  padding:14px 16px; display:flex; flex-direction:column; gap:7px; }
.rui-kpi__label { font-size:11.5px; font-weight:500; color:var(--muted, #8a90a6); }
.rui-kpi__row { display:flex; align-items:baseline; gap:8px; }
/* Macro (value) vs. micro (label) contrast, matching the .kpi-value pass in
   main.css — this tile is reused by 37 page modules via UI.kpiTile(). */
.rui-kpi__value { font-size:23px; font-weight:800; letter-spacing:-.5px; color:var(--rui-ink); }
.rui-kpi__delta { font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:999px;
  color:var(--rui-ink); background:var(--rui-tint); }
.rui-kpi__spark { margin-top:2px; }

/* ---------- chip / badge ---------- */
.rui-chip { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:3px 10px;
  border-radius:999px; color:var(--rui-ink); background:var(--rui-tint); }
.rui-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px;
  border-radius:999px; color:var(--rui-ink); background:var(--rui-tint); }
.rui-badge__dot { width:6px; height:6px; border-radius:50%; background:var(--rui-accent); }
.rui-badge.is-pulse .rui-badge__dot { animation:rui-pulse 1.4s ease-in-out infinite; }
@keyframes rui-pulse { 0%,100%{ box-shadow:0 0 0 0 var(--rui-tint); } 50%{ box-shadow:0 0 0 5px transparent; } }

/* ---------- button ---------- */
.rui-btn { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:12.5px; font-weight:700;
  padding:8px 14px; border-radius:12px; border:1px solid var(--rui-accent); cursor:pointer;
  color:#fff; background:var(--rui-accent); transition:transform .08s ease, filter .15s ease; }
.rui-btn:hover { filter:brightness(1.05); }
.rui-btn:active { transform:translateY(1px); }
.rui-btn--ghost { background:transparent; color:var(--rui-ink); border-color:var(--border, #e9ebf3); }
.rui-btn--soft { background:var(--rui-tint); color:var(--rui-ink); border-color:transparent; }
.rui-btn__icon { display:inline-flex; }

/* ---------- table ---------- */
.rui-table-wrap { overflow-x:auto; border:1px solid var(--border, #e9ebf3); border-radius:var(--radius, 16px); }
.rui-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.rui-table th { text-align:right; font-weight:700; font-size:11.5px; color:var(--muted, #8a90a6);
  padding:11px 14px; background:var(--surface-2, #f7f8fc); border-bottom:1px solid var(--border, #e9ebf3); white-space:nowrap; }
.rui-table td { padding:11px 14px; border-bottom:1px solid var(--border, #eef0f6); color:var(--text, #23283b); }
.rui-table tbody tr:last-child td { border-bottom:none; }
.rui-table tbody tr:hover td { background:var(--rui-tint); }
.rui-table__empty { text-align:center; color:var(--muted, #8a90a6); padding:24px !important; }

/* ---------- empty state ---------- */
.rui-empty { text-align:center; padding:36px 16px; color:var(--muted, #8a90a6); }
.rui-empty__icon { font-size:26px; opacity:.85; margin-bottom:8px; color:#3b5998; }
.rui-empty__icon .ds-ico { color:inherit; }
.rui-empty__title { font-size:13px; font-weight:700; color:var(--text, #23283b); }
.rui-empty__msg { font-size:12px; margin-top:4px; }

/* ---------- status tracker ---------- */
.rui-track { display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.rui-track__step { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--muted, #8a90a6); }
.rui-track__dot { width:12px; height:12px; border-radius:50%; border:2px solid var(--border, #d7dae6); background:var(--surface, #fff); }
.rui-track__line { flex:1; min-width:20px; height:2px; background:var(--border, #e2e5ef); margin:0 8px; }
.rui-track__step.is-done { color:var(--rui-ink); }
.rui-track__step.is-done .rui-track__dot { background:var(--rui-accent); border-color:var(--rui-accent); }
.rui-track__step.is-current { color:var(--rui-ink); }
.rui-track__step.is-current .rui-track__dot { border-color:var(--rui-accent); box-shadow:0 0 0 4px var(--rui-tint); }

/* ---------- sparkline ---------- */
.rui-spark polyline { stroke:var(--rui-accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- toast ----------
   Physical LEFT edge (matches Diaco Pilot FAB side). Uses `left`/`right`
   instead of `inset-inline-*` so the anchor is stable regardless of the
   surrounding RTL/LTR direction. Newest toast appears at the bottom;
   older ones sit above (column-reverse). */
.rui-toast-host { position:fixed; bottom:96px; left:20px; right:auto; z-index:9999;
  display:flex; flex-direction:column-reverse; gap:8px; pointer-events:none;
  max-width:min(360px, calc(100vw - 40px)); }
.rui-toast { position:relative; background:var(--surface, #fff); border:1px solid var(--border, #e9ebf3);
  border-radius:12px; padding:11px 40px 11px 19px; font-size:12.5px; font-weight:600; color:var(--text, #23283b);
  box-shadow:0 6px 24px rgba(20,25,50,.14); animation:rui-toast-in .22s ease both;
  max-width:340px; pointer-events:auto; cursor:pointer;
  display:flex; align-items:center; gap:8px; overflow:hidden; isolation:isolate; }
.rui-toast__msg { line-height:1.8; text-shadow:none; }
.rui-toast::before {
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:var(--rui-accent, #2c7873); border-radius:0 3px 3px 0;
}
html[dir="ltr"] .rui-toast::before, [dir="ltr"] .rui-toast::before { border-radius:3px 0 0 3px; }
.rui-toast__msg { flex:1; min-width:0; word-break:break-word; }
.rui-toast__count { display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px; padding:0 6px; border-radius:999px;
  background:rgba(20,25,50,.08); color:var(--text, #23283b); font-size:11px; font-weight:700; }
/* Undo/action button (helpdesk-ticketing-p1) — inline flex item, never
   overlaps the absolutely-positioned close button in the corner. */
.rui-toast__action { flex:none; background:var(--rui-accent); color:#fff; border:0; border-radius:8px;
  padding:4px 12px; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; }
.rui-toast__action:hover { filter:brightness(1.08); }
.rui-toast__action--cancel { background:transparent; color:var(--rui-ink, var(--text, #23283b));
  border:1px solid color-mix(in srgb, var(--rui-accent) 42%, transparent); }
.rui-toast__action--cancel:hover { background:color-mix(in srgb, var(--rui-accent) 12%, transparent); }
.rui-toast__close { position:absolute; top:6px; right:8px; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent;
  border-radius:50%; color:var(--muted, #7a8098); font-size:16px; line-height:1; cursor:pointer;
  transition:background .15s ease, color .15s ease; }
.rui-toast__close:hover { background:rgba(20,25,50,.08); color:var(--text, #23283b); }
.rui-toast.is-out { opacity:0; transform:translateX(-16px); transition:opacity .26s ease, transform .26s ease; }
/* Semantic toast tones — tinted surface + accent stripe (success/error/warning) */
.rui-toast.rui-tone-green {
  background:#ecfdf5;
  border-color:color-mix(in srgb, var(--rui-accent) 34%, var(--border, #e9ebf3));
  color:#065f46;
}
.rui-toast.rui-tone-green::before { background:#2fb98a; }
.rui-toast.rui-tone-red {
  background:#fff1f2;
  border-color:color-mix(in srgb, var(--rui-accent) 34%, var(--border, #e9ebf3));
  color:#9f1239;
}
.rui-toast.rui-tone-red::before { background:#e05353; }
.rui-toast.rui-tone-lemon,
.rui-toast.rui-tone-amber {
  background:#fffbeb;
  border-color:color-mix(in srgb, var(--rui-accent) 36%, var(--border, #e9ebf3));
  color:#92400e;
}
.rui-toast.rui-tone-lemon::before,
.rui-toast.rui-tone-amber::before { background:#d9a23b; }
.rui-toast.rui-tone-neutral::before { background:#2c7873; }
.rui-toast:is(.rui-tone-green, .rui-tone-red, .rui-tone-lemon, .rui-tone-amber) .rui-toast__close { color:var(--rui-ink); }
.rui-toast:is(.rui-tone-green, .rui-tone-red, .rui-tone-lemon, .rui-tone-amber) .rui-toast__close:hover {
  background:color-mix(in srgb, var(--rui-accent) 16%, transparent);
  color:var(--rui-ink);
}
@keyframes rui-toast-in { from{ opacity:0; transform:translateX(-16px); } to{ opacity:1; transform:translateX(0); } }

/* ---------- drawer ---------- */
.rui-drawer-back { position:fixed; inset:0; z-index:9998; background:rgba(18,22,40,.34);
  opacity:0; transition:opacity .24s ease; }
.rui-drawer-back.is-open { opacity:1; }
/* A data form or confirmation opened from a drawer stacks above it (0.529, GEX-302); dropdown and date pop-ups (10050+) stay above both. */
body:has(> .rui-drawer-back) .rlx-backdrop { z-index: 9999; }
/* Drawer anchored to the physical RIGHT edge so it slides in from the right
   in RTL (the natural direction). Uses physical `right`/`left` instead of
   `inset-inline-*` because `translateX` is physical and mixing the two
   caused the drawer to reveal from the LEFT edge in RTL. */
.rui-drawer { position:absolute; inset-block:0; right:0; left:auto; width:min(720px, 96vw);
  background:var(--surface, #fff); box-shadow:0 0 40px rgba(20,25,50,.22); transform:translateX(100%);
  transition:transform .28s cubic-bezier(.3,.8,.3,1); display:flex; flex-direction:column; }
.rui-drawer-back.is-open .rui-drawer { transform:translateX(0); }
/* Explicit left-edge drawer (physical left) — e.g. complaint detail actions. */
.rui-drawer.rui-drawer--left {
  right:auto; left:0; transform:translateX(-100%);
}
.rui-drawer-back.is-open .rui-drawer.rui-drawer--left { transform:translateX(0); }
.rui-drawer-back.is-closing { opacity:0; pointer-events:none; transition:opacity .2s ease; }
.rui-drawer-back.is-closing .rui-drawer { transform:translateX(105%); transition-duration:.22s; }
html[dir="ltr"] .rui-drawer-back.is-closing .rui-drawer:not(.rui-drawer--left),
[dir="ltr"] .rui-drawer-back.is-closing .rui-drawer:not(.rui-drawer--left) { transform:translateX(-105%); }
.rui-drawer-back.is-closing .rui-drawer.rui-drawer--left { transform:translateX(-105%); }
.rui-drawer.rui-drawer--left .rui-drawer__close { left:auto; right:16px; }
/* When the ambient direction is LTR, mirror to the left edge so LTR
   admin/tools still get a natural slide-in from the physical left. */
html[dir="ltr"] .rui-drawer:not(.rui-drawer--left), [dir="ltr"] .rui-drawer:not(.rui-drawer--left) {
  right:auto; left:0; transform:translateX(-100%);
}
html[dir="ltr"] .rui-drawer-back.is-open .rui-drawer:not(.rui-drawer--left),
[dir="ltr"] .rui-drawer-back.is-open .rui-drawer:not(.rui-drawer--left) { transform:translateX(0); }
/* Rich header: gradient band (accent → darker) + soft decorative orbs +
   glass icon badge + eyebrow label + status tag. Shared by every rui-drawer
   consumer — this is the one template for all popups going forward. */
.rui-drawer__head {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 22px 22px;
  background: linear-gradient(155deg, var(--rui-accent) 0%, color-mix(in srgb, var(--rui-accent) 55%, #10162c) 115%);
  color: #fff;
}
.rui-drawer__orb { position: absolute; border-radius: 50%; background: #fff; filter: blur(28px); pointer-events: none; z-index: -1; }
.rui-drawer__orb-a { width: 160px; height: 160px; top: -70px; inset-inline-start: -45px; opacity: .16; }
.rui-drawer__orb-b { width: 110px; height: 110px; bottom: -50px; inset-inline-end: 10px; opacity: .12; }
.rui-drawer__head-row { display: flex; align-items: center; gap: 13px; }
.rui-drawer__ic {
  width: 50px; height: 50px; border-radius: 16px; flex: none; font-size: 24px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.2); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 8px 18px -8px rgba(0,0,0,.3);
}
.rui-drawer__eyebrow { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .82; margin-bottom: 3px; }
.rui-drawer__head h3 { font-size: 16.5px; font-weight: 800; margin: 0; color: #fff; line-height: 1.35; }
.rui-drawer__tag {
  align-self: flex-start; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
}
.rui-drawer__close {
  position: absolute; top: 16px; left: 16px; z-index: 2; border: none; font-size: 14px; line-height: 1; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.2); backdrop-filter: blur(6px);
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  transition: background .15s, transform .2s;
}
html[dir="ltr"] .rui-drawer__close, [dir="ltr"] .rui-drawer__close { left: auto; right: 16px; }
.rui-drawer__close:hover { background: rgba(255,255,255,.34); transform: rotate(90deg); }
.rui-drawer__body { padding: 20px 22px 24px; overflow-y: auto; flex: 1; }

/* ---------- reusable content utilities (drawers, cards, anywhere) ---------- */
.rui-list-check, .rui-list-steps { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.7; color: var(--text, #23283b); }
.rui-list-check li, .rui-list-steps li { position: relative; padding-inline-start: 26px; margin-bottom: 9px; }
.rui-list-check li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; top: 0;
  width: 17px; height: 17px; border-radius: 50%; background: var(--rui-tint); color: var(--rui-ink);
  font-size: 9.5px; font-weight: 900; display: grid; place-items: center;
}
.rui-list-steps { counter-reset: rui-step; position: relative; }
.rui-list-steps li { counter-increment: rui-step; }
.rui-list-steps li::before {
  content: counter(rui-step); position: absolute; inset-inline-start: 0; top: 0; z-index: 1;
  width: 17px; height: 17px; border-radius: 50%; background: var(--rui-accent); color: #fff;
  font-size: 9.5px; font-weight: 800; display: grid; place-items: center;
}
.rui-list-steps li:not(:last-child)::after {
  content: ''; position: absolute; inset-inline-start: 8px; top: 19px; bottom: -9px; width: 1.5px; background: var(--rui-tint);
}

.rui-keybox { border: 1px solid var(--border, #e9ebf3); border-radius: 14px; padding: 13px 14px;
  background: linear-gradient(160deg, var(--rui-tint), transparent 140%); }
.rui-keybox__label { display: block; font-size: 11px; color: var(--muted, #8a90a6); margin-bottom: 7px; }
.rui-keybox__row { display: flex; align-items: center; gap: 8px; }
.rui-keybox__value { flex: 1; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12.5px;
  background: var(--surface, #fff); border: 1px solid var(--border, #e9ebf3); border-radius: 9px; padding: 7px 10px;
  overflow-x: auto; white-space: nowrap; color: var(--text, #23283b); }
.rui-keybox__copy { flex: none; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border, #e9ebf3);
  background: var(--surface, #fff); cursor: pointer; font-size: 13px; transition: background .15s, transform .12s; }
.rui-keybox__copy:hover { background: var(--rui-tint); transform: scale(1.06); }
.rui-keybox__copy.is-done { background: rgba(47,185,138,.28); border-color: transparent; }
.rui-keybox__note { font-size: 12px; color: var(--muted, #8a90a6); line-height: 1.75; }

/* ---------- dark theme surface fallbacks ---------- */
[data-theme="dark"] .rui-card,
[data-theme="dark"] .rui-kpi,
[data-theme="dark"] .rui-table-wrap,
[data-theme="dark"] .rui-toast,
[data-theme="dark"] .rui-drawer { background:var(--surface, #1b1f2e); border-color:var(--border, #2a3042); }
[data-theme="dark"] .rui-toast:is(.rui-tone-green, .rui-tone-red, .rui-tone-lemon, .rui-tone-amber) {
  background:linear-gradient(160deg, color-mix(in srgb, var(--rui-tint) 55%, var(--surface, #1b1f2e)) 0%, var(--surface, #1b1f2e) 100%);
  border-color:color-mix(in srgb, var(--rui-accent) 28%, var(--border, #2a3042));
}
[data-theme="dark"] .rui-table th { background:var(--surface-2, #232838); }

/* Side-accent cards — stripe follows corner radius + per-tone tinted shadow */
:where(.erp-card, .w3-card, .il2-pcard, .tr-lccard) {
  --rui-accent-edge: var(--rui-accent, var(--brand-500));
  box-shadow:
    0 1px 3px rgba(20, 25, 50, .04),
    0 12px 32px -14px color-mix(in srgb, var(--rui-accent-edge) 32%, transparent);
  transition: transform .25s cubic-bezier(.22, .7, .16, 1), box-shadow .25s ease;
}
:where(.erp-card, .w3-card, .il2-pcard, .tr-lccard):hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px -12px color-mix(in srgb, var(--rui-accent-edge) 42%, transparent),
    0 4px 14px rgba(15, 23, 42, .06);
}
:where(.fleet-vcard, .dist-card, .mnt-acard) {
  --rui-accent-edge: var(--rui-tone, var(--brand-500));
  border-inline-start: 4px solid var(--rui-accent-edge);
  box-shadow:
    0 1px 3px rgba(20, 25, 50, .04),
    0 12px 32px -14px color-mix(in srgb, var(--rui-accent-edge) 32%, transparent);
  transition: transform .25s cubic-bezier(.22, .7, .16, 1), box-shadow .25s ease;
}
:where(.fleet-vcard, .dist-card, .mnt-acard):hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px -12px color-mix(in srgb, var(--rui-accent-edge) 42%, transparent),
    0 4px 14px rgba(15, 23, 42, .06);
}
:where(.fleet-vcard, .dist-card, .mnt-acard)::before { display: none; }
/* Interactive form controls: the cursor must communicate clickability globally. */
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
label:has(input[type="checkbox"]:not(:disabled)),
label:has(input[type="radio"]:not(:disabled)) {
  cursor: pointer;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled,
label:has(input[type="checkbox"]:disabled),
label:has(input[type="radio"]:disabled) {
  cursor: not-allowed;
}

/* ---------- L17 — shared vertical center for mixed rows (panel + sample) ---------- */
.ds-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ds-inline-row > * {
  align-self: center;
  margin-block: 0;
}

/* Shared motion contract: lightweight CSS/DOM primitives used by the existing
   panel components. These are intentionally framework-free and respect reduced
   motion preferences. */
.ds-motion-reveal { opacity: 0; transform: translateY(8px); }
.ds-motion-reveal.is-visible { opacity: 1; transform: none; transition: opacity .28s ease, transform .34s cubic-bezier(.22,.7,.16,1); }
.ds-motion-stagger > * { opacity: 0; transform: translateY(6px); }
.ds-motion-stagger.is-visible > * { animation: dsMotionStaggerIn .32s cubic-bezier(.22,.7,.16,1) both; animation-delay: calc(var(--ds-motion-index, 0) * 45ms); }
.ds-motion-skeleton { border-radius: 8px; background: linear-gradient(90deg, var(--surface-2, #f1f3f7) 25%, var(--surface-3, #e7ebf1) 50%, var(--surface-2, #f1f3f7) 75%); background-size: 220% 100%; animation: dsMotionShimmer 1.35s ease-in-out infinite; }
.ds-motion-progress { position: relative; overflow: hidden; }
.ds-motion-progress::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: -35%; width: 35%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: dsMotionProgressSweep 1.25s ease-in-out infinite; }
.ds-motion-number { font-variant-numeric: tabular-nums; }
.ds-motion-page-in { animation: dsMotionPageIn .24s ease both; }
.ds-motion-card-in { animation: dsMotionCardIn .32s cubic-bezier(.22,.7,.16,1) both; }
.ds-motion-row-in { animation: dsMotionRowIn .24s ease both; }
.ds-motion-chart-in { animation: dsMotionChartIn .45s ease both; transform-origin: center bottom; }
.ds-motion-control { transition: transform .18s cubic-bezier(.22,.7,.16,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease; }
.ds-motion-control:active { transform: scale(.98); }
.ds-motion-tab { transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.ds-motion-tab.is-active, .ds-motion-tab[aria-selected="true"] { animation: dsMotionTabIn .22s ease both; }
.ds-motion-kanban-card { transition: transform .2s cubic-bezier(.22,.7,.16,1), box-shadow .2s ease; }
.ds-motion-kanban-card.is-dragging { transform: scale(1.025) rotate(.4deg); box-shadow: 0 16px 34px rgba(24,34,62,.2); z-index: 4; }
.ds-motion-drop-target { outline: 2px dashed color-mix(in srgb, var(--brand-500, #2c7873) 70%, transparent); outline-offset: 4px; background: color-mix(in srgb, var(--brand-500, #2c7873) 6%, transparent); transition: background .18s ease, outline-color .18s ease; }
.ds-magic-card { --ds-glare-x: 50%; --ds-glare-y: 50%; position: relative; overflow: hidden; }
.ds-magic-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; background: radial-gradient(260px circle at var(--ds-glare-x) var(--ds-glare-y), color-mix(in srgb, var(--ds-beam-color, #54c7b0) 13%, transparent), transparent 62%); transition: opacity .24s ease; }
.ds-magic-card:hover::before, .ds-magic-card:focus-within::before { opacity: 1; }
.ds-magic-card > * { position: relative; z-index: 1; }
.ds-shine-border { position: relative; isolation: isolate; }
.ds-shine-border::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; padding: 1px; background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--ds-shine-color, #54c7b0) 72%, transparent), transparent 80%); background-size: 240% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: dsShineBorder 4.8s ease-in-out infinite; }
.ds-shine-border > * { position: relative; z-index: 1; }
.ds-loop-ambient { animation: dsAmbientBreath 5.5s ease-in-out infinite; }
.ds-animated-list > * { animation: dsAnimatedListIn .3s cubic-bezier(.22,.7,.16,1) both; }
.ds-animated-list > *:nth-child(2) { animation-delay: 35ms; }.ds-animated-list > *:nth-child(3) { animation-delay: 70ms; }.ds-animated-list > *:nth-child(4) { animation-delay: 105ms; }.ds-animated-list > *:nth-child(5) { animation-delay: 140ms; }
.ds-blur-fade { animation: dsBlurFadeIn .38s ease both; }
.ds-view-swap { animation: dsViewSwap .28s cubic-bezier(.22,.7,.16,1) both; }
.ds-tab-panel-swap { animation: dsTabPanelSwap .24s ease both; }
.ds-accordion-content { overflow: hidden; transition: grid-template-rows .24s ease, opacity .2s ease, transform .24s ease; }
details.ds-accordion-motion:not([open]) > *:not(summary) { opacity: 0; transform: translateY(-4px); }
details.ds-accordion-motion[open] > *:not(summary) { animation: dsAccordionIn .24s ease both; }
[draggable="true"] { transition: transform .2s cubic-bezier(.22,.7,.16,1), box-shadow .2s ease, opacity .2s ease; }
[draggable="true"].ds-drag-spring-active { transform: scale(1.025) rotate(.35deg); opacity: .92; box-shadow: 0 14px 30px rgba(24,34,62,.18); z-index: 5; }
.ds-operation-progress { position: relative; overflow: hidden; }
.ds-operation-progress::after { content: ""; position: absolute; inset-inline-start: -30%; inset-block: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: dsOperationSweep 1.15s ease-in-out infinite; pointer-events: none; }
.ds-chart-entry { animation: dsChartEntry .42s cubic-bezier(.22,.7,.16,1) both; }
@keyframes dsShineBorder { 0%,100% { background-position: 140% 0; } 50% { background-position: -40% 0; } }
@keyframes dsAmbientBreath { 0%,100% { box-shadow: 0 8px 28px rgba(44,120,115,.07); } 50% { box-shadow: 0 12px 34px rgba(44,120,115,.15); } }
@keyframes dsAnimatedListIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dsBlurFadeIn { from { opacity: 0; filter: blur(5px); transform: translateY(4px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes dsViewSwap { from { opacity: .35; transform: translateY(5px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes dsTabPanelSwap { from { opacity: .35; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes dsAccordionIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes dsOperationSweep { to { transform: translateX(430%); } }
@keyframes dsChartEntry { from { opacity: 0; transform: scaleY(.9); transform-origin: bottom; } to { opacity: 1; transform: none; } }
@keyframes dsMotionPageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dsMotionCardIn { from { opacity: 0; transform: translateY(7px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes dsMotionRowIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes dsMotionChartIn { from { opacity: 0; transform: scaleY(.94); } to { opacity: 1; transform: none; } }
@keyframes dsMotionTabIn { from { opacity: .7; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@keyframes dsMotionStaggerIn { to { opacity: 1; transform: none; } }
@keyframes dsMotionShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes dsMotionProgressSweep { 0% { transform: translateX(0); } 100% { transform: translateX(390%); } }
@media (prefers-reduced-motion: reduce) {
  .ds-motion-reveal, .ds-motion-stagger > * { opacity: 1; transform: none; }
  .ds-motion-reveal.is-visible { transition: none; }
  .ds-motion-stagger.is-visible > *, .ds-motion-skeleton, .ds-motion-progress::after,
  .ds-motion-page-in, .ds-motion-card-in, .ds-motion-row-in, .ds-motion-chart-in,
  .ds-motion-tab.is-active, .ds-motion-tab[aria-selected="true"] { animation: none !important; }
  .ds-motion-control, .ds-motion-kanban-card { transition: none !important; }
  .ds-border-beam::after { animation: none !important; opacity: .45; }
  .ds-shine-border::before, .ds-animated-list > *, .ds-blur-fade { animation: none !important; }
  .ds-view-swap, .ds-tab-panel-swap, details.ds-accordion-motion[open] > *:not(summary), .ds-chart-entry { animation: none !important; }
  [draggable="true"], [draggable="true"].ds-drag-spring-active { transition: none !important; transform: none !important; box-shadow: none !important; }
  .ds-operation-progress::after { animation: none !important; }
}
.ds-inline-row__label {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-muted, #8a90a6);
  font-size: 13px;
  font-weight: 700;
}
/* Meter / progress rows (label | track | value) — same L17 center line */
.ds-inline-row.ds-meter-row,
.ds-inline-row.rich-bar {
  flex-wrap: nowrap;
  width: 100%;
  gap: 12px;
  min-height: 28px;
}
.ds-meter-row__track {
  flex: 1 1 auto;
  min-width: 48px;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2, #eef1f6);
  overflow: hidden;
}
.ds-meter-row__track > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-500, #2c7873);
}

/* Entity avatar — one shared contract for people and companies. */
.ds-entity-avatar {
  width: var(--ds-avatar-size, 36px);
  height: var(--ds-avatar-size, 36px);
  min-width: var(--ds-avatar-size, 36px);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--ds-avatar-size, 36px);
  overflow: hidden;
  color: #fff !important;
  background: var(--ds-avatar-color, #4f46e5) !important;
}
.ds-entity-avatar .ds-ico,
.ds-entity-avatar .ds-entity-avatar__glyph {
  display: block;
  width: 58%;
  height: 58%;
  margin: 0;
  align-self: center;
  justify-self: center;
  vertical-align: 0;
  color: #fff !important;
  fill: currentColor;
}
.ds-entity-avatar .ds-ico path,
.ds-entity-avatar .ds-entity-avatar__glyph path { fill: currentColor; }
.ds-entity-avatar--photo,.ds-entity-avatar--generated,.ds-employee-avatar-host{border:1px solid color-mix(in srgb,var(--border) 76%,transparent);background-color:var(--surface-2)!important;box-shadow:0 1px 3px color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden;color:transparent!important}
.ds-entity-avatar--photo>img,.ds-employee-avatar-host>img{display:block;width:100%;height:100%;object-fit:cover}
.ds-entity-avatar--generated{background-image:var(--ds-avatar-sheet)!important;background-size:400% 400%!important;background-position:var(--ds-avatar-x) var(--ds-avatar-y)!important;background-repeat:no-repeat!important}
/* The person's own avatar picker (ds-avatar.js openSelfPicker): both sets, four tiles a row on a phone. */
.ds-avatar-picker{display:grid;gap:16px}
.ds-avatar-picker__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--text-muted);font-size:12.5px;line-height:1.8}
.ds-avatar-picker__head span{flex:1 1 240px;min-width:0}
.ds-avatar-picker__note{margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--pastel-sky,#e8f1ff) 55%,transparent);color:var(--text-2,var(--text));font-size:12.5px;line-height:1.8}
.ds-avatar-picker__title{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--text)}
.ds-avatar-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px}
.ds-avatar-picker__item{position:relative;display:grid;place-items:center;padding:6px;border:2px solid transparent;border-radius:16px;background:var(--surface-2);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.ds-avatar-picker__item:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand-500) 35%,transparent)}
.ds-avatar-picker__item:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
.ds-avatar-picker__item.is-selected{border-color:var(--brand-500);box-shadow:0 6px 16px -10px color-mix(in srgb,var(--brand-500) 70%,transparent)}
.ds-avatar-picker__badge{position:absolute;inset-inline:4px;bottom:-8px;padding:1px 6px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:10px;font-weight:700;color:var(--text-muted);text-align:center}
@media(max-width:520px){.ds-avatar-picker__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Canonical compact checkbox/radio choice used by DS forms and modals. */
.ds-choice-group { display:flex; flex-wrap:wrap; gap:8px; }
.ds-choice {
  display:inline-flex; align-items:center; gap:8px; min-width:0; padding:9px 12px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface);
  color:var(--text-muted); font-size:12.5px; font-weight:600; cursor:pointer;
  transition:border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease;
  user-select:none;
}
.ds-choice:hover { border-color:color-mix(in srgb,var(--brand-500) 35%,var(--border)); background:color-mix(in srgb,var(--brand-500) 4%,var(--surface)); color:var(--text); }
.ds-choice input { width:16px; height:16px; flex:0 0 auto; margin:0; accent-color:var(--brand-500); cursor:pointer; }
.ds-choice:has(input:checked) { border-color:color-mix(in srgb,var(--brand-500) 55%,var(--border)); background:color-mix(in srgb,var(--pastel-mint) 45%,var(--surface)); color:var(--brand-700,var(--brand-600)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-500) 12%,transparent); }
.ds-choice:has(input:disabled) { opacity:.55; cursor:not-allowed; }
.ds-choice[hidden] { display:none !important; }
/* Status ambience — 10-second, reusable lifecycle mood for record heroes. */
[data-ds-state-ambience]{position:relative;isolation:isolate;overflow:hidden}
[data-ds-state-ambience]>*:not(.ds-state-ambience){position:relative;z-index:1}
.ds-state-ambience{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.78}
.ds-state-ambience>i{position:absolute;display:block;width:10px;height:10px;border-radius:999px;background:var(--ds-ambience-color,#60a5fa);opacity:0;animation-duration:10s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}
.ds-state-ambience.is-looping>i{animation-iteration-count:infinite}
.ds-state-ambience>i:nth-child(1){--i:0;inset-inline-start:6%;animation-delay:0s}.ds-state-ambience>i:nth-child(2){--i:1;inset-inline-start:18%;animation-delay:-1.25s}.ds-state-ambience>i:nth-child(3){--i:2;inset-inline-start:32%;animation-delay:-2.5s}.ds-state-ambience>i:nth-child(4){--i:3;inset-inline-start:49%;animation-delay:-3.75s}.ds-state-ambience>i:nth-child(5){--i:4;inset-inline-start:64%;animation-delay:-5s}.ds-state-ambience>i:nth-child(6){--i:5;inset-inline-start:78%;animation-delay:-6.25s}.ds-state-ambience>i:nth-child(7){--i:6;inset-inline-start:88%;animation-delay:-7.5s}.ds-state-ambience>i:nth-child(8){--i:7;inset-inline-start:95%;animation-delay:-8.75s}
.ds-state-ambience--won{--ds-ambience-color:#22c55e;background:radial-gradient(circle at 12% 18%,rgba(74,222,128,.2),transparent 28%),radial-gradient(circle at 88% 14%,rgba(250,204,21,.16),transparent 24%)}
.ds-state-ambience--won>i{bottom:-18px;border-radius:2px;animation-name:dsAmbienceCelebrate;transform:rotate(calc(var(--i) * 23deg));box-shadow:18px -8px 0 rgba(250,204,21,.8),-14px 8px 0 rgba(56,189,248,.65)}
.ds-state-ambience--lost{--ds-ambience-color:#fb7185;background:radial-gradient(circle at 50% 0,rgba(244,63,94,.12),transparent 44%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(190,24,93,.05))}
.ds-state-ambience--lost>i{top:-15px;width:3px;height:18px;border-radius:99px;animation-name:dsAmbienceRain;transform:rotate(12deg);box-shadow:12px 24px 0 rgba(251,113,133,.4)}
.ds-state-ambience--open{--ds-ambience-color:#38bdf8;background:radial-gradient(circle at 20% 50%,rgba(56,189,248,.16),transparent 30%),radial-gradient(circle at 82% 35%,rgba(139,92,246,.12),transparent 28%)}
.ds-state-ambience--open>i{top:50%;border:2px solid rgba(56,189,248,.7);background:transparent;animation-name:dsAmbienceWaiting;box-shadow:0 0 18px rgba(56,189,248,.35)}
.ds-state-message{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--ds-state-message-color,#3b82f6) 22%,transparent);border-radius:999px;background:color-mix(in srgb,var(--ds-state-message-color,#3b82f6) 8%,var(--surface));color:color-mix(in srgb,var(--ds-state-message-color,#3b82f6) 74%,#172033);font-size:11px;font-weight:750;line-height:1.7}
.ds-state-message::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--ds-state-message-color,#3b82f6);box-shadow:0 0 0 5px color-mix(in srgb,var(--ds-state-message-color,#3b82f6) 14%,transparent);animation:dsStateMessagePulse 10s ease-in-out infinite}
.ds-state-message--won{--ds-state-message-color:#16a34a}.ds-state-message--lost{--ds-state-message-color:#e11d48}.ds-state-message--open{--ds-state-message-color:#0284c7}
@keyframes dsAmbienceCelebrate{0%{opacity:0;transform:translateY(0) rotate(0) scale(.5)}12%{opacity:.9}55%{opacity:.7}82%,100%{opacity:0;transform:translateY(-230px) rotate(480deg) scale(1.1)}}
@keyframes dsAmbienceRain{0%{opacity:0;transform:translateY(-20px) translateX(0) rotate(12deg)}18%{opacity:.7}72%{opacity:.45}100%{opacity:0;transform:translateY(230px) translateX(-34px) rotate(12deg)}}
@keyframes dsAmbienceWaiting{0%,100%{opacity:0;transform:translate(-12px,-50%) scale(.3)}18%{opacity:.65}48%{opacity:.25;transform:translate(18px,-80%) scale(1.7)}72%{opacity:.55;transform:translate(40px,-20%) scale(.8)}}
@keyframes dsStateMessagePulse{0%,70%,100%{transform:scale(1);opacity:.8}78%{transform:scale(1.45);opacity:1}88%{transform:scale(1);opacity:.8}}
@media (prefers-reduced-motion:reduce){.ds-state-ambience>i,.ds-state-message::before{animation:none!important}.ds-state-ambience>i{opacity:.18!important}}
/* Loading button (catalog «دکمه · .btn», moved from design-system.css 1405/07/17 so the panel and the
   extension get it too) and the download button state of DsDownload (assets/js/ds-download.js). */
.btn.is-loading { gap: 8px; opacity: .85; }
.ds-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ds-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
.btn[data-ds-download][aria-busy="true"] { pointer-events: none; cursor: progress; }
.btn[data-ds-download].is-done, .btn[data-ds-download].is-failed { gap: 8px; }
@media (prefers-reduced-motion: reduce) { .ds-spinner { animation-duration: 1.6s; } }

/* ── Smart layout («قانون چیدمان هوشمند», docs/DESIGN_SYSTEM.md) ───────────
   A short control (text box, dropdown, date, number, switch) never owns a
   whole row on a wide container. Fields flow into as many columns as the
   container can hold; only narrative or wide content spans the full row.
   .ds-auto-grid picks the column count from the available width, so the same
   markup is one column on a phone and four or five on a desktop. */
.ds-auto-grid {
  --ds-auto-min: 220px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ds-auto-min)), 1fr));
  gap: 14px 16px;
  align-items: end;
  min-width: 0;
}
.ds-auto-grid--compact { --ds-auto-min: 168px; }
.ds-auto-grid--roomy { --ds-auto-min: 300px; }
.ds-auto-grid > * { min-width: 0; }
.ds-auto-grid > .ds-field { margin: 0; }
.ds-auto-grid .ds-dropdown { width: 100%; min-width: 0; }
.ds-auto-grid > :is(.ds-auto-grid__full, .ds-form-grid__full),
.ds-auto-grid > :has(> textarea, > table, > .rui-table-wrap, > .ds-heatmap, > .ds-chart-wrap) {
  grid-column: 1 / -1;
}
@media (min-width: 720px) {
  .ds-auto-grid > .ds-auto-grid__wide { grid-column: span 2; }
}
/* A dropdown inside an inline row is an inline control: it keeps a readable
   width beside its label instead of stretching to the whole row. */
.ds-inline-row > .ds-dropdown:not(.ds-dropdown--block) {
  width: auto;
  flex: 0 1 240px;
  min-width: 148px;
}