/* ============================================================
   TitleKnight Design System — components.css
   All primitives (§ 9), composites (§ 10), data states (§ 13),
   form-validation reskin (§ 11.3), focus rings (§ 14.2),
   reduced-motion override (§ 5).
   ============================================================ */

/* -----------------------------------------------------------
   Base body — set once. Never override on a page.
   ----------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-2);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -----------------------------------------------------------
   Application shell (§ 8)
   ----------------------------------------------------------- */
.app    { display: grid; grid-template-columns: var(--layout-sidebar) 1fr; min-height: 100vh; }
.main   { display: flex; flex-direction: column; min-width: 0; }
.content {
  max-width: var(--layout-content-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--layout-content-pad-y) var(--layout-content-pad-x) 40px;
}

/* Fluid modifier — opts a page out of the 1480px max-width centering so
   it spans the full width of the main column. Use for data-heavy pages
   that need every available pixel (EditClientOrder, dashboards with
   side-by-side panes, wide grids). Padding is preserved so content
   still has breathing room from the sidebar and viewport edge. */
.content.content--fluid { max-width: none; }

/* main-body is the wrapper around @@Body inside MainLayout. Migrated pages
   render <div class="content"> as their root; un-migrated (Radzen-styled)
   pages render their content directly. The :has() rule below leaves
   .content-wrapped pages alone (.content already pads itself) and applies
   sensible default container padding + max-width to everything else so the
   un-migrated pages don't span edge-to-edge. */
.main-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.main-body:not(:has(> .content)) {
  max-width: var(--layout-content-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--layout-content-pad-y) var(--layout-content-pad-x) 40px;
}

/* Full-width banner that sits above .content (no max-width cap, no
   border-radius). Use for cross-context callouts like "creating order
   on behalf of {client}" — the banner stretches the entire main column
   so the message is unmissable. Inner padding matches layout content
   padding so the banner text aligns with the page-head text below it. */
.page-banner {
  width: 100%;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px var(--layout-content-pad-x);
  font-size: var(--fs-135);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.page-banner i { flex: 0 0 auto; font-size: 16px; margin-top: 2px; }
.page-banner > .page-banner-body { flex: 1; min-width: 0; }
.page-banner .page-banner-title { font-weight: 700; }
.page-banner--info {
  background: var(--primary-50);
  color: var(--primary);
  border-bottom-color: rgba(1,30,92,.15);
}

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 22px; gap: 16px; flex-wrap: wrap;
}
.page-title {
  font-size: var(--fs-24); font-weight: 700; color: var(--ink);
  letter-spacing: var(--tracking-title); margin: 0 0 4px;
}
.page-sub { color: var(--muted); font-size: var(--fs-14); margin: 0; }
.head-actions { display: flex; gap: 8px; align-items: center; }

/* -----------------------------------------------------------
   Sidebar (§ 8.4)
   ----------------------------------------------------------- */
.sidebar {
  background: var(--card); border-right: 1px solid var(--line);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh;
  /* Above the standard right-side drawer (z-index 51) and below modal
     dialogs (z-index 100+). Defensive: keeps the sidebar dependable
     as the topmost piece of page chrome. */
  z-index: 60;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 18px; border-bottom: 1px solid var(--line-2); margin-bottom: 14px;
}
.brand-mark {
  width: 28px; height: 28px; border-radius: var(--r-4);
  background: var(--primary); color: #fff;
  display: grid; place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.brand-mark svg { width: 16px; height: 16px; }
.brand-mark-img {
  width: 22px; height: 22px;
  object-fit: contain;
  display: block;
}
/* Text column next to the logo. flex: 1 + min-width: 0 lets long company
   names ellipsis without pushing the layout wide. */
.brand-text { flex: 1; min-width: 0; }
.brand-name { font-weight: 700; color: var(--ink); letter-spacing: -0.01em; font-size: var(--fs-15); }
.brand-tag {
  font-size: var(--fs-11); color: var(--soft); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; margin-top: 1px;
}

.nav-section {
  font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .1em;
  color: var(--soft); padding: 12px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-3);
  color: var(--ink-2); cursor: pointer;
  font-size: var(--fs-14); font-weight: 500;
  text-decoration: none; user-select: none;
  transition: background var(--dur-1), color var(--dur-1);
  /* button reset — so .nav-item works on both <a> and <button> */
  background: transparent; border: 0; width: 100%;
  text-align: left; font-family: inherit;
}
.nav-item i        { font-size: 16px; color: var(--muted); width: 16px; }
.nav-item:hover    { background: var(--bg); }
.nav-item.is-active   { background: var(--primary-50); color: var(--primary); }
.nav-item.is-active i { color: var(--primary); }
.nav-item.is-disabled { color: var(--soft); cursor: default; }
.nav-item.is-disabled:hover { background: transparent; }
.nav-item.is-disabled i { color: var(--soft); }

.nav-item .count {
  margin-left: auto; font-size: var(--fs-12); color: var(--muted);
  background: var(--bg); padding: 1px 7px; border-radius: 8px; font-weight: 600;
  font-feature-settings: "tnum";
}
.nav-item.is-active .count { background: #fff; color: var(--primary); }

.sidebar-foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2);
  position: relative;
}

/* -----------------------------------------------------------
   Sidebar — collapsed (icons-only) variant.
   Driven by a single class on <html> so a tiny inline script
   in App.razor can apply it from localStorage BEFORE Blazor
   mounts (see DESIGN.md § 8.4). The class is also toggled by
   MainLayout's collapse button via the tkSidebar JS helper.
   The single var(--layout-sidebar) override flows through the
   .app grid AND every consumer (drawer left:, content offsets,
   etc.) without any other selectors needing to know.
   ----------------------------------------------------------- */
html.tk-sidebar-collapsed .app { --layout-sidebar: var(--layout-sidebar-collapsed); }

html.tk-sidebar-collapsed .sidebar { padding: 18px 6px; }

/* Brand row collapses to just the mark, centered. */
html.tk-sidebar-collapsed .brand {
  justify-content: center;
  padding: 6px 0 18px;
}
html.tk-sidebar-collapsed .brand-text { display: none; }

/* Nav-section eyebrows hide entirely in icons-only mode. Keeping the
   text via `height: 0; overflow: hidden` proved unreliable across
   browsers (the padding still rendered and clipped text bled through
   in some box-sizing combinations). The icon stack reads fine without
   group headers; if visual grouping is needed later, replace this
   with a 1px divider (`background: var(--line-2); height: 1px;`). */
html.tk-sidebar-collapsed .nav-section { display: none; }

/* Nav items: icon-only, centered. */
html.tk-sidebar-collapsed .nav-item {
  justify-content: center;
  padding: var(--sp-4) 0;
  gap: 0;
}
html.tk-sidebar-collapsed .nav-item i {
  width: auto;
  font-size: 19px;
}
html.tk-sidebar-collapsed .nav-label,
html.tk-sidebar-collapsed .nav-item .count { display: none; }

/* Profile trigger: just the avatar, centered. */
html.tk-sidebar-collapsed .profile-trigger {
  justify-content: center;
  padding: 6px 4px;
}
html.tk-sidebar-collapsed .profile-trigger .avatar-meta,
html.tk-sidebar-collapsed .profile-trigger .chev { display: none; }

/* Profile popover anchors to the right of the avatar in collapsed
   mode (instead of spanning the sidebar width, which would now be
   only 64 px wide). */
html.tk-sidebar-collapsed .profile-pop {
  left: calc(100% + 8px);
  right: auto;
  width: 240px;
  bottom: 0;
}

/* -----------------------------------------------------------
   Profile trigger + popover (§ 8.5)
   ----------------------------------------------------------- */
