/* ============================================================
 * Clients List V2 redesign — page-scoped styles
 * ------------------------------------------------------------
 * All selectors are prefixed with .cl-screen so the legacy
 * /crm/clients page remains visually unaffected.
 *
 * Generic table-shell primitives live in insync-tables.css.
 * This file owns only what's specific to the Clients list:
 * page chrome, pipeline tiles, filter bar, status/sales pills,
 * drawer, and Syncfusion overrides for filter pills.
 * ============================================================ */

/* ── Page shell ───────────────────────────────────────────── */
.cl-screen { padding: 22px 28px 60px; }

/* ── Page header ──────────────────────────────────────────── */
.cl-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cl-pagehead__crumb { display: flex; gap: 6px; align-items: center; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); margin-bottom: 4px; }
.cl-pagehead__crumb a { color: inherit; text-decoration: none; }
.cl-pagehead__crumb a:hover { color: var(--is-action-blue); }
.cl-pagehead__crumb i { font-size: 9px; }
.cl-pagehead h1 { font: 700 26px/1.15 var(--is-font-sans); letter-spacing: -.01em; color: var(--is-fg-1); margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-pagehead h1 .cl-count { font: 600 13px var(--is-font-sans); color: var(--is-fg-2); background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); padding: 2px 10px; border-radius: 999px; }
.cl-pagehead h1 .cl-vchip--new { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 2px 9px; border-radius: 999px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border: 1px solid var(--is-brand-blue-200); font: 700 10px var(--is-font-sans); letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.cl-pagehead h1 .cl-vchip--new i { font-size: 9px; }
.cl-pagehead__sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.cl-pagehead__sub-text { font: 500 13px var(--is-font-sans); color: var(--is-fg-3); }
.cl-vlink { font: 500 12px var(--is-font-sans); color: var(--is-fg-3); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; border: 1px dashed var(--is-border-2); cursor: pointer; background: transparent; transition: background .15s, color .15s, border-color .15s; }
.cl-vlink i { font-size: 10px; }
.cl-vlink:hover { color: var(--is-brand-blue); border-color: var(--is-brand-blue); background: var(--is-brand-blue-100); border-style: solid; }
.cl-pagehead__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Load-duration chip ──────────────────────────────────── */
.cl-loadchip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); font: 600 11px var(--is-font-mono); color: var(--is-fg-3); cursor: default; transition: background .15s, border-color .15s, color .15s; user-select: none; }
.cl-loadchip:hover { background: #fff; color: var(--is-fg-1); border-color: var(--is-border-2); }
.cl-loadchip i { font-size: 9px; color: var(--is-fg-3); }
.cl-loadchip:hover i { color: var(--is-action-blue); }
.cl-loadchip b { color: var(--is-fg-2); font-weight: 600; }
.cl-loadchip:hover b { color: var(--is-fg-1); }
.cl-loadchip__sep { color: var(--is-fg-4); font-weight: 400; padding: 0 1px; }

/* ── Header buttons ──────────────────────────────────────── */
.cl-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; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.cl-btn i { font-size: 12px; }
.cl-btn--primary { background: var(--is-brand-blue); color: #fff; border-color: var(--is-brand-blue); }
.cl-btn--primary:hover { background: var(--is-brand-blue-700); border-color: var(--is-brand-blue-700); }
.cl-btn--ghost { background: #fff; color: var(--is-fg-2); border-color: var(--is-border-3); }
.cl-btn--ghost:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }

/* ── Pipeline summary tiles ──────────────────────────────── */
.cl-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
@media (max-width: 1100px) { .cl-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .cl-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .cl-summary { grid-template-columns: 1fr; } }
.cl-tile { display: inline-flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); background: var(--is-bg-surface); box-shadow: var(--is-shadow-1); cursor: pointer; text-align: left; transition: background .15s, border-color .15s, box-shadow .15s, transform .12s; min-width: 0; }
.cl-tile:hover { background: #fff; border-color: var(--is-border-2); }
.cl-tile.is-on { border-color: var(--is-brand-blue); background: var(--is-brand-blue-100); }
.cl-tile.is-on .cl-tile__label, .cl-tile.is-on .cl-tile__value { color: var(--is-brand-blue-700); }
.cl-tile__icon { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; background: var(--is-bg-surface-3); color: var(--is-fg-2); }
.cl-tile--active .cl-tile__icon { background: rgba(45, 140, 82, .12); color: var(--is-success); }
.cl-tile--quote  .cl-tile__icon { background: rgba(0, 123, 255, .12); color: var(--is-action-blue); }
.cl-tile--trial  .cl-tile__icon { background: rgba(206, 134, 0, .12); color: var(--is-warning); }
.cl-tile--paying .cl-tile__icon { background: rgba(120, 75, 200, .12); color: #6f3fc4; }
.cl-tile__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cl-tile__label { font: 600 12px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .04em; }
.cl-tile__value { font: 700 22px var(--is-font-sans); color: var(--is-fg-1); }
.cl-tile__sub { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); margin-top: 1px; }

/* ── Filter bar ──────────────────────────────────────────── */
.cl-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: 12px 14px; margin-bottom: 10px; }
.cl-filterbar__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cl-search { position: relative; flex: 1 1 320px; min-width: 240px; height: 36px; display: flex; align-items: center; padding-top: 8px; }
.cl-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--is-fg-3); font-size: 13px; z-index: 1; pointer-events: none; }
.cl-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); }
.cl-search input:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0, 123, 255, .15); }

