/* /Components/Layout/MainLayout.razor.rz.scp.css */
.shell-plain[b-cultgw87in] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-primary);
}

.shell-plain__bar[b-cultgw87in] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 0 32px;
    background: #fff;
    border-bottom: 1px solid var(--ds-secondary);
}

.shell-plain__product[b-cultgw87in] {
    font: 600 10px/14px var(--font-sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-cta);
}

.shell-plain__spacer[b-cultgw87in] {
    flex: 1;
}

.shell-plain__logout[b-cultgw87in] {
    font-size: 12px;
}

.shell-plain[b-cultgw87in]  .page {
    height: auto;
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
/* Nadzorna ploča — raspored koji dizajn crta iznad ui-kita. */

.dash-kpis[b-qf3h84thox] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.kpi__val--good[b-qf3h84thox] { color: #3B6D11; }
.kpi__val--warn[b-qf3h84thox] { color: #854F0B; }

.dash-note[b-qf3h84thox] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--r-lg);
    margin-bottom: 16px;
    font: 500 13px/18px var(--font-sans);
}

/* Upozorenje o preusmjeravanju: objava postoji, ali propis je traži na stranicama obveznika. */
.dash-note--warn[b-qf3h84thox] {
    background: #FAEEDA;
    border: 1px solid rgba(133, 79, 11, 0.2);
    color: #854F0B;
}

.dash-note--warn[b-qf3h84thox]  .ic { color: #854F0B; flex: none; }

.dash-note__link[b-qf3h84thox] { color: #854F0B; text-decoration: underline; }

.dash-note--done[b-qf3h84thox] {
    background: #EAF3DE;
    border: 1px solid rgba(59, 109, 17, 0.2);
    color: #3B6D11;
}

.dash-grid[b-qf3h84thox] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}

.dash-column[b-qf3h84thox] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.dash-missing[b-qf3h84thox] {
    padding: 0;
    overflow: hidden;
    border-left-color: #854F0B;
}

.dash-missing__body[b-qf3h84thox] { padding: 16px 18px; }

/* All the prescribed data is there: a green accent and one plain sentence instead of a list. */
.dash-missing--ok[b-qf3h84thox] { border-left-color: #3B6D11; }

.dash-ok[b-qf3h84thox] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #EAF3DE;
    border-radius: var(--r-lg);
    color: #3B6D11;
}

.dash-ok__mark[b-qf3h84thox] {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #3B6D11;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 12px/1 var(--font-sans);
}

.dash-ok__title[b-qf3h84thox] { display: block; font: 700 14px/20px var(--font-sans); }
.dash-ok__sub[b-qf3h84thox] { display: block; font-size: 12px; color: #3B6D11; }
.dash-missing__intro[b-qf3h84thox] { font-size: 13px; margin-bottom: 14px; }

.dash-missing__list[b-qf3h84thox] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.dash-missing__row[b-qf3h84thox] { display: flex; align-items: center; gap: 10px; }
.dash-missing__row[b-qf3h84thox]  .lnk { font-size: 14px; }
.dash-missing__row .t-description[b-qf3h84thox] { font-size: 12px; }

.dash-code[b-qf3h84thox] { font-weight: 700; }

.dash-public[b-qf3h84thox] { padding: 0; overflow: hidden; }
.dash-public__body[b-qf3h84thox] { padding: 16px 18px; }
.dash-public__url[b-qf3h84thox] { margin-bottom: 12px; color: var(--bs-cta); }
.dash-public__actions[b-qf3h84thox] { display: flex; gap: 8px; }

/* The mark for a link that leaves the application, a step quieter than the words beside it. */
.dash-public__out[b-qf3h84thox] { display: inline-flex; margin-left: 6px; opacity: .7; }

.tbl-card[b-qf3h84thox] { overflow: auto; }

/* ---------------------------------------------------------------- the first day ---------------- */

.dash-steps[b-qf3h84thox] {
    padding: 0;
    overflow: hidden;
    margin-bottom: 16px;
}

.dash-steps__body[b-qf3h84thox] {
    padding: 18px;
}

.dash-steps__intro[b-qf3h84thox] {
    font-size: 13px;
    margin-bottom: 14px;
}

.dash-step[b-qf3h84thox] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--ds-table);
}

.dash-step:first-of-type[b-qf3h84thox] {
    border-top: 0;
}

.dash-step__mark[b-qf3h84thox] {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid var(--ds-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 12px/24px var(--font-sans);
    color: var(--text-secondary);
    flex: none;
}

.dash-step__text[b-qf3h84thox] {
    flex: 1;
}

.dash-step__title[b-qf3h84thox] {
    display: block;
    font: 600 13px/18px var(--font-sans);
}

.dash-step__sub[b-qf3h84thox] {
    display: block;
    font-size: 12px;
    line-height: 18px;
}

.dash-step .btn[b-qf3h84thox] {
    text-decoration: none;
    flex: none;
}

/* A step already behind them stays visible, crossed out, so the order still reads as a whole. */
.dash-step.is-done .dash-step__title[b-qf3h84thox] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.dash-step.is-done .dash-step__mark[b-qf3h84thox] {
    background: #EAF3DE;
    border-color: #3B6D11;
    color: #3B6D11;
}

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

@media (max-width: 767.98px) {
    .dash-kpis[b-qf3h84thox] { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }

    .dash-grid[b-qf3h84thox] { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .dash-column[b-qf3h84thox] { gap: 14px; }

    .dash-note[b-qf3h84thox] { align-items: flex-start; margin-bottom: 14px; }

    .dash-missing__body[b-qf3h84thox],
    .dash-public__body[b-qf3h84thox],
    .dash-steps__body[b-qf3h84thox] { padding: 14px 16px; }

    .dash-missing__row[b-qf3h84thox] { flex-wrap: wrap; gap: 2px 10px; min-height: 44px; }

    .dash-step[b-qf3h84thox] { flex-wrap: wrap; }
    .dash-step .btn[b-qf3h84thox] { margin-left: 36px; }

    .dash-public__actions[b-qf3h84thox] { flex-wrap: wrap; }
    .dash-public__url[b-qf3h84thox] { word-break: break-all; }

    /* The status list sits inside the column, so it keeps its card's edges. */
    .dash-column .tbl-card[b-qf3h84thox] { margin-left: 0; margin-right: 0; border-radius: var(--r-lg); }
    .dash-code[b-qf3h84thox] { font-weight: 700; }
    .dash-column td[data-role="value"][b-qf3h84thox] { font: 600 14px/20px var(--font-sans); }
}
/* /Components/Pages/Admin/Embed.razor.rz.scp.css */
/*
    Ugradnja na web, as the design draws it: the options and the snippet on the left
    and the preview, twice as wide, on the right; on a narrow screen the preview drops below.
*/

.em-layout[b-gsp0e27pk6] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.em-side[b-gsp0e27pk6] {
    flex: 1 1 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.em-card[b-gsp0e27pk6] {
    padding: 0;
    overflow: hidden;
}

.em-card__head[b-gsp0e27pk6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.em-card__body[b-gsp0e27pk6] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.em-select[b-gsp0e27pk6] {
    width: 100%;
}

/* The design's segmented control: a grey track, the chosen part lifted onto white. */
.em-seg[b-gsp0e27pk6] {
    display: inline-flex;
    align-self: flex-start;
    gap: 2px;
    padding: 3px;
    background: var(--neutral-05);
    border-radius: var(--r-lg);
}

.em-seg__btn[b-gsp0e27pk6] {
    border: 0;
    cursor: pointer;
    padding: 5px 12px;
    white-space: nowrap;
    border-radius: 6px;
    font: 600 12px/16px var(--font-sans);
    background: transparent;
    color: var(--text-secondary);
}

.em-seg__btn.is-on[b-gsp0e27pk6] {
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.em-colors[b-gsp0e27pk6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.em-swatches[b-gsp0e27pk6] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.em-swatch[b-gsp0e27pk6] {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    cursor: pointer;
    border: 0;
    padding: 0;
    background: var(--sw);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}

.em-swatch.is-on[b-gsp0e27pk6] {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bs-cta);
}

.em-swatch--accent.is-on[b-gsp0e27pk6] {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sw);
}

.em-toggles[b-gsp0e27pk6] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ds-table);
    margin: 0 -18px -16px;
}

.em-copy[b-gsp0e27pk6] {
    font: 600 12px/16px var(--font-sans);
    background: none;
    border: 0;
    padding: 0;
}

.em-hint[b-gsp0e27pk6] {
    font-size: 13px;
    margin-bottom: -6px;
}

.em-snippet[b-gsp0e27pk6] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.em-preview[b-gsp0e27pk6] {
    flex: 2 1 460px;
    min-width: 0;
}

.em-preview__note[b-gsp0e27pk6] {
    font: 500 12px/16px var(--font-sans);
    white-space: nowrap;
}

.em-preview__stage[b-gsp0e27pk6] {
    background: var(--neutral-03);
    padding: 20px;

    /* A catalogue of hundreds would stretch the card past every other; the view scrolls instead. */
    max-height: 720px;
    overflow: auto;
}

/* The phone's tabs over the three cards; the wide screen shows the cards themselves. */
.em-tabs[b-gsp0e27pk6] { display: none; }

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

@media (max-width: 767.98px) {
    .em-tabs[b-gsp0e27pk6] {
        display: flex;
        gap: 2px;
        padding: 3px;
        margin-bottom: 12px;
        background: var(--neutral-05);
        border-radius: var(--r-lg);
    }

    .em-tabs__btn[b-gsp0e27pk6] {
        flex: 1;
        height: 36px;
        padding: 0 6px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        font: 600 13px/18px var(--font-sans);
        color: var(--text-secondary);
        cursor: pointer;
    }

    .em-tabs__btn.is-on[b-gsp0e27pk6] {
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
        font-weight: 700;
        color: var(--text-primary);
    }

    .em-pane--away[b-gsp0e27pk6] { display: none; }

    .em-layout[b-gsp0e27pk6],
    .em-side[b-gsp0e27pk6] { gap: 12px; }

    .em-preview[b-gsp0e27pk6] { flex-basis: 100%; }
    .em-preview__stage[b-gsp0e27pk6] { padding: 12px; max-height: none; }

    .em-card__body[b-gsp0e27pk6] { padding: 16px; }
    .em-toggles[b-gsp0e27pk6] { margin: 0 -16px -16px; }

    /* The design's larger swatches and segments, sized for a finger. */
    .em-seg[b-gsp0e27pk6] { display: flex; align-self: stretch; }
    .em-seg__btn[b-gsp0e27pk6] { flex: 1; height: 36px; font: 600 13px/18px var(--font-sans); }
    .em-swatches[b-gsp0e27pk6] { gap: 12px; }
    .em-swatch[b-gsp0e27pk6] { width: 36px; height: 36px; }
}
/* /Components/Pages/Admin/Import.razor.rz.scp.css */
/*
    The import wizard: three steps, each one a screen of its own.

    Prepared for the phone: the two cards of the first step and the field grid of the second fall to
    one column, and the wide preview of the user's own table scrolls sideways inside its card rather
    than stretching the page.
*/

/* The steps, after the design: a bar of their own, dots joined by lines that fill in. */
.im-steps[b-b8n7tfb1at] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--bg-cards, #fff);
    border: 1px solid var(--ds-secondary);
    border-radius: var(--r-lg);
}

.im-steps__line[b-b8n7tfb1at] {
    flex: 1;
    min-width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--ds-secondary);
    transition: background .2s;
}

.im-steps__line.is-on[b-b8n7tfb1at] { background: var(--bs-cta); }

.im-step[b-b8n7tfb1at] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.im-step:disabled[b-b8n7tfb1at] { cursor: default; }

.im-step__dot[b-b8n7tfb1at] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font: 700 12px/1 var(--font-sans);
    background: var(--neutral-05);
    color: var(--text-secondary);
    transition: all .2s;
}

