/* ──────────────────────────────────────────────────────────
   Payments V2 redesign — scope: .cp-*  (Client Payments)
   Uses tokens from insync-tokens.css. V1 /crm/payments uses
   payments.css and is unaffected by anything here.
   ────────────────────────────────────────────────────────── */

.cp-screen {
    padding: 22px 28px 60px;
    max-width: 1680px;
    margin: 0 auto;
}

/* ── Page head ───────────────────────────────────── */

.cp-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.cp-pagehead__crumb {
    display: flex; gap: 6px; align-items: center;
    font: 500 12px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d);
    margin-bottom: 4px;
}
.cp-pagehead__crumb a { color: var(--is-fg-3, #6c757d); text-decoration: none; }
.cp-pagehead__crumb a:hover { color: var(--is-action-blue, #0494da); }
.cp-pagehead__crumb i { font-size: 9px; }

.cp-pagehead h1 {
    font: 700 26px/1.15 var(--is-font-sans, sans-serif);
    letter-spacing: -.01em;
    color: var(--is-fg-1, #141c32);
    margin: 0;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.cp-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 22px; padding: 0 8px;
    border-radius: 999px;
    background: var(--is-bg-surface-3, #eef2f6);
    color: var(--is-fg-2, #344057);
    font: 600 12px var(--is-font-sans, sans-serif);
    font-variant-numeric: tabular-nums;
}

.cp-vchip--new {
    display: inline-flex; align-items: center; gap: 4px;
    height: 20px; padding: 2px 9px;
    border-radius: 999px;
    background: var(--is-brand-blue-100, #e6f3fb);
    color: var(--is-brand-blue-700, #0a6aa0);
    border: 1px solid #cfe4f4;
    font: 700 10px var(--is-font-sans, sans-serif);
    letter-spacing: .05em; text-transform: uppercase; line-height: 1;
}

.cp-loadchip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 9px;
    border-radius: 999px;
    background: var(--is-bg-surface-3, #eef2f6);
    border: 1px solid var(--is-border-1, #d8dde5);
    font: 600 11px var(--is-font-mono, monospace);
    color: var(--is-fg-3, #6c757d);
}
.cp-loadchip b { color: var(--is-fg-2, #344057); font-weight: 600; }
.cp-loadchip__sep { color: var(--is-border-2, #b8c0cc); }

.cp-pagehead__sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.cp-vlink {
    font: 500 12px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d); text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    border: 1px dashed var(--is-border-2, #b8c0cc);
    cursor: pointer; background: transparent;
}
.cp-vlink:hover {
    color: var(--is-brand-blue, #0494da);
    border-color: var(--is-brand-blue, #0494da);
    background: var(--is-brand-blue-100, #e6f3fb);
    border-style: solid;
}

.cp-pagehead__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cp-massbtn-wrap { position: relative; }
.cp-mass-count {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: var(--is-brand-blue, #0494da); color: #fff;
    font: 700 10px var(--is-font-sans, sans-serif);
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 2; pointer-events: none;
}

/* ── Buttons ─────────────────────────────────────── */

.cp-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 14px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid transparent;
    font: 600 13px var(--is-font-sans, sans-serif);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.cp-btn i { font-size: 12px; }
.cp-btn--primary { background: var(--is-brand-blue, #0494da); color: #fff; border-color: var(--is-brand-blue, #0494da); }
.cp-btn--primary:hover { background: var(--is-brand-blue-700, #0a6aa0); border-color: var(--is-brand-blue-700, #0a6aa0); }
.cp-btn--ghost { background: #fff; color: var(--is-fg-2, #344057); border-color: var(--is-border-3, #d0d6df); }
.cp-btn--ghost:hover { background: var(--is-bg-surface-3, #eef2f6); color: var(--is-fg-1, #141c32); }
.cp-btn--success { background: var(--is-success, #26b050); color: #fff; border-color: var(--is-success, #26b050); }
.cp-btn--success:hover { background: #1c9744; border-color: #1c9744; }
.cp-btn--danger { background: var(--is-danger, #d92c2c); color: #fff; border-color: var(--is-danger, #d92c2c); }
.cp-btn--mass { background: #fff; color: var(--is-fg-2, #344057); border-color: var(--is-border-3, #d0d6df); }
.cp-btn--mass.is-disabled { opacity: .5; cursor: not-allowed; }
.cp-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.cp-btn:disabled { opacity: .5; cursor: not-allowed; }

.cp-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid var(--is-border-3, #d0d6df);
    background: #fff; color: var(--is-fg-2, #344057);
    cursor: pointer; transition: background .12s, color .12s, border-color .12s;
    padding: 0; box-sizing: border-box; flex: 0 0 36px;
    font-size: 13px;
}
.cp-iconbtn:hover { background: var(--is-bg-surface-3, #eef2f6); color: var(--is-fg-1, #141c32); }
.cp-iconbtn--brand { background: var(--is-brand-blue, #0494da); border-color: var(--is-brand-blue, #0494da); color: #fff; }
.cp-iconbtn--brand:hover { background: var(--is-brand-blue-700, #0a6aa0); border-color: var(--is-brand-blue-700, #0a6aa0); color: #fff; }

/* Row action variants — slightly smaller for in-table density. */
.cp-actions .cp-iconbtn { width: 30px; height: 30px; flex: 0 0 30px; font-size: 12px; }
.cp-iconbtn--verify {
    background: rgba(38,176,80,.10);
    color: var(--is-success, #26b050);
    border-color: rgba(38,176,80,.25);
}
.cp-iconbtn--verify:hover {
    background: var(--is-success, #26b050);
    color: #fff;
    border-color: var(--is-success, #26b050);
}
.cp-iconbtn--danger { color: var(--is-danger, #d92c2c); border-color: rgba(217,44,44,.4); }
.cp-iconbtn--danger:hover { background: rgba(217,44,44,.10); color: var(--is-danger, #d92c2c); }

/* Checkbox — match V2 convention (smaller + brand accent), per
   employeeslist-v2 / clientslist-v2 / quotes-v2. */
.blue-checkbox {
    accent-color: var(--is-brand-blue, #0494da);
    width: 14px; height: 14px;
    cursor: pointer; vertical-align: middle;
}

/* ── KPI money tiles ─────────────────────────────── */

.cp-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px; margin-bottom: 14px;
}
@media (max-width: 1199px) { .cp-summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cp-summary { grid-template-columns: repeat(2, 1fr); } }

.cp-tile {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--is-border-1, #d8dde5);
    border-radius: var(--is-radius-md, 10px);
    box-shadow: var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.05));
    cursor: pointer; text-align: left;
    transition: border-color .12s, box-shadow .12s;
    min-width: 0; font: 600 12px var(--is-font-sans, sans-serif);
}
.cp-tile:hover { border-color: var(--is-border-2, #b8c0cc); box-shadow: var(--is-shadow-2, 0 4px 12px rgba(20,28,50,.08)); }
.cp-tile.is-on { border-color: var(--is-brand-blue, #0494da); box-shadow: 0 0 0 3px rgba(4,148,218,.10), var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.05)); }

.cp-tile__icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.cp-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cp-tile__label {
    font: 600 11px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d); text-transform: uppercase; letter-spacing: .05em;
}
.cp-tile__value {
    font: 700 20px var(--is-font-sans, sans-serif);
    color: var(--is-fg-1, #141c32);
    font-variant-numeric: tabular-nums; line-height: 1.05;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-tile__sub { font: 500 11px var(--is-font-sans, sans-serif); color: var(--is-fg-3, #6c757d); }
.cp-tile__amount { font-variant-numeric: tabular-nums; }
.cp-tile__cur { font-weight: 600; opacity: .8; margin-left: 2px; }

.cp-tile--all      .cp-tile__icon { background: rgba(4,148,218,.10);  color: var(--is-brand-blue, #0494da); }
.cp-tile--verified .cp-tile__icon { background: rgba(38,176,80,.12);  color: var(--is-success, #26b050); }
.cp-tile--unverified .cp-tile__icon { background: rgba(230,167,0,.16); color: #b08000; }
.cp-tile--nobsl    .cp-tile__icon { background: rgba(217,44,44,.10);  color: var(--is-danger, #d92c2c); }
.cp-tile--month    .cp-tile__icon { background: rgba(111,62,176,.10); color: #6f3eb0; }
.cp-tile--unverified.is-on { border-color: #b08000; box-shadow: 0 0 0 3px rgba(230,167,0,.12), var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.05)); }
.cp-tile--nobsl.is-on { border-color: var(--is-danger, #d92c2c); box-shadow: 0 0 0 3px rgba(217,44,44,.10), var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.05)); }
.cp-tile--verified.is-on { border-color: var(--is-success, #26b050); box-shadow: 0 0 0 3px rgba(38,176,80,.10), var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.05)); }

/* ── Filter bar ──────────────────────────────────── */

.cp-filterbar {
    background: var(--is-bg-surface, #fff);
    border: 1px solid var(--is-border-1, #d8dde5);
    border-radius: var(--is-radius-md, 10px);
    box-shadow: var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.05));
    padding: 12px 14px; margin-bottom: 10px;
}
.cp-filterbar__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-search { position: relative; flex: 1 1 260px; min-width: 220px; }
.cp-search > i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--is-fg-3, #6c757d); font-size: 13px; pointer-events: none;
}
.cp-search input {
    width: 100%; height: 36px; padding: 0 12px 0 34px;
    border: 1px solid var(--is-border-3, #d0d6df);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff; font: 400 13.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-1, #141c32); box-sizing: border-box;
}
.cp-search input:focus { outline: none; border-color: var(--is-action-blue, #0494da); box-shadow: 0 0 0 3px rgba(4,148,218,.15); }

/* ── Pill (wraps Sf controls) ───────────────────── */

.cp-pill, .cp-sf-pill {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid var(--is-border-3, #d0d6df);
    background: #fff;
    font: 600 12.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-2, #344057);
    cursor: pointer; white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.cp-pill:hover { background: var(--is-bg-surface-3, #eef2f6); color: var(--is-fg-1, #141c32); }
.cp-pill.is-active {
    background: var(--is-brand-blue-100, #e6f3fb);
    color: var(--is-brand-blue-700, #0a6aa0);
    border-color: #b9dcef;
}
.cp-pill i.cp-pill__chev { font-size: 9px; color: var(--is-fg-3, #6c757d); margin-left: 2px; }
.cp-pill__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: var(--is-brand-blue, #0494da); color: #fff;
    font: 700 10px var(--is-font-sans, sans-serif);
}

/* Syncfusion overlay for CpFilterPill — transparent chrome on top of the
   visible pill, so the user clicks the pill and the Sf popup opens. Mirrors
   crm/quotes-v2 .cq-sf-pill pattern so cursor + sizing stay identical. */
.cp-screen .cp-sf-pill { position: relative; }
.cp-screen .cp-sf-pill .e-multiselect,
.cp-screen .cp-sf-pill .e-control-wrapper,
.cp-screen .cp-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;
    cursor: pointer !important;
}
.cp-screen .cp-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;
    cursor: pointer !important;
}
.cp-screen .cp-sf-pill .e-multi-select-wrapper .e-chips-collection { display: none !important; }
.cp-screen .cp-sf-pill .e-multi-select-wrapper input.e-control,
.cp-screen .cp-sf-pill .e-multi-select-wrapper .e-input-filter,
.cp-screen .cp-sf-pill .e-multi-select-wrapper .e-searcher,
.cp-screen .cp-sf-pill .e-input-group input.e-control {
    color: transparent !important;
    caret-color: transparent !important;
    background: transparent !important;
    cursor: pointer !important;
}
.cp-screen .cp-sf-pill .e-multi-select-wrapper .e-ddl-icon,
.cp-screen .cp-sf-pill .e-multi-select-wrapper .e-clear-icon,
.cp-screen .cp-sf-pill .e-input-group .e-ddl-icon,
.cp-screen .cp-sf-pill .e-input-group .e-clear-icon,
.cp-screen .cp-sf-pill .e-input-group .e-input-group-icon { display: none !important; }

/* ── Chipstrip ───────────────────────────────────── */

.cp-chipstrip {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--is-border-1, #d8dde5);
}
.cp-chipstrip__label { font: 500 12px var(--is-font-sans, sans-serif); color: var(--is-fg-3, #6c757d); margin-right: 4px; }
.cp-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 4px 0 10px;
    border-radius: 999px;
    background: var(--is-brand-blue-100, #e6f3fb);
    color: var(--is-brand-blue-700, #0a6aa0);
    border: 1px solid #b9dcef;
    font: 600 11.5px var(--is-font-sans, sans-serif);
}
.cp-chip__lead { font-size: 10px; opacity: .8; }
.cp-chip__close {
    width: 18px; height: 18px; border-radius: 999px;
    background: transparent; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--is-brand-blue-700, #0a6aa0); cursor: pointer;
}
.cp-chip__close:hover { background: rgba(4,148,218,.18); }
.cp-chipstrip__clear {
    background: transparent; border: 0;
    color: var(--is-fg-3, #6c757d);
    font: 500 12px var(--is-font-sans, sans-serif);
    cursor: pointer; padding: 0 10px;
    text-decoration: underline;
}
.cp-chipstrip__clear:hover { color: var(--is-danger, #d92c2c); }

/* ── Bulk selection bar (info only — light blue, no action buttons) ───────
   Mirrors crm/quotes-v2 .cq-selectbar exactly: light brand-blue background,
   count summary + select-all toggle link. All bulk actions live in the
   header "Odaberite akcije" dropdown so the user has a single entry point. */

.cp-selectbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 14px; margin: 10px 0;
    background: var(--is-brand-blue-100, #e6f3fb);
    border: 1px solid var(--is-brand-blue-200, #b9dcef);
    border-radius: var(--is-radius-sm, 6px);
}
.cp-selectbar__left {
    display: flex; align-items: center; gap: 10px;
    font: 500 13px var(--is-font-sans, sans-serif);
    color: var(--is-brand-blue-700, #0a6aa0);
}
.cp-selectbar__left b { font-weight: 700; }
.cp-selectbar__of { color: var(--is-brand-blue-700, #0a6aa0); opacity: .75; }
.cp-selectbar__link {
    background: transparent; border: 0;
    font: 700 12px var(--is-font-sans, sans-serif);
    color: var(--is-brand-blue-700, #0a6aa0);
    cursor: pointer; text-decoration: underline;
}

/* ── Table card ──────────────────────────────────── */

.cp-tablecard {
    background: #fff;
    border: 1px solid var(--is-border-1, #d8dde5);
    border-radius: var(--is-radius-md, 10px);
    box-shadow: var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.05));
    overflow: hidden;
}
.cp-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--is-border-1, #d8dde5);
    background: #fff;
    font: 500 12.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-2, #344057);
    gap: 12px; flex-wrap: wrap;
}
.cp-toolbar__left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-toolbar__left b { color: var(--is-fg-1, #141c32); font-weight: 700; }
.cp-toolbar__sep { color: var(--is-border-2, #b8c0cc); }
.cp-toolbar__right { display: flex; align-items: center; gap: 8px; color: var(--is-fg-3, #6c757d); }
.cp-pagesize select {
    height: 28px; padding: 0 8px;
    border: 1px solid var(--is-border-3, #d0d6df);
    border-radius: var(--is-radius-sm, 6px); background: #fff;
    font: 500 12.5px var(--is-font-sans, sans-serif);
}

.cp-table-wrap { overflow-x: auto; }
table.cp-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cp-table thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--is-bg-surface-3, #eef2f6);
    font: 600 10.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d);
    text-transform: uppercase; letter-spacing: .05em;
    padding: 10px 12px; text-align: left;
    border-bottom: 1px solid var(--is-border-1, #d8dde5);
    white-space: nowrap; user-select: none;
}
.cp-table .cp-th { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cp-table .cp-th i { font-size: 9px; opacity: .35; transition: opacity .15s, color .15s; color: var(--is-fg-3, #6c757d); }
.cp-table .cp-th:hover i { opacity: .8; }
.cp-table .cp-th.is-sorted i { opacity: 1; color: var(--is-action-blue, #0494da); }
.cp-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--is-border-1, #d8dde5);
    font: 500 13px var(--is-font-sans, sans-serif);
    color: var(--is-fg-1, #141c32);
    vertical-align: middle;
    height: 44px;
}
/* Checkbox column — mirrors quotes-v2 / employeeslist-v2: keep standard
   vertical padding so the row's border-bottom stays in line with neighbouring
   cells; only the horizontal padding is overridden to anchor the 14px
   checkbox inside the cell. */
.cp-table .cp-checkcol { width: 32px; padding-left: 14px !important; padding-right: 6px !important; }
.cp-table .cp-checkcol input { accent-color: var(--is-brand-blue, #0494da); width: 14px; height: 14px; cursor: pointer; vertical-align: middle; }
.cp-table tbody tr:last-child td { border-bottom: 0; }
.cp-table tbody tr.cp-row { transition: background .12s; }
.cp-table tbody tr.cp-row:hover { background: rgba(4,148,218,.04); }
.cp-table tbody tr.cp-row.is-selected { background: rgba(4,148,218,.06); }
.cp-table tbody tr.cp-row.is-unverified { background: rgba(230,167,0,.04); }
.cp-table tbody tr.cp-row.is-unverified:hover { background: rgba(230,167,0,.10); }

.cp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cp-amount__cur { font-size: 11px; color: var(--is-fg-3, #6c757d); margin-left: 3px; }

.cp-client { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-avatar {
    flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font: 700 11px var(--is-font-sans, sans-serif);
    letter-spacing: .03em;
}
.cp-client__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cp-status {
    display: inline-flex; align-items: center; gap: 4px;
    height: 22px; padding: 0 8px;
    border-radius: 999px;
    font: 600 11px var(--is-font-sans, sans-serif);
    white-space: nowrap;
}
.cp-status i { font-size: 10px; }
.cp-status--ok { background: rgba(38,176,80,.12); color: var(--is-success, #26b050); }
.cp-status--warn { background: rgba(230,167,0,.16); color: #b08000; }
.cp-status--muted { background: var(--is-bg-surface-3, #eef2f6); color: var(--is-fg-3, #6c757d); }

/* BSL cell: icon stays fixed-size, text span gets the ellipsis so it
   truncates with "…" instead of just hard-clipping. Pattern mirrors the
   "Način uplate" / "Klijent" columns where text directly inherits the
   cell's overflow rules. */
.cp-bsl-cell { overflow: hidden; }
.cp-bsl-summary {
    display: flex; align-items: center; gap: 4px;
    min-width: 0; max-width: 100%;
    font: 500 12px var(--is-font-sans, sans-serif);
    color: var(--is-fg-2, #344057);
}
.cp-bsl-summary i { color: var(--is-brand-blue, #0494da); font-size: 11px; flex-shrink: 0; }
.cp-bsl-summary__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.cp-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }

.cp-emptyrow td { padding: 0; }
.cp-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 20px;
    color: var(--is-fg-3, #6c757d);
    font: 500 13px var(--is-font-sans, sans-serif);
}
.cp-empty i { font-size: 28px; opacity: .4; margin-bottom: 8px; }

/* ── Pager ───────────────────────────────────────── */

.cp-pager {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    border-top: 1px solid var(--is-border-1, #d8dde5);
    background: #fff;
    font: 500 12.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d);
}
.cp-pager__info b { color: var(--is-fg-1, #141c32); font-weight: 600; }
.cp-pager__pages { display: flex; gap: 4px; align-items: center; }
.cp-pager__pages button {
    min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid var(--is-border-3, #d0d6df);
    background: #fff;
    border-radius: var(--is-radius-sm, 6px);
    color: var(--is-fg-2, #344057);
    font: 600 12.5px var(--is-font-sans, sans-serif);
    cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.cp-pager__pages button:hover:not(:disabled) {
    background: var(--is-bg-surface-3, #eef2f6); color: var(--is-fg-1, #141c32);
}
.cp-pager__pages button.is-active {
    background: var(--is-brand-blue, #0494da); color: #fff;
    border-color: var(--is-brand-blue, #0494da);
}
.cp-pager__pages button:disabled { opacity: .4; cursor: not-allowed; }
.cp-pager__ellipsis { padding: 0 4px; color: var(--is-fg-3, #6c757d); }

/* ── Inline edit row ─────────────────────────────── */

.cp-edit { background: transparent; }
.cp-edit__td { padding: 0 !important; }
.cp-edit__card {
    margin: 8px 12px;
    background: #fff;
    border: 1px solid var(--is-brand-blue, #0494da);
    border-radius: var(--is-radius-md, 10px);
    box-shadow: 0 6px 24px rgba(20,28,50,.08), 0 0 0 3px rgba(4,148,218,.06);
    padding: 14px 16px;
}
.cp-edit__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cp-edit__head-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--is-brand-blue-100, #e6f3fb);
    color: var(--is-brand-blue, #0494da);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.cp-edit__head-title { font: 700 14px var(--is-font-sans, sans-serif); color: var(--is-fg-1, #141c32); }
.cp-edit__head-sub { font: 500 12px var(--is-font-sans, sans-serif); color: var(--is-fg-3, #6c757d); }

.cp-edit__readonly {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 16px;
    padding: 10px 12px; margin-bottom: 14px;
    background: var(--is-bg-surface-3, #eef2f6);
    border-radius: var(--is-radius-sm, 6px);
}
@media (max-width: 900px) { .cp-edit__readonly { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-edit__ro-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-edit__ro-label {
    font: 600 10.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d); text-transform: uppercase; letter-spacing: .04em;
}
.cp-edit__ro-value {
    font: 500 13px var(--is-font-sans, sans-serif);
    color: var(--is-fg-1, #141c32);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cp-edit__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
}
@media (max-width: 900px) { .cp-edit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-edit__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cp-edit__field--bsl { grid-column: 1 / -1; }
.cp-edit__label {
    font: 600 11.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-2, #344057);
}
.cp-edit__input {
    height: 34px; padding: 0 10px;
    border: 1px solid var(--is-border-3, #d0d6df);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    font: 500 13px var(--is-font-sans, sans-serif);
    color: var(--is-fg-1, #141c32);
}
.cp-edit__input:focus { outline: none; border-color: var(--is-action-blue, #0494da); box-shadow: 0 0 0 3px rgba(4,148,218,.15); }

.cp-edit__bsl-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-edit__bsl-pill {
    flex: 1 1 240px;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 0 10px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid var(--is-border-3, #d0d6df);
    background: var(--is-bg-surface-3, #eef2f6);
    font: 500 12.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-2, #344057);
}
.cp-edit__bsl-pill.is-empty { color: var(--is-fg-3, #6c757d); font-style: italic; }
.cp-edit__bsl-pill i { color: var(--is-brand-blue, #0494da); font-size: 11px; }
.cp-edit__bsl-pill.is-empty i { color: var(--is-fg-3, #6c757d); }
.cp-edit__bsl-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 34px; padding: 0 12px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid var(--is-brand-blue, #0494da);
    background: #fff; color: var(--is-brand-blue, #0494da);
    font: 600 12.5px var(--is-font-sans, sans-serif);
    cursor: pointer;
}
.cp-edit__bsl-btn:hover { background: var(--is-brand-blue-100, #e6f3fb); }
.cp-edit__bsl-btn:disabled { opacity: .5; cursor: not-allowed; }
.cp-edit__bsl-clear {
    width: 34px; height: 34px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid var(--is-border-3, #d0d6df);
    background: #fff; color: var(--is-danger, #d92c2c);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.cp-edit__bsl-clear:hover { background: rgba(217,44,44,.06); border-color: var(--is-danger, #d92c2c); }

.cp-edit__foot {
    display: flex; align-items: center; justify-content: flex-end;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed var(--is-border-1, #d8dde5);
    gap: 12px; flex-wrap: wrap;
}
.cp-edit__verify {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 13px var(--is-font-sans, sans-serif);
    color: var(--is-fg-2, #344057);
    cursor: pointer; user-select: none;
}
.cp-edit__actions { display: flex; gap: 8px; align-items: center; }

/* Syncfusion overrides inside the edit card */
.cp-edit__card .e-date-wrapper,
.cp-edit__card .e-input-group {
    border: 1px solid var(--is-border-3, #d0d6df) !important;
    border-radius: var(--is-radius-sm, 6px) !important;
    background: #fff !important;
    min-height: 34px !important;
    box-shadow: none !important;
}
.cp-edit__card .e-date-wrapper.e-input-focus,
.cp-edit__card .e-input-group.e-input-focus {
    border-color: var(--is-action-blue, #0494da) !important;
    box-shadow: 0 0 0 3px rgba(4,148,218,.15) !important;
}
.cp-edit__card .e-numeric input.e-control {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 600 !important;
}
/* Razmak između broja i strelice gore/dole u SfNumericTextBox-u (inline edit kartica). */
.cp-edit__card .e-numeric .e-spin-down {
    margin-left: 10px !important;
}

/* ── BSL slide-over picker ──────────────────────── */

.cp-bslpicker-scrim {
    position: fixed; inset: 0;
    background: rgba(20,28,50,.40);
    z-index: 1500;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
}
.cp-bslpicker-scrim.is-open { opacity: 1; pointer-events: auto; }

.cp-bslpicker {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 90vw; max-width: 1700px;
    background: #fff;
    border-left: 1px solid var(--is-border-1, #d8dde5);
    box-shadow: -16px 0 40px rgba(20,28,50,.18);
    z-index: 1501;
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex; flex-direction: column;
}
.cp-bslpicker.is-open { transform: translateX(0); }

.cp-bslpicker__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; padding: 14px 16px;
    border-bottom: 1px solid var(--is-border-1, #d8dde5);
}
.cp-bslpicker__title {
    font: 700 15px var(--is-font-sans, sans-serif);
    color: var(--is-fg-1, #141c32);
    display: inline-flex; align-items: center; gap: 8px;
}
.cp-bslpicker__title i { color: var(--is-brand-blue, #0494da); }
.cp-bslpicker__sub { font: 500 12.5px var(--is-font-sans, sans-serif); color: var(--is-fg-3, #6c757d); margin-top: 4px; }

/* Single-row filter strip: search input grows, date pickers and buttons keep
   fixed widths. Flex-wrap so it stays graceful on narrower desktop widths. */
.cp-bslpicker__filters {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--is-border-1, #d8dde5);
}
/* Search + 2 date pickers share remaining space equally; buttons keep
   natural width on the right. All three controls = 1/3 each of the
   filter-strip area not taken by the buttons. */
.cp-bslpicker__search {
    flex: 1 1 0; min-width: 180px;
    height: 36px; padding: 0 10px;
    border: 1px solid var(--is-border-3, #d0d6df);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    font: 500 13px var(--is-font-sans, sans-serif);
    box-sizing: border-box;
}
.cp-bslpicker__search:focus { outline: none; border-color: var(--is-action-blue, #0494da); box-shadow: 0 0 0 3px rgba(4,148,218,.15); }
.cp-bslpicker__filters .cp-bslpicker__date { flex: 1 1 0; min-width: 180px; }
.cp-bslpicker__filters .e-date-wrapper,
.cp-bslpicker__filters .e-input-group { width: 100% !important; height: 36px !important; }

/* Body fills the drawer height between filters and footer. NO overflow on
   the body itself — scrolling happens inside the card's tablewrap so the
   card's toolbar (page sizer) and pager stay pinned. */
.cp-bslpicker__body {
    flex: 1 1 0; min-height: 0;
    display: flex; flex-direction: column;
    padding: 12px 16px;
    overflow: hidden;
}

/* The card shrinks to content (so page size = 10 doesn't leave a tall
   empty area under the rows), but is capped at the body height so it
   doesn't push the pager off-screen. When content exceeds that cap, the
   middle .cp-bslpicker__tablewrap shrinks first and starts scrolling,
   while toolbar (page sizer) and pager stay pinned. */
.cp-bslpicker__card {
    background: #fff;
    border: 1px solid var(--is-border-1, #d8dde5);
    border-radius: var(--is-radius-md, 10px);
    box-shadow: var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.05));
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: 100%; min-height: 0;
}
.cp-bslpicker__toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--is-border-1, #d8dde5);
    background: #fff;
    font: 500 12.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-2, #344057);
    gap: 12px; flex-wrap: wrap;
    flex-shrink: 0;
}
.cp-bslpicker__toolbar-left b { color: var(--is-fg-1, #141c32); font-weight: 700; }
.cp-bslpicker__toolbar-right { color: var(--is-fg-3, #6c757d); }

/* The scrolling region: takes its natural content height when small (no
   forced grow — that's what caused the empty area below 10 rows), shrinks
   when the card hits max-height so only the rows scroll. The thead is
   sticky inside this wrap (see existing rule on .cp-bslpicker__table
   thead th { position: sticky; top: 0 }). */
.cp-bslpicker__tablewrap {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}
.cp-bslpicker__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cp-bslpicker__table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--is-bg-surface-3, #eef2f6);
    font: 600 10px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d);
    text-transform: uppercase; letter-spacing: .04em;
    padding: 9px 8px; text-align: left;
    border-bottom: 1px solid var(--is-border-1, #d8dde5);
    white-space: nowrap;
    overflow: hidden;
}
.cp-bslpicker__table thead .cp-th {
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-bslpicker__table thead .cp-th i {
    font-size: 9px; opacity: .35; flex-shrink: 0;
    transition: opacity .15s, color .15s;
    color: var(--is-fg-3, #6c757d);
}
.cp-bslpicker__table thead .cp-th:hover i { opacity: .8; }
.cp-bslpicker__table thead .cp-th.is-sorted i { opacity: 1; color: var(--is-action-blue, #0494da); }
.cp-bslpicker__table tbody td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--is-border-1, #d8dde5);
    font: 500 12px var(--is-font-sans, sans-serif);
    color: var(--is-fg-1, #141c32);
    vertical-align: middle;
    height: 40px;
}
/* Compact currency suffix on the now-three amount columns. */
.cp-bslpicker__table .cp-amount__cur {
    font-size: 10px;
}
.cp-bslpicker__table tbody tr:last-child td { border-bottom: 0; }
.cp-bslpicker__table tbody tr:hover { background: rgba(4,148,218,.04); }
.cp-bslpicker__rowaction { text-align: right; padding: 6px 12px !important; }

/* Amount cell: never wrap into two lines — keeps "X,XX BAM" on one row. */
.cp-amount--nowrap { white-space: nowrap; }

.cp-bslpicker__pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px;
    border-top: 1px solid var(--is-border-1, #d8dde5);
    background: #fff;
    font: 500 12.5px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.cp-bslpicker__pager-info b { color: var(--is-fg-1, #141c32); font-weight: 600; }
.cp-bslpicker__pager-controls { display: flex; align-items: center; gap: 8px; }
.cp-bslpicker__pager-current { color: var(--is-fg-2, #344057); font-weight: 600; }
.cp-bslpicker__pager button {
    min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid var(--is-border-3, #d0d6df);
    background: #fff;
    border-radius: var(--is-radius-sm, 6px);
    color: var(--is-fg-2, #344057);
    font: 600 12.5px var(--is-font-sans, sans-serif);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.cp-bslpicker__pager button:hover:not(:disabled) {
    background: var(--is-bg-surface-3, #eef2f6); color: var(--is-fg-1, #141c32);
}
.cp-bslpicker__pager button:disabled { opacity: .4; cursor: not-allowed; }

.cp-bslpicker__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px;
    border-top: 1px solid var(--is-border-1, #d8dde5);
    background: var(--is-bg-surface-3, #eef2f6);
    flex-wrap: wrap;
}
.cp-bslpicker__hint {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 12px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d);
    flex: 1; min-width: 0;
}
.cp-bslpicker__hint i { color: var(--is-warning, #e6a700); font-size: 12px; }

/* ── Syncfusion mass-action dropdown popup ─────────────────
   ROOT CAUSE: Syncfusion mirrors SfDropDownButton's CssClass attribute onto
   the popup element itself, so .cp-btn + .cp-btn--mass land on the popup div
   too. The button styling (height, padding, white bg, border, etc.) then
   paints the popup as a small button-shaped rectangle behind the actual menu
   — the "ghost popup" the user sees alongside the real menu.
   FIX (lifted from crm/quotes-v2): strip those button styles when those
   classes land on .e-dropdown-popup, and paint the visible chrome on the
   inner <ul> instead. */
.e-dropdown-popup.cp-btn,
.e-dropdown-popup.cp-btn--mass,
body > .e-popup.e-popup-open.e-dropdown-popup.cp-btn,
body > .e-popup.e-popup-open.e-dropdown-popup.cp-btn--mass {
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    cursor: default !important;
    transition: none !important;
    font: inherit !important;
    white-space: normal !important;
}
body > .e-popup.e-popup-open.e-dropdown-popup ul.e-dropdown-menu,
.e-dropdown-popup ul.e-dropdown-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    border: 1px solid var(--is-border-1, #e5e7eb) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(20, 28, 50, 0.16) !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    min-width: 220px !important;
}
body > .e-popup.e-popup-open.e-dropdown-popup .e-item,
.e-dropdown-popup .e-item {
    background-color: #ffffff !important;
    color: #212529 !important;
}
body > .e-popup.e-popup-open.e-dropdown-popup .e-item:hover,
body > .e-popup.e-popup-open.e-dropdown-popup .e-item.e-focused,
.e-dropdown-popup .e-item:hover,
.e-dropdown-popup .e-item.e-focused {
    background-color: #f1f3f5 !important;
    color: #212529 !important;
}

/* ── Mobile card stack ────────────────────────────
   Desktop default: cards hidden, table visible.
   ≤ 600px: cards visible, table hidden.
   Per MobileLayoutStandards.md §10 — values never wrap, ellipsis on overflow. */

.cp-cards-wrap { display: none; padding: 12px; flex-direction: column; gap: 10px; }
.cp-card {
    background: #fff;
    border: 1px solid var(--is-border-1, #d8dde5);
    border-radius: var(--is-radius-md, 10px);
    display: flex; flex-direction: column;
    transition: border-color .12s, box-shadow .12s;
    overflow: hidden;
}
.cp-card:hover { border-color: var(--is-border-2, #b8c0cc); box-shadow: var(--is-shadow-1, 0 1px 2px rgba(20,28,50,.05)); }
.cp-card.is-checked { border-color: var(--is-brand-blue, #0494da); background: rgba(4,148,218,.02); }
.cp-card.is-unverified { border-left: 3px solid #b08000; }

.cp-card__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-width: 0; }
.cp-card__check { width: 14px; height: 14px; flex-shrink: 0; accent-color: var(--is-brand-blue, #0494da); }
.cp-card__title {
    flex: 1; min-width: 0;
    font: 700 14px var(--is-font-sans, sans-serif);
    color: var(--is-fg-1, #141c32);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cp-card__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    padding: 8px 12px 10px;
    border-top: 1px dashed var(--is-border-1, #d8dde5);
}
.cp-card__field { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cp-card__field--wide { grid-column: 1 / -1; }
.cp-card__field-label {
    font: 600 10px var(--is-font-sans, sans-serif);
    color: var(--is-fg-3, #6c757d);
    text-transform: uppercase; letter-spacing: .05em;
    white-space: nowrap;
}
.cp-card__field-value {
    font: 500 13px var(--is-font-sans, sans-serif);
    color: var(--is-fg-1, #141c32);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Inside the mobile/tablet card stack, the amount value sits below its label
   in a vertical flex column — right-align (inherited from .cp-amount used by
   the desktop table) would push "585.00 BAM" away from the "IZNOS" header.
   Force left-align so the value lines up with the field label like every
   other card field. */
.cp-card__field-value.cp-amount { text-align: left; }

.cp-card__foot {
    display: flex; gap: 6px; justify-content: flex-end;
    padding: 8px 12px;
    border-top: 1px dashed var(--is-border-1, #d8dde5);
    background: var(--is-bg-surface-3, #eef2f6);
}

/* =============================================================
 * Responsive breakpoints — mirrors clients-v2/quotes-v2 cadence.
 *
 *   ≤ 1199 px  → swap data table for card stack (tablet & mobile).
 *                Without this, payments-v2's wide 9-10 column table
 *                gets unreadably narrow on tablets. Matches clients-v2
 *                (which switches to cards at the same threshold).
 *
 *   601–1024 px → tablet: card mode + 3-col tile summary + filter
 *                  row gap. Page head and filter bar keep desktop
 *                  layout (per MobileLayoutStandards.md §1).
 *
 *   ≤ 600 px   → mobile: full stack — page head column, filter pair
 *                grid, 2-col tiles, full-screen BSL drawer, single
 *                column inline edit.
 * ============================================================= */

/* Tablet + mobile: replace the data table with the card stack.
   Above 1199 px the desktop table remains. */
@media (max-width: 1199px) {
    .cp-table-wrap { display: none; }
    .cp-cards-wrap { display: flex; }
}

@media (max-width: 600px) {

    /* §8 Page head — stack actions full-width below the title */
    .cp-screen { padding: 12px 12px 56px; }
    .cp-pagehead { flex-direction: column; align-items: stretch; gap: 10px; }
    .cp-pagehead h1 { font-size: 22px; }
    .cp-pagehead__actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
    .cp-pagehead__actions .cp-btn,
    .cp-pagehead__actions .cp-massbtn-wrap { width: 100%; }
    .cp-pagehead__actions .cp-massbtn-wrap .cp-btn--mass { width: 100%; }
    /* §2 — mass action dropdown full-width centered on its own row */
    .cp-pagehead__actions .e-dropdown-btn {
        width: 100% !important;
        height: 40px !important;
        justify-content: center !important;
    }

    /* KPI tiles — 2-col compact (matches cl-summary mobile) */
    .cp-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
    .cp-tile { padding: 10px 12px; gap: 10px; min-width: 0; }
    .cp-tile__icon { width: 32px; height: 32px; font-size: 13px; }
    .cp-tile__value { font-size: 18px; }
    .cp-tile__label { font-size: 10px; }
    .cp-tile__sub { font-size: 10px; }
    .cp-tile__body { min-width: 0; }

    /* §3 §4 Filter bar — 2-col grid; search input full-width row */
    .cp-filterbar { padding: 10px; }
    .cp-filterbar__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    /* Search input — free-text → full-width row, left-aligned (§6 typing exception) */
    .cp-filterbar__row > .cp-search {
        grid-column: 1 / -1;
        flex: none;
        min-width: 0;
    }
    .cp-filterbar__row > .cp-search input { height: 40px; font-size: 14px; }
    /* Inline spacer div is meaningless in a fixed grid */
    .cp-filterbar__row > div[style*="flex: 1"] { display: none; }
    /* §2/§6 Pills fill their grid cell, centered label, truncate to avoid overflow.
       Desktop .cp-pill has `white-space: nowrap` without `box-sizing: border-box`,
       which makes long labels overflow the 50% column on mobile — fix both here. */
    .cp-filterbar__row > .cp-pill,
    .cp-filterbar__row > .cp-sf-pill {
        display: flex;
        width: 100%;
        height: 40px;
        padding: 0 10px;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        min-width: 0;
        overflow: hidden;
    }
    /* Inner label span needs min-width: 0 so flex children can shrink + ellipsis */
    .cp-filterbar__row > .cp-pill > span,
    .cp-filterbar__row > .cp-sf-pill > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 0 1 auto;
    }
    /* Sf control sits absolutely inside the pill — give it the new 40px height
       so the click target matches the visible pill chrome */
    .cp-filterbar__row > .cp-sf-pill .e-multi-select-wrapper,
    .cp-filterbar__row > .cp-sf-pill .e-input-group {
        min-height: 40px !important;
        height: 40px !important;
    }
    /* §4 §5 — Icon buttons: full-width when alone (single search button),
       50/50 pair when both Search + Clear render in the same row (HasAnyFilter).
       :has() flips the layout based on sibling count, same trick as quotes-v2. */
    .cp-filterbar__row > .cp-iconbtn {
        grid-column: 1 / -1;
        width: 100%;
        height: 40px;
        flex: none;
    }
    .cp-filterbar__row:has(.cp-iconbtn + .cp-iconbtn) > .cp-iconbtn { grid-column: auto; }

    /* Active filter chipstrip — tighten spacing */
    .cp-chipstrip { gap: 4px; }
    .cp-chipstrip__label { font-size: 10px; }
    .cp-chipstrip__clear { margin-left: 0; }

    /* §9 Top toolbar — single info row */
    .cp-toolbar { padding: 6px 10px; gap: 8px; font-size: 11px; }
    .cp-toolbar__left { gap: 6px; flex-wrap: wrap; }

    /* §10 Card stack tightening for mobile (cards themselves are already
       enabled by the ≤ 1199px swap above; here we just compress the spacing) */
    .cp-cards-wrap { padding: 8px; gap: 8px; }
    .cp-card__head { padding: 8px 10px; gap: 8px; }
    .cp-card__title { font-size: 13.5px; }
    .cp-card__meta { padding: 6px 10px 8px; gap: 6px 12px; }
    .cp-card__field-label { font-size: 9px; }
    .cp-card__field-value { font-size: 12px; }
    .cp-card__foot { padding: 6px 8px; }

    /* §9 Footer pager — keep full pager but compact + reduce hit-target spacing */
    .cp-pager { padding: 8px 10px; gap: 8px; flex-direction: column; align-items: stretch; }
    .cp-pager__info { text-align: center; }
    .cp-pager__pages { justify-content: center; flex-wrap: wrap; }
    .cp-pager button { min-width: 32px; height: 32px; }

    /* §7 BSL slide-over — full-screen on mobile, no scrim (nothing behind) */
    .cp-bslpicker { width: 100vw; max-width: 100vw; border-left: 0; box-shadow: none; }
    .cp-bslpicker-scrim { display: none; }
    .cp-bslpicker__head { padding: 12px 14px; }
    .cp-bslpicker__title { font-size: 14px; }
    .cp-bslpicker__sub { font-size: 11.5px; }
    .cp-bslpicker__filters { flex-direction: column; align-items: stretch; padding: 10px 14px; gap: 8px; }
    .cp-bslpicker__filters .cp-bslpicker__date { width: 100%; flex: 1 1 100%; }
    .cp-bslpicker__filters .e-date-wrapper,
    .cp-bslpicker__filters .e-input-group { width: 100% !important; height: 40px !important; }
    .cp-bslpicker__filters .cp-btn { width: 100%; height: 44px; justify-content: center; }
    .cp-bslpicker__body { padding: 10px 14px; }
    .cp-bslpicker__toolbar { padding: 8px 12px; }
    /* BSL table → stacked card rows */
    .cp-bslpicker__table thead { display: none; }
    .cp-bslpicker__table, .cp-bslpicker__table tbody, .cp-bslpicker__table tr { display: block; width: 100%; }
    .cp-bslpicker__table tr {
        border: 1px solid var(--is-border-1, #d8dde5);
        border-radius: var(--is-radius-sm, 6px);
        padding: 8px; margin-bottom: 8px;
    }
    .cp-bslpicker__table td { display: block; padding: 4px 0; border: 0; height: auto; }
    .cp-bslpicker__rowaction { text-align: left; padding: 8px 0 0 !important; }
    .cp-bslpicker__foot { padding: 12px 14px; }
    .cp-bslpicker__foot .cp-btn { height: 44px; }

    /* Inline edit card — single column on mobile, full-width action pair */
    .cp-edit__readonly { grid-template-columns: 1fr 1fr; }
    .cp-edit__grid { grid-template-columns: 1fr; }
    .cp-edit__foot { flex-direction: column; align-items: stretch; gap: 8px; }
    .cp-edit__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .cp-edit__actions .cp-btn { width: 100%; justify-content: center; }
    .cp-edit__verify { justify-content: center; }

    /* Bulk selection bar — compact */
    .cp-selectbar { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
}

/* Tablet (601 – 1024 px) — desktop page head/filters, but the data area
   is in card mode (set by the ≤ 1199 px swap above). Comfortable card
   spacing here so tablet doesn't reuse the cramped mobile compression.
   Per MobileLayoutStandards.md §1: tablet keeps the desktop layout
   chrome; only the cramped data table is swapped for cards. */
@media (max-width: 1024px) and (min-width: 601px) {
    .cp-summary { grid-template-columns: repeat(3, 1fr); }
    .cp-filterbar__row { row-gap: 8px; }
    /* Comfortable card spacing for tablet — roomier than mobile */
    .cp-cards-wrap { padding: 14px; gap: 12px; }
    .cp-card__head { padding: 12px 14px; }
    .cp-card__meta { padding: 10px 14px 12px; gap: 10px 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cp-card__foot { padding: 10px 12px; }
}