.cl-pill { position: relative; 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; transition: background .12s, border-color .12s, color .12s; box-sizing: border-box; vertical-align: middle; }
.cl-pill:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.cl-pill i.cl-pill__chev { font-size: 9px; color: var(--is-fg-3); }
.cl-pill.is-active { background: var(--is-brand-blue-100); border-color: var(--is-brand-blue-200); color: var(--is-brand-blue-700); }
.cl-pill.is-active i.cl-pill__chev { color: var(--is-brand-blue-700); }
.cl-pill__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--is-brand-blue); color: #fff; font: 700 10px var(--is-font-sans); margin-left: 1px; }

.cl-morebtn { position: relative; }
.cl-morebtn .cl-pill__count { background: var(--is-warning); }

.cl-iconbtn { width: 36px; height: 36px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-3); background: #fff; color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: background .15s, color .15s, border-color .15s; padding: 0; box-sizing: border-box; flex: 0 0 36px; vertical-align: middle; }
.cl-iconbtn:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.cl-iconbtn--brand { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; }
.cl-iconbtn--brand:hover { background: var(--is-brand-blue-700); color: #fff; }
.cl-spacer { flex: 1; }

/* Segmented control — used for Tag mode (Any / All) */
.cl-segmented { display: inline-flex; height: 36px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; overflow: hidden; box-sizing: border-box; vertical-align: middle; }
.cl-segmented button { height: 100%; padding: 0 10px; background: transparent; border: 0; font: 600 12px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; transition: background .12s, color .12s; }
.cl-segmented button + button { border-left: 1px solid var(--is-border-1); }
.cl-segmented button:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.cl-segmented button.is-on { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); }

/* ── Active filter chip strip ────────────────────────────── */
.cl-chipstrip { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--is-border-1); min-height: 0; }
.cl-chipstrip__label { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.cl-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 9px; border-radius: 999px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); font: 600 12px var(--is-font-sans); color: var(--is-fg-1); }
.cl-chip i.cl-chip__lead { font-size: 10px; color: var(--is-fg-3); }
.cl-chip__close { width: 18px; height: 18px; border-radius: 999px; background: transparent; border: 0; color: var(--is-fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.cl-chip__close:hover { background: var(--is-border-2); color: var(--is-fg-1); }
.cl-chipstrip__clear { margin-left: auto; background: transparent; border: 0; font: 600 12px var(--is-font-sans); color: var(--is-action-blue); cursor: pointer; padding: 4px 6px; }
.cl-chipstrip__clear:hover { text-decoration: underline; }

/* ── Tag chips (grid row "Tagovi" column) ─────────────────── */
/* Visual language matches .cl-status: soft tint + dot. Tag-specific color
   comes through inline style emitted by TagChipStyle(); the defaults below
   only kick in for tags without ColorHex. Row is single-line; overflow chip
   carries an ellipsis. */
.cl-tags { display: inline-flex; flex-wrap: nowrap; gap: 6px; align-items: center; max-width: 100%; }
.cl-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--is-border-1);
    background: var(--is-bg-surface-3);
    color: var(--is-fg-2);
    font: 600 11.5px var(--is-font-sans);
    line-height: 1.4;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.cl-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
}
.cl-tag--more {
    background: transparent;
    color: var(--is-fg-3);
    border-color: var(--is-border-1);
    font-weight: 600;
}
.cl-tag--more::before { display: none; }