.im-step.is-done .im-step__dot[b-b8n7tfb1at] { background: var(--bs-cta); color: #fff; }

.im-step.is-on .im-step__dot[b-b8n7tfb1at] {
    background: #fff;
    color: var(--bs-cta);
    box-shadow: inset 0 0 0 2px var(--bs-cta), 0 0 0 4px var(--bg-light-brand-2);
}

.im-step__text[b-b8n7tfb1at] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.im-step__label[b-b8n7tfb1at] { font: 600 13px/18px var(--font-sans); color: var(--text-secondary); }
.im-step.is-on .im-step__label[b-b8n7tfb1at],
.im-step.is-done .im-step__label[b-b8n7tfb1at] { color: var(--text-primary); }

.im-step__sub[b-b8n7tfb1at] { font: 400 11px/14px var(--font-sans); color: var(--text-secondary); }

/* The template comes before there is any file, so it is a link beside the button, not a second button. */
.im-template-link[b-b8n7tfb1at] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.im-error[b-b8n7tfb1at] { margin-bottom: 16px; }

.im-columns[b-b8n7tfb1at] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

.im-card[b-b8n7tfb1at] {
    padding: 0;
    overflow: hidden;
    margin-bottom: 16px;
}

.im-card__body[b-b8n7tfb1at] { padding: 18px; }

.im-note[b-b8n7tfb1at] {
    font-size: 12px;
    margin-bottom: 16px;
}

.im-drop__label[b-b8n7tfb1at] { margin-bottom: 6px; }

/*
    The file input covers the whole box rather than sitting inside it, so the box itself is both the
    drop target and the button. A styled label next to a hidden input would take the click but not
    the drop.
*/
.im-drop[b-b8n7tfb1at] {
    position: relative;
    display: block;
    border: 1.5px dashed var(--ds-table-2);
    border-radius: 8px;
    padding: 22px;
    text-align: center;
    margin-bottom: 6px;
    cursor: pointer;
}

.im-drop:hover[b-b8n7tfb1at] { border-color: var(--bs-cta); }
.im-drop.is-filled[b-b8n7tfb1at] { background: var(--bg-light-brand-2); border-style: solid; border-color: var(--bs-cta); }

/* ::deep because the input is rendered by InputFile, not by this component's own markup. */
.im-drop[b-b8n7tfb1at]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.im-drop__name[b-b8n7tfb1at] { font: 600 14px/20px var(--font-sans); }
.im-drop.is-filled .im-drop__name[b-b8n7tfb1at] { color: var(--bs-cta); }
.im-drop__note[b-b8n7tfb1at] { font-size: 12px; margin-top: 4px; }

/* Field draws its own element, so the spacing has to reach through to it. */
.im-card__body[b-b8n7tfb1at]  .im-kind { margin-bottom: 16px; }
.im-select[b-b8n7tfb1at] { width: 100%; }

.im-actions[b-b8n7tfb1at] { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.im-actions .btn[b-b8n7tfb1at] { text-decoration: none; }

.im-template[b-b8n7tfb1at] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.im-template__name[b-b8n7tfb1at] { font: 700 14px/20px var(--font-sans); }
.im-template__note[b-b8n7tfb1at] { font-size: 12px; }

/* ---------------------------------------------------------------- 2. the columns --------------- */

.im-map__head[b-b8n7tfb1at] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.im-map__sheet[b-b8n7tfb1at] {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 13px/18px var(--font-sans);
}

.im-map__sheet-select[b-b8n7tfb1at] { height: 30px; }

.im-fields[b-b8n7tfb1at] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 18px;
}

.im-fields__label[b-b8n7tfb1at] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.im-fields__required[b-b8n7tfb1at] {
    font-size: 11px;
    padding: 0 7px;
}

.im-fields__hint[b-b8n7tfb1at] {
    font-size: 12px;
    margin-top: 4px;
}

.im-preview[b-b8n7tfb1at] { margin-bottom: 16px; }
.im-preview__scroll[b-b8n7tfb1at] { overflow-x: auto; }
.im-preview__table[b-b8n7tfb1at] { min-width: 1100px; }
.im-preview__cell[b-b8n7tfb1at] { font-size: 12px; }

.im-footer[b-b8n7tfb1at] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.im-footer--review[b-b8n7tfb1at] { flex-wrap: wrap; }

.im-remember[b-b8n7tfb1at] {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 13px/18px var(--font-sans);
    margin-right: auto;
    cursor: pointer;
}

/* ---------------------------------------------------------------- 3. what changes -------------- */

.im-kpis[b-b8n7tfb1at] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.im-kpi--new[b-b8n7tfb1at] { color: #3B6D11; }
.im-kpi--same[b-b8n7tfb1at] { color: var(--text-secondary); }
.im-kpi--warn[b-b8n7tfb1at] { color: #854F0B; }

.im-warnings[b-b8n7tfb1at] {
    padding: 14px 18px;
    margin-bottom: 16px;
    border-left-color: #854F0B;
}

.im-warnings__title[b-b8n7tfb1at] {
    font: 600 13px/18px var(--font-sans);
    margin-bottom: 6px;
}

.im-warnings__note[b-b8n7tfb1at] { margin-top: 6px; }

.im-scope__grid[b-b8n7tfb1at] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.im-scope__choices[b-b8n7tfb1at] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.im-diff[b-b8n7tfb1at] { margin-bottom: 16px; }
.im-diff__new[b-b8n7tfb1at] { font-weight: 600; }

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

@media (max-width: 767.98px) {
    /* Three dots joined by lines, and the name only beside the step being worked on, as the design
       draws them; the line under each name does not fit a phone at all. */
    .im-steps[b-b8n7tfb1at] { gap: 8px; padding: 14px 16px; margin: -16px -16px 16px; border-radius: 0; border-width: 0 0 1px; }
    .im-steps__line[b-b8n7tfb1at] { min-width: 12px; }
    .im-step[b-b8n7tfb1at] { gap: 8px; }
    .im-step__sub[b-b8n7tfb1at] { display: none; }
    .im-step:not(.is-on) .im-step__text[b-b8n7tfb1at] { display: none; }
    .im-step__label[b-b8n7tfb1at] { font: 700 14px/20px var(--font-sans); }

    .im-columns[b-b8n7tfb1at],
    .im-fields[b-b8n7tfb1at],
    .im-scope__grid[b-b8n7tfb1at] { grid-template-columns: minmax(0, 1fr); }

    .im-kpis[b-b8n7tfb1at] { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }

    .im-actions[b-b8n7tfb1at] { flex-direction: column; align-items: stretch; gap: 16px; }
    .im-actions .btn[b-b8n7tfb1at] { height: 52px; justify-content: center; font: 700 15px/20px var(--font-sans); }

    /* Back and forward along the bottom edge, where the thumb is. */
    .im-footer[b-b8n7tfb1at] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        gap: 10px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--ds-secondary);
    }

    .im-footer .btn[b-b8n7tfb1at] { flex: 1; height: 52px; justify-content: center; font: 700 15px/20px var(--font-sans); }
    .im-footer .btn--prim[b-b8n7tfb1at] { flex: 2; }

    .im-footer--review[b-b8n7tfb1at] { justify-content: flex-start; }
    .im-remember[b-b8n7tfb1at] { margin-right: 0; width: 100%; }

    .im-page:has(.im-footer)[b-b8n7tfb1at] { padding-bottom: 96px; }
    .im-page:has(.im-footer--review)[b-b8n7tfb1at] { padding-bottom: 140px; }

    .im-diff[b-b8n7tfb1at] { margin-left: -16px; margin-right: -16px; }
}
/* /Components/Pages/Admin/Prices.razor.rz.scp.css */
/*
    The price list screen. Everything a row has to say at once — the shared price, the sales points
    that differ, and what is about to change — so the layout works harder than a plain table.

    Sizes prepared for the phone: the strip and the editor's field grid collapse to one column, and
    the table scrolls sideways inside its card rather than pushing the page wider than the screen.
*/

/* ---------------------------------------------------------------- the "Više" menu -------------- */

.pb-more[b-a40fm91vco] {
    position: relative;
}

/* Strelica stoji uz riječ, a ne razmaknuta od nje. */
.pb-more__gumb[b-a40fm91vco] {
    gap: 6px;
}

/* Ispis je poveznica, jer se otvara kao odgovor poslužitelja, a ne kao klik u krugu. */
a.btn[b-a40fm91vco] {
    text-decoration: none;
}

.pb-more__menu[b-a40fm91vco] {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 20;
    min-width: 300px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ds-secondary);
    border-radius: var(--r-lg);
    box-shadow: 0 0 16px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .04);
}

