/* =============================================================
   Ljuska aplikacije — ono što dizajn crta, a ui-kit ne pokriva:
   naslov proizvoda ispod logotipa, naslovi skupina u izborniku,
   prebacivač obveznika i desna strana gornje trake.

   Boje i mjere dolaze iz tokena; ovdje nema nijedne nove boje.
   ============================================================= */

.app__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tb__spacer { flex: 1; }

.tb__next { font-size: 12px; }

/* ---------- znak proizvoda ----------
   "cjenici" + "BY parra", kao na ulaznoj stranici i u priručniku; logotip je spušten 19 % da rep
   slova p sjedne ispod crte. */

.brand-mark { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; white-space: nowrap; }
.brand-mark:hover { color: inherit; }
.brand-mark i { font: 700 20px/26px var(--font-sans); font-style: normal; letter-spacing: -.02em; color: var(--bs-cta); }
.brand-mark span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font: 400 10px/14px ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.brand-mark img { height: 17px; width: auto; transform: translateY(19%); }

.brand-mark--sm { gap: 6px; }
.brand-mark--sm i { font-size: 17px; line-height: 22px; }
.brand-mark--sm span { font-size: 9px; gap: 5px; }
.brand-mark--sm img { height: 14px; }

/* The sign-in screens, where the mark stands alone over the card. */
.brand-mark--lg { gap: 10px; }
.brand-mark--lg i { font-size: 28px; line-height: 34px; }
.brand-mark--lg span { font-size: 11px; gap: 7px; }
.brand-mark--lg img { height: 23px; }

/* ---------- bočna traka ---------- */

/* Lifted so "cjenici" sits on the same line as the breadcrumb in the top bar beside it. */
.sb__logo { justify-content: space-between; padding: 0 4px 10px; margin-top: -2px; }

.sb__group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 4px 6px;
}

.sb__group span:first-child {
  font: 600 10px/14px var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.sb__group-rule { flex: 1; height: 1px; background: var(--ds-secondary); }

.sb__nav { overflow-y: auto; }

/* The nav items are links, not buttons, so a middle click opens a screen in a new tab —
   an accountant with several clients does that all day. */
.sb__item { text-decoration: none; }
.sb__item-label { flex: 1; }

.sb__foot-item { text-decoration: none; }
.sb__foot-item--user { justify-content: space-between; }

.sb__user { display: flex; align-items: center; gap: 10px; min-width: 0; }

.sb__user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb__logout { font-size: 11px; color: var(--text-secondary); flex: none; }

/* ---------- prebacivač obveznika ---------- */

.tenant-switch { position: relative; }

.tenant-switch__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  margin-left: -8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font: 600 13px/18px var(--font-sans);
  color: var(--bs-cta);
  list-style: none;
}

/* Bez trokutića koji preglednik sam crta — dizajn ima svoju strelicu. */
.tenant-switch__current::-webkit-details-marker { display: none; }
.tenant-switch__current::marker { content: ""; }

.tenant-switch__current:hover {
  background: var(--bg-light-brand);
  border-color: var(--ds-secondary);
}

.tenant-switch__menu {
  position: absolute;
  top: 34px;
  left: -8px;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--ds-secondary);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-dropdown, 0 0 16px rgba(0, 0, 0, 0.08), 0 0 2px rgba(0, 0, 0, 0.04));
  min-width: 300px;
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.tenant-switch__heading {
  font: 600 10px/14px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 6px 12px 4px;
}

.tenant-switch__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.tenant-switch__item:hover { background: var(--bg-light-brand); }
.tenant-switch__item.is-current { background: var(--bg-light-brand-2); }

.tenant-switch__mark {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bs-cta);
  color: #fff;
  font: 700 11px/26px var(--font-sans);
  text-align: center;
  flex: none;
}

.tenant-switch__text { flex: 1; min-width: 0; }

.tenant-switch__name {
  display: block;
  font: 600 13px/18px var(--font-sans);
  color: var(--text-primary);
}

.tenant-switch__meta {
  display: block;
  font: 500 11px/14px var(--font-sans);
  color: var(--text-secondary);
}