.profile-trigger {
  width: 100%;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 10px; padding: 6px; margin: 0;
  border-radius: var(--r-5); color: inherit; text-align: left;
  transition: background var(--dur-1);
}
.profile-trigger:hover { background: var(--bg); }
.profile-trigger .chev {
  margin-left: auto; color: var(--soft); font-size: 13px;
  transition: transform var(--dur-2);
}
.profile-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--ink-2); }

.profile-pop {
  position: absolute;
  bottom: calc(100% + 6px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-6);
  box-shadow: var(--shadow-3);
  padding: 6px;
  opacity: 0; transform: translateY(4px) scale(.98);
  transform-origin: bottom center;
  pointer-events: none;
  transition: opacity var(--dur-3) ease, transform var(--dur-3) ease;
  z-index: 30;
}
.profile-pop.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.profile-pop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px;
}
/* Text container next to the avatar — must allow shrinking so .truncate ellipsis kicks in. */
.profile-pop-head-meta { flex: 1; min-width: 0; }
.profile-pop-head .name  { font-weight: 600; color: var(--ink); font-size: var(--fs-14); line-height: var(--lh-tight); }
.profile-pop-head .email { font-size: var(--fs-125); color: var(--muted); margin-top: 1px; line-height: var(--lh-tight); }

.profile-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--r-3);
  color: var(--ink-2); font-size: var(--fs-14); font-weight: 500;
  text-decoration: none; cursor: pointer; user-select: none;
  background: transparent; border: 0; width: 100%; text-align: left; font-family: inherit;
}
.profile-item i { font-size: 16px; color: var(--muted); width: 16px; }
.profile-item:hover    { background: var(--bg); }
.profile-item:hover i  { color: var(--ink-2); }
.profile-item.is-danger        { color: var(--error); }
.profile-item.is-danger i      { color: var(--error); }
.profile-item.is-danger:hover  { background: rgba(239,68,68,.06); }
.profile-pop-sep { height: 1px; background: var(--line-2); margin: 6px 0; }

/* -----------------------------------------------------------
   Avatar (§ 9.8)
   ----------------------------------------------------------- */
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #011E5C, #2f4b91);
  color: #fff; display: grid; place-items: center;
  font-weight: 600; font-size: var(--fs-12);
}
.avatar--lg { width: 34px; height: 34px; font-size: var(--fs-13); }
.avatar--xl { width: 56px; height: 56px; font-size: 19px; }
/* Text column next to an avatar in flex rows. min-width: 0 lets .truncate
   ellipsis work even when the text is longer than the available space. */
.avatar-meta { line-height: var(--lh-tight); flex: 1; min-width: 0; }
.avatar-name { font-weight: 600; color: var(--ink); font-size: var(--fs-135); }
.avatar-role { font-size: var(--fs-12); color: var(--soft); }

/* -----------------------------------------------------------
   Topbar (§ 8.7)
   ----------------------------------------------------------- */
.topbar {
  height: var(--layout-topbar); padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 10;
}
.crumbs { font-size: var(--fs-135); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.crumbs strong { color: var(--ink); font-weight: 600; }
.crumbs i      { font-size: 12px; color: var(--soft); }
.crumbs a      { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.search {
  margin-left: 8px; flex: 1; max-width: 420px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--line);
  border-radius: var(--r-5); background: var(--bg);
  color: var(--muted); font-size: var(--fs-135);
}
.search input { border: 0; background: transparent; outline: none; flex: 1;
                font-size: var(--fs-135); color: var(--ink-2); font-family: inherit; }
.search kbd   { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px;
                border-radius: var(--r-2); background: #fff; border: 1px solid var(--line);
                color: var(--muted); }

.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

@media (max-width: 1100px) {
  .top-actions .btn-ghost .label-export { display: none; }
  .top-actions .btn-ghost { padding: 7px 9px; }
  .search { max-width: 240px; }
}
@media (max-width: 920px) {
  .crumbs { display: none; }
  .search { max-width: 200px; }
}

/* -----------------------------------------------------------
   Buttons (§ 9.1)
   ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-5);
  font-size: var(--fs-135); font-weight: 600;
  cursor: pointer; border: 1px solid transparent; font-family: inherit;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
  text-decoration: none;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary  { background: var(--primary); color: #fff; }
.btn-primary:hover  { background: var(--primary-700); }
.btn-ghost    { background: #fff; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover    { background: var(--bg); }
.btn-danger   { background: #fff; color: var(--error); border-color: rgba(239,68,68,.25); }
.btn-danger:hover   { background: var(--error-soft); }

.btn--sm  { padding: 5px 10px; font-size: 13px; }
.btn--lg  { padding: 9px 16px; font-size: 14px; }

/* -----------------------------------------------------------
   Icon button (§ 9.2)
   ----------------------------------------------------------- */
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-5);
  border: 1px solid var(--line); background: #fff;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
  position: relative; transition: background var(--dur-1);
  font-family: inherit;
}
.icon-btn:hover { background: var(--bg); }
.icon-btn .dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--error); border: 2px solid #fff;
}
.icon-btn--sm { width: 30px; height: 30px; border-radius: var(--r-4); }

/* -----------------------------------------------------------
   Inputs / selects / textareas (§ 9.3)
   ----------------------------------------------------------- */
.input, .select, textarea.input {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--r-4);
  font-family: inherit; font-size: var(--fs-14); color: var(--ink-2);
  background: #fff; outline: none;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.input:hover, .select:hover { border-color: #d8dde7; }
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--primary);
  box-shadow: var(--ring-primary);
}
.input::placeholder { color: var(--soft); }
textarea.input { resize: vertical; min-height: 80px; }

.input--error, .select--error {
  border-color: var(--error);
  box-shadow: var(--ring-error);
}
.input--num { font-feature-settings: "tnum"; }

.select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238898aa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}

.input-prefix { position: relative; }
.input-prefix .input { padding-left: 28px; }
.input-prefix .pfx   { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
                       color: var(--soft); font-size: 13px; pointer-events: none; }

/* Read-only field display (§ 9.3 addition for ViewClientOrderStatus) */
.readonly-value {
  width: 100%; padding: 9px 11px; min-height: 36px;
  border: 1px solid var(--line-2); border-radius: var(--r-4);
  background: var(--bg); color: var(--ink); font-size: var(--fs-14);
  font-family: inherit; font-feature-settings: "tnum";
  white-space: pre-wrap; word-break: break-word;
}
.readonly-value.is-empty { color: var(--soft); font-style: italic; }
.readonly-value--mono { font-family: var(--font-mono); }

/* -----------------------------------------------------------
   Field & label (§ 9.4)
   ----------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.col-span-2 { grid-column: span 2; }
.label {
  font-size: var(--fs-125); font-weight: 600; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
.label .req { color: var(--error); font-weight: 700; }
.label .opt {
  color: var(--soft); font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
}
.help        { font-size: 12px; color: var(--soft); }
.field-error { font-size: 12px; color: var(--error); display: flex; align-items: center; gap: 4px; }
.field-error i { font-size: 12px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; }
.grid-4 { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px 16px; }
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   Card (§ 9.5)
   ----------------------------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-6); overflow: hidden;
}
.card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px;
}
.card-title  { font-size: var(--fs-145); font-weight: 700; color: var(--ink);
               margin: 0; letter-spacing: -0.005em; }
.card-sub    { font-size: 13px; color: var(--muted); margin-left: 8px; }
.card-actions{ margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card-body   { padding: 14px 18px; }
.card-foot   { padding: 12px 18px; border-top: 1px solid var(--line-2);
               display: flex; align-items: center; gap: 8px; }
.card-body--flush { padding: 0; }

/* -----------------------------------------------------------
   Badge / pill (§ 9.6)
   ----------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 600; white-space: nowrap;
}
.badge i { font-size: 11px; }

.b-passed   { background: var(--success-soft);  color: #0a9558; }
.b-waived   { background: var(--warning-soft);  color: var(--warning-dark); }
.b-failed   { background: var(--error-soft);    color: var(--error); }
.b-progress { background: var(--primary-100);   color: var(--primary); }
.b-review   { background: var(--gray-soft);     color: #4b5563; }

/* -----------------------------------------------------------
   Progress bar (§ 9.7)
   ----------------------------------------------------------- */