.pb-more__item[b-a40fm91vco] {
    text-align: left;
    border: 0;
    background: transparent;
    padding: 9px 12px;
    border-radius: 6px;
    font: 500 13px/18px var(--font-sans);
    color: var(--text-primary);
    cursor: pointer;
}

.pb-more__item:hover[b-a40fm91vco] {
    background: var(--bg-light-brand);
}

/* The export is a link, because a download is a response rather than a click the circuit handles. */
a.pb-more__item[b-a40fm91vco] {
    text-decoration: none;
}

/* ---------------------------------------------------------------- what is waiting -------------- */

.pb-sched[b-a40fm91vco] {
    padding: 0;
    overflow: hidden;
    margin-bottom: 16px;
}

.pb-sched__head[b-a40fm91vco] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 18px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.pb-sched__summary[b-a40fm91vco] {
    font: 600 13px/18px var(--font-sans);
    color: var(--text-primary);
}

.pb-sched__toggle[b-a40fm91vco] {
    font-size: 12px;
    margin-left: auto;
}

.pb-sched__body[b-a40fm91vco] {
    padding: 4px 18px 12px;
    border-top: 1px solid var(--ds-table);
}

.pb-sched__day[b-a40fm91vco] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0 4px;
    font: 700 13px/18px var(--font-sans);
}

.pb-sched__day .lnk[b-a40fm91vco] {
    font-size: 12px;
    border: 0;
    background: transparent;
    padding: 0;
}

.pb-sched__row[b-a40fm91vco] {
    display: grid;
    grid-template-columns: 52px minmax(120px, 200px) 90px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 5px 0;
    border-top: 1px solid var(--ds-table);
}

.pb-sched__row .lnk[b-a40fm91vco] {
    font-size: 12px;
    border: 0;
    background: transparent;
    padding: 0;
}

.pb-sched__code[b-a40fm91vco] {
    font-size: 12px;
    color: var(--text-secondary);
}

.pb-sched__name[b-a40fm91vco] {
    font: 500 13px/18px var(--font-sans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-sched__scope[b-a40fm91vco] {
    font-size: 12px;
}

.pb-sched__diffs[b-a40fm91vco] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.pb-diff[b-a40fm91vco] {
    font: 500 12px/18px var(--font-sans);
}

.pb-diff__from[b-a40fm91vco] {
    color: var(--text-secondary);
    text-decoration: line-through;
}

.pb-diff__to[b-a40fm91vco] {
    font-weight: 700;
    color: var(--bs-cta);
}

/* A change already saved goes out with the next run, so it is marked apart from a scheduled one. */
.pb-diff__to--soon[b-a40fm91vco] {
    color: #185FA5;
}

/* ---------------------------------------------------------------- the table -------------------- */

.pb-chev-head[b-a40fm91vco] {
    width: 28px;
}

.pb-chev-cell[b-a40fm91vco] {
    padding-right: 0;
}

.pb-chev[b-a40fm91vco] {
    display: inline-flex;
    transition: transform .15s;
}

.pb-chev.is-open[b-a40fm91vco] {
    transform: rotate(180deg);
}

.pb-levels[b-a40fm91vco] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.pb-tag[b-a40fm91vco] {
    color: #fff;
}

.pb-tag .d[b-a40fm91vco] {
    background: #fff;
}

.pb-tag--sched[b-a40fm91vco] {
    background: var(--bs-cta);
}

.pb-tag--soon[b-a40fm91vco] {
    background: #185FA5;
}

.pb-price[b-a40fm91vco] {
    font-weight: 600;
}

.pb-row--sched > td[b-a40fm91vco] {
    background: var(--bg-light-brand-2);
}

.pb-row--sched > td:first-child[b-a40fm91vco] {
    box-shadow: inset 3px 0 0 var(--bs-cta);
}

.pb-row--soon > td[b-a40fm91vco] {
    background: #F4F8FD;
}

.pb-row--soon > td:first-child[b-a40fm91vco] {
    box-shadow: inset 3px 0 0 #185FA5;
}

.pb-child > td[b-a40fm91vco] {
    background: var(--bg-light-brand-2);
}

/* A sales point's own price the wide screen has not opened; a phone always shows it. */
.pb-child--folded[b-a40fm91vco] { display: none; }

.pb-child__name[b-a40fm91vco] {
    padding-left: 22px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.pb-child__tag[b-a40fm91vco] {
    font-size: 12px;
    margin-left: 8px;
}

/* ---------------------------------------------------------------- the price editor ------------- */

.pb-edit__item[b-a40fm91vco] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: var(--neutral-03);
}

.pb-edit__code[b-a40fm91vco] {
    font-size: 12px;
    color: var(--text-secondary);
}

.pb-edit__name[b-a40fm91vco] {
    font: 600 13px/18px var(--font-sans);
}

.pb-edit__choices[b-a40fm91vco] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.pb-edit__warn[b-a40fm91vco] {
    margin: 0 0 4px 26px;
    padding: 10px 12px;
    background: #FAEEDA;
    border: 1px solid rgba(133, 79, 11, .25);
}

.pb-edit__warn-title[b-a40fm91vco] {
    font: 600 12px/16px var(--font-sans);
    color: #854F0B;
    margin-bottom: 6px;
}

.pb-edit__warn-check[b-a40fm91vco] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font: 500 12px/16px var(--font-sans);
    color: #854F0B;
}

.pb-edit__grid[b-a40fm91vco] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    margin-bottom: 8px;
}

/* The money fields come from AppTextInput, so the design's right alignment reaches through. */
.pb-edit__grid[b-a40fm91vco]  input {
    text-align: right;
}

.pb-edit__select[b-a40fm91vco] {
    width: 100%;
}

.pb-anchor[b-a40fm91vco] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

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

