/*
    The parts every catalogue screen shares: the toolbar above the table, the table's own small
    touches, the paging strip, the dialog form and the filter dialog.

    They live here rather than in each page's scoped stylesheet because products, services and
    prices draw the same screen with different columns — three copies of these rules would drift
    apart the first time one of them was adjusted.
*/

.pr-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ds-secondary);
    flex-wrap: wrap;
}

.pr-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 360px;
    max-width: 100%;
    padding: 0 10px;
}

.pr-search__icon { display: flex; color: var(--bs-icons-1); }

.pr-search input {
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 0;
    font: 500 13px/20px var(--font-sans);
    background: transparent;
}

.pr-filters { margin-left: auto; }
.pr-filters__icon { display: flex; margin-right: 6px; }

.pr-filters__count {
    margin-left: 7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--bs-cta);
    color: #fff;
    font: 700 11px/18px var(--font-sans);
    text-align: center;
    border-radius: 999px;
}

.pr-empty { margin: 18px; }

.pr-code { font-weight: 600; }
.pr-name { font-weight: 600; }
.pr-gtin { font-size: 12px; }
.pr-own { font-size: 11px; }

.pr-actions-head { text-align: right; }
.pr-actions { display: flex; gap: 6px; justify-content: flex-end; }
.pr-delete { color: var(--error-primary); }

.pr-paging {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--ds-table);
    gap: 12px;
    flex-wrap: wrap;
}

.pr-paging .t-description { font-size: 13px; }
.pr-paging__buttons { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- the dialog form -------------- */

.pr-form { display: flex; flex-direction: column; gap: 14px; }

.pr-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pr-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 13px/18px var(--font-sans);
    cursor: pointer;
}

/* ---------------------------------------------------------------- filters ---------------------- */

.pr-filter { display: flex; flex-direction: column; gap: 8px; }

.pr-filter__heading {
    font: 600 12px/16px var(--font-sans);
    margin-top: 10px;
}

.pr-filter__chips { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pr-filter__list { display: flex; flex-direction: column; gap: 8px; }

.pr-filter__chip {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font: 500 13px/18px var(--font-sans);
}

/*
    The tick from the design is the visible control; the real checkbox stays where a screen reader
    and the keyboard can still reach it.
*/
.pr-filter__box {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pr-filter__reset { align-self: flex-start; margin-top: 14px; }

/* Where and from when a price applies: the price dialog and the import's last step ask the same
   two questions, so they share how the choices look. */
.pb-edit__heading { font: 600 12px/16px var(--font-sans); margin-bottom: 8px; }
.pb-edit__heading:not(:first-of-type) { margin-top: 12px; }
.pb-edit__choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.pb-edit__choice-text { flex: 1; }
.pb-edit__choice-label { font: 600 13px/18px var(--font-sans); }
.pb-edit__choice-sub { display: block; font-size: 12px; }
.pb-edit__points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -6px 0 4px 26px; }
.pb-edit__date { margin-top: 8px; width: 170px; }

@media (max-width: 767.98px) {
  .pb-edit__date { width: 100%; }
}

/* ---------------------------------------------------------------- phone ------------------------ */

@media (max-width: 767.98px) {
    /* The design keeps the paired fields side by side in the sheet; two still fit a phone. */
    .pr-form__row { gap: 12px; }
    .pr-filters { margin-left: 0; }
    .pr-search { width: 100%; }

    /* Each choice of where and when as a card of its own, the chosen one outlined, as the design
       draws "Vrijedi za". */
    .pb-edit__choice {
        padding: 12px 14px;
        border: 1px solid var(--ds-secondary);
        border-radius: var(--r-lg);
        background: #fff;
    }

    .pb-edit__choice:has(.radio.is-on) {
        border-color: var(--bs-cta);
        background: var(--bg-light-brand);
        box-shadow: inset 0 0 0 .5px var(--bs-cta);
    }

    .pb-edit__choice-label { font: 700 14px/20px var(--font-sans); }
    .pb-edit__points { margin: 0 0 4px; }
}

/* ---------------------------------------------------------------------------------------------
   Ticking items for deletion (Proizvodi, Usluge). The square is what is seen; the real checkbox
   under it is what the keyboard and a screen reader reach. A ticked row is tinted, as the design has it.
   --------------------------------------------------------------------------------------------- */
.pr-pick-head,
.pr-pick { width: 40px; }

.pr-pick__hit { position: relative; display: inline-flex; cursor: pointer; }
.pr-pick__box { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pr-pick__hit:has(.pr-pick__box:focus-visible) .chk { outline: 2px solid var(--bs-cta); outline-offset: 2px; }
.pr-pick__hit .chk:not(.is-on):hover { border-color: var(--bs-cta); }

.tbl tbody tr.is-picked td { background: var(--bg-light-brand); }