.progress {
  width: 110px; height: 5px; background: var(--line);
  border-radius: var(--r-pill); overflow: hidden;
}
.progress > span { display: block; height: 100%; transition: width var(--dur-5) var(--ease); }
.progress--thin { height: 4px; }
.progress--block { width: 100%; }

/* -----------------------------------------------------------
   Filter chip (§ 9.9)
   ----------------------------------------------------------- */
.filters {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  background: #fff; cursor: pointer; font-family: inherit;
  transition: background var(--dur-1);
}
.chip i      { font-size: 12px; color: var(--soft); }
.chip:hover  { background: var(--bg); }
.chip.is-on  { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.is-on i { color: rgba(255,255,255,.7); }
.chip-num    { opacity: .6; margin-left: 2px; font-weight: 500; font-feature-settings: "tnum"; }
.chip.is-on .chip-num { opacity: .7; }

/* -----------------------------------------------------------
   KPI tile (§ 9.10)
   ----------------------------------------------------------- */
.kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 22px;
}
@media (max-width: 1080px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kpi {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-6); padding: 16px 18px;
  position: relative; overflow: hidden;
}
.kpi-label {
  font-size: var(--fs-12); font-weight: 600; color: var(--soft);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
}
.kpi-value {
  font-size: var(--fs-30); font-weight: 700; color: var(--ink);
  letter-spacing: var(--tracking-tight); margin-top: 8px;
  line-height: 1; font-feature-settings: "tnum";
}
.kpi-value .unit { font-size: 15px; color: var(--muted); font-weight: 600; margin-left: 3px; }
.kpi-trend {
  font-size: 12.5px; margin-top: 10px;
  display: inline-flex; align-items: center; gap: 4px; font-weight: 600;
}
.kpi-trend.up   { color: var(--success); }
.kpi-trend.down { color: var(--error); }
.kpi-trend.flat { color: var(--muted); }
.kpi-trend span { color: var(--muted); font-weight: 500; }

/* KPI as a fact (smaller value, e.g. order header chips) */
.kpi--fact .kpi-value { font-size: var(--fs-15); margin-top: 6px; line-height: var(--lh-tight); }
.kpi--fact .kpi-value.is-mono { font-family: var(--font-mono); }
.kpi--fact { padding: 12px 14px; }

/* -----------------------------------------------------------
   Pipeline stage strip (§ 9.11)
   ----------------------------------------------------------- */
.pipeline {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line-2);
}
.stage {
  background: #fff; padding: 14px 16px;
  cursor: pointer; transition: background var(--dur-2);
}
.stage:hover { background: var(--bg); }
.stage-name {
  font-size: var(--fs-12); font-weight: 600; color: var(--soft);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
}
.stage-count {
  font-size: 24px; font-weight: 700; color: var(--ink);
  margin-top: 6px; line-height: 1; font-feature-settings: "tnum";
}
.stage-bar  { height: 3px; border-radius: 2px; background: var(--line);
              margin-top: 12px; overflow: hidden; }
.stage-bar > span { display: block; height: 100%; }
.stage-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; font-size: 12px; color: var(--muted);
}

/* -----------------------------------------------------------
   Activity item (§ 9.12)
   ----------------------------------------------------------- */
.activity-list { padding: 4px 0; }
.activity {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--line-2);
}
.activity:last-child { border-bottom: 0; }
.activity-mark {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--primary-100); color: var(--primary);
}
.activity-mark.success { background: var(--success-soft); color: #0a9558; }
.activity-mark.warning { background: var(--warning-soft); color: var(--warning-dark); }
.activity-mark.error   { background: var(--error-soft);   color: var(--error); }
.activity-mark i       { font-size: 14px; }
.activity-text  { font-size: var(--fs-135); color: var(--ink-2); }
.activity-text strong { font-weight: 600; color: var(--ink); }
.activity-time  {
  font-size: 12px; color: var(--soft); margin-top: 2px;
  font-feature-settings: "tnum";
}

/* -----------------------------------------------------------
   SLA bar (§ 9.13)
   ----------------------------------------------------------- */
.sla-row { }
.sla-label-line { display: flex; justify-content: space-between; font-size: 13px; }
.sla-label-line .label { color: var(--ink-2); font-weight: 600; }
.sla-label-line .val   { color: var(--muted); font-feature-settings: "tnum"; }
.sla-bar {
  height: 5px; background: var(--line); border-radius: 3px;
  margin-top: 8px; overflow: hidden;
}
.sla-bar > span {
  display: block; height: 100%; border-radius: 3px;
  transition: width var(--dur-5) var(--ease);
}

/* SLA-warning text (replaces legacy .sla-warning + smoothFlash) */
.sla-warn { color: var(--error); font-weight: 600; }
.sla-ok   { color: var(--success); }

.sla-breached-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 700;
  background: var(--error); color: #fff;
}

/* -----------------------------------------------------------
   Stepper (§ 9.14)
   ----------------------------------------------------------- */
.stepper {
  display: flex; align-items: center; width: 100%; gap: 8px; padding: 12px 0;
  list-style: none; margin: 0;
}
.step {
  position: relative; min-width: 120px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.step-circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--line); color: var(--muted);
  display: grid; place-items: center;
  font-weight: 600; font-feature-settings: "tnum";
}
.step-label {
  font-size: var(--fs-14); font-weight: 500; color: var(--muted);
  letter-spacing: 0.2px;
}
.step-line { flex: 1; height: 1px; background: var(--line); }

.step.is-active .step-circle    { background: var(--primary);  color: #fff; }
.step.is-active .step-label     { color: var(--primary); }
.step.is-complete .step-circle  { background: var(--success);  color: #fff; }
.step.is-complete .step-label   { color: var(--success); }
.step-line.is-complete          { background: var(--success); }
.step-line.is-active            { background: var(--primary); }

/* Vertical stepper variant (used by ApiDocumentation Quick Start) */
.stepper--vertical {
  flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px 0;
}
.stepper--vertical .step {
  flex-direction: row; align-items: flex-start; min-width: 0; width: 100%;
  text-align: left; gap: 12px;
}
.stepper--vertical .step-circle { width: 28px; height: 28px; font-size: 14px; flex: 0 0 auto; }
.stepper--vertical .step-content { flex: 1; min-width: 0; padding-top: 3px; }

/* -----------------------------------------------------------
   Tabs (§ 9.15) — used by ApiDocumentation + ViewClientOrderStatus
   ----------------------------------------------------------- */
.tabs {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-5);
}
.tabs--block { display: flex; width: 100%; }
.tab {
  padding: 6px 12px; font-size: var(--fs-135); font-weight: 600;
  color: var(--muted); border-radius: var(--r-3); cursor: pointer;
  background: transparent; border: 0; font-family: inherit;
  transition: all var(--dur-1);
}
.tabs--block .tab { flex: 1; text-align: center; }
.tab:hover { color: var(--ink); }
.tab.is-active {
  background: #fff; color: var(--ink); box-shadow: var(--shadow-1);
}

.tab-panels { margin-top: 16px; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* -----------------------------------------------------------
   Table (§ 10.1)
   ----------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-135); }

