/* =============================================================
   Uski ekran — po dizajnu "Parra Cjenici Mobile".

   Dvije granice, i nijedna druga u aplikaciji:
     ≤ 1024 px  ladica umjesto bočne trake i niska gornja traka
                (ui-kit drži .app na 1200 px, pa ispod toga ne stane);
     ≤ 767,98 px telefon: tablice postaju liste kartica, dijalozi
                donje ploče, glavna radnja ide pod palac (plutajući
                gumb ili traka pri dnu).

   Ovdje je ono što dijele svi ekrani; što treba samo jednom
   ekranu stoji u njegovu .razor.css, pod istom granicom.
   Boje su iz dizajna; nova nije uvedena nijedna.
   ============================================================= */

/* The application stays at 1×: no pinch or double-tap zoom (the viewport meta in App.razor and
   js/shell.js do the rest), and a phone does not enlarge the text on its own. */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Dijelovi koje crta samo uski ekran. */
.sb-toggle,
.sb-scrim,
.tb__menu,
.tb__logo,
.tb__title,
.sb__close,
.tenant-switch--card,
.tenant-switch__grab,
.tenant-switch__close,
.m-topbar-slot,
.tb__info,
.m-row-hit,
.pr-chips,
.m-only { display: none; }

.tenant-switch__heading { display: flex; align-items: center; justify-content: space-between; }

/* Plutajući gumb nosi plus samo na telefonu; na stolu je to obični gumb iz dizajna. */
.page__actions--fab .ic { display: none; }

/* =============================================================
   ≤ 1024 px — ladica i niska gornja traka
   ============================================================= */

