/*!
 * ui_kit_block — kit.css : à la carte CSS touches (load only if you want them).
 * Harvested from Command/Hofman/Dashboard. Theme via --mhg-accent.
 */

/* Financial numbers in a Hebrew (RTL) document: equal-width digits + bidi isolation
   so an RTL run never reflows the number. Harvested from Command (used everywhere). */
.mhg-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* "Live / active" status dot — a pinging ring + a static center. */
.mhg-pulse-dot { position: relative; display: inline-block; width: 9px; height: 9px; }
.mhg-pulse-dot::before, .mhg-pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mhg-ok, #16a34a); }
.mhg-pulse-dot::after { animation: mhgPing 1.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes mhgPing { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
.mhg-pulse-dot.warn::before, .mhg-pulse-dot.warn::after { background: var(--mhg-warn, #d97706); }
.mhg-pulse-dot.danger::before, .mhg-pulse-dot.danger::after { background: var(--mhg-danger, #dc2626); }
.mhg-pulse-dot.idle::after { animation: none; }
.mhg-pulse-dot.idle::before { background: #cbd5e1; }

/* Gentle "this just updated" landing pulse for a live number (toggle the class to replay). */
.mhg-land { animation: mhgLand .4s ease-out; }
@keyframes mhgLand { from { opacity: .55; } to { opacity: 1; } }

/* Status / count pill. Quiet by default; tonal variants for meaning. */
.mhg-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 700 12px/1 "Segoe UI", Arial, sans-serif; background: #f1f5f9; color: #475569; }
.mhg-pill.ok { background: #dcfce7; color: #16a34a; } .mhg-pill.warn { background: #fef3c7; color: #b45309; }
.mhg-pill.danger { background: #fee2e2; color: #dc2626; } .mhg-pill.info { background: #e0edfb; color: #2563eb; }

/* Skeleton shimmer for loading placeholders. */
.mhg-skel { background: linear-gradient(90deg, #eef1f5 25%, #e2e8f0 37%, #eef1f5 63%); background-size: 400% 100%; border-radius: 8px; animation: mhgShimmer 1.4s ease infinite; }
@keyframes mhgShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Segmented control — a row of radio "chips" (no JS). Markup:
   <div class="mhg-seg">
     <label><input type="radio" name="sort" value="a" checked> שם</label>
     <label><input type="radio" name="sort" value="b"> חוב</label>
   </div>
   Add the `auto-submit` attribute behaviour in the host if you want change→submit. */
.mhg-seg { display: inline-flex; background: #f1f5f9; border-radius: 999px; padding: 3px; gap: 2px; }
.mhg-seg label { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border-radius: 999px; font: 600 13px/1 "Segoe UI", Arial, sans-serif; color: #475569; cursor: pointer; user-select: none; transition: background .15s, color .15s; }
.mhg-seg label input { position: absolute; opacity: 0; width: 0; height: 0; }
.mhg-seg label:hover { color: #1e293b; }
.mhg-seg label:has(input:checked) { background: #fff; color: var(--mhg-accent, #2E86C9); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.mhg-seg label:has(input:focus-visible) { outline: 2px solid var(--mhg-accent, #2E86C9); outline-offset: 1px; }