@media (max-width: 767.98px) {
    .pb-more__menu[b-a40fm91vco] {
        min-width: 0;
        left: 0;
        right: 0;
    }

    /* ---------- what waits, as a sheet from the bottom (design 1ai) ---------- */

    .pb-sched__scrim[b-a40fm91vco] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(0, 0, 0, .5);
    }

    /* Under the dialogs (80): cancelling from the sheet asks for confirmation on top of it. */
    .pb-sched__body[b-a40fm91vco] {
        position: fixed;
        top: 120px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 71;
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        overflow-y: auto;
        border-top: 0;
        border-radius: 16px 16px 0 0;
        background: #fff;
        animation: sheet-up .2s ease-out;
    }

    .pb-sched__sheet-head[b-a40fm91vco] {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -20px;
        padding: 16px 8px 8px 20px;
        background: #fff;
        border-bottom: 1px solid var(--ds-secondary);
    }

    /* The handle, drawn over the heading as on every sheet. */
    .pb-sched__sheet-head[b-a40fm91vco]::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 36px;
        height: 4px;
        margin-left: -18px;
        border-radius: 999px;
        background: #D8D8D8;
    }

    .pb-sched__sheet-titles[b-a40fm91vco] { min-width: 0; }
    .pb-sched__sheet-title[b-a40fm91vco] { font: 700 18px/24px var(--font-sans); }
    .pb-sched__sheet-sub[b-a40fm91vco] { font: 500 12px/16px var(--font-sans); }

    .pb-sched__close[b-a40fm91vco] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: var(--r-lg);
        background: transparent;
        color: var(--text-secondary);
    }

    .pb-sched__sheet-foot[b-a40fm91vco] {
        position: sticky;
        bottom: 0;
        display: block;
        margin: auto -20px 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--ds-secondary);
    }

    .pb-sched__sheet-foot .btn[b-a40fm91vco] {
        width: 100%;
        height: 52px;
        justify-content: center;
        font: 700 15px/20px var(--font-sans);
    }

    /* A day: its date as a pill, how many items, and cancelling them all at the right. */
    .pb-sched__day[b-a40fm91vco] {
        padding: 14px 0 4px;
        border-bottom: 1px solid var(--ds-secondary);
    }

    .pb-sched__date[b-a40fm91vco] { display: flex; align-items: center; gap: 8px; }

    /* The date as the same pill the list gives the row: blue for tomorrow's publication, brand
       colour for a scheduled day. */
    .pb-sched__pill[b-a40fm91vco] {
        padding: 2px 9px;
        border-radius: 999px;
        color: #fff;
        font: 700 12px/16px var(--font-sans);
        white-space: nowrap;
    }

    .pb-sched__pill--soon[b-a40fm91vco] { background: #185FA5; }
    .pb-sched__pill--sched[b-a40fm91vco] { background: var(--bs-cta); }

    /* Each day after the first starts below a grey band, so the groups read apart at a glance. */
    .pb-sched__row + .pb-sched__day[b-a40fm91vco] {
        margin: 0 -20px;
        padding: 20px 20px 6px;
        border-top: 8px solid var(--bg-primary);
    }

    .pb-sched__row:has(+ .pb-sched__day)[b-a40fm91vco] { border-bottom: 0; }

    .pb-sched__date .t-description[b-a40fm91vco] { font: 500 12px/16px var(--font-sans); }

    .pb-sched__day .lnk[b-a40fm91vco] { padding: 8px 0; font: 600 13px/18px var(--font-sans); }
    .pb-sched__cancel[b-a40fm91vco] { color: #A32D2D; }

    /* An item: code and name with its own cancel on the right, what changes line by line, and
       where it applies underneath. */
    .pb-sched__row[b-a40fm91vco] {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "code   cancel"
            "name   cancel"
            "diffs  diffs"
            "scope  scope";
        gap: 0 10px;
        align-items: start;
        padding: 14px 0;
        border-top: 0;
        border-bottom: 1px solid var(--ds-table);
    }

    .pb-sched__code[b-a40fm91vco] { grid-area: code; }
    .pb-sched__name[b-a40fm91vco] { grid-area: name; font: 700 15px/20px var(--font-sans); white-space: normal; }
    .pb-sched__diffs[b-a40fm91vco] { grid-area: diffs; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
    .pb-sched__scope[b-a40fm91vco] { grid-area: scope; margin-top: 6px; font: 500 12px/16px var(--font-sans); }

    .pb-sched__cancel--one[b-a40fm91vco] {
        grid-area: cancel;
        height: 32px;
        padding: 0 12px !important;
        border: 1px solid var(--ds-secondary) !important;
        border-radius: var(--r-lg);
        font: 600 13px/18px var(--font-sans) !important;
    }

    .pb-diff[b-a40fm91vco] { display: flex; align-items: baseline; gap: 8px; font: 500 13px/19px var(--font-sans); }
    .pb-diff > .t-description:first-child[b-a40fm91vco] { width: 92px; flex: none; }
    .pb-diff__from[b-a40fm91vco] { color: var(--text-secondary); text-decoration: line-through; }
    .pb-diff__to[b-a40fm91vco] { font-weight: 700; color: var(--text-primary); }

    /* The design keeps the two amounts side by side in the sheet; two columns still fit a phone. */
    .pb-edit__grid[b-a40fm91vco] {
        grid-template-columns: 1fr 1fr;
    }

    /* The sales point's own price hangs under its item, indented and a shade apart. */
    .pb-table tr.pb-child[b-a40fm91vco],
    .pb-table tr.pb-child--folded[b-a40fm91vco] {
        display: grid;
        min-height: 0;
        padding: 8px 16px 8px 28px;
        background: #FCFBFD;
    }

    /* Only the place and its price, as the design draws the row; the rest is in the sheet. */
    .pb-table tr.pb-child td[data-role="meta"][b-a40fm91vco] { display: none; }

    .pb-table tr.pb-child td[data-role="title"][b-a40fm91vco] { display: flex; align-items: center; gap: 8px; }

    .pb-table tr.pb-child td[data-role="title"][b-a40fm91vco]::before {
        content: "";
        flex: none;
        width: 10px;
        height: 10px;
        margin-top: -6px;
        border-left: 1.5px solid var(--bs-icons-2);
        border-bottom: 1.5px solid var(--bs-icons-2);
    }

    .pb-child__tag[b-a40fm91vco] {
        margin-left: 0;
        padding: 1px 7px;
        border-radius: 999px;
        background: var(--bg-light-brand);
        color: var(--bs-cta);
        font: 600 11px/16px var(--font-sans);
    }

    /* The item's sale, waiting change and additional price on one line under its name. */
    .pb-table tr:not(.pb-child) td[data-role="meta"][b-a40fm91vco] { display: none; }
    .pb-levels[b-a40fm91vco] { gap: 6px; margin-top: 1px; }
    .pb-levels .st[b-a40fm91vco] { padding: 1px 7px; font: 600 11px/16px var(--font-sans); }
    .pb-levels .st .d[b-a40fm91vco] { display: none; }
    .pb-levels__anchor[b-a40fm91vco] { font: 500 12px/16px var(--font-sans); }

    /* The two lists as a segmented control in the white band over the search. */
    .pb-kinds[b-a40fm91vco] { order: 1; padding: 0 16px 10px; background: #fff; }
    .pb-kinds .tabs--seg[b-a40fm91vco] { margin: 0; }

    /* What waits: a brand card in a white band between the search and the list (design 1g). */
    .pb-sched[b-a40fm91vco] {
        order: 3;
        margin: 0;
        padding: 12px 16px;
        overflow: visible;
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid var(--ds-secondary);
        box-shadow: none;
        background: #fff;
    }

    .pb-sched__head[b-a40fm91vco] {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        column-gap: 12px;
        align-items: center;
        padding: 12px 14px;
        border-radius: var(--r-lg);
        background: var(--bs-cta);
        color: #fff;
        box-shadow: 0 4px 12px rgba(102, 45, 145, .25);
    }

    .pb-sched__icon[b-a40fm91vco] {
        display: flex;
        grid-row: 1 / span 2;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .18);
    }

    .pb-sched__head .st[b-a40fm91vco] {
        grid-column: 2;
        justify-self: start;
        padding: 0;
        background: none;
        color: #fff;
        font: 700 14px/20px var(--font-sans);
    }

    .pb-sched__head .st .d[b-a40fm91vco] { display: none; }

    .pb-sched__summary[b-a40fm91vco] {
        grid-column: 2;
        font: 500 12px/16px var(--font-sans);
        color: #fff;
        opacity: .85;
    }

    .pb-sched__arrow[b-a40fm91vco] {
        display: flex;
        grid-column: 3;
        grid-row: 1 / span 2;
        transform: rotate(-90deg);
    }

    /* The "⋯" sits in the top bar; its menu opens under it at the right edge. */
    .pb-more__dots[b-a40fm91vco] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: var(--r-lg);
        background: transparent;
    }

    .pb-more__dots span[b-a40fm91vco] { width: 4px; height: 4px; border-radius: 999px; background: var(--text-primary); }

    .pb-more.page__actions[b-a40fm91vco] { position: fixed; top: 6px; right: 8px; z-index: 45; align-self: auto; width: auto; }

    .pb-more__menu[b-a40fm91vco] { top: 48px; left: auto; right: 0; min-width: 280px; }
    .pb-more__item[b-a40fm91vco] { padding: 12px 14px; font: 500 15px/20px var(--font-sans); }

    .pb-table tr.pb-child > td[b-a40fm91vco] { background: transparent; }

    /* A row that waits keeps its tint and its left stripe, carried by the card instead of a cell. */
    .pb-table tr.pb-row--sched[b-a40fm91vco] { background: var(--bg-light-brand-2); box-shadow: inset 3px 0 0 var(--bs-cta); }
    .pb-table tr.pb-row--soon[b-a40fm91vco] { background: #F4F8FD; box-shadow: inset 3px 0 0 #185FA5; }

    .pb-table tr.pb-row--sched > td[b-a40fm91vco],
    .pb-table tr.pb-row--soon > td[b-a40fm91vco] { background: transparent; box-shadow: none; }

    .pb-table tr.pb-child td[data-role="title"][b-a40fm91vco] {
        padding-left: 0;
        font: 600 13px/18px var(--font-sans);
        color: var(--text-tertiary);
        white-space: normal;
    }

    .pb-table tr.pb-child td[data-role="value"][b-a40fm91vco] {
        font: 600 13px/18px var(--font-sans);
        color: var(--text-tertiary);
    }
}

/* How many rows of this kind wait for the next publication, on its tab. The shape is the design's
   sidebar badge; the colour is the blue those rows and their "Objava sutra" chip carry (.st-blue),
   because those rows are what it counts. */
.tab__count[b-a40fm91vco] {
    display: inline-block;
    min-width: 20px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: #E6F1FB;
    color: #185FA5;
    font: 700 11px/18px var(--font-sans);
    text-align: center;
    vertical-align: 1px;
}
/* /Components/Pages/Admin/Products.razor.rz.scp.css */
/* What only the product catalogue needs; the rest of the screen is in css/catalog.css. */

.pr-gtin[b-micoba1vk9] { font-size: 12px; }
/* /Components/Pages/Admin/Profile.razor.rz.scp.css */
/*
    The profile: who the account belongs to, and the two things that protect it.

    The dialogs are the design's own .modal, rendered by the address rather than by a click, so they
    are styled here only where they carry something the design system does not already draw.
*/

.pf-page[b-9d5pk0t8lj] {
    max-width: 720px;
}

.pf-card[b-9d5pk0t8lj] {
    padding: 0;
    overflow: hidden;
    margin-bottom: 16px;
}

.pf-card__body[b-9d5pk0t8lj] {
    padding: 18px;
}

.pf-notice[b-9d5pk0t8lj] {
    padding: 12px 18px;
    margin-bottom: 16px;
    border-left: 3px solid #3B6D11;
    font: 600 13px/18px var(--font-sans);
}

.pf-identity[b-9d5pk0t8lj] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.pf-avatar[b-9d5pk0t8lj] {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #662D91;
    color: #fff;
    font: 700 17px/52px var(--font-sans);
    text-align: center;
    flex: none;
}

.pf-email[b-9d5pk0t8lj] { font-size: 12px; }
.pf-role[b-9d5pk0t8lj] { margin-top: 4px; }

.pf-grid[b-9d5pk0t8lj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

/* Shown, not hidden — but plainly not something this screen can change. */
.pf-locked[b-9d5pk0t8lj] {
    background: var(--neutral-03);
    color: var(--text-secondary);
}

.pf-footer[b-9d5pk0t8lj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--ds-table);
    flex-wrap: wrap;
}

.pf-footer .t-description[b-9d5pk0t8lj] { font-size: 12px; }

.pf-mfa__head[b-9d5pk0t8lj] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------- the dialogs ------------------ */

.pf-modal[b-9d5pk0t8lj] {
    width: 460px;
}

.pf-modal .modal__f .btn[b-9d5pk0t8lj] {
    text-decoration: none;
}

.pf-field[b-9d5pk0t8lj] {
    margin-bottom: 14px;
}

.pf-mfa__lead[b-9d5pk0t8lj] {
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 14px;
}

.pf-qr[b-9d5pk0t8lj] {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto 14px;
    border: 6px solid #fff;
    outline: 1px solid var(--ds-secondary);
}

.pf-mfa__key[b-9d5pk0t8lj] {
    font-size: 12px;
    text-align: center;
    margin-bottom: 14px;
}

.pf-codes[b-9d5pk0t8lj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    padding: 14px;
    background: var(--neutral-03);
}

.pf-codes__item[b-9d5pk0t8lj] {
    font-size: 13px;
    letter-spacing: .04em;
}

@media (max-width: 767.98px) {
    .pf-grid[b-9d5pk0t8lj] { grid-template-columns: 1fr; }
    .pf-codes[b-9d5pk0t8lj] { grid-template-columns: 1fr; }

    .pf-card__body[b-9d5pk0t8lj] { padding: 16px; }
    .pf-identity[b-9d5pk0t8lj] { gap: 14px; }

    /* The save button across the card, as the design draws it; the note goes above it. */
    .pf-footer[b-9d5pk0t8lj] { flex-direction: column; align-items: stretch; }
    .pf-footer[b-9d5pk0t8lj]  .btn { height: 48px; justify-content: center; }
}
/* /Components/Pages/Admin/PublicationCertificatePage.razor.rz.scp.css */
/*
    The certificate as it prints: A4, black on white, no chrome.

    The screen version keeps a toolbar and a light grey surround so it reads as a document rather
    than as a screen; print drops both, along with anything that would waste ink.
*/

.cert[b-p55shckfxs] {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.cert__toolbar[b-p55shckfxs] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 16px;
}

.cert__toolbar .btn[b-p55shckfxs] {
    text-decoration: none;
}

.cert__paper[b-p55shckfxs] {
    background: #fff;
    border: 1px solid var(--ds-secondary);
    padding: 32px 36px;
}

.cert__head[b-p55shckfxs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ds-table);
}

.cert__issued[b-p55shckfxs] {
    font: 400 12px/16px var(--font-sans);
    color: var(--text-secondary);
}

.cert__title[b-p55shckfxs] {
    font: 700 22px/30px var(--font-sans);
    margin: 20px 0 14px;
}

.cert__subject[b-p55shckfxs] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    font: 500 13px/20px var(--font-sans);
    margin-bottom: 16px;
}