/* ── Table card ──────────────────────────────────────────── */
.cl-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; }
.cl-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--is-border-1); gap: 12px; flex-wrap: wrap; }
.cl-toolbar__left { display: flex; align-items: center; gap: 12px; font: 500 12px var(--is-font-sans); color: var(--is-fg-2); }
.cl-toolbar__left b { color: var(--is-fg-1); font-weight: 700; }
.cl-toolbar__right { display: flex; align-items: center; gap: 8px; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); }
.cl-pagesize { display: inline-flex; align-items: center; gap: 6px; }
.cl-pagesize select { height: 30px; 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; }

/* Density toggle */
.cl-density { display: inline-flex; height: 28px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm); background: #fff; overflow: hidden; }
.cl-density button { width: 32px; height: 100%; border: 0; background: transparent; color: var(--is-fg-3); cursor: pointer; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.cl-density button + button { border-left: 1px solid var(--is-border-1); }
.cl-density button:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.cl-density button.is-on { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); }

/* ── Table ──────────────────────────────────────────────── */
table.cl-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cl-table thead th { position: sticky; top: var(--is-topbar-h); z-index: 3; 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: 7px 10px; text-align: left; border-bottom: 1px solid var(--is-border-1); white-space: nowrap; user-select: none; box-shadow: 0 1px 0 var(--is-border-1), 0 2px 6px rgba(20, 28, 50, .04); }
.cl-table thead th .cl-th { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cl-table thead th .cl-th i { font-size: 9px; opacity: 0; transition: opacity .15s, color .15s; color: var(--is-fg-3); }
.cl-table thead th .cl-th:hover i { opacity: .6; }
.cl-table thead th .cl-th.is-sorted i { opacity: 1; color: var(--is-action-blue); }
.cl-table tbody tr { transition: background .12s; }
.cl-table tbody tr:hover { background: rgba(0, 123, 255, .04); }
.cl-table tbody tr + tr td { border-top: 1px solid var(--is-border-1); }
.cl-table tbody td { padding: 8px 10px; vertical-align: middle; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); height: 40px; overflow: hidden; }
.cl-table.is-compact tbody td { padding: 4px 10px; height: 30px; font-size: 12px; }
.cl-table.is-comfy   tbody td { padding: 12px 10px; height: 52px; }
.cl-table tbody td.is-muted { color: var(--is-fg-3); }
.cl-table tbody td.is-actions { text-align: right; white-space: nowrap; overflow: visible; }
.is-trunc { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Client cell (logo + name + meta) */
.cl-client { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl-client__logo { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font: 700 11px var(--is-font-sans); color: var(--is-fg-1); letter-spacing: .03em; }
.cl-client__body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.cl-client__name { color: var(--is-brand-blue-700); font-weight: 600; text-decoration: none; cursor: pointer; }
.cl-client__name:hover { text-decoration: underline; }
.cl-client__meta { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--is-font-sans); color: var(--is-fg-3); min-width: 0; }
.cl-client__code { background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); border-radius: 4px; padding: 1px 5px; font-family: var(--is-font-mono); font-size: 10.5px; color: var(--is-fg-2); }
.cl-client__lob { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mini-badges next to client name */
.cl-mbadges { display: inline-flex; gap: 4px; }
.cl-mbadge { display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 6px; border-radius: 999px; font: 700 9.5px var(--is-font-sans); text-transform: uppercase; letter-spacing: .03em; }
.cl-mbadge i { font-size: 8px; }
.cl-mbadge--trial { background: rgba(206, 134, 0, .12); color: var(--is-warning); }
.cl-mbadge--pay   { background: rgba(45, 140, 82, .12); color: var(--is-success); }

/* Status pill */
.cl-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font: 600 11.5px var(--is-font-sans); line-height: 1.4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-status__dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; background: currentColor; }
.cl-status--active  { background: rgba(45, 140, 82, .10);  color: var(--is-success); }
.cl-status--demo    { background: rgba(120, 75, 200, .10); color: #6f3fc4; }
.cl-status--quote   { background: rgba(0, 123, 255, .10);  color: var(--is-action-blue); }
.cl-status--lost    { background: rgba(199, 59, 59, .10);  color: var(--is-danger); }
.cl-status--lead    { background: rgba(206, 134, 0, .10);  color: var(--is-warning); }
.cl-status--neutral { background: var(--is-bg-surface-3);  color: var(--is-fg-2); border: 1px solid var(--is-border-1); }

/* Country pill */
.cl-flag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); font: 600 11.5px var(--is-font-sans); color: var(--is-fg-2); max-width: 100%; }
.cl-flag i { font-size: 10px; color: var(--is-fg-3); flex-shrink: 0; }