.tbl thead th {
  text-align: left; font-weight: 600; font-size: 11.5px;
  color: var(--soft); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  padding: 10px 18px; background: var(--card);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap; user-select: none;
}
.tbl thead th.is-sortable        { cursor: pointer; }
.tbl thead th.is-sortable:hover  { color: var(--ink-2); }
.tbl thead th.is-sorted          { color: var(--ink); }
.tbl thead th .sort-ic           { margin-left: 4px; opacity: .55; font-size: 11px; vertical-align: middle; }
.tbl thead th.is-sorted .sort-ic { opacity: 1; color: var(--primary); }

.tbl tbody td        { padding: 12px 18px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tbody tr        { transition: background var(--dur-1); }
.tbl tbody tr.is-clickable { cursor: pointer; }
.tbl tbody tr.is-clickable:hover { background: var(--bg); }
.tbl tbody tr.is-selected { background: var(--primary-50); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.row-aging-critical    td       { background: rgba(239,68,68,.04); }
.tbl tbody tr.row-aging-critical:hover td    { background: rgba(239,68,68,.08); }

.order-id    { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-weight: 500;
               font-feature-settings: "tnum"; }
.prop-line   { color: var(--ink); font-weight: 600; }
.prop-sub    { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.client      { display: flex; align-items: center; gap: 8px; }
.client-mark { width: 24px; height: 24px; border-radius: 6px;
               background: var(--primary-100); color: var(--primary);
               display: grid; place-items: center; font-weight: 700; font-size: 11.5px; }

.age         { display: inline-flex; flex-direction: column; line-height: 1.15; }
.age .big    { font-size: 14.5px; font-weight: 700; color: var(--ink); font-feature-settings: "tnum"; }
.age .sub    { font-size: 12px; color: var(--muted); margin-top: 1px; }
.age.is-aging .big    { color: var(--warning-dark); }
.age.is-critical .big { color: var(--error); }

.row-icon-btn {
  background: transparent; border: 1px solid transparent;
  width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer; color: var(--soft);
  font-family: inherit;
}
.row-icon-btn:hover         { background: #fff; color: var(--ink); border-color: var(--line); }
.row-icon-btn.is-danger:hover { color: var(--error); border-color: rgba(239,68,68,.2); background: var(--error-soft); }

.table-foot {
  padding: 10px 18px; border-top: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--muted);
}
.pager      { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.page-btn   {
  height: 28px; min-width: 28px; padding: 0 8px;
  border: 1px solid var(--line); background: #fff; border-radius: 6px;
  font-size: 13px; color: var(--ink-2); cursor: pointer; font-family: inherit;
}
.page-btn:hover     { background: var(--bg); }
.page-btn.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.page-btn:disabled  { opacity: .4; cursor: not-allowed; }

/* -----------------------------------------------------------
   Drawer (§ 10.2)
   ----------------------------------------------------------- */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(10,37,64,.32); z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-3);
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 92vw;
  background: #fff; border-left: 1px solid var(--line); z-index: 51;
  transform: translateX(100%); transition: transform var(--dur-4) var(--ease);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-4);
}
.drawer.is-open       { transform: translateX(0); }
.drawer-head          {
  padding: 18px 22px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: flex-start; gap: 12px;
}
.drawer-head .icon-btn { margin-left: auto; }
.drawer-body          { padding: 18px 22px; overflow-y: auto; flex: 1; }
.drawer-foot          {
  padding: 14px 22px; border-top: 1px solid var(--line-2);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* Wide variant for document viewers (§ 10.2 addendum) */
.drawer--wide { width: 70vw; max-width: 1100px; }
.drawer--wide .drawer-body { padding: 0; }

/* Inline reference panes — for non-modal side rails that share the
   page's flow rather than overlaying it — are page-local patterns
   (see DESIGN.md § 10.2.2 for the EditClientOrder Documents pane).
   They reuse .drawer-head / .drawer-body for visual consistency but
   are not a .drawer variant. */

/* -----------------------------------------------------------
   Dialog (§ 10.3)
   ----------------------------------------------------------- */
.dlg-backdrop {
  position: fixed; inset: 0; background: rgba(10,37,64,.4);
  z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-3);
}
.dlg-backdrop.is-open { opacity: 1; pointer-events: auto; }

.dlg {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(.98);
  width: 640px; max-width: 92vw; max-height: 88vh;
  background: #fff; border-radius: var(--r-7);
  box-shadow: var(--shadow-5); z-index: 101;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-3), transform var(--dur-4) var(--ease);
}
.dlg.is-open  {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.dlg-head     {
  padding: 18px 22px 14px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: flex-start; gap: 10px;
}
.dlg-title    { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; }
.dlg-sub      { font-size: 13px; color: var(--muted); margin-top: 2px; }
.dlg-head .icon-btn { margin-left: auto; }
.dlg-body     { padding: 18px 22px; overflow-y: auto; flex: 1; }
.dlg-foot     {
  padding: 12px 22px; border-top: 1px solid var(--line-2);
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
.dlg-foot-left{ margin-right: auto; font-size: 13px; color: var(--muted); }
.dlg-error    { color: var(--error); font-weight: 600; font-size: 13px; }

.dlg--sm { width: 480px; }
.dlg--lg { width: 800px; }

/* -----------------------------------------------------------
   Sticky checklist (§ 10.4)
   ----------------------------------------------------------- */
.content--with-checklist {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
  max-width: 1280px;
  padding-bottom: 80px;
}
@media (max-width: 980px) {
  .content--with-checklist { grid-template-columns: 1fr; }
  .content--with-checklist .checklist { position: static !important; }
}

.content--with-checklist .page-head { grid-column: 1 / -1; }

.checklist {
  position: sticky; top: 80px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-6); padding: 8px; align-self: start;
}
.cl-head            {
  padding: 10px 12px 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px;
}
.cl-title           {
  font-size: var(--fs-12); font-weight: 700; color: var(--soft);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); margin: 0 0 8px;
}
.cl-progress-bar    { height: 4px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.cl-progress-bar > span {
  display: block; height: 100%; background: var(--primary);
  transition: width var(--dur-5) var(--ease);
}
.cl-progress-text   {
  font-size: 12.5px; color: var(--muted); margin-top: 6px;
  font-feature-settings: "tnum";
}
.cl-progress-text strong { color: var(--ink); font-weight: 600; }

.cl-item            {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-3);
  cursor: pointer; color: var(--ink-2);
  font-size: var(--fs-135); font-weight: 500;
  text-decoration: none; transition: background var(--dur-1);
  /* Reset button-element defaults so a <button class="cl-item"> looks
     identical to the <a class="cl-item"> variant. */
  background: transparent; border: 0; width: 100%;
  text-align: left; font-family: inherit;
}
.cl-item:hover      { background: var(--bg); }
.cl-item.is-active  { background: var(--primary-50); color: var(--primary); font-weight: 600; }
.cl-item.is-complete { color: var(--ink); }
.cl-mark            {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  display: grid; place-items: center; flex: 0 0 auto;
  font-size: 11px; color: var(--soft);
  transition: all .25s ease;
}
.cl-item.is-active .cl-mark   { border-color: var(--primary); color: var(--primary); }
.cl-item.is-complete .cl-mark { background: var(--success); border-color: var(--success); color: #fff; }
.cl-item.is-complete .cl-mark i { font-size: 12px; }
.cl-name            {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.cl-meta            { font-size: 11.5px; color: var(--soft); font-feature-settings: "tnum"; }
.cl-item.is-complete .cl-meta { color: var(--success); }
.cl-item.is-active .cl-meta   { color: var(--primary); }

/* Form sections (§ 10.4) */
.form-col           { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.section            {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-6); overflow: hidden; scroll-margin-top: 80px;
}
.section-head       {
  padding: 14px 20px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px;
}
.section-icon       {
  width: 28px; height: 28px; border-radius: var(--r-4);
  background: var(--primary-50); color: var(--primary);
  display: grid; place-items: center; flex: 0 0 auto;
  transition: background .25s, color .25s;
}
.section.is-complete .section-icon { background: var(--success-soft); color: var(--success); }
.section-icon i     { font-size: 15px; }
.section-title      {
  font-size: var(--fs-15); font-weight: 700; color: var(--ink); margin: 0;
  letter-spacing: -0.005em;
}
.section-sub        { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.section-status     {
  margin-left: auto; font-size: 12.5px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.section.is-complete .section-status { color: var(--success); font-weight: 600; }
.section-body       { padding: 18px 20px 20px; }
.section-body--flush { padding: 0; }

/* Sticky submit bar (§ 10.4) */
.submit-bar         {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-6);
  position: sticky; bottom: 16px;
  box-shadow: var(--shadow-2);
}
.submit-bar .summary { font-size: var(--fs-135); color: var(--muted); }
.submit-bar .summary strong { color: var(--ink); font-weight: 600; }
.submit-bar .actions { margin-left: auto; display: flex; gap: 8px; }

/* -----------------------------------------------------------
   File uploader (§ 10.5)
   ----------------------------------------------------------- */
.uploader      {
  border: 1.5px dashed var(--line); border-radius: var(--r-6);
  padding: 28px 20px; background: var(--bg); text-align: center;
  transition: all var(--dur-2); cursor: pointer;
}
.uploader:hover, .uploader.is-drag { border-color: var(--primary); background: var(--primary-50); }
.uploader-ic   {
  width: 40px; height: 40px; border-radius: var(--r-6);
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; margin: 0 auto 10px;
  color: var(--primary);
}
.uploader-ic i { font-size: 19px; }
.uploader-title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.uploader-sub  { font-size: 13px; color: var(--muted); margin-top: 4px; }
.uploader-pick { color: var(--primary); font-weight: 600; }

.file-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.file-row      {
  display: grid;
  grid-template-columns: 36px 1fr 220px 28px;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-5);
  background: #fff;
}
.file-row.is-clickable { cursor: pointer; transition: background var(--dur-1); }
.file-row.is-clickable:hover { background: var(--bg); }
.file-ic       {
  width: 36px; height: 36px; border-radius: var(--r-4);
  background: var(--primary-50); color: var(--primary);
  display: grid; place-items: center; flex: 0 0 auto;
}
.file-ic i     { font-size: 17px; }
.file-meta     { min-width: 0; }
.file-name     {
  font-size: var(--fs-135); font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-size     {
  font-size: 12px; color: var(--soft); margin-top: 1px;
  font-feature-settings: "tnum";
}
.file-progress {
  height: 3px; background: var(--line); border-radius: var(--r-pill);
  margin-top: 6px; overflow: hidden;
}
.file-progress > span { display: block; height: 100%; background: var(--success);
                        transition: width var(--dur-5) var(--ease); }
.file-x        {
  background: transparent; border: 0; color: var(--soft); cursor: pointer;
  width: 28px; height: 28px; border-radius: var(--r-3);
  font-family: inherit;
}
.file-x:hover  { background: var(--bg); color: var(--error); }

/* file-row variant with extra "uploaded by" column for ViewClientOrderStatus */
.file-row--detail {
  grid-template-columns: 36px 1fr 220px 200px 28px;
}

/* -----------------------------------------------------------
   Document group accordion (§ 10.8) — used by ViewClientOrderStatus
   ----------------------------------------------------------- */
.doc-group { border: 1px solid var(--line-2); border-radius: var(--r-5); overflow: hidden; }
.doc-group + .doc-group { margin-top: 8px; }
.doc-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--bg);
  border: 0; width: 100%; text-align: left;
  cursor: pointer; font-family: inherit;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-1);
}
.doc-group-head:hover { background: var(--line-2); }
.doc-group.is-open .doc-group-head { border-bottom-color: var(--line-2); }
.doc-group-head .folder-ic {
  width: 24px; height: 24px; border-radius: var(--r-3);
  background: var(--primary-50); color: var(--primary);
  display: grid; place-items: center; flex: 0 0 auto;
}
.doc-group-head .name {
  font-size: var(--fs-135); font-weight: 600; color: var(--ink); flex: 1;
}
.doc-group-head .count {
  font-size: var(--fs-12); color: var(--muted);
  background: #fff; padding: 1px 7px; border-radius: 8px; font-weight: 600;
  font-feature-settings: "tnum"; border: 1px solid var(--line);
}
.doc-group-head .chev { color: var(--soft); transition: transform var(--dur-2); }
.doc-group.is-open .doc-group-head .chev { transform: rotate(90deg); }
.doc-group-body {
  padding: 10px 14px; display: none; flex-direction: column; gap: 8px;
}
.doc-group.is-open .doc-group-body { display: flex; }
.doc-group-body .file-row { background: #fff; }

/* -----------------------------------------------------------
   Code block (§ 10.6) — used by ApiDocumentation
   ----------------------------------------------------------- */
.code-block {
  position: relative; border: 1px solid var(--line);
  border-radius: var(--r-5); overflow: hidden; margin-bottom: 12px;
  background: #fff;
}
.code-block-head {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); padding: 6px 12px;
  border-bottom: 1px solid var(--line-2);
}
.code-block-lang {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
}
.code-block-copy {
  margin-left: auto; background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 3px 9px;
  font-size: 12px; color: var(--ink-2); cursor: pointer; font-family: inherit;
  transition: all var(--dur-1);
}
.code-block-copy:hover { background: #fff; border-color: var(--ink-2); }
.code-block pre {
  margin: 0; padding: 14px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55;
  color: var(--ink-2); background: #fff;
}
.code-block code { font-family: inherit; font-size: inherit; color: inherit; }

/* -----------------------------------------------------------
   Callout (§ 10.7) — debug zones, info/warning notes
   ----------------------------------------------------------- */
.callout {
  border-radius: var(--r-6); padding: 16px 18px;
  border: 2px dashed var(--line); margin: 14px 0;
}
.callout-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.callout-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-3);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.callout--debug {
  border-color: var(--warning-dark);
  background: repeating-linear-gradient(
    45deg,
    rgba(202,138,4,.025), rgba(202,138,4,.025) 12px,
    transparent 12px, transparent 24px
  );
}
.callout--debug .callout-chip { background: var(--warning-dark); color: #fff; }
.callout--info {
  border-style: solid; border-color: var(--primary);
  background: var(--primary-50);
}
.callout--info .callout-chip { background: var(--primary); color: #fff; }

/* -----------------------------------------------------------
   HTTP method badge (used by ApiDocumentation)
   ----------------------------------------------------------- */
.method-badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-3);
  font-weight: 700; font-size: 12px; color: #fff; margin-right: 8px;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.method-badge.method-get   { background: var(--method-get); }
.method-badge.method-post  { background: var(--method-post); }
.method-badge.method-patch { background: var(--method-patch); }
.method-badge.method-debug { background: var(--method-debug); }

.endpoint-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); padding: 10px 14px;
  border-radius: var(--r-4); margin-bottom: 14px;
  border: 1px solid var(--line-2);
}
.endpoint-path {
  font-family: var(--font-mono); font-size: var(--fs-14); font-weight: 600;
  color: var(--ink);
}