.cert__label[b-p55shckfxs] {
    color: var(--text-secondary);
    margin-right: 6px;
}

.cert__lead[b-p55shckfxs] {
    font: 400 13px/20px var(--font-sans);
    color: var(--text-tertiary);
    margin: 0 0 18px;
}

.cert__table[b-p55shckfxs] {
    width: 100%;
    border-collapse: collapse;
    font: 400 12px/18px var(--font-sans);
}

.cert__table th[b-p55shckfxs] {
    text-align: left;
    font-weight: 700;
    border-bottom: 1px solid var(--text-primary);
    padding: 6px 8px;
}

.cert__table th.num[b-p55shckfxs],
.cert__table td.num[b-p55shckfxs] {
    text-align: right;
}

.cert__table td[b-p55shckfxs] {
    border-bottom: 1px solid var(--ds-table);
    padding: 6px 8px;
    vertical-align: top;
}

.cert__file[b-p55shckfxs] {
    word-break: break-all;
}

.cert__hash[b-p55shckfxs] {
    font-size: 11px;
    color: var(--text-secondary);
    word-break: break-all;
    margin-bottom: 4px;
}

.cert__missing[b-p55shckfxs] {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid var(--ds-secondary);
    font: 400 12px/18px var(--font-sans);
}

.cert__missing-title[b-p55shckfxs] {
    font-weight: 700;
    margin-bottom: 4px;
}

.cert__none[b-p55shckfxs] {
    padding: 24px 0;
    font: 500 14px/22px var(--font-sans);
    color: var(--text-tertiary);
}

.cert__foot[b-p55shckfxs] {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--ds-table);
    font: 400 11px/16px var(--font-sans);
    color: var(--text-secondary);
}

@media print {
    .cert[b-p55shckfxs] { max-width: none; padding: 0; page: potvrda; }
    .cert__toolbar[b-p55shckfxs] { display: none; }
    .cert__paper[b-p55shckfxs] { border: 0; padding: 0; }
    .cert__table[b-p55shckfxs] { font-size: 10px; }
    .cert__table tr[b-p55shckfxs] { break-inside: avoid; }
}

/* On a phone the certificate reads like the print dialog (PrintDialog.razor.css): a heading with a
   close button on top, the paper shown smaller on grey in the middle, and the buttons along the
   bottom edge. The paper keeps a width of its own, so the table breaks as it does on paper.
   Screen only: what prints is untouched. */
@media screen and (max-width: 767.98px) {
    .cert[b-p55shckfxs] {
        display: flex;
        flex-direction: column;
        max-width: none;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0 16px 96px;
        background: #E9E9EC;
    }

    .cert__bar[b-p55shckfxs] {
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        margin: 0 -16px;
        padding: 0 8px 0 20px;
        background: #fff;
        border-bottom: 1px solid var(--ds-secondary);
    }

    .cert__bar-title[b-p55shckfxs] { font: 700 18px/24px var(--font-sans); color: var(--text-primary); }

    .cert__close[b-p55shckfxs] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--r-lg);
        font-size: 24px;
        line-height: 1;
        color: var(--text-secondary);
        text-decoration: none;
    }

    .cert__toolbar[b-p55shckfxs] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        gap: 10px;
        margin: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--ds-secondary);
    }

    .cert__toolbar .btn[b-p55shckfxs] {
        flex: 1;
        height: 52px;
        justify-content: center;
        border-radius: var(--r-lg);
        font: 700 15px/20px var(--font-sans);
    }

    .cert__toolbar .btn--prim[b-p55shckfxs] { flex: 2; }

    /* 760 px of paper at .44 fills a 375 px screen less its margins; the top margin is in the
       paper's own pixels, so 36 of them come out as the 16 around it. */
    .cert__paper[b-p55shckfxs] {
        align-self: center;
        flex: none;
        width: 760px;
        margin-top: 36px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
        zoom: .44;
    }
}
/* /Components/Pages/Admin/Publications.razor.rz.scp.css */
/*
    The record of what went out. Grouped by day, because that is the unit an inspection asks about
    and the unit the certificate is issued for.
*/

.pb-day[b-ozjsa9e958] {
    background: var(--neutral-03);
    padding: 8px 16px;
    border-top: 1px solid var(--ds-secondary);
}

.pb-day__head[b-ozjsa9e958] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.pb-day__label[b-ozjsa9e958] {
    font: 700 13px/18px var(--font-sans);
}

.pb-day__meta[b-ozjsa9e958] {
    font-size: 12px;
}

.pb-day__certificate[b-ozjsa9e958] {
    font-size: 12px;
    margin-left: auto;
    text-decoration: none;
}

.pb-point[b-ozjsa9e958] {
    font-weight: 600;
}

.page__actions .btn[b-ozjsa9e958] {
    text-decoration: none;
}

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

