/* ============================================================
   Contract Types V2 — page-scoped styles on top of cc-* shell
   from redesign-competences.css (cc-screen, cc-pagehead, cc-filterbar,
   cc-tablecard, cc-toolbar, cc-pop chrome, cc-iconbtn, cc-btn,
   cc-pager, cc-chip, cc-chipstrip).

   Adds ct-* atoms:
     - Cell renderers: ct-name (icon + title), ct-date, ct-days,
       ct-vis, ct-by
     - Popup chrome: ct-pop-section, ct-pop-grid, ct-pop-field,
       ct-pop-input, ct-pop-select, ct-pop-seg, ct-pop-switch,
       ct-pop-toggle-row, ct-pop-multiselect
     - Approver row 4 states: ct-approver (.--new, .--delete,
       .__warn)
     - Empty state CTA: ct-empty card

   Reuse contract: copy these atoms into the next registry
   (radna mjesta, statusi, predlošci) by replacing only the
   row schema and popup form fields.
   ============================================================ */

/* ── Syncfusion DropDownList overlay inside cc-sf-pill ──────
   redesign-competences.css already overlays SfMultiSelect (.e-multiselect).
   This adds equivalent transparent-overlay rules for SfDropDownList so the
   single-select Visibility filter looks like the other V2 pills.            */
.cc-screen .cc-sf-pill .e-ddl,
.cc-screen .cc-sf-pill .e-ddl.e-input-group {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    opacity: 0; cursor: pointer !important;
}
.cc-screen .cc-sf-pill .e-ddl input.e-input,
.cc-screen .cc-sf-pill .e-ddl .e-input-group input.e-input {
    color: transparent !important; caret-color: transparent !important;
    background: transparent !important; cursor: pointer !important;
}
.cc-screen .cc-sf-pill .e-ddl .e-ddl-icon,
.cc-screen .cc-sf-pill .e-ddl .e-clear-icon { display: none !important; }

/* ── Filter bar trailing action group (Search + optional Clear) ──
   Desktop: inline pair next to the spacer; mobile media query below
   overrides to a full-width single-column grid. */
.ct-actionrow { display: inline-flex; gap: 8px; }