/* -----------------------------------------------------------
   Form-validation reskin (§ 11.3) — Blazor's <ValidationMessage>
   ----------------------------------------------------------- */
.validation-message {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--error); margin-top: 2px;
}

/* Segmented radio (§ 11.6) */
.seg {
  display: inline-flex; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-5);
  padding: 3px; gap: 2px; width: 100%;
}
.seg label {
  flex: 1; text-align: center; padding: 6px 10px;
  border-radius: var(--r-3); font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: all var(--dur-1);
}
.seg input { display: none; }
.seg label:hover { color: var(--ink); }
.seg input:checked + label, .seg label.is-on {
  background: #fff; color: var(--ink); box-shadow: var(--shadow-1);
}
.seg.seg--error { box-shadow: 0 0 0 2px rgba(239,68,68,.35); }

/* -----------------------------------------------------------
   Live indicator pill (small dot + label)
   ----------------------------------------------------------- */
.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: var(--gray-soft); color: #4b5563;
  font-size: 12px; font-weight: 600;
}
.live-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
}

/* -----------------------------------------------------------
   Data states (§ 13)
   ----------------------------------------------------------- */
/* Skeleton */
.sk {
  display: inline-block; height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, var(--line) 0%, var(--line-2) 50%, var(--line) 100%);
  background-size: 200% 100%;
  animation: tk-shimmer 1.4s ease-in-out infinite;
}
.sk-text  { width: 80%; }
.sk-pill  { width: 64px; height: 18px; border-radius: var(--r-pill); }
.sk-block { display: block; height: 14px; border-radius: 6px; }
.sk-card  { display: block; width: 100%; height: 90px; border-radius: var(--r-6); }
.sk-row   { display: block; width: 100%; height: 48px; border-radius: var(--r-4); }
.sk-circle{ display: inline-block; border-radius: 50%; width: 24px; height: 24px; }