/* Sales employee avatar + name */
.cl-sales { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cl-sales__avatar { width: 24px; height: 24px; border-radius: 999px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); display: inline-flex; align-items: center; justify-content: center; font: 700 10px var(--is-font-sans); flex-shrink: 0; }
.cl-sales__name { font-weight: 500; min-width: 0; }
.cl-sales--none .cl-sales__avatar { background: rgba(199, 59, 59, .12); color: var(--is-danger); }
.cl-sales--none .cl-sales__name { color: var(--is-fg-3); font-style: italic; }

/* Row actions */
.cl-rowact { display: inline-flex; gap: 3px; justify-content: flex-end; width: 100%; }
.cl-rowact button, .cl-rowact a { width: 28px; height: 28px; 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: 11px; transition: background .12s, color .12s, border-color .12s; text-decoration: none; padding: 0; }
.cl-rowact button:hover:not(:disabled), .cl-rowact a:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-1); }
.cl-rowact .is-danger:hover { background: rgba(199, 59, 59, .08); color: var(--is-danger); border-color: rgba(199, 59, 59, .25); }
.cl-rowact button:disabled { opacity: .35; cursor: not-allowed; }

/* ── Card layout (≤ 1199px swap) ─────────────────────────── */
.cl-table-wrap { display: block; }
.cl-cards-wrap { display: none; }
@media (max-width: 1199px) {
    .cl-table-wrap { display: none; }
    .cl-cards-wrap { display: block; }
    .cl-screen { padding: 16px 16px 60px; }
}
.cl-cards { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.cl-card { background: #fff; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s; overflow: hidden; }
.cl-card:hover { border-color: var(--is-border-2); box-shadow: var(--is-shadow-1); }
.cl-card__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.cl-card__title { font: 700 14px var(--is-font-sans); color: var(--is-fg-1); flex: 1; min-width: 0; }
.cl-card__title a:hover { text-decoration: underline; }
.cl-card__head-status { flex-shrink: 0; }
.cl-card__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; padding: 8px 12px 10px 12px; border-top: 1px dashed var(--is-border-1); }
@media (max-width: 760px) { .cl-card__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .cl-card__meta { grid-template-columns: 1fr; } }
.cl-card__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-card__field-label { font: 500 9.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; }
.cl-card__field-value { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-card__foot { display: flex; align-items: center; justify-content: flex-end; padding: 8px 10px; border-top: 1px dashed var(--is-border-1); background: var(--is-bg-surface); }
/* Title in a card stacks the name link and the meta line; the meta line in card mirrors
   the desktop client cell (code chip, · LOB, trial/pay mini-badges). */
.cl-card__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-card__title a { color: var(--is-brand-blue-700); text-decoration: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Pagination ─────────────────────────────────────────── */
.cl-pager { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface); gap: 16px; flex-wrap: wrap; }
.cl-pager__info { font: 500 12px var(--is-font-sans); color: var(--is-fg-3); }
.cl-pager__info b { color: var(--is-fg-1); font-weight: 700; }
.cl-pager__pages { display: inline-flex; gap: 3px; align-items: center; }
.cl-pager button { height: 28px; min-width: 28px; padding: 0 8px; 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; }
.cl-pager button:hover:not(:disabled) { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.cl-pager button.is-active { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; }
.cl-pager button:disabled { opacity: .35; cursor: not-allowed; }
.cl-pager__ellipsis { padding: 0 4px; color: var(--is-fg-3); }

/* ── Empty state ────────────────────────────────────────── */
.cl-empty { text-align: center; padding: 60px 24px; }
.cl-empty i { font-size: 28px; color: var(--is-fg-3); margin-bottom: 12px; }
.cl-empty h3 { font: 700 16px var(--is-font-sans); margin: 0 0 6px; color: var(--is-fg-1); }
.cl-empty p { font: 500 13px var(--is-font-sans); color: var(--is-fg-3); margin: 0 0 16px; }

/* ── Drawer (right slide-in for advanced filters) ────────── */
.cl-drawer-backdrop { position: fixed; inset: 0; background: rgba(20, 28, 50, .32); z-index: 1040; }
.cl-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw; background: #fff; box-shadow: -8px 0 32px rgba(20, 28, 50, .16); z-index: 1050; display: flex; flex-direction: column; }
.cl-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--is-border-1); }
.cl-drawer__head h2 { font: 700 16px var(--is-font-sans); color: var(--is-fg-1); margin: 0; display: flex; align-items: center; gap: 10px; }
.cl-drawer__head h2 .cl-pill__count { background: var(--is-warning); }
.cl-drawer__body { flex: 1; overflow-y: auto; padding: 8px 0; }
.cl-drawer__section { padding: 14px 20px; border-bottom: 1px solid var(--is-border-1); }
.cl-drawer__section:last-child { border-bottom: 0; }
.cl-drawer__section h3 { font: 700 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px 0; }
.cl-drawer__grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cl-drawer__grid--2 { grid-template-columns: 1fr 1fr; }
.cl-field { display: flex; flex-direction: column; gap: 5px; }
.cl-field label { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-2); }
.cl-checkrow { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--is-font-sans); color: var(--is-fg-1); cursor: pointer; }
.cl-drawer__foot { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface); }
.cl-drawer__foot .cl-btn { flex: 1; justify-content: center; }