/* ── Cell: contract type name (icon + title) ─────────────── */
.ct-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ct-name__icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--is-brand-blue-100, rgba(4,148,218,.10));
    color: var(--is-brand-blue, #0494da);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
/* Variant accents — chosen per contract-type keyword in
   ContractTypeListV2Base.GetContractTypeIconInfo. Brand-blue is the default
   (no modifier class needed). */
.ct-name__icon--brand   { background: rgba(4,148,218,.10);  color: var(--is-brand-blue, #0494da); }
.ct-name__icon--success { background: rgba(38,176,80,.10);  color: var(--is-success, #26b050); }
.ct-name__icon--purple  { background: rgba(111,62,176,.12); color: #6f3eb0; }
.ct-name__icon--warning { background: rgba(230,167,0,.16);  color: #b08000; }
.ct-name__icon--danger  { background: rgba(217,44,44,.10);  color: var(--is-danger, #d92c2c); }
.ct-name__icon--neutral { background: rgba(143,150,160,.18); color: var(--is-fg-2, #43505f); }
/* Body column next to the icon — stacks title on top of the GroupIdentifier
   meta line. Must shrink so the title + meta both ellipsis when the column
   is narrow (table-layout: fixed enforces the cell width upstream). */
.ct-name__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 0;
}
.ct-name__title {
    font: 600 13.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-1, #0c111c);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
/* GMC-only meta line under the name — hashtag + GroupIdentifier value. The
   .is-empty modifier swaps to a yellow warning triangle + label so admins
   can spot un-configured contract types. */
.ct-name__meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 500 11.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #6b7384);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}
.ct-name__meta i { font-size: 10px; color: var(--is-fg-3, #6b7384); flex-shrink: 0; }
.ct-name__meta.is-empty { color: var(--is-warning, #d18000); }
.ct-name__meta.is-empty i { color: var(--is-warning, #d18000); }
/* Clickable name — visually identical to the HTML mock's plain
   .ct-name__title (dark, semibold, ellipsis on overflow). Clicking opens the
   edit modal, but the link styling is suppressed (no underline, no blue) so
   the column reads as a normal name. Cursor stays pointer to signal the
   click affordance and focus-visible adds a subtle outline for keyboard
   users. */
.ct-name__title--link {
    color: var(--is-fg-1, #0c111c);
    text-decoration: none;
    cursor: pointer;
    display: block;
}
.ct-name__title--link:hover {
    text-decoration: none;
    color: var(--is-fg-1, #0c111c);
}
.ct-name__title--link:focus-visible {
    outline: 2px solid var(--is-brand-blue, #0494da);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Cell: created date (mono) ───────────────────────────── */
.ct-date {
    font: 500 12.5px var(--is-font-mono, "JetBrains Mono", ui-monospace, monospace);
    color: var(--is-fg-2, #43505f);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Cell: created-by (avatar inicijali + ime) ──────────── */
.ct-by { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.ct-by__avatar {
    width: 24px; height: 24px; border-radius: 999px;
    background: var(--is-bg-surface-3, #f1f3f5);
    color: var(--is-fg-2, #43505f);
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 10px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    flex-shrink: 0; border: 1px solid var(--is-border-1, #e6e8eb);
}
.ct-by__name {
    font: 500 12.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-2, #43505f);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}

/* ── Cell: days-before pill (mono) ───────────────────────── */
.ct-days {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 9px; border-radius: 999px;
    font: 700 11.5px var(--is-font-mono, "JetBrains Mono", ui-monospace, monospace);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: var(--is-bg-surface-3, #f1f3f5);
    color: var(--is-fg-1, #0c111c);
    border: 1px solid var(--is-border-2, #d9dbde);
}
.ct-days i { font-size: 10px; color: var(--is-fg-3, #6b7384); }
.ct-days__unit {
    font: 600 10.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #6b7384);
    margin-left: 1px;
}
.ct-days--off {
    color: var(--is-fg-3, #6b7384);
    background: transparent;
    border-style: dashed;
}

/* ── Cell: yes/no counter pill (Brojač: Odvojen / Zajednički) ─ */
.ct-yn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 8px; border-radius: 999px;
    font: 700 10.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ct-yn--yes {
    background: rgba(38,176,80,.10);
    color: var(--is-success, #26b050);
    border: 1px solid rgba(38,176,80,.25);
}
.ct-yn--no {
    background: var(--is-bg-surface-3, #f1f3f5);
    color: var(--is-fg-3, #6b7384);
    border: 1px solid var(--is-border-2, #d9dbde);
}
.ct-yn i { font-size: 9px; }

/* ── Cell: approvers (stacked avatars + count) ───────────── */
.ct-appr { display: inline-flex; align-items: center; gap: 8px; }
.ct-appr__stack { display: inline-flex; }
.ct-appr__stack .ct-appr__a {
    width: 24px; height: 24px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font: 700 10px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--is-border-1, #e6e8eb);
}
.ct-appr__stack .ct-appr__a + .ct-appr__a { margin-left: -8px; }
.ct-appr__a--c1 { background: #0494da; }
.ct-appr__a--c2 { background: #26b050; }
.ct-appr__a--c3 { background: #d18000; }
.ct-appr__a--c4 { background: #6f3eb0; }
.ct-appr__more {
    width: 24px; height: 24px; border-radius: 999px;
    background: var(--is-bg-surface-3, #f1f3f5);
    color: var(--is-fg-2, #43505f);
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 9.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    margin-left: -8px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--is-border-1, #e6e8eb);
}
.ct-appr__count {
    font: 600 12px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-2, #43505f);
}
.ct-appr.is-empty {
    color: var(--is-fg-3, #6b7384);
    font: 500 12px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    display: inline-flex; align-items: center; gap: 6px;
}
.ct-appr.is-empty i { font-size: 11px; color: var(--is-warning, #d18000); }

/* ── Row action icon buttons (Edit / Delete) ─────────────
   Aligned 1:1 with the HTML mock: transparent base with no border,
   light surface hover, brand-blue tint for edit, danger tint for delete. */
.ct-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;
}
.ct-iconbtn:hover {
    background: var(--is-bg-surface-3, #f1f3f5);
    color: var(--is-fg-1, #0c111c);
    border-color: var(--is-border-1, #e6e8eb);
}
.ct-iconbtn.is-edit:hover {
    background: rgba(4,148,218,.10);
    color: var(--is-brand-blue, #0494da);
    border-color: rgba(4,148,218,.25);
}
.ct-iconbtn.is-danger:hover {
    background: rgba(217,44,44,.08);
    color: var(--is-danger, #d92c2c);
    border-color: rgba(217,44,44,.20);
}

/* ── Generic truncating text cell (table + card) ─────────
   Used for the "Predložak dokumenta" column — text-only, no icon, ellipsis on
   overflow with a tooltip via the surrounding `title` attribute. Matches the
   mock's .ct-trunc atom and the typography of regular table cells. */
.ct-trunc {
    display: block;
    font: 500 13px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-1, #0c111c);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}
.ct-trunc--empty {
    color: var(--is-fg-3, #6b7384);
    font-style: italic;
}

/* ── Top toolbar mini-pager (next to page-size selector) ─
   Smaller variant of .cc-pager__pages: same atom but compact 28px buttons
   so the toolbar stays on one row even with 5+ page numbers. The parent
   .cc-toolbar__right (from redesign-competences) already lays out children
   in a flex row with gap — no extra container styling needed here. */
.cc-pager__pages--mini { display: inline-flex; gap: 3px; align-items: center; }
.cc-pager__pages--mini button {
    height: 28px; min-width: 28px;
    padding: 0 7px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid var(--is-border-2, #d9dbde);
    background: #fff;
    font: 600 11.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-2, #43505f);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.cc-pager__pages--mini button:hover:not(:disabled):not(.is-active) {
    background: var(--is-bg-surface-3, #f1f3f5);
    color: var(--is-fg-1, #0c111c);
}
.cc-pager__pages--mini button.is-active {
    background: var(--is-brand-blue, #0494da);
    border-color: var(--is-brand-blue, #0494da);
    color: #fff;
}
.cc-pager__pages--mini button:disabled { opacity: .35; cursor: not-allowed; }
.cc-pager__pages--mini .cc-pager__ellipsis {
    color: var(--is-fg-3, #6b7384);
    font: 600 11.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    padding: 0 2px;
}

/* ── Cell: document template name ────────────────────────── */
/* Mirrors the .ct-name pattern (block-level flex with min-width:0). The icon
   is a non-shrinking flex item and __text is a shrinkable flex child that
   owns the overflow/ellipsis — text-overflow does not apply to a bare text
   node inside a flex container, so the wrapper span is required. */
.ct-template {
    font: 500 12.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-2, #43505f);
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
}
.ct-template__text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-template i { font-size: 11px; color: var(--is-fg-3, #6b7384); flex-shrink: 0; }
.ct-template.is-empty {
    color: var(--is-fg-3, #6b7384);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Cell: visibility chip ───────────────────────────────── */
.ct-vis {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 9px; border-radius: 6px;
    font: 600 11.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    white-space: nowrap;
}
.ct-vis--all {
    background: var(--is-brand-blue-100, rgba(4,148,218,.10));
    color: var(--is-brand-blue-700, #0273a8);
}
.ct-vis--some {
    background: rgba(230,167,0,.16);
    color: #7a5800;
}
.ct-vis i { font-size: 10px; }

/* ── Empty state card with CTA ───────────────────────────── */
.ct-empty {
    text-align: center;
    padding: 56px 24px;
}
.ct-empty__icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--is-brand-blue-100, rgba(4,148,218,.10));
    color: var(--is-brand-blue, #0494da);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}
.ct-empty h3 {
    font: 700 16px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    margin: 0 0 6px;
    color: var(--is-fg-1, #0c111c);
}
.ct-empty p {
    font: 500 13px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #6b7384);
    margin: 0 0 16px;
}

/* ── Popup centering override (matches cr-pop fix) ───────── */
.ct-pop {
    top: auto; left: auto; transform: none;
    inset: 0; margin: auto;
    height: fit-content;
}
.ct-pop--sm.cc-pop { max-width: 480px; width: 95vw; }

/* ── Popup head + footer — white background per HTML mock.
   Overrides .cc-pop__head's white→gray gradient and .cc-pop__foot's solid
   gray from redesign-competences.css so the dialog reads as a clean white
   surface end-to-end. The subtitle paragraph also gets restored layout. */
.ct-pop__head.cc-pop__head {
    background: #fff;
    padding: 16px 22px;
}
.ct-pop__head.cc-pop__head .cc-pop__head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ct-pop__head.cc-pop__head .cc-pop__head-text h2 {
    font: 700 17px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    margin: 0;
    letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-pop__head.cc-pop__head .cc-pop__head-sub {
    font: 500 12.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #6b7384);
    margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-pop__foot.cc-pop__foot { background: #fff; }

/* ── Form errors: red border on invalid input + error hint row ─ */
.ct-pop-input.is-invalid,
.ct-pop-select.is-invalid {
    border-color: var(--is-danger, #d92c2c);
    box-shadow: 0 0 0 3px rgba(217,44,44,.10);
}
.ct-pop-field__hint--err {
    color: var(--is-danger, #d92c2c);
}
.ct-pop-field__hint--err i { color: var(--is-danger, #d92c2c); }

/* ── Counter row: segmented Da/Ne + inline explanatory label ───
   Mirrors the mock — radio group sits left, contextual sentence right. On
   narrow screens the hint wraps under the buttons. */
.ct-pop-counter-row {
    display: flex; align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ct-pop-counter-hint {
    font: 500 11.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #6b7384);
    flex: 1 1 220px;
    min-width: 0;
}

/* ── Approvers list — read-only avatar + name + role for View state ── */
.ct-approvers-list { display: flex; flex-direction: column; gap: 8px; }

.ct-approver__body--full { width: 100%; }
.ct-approver__avatar {
    width: 26px; height: 26px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font: 700 10px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    flex-shrink: 0;
}
.ct-approver__name {
    font: 600 13px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-1, #0c111c);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-approver__rm {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--is-fg-3, #6b7384);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
}
.ct-approver__rm:hover {
    background: rgba(217,44,44,.08);
    color: var(--is-danger, #d92c2c);
    border-color: rgba(217,44,44,.20);
}

/* Full-width "Dodaj odobravatelja" — dashed brand-blue per HTML mock */
.ct-add-approver-btn--full {
    width: 100%;
    height: 36px;
    margin-top: 8px;
    padding: 0 12px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1.5px dashed var(--is-border-3, #c8ccd1);
    background: transparent;
    color: var(--is-brand-blue, #0494da);
    font: 600 12.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .12s, border-color .12s;
}
.ct-add-approver-btn--full:hover {
    background: var(--is-brand-blue-100, rgba(4,148,218,.10));
    border-color: var(--is-brand-blue, #0494da);
    border-style: solid;
}

/* Hint paragraph that explains approver ordering — appears below the
   add-approver button, matches the mock's .ct-approvers__hint atom. */
.ct-approvers-hint {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px;
    font: 500 11.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #6b7384);
}
.ct-approvers-hint i { font-size: 10px; }

/* Approver row variants — full-width Add dropdown + new-state styling */
.ct-approver .ct-approver__body { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.ct-approver--new {
    border-style: dashed;
    background: var(--is-brand-blue-100, rgba(4,148,218,.08));
    border-color: rgba(4,148,218,.40);
}
.ct-approver__order--new {
    background: var(--is-brand-blue, #0494da) !important;
    color: #fff !important;
    border-color: var(--is-brand-blue, #0494da) !important;
}
.ct-approver--new .ct-approver__body .e-ddl,
.ct-approver--new .ct-approver__body .e-input-group { width: 100%; }
.ct-approver__warn {
    color: var(--is-warning, #d18000);
    font-size: 13px;
    cursor: help;
}

/* Visibility toggle row — orange-tinted when limited (mock state) */
.ct-pop-toggle-row--limited {
    background: rgba(230,167,0,.08) !important;
    border-color: rgba(230,167,0,.30) !important;
}

/* ── SfMultiSelect chip color override (visibility picker) ───
   Scoped under .ct-pop so it only applies inside the contract-type popup —
   not to other SfMultiSelect instances elsewhere. Matches the light-blue
   pill style from the mock. */
/* Specificity ladder: tag.class repeated several levels deep so we win
   against any internal Syncfusion theme rule that targets the same nodes.
   Also resets `-webkit-text-fill-color` and `text-shadow` because some
   Syncfusion themes use those to override the visible text color even
   when `color` is set — `-webkit-text-fill-color` has priority over
   `color` for visual text rendering on Webkit/Chromium. */
html body div.ct-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips {
    background: rgba(4,148,218,.16) !important;
    border: 1px solid #0273a8 !important;
    border-radius: 999px !important;
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
html body div.ct-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chipcontent {
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    font: 600 12px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif) !important;
}
html body div.ct-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close,
html body div.ct-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close::before {
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
html body div.ct-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close:hover,
html body div.ct-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close:hover::before {
    background: rgba(4,148,218,.20) !important;
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
}

/* ── Delete confirm popup atoms (matches HTML mock) ────────
   Danger icon variant in the head, tight body padding, info-style warning
   banner that calls out which item is being deleted and the consequence. */
.cc-pop__head-icon--danger {
    background: var(--is-danger-bg, rgba(217,44,44,.10)) !important;
    color: var(--is-danger, #d92c2c) !important;
}
.ct-pop__body--tight { padding: 18px 22px !important; }
.ct-confirm__text {
    font: 500 13px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-2, #43505f);
    line-height: 1.5;
    margin: 0;
}
.ct-banner {
    display: flex; gap: 10px;
    padding: 10px 12px;
    border-radius: var(--is-radius-sm, 6px);
    margin-top: 14px;
    font: 500 12.5px/1.5 var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
}
.ct-banner i { margin-top: 1px; flex-shrink: 0; font-size: 13px; }
.ct-banner--warn {
    background: rgba(230,167,0,.08);
    border: 1px solid rgba(230,167,0,.30);
    color: #7a5800;
}
.ct-banner--warn i { color: var(--is-warning, #d18000); }

/* Danger primary button for "Briši tip ugovora" CTA */
.cc-btn.cc-btn--danger {
    background: var(--is-danger, #d92c2c);
    color: #fff;
    border-color: var(--is-danger, #d92c2c);
}
.cc-btn.cc-btn--danger:hover {
    background: #b32525;
    border-color: #b32525;
    color: #fff;
}

/* ── Popup form atoms ────────────────────────────────────── */
.ct-pop-section { margin-bottom: 18px; }
.ct-pop-section:last-child { margin-bottom: 0; }
.ct-pop-section__head { margin-bottom: 10px; }
.ct-pop-section__head h3 {
    font: 600 11px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #6b7384);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.ct-pop-section__head h3 i { font-size: 10px; color: var(--is-fg-3, #6b7384); }
.ct-pop-section__head h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--is-border-1, #e6e8eb);
}

.ct-pop-grid { display: grid; gap: 12px 14px; }
.ct-pop-grid--two { grid-template-columns: 1fr 1fr; }
.ct-pop-grid--two-one { grid-template-columns: 2fr 1fr; }

.ct-pop-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ct-pop-field__label {
    font: 600 11.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-2, #43505f);
    display: flex; align-items: center; gap: 4px;
}
.ct-pop-field__label .ct-req { color: var(--is-danger, #d92c2c); }
.ct-pop-field__label .ct-help {
    font-size: 10px;
    color: var(--is-fg-3, #6b7384);
    margin-left: 2px;
    cursor: pointer;
}
.ct-pop-field__hint {
    font: 500 11.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #6b7384);
    margin-top: 2px;
    display: flex; align-items: center; gap: 5px;
}
.ct-pop-field__hint i { font-size: 10px; }
.ct-pop-field__hint--err { color: var(--is-danger, #d92c2c); }

.ct-pop-input,
.ct-pop-select {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--is-border-3, #c8ccd1);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    font: 500 13.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-1, #0c111c);
    width: 100%;
    box-sizing: border-box;
}
.ct-pop-input:focus,
.ct-pop-select:focus {
    outline: none;
    border-color: var(--is-action-blue, #007bff);
    box-shadow: 0 0 0 3px rgba(0,123,255,.15);
}
.ct-pop-input--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--is-font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-weight: 600;
}

/* Segmented Yes/No control */
.ct-pop-seg {
    display: inline-flex;
    border: 1px solid var(--is-border-3, #c8ccd1);
    border-radius: var(--is-radius-sm, 6px);
    overflow: hidden;
    height: 36px;
    background: #fff;
}
.ct-pop-seg button {
    flex: 1;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--is-fg-2, #43505f);
    font: 600 12.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-width: 64px;
}
.ct-pop-seg button.is-active {
    background: var(--is-brand-blue-100, rgba(4,148,218,.10));
    color: var(--is-fg-1, #0c111c);
}
.ct-pop-seg button + button { border-left: 1px solid var(--is-border-3, #c8ccd1); }

/* Toggle row (Vidljivo svim zaposlenicima) — default ON state uses a subtle
   gray surface per HTML mock; the --limited modifier swaps to orange. */
.ct-pop-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border: 1px solid var(--is-border-1, #e6e8eb);
    border-radius: var(--is-radius-sm, 6px);
    background: var(--is-bg-surface-3, #f1f3f5);
}
.ct-pop-toggle-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-pop-toggle-row__title {
    font: 600 13px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-1, #0c111c);
}
.ct-pop-toggle-row__hint {
    font: 500 11.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #6b7384);
}
.ct-pop-switch {
    position: relative;
    width: 40px; height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}
.ct-pop-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ct-pop-switch__slider {
    position: absolute; inset: 0;
    background: var(--is-border-2, #d9dbde);
    border-radius: 999px;
    transition: background .15s;
}
.ct-pop-switch__slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 2px; top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s;
}
.ct-pop-switch input:checked + .ct-pop-switch__slider { background: var(--is-brand-blue, #0494da); }
.ct-pop-switch input:checked + .ct-pop-switch__slider::before { transform: translateX(18px); }

/* ── Approver row 4 states ───────────────────────────────── */
.ct-approver {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--is-border-1, #e6e8eb);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    margin-bottom: 8px;
}
.ct-approver__order {
    width: 22px; height: 22px;
    border-radius: 999px;
    background: var(--is-bg-surface-3, #f1f3f5);
    color: var(--is-fg-2, #43505f);
    font: 700 11px var(--is-font-mono, "JetBrains Mono", ui-monospace, monospace);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ct-approver__body { flex: 1; min-width: 0; }
.ct-approver__warn {
    color: var(--is-warning, #d18000);
    font-size: 13px;
    cursor: help;
}
.ct-approver__actions { display: inline-flex; gap: 4px; }
.ct-approver--new {
    border: 1px dashed var(--is-brand-blue, #0494da);
    background: var(--is-brand-blue-100, rgba(4,148,218,.04));
}
.ct-approver--new .ct-approver__order {
    background: var(--is-brand-blue, #0494da);
    color: #fff;
}
.ct-approver--delete {
    background: rgba(217,44,44,.06);
    border-color: rgba(217,44,44,.25);
}
.ct-approver--delete .ct-approver__msg {
    color: #7a1818;
    font: 500 12.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    flex: 1;
}

.ct-add-approver-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px dashed var(--is-brand-blue, #0494da);
    border-radius: var(--is-radius-sm, 6px);
    background: transparent;
    color: var(--is-brand-blue, #0494da);
    font: 600 12.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    cursor: pointer;
    margin-top: 8px;
}
.ct-add-approver-btn:hover {
    background: var(--is-brand-blue-100, rgba(4,148,218,.10));
}

/* Approver action confirm buttons (inline ✓ / ✗) */
.ct-iconbtn-confirm,
.ct-iconbtn-cancel {
    width: 28px; height: 28px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid var(--is-border-2, #d9dbde);
    background: #fff;
    color: var(--is-fg-2, #43505f);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
}
.ct-iconbtn-confirm { color: var(--is-success, #26b050); border-color: rgba(38,176,80,.35); }
.ct-iconbtn-confirm:hover { background: rgba(38,176,80,.10); }
.ct-iconbtn-cancel:hover { background: var(--is-bg-surface-3, #f1f3f5); }

/* ── Delete confirm popup (sm) ───────────────────────────── */
.ct-delete-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border-radius: var(--is-radius-sm, 6px);
    background: rgba(230,167,0,.10);
    border: 1px solid rgba(230,167,0,.30);
    color: #7a5800;
    font: 500 12.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    margin-top: 12px;
}
.ct-delete-banner i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ── Mobile + tablet layout (per MobileLayoutStandards.md) ─ */
@media (max-width: 1199px) {
    /* Tablet: allow wrapping in tablecard. Mobile-specific rules below.
       Card chrome mirrors redesign-competences (.cc-card) — head with dashed
       divider, body grid, gray footer rectangle containing edit/delete. */
    .ct-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
    .ct-card {
        background: #fff;
        border: 1px solid var(--is-border-1, #e6e8eb);
        border-radius: var(--is-radius-md, 10px);
        padding: 0;
        display: flex; flex-direction: column;
        overflow: hidden;
        transition: border-color .12s, box-shadow .12s;
    }
    .ct-card:hover {
        border-color: var(--is-border-2, #d9dbde);
        box-shadow: var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.05));
    }
    .ct-card__head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px;
        padding: 12px;
        border-bottom: 1px dashed var(--is-border-1, #e6e8eb);
    }
    .ct-card__meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
        padding: 12px;
    }
    .ct-card__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ct-card__field-label {
        font: 600 10px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
        color: var(--is-fg-3, #6b7384);
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
    }
    .ct-card__field-value {
        font: 500 12.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
        color: var(--is-fg-1, #0c111c);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        min-width: 0;
    }
    .ct-card__foot {
        display: flex; justify-content: flex-end; gap: 6px;
        padding: 10px 12px;
        border-top: 1px dashed var(--is-border-1, #e6e8eb);
        background: var(--is-bg-surface-3, #f1f3f5);
    }
}

@media (max-width: 600px) {
    /* Mobile per MobileLayoutStandards.md */
    /* §2 header buttons: utility pair (Excel) + primary CTA (Add) — Excel alone => 100% */
    .ct-pagehead__actions {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }
    .ct-pagehead__actions .cc-btn,
    .ct-pagehead__actions button {
        width: 100%;
        justify-content: center;
    }

    /* Mobile filter bar: three stacked rows, each control 100% wide:
       row 1 — search input, row 2 — visibility pill, row 3 — search/clear actions.
       Override the cc-filterbar__row 2-col grid from redesign-competences.css and
       force the explicit single-column layout the user asked for. */
    .ct-filterrow { display: grid !important; grid-template-columns: 1fr !important; gap: 8px; }
    .ct-filterrow > .cc-search,
    .ct-filterrow > .cc-pill,
    .ct-filterrow > .cc-sf-pill,
    .ct-filterrow > .ct-actionrow {
        grid-column: 1 / -1 !important;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* Hide the inline spacer div (flex:1) that only exists for desktop alignment */
    .ct-filterrow > div[style*="flex: 1"] { display: none; }
    /* Visibility pill takes full row height and is centered */
    .ct-filterrow > .cc-pill,
    .ct-filterrow > .cc-sf-pill {
        display: flex;
        height: 40px;
        padding: 0 10px;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    /* Inner Sf control inherits the 40px height */
    .ct-filterrow > .cc-sf-pill .e-ddl,
    .ct-filterrow > .cc-sf-pill .e-input-group {
        min-height: 40px !important;
        height: 40px !important;
    }

    /* Action row: Search alone => 100%; Search + Clear (HasAnyFilter) => 50/50.
       :has() flips the grid template based on sibling count, same trick as the
       payments-v2/competences-v2 pages. */
    .ct-actionrow { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .ct-actionrow:has(.cc-iconbtn + .cc-iconbtn) { grid-template-columns: 1fr 1fr; }
    .ct-actionrow .cc-iconbtn,
    .ct-actionrow button {
        width: 100%;
        height: 40px;
    }

    /* Mobile card view: keep two columns of meta fields. Values that don't fit
       the column get truncated with ellipsis; the `title` attribute on each
       value renders the full text on hover (per-field title set in razor). */
    .ct-card__meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 12px; }
    /* §10 cell value never wraps — outer span clips with ellipsis */
    .ct-card__field-value {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 100%;
    }
    /* Inner pills that carry their own text must also clip so long labels
       (template name, counter label, visibility label) don't push the cell wider
       than its column. inline-flex elements need explicit max-width to honour
       the parent's overflow. */
    .ct-card__field-value .ct-template,
    .ct-card__field-value .ct-days,
    .ct-card__field-value .ct-yn,
    .ct-card__field-value .ct-vis,
    .ct-card__field-value .ct-appr {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* §6 dropdowns fill cell, popup ≤ calc(100vw - 16px) */
    .ct-pop-input,
    .ct-pop-select { width: 100%; }

    /* §9 toolbar single row on mobile */
    .ct-toolbar-mobile { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }

    /* Hide the top-toolbar mini pager on mobile — the bottom .cc-pager already
       gives a full-width stacked pager; duplicating it in the cramped toolbar
       header would push the page-size selector off-screen. */
    .cc-pager__pages--mini { display: none !important; }

    /* §7 popup full-viewport on mobile */
    .ct-pop {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        inset: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .ct-pop--sm.cc-pop { max-width: 100vw !important; width: 100vw !important; }
}