@keyframes tk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spinner (full-page loading) */
.state-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 56px 20px; color: var(--muted); font-size: var(--fs-135);
}
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--line); border-top-color: var(--primary);
  border-radius: 50%; animation: tk-spin 0.7s linear infinite;
}
@keyframes tk-spin { to { transform: rotate(360deg); } }

/* Empty state */
.state-empty        { padding: 56px 20px; text-align: center; }
.state-empty-ic     {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); color: var(--muted);
  display: grid; place-items: center; margin: 0 auto 14px;
}
.state-empty-ic i   { font-size: 19px; }
.state-empty-title  { font-size: var(--fs-15); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.state-empty-sub    { font-size: 13.5px; color: var(--muted); }
.state-empty-actions{ margin-top: 14px; display: flex; gap: 8px; justify-content: center; }

/* Error state */
.state-error        { padding: 56px 20px; text-align: center; }
.state-error-ic     {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--error-soft); color: var(--error);
  display: grid; place-items: center; margin: 0 auto 14px;
}
.state-error-ic i   { font-size: 22px; }
.state-error-title  { font-size: var(--fs-15); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.state-error-sub    { font-size: 13.5px; color: var(--muted); max-width: 360px; margin: 0 auto; }
.state-error-actions{ margin-top: 14px; display: flex; gap: 8px; justify-content: center; }

/* Success state (inline within forms) */
.state-success {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r-4);
  background: var(--success-soft); color: #0a9558;
  font-size: var(--fs-135); font-weight: 600;
}
.state-success i { font-size: 15px; }

/* Inline alert (replaces RadzenAlert) */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-5);
  font-size: var(--fs-135); border: 1px solid var(--line);
  background: #fff;
}
.alert i { font-size: 17px; flex: 0 0 auto; margin-top: 1px; }
.alert--error   { background: var(--error-soft);   border-color: rgba(239,68,68,.2); color: var(--error); }
.alert--success { background: var(--success-soft); border-color: rgba(15,169,104,.2); color: #0a9558; }
.alert--warning { background: var(--warning-soft); border-color: rgba(234,179,8,.2);  color: var(--warning-dark); }
.alert--info    { background: var(--primary-50);   border-color: rgba(1,30,92,.15);   color: var(--primary); }

/* -----------------------------------------------------------
   Pop animation (§ 5)
   ----------------------------------------------------------- */
@keyframes tk-pop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.tk-pop { animation: tk-pop .28s ease both; }

/* -----------------------------------------------------------
   Inline alert — replaces RadzenAlert. Used for compact,
   in-page status messages (server errors on pre-auth, save
   feedback on admin CRUD). Distinct from .state-error /
   .state-empty (which are full empty-data blocks). Add with
   one of the modifier classes; never bare .alert.
   ----------------------------------------------------------- */
.alert {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-5);
  font-size: var(--fs-135); border: 1px solid;
  line-height: var(--lh-snug);
}
.alert i { flex: 0 0 auto; font-size: 15px; margin-top: 1px; }
.alert > .alert-body { flex: 1; min-width: 0; }
.alert .alert-title { font-weight: 700; }
.alert--error   { background: var(--error-soft);   color: var(--error);       border-color: rgba(239,68,68,.25); }
.alert--info    { background: var(--primary-50);   color: var(--primary);     border-color: rgba(1,30,92,.15); }
.alert--warning { background: var(--warning-soft); color: var(--warning-dark);border-color: rgba(202,138,4,.25); }
.alert--success { background: var(--success-soft); color: #0a9558;            border-color: rgba(15,169,104,.25); }

/* Text-link button — for button-like inline links inside auth /
   admin chrome (e.g. "Forgot password?"). Doesn't carry the
   button chrome but is keyboard-focusable and follows .btn focus rules. */
.text-link {
  background: transparent; border: 0; padding: 0;
  color: var(--primary); font-weight: 600; font-size: var(--fs-135);
  cursor: pointer; font-family: inherit;
}
.text-link:hover { text-decoration: underline; }
.text-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-2); }

/* -----------------------------------------------------------
   Auth shell — pre-auth pages (Login, ResetPassword as dialog,
   SecurityCode, RegisterApplicationUser as dialog, Unauthorized).
   Used by Components/Layout/LoginLayout.razor. The shell is
   purpose-built for unauthenticated surfaces and intentionally
   different from the .app sidebar+topbar shell — there is no
   sidebar, the page is centered, and the brand is rendered as
   a vertical lockup above the auth card.
   ----------------------------------------------------------- */
.auth-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 50% -200px, rgba(1,30,92,0.06), transparent 60%);
}
.auth-stack {
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column; align-items: stretch; gap: 24px;
}
.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 0;
}
.auth-brand-img { width: 88px; height: 88px; object-fit: contain; }
.auth-brand-name {
  font-size: 26px; font-weight: 700; color: var(--ink);
  letter-spacing: var(--tracking-title);
}
.auth-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-7); padding: 36px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: var(--shadow-2);
}
.auth-title {
  font-size: 19px; font-weight: 700; color: var(--ink);
  margin: 0; letter-spacing: -0.01em;
}
.auth-sub { font-size: var(--fs-145); color: var(--muted); margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
.auth-actions .btn { justify-content: center; }
.auth-foot {
  text-align: center; font-size: var(--fs-135); color: var(--muted);
}
.auth-foot a { color: var(--primary); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }
.auth-link-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 13px;
}
.auth-link-row a { color: var(--primary); font-weight: 600; text-decoration: none; }
.auth-link-row a:hover { text-decoration: underline; }

/* Dialog-form variant: when ResetPassword / RegisterApplicationUser
   render INSIDE a Radzen dialog (DialogService.OpenAsync), they don't
   want the auth-shell chrome — just the form. .auth-form-stack groups
   the fields + the right-aligned action row. */
.auth-form-stack {
  display: flex; flex-direction: column; gap: 12px; min-width: 360px;
}
.auth-form-stack .form-row-end {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px;
}

/* SecurityCode: reskin RadzenSecurityCode boxes via radzen-overrides;
   here we just provide the centered grouping wrapper. */
.auth-code-row {
  display: flex; justify-content: center; padding: 4px 0 8px;
}