/* ── SfMultiSelect overlay for ClFilterPill (transparent chrome) ── */
.cl-screen .cl-sf-pill { position: relative; }
.cl-screen .cl-sf-pill .e-multiselect,
.cl-screen .cl-sf-pill .e-control-wrapper,
.cl-screen .cl-sf-pill .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;
}
.cl-screen .cl-sf-pill .e-multi-select-wrapper {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
}
.cl-screen .cl-sf-pill .e-multi-select-wrapper .e-chips-collection { display: none !important; }
.cl-screen .cl-sf-pill .e-multi-select-wrapper input.e-control,
.cl-screen .cl-sf-pill .e-multi-select-wrapper .e-input-filter,
.cl-screen .cl-sf-pill .e-multi-select-wrapper .e-searcher {
    color: transparent !important;
    caret-color: transparent !important;
    cursor: pointer !important;
}
.cl-screen .cl-sf-pill .e-multi-select-wrapper .e-ddl-icon,
.cl-screen .cl-sf-pill .e-multi-select-wrapper .e-clear-icon { display: none !important; }

/* SfMultiSelect inside the drawer: defer to Syncfusion defaults for sizing so the
   dropdown chrome matches employees-v2 instead of being inflated by our overrides. */

/* Checkbox row inside the drawer — indent so checkboxes don't sit flush against
   the popup's left edge and visually align with the form inputs above. */
.cl-drawer .cl-checkrow { padding-left: 6px; }