@media (max-width: 1024px) {
  .app {
    display: block;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* 100vh on a phone is the screen without the address bar, so a page of that height scrolls by
     exactly the bar; dvh is the height actually visible. vh stays for browsers without it. */
  .app__main { min-height: 100vh; min-height: 100dvh; }

  /* The checkbox stays in the tab order for the keyboard and the screen reader; it is only not seen. */
  .sb-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  /* Not moved with transform: a transformed drawer would become the frame for everything fixed
     inside it, and the obligor sheet has to cover the whole screen. */
  .sb {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -340px;
    z-index: 90;
    width: 316px;
    max-width: 86vw;
    padding: 12px 12px calc(20px + env(safe-area-inset-bottom));
    border-right: 0;
    gap: 10px;
    overflow-y: auto;
    visibility: hidden;
    transition: left .2s ease-out, visibility 0s linear .2s;
  }

  .sb-toggle:checked ~ .sb {
    left: 0;
    visibility: visible;
    transition: left .2s ease-out;
  }

  .sb-toggle:checked ~ .sb-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 85;
    background: rgba(0, 0, 0, .5);
  }

  .sb-toggle:focus-visible ~ .app__main .tb__menu { outline: 2px solid var(--bs-cta); outline-offset: -4px; }

  body:has(.sb-toggle:checked) { overflow: hidden; }

  .sb__logo { padding: 0 0 4px 8px; margin-bottom: 0; }

  .sb__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-lg);
    color: var(--text-secondary);
    cursor: pointer;
  }


  .sb__nav { flex: none; overflow: visible; }
  .sb__group { margin: 14px 8px 6px; }

  .sb__item { height: 44px; font: 500 14px/20px var(--font-sans); }
  .sb__item.is-active { font-weight: 700; box-shadow: inset 3px 0 0 var(--bs-cta); }

  .sb__footer { margin-top: auto; gap: 0; padding: 8px 0 0; }
  .sb__foot-item { min-height: 44px; padding: 0 12px; font: 500 14px/20px var(--font-sans); color: var(--text-tertiary); }
  .sb__foot-item--user { min-height: 48px; font-weight: 600; color: var(--text-primary); }
  .sb__user-dot { width: 28px; height: 28px; font: 700 11px/28px var(--font-sans); }
  .sb__logout { font: 600 13px/18px var(--font-sans); }

  /* ---------- the obligor as a card in the drawer ---------- */

  .tenant-switch--card { display: block; }

  .tenant-switch__card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ds-secondary);
    border-radius: var(--r-lg);
    cursor: pointer;
    list-style: none;
  }

  .tenant-switch__card::-webkit-details-marker { display: none; }
  .tenant-switch__card::marker { content: ""; }
  .tenant-switch__card .ic { color: var(--bs-text-icons); flex: none; }
  .tenant-switch__card .tenant-switch__mark { width: 32px; height: 32px; border-radius: var(--r-lg); font: 700 13px/32px var(--font-sans); }
  .tenant-switch__card .tenant-switch__name { font: 700 14px/18px var(--font-sans); }
  .tenant-switch__card .tenant-switch__meta { font: 500 12px/16px var(--font-sans); }

  /* ---------- the obligor list as a sheet from the bottom ---------- */

  /* The dim behind the sheet belongs to the summary, so a tap on it closes the list natively. */
  .tenant-switch[open] > summary::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(0, 0, 0, .5);
    cursor: default;
  }

  .tenant-switch__menu {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 96;
    min-width: 0;
    max-height: 85vh;
    overflow-y: auto;
    padding: 0 20px calc(24px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
    animation: sheet-up .2s ease-out;
  }

  .tenant-switch__grab {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #D8D8D8;
    margin: 8px auto 4px;
  }

  .tenant-switch__heading {
    margin: 0 -20px 4px;
    padding: 4px 8px 8px 20px;
    border-bottom: 1px solid var(--ds-secondary);
    font: 700 18px/24px var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
  }

  .tenant-switch__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--r-lg);
    background: transparent;
    color: var(--text-secondary);
  }

  .tenant-switch__item { gap: 12px; padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--ds-table); }
  .tenant-switch__item:hover,
  .tenant-switch__item.is-current { background: transparent; }
  .tenant-switch__item .tenant-switch__mark { width: 36px; height: 36px; border-radius: var(--r-lg); font: 700 13px/36px var(--font-sans); }
  .tenant-switch__item .tenant-switch__name { font: 600 15px/20px var(--font-sans); }
  .tenant-switch__item.is-current .tenant-switch__name { font-weight: 700; }
  .tenant-switch__item .tenant-switch__meta { font: 500 12px/16px var(--font-sans); }

  .tenant-switch__rule { display: none; }
  .tenant-switch__add { height: 48px; padding: 0; gap: 10px; font: 700 15px/20px var(--font-sans); }
  .tenant-switch__add:hover { background: transparent; }
  .tenant-switch__plus { width: 20px; height: 20px; border: 0; font-size: 22px; }

  /* ---------- the top bar ---------- */

  .tb {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 56px;
    padding: 0 12px 0 6px;
    gap: 6px;
  }

  .tb__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--r-lg);
    color: var(--text-primary);
    cursor: pointer;
  }

  .tb__logo { display: inline-flex; flex: none; margin-left: 2px; }

  .tb__title {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    font: 700 18px/24px var(--font-sans);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tb__spacer { display: none; }

  /* No breadcrumb on a narrow screen: the obligor is switched from the drawer's card. */
  .tb__crumbs { display: none; }

  .page { height: auto; overflow: visible; padding: 20px 16px 48px; }
}

/* =============================================================
   ≤ 767,98 px — telefon
   ============================================================= */