/* -----------------------------------------------------------
   Title Agent portal shell — pages that use EmptyLayout
   (TitleAgent dashboard, TitleAgent order page). External
   agent surfaces don't share the FS staff sidebar; they get
   a self-contained brand topbar instead.
   ----------------------------------------------------------- */
.portal-shell {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg);
}
.portal-topbar {
  height: var(--layout-topbar); padding: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: stretch;
}
/* Inner row — reuses .portal-content so the topbar's elements align
   column-for-column with the body content underneath (Bootstrap-container
   style). No vertical padding; the bar's own height controls that. */
.portal-topbar > .portal-content {
  padding-top: 0; padding-bottom: 0;
  display: flex; align-items: center; gap: 16px;
  flex: 1;
}
.portal-brand { display: flex; align-items: center; gap: 10px; }
.portal-brand .brand-text {
  display: flex; flex-direction: column; line-height: var(--lh-tight);
}
.portal-brand .brand-name {
  font-size: var(--fs-15); font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}
.portal-brand .brand-tag {
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--soft); margin-top: 1px;
}
.portal-user {
  margin-left: auto;
  display: inline-flex; flex-direction: column; align-items: flex-end;
  line-height: 1.2; text-align: right; min-width: 0;
}
.portal-user .name {
  color: var(--ink); font-weight: 600; font-size: var(--fs-135);
  max-width: 240px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.portal-user .meta {
  color: var(--muted); font-size: 12px;
  max-width: 240px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 720px) { .portal-user { display: none; } }
.portal-actions { display: flex; align-items: center; gap: 8px; }
.portal-content {
  width: 100%; max-width: 920px; margin: 0 auto;
  padding: var(--layout-content-pad-y) var(--layout-content-pad-x) 40px;
  flex: 1;
}
.portal-content--wide { max-width: 1180px; }

/* Chat-style message thread (used in TitleAgent order page).
   Two alignments — incoming (left, neutral) and outgoing (right, primary tint). */
.msg-thread {
  display: flex; flex-direction: column; gap: var(--sp-4);
  max-height: 360px; overflow-y: auto; padding: 4px;
}
.msg-row { display: flex; }
.msg-row--out { justify-content: flex-end; }
.msg-bubble {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: var(--r-6);
  font-size: var(--fs-135); color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line-2);
  line-height: var(--lh-snug);
}
.msg-row--out .msg-bubble {
  background: var(--primary-50); border-color: rgba(1,30,92,.10);
}
.msg-meta {
  font-size: 11px; color: var(--soft); margin-bottom: 3px;
  font-feature-settings: "tnum";
}
.msg-bubble strong.msg-author { color: var(--ink); font-weight: 600; }

/* -----------------------------------------------------------
   Focus rings (§ 14.2)
   ----------------------------------------------------------- */
.btn:focus-visible,
.icon-btn:focus-visible,
.nav-item:focus-visible,
.chip:focus-visible,
.row-icon-btn:focus-visible,
.tab:focus-visible,
.profile-trigger:focus-visible,
.profile-item:focus-visible,
.cl-item:focus-visible,
.page-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* -----------------------------------------------------------
   Reduced motion (§ 5 — mandatory)
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* -----------------------------------------------------------
   Multi-party messaging (§ 10.11 .chat-pane, § 10.12 .msg)
   New cross-page primitives for the conversation surface.
   ----------------------------------------------------------- */

/* Chat pane shell — works in three host contexts:
     1. Drawer body (flex parent): fills via flex: 1; height: 100%
     2. Inline tab content (no explicit height): falls back to min/max height
     3. Inline pane sibling (fixed-width column): fills via height: 100%
   The grid uses grid-template-rows: 1fr so the conversation viewport stretches
   vertically rather than collapsing to its (empty initial) content height. */
.chat-pane {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 1fr;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-6); overflow: hidden;
  min-height: 480px;
  max-height: calc(100vh - 160px);
  height: 100%;
  width: 100%;
  flex: 1 1 auto;
}
.chat-pane--stacked { grid-template-columns: 1fr; }
.chat-pane--solo    { grid-template-columns: 1fr; }
/* In both stacked and solo modes the side list collapses — solo shows nothing,
   stacked uses the inline conversation switcher in the chat head instead.
   Without this the side list would stack ABOVE the viewport in the single
   column and look wrong. */
.chat-pane--stacked .chat-list,
.chat-pane--solo    .chat-list { display: none; }
/* When hosted inside a drawer-body the drawer itself supplies the height —
   drop the min-height so a short viewport doesn't push the composer off-screen. */
.drawer-body > .chat-pane { min-height: 0; max-height: none; }

.chat-list {
  border-right: 1px solid var(--line-2);
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); overflow: hidden;
}
.chat-list-head {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: var(--sp-3);
  flex-shrink: 0;
  background: var(--card);
}
.chat-list-head .input { font-size: var(--fs-125); padding: var(--sp-3) var(--sp-4); }
.chat-list-search { flex: 1; min-width: 0; }
/* Make the rows the scrollable region so the search input stays pinned. */
.chat-list > .chat-list-item:first-of-type,
.chat-list > .chat-list-scroll { flex: 1 1 auto; }
.chat-list-empty {
  padding: var(--sp-12) var(--sp-8);
  color: var(--soft); font-size: var(--fs-125);
  text-align: center;
}

.chat-list-item {
  /* Reset native <button> chrome so the row blends into the design system. */
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: left;
  width: 100%;

  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7) var(--sp-6) var(--sp-6);
  cursor: pointer;
  position: relative;
  transition: background var(--dur-1) var(--ease);
}
/* Subtle hairline between rows, with the first row flush against the list head. */
.chat-list-item + .chat-list-item { box-shadow: inset 0 1px 0 var(--line-2); }
.chat-list-item:hover { background: var(--bg); }
.chat-list-item.is-active { background: var(--primary-50); }
/* Left accent stripe on the active row — design-system pattern for vertical
   list selection (mirrors .nav-item.is-active). The pseudo-element keeps the
   inset-shadow hairlines above clean. */
.chat-list-item.is-active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--primary); border-radius: 0 2px 2px 0;
}
.chat-list-item-body { min-width: 0; flex: 1; }
.chat-list-item-row { display: flex; align-items: baseline; gap: var(--sp-3); }
.chat-list-item-name {
  font-size: var(--fs-135); font-weight: 500; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.chat-list-item.is-active .chat-list-item-name { color: var(--primary); font-weight: 600; }
.chat-list-item.has-unread .chat-list-item-name { font-weight: 700; color: var(--ink); }
.chat-list-item-time {
  font-size: 11px; color: var(--soft);
  font-feature-settings: "tnum"; flex-shrink: 0;
}
.chat-list-item.is-active .chat-list-item-time { color: var(--primary); }
.chat-list-item-preview {
  font-size: var(--fs-125); color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-list-item.is-observer .chat-list-item-name { color: var(--muted); font-weight: 500; }
.chat-list-item-observer-ic { color: var(--soft); margin-right: var(--sp-2); }
/* Trailing unread badge — tightens to the row end so the row reads cleanly. */
.chat-list-item > .badge { flex-shrink: 0; align-self: center; }
/* Focus-visible ring — uses an inset version so it doesn't get cropped by the
   list's overflow: hidden. */
.chat-list-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primary);
}

/* Chat viewport — flex column so the message body can take all remaining space
   between the header and the composer footer. */