/* Mute utility for inline cells */
.cl-screen .is-muted { color: var(--is-fg-3); }

/* =============================================================
 * Mobile overrides — per MobileLayoutStandards.md (≤ 600px only).
 * Tablet (601–1024 px) keeps the desktop layout; the card swap at
 * ≤1199 px above this block is the page's own tablet-comfort
 * breakpoint and is kept independent of these mobile rules.
 * ============================================================= */
@media (max-width: 600px) {

    /* §8 Page head — stack actions full-width below the title */
    .cl-screen { padding: 12px 12px 56px; }
    .cl-pagehead { flex-direction: column; align-items: stretch; gap: 10px; }
    .cl-pagehead h1 { font-size: 22px; }
    .cl-pagehead__actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
    .cl-pagehead__actions .cl-btn { width: 100%; height: 40px; justify-content: center; }

    /* §3-style pipeline tiles — keep them paired (2-col) and compact */
    .cl-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
    .cl-tile { padding: 10px 12px; gap: 10px; }
    .cl-tile__icon { width: 32px; height: 32px; font-size: 13px; }
    .cl-tile__value { font-size: 18px; }
    .cl-tile__label { font-size: 10px; }
    .cl-tile__sub { font-size: 10px; }

    /* §3 §4 Filter bar — 2-col grid; search input + spacer/icon button overrides */
    .cl-filterbar { padding: 10px; }
    .cl-filterbar__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    /* Search input is free-text → full-width row, left-aligned (§6 typing exception) */
    .cl-filterbar__row > .cl-search { grid-column: 1 / -1; padding-top: 0; }
    .cl-filterbar__row > .cl-search input { height: 40px; font-size: 14px; }
    /* Spacer is meaningless in a fixed grid */
    .cl-filterbar__row > .cl-spacer { display: none; }
    /* §2/§6 Center-align dropdown trigger labels & button labels in their cells */
    .cl-filterbar__row > .cl-pill {
        width: 100%;
        height: 40px;
        justify-content: center;
        padding: 0 10px;
    }
    /* Icon buttons stretch to fill their grid cell so they read as tap targets */
    .cl-filterbar__row > .cl-iconbtn {
        width: 100%;
        height: 40px;
        flex: none;
    }
    /* Tag-mode segmented control: full-width when it appears between pills */
    .cl-filterbar__row > .cl-segmented {
        width: 100%;
        height: 40px;
    }
    .cl-filterbar__row > .cl-segmented button { flex: 1; height: 100%; }
    /* Active filter chip strip — already wraps; tighten the label */
    .cl-chipstrip { gap: 4px; }
    .cl-chipstrip__label { font-size: 10px; }
    .cl-chipstrip__clear { margin-left: 0; }

    /* §9 Top toolbar — single info row; hide density on mobile to save space */
    .cl-toolbar { padding: 6px 10px; gap: 8px; font-size: 11px; }
    .cl-toolbar__left { gap: 6px; flex-wrap: wrap; }
    .cl-toolbar__right > span:first-child { display: none; }   /* "Gustoća:" label */
    .cl-density { display: none; }

    /* §10 Cards — tighter spacing; values already have nowrap+ellipsis */
    .cl-cards { padding: 8px; gap: 8px; }
    .cl-card__head { padding: 8px 10px; gap: 8px; }
    .cl-card__title a { font-size: 13.5px; }
    .cl-card__meta { padding: 6px 10px 8px; gap: 6px 12px; }
    .cl-card__field-label { font-size: 9px; }
    .cl-card__field-value { font-size: 12px; }
    .cl-card__foot { padding: 6px 8px; }

    /* §7 Drawer — full-screen on mobile, no backdrop (nothing behind to dim) */
    .cl-drawer { width: 100vw; max-width: 100vw; box-shadow: none; }
    .cl-drawer-backdrop { display: none; }
    /* Body keeps scrolling between sticky head + foot (already flex-column flex:1) */
    .cl-drawer__head { padding: 14px 14px; }
    .cl-drawer__head h2 { font-size: 15px; }
    .cl-drawer__section { padding: 12px 14px; }
    .cl-drawer__foot { padding: 12px 14px; }
    .cl-drawer__foot .cl-btn { height: 44px; }
    /* §7 + §5 — sticky footer pair: secondary left, primary right (already in markup order) */

    /* §9 Footer pager — keep full pager but reduce hit-target spacing */
    .cl-pager { padding: 8px 10px; gap: 8px; }
    .cl-pager button { min-width: 32px; height: 32px; }
}

