/* ============================================================
   InSync365 — CRM / Lookups registry kit
   Namespace prefix: reg-
   Shared chrome + form atoms for every "crm/lookups/*" šifranik.
   Source spec: Claude Documentation/PBI #5612 .../crm-lookups.css
   First consumer: LineOfBusinessV2 (/crm/lookups/lineofbusiness-v2).
   Tokens (--is-*) come from colors_and_type.css.
   ============================================================ */

/* ── Tab strip (Segmenti / Materijali za obuku) ─────────── */
.reg-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--is-border-1); }
.reg-tab { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; font: 600 13px var(--is-font-sans); color: var(--is-fg-3); border: 0; background: transparent; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reg-tab:hover { color: var(--is-fg-1); }
.reg-tab.is-on { color: var(--is-brand-blue-700); border-bottom-color: var(--is-brand-blue); }
.reg-tab i { font-size: 12px; }

/* ── Page shell ─────────────────────────────────────────── */
.reg-screen { background: var(--is-bg-app); padding: 22px 28px 40px; border-radius: 10px; max-width: 1680px; margin: 0 auto; }
.reg-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.reg-pagehead__crumb { display: flex; gap: 6px; align-items: center; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); margin-bottom: 4px; }
.reg-pagehead__crumb i { font-size: 9px; }
.reg-pagehead h1 { font: 700 26px/1.15 var(--is-font-sans); letter-spacing: -.01em; margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reg-pagehead__sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.reg-pagehead__sub-text { font: 500 13px var(--is-font-sans); color: var(--is-fg-3); max-width: 760px; }
.reg-pagehead__sub-text b { color: var(--is-fg-1); font-weight: 700; }
.reg-pagehead__actions { display: flex; gap: 8px; align-items: center; }

/* ── Version-new chip + load-duration chip + back-to-classic link (V2 chrome) ── */
.reg-vchip--new { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); font: 700 10px var(--is-font-sans); letter-spacing: .06em; text-transform: uppercase; border: 1px solid #b9dcef; }
.reg-loadchip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--is-bg-surface-3); color: var(--is-fg-3); font: 500 11px var(--is-font-mono); }
.reg-loadchip i { font-size: 10px; }
.reg-loadchip b { color: var(--is-fg-1); font-weight: 700; }
.reg-loadchip__sep { color: var(--is-fg-3); }
.reg-vlink { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--is-border-3); background: #fff; color: var(--is-fg-2); font: 500 12px var(--is-font-sans); cursor: pointer; transition: background .12s, color .12s; }
.reg-vlink:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.reg-vlink i { font-size: 10px; }

/* ── Buttons ────────────────────────────────────────────── */
.reg-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--is-radius-sm); border: 1px solid transparent; font: 600 13px var(--is-font-sans); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.reg-btn i { font-size: 12px; }
.reg-btn--primary { background: var(--is-brand-blue); color: #fff; border-color: var(--is-brand-blue); }
.reg-btn--primary:hover { background: var(--is-brand-blue-700); border-color: var(--is-brand-blue-700); }
.reg-btn--ghost { background: #fff; color: var(--is-fg-2); border-color: var(--is-border-3); }
.reg-btn--ghost:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.reg-btn--danger { background: var(--is-danger); color: #fff; border-color: var(--is-danger); }
.reg-btn--danger:hover { background: #b51e1e; border-color: #b51e1e; }
.reg-btn--lg { height: 40px; padding: 0 18px; font-size: 13.5px; }
.reg-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Filter bar ─────────────────────────────────────────── */
.reg-filterbar { background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); padding: 10px 12px; margin-bottom: 10px; }
.reg-filterbar__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reg-search { position: relative; flex: 1 1 360px; min-width: 240px; }
.reg-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--is-fg-3); font-size: 13px; }
.reg-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 400 13.5px var(--is-font-sans); color: var(--is-fg-1); }
.reg-search input:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.reg-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-3); background: #fff; font: 600 12.5px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; white-space: nowrap; }
.reg-pill:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.reg-pill.is-on { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border-color: #b9dcef; }
.reg-pill__chev { font-size: 9px; color: var(--is-fg-3); }
.reg-pill__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--is-brand-blue); color: #fff; font: 700 10px var(--is-font-sans); }

/* ── Table card ─────────────────────────────────────────── */
.reg-tablecard { background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); overflow: clip; }
.reg-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--is-border-1); font: 500 12px var(--is-font-sans); color: var(--is-fg-3); gap: 16px; flex-wrap: wrap; }
.reg-toolbar b { color: var(--is-fg-1); font-weight: 700; }
.reg-toolbar__left { display: flex; align-items: center; gap: 10px; }
.reg-toolbar__right { display: flex; align-items: center; gap: 10px; }
.reg-pagesize { display: inline-flex; align-items: center; gap: 6px; }
.reg-pagesize select { height: 28px; padding: 0 24px 0 8px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm); background: #fff; font: 600 12px var(--is-font-sans); color: var(--is-fg-1); appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%2376767E' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 6px center; }