.chat-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: var(--card); overflow: hidden; }
.chat-head {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8); border-bottom: 1px solid var(--line-2);
  background: var(--card);
}
.chat-head-titles { min-width: 0; flex: 1; }
.chat-head-title { font-size: var(--fs-145); font-weight: 600; color: var(--ink); }
.chat-head-sub { font-size: var(--fs-125); color: var(--muted); }
.chat-head-actions { display: flex; gap: var(--sp-2); align-items: center; }
.chat-head-avatars { display: inline-flex; }
.chat-head-avatars .avatar { margin-left: -10px; border: 2px solid var(--card); }
.chat-head-avatars .avatar:first-child { margin-left: 0; }
/* Stacked / solo-mode conversation switcher — replaces the title block when the
   side list is hidden and there's more than one conversation to choose from. */
.chat-head-switcher { flex: 1; min-width: 0; max-width: 320px; font-weight: 600; }

.chat-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--sp-6) var(--sp-8); background: var(--bg);
  display: flex; flex-direction: column; gap: var(--sp-4);
}

.chat-composer {
  padding: var(--sp-6) var(--sp-8); border-top: 1px solid var(--line-2);
  background: var(--card); display: flex; flex-direction: column; gap: var(--sp-3);
}
.chat-composer-attachments { display: flex; flex-direction: column; gap: var(--sp-2); }
.chat-composer-actions { display: flex; align-items: center; gap: var(--sp-3); }
.chat-composer-actions > .input { flex: 1; resize: vertical; min-height: 38px; max-height: 160px; }
.chat-composer-spacer { flex: 1; }
.chat-composer-observer {
  padding: var(--sp-4) var(--sp-8); font-size: var(--fs-125); color: var(--muted);
  background: var(--bg); border-top: 1px solid var(--line-2); text-align: center;
}

/* Message bubble (replaces .msg-bubble for the new system) */
.msg {
  display: flex; gap: var(--sp-4); align-items: flex-start;
}
.msg--out { flex-direction: row-reverse; }
.msg-avatar { flex-shrink: 0; }
.msg--out .msg-avatar { display: none; }
.msg-stack { display: flex; flex-direction: column; max-width: min(560px, 80%); gap: var(--sp-1); }
.msg--out .msg-stack { align-items: flex-end; }
.msg-meta-line {
  font-size: 11px; color: var(--soft);
  font-feature-settings: "tnum"; display: inline-flex; gap: var(--sp-3); align-items: baseline;
}
.msg-author { color: var(--ink); font-weight: 600; }
.msg-time {}
.msg-edited { font-style: italic; }
/* Hat caption — small muted tag (e.g. "FundingShield", "Lender", "Title Agent")
   shown after the time so any participant can tell which party the speaker
   represents in a multi-party conversation. Uses --muted (a notch above the
   timestamp's --soft) and a leading dot so it reads as a separate field. */
.msg-party {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.msg-party::before { content: "·"; margin-right: var(--sp-2); color: var(--soft); }

/* ── Chat rail collapse strip ───────────────────────────────────────────
   Thin vertical button shown when a persistent chat rail is collapsed.
   Click to re-expand. Lives next to the main content column on lender +
   FS edit pages. Full button reset to neutralize browser defaults
   (background, border, font, padding). */
.chat-rail-strip {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: inherit; color: var(--ink-2);
  cursor: pointer;
  width: 44px;
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4);
  padding: 14px 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-6);
  box-shadow: var(--shadow-1);
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}
.chat-rail-strip:hover {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary);
}
.chat-rail-strip:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primary);
}
.chat-rail-strip-ic { font-size: 18px; line-height: 1; }
.chat-rail-strip-count {
  font-size: var(--fs-11); font-weight: 700;
  min-width: 18px; padding: 0 5px; line-height: 16px;
  border-radius: 999px;
  background: var(--primary); color: #fff;
  text-align: center;
}
.chat-rail-strip-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-top: auto;
  font-size: var(--fs-125);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
.chat-rail-strip:hover .chat-rail-strip-label { color: var(--primary); }

/* Collapse handle floated on the inside-left edge of an expanded rail.
   Click to re-collapse to the strip. Uses .icon-btn so it picks up the
   standard styling, but is absolutely positioned by its parent. */
.chat-rail-collapse-handle {
  position: absolute;
  top: 10px;
  left: -14px;
  z-index: 2;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

/* ── Loading skeletons (mirror the .sk shimmer system in §13) ─────────────
   Used while GetConversationsForOrderAsync / GetMessagesAsync are in flight.
   The shapes match the real markup they replace so there is no layout jump
   when the data lands. */
.chat-list-sk-row {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-7) var(--sp-6) var(--sp-6);
}
.chat-list-sk-row + .chat-list-sk-row { box-shadow: inset 0 1px 0 var(--line-2); }
.chat-list-sk-name    { height: 12px; }
.chat-list-sk-preview { height: 10px; opacity: 0.7; }

.chat-body-sk {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-6); width: 100%;
}
.msg--sk { opacity: 0.85; }
.msg--sk .msg-body-sk { height: 36px; border-radius: var(--r-6); display: block; max-width: 100%; }
.msg-body {
  padding: var(--sp-5) var(--sp-7);
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-6); color: var(--ink-2);
  font-size: var(--fs-14); line-height: var(--lh-snug);
  white-space: pre-wrap; word-break: break-word;
}
.msg--out .msg-body {
  background: var(--primary-50);
  border-color: rgba(1,30,92,.10);
}
.msg--same-author .msg-meta-line { display: none; }

.msg-attach {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-4); cursor: pointer;
  font-size: var(--fs-125); color: var(--ink-2); text-decoration: none;
  transition: border-color var(--dur-1) var(--ease);
}
.msg-attach:hover { border-color: var(--primary); }
.msg-attach-name { font-weight: 500; }
.msg-attach-type { color: var(--soft); font-size: 11px; margin-left: var(--sp-2); }

.msg-actions {
  display: none; gap: var(--sp-1); margin-top: var(--sp-1);
}
.msg:hover .msg-actions { display: inline-flex; }
.msg--out .msg-actions { justify-content: flex-end; }

.msg--tombstone .msg-body {
  background: transparent; border: 1px dashed var(--line-2);
  font-style: italic; color: var(--soft);
}
.msg--pending .msg-body { opacity: 0.6; }
.msg--failed .msg-body { border-left: 2px solid var(--error); }

/* System events (joined / left / attachment-added) — centered single-line, no bubble */
.msg--system {
  justify-content: center;
}
.msg--system .msg-body {
  background: transparent; border: none; padding: var(--sp-2) 0;
  font-size: var(--fs-12); color: var(--soft);
  text-align: center; display: inline-flex; align-items: center; gap: var(--sp-2);
}
.msg--system .msg-avatar,
.msg--system .msg-meta-line,
.msg--system .msg-actions { display: none; }

/* Read receipts beneath outgoing bubbles */
.msg-receipts {
  font-size: 11px; color: var(--soft); margin-top: 2px;
  font-feature-settings: "tnum";
}

/* Presence dot on avatars */
.avatar-with-presence { position: relative; }
.chat-presence {
  position: absolute; bottom: 0; right: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--card);
}

/* Avatar count chip (+N in stacked avatars) */
.avatar.avatar--count {
  background: var(--bg); color: var(--ink-2);
  font-size: 11px; font-weight: 600;
}

/* Unread count chip on icon buttons (extends the .nav-item .count recipe) */
.icon-btn { position: relative; }
.icon-btn .count {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: var(--r-pill);
  font-feature-settings: "tnum";
  border: 2px solid var(--card);
}

/* Connection state indicator (extends .live-pill with an amber variant) */
.live-pill--warn::before { background: var(--warning); }

/* Drawer-over-drawer modifier — used when a document viewer needs to overlay
   the messages drawer on ViewClientOrderStatus. Bumps z-index to 52.
   Documented in § 4.4 of DESIGN.md. */
.drawer.drawer--over-drawer { z-index: 52; }