/* ───────────── Mass actions (selection + dropdown + bulk send progress) ───────────── */
/* Mirrors .cq-checkcol from redesign-client-quotes.css so the checkbox column looks identical across V2 CRM pages. */
.cl-table .cl-checkcol { width: 32px; padding-left: 14px !important; padding-right: 6px !important; }
.cl-table .cl-checkcol input { accent-color: var(--is-brand-blue); width: 14px; height: 14px; cursor: pointer; vertical-align: middle; }
.cl-table tr.is-selected { background: rgba(13, 110, 253, 0.05); }
.cl-card.is-checked { box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.35) inset; }

.cl-massbtn-wrap { position: relative; display: inline-flex; align-items: center; }
.cl-mass-count {
    position: absolute; top: -6px; right: -6px; z-index: 2;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--is-brand, #0d6efd); color: #fff; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.cl-btn--mass { padding: 6px 12px; border-radius: var(--is-radius-sm); cursor: pointer; }
.cl-btn--mass.is-disabled { opacity: 0.5; cursor: not-allowed; }

.cl-selectbar {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.25);
    border-radius: var(--is-radius-sm, 6px);
    padding: 8px 14px; margin: 8px 0; font-size: 0.9rem;
}
.cl-selectbar__left { display: inline-flex; align-items: center; gap: 10px; color: var(--is-fg-1); }
.cl-selectbar__left i { color: var(--is-brand, #0d6efd); }
.cl-selectbar__of { color: var(--is-fg-3); margin-left: 4px; }
.cl-selectbar__link {
    background: none; border: none; color: var(--is-brand, #0d6efd);
    text-decoration: underline; cursor: pointer; padding: 0; font-size: inherit; margin-left: 6px;
}
.cl-selectbar__link:hover { color: #0a58ca; }

/* Bulk-send progress banner */
.cl-bulksend-progress {
    background: #fff; border: 1px solid var(--is-border-1, #e1e4e8);
    border-left: 4px solid var(--is-brand, #0d6efd);
    border-radius: var(--is-radius-sm, 6px); padding: 10px 14px; margin: 8px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.cl-bulksend-progress__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cl-bulksend-progress__title { display: inline-flex; align-items: center; gap: 8px; color: var(--is-fg-1); flex: 1 1 auto; }
.cl-bulksend-progress__title i { color: var(--is-brand, #0d6efd); }
.cl-bulksend-progress__counts { color: var(--is-fg-2); font-weight: 500; margin-left: 6px; }
.cl-bulksend-progress__failed { color: var(--is-danger, #c73b3b); margin-left: 6px; }
.cl-bulksend-progress__close {
    background: none; border: none; cursor: pointer; color: var(--is-fg-3);
    width: 28px; height: 28px; border-radius: var(--is-radius-sm); display: inline-flex; align-items: center; justify-content: center;
}
.cl-bulksend-progress__close:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.cl-bulksend-progress__bar { height: 6px; background: rgba(13, 110, 253, 0.1); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.cl-bulksend-progress__bar-fill { height: 100%; background: var(--is-brand, #0d6efd); transition: width 0.3s ease; }
.cl-bulksend-progress__failed-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 0.85em; }
.cl-bulksend-progress__failed-list li { display: flex; align-items: center; gap: 6px; padding: 3px 0; color: var(--is-fg-2); }
.cl-bulksend-progress__failed-list li i { color: var(--is-warning, #d97706); }

/* Row email button (mirrors cq-rowact .is-email) */
.cl-rowact .is-email:hover { background: rgba(13, 110, 253, 0.08); color: var(--is-brand, #0d6efd); border-color: rgba(13, 110, 253, 0.25); }