@media (max-width: 767.98px) {
    .pu-export.page__actions[b-ozjsa9e958] {
        position: fixed;
        top: 6px;
        right: 8px;
        z-index: 45;
        margin: 0;
        align-self: auto;
    }

    .pu-export .btn[b-ozjsa9e958] { width: 44px; height: 44px; padding: 0; justify-content: center; box-shadow: none; }
    .pu-export__icon[b-ozjsa9e958] { display: flex; }

    /* The days sit on the page's grey, each with its list on white below, as the design draws them. */
    .tbl-card:has(.pu-table)[b-ozjsa9e958] {
        margin-top: -16px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .pu-table tbody[b-ozjsa9e958] { background: #fff; border-bottom: 1px solid var(--ds-secondary); margin-bottom: 0; }

    .pu-table tr.pu-day[b-ozjsa9e958] {
        display: block;
        min-height: 0;
        padding: 0;
        border-bottom: 1px solid var(--ds-secondary);
        background: var(--bg-primary);
    }

    .pu-table tr.pu-day td.pb-day[b-ozjsa9e958] {
        display: block;
        padding: 14px 16px 8px;
        border-top: 0;
        background: var(--bg-primary);
        font: inherit;
        color: var(--text-primary);
    }

    .pb-day__head[b-ozjsa9e958] { align-items: baseline; justify-content: space-between; gap: 2px 10px; }
    .pb-day__label[b-ozjsa9e958] { font: 700 14px/20px var(--font-sans); }
    .pb-day__meta[b-ozjsa9e958] { margin-left: auto; font: 500 12px/16px var(--font-sans); }
    .pb-day__certificate[b-ozjsa9e958] { order: 3; margin-left: 0; flex-basis: 100%; font-size: 12px; }

    .pu-table tr:not(.pu-day)[b-ozjsa9e958] {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        column-gap: 12px;
        min-height: 60px;
    }

    .pu-table tr:not(.pu-day) td[b-ozjsa9e958] { grid-column: 2; }

    .pu-table tr:not(.pu-day) td[data-role="lead"][b-ozjsa9e958] {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        font: 700 14px/20px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
        color: var(--text-primary);
    }

    .pu-table td[data-role="title"][b-ozjsa9e958] { font: 600 14px/20px var(--font-sans); }

    /* The two files as the design's framed buttons at the right edge. */
    .pu-table tr:not(.pu-day) td.pu-files[b-ozjsa9e958] {
        grid-column: 3;
        grid-row: 1 / span 2;
        display: flex;
        gap: 6px;
    }

    .pu-files .lnk[b-ozjsa9e958] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 8px;
        border: 1px solid var(--ds-secondary);
        border-radius: var(--r-lg);
        font: 600 12px/16px var(--font-sans);
        text-decoration: none;
    }
}
/* /Components/Pages/Admin/SalesPoints.razor.rz.scp.css */
/* Prodajna mjesta — tablica i obrazac u dijalogu. */

.sp-code[b-11t0iasx6h] { font-weight: 700; }
.sp-last[b-11t0iasx6h] { font-size: 13px; }

.sp-actions-head[b-11t0iasx6h] { text-align: right; }
.sp-actions[b-11t0iasx6h] { display: flex; gap: 6px; justify-content: flex-end; }
.sp-actions[b-11t0iasx6h]  .btn { text-decoration: none; }
.sp-delete[b-11t0iasx6h] { color: var(--error-primary); }

.sp-form[b-11t0iasx6h] { display: flex; flex-direction: column; gap: 14px; }

.sp-form__row[b-11t0iasx6h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.sp-form__select[b-11t0iasx6h] { width: 100%; }

.sp-form__address[b-11t0iasx6h] {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.4fr);
    gap: 14px;
}

.sp-form__check[b-11t0iasx6h] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.sp-form__check-label[b-11t0iasx6h] { display: block; font: 600 13px/18px var(--font-sans); }
.sp-form__check-sub[b-11t0iasx6h] { display: block; font-size: 12px; line-height: 18px; }

.sp-form__note[b-11t0iasx6h] { font-size: 12px; line-height: 18px; }

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

@media (max-width: 767.98px) {
    /* Each sales point is a card of its own, as the design draws them: the code in brand colour
       with the state beside it, then what and where it is, and the actions along the bottom. */
    .tbl-card:has(.sp-table)[b-11t0iasx6h] { margin: 0; background: transparent; border: 0; }

    .sp-table[b-11t0iasx6h],
    .sp-table tbody[b-11t0iasx6h] { display: flex; flex-direction: column; gap: 12px; background: transparent; }

    .sp-table tr[b-11t0iasx6h] {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 14px 16px 0;
        background: #fff;
        border: 1px solid var(--ds-secondary);
        border-radius: var(--r-lg);
        overflow: hidden;
    }

    .sp-table td.sp-code[b-11t0iasx6h] { font: 700 13px/18px var(--font-sans); color: var(--bs-cta); }
    .sp-table td[data-role="title"][b-11t0iasx6h] { font: 700 16px/22px var(--font-sans); white-space: normal; }
    /* Everything under the code runs the card's full width; only the code shares its line. */
    .sp-table td[data-role="title"][b-11t0iasx6h],
    .sp-table td[data-role="meta"][b-11t0iasx6h] { grid-column: 1 / -1; }

    .sp-table td[data-role="meta"][b-11t0iasx6h] { font: 500 13px/18px var(--font-sans); }

    .sp-table td[data-role="state"][b-11t0iasx6h] { grid-column: 2; grid-row: 1; justify-self: end; }

    .sp-table td[data-role="actions"][b-11t0iasx6h] {
        margin: 12px -16px 0;
        border-top: 1px solid var(--ds-table);
    }

    .sp-table .sp-actions[b-11t0iasx6h] { gap: 0; flex-wrap: nowrap; }

    .sp-table .sp-actions[b-11t0iasx6h]  .btn,
    .sp-table .sp-actions .btn[b-11t0iasx6h] {
        flex: 1;
        height: 44px;
        justify-content: center;
        border-radius: 0;
        box-shadow: none;
        font: 600 14px/20px var(--font-sans);
        color: var(--bs-cta);
    }

    .sp-table .sp-actions .btn + .btn[b-11t0iasx6h] { border-left: 1px solid var(--ds-table); }
    .sp-table .sp-actions .sp-delete[b-11t0iasx6h] { color: var(--error-primary); }

    .sp-form__row[b-11t0iasx6h],
    .sp-form__address[b-11t0iasx6h] { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* The point's own note: three lines, grown by hand if it needs more (design, Uredi prodajno mjesto). */
.sp-form[b-11t0iasx6h]  .sp-form__note-box {
    width: 100%;
    min-height: 72px;
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    font: 500 13px/19px var(--font-sans);
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
/*
    Settings: one tab per subject, each row saying what the setting is and what it costs to change,
    and one save for all of them at the top of the page.

    Prepared for the phone: the tab strip scrolls sideways instead of wrapping, the obligor's fields
    fall to one column and a settings row stacks its control under its text instead of pushing it off
    the screen.
*/

.st-page[b-8xdh0mwshu] {
    max-width: 840px;
}

.st-actions[b-8xdh0mwshu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Six tabs do not fit a phone; they slide rather than break onto a second line. */
.st-tabs[b-8xdh0mwshu] {
    overflow-x: auto;
    scrollbar-width: none;
}

.st-tabs[b-8xdh0mwshu]::-webkit-scrollbar {
    display: none;
}

.st-tab[b-8xdh0mwshu] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    white-space: nowrap;
}

/* A change on the tab that has not been saved yet. */
.st-tab__dirty[b-8xdh0mwshu] {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--pending-primary);
    flex: none;
}

.st-card[b-8xdh0mwshu] {
    padding: 0;
    overflow: hidden;
}

.st-card__body[b-8xdh0mwshu] {
    padding: 18px;
}

.st-grid[b-8xdh0mwshu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* What only Parra support can change is shown, not hidden — but plainly not editable. */
.st-locked[b-8xdh0mwshu] {
    background: var(--neutral-03);
    color: var(--text-secondary);
}

.st-select[b-8xdh0mwshu] {
    width: 100%;
}

.st-note[b-8xdh0mwshu] {
    padding: 12px 18px;
    border-top: 1px solid var(--ds-table);
}

.st-note .t-description[b-8xdh0mwshu] {
    font-size: 12px;
}

/* One width for every control at the end of a row — the time, the date and the days — so they
   line up down the card, as the design draws them. */
.st-row-select[b-8xdh0mwshu],
.st-row-date[b-8xdh0mwshu],
.st-row-number[b-8xdh0mwshu] {
    width: 160px;
    flex: none;
}

/* The note for all price lists closes the card: its words, then the box the full width of it,
   and the count under the box. */
.st-footnote[b-8xdh0mwshu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
}

.st-footnote .t[b-8xdh0mwshu] { font: 600 13px/18px var(--font-sans); }
.st-footnote .d2[b-8xdh0mwshu] { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); }

.st-footnote__box[b-8xdh0mwshu] {
    width: 100%;
    height: auto;
    min-height: 112px;
    padding: 10px 12px;
    resize: vertical;
    font: 500 13px/20px var(--font-sans);
}

.st-footnote__count[b-8xdh0mwshu] { font-size: 11px; text-align: right; }

/* Under the row it belongs to, before the line that closes it. */
.st-page[b-8xdh0mwshu]  .st-row-error {
    padding: 0 18px 12px;
}

/* The website and the path side by side: together they are the one address the redirect goes on. */
.st-row-site[b-8xdh0mwshu] {
    display: grid;
    grid-template-columns: 260px 130px;
    gap: 8px;
    flex: none;
    max-width: 100%;
}

.st-url[b-8xdh0mwshu] {
    word-break: break-all;
}

.st-slug[b-8xdh0mwshu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The fixed part of the address and the obligor's own segment, read as one address. */
.st-slug__input[b-8xdh0mwshu] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.st-slug__base[b-8xdh0mwshu] {
    flex: none;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Its own height kept: a zero basis would flatten it once the row becomes a column on a phone. */
.st-slug__input[b-8xdh0mwshu]  .txt {
    flex: 1 1 auto;
    min-width: 0;
}

.st-slug__new[b-8xdh0mwshu] {
    font-size: 13px;
    word-break: break-all;
}

.st-warning[b-8xdh0mwshu] {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: #FAEEDA;
    border: 1px solid rgba(133, 79, 11, .2);
    border-radius: var(--r-lg, 8px);
}

.st-warning__icon[b-8xdh0mwshu] {
    flex: none;
    margin-top: 1px;
    color: #854F0B;
}

.st-warning__text[b-8xdh0mwshu] {
    font: 500 13px/19px var(--font-sans);
    color: #6B3F09;
}

.st-warning__title[b-8xdh0mwshu] {
    font-weight: 700;
    color: #854F0B;
    margin-bottom: 4px;
}

.st-warning__text ul[b-8xdh0mwshu] {
    margin: 6px 0;
    padding-left: 18px;
}

.st-slug__ack[b-8xdh0mwshu] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font: 500 13px/18px var(--font-sans);
}

.st-delete[b-8xdh0mwshu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (max-width: 767.98px) {
    .st-slug__input[b-8xdh0mwshu] { flex-direction: column; align-items: stretch; }

    .st-grid[b-8xdh0mwshu] { grid-template-columns: 1fr; }
    .st-card__body[b-8xdh0mwshu] { padding: 16px; }
    .st-note[b-8xdh0mwshu] { padding: 12px 16px; }

    /* A switch stays at the end of its row, as the design draws it; any other control goes under
       the words and takes the full width (css/mobile.css wraps the row). */
    .st-row-select[b-8xdh0mwshu],
    .st-row-date[b-8xdh0mwshu],
    .st-row-number[b-8xdh0mwshu] { width: 100%; }

    /* Under its words like every control, but at the end of the row, where the eye looks for it. */
    .st-row-button[b-8xdh0mwshu] { margin-left: auto; }

    .st-footnote[b-8xdh0mwshu] { padding: 12px 16px; }
    .st-footnote .t[b-8xdh0mwshu] { font: 600 14px/20px var(--font-sans); }

    .st-row-site[b-8xdh0mwshu] { grid-template-columns: minmax(0, 1fr) 130px; width: 100%; }

    /* The save bar carries the two buttons; the dot on a tab still says which one has changes. */
    .st-actions[b-8xdh0mwshu] { gap: 10px; }
}
/* /Components/Pages/Admin/WebInstructions.razor.rz.scp.css */
/*
    What to hand the person who maintains the obligor's website, and a button that says whether they
    have done it.

    The snippets keep their own line breaks, so they are a pre rather than a div — pasting one with
    the newlines eaten would produce an nginx block that does not parse.
*/

.wb-page[b-kcf07z7wrk] {
    max-width: 920px;
}

.wb-card[b-kcf07z7wrk] {
    padding: 18px;
    margin-bottom: 16px;
}

.wb-addresses[b-kcf07z7wrk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 14px;
}

.wb-label[b-kcf07z7wrk] {
    font-size: 12px;
    margin-bottom: 6px;
}

.wb-code[b-kcf07z7wrk] {
    color: var(--bs-cta);
    word-break: break-all;
}

.wb-check[b-kcf07z7wrk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--ds-table);
    flex-wrap: wrap;
}

.wb-check__note[b-kcf07z7wrk] {
    font-size: 13px;
}

.wb-result[b-kcf07z7wrk] {
    margin-left: auto;
}

.wb-snippet[b-kcf07z7wrk] {
    padding: 0;
    overflow: hidden;
}

.wb-snippet__body[b-kcf07z7wrk] {
    padding: 16px 18px;
}

.wb-snippet__note[b-kcf07z7wrk] {
    font-size: 13px;
    margin-bottom: 10px;
}

.wb-snippet__code[b-kcf07z7wrk] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .wb-result[b-kcf07z7wrk] { margin-left: 0; }

    .wb-card[b-kcf07z7wrk] { padding: 14px; margin-bottom: 14px; }
    .wb-snippet[b-kcf07z7wrk] { padding: 0; }
    .wb-addresses[b-kcf07z7wrk] { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .wb-code[b-kcf07z7wrk] { word-break: break-all; }
    .wb-check[b-kcf07z7wrk] { flex-wrap: wrap; }
}
/* /Components/Shared/AppButton.razor.rz.scp.css */
/* The design uses a full-width button on the sign-in card; everything else comes from app-kit.css. */
.btn--full[b-pibdfqfzl9] {
    width: 100%;
    justify-content: center;
}
/* /Components/Shared/AppTextInput.razor.rz.scp.css */
.txt--full[b-el6m8wib3c] {
    width: 100%;
}

/* The framework marks a failed field; the design's error colour makes it visible. */
.txt.invalid[b-el6m8wib3c] {
    border-color: var(--error-primary);
    background: var(--bg-error);
}
/* /Components/Shared/BulkDeleteDialog.razor.rz.scp.css */
/* Design, bulk delete: the acknowledgement as a bordered row that fills with the brand tint once ticked. */
.bulk-ack[b-xr985j4c6x] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--ds-secondary);
    border-radius: var(--r-lg);
    background: #fff;
    cursor: pointer;
}

.bulk-ack.is-on[b-xr985j4c6x] { background: var(--bg-light-brand); }

.bulk-ack .chk[b-xr985j4c6x] { margin-top: 1px; flex: none; }

/* The square is what is seen, the real checkbox is what the keyboard reaches. */
.bulk-ack__box[b-xr985j4c6x] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bulk-ack:has(.bulk-ack__box:focus-visible) .chk[b-xr985j4c6x] { outline: 2px solid var(--bs-cta); outline-offset: 2px; }

.bulk-ack__text[b-xr985j4c6x] { font: 500 13px/19px var(--font-sans); color: var(--text-primary); }

/* The bin in a red circle before the title on a phone (design 1ak). */
.bulk-bin[b-xr985j4c6x] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #FCEBEB;
    color: #A32D2D;
    align-items: center;
    justify-content: center;
    flex: none;
}

@media (max-width: 767.98px) {
    .bulk-bin.m-only[b-xr985j4c6x] { display: flex; }
    .bulk-ack[b-xr985j4c6x] { padding: 14px; gap: 12px; }
    .bulk-ack.is-on[b-xr985j4c6x] { border-color: var(--bs-cta); }
    .bulk-ack__text[b-xr985j4c6x] { font: 500 14px/20px var(--font-sans); }
}
/* /Components/Shared/Field.razor.rz.scp.css */
/*
    A star, not a pill. The pill was 28 pixels wide next to a label, and the design gives some
    fields a narrow column — "Pošt. broj" fills all but eight of its sixty-three — so it pushed the
    label onto a second line and the row lost its alignment. The star sits against the last letter
    for the same reason: any gap costs the pixels that are not there.
*/
.field__required[b-cuioe05l83] {
    color: var(--error-primary);
    font: 600 11px/16px var(--font-sans);
}

.field__hint[b-cuioe05l83] {
    font-size: 12px;
    margin-top: 6px;
}
/* /Components/Shared/MobileSelection.razor.rz.scp.css */
/* Design 1aj. Nothing here shows on a wide screen: the strip carries m-only. */
@media (max-width: 767.98px) {
    /* The thin purple strip under the search band; the list page orders it there (css/mobile.css). */
    .ms-bar.m-only[b-0if0opzpf7] {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 52px;
        padding: 0 8px 0 4px;
        background: var(--bs-cta);
        color: #fff;
    }

    .ms-bar__exit[b-0if0opzpf7] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .ms-bar__count[b-0if0opzpf7] { flex: 1; font: 700 15px/20px var(--font-sans); }

    .ms-bar__delete[b-0if0opzpf7] {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: none;
        height: 36px;
        padding: 0 14px;
        border: 0;
        border-radius: var(--r-lg);
        background: #fff;
        color: #A32D2D;
        font: 700 13px/18px var(--font-sans);
        cursor: pointer;
    }

    .ms-bar__delete:disabled[b-0if0opzpf7] { opacity: .6; cursor: default; }
}
/* /Components/Shared/NewTenantDialog.razor.rz.scp.css */
/*
    Opening a second obligor. The same questions as the registration, so the same blocks — the
    choice cards themselves come from the registration's own stylesheet, because they are one
    component of the design rather than two copies of it.
*/

.nt-section[b-5f4awl8btb] {
    font: 700 11px/16px var(--font-sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-cta);
    margin: 18px 0 10px;
}

.nt-section:first-child[b-5f4awl8btb] {
    margin-top: 0;
}

.nt-section--tight[b-5f4awl8btb] {
    margin-bottom: 4px;
}

.nt-note[b-5f4awl8btb] {
    font: 400 12px/16px var(--font-sans);
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.nt-note--foot[b-5f4awl8btb] {
    margin-top: 14px;
    margin-bottom: 0;
}

.nt-pair[b-5f4awl8btb] {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
}

.nt-gap[b-5f4awl8btb] {
    margin-top: 14px;
}

.nt-website[b-5f4awl8btb] {
    margin-top: 12px;
}

/* The website and the path on one line: together they are the one address the redirect goes on. */
.nt-site[b-5f4awl8btb] {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) 170px;
}

.nt-site__hint[b-5f4awl8btb] {
    margin-top: 6px;
}

@media (max-width: 767.98px) {
    .nt-pair[b-5f4awl8btb] { grid-template-columns: 1fr; }
    .nt-site[b-5f4awl8btb] { grid-template-columns: 1fr; }
}
/* /Components/Shared/PrintDialog.razor.rz.scp.css */
/*
    Ispis cjenika. The dialog is a preview of the paper, so the sizes here are the design's: the
    modal is nearly the whole window, and the sheet inside it keeps A4 proportions at 880 px.
*/

.prn-modal[b-f861w5ksyh] {
    width: min(1040px, 94vw);
    height: min(860px, 92vh);
    max-height: none;
}

/* ---------------------------------------------------------------- the toolbar ----------------- */

.prn-bar[b-f861w5ksyh] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--ds-secondary);
}

