/* ──────────────────────────────────────────────────────────
   Clients V2 redesign — scope: .cl-*  (@page "/clients-v2")
   Layers on the shared cc-* system (redesign-competences.css):
     - cc-screen / cc-pagehead / cc-btn / cc-filterbar / cc-search
     - cc-pill + cc-sf-pill (country multiselect rendered as a pill)
     - cc-chipstrip / cc-chip (selected countries)
     - cc-tablecard / cc-toolbar / cc-table / cc-th / cc-pager
     - cc-table-wrap ⇄ cc-cards-wrap responsive swap (≤1199px)
     - cc-card* (mobile cards) and cc-pop* (Add/Edit modal shell)
   V1 /clients and /crm/clients* are unaffected by anything here.
   Mock: Claude documentation/projects/app-redesign/Clients/ClientsList.html
   ────────────────────────────────────────────────────────── */

/* Shared .cc-screen centres content (max-width:1680px; margin:0 auto), which
   pushes the page toward the middle. Drop both so the page hugs the left/nav,
   matching peskills-v2 / projectstatuses-v2. Page-scoped — .cc-screen untouched. */
.cc-screen.cl-screen { max-width: none; margin: 0; }

/* ── Name cell: 30×30 brand-blue square (static fa-building) + title ── */
.cl-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl-name__ico {
    flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(4,148,218,.10);
    color: var(--is-brand-blue, #0494da);
    font-size: 13px;
}
.cl-name__title {
    font: 600 13.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-1, #141c32);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
a.cl-name__title { text-decoration: none; cursor: pointer; }
a.cl-name__title:hover { color: var(--is-brand-blue, #0494da); text-decoration: underline; }

/* ── Traži / Poništi action pair ── */
.cl-filterbtns { display: inline-flex; align-items: center; gap: 8px; }

/* ── Row action buttons — borderless ghost, identical to other V2 pages
   (mirrors ct-iconbtn). Edit tints blue on hover, delete tints red. ── */
.cl-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;
}
.cl-iconbtn + .cl-iconbtn { margin-left: 4px; }
.cl-iconbtn:hover {
    background: var(--is-bg-surface-3, #f1f3f5);
    color: var(--is-fg-1, #0c111c);
    border-color: var(--is-border-1, #e6e8eb);
}
.cl-iconbtn.is-edit:hover {
    background: rgba(4,148,218,.10);
    color: var(--is-brand-blue, #0494da);
    border-color: rgba(4,148,218,.25);
}
.cl-iconbtn.is-danger:hover {
    background: rgba(217,44,44,.08);
    color: var(--is-danger, #d92c2c);
    border-color: rgba(217,44,44,.20);
}

/* ── Order-index column: narrow + centre the "#" header over the badges.
   cc-table cells carry 12px side padding which widens this tiny column, so
   trim it here to keep the column slim like the other V2 pages. ── */
.cc-table th.cl-col-idx,
.cc-table td.cl-col-idx { text-align: center; padding-left: 4px; padding-right: 4px; }

/* ── Order-index badge (mono, tabular) ── */
.cl-idx {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 22px; padding: 0 6px;
    border-radius: 6px;
    background: var(--is-bg-surface-3, #eef2f6);
    border: 1px solid var(--is-border-1, #d8dde5);
    color: var(--is-fg-3, #6c757d);
    font: 700 11px var(--is-font-mono, "JetBrains Mono", monospace);
    font-variant-numeric: tabular-nums;
}

/* ── Postal-code cell: mono, tabular (project rule) ── */
.cl-cell--mono {
    font: 500 12.5px var(--is-font-mono, "JetBrains Mono", monospace);
    font-variant-numeric: tabular-nums;
    color: var(--is-fg-2, #344057);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Plain text cell (Država / Adresa), ellipsis ── */
.cl-cell {
    font: 500 13px var(--is-font-sans, sans-serif);
    color: var(--is-fg-2, #344057);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-cell--empty { color: var(--is-fg-3, #6c757d); font-style: italic; }

/* ── Foot hint bar (inside the table card, above the pager) ── */
.cl-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid var(--is-border-1, #d8dde5);
    font: 500 12px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d);
}
.cl-foot--summary-only { justify-content: flex-end; }
.cl-foot__hint { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.cl-foot__hint i { color: var(--is-brand-blue, #0494da); flex-shrink: 0; }
.cl-foot__summary { white-space: nowrap; }
.cl-foot__summary b { color: var(--is-fg-1, #141c32); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Empty / no-result states use the shared dl-empty / dl-empty__icon atoms
   (redesign-departments-list.css) — same as peskills-v2. Empty state keeps the
   default blue circle (light-blue bg + blue building). No-result state gets a
   light-gray circle + gray glyph via the cl-icon--muted modifier below. */
.dl-empty__icon.cl-icon--muted {
    background: var(--is-bg-surface-3, #eef2f6);
    color: var(--is-fg-3, #6c757d);
}
.dl-empty__icon.cl-icon--muted i { color: var(--is-fg-3, #6c757d); }
/* The empty-state CTA renders inside a table <td> (dark text colour), which
   can override the icon's inherited white. Force the primary-button glyph
   white so the "+" matches the white label. */
.dl-empty .cc-btn--primary i { color: #fff !important; }

/* ── Country dropdown in the Add/Edit modal ──
   Normalize the Syncfusion control to the same 32px height as the sibling
   cc-pop-input fields so it aligns AND so its popup anchors at the field
   bottom (instead of opening over the middle of the field). Syncfusion
   propagates CssClass to the body-level popup element, so `.e-popup.cl-modal-ddl`
   targets it — a small margin-top drops it clear of the field. Same technique
   as redesign-job-roles-list.css. */
.e-ddl.cl-modal-ddl.e-input-group {
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
}
.e-ddl.cl-modal-ddl.e-input-group input.e-input {
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
}
.e-popup.cl-modal-ddl { margin-top: 4px; }

/* "+ Dodaj državu" no-records footer in the country dropdown popup — add
   breathing room so the popup isn't collapsed to just the button height. */
.cl-ddl-norecords {
    display: block;
    padding: 14px 12px;
    text-align: center;
}

/* ── Add/Edit modal: narrower than the shared 960px cc-pop (this form is a
   compact 2-column grid, so it doesn't need the full width). Page-scoped —
   the shared cc-pop is untouched. ── */
.cc-pop.cl-pop { width: min(620px, calc(100vw - 32px)); }

/* ── Modal field deltas (on the shared cc-pop shell) ── */
.cl-pop-input--mono { font-family: var(--is-font-mono, "JetBrains Mono", monospace); font-variant-numeric: tabular-nums; }
.cl-pop-input--err,
.cl-pop-input--err:focus {
    border-color: var(--is-danger, #d92c2c) !important;
    box-shadow: 0 0 0 3px rgba(217,44,44,.12) !important;
}
.cl-pop-hint {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 4px;
    font: 500 11.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d);
}
.cl-pop-hint i { font-size: 10px; }
.cl-pop-hint b { color: var(--is-brand-blue, #0494da); cursor: pointer; }
.cl-pop-hint--err { color: var(--is-danger, #d92c2c); }
.cl-pop-hint--err i, .cl-pop-hint--err b { color: var(--is-danger, #d92c2c); }

/* ── Card head: name on the left, country tag on the right (mobile) ── */
.cl-card__country {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 9px; border-radius: 999px;
    background: rgba(4,148,218,.10);
    color: var(--is-brand-blue-700, #0a6aa0);
    font: 600 11px var(--is-font-sans, sans-serif);
    white-space: nowrap; flex-shrink: 0;
}

/* ── Mobile (≤600px) — foot stacks, per MobileLayoutStandards §9/§10 ── */
@media (max-width: 600px) {
    .cl-foot { flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
    .cl-foot__hint { justify-content: center; }
    /* Top toolbar mini-pager dropped on mobile — page numbers live in the footer pager */
    .cc-toolbar .cc-pager__pages--mini { display: none; }

    /* §5 — Traži / Poništi sit on their own full-width row, split 50/50.
       The shared rule turns .cc-filterbar__row into a 2-col grid; place the
       button pair across the full width and stretch each button. */
    .cc-filterbar__row > .cl-filterbtns {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }
    /* Two buttons (Traži + Poništi) → 50/50; Traži alone → full-width */
    .cc-filterbar__row > .cl-filterbtns:has(.cc-btn + .cc-btn) { grid-template-columns: 1fr 1fr; }
    .cl-filterbtns .cc-btn { width: 100%; justify-content: center; height: 40px; }
}