.tenant-switch__rule { height: 1px; background: var(--ds-table); margin: 4px 6px; }

.tenant-switch__add {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font: 600 13px/18px var(--font-sans);
  color: var(--bs-cta);
  text-decoration: none;
}

.tenant-switch__add:hover { background: var(--bg-light-brand); }

.tenant-switch__plus {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1.5px dashed var(--bs-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 var(--font-sans);
  flex: none;
}

/* Uski ekran (ladica, mobilna gornja traka, donje ploče) je u css/mobile.css. */

/* ---------- kratka potvrda pri dnu ---------- */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  background: var(--neutral-90, #1A1A1A);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-lg);
  font: 600 13px/18px var(--font-sans);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* A message that wraps on a narrow screen stays centred under the dot's line. The width is the
     message's own: pushed to the middle with left: 50%, the box would otherwise get only the right
     half of the screen and break a short sentence into three lines. */
  text-align: center;
  width: max-content;
  max-width: calc(100% - 32px);
}

.toast__dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.toast__dot--good { background: #7BC043; }
.toast__dot--info { background: #185FA5; }
.toast__dot--bad { background: #E36A6A; }

/* Gumb za zatvaranje dijaloga; ui-kit ga imenuje, ali ga ne crta. */
.modal__h .x {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
}

.modal__h .x:hover { background: var(--neutral-03); color: var(--text-primary); }

.modal__b { overflow: auto; flex: 1; }
.modal { display: flex; flex-direction: column; max-height: 88vh; }

/* A dialog that validates wraps its body and footer in a form; the form has to carry the same
   column layout, or the body stops scrolling and the footer slides off the bottom. */
.modal__form { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* =============================================================
   Ispis cjenika.

   Cjenik se prikazuje u dijalogu, a na papir ide samo list iz
   njega. Dijalog pritom stoji unutar ljuske aplikacije
   (.app > .app__main > .page > .scrim), pa se ljuska ne smije
   sakriti — s njom bi nestao i list, a iz pisača bi izašao
   prazan papir. Umjesto toga nestaje sve pokraj dijaloga, a
   sam niz do lista gubi visinu, pomak i rezanje sadržaja.
   ============================================================= */

@media print {
    /* Bez ruba, jer tri naljepnice od 70 mm zauzmu točno punu širinu A4; bjelinu
       oko cjenika daje sam list, koji je za to jedini koji zna o čemu je riječ. */
    @page { size: A4 portrait; margin: 0; }

    /* The certificate for an inspector is a document, not a sheet of labels: it keeps a margin on
       every page, and a table that runs on still starts below the edge. Named, because the rule
       above stays as it is for the price list. */
    @page potvrda { size: A4 portrait; margin: 16mm 15mm; }

    /* Sve pokraj dijaloga: bočna traka, gornja traka i sam ekran cijena. */
    body:has(.prn-modal) .sb,
    body:has(.prn-modal) .tb,
    body:has(.prn-modal) .page > *:not(.scrim),
    body:has(.prn-modal) .modal__h,
    body:has(.prn-modal) .prn-bar,
    body:has(.prn-modal) .modal__f { display: none !important; }

    /* Niz od stranice do lista prestaje biti okvir i postaje običan tijek. */
    body:has(.prn-modal) .app,
    body:has(.prn-modal) .app__main,
    body:has(.prn-modal) .page,
    body:has(.prn-modal) .scrim,
    body:has(.prn-modal) .prn-modal,
    body:has(.prn-modal) .prn-scroll {
        display: block;
        position: static;
        inset: auto;
        width: auto;
        height: auto;
        min-height: 0;
        max-width: none;
        max-height: none;
        overflow: visible;
        margin: 0;
        padding: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
        grid-template-columns: none;
    }
}

/* A new terms version is announced. Inside the page, so the fixed shell height is not pushed. */
.legal-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: var(--bg-light-brand-2);
  border: 1px solid var(--bg-brand-3);
  font: 500 13px/18px var(--font-sans);
}