.prn-bar__point[b-f861w5ksyh] {
    justify-self: start;
    width: 180px;
}

.prn-seg[b-f861w5ksyh] {
    display: inline-flex;
    justify-self: center;
    padding: 3px;
    background: var(--neutral-05);
    border-radius: var(--r-lg);
    gap: 2px;
}

.prn-seg--right[b-f861w5ksyh] {
    /* Its own column, so it stays on the right when there is no kind switch in the middle. */
    grid-column: 3;
    justify-self: end;
}

.prn-seg__item[b-f861w5ksyh] {
    border: 0;
    cursor: pointer;
    padding: 5px 10px;
    white-space: nowrap;
    border-radius: 6px;
    font: 600 12px/16px var(--font-sans);
    background: transparent;
    color: var(--text-secondary);
}

.prn-seg__item.is-on[b-f861w5ksyh] {
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------------- the paper ------------------- */

.prn-scroll[b-f861w5ksyh] {
    flex: 1;
    overflow: auto;
    background: var(--bg-primary);
    padding: 20px;
}

.prn-paper[b-f861w5ksyh] {
    max-width: 880px;
    margin: 0 auto;
    padding: 28px 36px 22px;
    box-shadow: var(--shadow-card);
}

.prn-paper__head[b-f861w5ksyh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 14px;
    /* The rule under the heading is the one line that says this is a document, not a screen. */
    border-bottom: 2px solid var(--text-primary);
}

.prn-paper__who[b-f861w5ksyh] { flex: 1; min-width: 0; }
.prn-paper__title[b-f861w5ksyh] { font: 700 22px/28px var(--font-sans); }
.prn-paper__tenant[b-f861w5ksyh] { font: 600 13px/18px var(--font-sans); margin-top: 2px; }
.prn-paper__place[b-f861w5ksyh] { font-size: 12px; }

.prn-paper__days[b-f861w5ksyh] { display: flex; gap: 20px; flex: none; }
.prn-paper__day[b-f861w5ksyh] { text-align: right; flex: none; }
.prn-paper__day-label[b-f861w5ksyh] { font-size: 11px; }
.prn-paper__day-value[b-f861w5ksyh] { font: 700 14px/20px var(--font-sans); }

.prn-paper__none[b-f861w5ksyh] {
    padding: 28px 0;
    text-align: center;
    color: var(--text-secondary);
    font: 500 13px/20px var(--font-sans);
}

/* ---------------------------------------------------------------- the list -------------------- */

.prn-table[b-f861w5ksyh] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}