table.reg-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.reg-table thead th { background: var(--is-bg-surface-3); font: 600 10.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--is-border-1); white-space: nowrap; }
.reg-table thead th .reg-th { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.reg-table thead th .reg-th i { font-size: 9px; opacity: 0; color: var(--is-fg-3); }
.reg-table thead th .reg-th:hover i { opacity: .5; }
.reg-table thead th .reg-th.is-sorted i { opacity: 1; color: var(--is-action-blue); }
.reg-table tbody tr { transition: background .12s; }
.reg-table tbody tr:hover { background: rgba(0,123,255,.04); }
.reg-table tbody tr + tr td { border-top: 1px solid var(--is-border-1); }
.reg-table tbody td { padding: 12px 14px; vertical-align: middle; font: 500 13px var(--is-font-sans); color: var(--is-fg-1); overflow: hidden; }
.reg-table tbody td > * { min-width: 0; max-width: 100%; }
.reg-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; display: block; }
.reg-muted { color: var(--is-fg-3); }

/* Primary name cell (icon + title + optional meta) */
.reg-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.reg-name__icon { width: 32px; height: 32px; border-radius: 8px; background: var(--is-brand-blue-100); color: var(--is-brand-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.reg-name__icon--success  { background: rgba(38,176,80,.10);  color: var(--is-success); }
.reg-name__icon--warning  { background: rgba(230,167,0,.16);  color: #b08000; }
.reg-name__icon--purple   { background: rgba(111,62,176,.12); color: #6f3eb0; }
.reg-name__icon--danger   { background: rgba(217,44,44,.10);  color: var(--is-danger); }
.reg-name__icon--brand    { background: rgba(4,148,218,.10);  color: var(--is-brand-blue); }
.reg-name__icon--neutral  { background: var(--is-bg-surface-3); color: var(--is-fg-3); }
.reg-name__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.reg-name__title { font: 600 13.5px var(--is-font-sans); color: var(--is-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-name__meta { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.reg-name__meta i { font-size: 9px; opacity: .7; }

/* Mono numeric chip (order number / count) */
.reg-num { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 6px; font: 700 12px var(--is-font-mono); font-variant-numeric: tabular-nums; background: var(--is-bg-surface-3); color: var(--is-fg-1); border: 1px solid var(--is-border-2); }
.reg-num--ghost { background: transparent; border-style: dashed; color: var(--is-fg-3); }

/* Usage count cell: "287 klijenata" / "0" */
.reg-count { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--is-font-sans); color: var(--is-fg-1); }
.reg-count__n { font: 700 13px var(--is-font-mono); font-variant-numeric: tabular-nums; }
.reg-count__unit { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3); }
.reg-count.is-zero { color: var(--is-fg-3); }
.reg-count.is-zero .reg-count__n { color: var(--is-fg-3); }

/* Color swatch cell (status colors) */
.reg-swatch { display: inline-flex; align-items: center; gap: 8px; }
.reg-swatch__chip { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(20,28,50,.18); box-shadow: inset 0 0 0 2px #fff; flex-shrink: 0; }
.reg-swatch__hex { font: 600 11.5px var(--is-font-mono); color: var(--is-fg-3); text-transform: uppercase; }

/* Status pill rendered in the registry's own color */
.reg-statuspill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12px var(--is-font-sans); white-space: nowrap; }
.reg-statuspill__dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }

/* Active / final boolean badge */
.reg-bool { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font: 700 10.5px var(--is-font-sans); letter-spacing: .04em; text-transform: uppercase; }
.reg-bool--yes { background: rgba(38,176,80,.10); color: var(--is-success); border: 1px solid rgba(38,176,80,.25); }
.reg-bool--no  { background: var(--is-bg-surface-3); color: var(--is-fg-3); border: 1px solid var(--is-border-2); }

/* Description preview (rich text -> plain) */
.reg-desc { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.reg-desc.is-empty { color: var(--is-fg-muted); font-style: italic; }

/* Link / url cell */
.reg-link { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--is-font-sans); color: var(--is-link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-link i { font-size: 11px; color: var(--is-danger); }
.reg-link--none { color: var(--is-fg-muted); }

/* Row actions */
.reg-actions { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }
.reg-iconbtn { width: 30px; height: 30px; border-radius: var(--is-radius-sm); border: 1px solid transparent; background: transparent; color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: background .12s, color .12s, border-color .12s; }
.reg-iconbtn:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-1); }
.reg-iconbtn.is-edit:hover   { background: rgba(4,148,218,.10); color: var(--is-brand-blue); border-color: rgba(4,148,218,.25); }
.reg-iconbtn.is-danger:hover { background: rgba(217,44,44,.08); color: var(--is-danger); border-color: rgba(217,44,44,.20); }
.reg-iconbtn:disabled { opacity: .35; cursor: not-allowed; }

/* Pager */
.reg-pager { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-top: 1px solid var(--is-border-1); gap: 16px; flex-wrap: wrap; }
.reg-pager__info { font: 500 12px var(--is-font-sans); color: var(--is-fg-3); }
.reg-pager__info b { color: var(--is-fg-1); font-weight: 700; }
.reg-pager__pages { display: inline-flex; gap: 4px; align-items: center; }
.reg-pager__ellipsis { font: 600 12px var(--is-font-sans); color: var(--is-fg-3); padding: 0 4px; }
.reg-pager button { height: 30px; min-width: 30px; padding: 0 9px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-2); background: #fff; font: 600 12px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.reg-pager button:hover:not(:disabled):not(.is-active) { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.reg-pager button.is-active { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; }
.reg-pager button:disabled { opacity: .35; cursor: not-allowed; }

/* Empty state */
.reg-empty { text-align: center; padding: 56px 24px; }
.reg-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--is-brand-blue-100); color: var(--is-brand-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; }
.reg-empty h3 { font: 700 16px var(--is-font-sans); margin: 0 0 6px; color: var(--is-fg-1); }
.reg-empty p { font: 500 13px var(--is-font-sans); color: var(--is-fg-3); margin: 0 auto 16px; max-width: 420px; line-height: 1.5; }

/* ── Popup chrome ───────────────────────────────────────── */
/* Fixed full-screen overlay that hosts a reg-pop modal in the app (the mock's
   reg-pop-scrim is absolute within the showcase stage; this is the shipped one). */
.reg-modal-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(20,28,50,.50); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.reg-pop-scrim { position: absolute; inset: 0; background: rgba(20,28,50,.50); backdrop-filter: blur(2px); border-radius: 14px; }
.reg-pop { position: relative; background: #fff; border-radius: var(--is-radius-lg); box-shadow: 0 20px 60px rgba(8,12,36,.30); display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; max-width: 95vw; margin: 0 auto; }
.reg-pop--sm { width: 480px; }
.reg-pop--md { width: 560px; }
.reg-pop--lg { width: 720px; }
.reg-pop--xl { width: 920px; }
.reg-pop__head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--is-border-1); background: var(--is-bg-surface); flex-shrink: 0; }
.reg-pop__head-icon { width: 36px; height: 36px; border-radius: var(--is-radius-sm); background: var(--is-brand-blue-100); color: var(--is-brand-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.reg-pop__head-icon--danger { background: var(--is-danger-bg); color: var(--is-danger); }
.reg-pop__head-title { flex: 1; min-width: 0; }
.reg-pop__head-title h2 { font: 700 17px var(--is-font-sans); margin: 0; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-pop__head-title p { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-3); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-pop__head-close { width: 32px; height: 32px; border-radius: var(--is-radius-sm); border: 1px solid transparent; background: transparent; color: var(--is-fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: background .12s, color .12s; flex-shrink: 0; }
.reg-pop__head-close:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.reg-pop__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; }
.reg-pop__body--tight { padding: 18px 22px; }
.reg-pop__foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface); flex-shrink: 0; }
.reg-pop__foot-left { flex: 1; min-width: 0; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); display: flex; align-items: center; gap: 6px; }
.reg-pop__foot-left b { color: var(--is-fg-1); font-weight: 700; }
.reg-pop__foot-right { display: flex; gap: 10px; flex-shrink: 0; }

/* ── Form atoms ─────────────────────────────────────────── */
.reg-section-label { font: 600 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.reg-section-label i { font-size: 10px; color: var(--is-fg-3); }
.reg-section-label::after { content: ''; flex: 1; height: 1px; background: var(--is-border-1); }
.reg-section-label:first-child { margin-top: 0; }

.reg-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.reg-field__label { font: 600 11.5px var(--is-font-sans); color: var(--is-fg-2); display: flex; align-items: center; gap: 4px; }
.reg-field__label .req { color: var(--is-danger); }
.reg-field__label i.help { font-size: 10px; color: var(--is-fg-3); margin-left: 2px; }
.reg-field__hint { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.reg-field__hint i { font-size: 10px; }
.reg-field__hint--err { color: var(--is-danger); }

.reg-input, .reg-select, .reg-textarea { padding: 0 12px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 500 13.5px var(--is-font-sans); color: var(--is-fg-1); width: 100%; }
.reg-input, .reg-select { height: 36px; }
.reg-textarea { min-height: 80px; padding: 9px 12px; line-height: 1.5; resize: vertical; }
.reg-input:focus, .reg-select:focus, .reg-textarea:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.reg-input--num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--is-font-mono); font-weight: 600; }
.reg-input::placeholder, .reg-textarea::placeholder { color: var(--is-fg-muted); }
.reg-select { padding-right: 28px; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%2376767E' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }

.reg-grid { display: grid; gap: 12px 14px; }
.reg-grid--2 { grid-template-columns: 1fr 1fr; }
.reg-grid--2-1 { grid-template-columns: 2fr 1fr; }
.reg-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ── Toggle row (iOS-style switch, green track ON) ──────── */
.reg-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-sm); }
.reg-toggle-row__body { min-width: 0; }
.reg-toggle-row__title { font: 600 13px var(--is-font-sans); color: var(--is-fg-1); display: flex; align-items: center; gap: 6px; }
.reg-toggle-row__hint { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3); margin-top: 2px; }
.reg-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.reg-switch input { opacity: 0; width: 0; height: 0; }
.reg-switch__track { position: absolute; inset: 0; background: var(--is-border-2); border-radius: 999px; transition: background .15s; cursor: pointer; }
.reg-switch__track::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 999px; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.20); }
.reg-switch input:checked + .reg-switch__track { background: var(--is-brand-blue); }
.reg-switch input:checked + .reg-switch__track::before { transform: translateX(16px); }

