/* ============================================================================
   Javne nabavke — Registri i šifarnici (državni). PBI #5575.
   Master-detail registry page. Outer chrome reuses the shipped cc-* atoms
   (redesign-competences.css); the rail / detail / scope badges / read-only
   banner / modal use the reg-* and regm-* atoms ported from the HTML mock.
   Fonts come from the app tokens: --is-font-sans (Inter), --is-font-mono
   (JetBrains Mono) for codes / numbers / rates.
   ============================================================================ */

.reg-page { --reg-purple: #7b51d8; }

/* The shared .cc-screen centres content (max-width:1680px; margin:0 auto). Like
   peskills-v2 / projectstatuses-v2, this page wants the left-aligned, full-width
   treatment so it hugs the nav. Page-scoped — the shared .cc-screen is untouched. */
.cc-screen.reg-page { max-width: none; margin: 0; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.reg-layout { display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .reg-layout { grid-template-columns: 1fr; } }

/* ── Rail ───────────────────────────────────────────────────────────────── */
.reg-rail {
    position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px;
    background: var(--is-bg-surface, #fff); border: 1px solid var(--is-border-1, #e2e7ee);
    border-radius: var(--is-radius-md, 12px); box-shadow: var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.06)); padding: 14px;
}
@media (max-width: 900px) { .reg-rail { position: static; } }

.reg-railgroup { display: flex; flex-direction: column; gap: 3px; }
.reg-railgroup__head {
    display: flex; align-items: center; gap: 7px; padding: 2px 6px 8px;
    font: 700 10.5px var(--is-font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--is-fg-3, #6c757d);
}
.reg-railgroup__head i { font-size: 11px; color: var(--is-fg-muted, #99a2ad); }
.reg-railgroup__badge { margin-left: auto; font: 700 9px var(--is-font-sans); text-transform: none; letter-spacing: 0; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.reg-railgroup__badge--edit { color: var(--is-brand-blue-700, #0273a8); background: var(--is-brand-blue-100, #e3f2fb); border: 1px solid #cfe4f4; }
.reg-railgroup__badge--lock { color: #7a5a00; background: var(--is-warning-bg, #fdf6e3); border: 1px solid #f0d77a; }

.reg-railitem {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    padding: 8px 10px; border: 1px solid transparent; border-radius: var(--is-radius-sm, 8px); background: transparent;
    transition: background .12s, border-color .12s;
}
.reg-railitem:hover { background: var(--is-bg-surface-2, #f6f8fb); }
.reg-railitem.is-active { background: var(--is-brand-blue-100, #e3f2fb); border-color: #cfe4f4; }
.reg-railitem__icon { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; flex: none; }
.reg-railitem__icon--state { background: #f0eafc; color: var(--reg-purple); }
.reg-railitem__icon--ref { background: #f0eafc; color: var(--reg-purple); }
.reg-railitem__name { font: 600 12.5px var(--is-font-sans); color: var(--is-fg-1, #141c32); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-railitem.is-active .reg-railitem__name { color: var(--is-brand-blue-700, #0273a8); font-weight: 700; }
.reg-railitem__lock { font-size: 9px; color: var(--is-fg-muted, #99a2ad); flex: none; margin-left: auto; }

.reg-railnote {
    display: flex; gap: 8px; padding: 10px 11px; margin-top: 2px;
    border-radius: var(--is-radius-sm, 8px); background: var(--is-bg-surface-2, #f6f8fb); border: 1px solid var(--is-border-1, #e2e7ee);
    font: 500 11px/1.5 var(--is-font-sans); color: var(--is-fg-3, #6c757d);
}
.reg-railnote i { color: var(--is-fg-muted, #99a2ad); margin-top: 1px; flex: none; font-size: 11px; }
.reg-railnote b { color: var(--is-fg-2, #43505f); font-weight: 700; }

/* ── Detail ─────────────────────────────────────────────────────────────── */
.reg-detail { background: var(--is-bg-surface, #fff); border: 1px solid var(--is-border-1, #e2e7ee); border-radius: var(--is-radius-md, 12px); box-shadow: var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.06)); min-width: 0; overflow: hidden; }

.reg-dhead { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px; border-bottom: 1px solid var(--is-border-1, #e2e7ee); }
.reg-dhead__icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex: none; }
.reg-dhead__icon--state { background: #f0eafc; color: var(--reg-purple); border: 1px solid #ddd0f2; }
.reg-dhead__icon--ref { background: #f0eafc; color: var(--reg-purple); border: 1px solid #ddd0f2; }
.reg-dhead__txt { min-width: 0; flex: 1; }
.reg-dhead__titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reg-dhead__txt h2 { margin: 0; font: 700 17px var(--is-font-sans); color: var(--is-fg-1, #141c32); }
.reg-dhead__txt p { margin: 3px 0 0; font: 500 12.5px/1.5 var(--is-font-sans); color: var(--is-fg-3, #6c757d); }

.reg-scope { display: inline-flex; align-items: center; gap: 5px; font: 700 10px var(--is-font-sans); text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.reg-scope i { font-size: 9px; }
.reg-scope--state { color: #5c1a73; background: #efe6f5; border: 1px solid #d9c5e5; }
.reg-scope--state.is-locked { color: #7a5a00; background: var(--is-warning-bg, #fdf6e3); border-color: #f0d77a; }
.reg-scope--ref { color: var(--is-fg-2, #43505f); background: var(--is-bg-surface-3, #eef2f6); border: 1px solid var(--is-border-2, #dbe1e9); }

/* Company registries ("Kompanijski registri") — blue scope, per NabavkeRegistri mock (PBI #5591) */
.reg-railitem__icon--company { background: var(--is-brand-blue-100, #e3f2fb); color: var(--is-brand-blue-700, #0273a8); }
.reg-railitem.is-active .reg-railitem__icon--company { background: #fff; }
.reg-dhead__icon--company { background: var(--is-brand-blue-100, #e3f2fb); color: var(--is-brand-blue-700, #0273a8); border: 1px solid #cfe4f4; }
.reg-scope--company { color: var(--is-brand-blue-700, #0273a8); background: var(--is-brand-blue-100, #e3f2fb); border: 1px solid #cfe4f4; }

/* Read-only / reference banner */
.reg-ro {
    display: flex; align-items: flex-start; gap: 9px; margin: 14px 18px 0; padding: 10px 13px;
    border-radius: var(--is-radius-sm, 8px); background: var(--is-warning-bg, #fdf6e3); border: 1px solid #f0d77a;
    font: 500 12px/1.5 var(--is-font-sans); color: #6b5200;
}
.reg-ro i { color: #b88a00; margin-top: 2px; flex: none; font-size: 12px; }
.reg-ro b { font-weight: 700; }

/* Toolbar */
.reg-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; flex-wrap: wrap; }
.reg-search { max-width: 340px; flex: 1; min-width: 200px; position: relative; }
.reg-search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; cursor: pointer; color: var(--is-fg-muted, #99a2ad); padding: 4px; }
.reg-search__clear:hover { color: var(--is-fg-1, #141c32); }
.reg-toolbar__meta { font: 500 12px var(--is-font-sans); color: var(--is-fg-3, #6c757d); white-space: nowrap; }
.reg-toolbar__meta b { font-weight: 700; color: var(--is-fg-1, #141c32); font-family: var(--is-font-mono); }
.reg-toolbar__spacer { flex: 1; }
.reg-robtn { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--is-font-sans); color: var(--is-fg-3, #6c757d); padding: 0 12px; height: 36px; border-radius: var(--is-radius-sm, 8px); background: var(--is-bg-surface-3, #eef2f6); border: 1px solid var(--is-border-1, #e2e7ee); }
.reg-robtn i { font-size: 11px; color: var(--is-fg-muted, #99a2ad); }

/* Table */
.reg-tablewrap { border-top: 1px solid var(--is-border-1, #e2e7ee); overflow-x: auto; }
/* Full width so the gray header band extends to the right edge of the card
   (otherwise the table shrinks to content and the header stops at the last column). */
.reg-table { width: 100%; min-width: 100%; table-layout: auto; }
.reg-table th.reg-th-center, .reg-table td.reg-td-center { text-align: center; }
.reg-table th.reg-th-mono { white-space: nowrap; }
.reg-mono { font-family: var(--is-font-mono); font-size: 12.5px; color: var(--is-fg-1, #141c32); }
.reg-num { font: 600 12.5px var(--is-font-mono); color: var(--is-fg-1, #141c32); font-variant-numeric: tabular-nums; }

/* Row action icon button — identical to the V2 .ct-iconbtn (ContractTypeListV2). */
.reg-iconbtn {
    width: 30px; height: 30px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--is-fg-2, #43505f);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    padding: 0;
    transition: background .12s, color .12s, border-color .12s;
}
.reg-iconbtn:hover {
    background: var(--is-bg-surface-3, #f1f3f5);
    color: var(--is-fg-1, #0c111c);
    border-color: var(--is-border-1, #e6e8eb);
}
.reg-iconbtn.is-edit:hover {
    background: rgba(4,148,218,.10);
    color: var(--is-brand-blue, #0494da);
    border-color: rgba(4,148,218,.25);
}
.reg-iconbtn.is-danger { color: var(--is-danger, #d92c2c); }
.reg-iconbtn.is-danger:hover {
    background: rgba(217,44,44,.10);
    color: var(--is-danger, #d92c2c);
    border-color: rgba(217,44,44,.25);
}

/* Empty state */
.reg-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 20px; text-align: center; }
.reg-empty__icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--is-bg-surface-3, #eef2f6); color: var(--is-fg-muted, #99a2ad); }
.reg-empty h3 { margin: 4px 0 0; font: 700 15px var(--is-font-sans); color: var(--is-fg-1, #141c32); }
.reg-empty p { margin: 0; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-3, #6c757d); }

/* Pager extras */
.reg-pager { padding: 12px 18px; }
.reg-pager__right { display: inline-flex; align-items: center; gap: 16px; margin-left: auto; }

/* ── Add / edit modal (.regm-*) ─────────────────────────────────────────── */
.regm-scrim { position: fixed; inset: 0; z-index: 10040; background: rgba(12,17,28,.46); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 48px; overflow-y: auto; animation: regm-fade .14s ease; }
@keyframes regm-fade { from { opacity: 0; } to { opacity: 1; } }
.regm {
    width: 100%; max-width: 560px; background: var(--is-bg-surface, #fff); border-radius: var(--is-radius-lg, 14px);
    box-shadow: 0 24px 60px rgba(12,17,28,.32); display: flex; flex-direction: column; overflow: hidden;
    font-family: var(--is-font-sans); animation: regm-rise .16s cubic-bezier(.2,.7,.3,1);
}
@keyframes regm-rise { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.regm__head { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px; border-bottom: 1px solid var(--is-border-1, #e2e7ee); }
.regm__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; flex: none; background: #f0eafc; color: var(--reg-purple); border: 1px solid #ddd0f2; }
.regm__htext { flex: 1; min-width: 0; }
.regm__htext h2 { margin: 0; font: 700 16px var(--is-font-sans); color: var(--is-fg-1, #141c32); }
.regm__htext p { margin: 3px 0 0; font: 500 12px var(--is-font-sans); color: var(--is-fg-3, #6c757d); }
.regm__close { background: transparent; border: 0; cursor: pointer; color: var(--is-fg-3, #6c757d); font-size: 16px; width: 30px; height: 30px; border-radius: 7px; flex: none; display: grid; place-items: center; }
.regm__close:hover { background: var(--is-bg-surface-3, #eef2f6); color: var(--is-fg-1, #141c32); }

.regm__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.regm-banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: var(--is-radius-sm, 8px); background: var(--is-warning-bg, #fdf6e3); border: 1px solid #f0d77a; font: 500 12px/1.5 var(--is-font-sans); color: #6b5200; }
.regm-banner i { color: #b88a00; margin-top: 2px; flex: none; font-size: 12px; }
.regm-banner b { font-weight: 700; }

.regm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
@media (max-width: 560px) { .regm-grid { grid-template-columns: 1fr; } }
.regm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.regm-field--full { grid-column: 1 / -1; }
.regm-label { font: 600 12px var(--is-font-sans); color: var(--is-fg-2, #43505f); display: inline-flex; align-items: center; gap: 5px; }
.regm-req { color: var(--is-danger, #d92c2c); font-weight: 700; }
.regm-err { font: 600 11.5px var(--is-font-sans); color: var(--is-danger, #d92c2c); display: inline-flex; align-items: center; gap: 5px; }
.regm-err i { font-size: 10px; }

.regm-input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--is-border-3, #d0d6df); border-radius: var(--is-radius-sm, 8px); background: #fff; font: 500 13px var(--is-font-sans); color: var(--is-fg-1, #141c32); }
.regm-input:focus { outline: none; border-color: var(--is-action-blue, #007bff); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.regm-input.is-error { border-color: var(--is-danger, #d92c2c); box-shadow: 0 0 0 3px rgba(217,44,44,.12); }
.regm-mono-in { font-family: var(--is-font-mono); font-variant-numeric: tabular-nums; }

.regm__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--is-border-1, #e2e7ee); background: var(--is-bg-surface-2, #f6f8fb); flex-wrap: wrap; }
.regm__foothint { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3, #6c757d); display: inline-flex; align-items: center; gap: 6px; }
.regm__foothint i { color: var(--is-fg-muted, #99a2ad); font-size: 11px; }
.regm__footact { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.regm-cancel { background: transparent; border: 0; cursor: pointer; font: 600 13px var(--is-font-sans); color: var(--is-fg-3, #6c757d); padding: 8px 10px; }
.regm-cancel:hover { color: var(--is-fg-1, #141c32); text-decoration: underline; }

/* ── Description cell + Status badge (new register columns) ──────────────── */
/* Description: free-text note; keep it from blowing out the row width. */
.reg-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 420px; font: 500 12.5px/1.45 var(--is-font-sans); color: var(--is-fg-2, #43505f); }

/* Status pill — green "active", gray "inactive". */
.reg-status { display: inline-flex; align-items: center; font: 700 10.5px var(--is-font-sans); padding: 3px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: .2px; }
.reg-status--on { color: var(--is-success-700, #1b7a43); background: var(--is-success-bg, #e6f5ec); border: 1px solid #b9e3c8; }
.reg-status--off { color: var(--is-fg-3, #6c757d); background: var(--is-bg-surface-3, #eef2f6); border: 1px solid var(--is-border-1, #e2e7ee); }

/* ── Colour swatch cell (PlanItemStatus) ────────────────────────────────── */
.reg-colorcell { display: inline-flex; align-items: center; gap: 7px; }
.reg-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.18); flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

/* ── Modal: textarea + status checkbox ──────────────────────────────────── */
.regm-textarea { height: auto; min-height: 76px; padding: 9px 12px; line-height: 1.5; resize: vertical; font: 500 13px/1.5 var(--is-font-sans); }
.regm-check { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; font: 600 13px var(--is-font-sans); color: var(--is-fg-1, #141c32); cursor: pointer; user-select: none; white-space: nowrap; }
.regm-check input { margin: 0; flex: 0 0 auto; }
.regm-check span { white-space: nowrap; }

/* ── Modal: colour picker (PlanItemStatus) ──────────────────────────────── */
.regm-colorpick { display: flex; align-items: center; gap: 8px; }
.regm-colorpick .regm-colorinput { width: 42px; height: 38px; padding: 2px; border: 1px solid var(--is-border-1, #e2e7ee); border-radius: 8px; background: #fff; cursor: pointer; flex: 0 0 auto; }
.regm-colorpick .regm-input { flex: 1 1 auto; }