@media (max-width: 767.98px) {
  /* The shell status says the same as the dashboard does; on a phone the top bar has no room for it. */
  .tb > .st,
  .tb > .tb__next { display: none; }

  .m-only { display: inline; }
  .m-hide { display: none !important; }

  .page { padding: 16px 16px 32px; }

  /* ---------- page head ---------- */

  /* With the title in the top bar and the explanation behind the (i), the head keeps only what
     still stands in the page: its buttons, or the dashboard's obligor. */
  .page__head { flex-direction: column; gap: 0; margin-bottom: 0; }
  .page__head:has(.page__title--keep) { gap: 12px; margin-bottom: 16px; }
  .page__head > .page__actions:not(.page__actions--fab, .page__actions--bar) { margin-bottom: 16px; }

  /* The top bar already names the screen; only a heading that says something else stays. */
  .page__title { display: none; }
  .page__title--keep { display: block; font: 700 22px/28px var(--font-sans); }

  /* The screen's explanation is not in the content on a phone but behind the (i) next to the
     title; only the dashboard's line under the obligor's name stays where it is. */
  .page__sub { display: none; }
  .page__title--keep + .page__sub { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; }

  body:has(.page__head .page__sub):not(:has(.page__title--keep)) .tb__info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    margin-right: auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
  }

  body.info-open .tb__info { background: var(--bg-light-brand); color: var(--bs-cta); }

  /* The bubble (1ah): the screen's heading and its explanation under the top bar, with a point
     towards the (i). A tap anywhere closes it, the cross included (js/shell.js). */
  body.info-open .page__head > div:first-child:has(.page__sub) {
    position: fixed;
    top: 64px;
    left: 16px;
    right: 16px;
    z-index: 60;
    padding: 14px 16px;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: 0 0 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .08);
    animation: fi .15s ease-out;
  }

  body.info-open .page__head > div:first-child:has(.page__sub)::before {
    content: "";
    position: absolute;
    top: -6px;
    left: var(--info-x, 114px);
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 3px rgba(0, 0, 0, .05);
  }

  body.info-open .page__head > div:first-child:has(.page__sub)::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: no-repeat center / 16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23808080' stroke-width='1.7' stroke-linecap='round'><line x1='5' y1='5' x2='15' y2='15'/><line x1='15' y1='5' x2='5' y2='15'/></svg>");
  }

  body.info-open .page__head > div:first-child:has(.page__sub) .page__title {
    display: block;
    padding-right: 28px;
    margin-bottom: 6px;
    font: 700 14px/20px var(--font-sans);
  }

  body.info-open .page__head > div:first-child .page__sub {
    display: block;
    margin: 0;
    font: 500 13px/19px var(--font-sans);
    color: var(--text-tertiary);
  }

  .page__actions { flex-wrap: wrap; align-self: stretch; }

  /* The screen's one action as a floating button, within the thumb's reach. */
  .page__actions--fab {
    position: fixed;
    right: 16px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 50;
    align-self: auto;
  }

  .page__actions--fab .btn {
    height: 56px;
    padding: 0 20px 0 16px;
    border-radius: 16px;
    font: 700 15px/20px var(--font-sans);
    box-shadow: 0 8px 20px rgba(102, 45, 145, .35);
  }

  .page__actions--fab .ic { display: block; }

  .page:has(.page__actions--fab) { padding-bottom: 104px; }

  /* The screen's action as a bar along the bottom edge. */
  .page__actions--bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--ds-secondary);
  }

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

  .page__actions--bar .btn--prim { flex: 2; }

  .page:has(.page__actions--bar) { padding-bottom: 110px; }

  body:has(.page__actions--bar, .page__actions--fab) .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

  .toast { max-width: calc(100% - 32px); }

  /* ---------- fields ---------- */

  /* 16 px, not the design's 15: below that a phone zooms the page in when a field is tapped. */
  .txt,
  .sel,
  .field__input { height: 48px; font-size: 16px; }

  .field__label { font: 600 13px/18px var(--font-sans); }

  .txt--full,
  .field .sel { width: 100%; }

  /* ---------- tabs ---------- */

  .tabs {
    flex-wrap: nowrap;
    gap: 20px;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; height: 44px; }

  /* Two lists of one screen: a segmented control, as the design draws "Proizvodi / Usluge". */
  .tabs--seg {
    gap: 2px;
    margin: 0 0 12px;
    padding: 3px;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--neutral-05);
  }

  .tabs--seg .tab {
    flex: 1;
    height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    font: 600 14px/20px var(--font-sans);
    color: var(--text-secondary);
  }

  .tabs--seg .tab.is-on {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    font-weight: 700;
    color: var(--text-primary);
  }

  /* ---------- a table becomes a list of cards ---------- */

  /* Lists run from edge to edge, as the design draws them. */
  .tbl-card {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  .tbl--cards,
  .tbl--cards tbody { display: block; width: 100%; }
  .tbl--cards thead { display: none; }

  /*
      Each row is a card on a grid of two columns: what the row is about on the left, one line
      under another, and its amount on the right. The cells say which they are (data-role), so the
      same few rules serve every list.
  */
  .tbl--cards tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    min-height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ds-table);
  }

  .tbl--cards tbody td {
    display: block;
    grid-column: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: 500 12px/16px var(--font-sans);
    color: var(--text-secondary);
    text-align: left;
  }

  .tbl--cards tbody tr:hover td { background: transparent; }

  /* The kit right-aligns a number column; in a card only the amount on the right stays so. */
  .tbl.tbl--cards tbody td.num { text-align: left; }
  .tbl.tbl--cards tbody td.num[data-role="value"] { text-align: right; }

  .tbl--cards td[data-role="code"] { font-size: 12px; color: var(--text-secondary); }

  .tbl--cards td[data-role="title"] {
    font: 700 15px/20px var(--font-sans);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tbl--cards td[data-role="value"] {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    font: 700 15px/20px var(--font-sans);
    color: var(--text-primary);
    text-align: right;
  }

  /* The shorthands above reset the family; a code or an amount keeps the design's figures. */
  .tbl--cards tbody td.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

  .tbl--cards td[data-role="tags"] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }

  /* A value that needs its column's name to be understood. */
  .tbl--cards td[data-label]::before { content: attr(data-label) " "; color: var(--text-secondary); font-weight: 500; }

  .tbl--cards td[data-role="actions"] { grid-column: 1 / -1; margin-top: 8px; }
  .tbl--cards td[data-role="actions"] .pr-actions,
  .tbl--cards td[data-role="actions"] .sp-actions { justify-content: flex-start; flex-wrap: wrap; }

  .tbl--cards td[data-role="hide"],
  .tbl--cards td:empty { display: none; }

  /* Choosing for deletion (design 1aj): a long press starts it, then a tap adds or removes a card.
     There are no squares: a chosen card only turns light purple with a purple left edge and code.
     The thin strip with the count and "Obriši" stands under the search; the add button steps aside. */
  .tbl--cards td[data-role="pick"] { display: none; }

  .tbl--cards tr.is-picked {
    padding-left: 12px;
    background: var(--bg-light-brand);
    border-left: 4px solid var(--bs-cta);
  }

  .tbl--cards tr.is-picked td { background: transparent; }
  .tbl--cards tr.is-picked td[data-role="code"] { color: var(--bs-cta); }

  .m-list-page .tbl-card > .ms-bar { order: 3; }
  .m-list-page.is-picking .page__actions--fab { display: none; }

  /* A card that answers a long press must not also select its text or open the phone's own menu. */
  .tbl--cards tr[data-long-press] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

  /* A card that opens its item: one invisible button over the whole row. */
  .tbl--cards tr { position: relative; }

  .m-row-hit {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .m-row-hit:focus-visible { outline: 2px solid var(--bs-cta); outline-offset: -2px; }

  .tbl--cards td[data-role="title"] { white-space: nowrap; }
  .tbl--cards td[data-role="code"] { display: flex; align-items: center; gap: 8px; }
  .tbl--cards td[data-role="code"] .st { padding: 1px 7px; font: 600 11px/16px var(--font-sans); }

  /* A screen's own action in the top bar, at its right edge ("Uvoz" on the products). */
  .m-topbar-slot {
    display: flex;
    align-items: center;
    position: fixed;
    top: 6px;
    right: 8px;
    z-index: 45;
    height: 44px;
  }

  .m-topbar-slot--link { padding: 0 8px; font: 600 12px/16px var(--font-sans); color: var(--bs-cta); }

  /* =============================================================
     Liste kataloga i cijena (Proizvodi, Usluge, Cijene), po dizajnu:
     bijeli pojas s tražilicom ispod gornje trake, pa lista od ruba
     do ruba; uvod stranice i gumbi redaka se ne crtaju.
     ============================================================= */

  body:has(.m-list-page) .tb { border-bottom-color: transparent; }

  .m-list-page {
    display: flex;
    flex-direction: column;
    margin: -16px -16px 0;
  }

  .m-list-page > .page__head { order: 0; margin: 0; gap: 0; }

  /* The card around the list steps aside, so its toolbar, list and paging can be ordered with the
     strips that stand outside it on the wide screen. */
  .m-list-page .tbl-card { display: contents; }

  .m-list-page .pr-toolbar {
    order: 2;
    background: #fff;
    border-bottom: 1px solid var(--ds-secondary);
  }

  .m-list-page .tbl-card > :not(.pr-toolbar) { order: 4; }
  .m-list-page .tbl-card > .pr-chips { order: 3; }

  .m-list-page .tbl--cards { background: #fff; }
  .m-list-page .pr-empty { margin: 16px; }

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

  .pr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px 0 10px;
    border: 0;
    border-radius: 6px;
    background: var(--bg-light-brand);
    font: 600 12px/16px var(--font-sans);
    color: var(--bs-cta);
    cursor: pointer;
  }

  .pr-chips__count { margin-left: auto; font: 500 12px/16px var(--font-sans); }

  /* Paging: the count on the left, two arrow buttons on the right, on the list's white. */
  .m-list-page .pr-paging { background: #fff; border-top: 0; flex-wrap: nowrap; }
  .m-list-page .pr-paging .t-description { font: 500 12px/16px var(--font-sans); }

  .pr-paging__btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .pr-paging__arrow { display: flex; transform: rotate(-90deg); }
  .pr-paging__arrow--back { transform: rotate(90deg); }

  /* A service charged differently somewhere says so under its name, in brand colour. */
  .pr-own-line { display: block; font: 500 12px/16px var(--font-sans); color: var(--bs-cta); }

  .pr-form__delete { display: inline-flex; align-self: flex-start; margin-top: 4px; }

  /* ---------- the toolbar above a list ---------- */

  .pr-toolbar { flex-wrap: nowrap; gap: 8px; padding: 4px 16px 12px; }
  .pr-search { flex: 1; width: auto; height: 44px; }
  .pr-search input { font-size: 16px; }

  /* The filter button keeps its count but loses its word, as the design draws it. */
  .pr-filters {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: 0;
    padding: 0;
    justify-content: center;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--ds-secondary);
    color: var(--text-primary);
  }

  .pr-filters__label { display: none; }
  .pr-filters__icon { margin: 0; }

  .pr-filters__count { position: absolute; top: -6px; right: -6px; margin: 0; }

  .pr-paging { padding: 14px 16px; }

  /* ---------- filters in their sheet ---------- */

  .pr-filter { gap: 10px; }
  .pr-filter__heading { font: 600 13px/18px var(--font-sans); }
  .pr-filter__chips { gap: 8px; }

  .pr-filter__chips .pr-filter__chip {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ds-secondary);
    border-radius: 999px;
    background: #fff;
    font: 600 13px/18px var(--font-sans);
    color: var(--text-tertiary);
  }

  .pr-filter__chips .pr-filter__chip .chk { display: none; }

  .pr-filter__chips .pr-filter__chip:has(.pr-filter__box:checked) {
    background: var(--bs-cta);
    border-color: var(--bs-cta);
    color: #fff;
  }

  .pr-filter__list { gap: 0; }
  .pr-filter__list .pr-filter__chip { min-height: 48px; font: 500 15px/20px var(--font-sans); }

  /* ---------- a dialog becomes a sheet from the bottom ---------- */

  .scrim { align-items: flex-end; }

  .scrim > .modal {
    width: 100% !important;
    max-width: none;
    max-height: calc(100% - 56px);
    border-radius: 16px 16px 0 0;
    box-shadow: none;
    animation: sheet-up .2s ease-out;
  }

  .scrim > .modal::before {
    content: "";
    display: block;
    flex: none;
    width: 36px;
    height: 4px;
    margin: 8px auto 4px;
    border-radius: 999px;
    background: #D8D8D8;
  }

  .modal__h { padding: 4px 8px 8px 20px; }
  .modal__h .t { font: 700 18px/24px var(--font-sans); }
  .modal__h .x { width: 44px; height: 44px; font-size: 24px; }
  .modal__b { padding: 16px 20px; }

  .modal__f {
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
  }

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

  .modal__f .btn--prim,
  .modal__f .btn--dest { flex: 2; }

  /* The bulk delete sheet (design 1ak): a bin before the title and no ×, the text a size up, and
     Odustani and Obriši side by side at equal width. */
  .modal--bulk .modal__h { justify-content: flex-start; gap: 12px; padding: 8px 20px 12px; border-bottom: 0; }
  .modal--bulk .modal__h .x { display: none; }
  .modal--bulk .modal__b { padding: 0 20px 16px; }
  .modal--bulk .modal__b > .t-description { font: 500 15px/23px var(--font-sans); color: var(--text-tertiary); }
  .modal--bulk .modal__f .btn--dest { flex: 1; }

  /* ---------- the kit's small pieces at thumb size ---------- */

  .kpi { padding: 14px; }
  .kpi__lbl { font: 500 12px/16px var(--font-sans); }
  .kpi__val { font: 700 24px/28px var(--font-sans); margin-top: 6px; }

  .card-h { padding: 12px 16px; }
  .srow { padding: 12px 16px; }
  .srow .t { font: 600 14px/20px var(--font-sans); }

  /* A row whose control is more than a switch puts it under its words. */
  .srow:has(> .sel, > .txt, > .btn, > div:not(:first-child)) { flex-wrap: wrap; }
  .srow:has(> .sel, > .txt, > .btn, > div:not(:first-child)) > :first-child { flex-basis: 100%; }

  .code { font-size: 12px; line-height: 19px; }

  /* =============================================================
     Prijava, registracija, lozinka — cijeli ekran, bez kartice
     ============================================================= */

  .authbg { align-items: stretch; min-height: 100dvh; padding: 0; background: #fff; }

  .auth-column {
    display: flex;
    flex-direction: column;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 40px 24px calc(24px + env(safe-area-inset-bottom));
  }

  .auth-logo { margin-bottom: 36px; }

  .auth-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .auth-card > form { flex: 1; display: flex; flex-direction: column; }

  .auth-title { font: 700 24px/30px var(--font-sans); }
  .auth-lead { font-size: 14px; line-height: 20px; }
  .auth-info { padding: 12px; margin-bottom: 20px; }
  .auth-info__text { font: 500 13px/19px var(--font-sans); }
  .auth-forgot { margin-bottom: 24px; font-size: 14px; }

  .auth-card .btn { height: 52px; justify-content: center; font: 700 15px/20px var(--font-sans); }

  /* The way to the other screen sits at the bottom, under the thumb. */
  .auth-switch { margin-top: auto; padding-top: 24px; font: 500 14px/20px var(--font-sans); }

  .auth-notice__icon { width: 72px; height: 72px; }
  .auth-notice__title { font: 700 24px/30px var(--font-sans); }
  .auth-notice__body { font-size: 14px; line-height: 21px; }

  .pw-rule { font: 500 13px/18px var(--font-sans); }
  .pw-rule__mark { width: 16px; height: 16px; }

  .legal-check { font: 500 14px/20px var(--font-sans); }
  .legal-links.auth-legal { margin-top: 16px; }

  /* Registration: one column, and the button pinned along the bottom edge. */
  .authbg--top { padding: 0; }
  .auth-column--wide { padding: 20px 16px 0; }

  .reg-head { flex-wrap: wrap; gap: 8px; }
  .reg-card { padding: 0; border: 0; box-shadow: none; background: transparent; }
  .reg-title { font: 700 24px/30px var(--font-sans); }
  .reg-section { font: 700 11px/16px var(--font-sans); }
  .reg-pair,
  .reg-address { grid-template-columns: 1fr; gap: 12px; }

  .reg-foot {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--ds-secondary);
  }

  .reg-foot__actions .btn { width: 100%; height: 52px; justify-content: center; font: 700 15px/20px var(--font-sans); }
}

@keyframes sheet-up {
  from { transform: translateY(24px); opacity: .6; }
  to { transform: none; opacity: 1; }
}