/* ── Inline row editing (Add / Edit happen in the grid) ──
   ClientSource, ClientStatus, LineOfBusiness, InvoiceStatus,
   QuoteStatus keep their inline-edit UX — the row turns into
   inputs in place. Delete routes through the shared
   ConfirmDeleteDialog (cdd-*), never an inline form. */
.reg-table tbody tr.reg-row--edit td,
.reg-table tbody tr.reg-row--new td { background: rgba(4,148,218,.055); }
.reg-table tbody tr.reg-row--edit td:first-child { box-shadow: inset 3px 0 0 var(--is-brand-blue); }
.reg-table tbody tr.reg-row--new td:first-child { box-shadow: inset 3px 0 0 var(--is-brand-blue); }
.reg-table tbody tr.reg-row--new td { border-top-color: transparent; }
.reg-table tbody tr.reg-row--edit:hover td,
.reg-table tbody tr.reg-row--new:hover td { background: rgba(4,148,218,.055); }

.reg-cellinput, .reg-cellselect { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 500 13px var(--is-font-sans); color: var(--is-fg-1); }
.reg-cellinput:focus, .reg-cellselect:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.reg-cellinput::placeholder { color: var(--is-fg-muted); }
.reg-cellinput--num { text-align: right; font-family: var(--is-font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.reg-cellselect { padding-right: 26px; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%2376767E' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; }

/* Inline color picker — compact swatch row inside a cell */
.reg-cellcolor { display: inline-flex; align-items: center; gap: 5px; }
.reg-cellcolor__sw { width: 22px; height: 22px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 2px #fff; position: relative; }
.reg-cellcolor__sw.is-on { border-color: var(--is-fg-1); }
.reg-cellcolor__sw.is-on::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 8px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* Inline final/active checkbox */
.reg-cellcheck { width: 18px; height: 18px; accent-color: var(--is-action-blue); cursor: pointer; }

/* Inline save / cancel icon buttons (reuse reg-iconbtn base) */
.reg-iconbtn.is-save { color: var(--is-success); }
.reg-iconbtn.is-save:hover { background: rgba(38,176,80,.10); color: var(--is-success); border-color: rgba(38,176,80,.25); }
.reg-iconbtn.is-cancel:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-2); }

/* Inline save / cancel variants for the config-registries cr-iconbtn base
   (cr- kit only ships is-edit / is-danger / is-success). Lets the CRM lookup
   grids use cr-iconbtn for every row action with the same green/neutral tint
   the mock shows on the inline save/cancel buttons. */
/* Save = always-green check icon + green hover tint (matches the mock's
   reg-iconbtn.is-save). !important guards against the app's global button/icon
   colour rules that would otherwise grey the icon at rest. */
.cr-iconbtn.is-save,
.cr-iconbtn.is-save i { color: var(--is-success) !important; }
.cr-iconbtn.is-save:hover { background: rgba(38,176,80,.10) !important; border-color: rgba(38,176,80,.25) !important; }
.cr-iconbtn.is-cancel:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-2); }

/* "+ add row" inline affordance under the table */
.reg-addrow { width: 100%; height: 42px; padding: 0 14px; border: 0; border-top: 1px dashed var(--is-border-2); background: transparent; font: 600 13px var(--is-font-sans); color: var(--is-brand-blue); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background .12s, color .12s; }
.reg-addrow:hover:not(:disabled) { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); }
.reg-addrow:disabled { opacity: .5; cursor: not-allowed; }