/* WAVE-1a (+follow-up v3) — Clients / Suppliers role-directory pages.
   Emerald Glass tokens only — no new framework. RTL-safe: spacing uses
   logical properties wherever direction matters. */

/* ------------------------------------------------------------- banner */
.rd-banner { display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.rd-banner-t { min-width:220px; }
.rd-banner-a { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rd-banner-a select { padding:7px 10px; border:1px solid var(--p-line-strong,#d6deea);
  border-radius:10px; font-size:12.5px; background:var(--p-card,#fff);
  color:var(--p-ink,#0f172a); font-weight:700; }
.rd-live { font-size:12px; font-weight:800; color:var(--p-muted,#64748b);
  background:rgba(13,148,136,.09); border-radius:999px; padding:3px 10px;
  vertical-align:3px; margin-inline-start:8px; white-space:nowrap; }

/* ------------------------------------------------- stat cards (chips) */
/* WAVE-1b polish: chips grew into small KPI cards (owner request,
   inspired by the legacy employee page) — accent bar, bigger number,
   gentle lift on hover. Still the same clickable quick-filters. */
.rd-stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.rd-chip { position:relative; overflow:hidden; display:flex; flex-direction:column;
  align-items:flex-start; gap:2px; border:1px solid var(--p-line-strong,#d6deea);
  background:var(--p-card,#fff);   /* fallback when color-mix is missing */
  background:linear-gradient(180deg, var(--p-card,#fff),
    color-mix(in srgb, var(--p-card,#fff) 96%, #0d9488));
  border-radius:14px; padding:12px 18px 11px; cursor:pointer; min-width:110px;
  transition:border-color .15s, box-shadow .15s, transform .15s; }
.rd-chip::before { content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(90deg, #0d9488, #10b981); opacity:0;
  transition:opacity .15s; }
.rd-chip:hover { border-color:#0d9488; transform:translateY(-1px);
  box-shadow:0 8px 20px -14px rgba(13,148,136,.55); }
.rd-chip:hover::before { opacity:.6; }
.rd-chip:focus-visible { outline:2px solid #0d9488; outline-offset:2px; }
.rd-chip.on { border-color:#0d9488; box-shadow:0 0 0 1.5px rgba(13,148,136,.35),
  0 8px 20px -14px rgba(13,148,136,.55); background:rgba(13,148,136,.06); }
.rd-chip.on::before { opacity:1; }
.rd-chip .n { font-size:20px; font-weight:850; color:var(--p-ink,#0f172a);
  font-variant-numeric:tabular-nums; line-height:1.15; }
.rd-chip .l { font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--p-muted,#64748b); }
/* read-only sibling of .rd-chip — a figure that is not a filter */
.rd-stat { display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  border:1px solid var(--p-line-strong,#d6deea); background:var(--p-card,#fff);
  border-radius:14px; padding:12px 18px 11px; min-width:110px; }
.rd-stat .v { font-size:20px; font-weight:850; color:var(--p-ink,#0f172a);
  font-variant-numeric:tabular-nums; line-height:1.15; }
.rd-stat .l { font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--p-muted,#64748b); }

/* ------------------------------------------------------------ toolbar */
.toolbar-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.toolbar-row .spacer { flex:1; }
.toolbar-row select, .toolbar-row input[type=search] {
  padding:7px 10px; border:1px solid var(--p-line-strong,#d6deea); border-radius:10px;
  font-size:12.5px; background:var(--p-card,#fff); color:var(--p-ink,#0f172a); }

/* -------------------------------------------------------------- table */
table.co { width:100%; border-collapse:collapse; font-size:13px; }
table.co th { text-align:start; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--p-muted,#64748b); padding:8px 10px; border-bottom:1px solid var(--p-line,#e8edf3);
  white-space:nowrap; }
table.co td { padding:10px; border-bottom:1px solid var(--p-line,#e8edf3); vertical-align:middle; }
table.co tbody tr { cursor:pointer; }
table.co tbody tr:hover td { background:rgba(16,185,129,.05); }
table.co tbody tr:focus-visible { outline:2px solid #0d9488; outline-offset:-2px; }
.pcode { font-weight:800; font-family:ui-monospace,monospace; font-size:12px; white-space:nowrap;
  background:rgba(15,23,42,.045); border-radius:6px; padding:2px 6px; }
.rd-name b { font-size:13.5px; }
.rd-name .mut { display:block; margin-top:1px; }
.rd-contact .mut { display:block; }
.mut { color:var(--p-muted,#64748b); font-size:12px; }
.mut.dim { opacity:.6; }
.rd-own { font-size:11px; font-weight:700; background:rgba(37,99,235,.09); color:#2563eb;
  border-radius:999px; padding:2px 9px; white-space:nowrap; }
.rd-own.un { background:rgba(100,116,139,.10); color:var(--p-muted,#64748b); font-weight:600; }

.badge { font-size:9.5px; font-weight:800; letter-spacing:.04em; padding:2px 7px;
  border-radius:999px; text-transform:uppercase; white-space:nowrap; }
.badge.st-ACTIVE { background:rgba(13,148,136,.13); color:#0d9488; }
.badge.st-INACTIVE { background:rgba(100,116,139,.13); color:#475569; }
.badge.st-ARCHIVED { background:rgba(217,119,6,.13); color:#b45309; }
.badge.internal { background:rgba(15,23,42,.85); color:#f8fafc; }
.badge.scope { background:rgba(37,99,235,.11); color:#2563eb; }

/* ---------------------------------------------------------- skeletons */
.rd-skel { padding:4px 0; }
.rd-skel-row { display:flex; gap:12px; padding:13px 10px;
  border-bottom:1px solid var(--p-line,#e8edf3); }
.rd-skel-row span { height:13px; border-radius:6px;
  background:linear-gradient(90deg, rgba(100,116,139,.12) 25%,
    rgba(100,116,139,.05) 50%, rgba(100,116,139,.12) 75%);
  background-size:200% 100%; animation:rdShimmer 1.1s infinite linear; }
@keyframes rdShimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* -------------------------------------------------------- empty/pager */
.empty-box { border:1.5px dashed var(--p-line-strong,#d6deea); border-radius:14px;
  padding:38px 20px; text-align:center; color:var(--p-muted,#64748b); }
.empty-box b { display:block; color:var(--p-ink,#0f172a); font-size:14.5px; margin-bottom:4px; }
.t-wrap { overflow-x:auto; }
.pager { display:flex; align-items:center; gap:10px; margin-top:12px; font-size:12.5px;
  color:var(--p-muted,#64748b); }
.pager .spacer { flex:1; }
.help-btn { border:1px solid var(--p-line-strong,#d6deea); background:var(--p-card,#fff);
  color:var(--p-muted,#64748b); border-radius:999px; font-size:11.5px; font-weight:800;
  padding:4px 11px; cursor:pointer; }
.help-btn:hover { color:#0d9488; border-color:#0d9488; }
.btn.sm { font-size:11.5px; padding:5px 12px; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

/* --------------------------------------------------------- column menu */
.rd-colmenu { position:absolute; top:calc(100% + 6px); inset-inline-end:0; z-index:60;
  background:var(--p-card,#fff); border:1px solid var(--p-line,#e8edf3);
  border-radius:12px; box-shadow:var(--p-shadow,0 10px 30px -12px rgba(15,23,42,.25));
  padding:8px 12px; display:flex; flex-direction:column; gap:5px; min-width:170px; }
.rd-colmenu label { display:flex; align-items:center; gap:8px; font-size:12.5px;
  color:var(--p-ink,#0f172a); cursor:pointer; white-space:nowrap; }

/* -------------------------------------------------------------- modal */
.pmodal-backdrop { position:fixed; inset:0; background:rgba(2,6,23,.52); display:flex;
  align-items:flex-start; justify-content:center; z-index:90; padding:4vh 14px;
  backdrop-filter:blur(2px); }
.pmodal { background:var(--p-card,#fff); color:var(--p-ink,#0f172a);
  border:1px solid var(--p-line,#e8edf3); border-radius:var(--p-radius,16px);
  width:min(720px,96vw); max-height:90vh; display:flex; flex-direction:column;
  box-shadow:var(--p-shadow,0 10px 30px -12px rgba(15,23,42,.25)); }
.pmodal-h { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--p-line,#e8edf3); font-weight:800;
  font-size:14.5px; }
.pmodal-h .x { cursor:pointer; color:var(--p-muted,#64748b); font-weight:800; font-size:16px;
  background:none; border:none; padding:2px 6px; }
.pmodal-b { padding:14px 18px; overflow-y:auto; flex:1; }
.pmodal-f { padding:12px 18px; border-top:1px solid var(--p-line,#e8edf3); display:flex;
  justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; }
.m-err { color:#dc2626; font-size:12.5px; font-weight:600; margin-inline-end:auto; display:none; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:719px) { .grid-2 { grid-template-columns:1fr; } }
.field label { display:block; font-size:11px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--p-muted,#64748b); margin-bottom:5px; }
.field input, .field select, .field textarea { width:100%; padding:8px 10px;
  border:1px solid var(--p-line-strong,#d6deea); border-radius:10px; font-size:13px;
  background:var(--p-card,#fff); color:var(--p-ink,#0f172a); box-sizing:border-box; }
.field input:disabled, .field select:disabled { opacity:.6; cursor:not-allowed; }
.co-check { display:flex; align-items:center; gap:8px; padding:6px 2px; font-size:13px; }

/* ------------------------------------------------------- detail drawer */
.drawer { position:fixed; top:0; inset-inline-end:0; bottom:0; width:min(460px,94vw);
  background:var(--p-card,#fff); border-inline-start:1px solid var(--p-line,#e8edf3);
  box-shadow:-18px 0 40px -20px rgba(15,23,42,.35); z-index:95; display:flex;
  flex-direction:column; }
.drawer-h { padding:14px 18px; border-bottom:1px solid var(--p-line,#e8edf3);
  display:flex; justify-content:space-between; align-items:center; font-weight:800; gap:10px; }
.drawer-b { padding:14px 18px; overflow-y:auto; flex:1; font-size:13px; }
.rd-sec { border:1px solid var(--p-line,#e8edf3); border-radius:13px;
  padding:12px 14px; margin-bottom:12px; }
.rd-sec-h { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--p-muted,#64748b); margin-bottom:9px; display:flex; align-items:center; gap:8px; }
.rd-sec-f { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:10px; }
.rd-ro { display:grid; grid-template-columns:92px 1fr; gap:6px 10px; font-size:12.5px;
  align-items:center; }
.rd-ro .k { color:var(--p-muted,#64748b); font-weight:700; }
.rd-ro .v { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rd-copy { border:1px solid var(--p-line-strong,#d6deea); background:var(--p-card,#fff);
  color:var(--p-muted,#64748b); border-radius:7px; font-size:11px; padding:1px 6px;
  cursor:pointer; }
.rd-copy:hover { color:#0d9488; border-color:#0d9488; }
.rd-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rd-grid .field:nth-child(5) { grid-column:1 / -1; }  /* address spans */
.rd-actions { display:flex; gap:8px; flex-wrap:wrap; }
.rd-actions .btn { text-decoration:none; }

/* --------------------------------------------------------- responsive */
@media (max-width:760px) {
  .rd-grid { grid-template-columns:1fr; }
  table.co.rd-table thead { display:none; }
  table.co.rd-table tbody tr { display:block; border:1px solid var(--p-line,#e8edf3);
    border-radius:13px; margin-bottom:10px; padding:6px 2px; }
  table.co.rd-table tbody td { display:flex; justify-content:space-between; gap:10px;
    border-bottom:none; padding:6px 12px; align-items:center; }
  table.co.rd-table tbody td::before { content:attr(data-label); font-size:10px;
    font-weight:800; letter-spacing:.05em; text-transform:uppercase;
    color:var(--p-muted,#64748b); }
}