.prn-table thead tr[b-f861w5ksyh] { border-bottom: 1px solid var(--text-primary); }

.prn-table th[b-f861w5ksyh] {
    text-align: left;
    padding: 8px 6px;
    font: 700 10px/14px var(--font-sans);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.prn-table tbody tr[b-f861w5ksyh] { border-bottom: 1px solid var(--ds-table); }

.prn-table td[b-f861w5ksyh] { padding: 6px; }
.prn-table .num[b-f861w5ksyh] { text-align: right; }

.prn-table__name[b-f861w5ksyh] { font: 600 12px/16px var(--font-sans); }
.prn-table__unit[b-f861w5ksyh] { width: 44px; font: 400 12px/16px var(--font-sans); color: var(--text-tertiary); }
.prn-table__price[b-f861w5ksyh] { width: 84px; font: 700 13px/16px var(--font-sans); }
.prn-table__unit-price[b-f861w5ksyh] { width: 92px; font: 400 12px/16px var(--font-sans); color: var(--text-tertiary); }
.prn-table__anchor[b-f861w5ksyh] { width: 92px; font: 400 12px/16px var(--font-sans); color: var(--text-secondary); }

/* An anchor price from another day than the sheet's own names it, small and dark, under the amount. */
.prn-table__anchor-day[b-f861w5ksyh] { font: 600 10px/13px var(--font-sans); color: var(--text-primary); white-space: nowrap; }

.prn-table__note[b-f861w5ksyh] {
    width: 120px;
    padding-left: 14px;
    font: 500 11px/16px var(--font-sans);
    color: var(--bs-cta);
}

/* ---------------------------------------------------------------- the labels ------------------ */

.prn-labels[b-f861w5ksyh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.prn-label[b-f861w5ksyh] {
    /* Dashed, because the sheet is cut along these lines. */
    border: 1px dashed var(--ds-table-2);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 96px;
}

.prn-label__name[b-f861w5ksyh] {
    font: 600 12px/16px var(--font-sans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prn-label__meta[b-f861w5ksyh] { font-size: 10px; line-height: 14px; }

.prn-label__price[b-f861w5ksyh] {
    font: 700 24px/30px var(--font-sans);
    margin-top: auto;
}

.prn-label__foot[b-f861w5ksyh] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font: 400 10px/14px var(--font-sans);
    color: var(--text-tertiary);
}

.prn-label__anchor[b-f861w5ksyh] { text-align: right; }

/* ---------------------------------------------------------------- the notes ------------------- */

.prn-notes[b-f861w5ksyh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--ds-secondary);
    border-radius: 6px;
    white-space: pre-line;
}

.prn-notes__point[b-f861w5ksyh] { font: 600 12px/17px var(--font-sans); color: var(--text-primary); }
.prn-notes__all[b-f861w5ksyh] { font: 500 12px/17px var(--font-sans); color: var(--text-tertiary); }

/* ---------------------------------------------------------------- the footers ----------------- */

.prn-paper__foot[b-f861w5ksyh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--ds-table);
}

.prn-paper__note[b-f861w5ksyh] { font-size: 11px; line-height: 16px; flex: 1; min-width: 0; }
.prn-paper__mark[b-f861w5ksyh] { display: block; flex: none; }

.prn-foot[b-f861w5ksyh] { justify-content: space-between; align-items: center; }
.prn-foot__actions[b-f861w5ksyh] { display: flex; gap: 8px; }

/* ---------------------------------------------------------------- on paper -------------------- */

@media print {
    .prn-paper[b-f861w5ksyh] {
        max-width: none;
        margin: 0;
        /* Rub stranice je nula, pa bjelinu oko cjenika daje sam list. */
        padding: 12mm;
        box-shadow: none;
        border: 0;
    }

    /*
        Tri naljepnice od 70 mm su točno 210 mm — puna širina A4. List zato nema
        vlastiti rub, jer bi i jedan milimetar gurnuo treću naljepnicu u sljedeći red.
        Pisač s nužnim neispisivim rubom stoga traži postavku „bez margina”.
    */
    .prn-paper--labels[b-f861w5ksyh] { padding: 0; }

    .prn-table[b-f861w5ksyh] { font-size: 11px; }
    .prn-table thead[b-f861w5ksyh] { display: table-header-group; }
    .prn-table tr[b-f861w5ksyh] { break-inside: avoid; }

    /*
        Naljepnica izlazi iz pisača u veličini koju polica očekuje, pa su mjere u milimetrima,
        a ne u pikselima: 70 × 36 mm, tri u redu na A4. Iscrtkani rub je crta rezanja.
    */
    .prn-labels[b-f861w5ksyh] {
        grid-template-columns: repeat(3, 70mm);
        gap: 0;
        margin-top: 0;
    }

    .prn-label[b-f861w5ksyh] {
        width: 70mm;
        height: 36mm;
        min-height: 0;
        padding: 3mm 3.5mm;
        box-sizing: border-box;
        break-inside: avoid;
    }

    .prn-label__name[b-f861w5ksyh] { font: 600 9pt/12pt var(--font-sans); }
    .prn-label__meta[b-f861w5ksyh] { font-size: 7pt; line-height: 9pt; }
    .prn-label__price[b-f861w5ksyh] { font: 700 17pt/20pt var(--font-sans); }
    .prn-label__foot[b-f861w5ksyh] { font: 400 7pt/9pt var(--font-sans); }
}

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

@media (max-width: 767.98px) {
    /* The whole screen, as the design draws "Ispis cjenika": the choices stacked on top, the paper
       under them, and the print button along the bottom edge. */
    .prn-modal[b-f861w5ksyh] {
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .prn-modal[b-f861w5ksyh]::before { display: none; }

    .prn-bar[b-f861w5ksyh] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 12px 16px;
    }

    .prn-bar__point[b-f861w5ksyh] { width: 100%; }

    .prn-seg[b-f861w5ksyh],
    .prn-seg--right[b-f861w5ksyh] {
        display: flex;
        grid-column: auto;
        justify-self: stretch;
    }

    .prn-seg__item[b-f861w5ksyh] { flex: 1; height: 36px; font: 600 13px/18px var(--font-sans); }

    .prn-scroll[b-f861w5ksyh] { padding: 16px; }
}

/* The paper keeps its own width on a phone and is shown smaller, so the preview is the whole sheet
   as it will come out of the printer, not its first column. Screen only: printing is untouched. */
@media screen and (max-width: 767.98px) {
    .prn-scroll[b-f861w5ksyh] { display: flex; flex-direction: column; align-items: center; background: #E9E9EC; }

    .prn-paper[b-f861w5ksyh] {
        flex: none;
        width: 880px;
        max-width: none;
        margin-top: 0;
        zoom: .38;
    }
}

/* The buttons across the whole bottom edge, the count on its own line above them. */
@media (max-width: 767.98px) {
    .prn-foot[b-f861w5ksyh] { flex-wrap: wrap; gap: 8px; }
    .prn-foot > .t-description[b-f861w5ksyh] { flex-basis: 100%; text-align: center; font-size: 12px; }
    .prn-foot__actions[b-f861w5ksyh] { flex: 1; gap: 10px; }
}
/* /Components/Shared/PublishConfirmModal.razor.rz.scp.css */
/* The publish confirmation, after the design: what publishing means, then the warning. */

.pcm-text[b-aa2ivmd07j] {
    margin-bottom: 14px;
    font: 500 14px/22px var(--font-sans);
    color: var(--text-tertiary);
}

.pcm-warning[b-aa2ivmd07j] {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: #FAEEDA;
    border: 1px solid rgba(133, 79, 11, .2);
    border-radius: var(--r-lg, 8px);
}

.pcm-warning__icon[b-aa2ivmd07j] {
    flex: none;
    margin-top: 1px;
    color: #854F0B;
}

.pcm-warning__text[b-aa2ivmd07j] {
    font: 500 13px/19px var(--font-sans);
    color: #6B3F09;
}
/* /Components/Shared/SelectionBar.razor.rz.scp.css */
/* Design, Proizvodi/Usluge: a brand-tinted strip between the search row and the table. */
.sel-bar[b-7znibm8ek5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-light-brand);
    border-bottom: 1px solid var(--ds-secondary);
}

.sel-bar__count[b-7znibm8ek5] { font: 700 13px/18px var(--font-sans); color: var(--bs-cta); }

.sel-bar__clear[b-7znibm8ek5] {
    font-size: 12px;
    background: none;
    border: 0;
    padding: 0;
}

.sel-bar__space[b-7znibm8ek5] { flex: 1; }
/* /Components/Shared/SettingToggle.razor.rz.scp.css */
/* The switch is the visible control; the real checkbox stays reachable but out of the way. */

.stg[b-hliwsydtv3] {
    display: inline-flex;
    align-items: center;
    flex: none;
    cursor: pointer;
    position: relative;
}

.stg__box[b-hliwsydtv3] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* The switch as the design draws it: a pill whose knob slides right and fills in when on. */
.sw[b-hliwsydtv3] {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--neutral-10, #D8D8D8);
    flex: none;
    cursor: pointer;
    transition: background .15s;
}

.sw[b-hliwsydtv3]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .15s;
}

.sw.is-on[b-hliwsydtv3] {
    background: var(--bs-cta);
}

.sw.is-on[b-hliwsydtv3]::after {
    transform: translateX(16px);
}

/* The keyboard focus has to be visible on the switch, since the box itself cannot show it. */
.stg:has(.stg__box:focus-visible) .sw[b-hliwsydtv3] {
    outline: 2px solid var(--bs-cta);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .sw[b-hliwsydtv3] { width: 44px; height: 26px; }
    .sw[b-hliwsydtv3]::after { top: 3px; left: 3px; width: 20px; height: 20px; }
    .sw.is-on[b-hliwsydtv3]::after { transform: translateX(18px); }
}