/* Alimis: jednostavan, svijetao izgled nad Universal Themeom */
.t-Form-fieldContainer--radioButtonGroup .apex-item-grid-row label {
    border-radius: var(--dd-radius-sm)!important; 

}

.no-decoration {
    background: transparent;
    border: none;
    box-shadow: none;
}

:root {
  --dd-primary: #0f766e;
  --dd-primary-dark: #115e59;
  --dd-primary-soft: #e6f4f1;
  --dd-bg: #f6f7f6;
  --dd-card: #ffffff;
  --dd-border: #e5e7eb;
  --dd-text: #1f2937;
  --dd-muted: #6b7280;
  --dd-radius: 14px;
  /* zaobljenja: plohe (regije, kartice, slike), kontrole i male plohe (gumbi, polja, sličice), pilula (čipovi, trake) */
  --dd-radius-sm: 8px;
  --dd-radius-pill: 999px;
  /* ljestvica slova: oznake, sporedni tekst, naslov kartice, naslov odjeljka i broj u draweru, broj u pločici, naslov stranice */
  --dd-fs-xs: 12px;
  --dd-fs-sm: 13px;
  --dd-fs-md: 15px;
  --dd-fs-lg: 20px;
  --dd-fs-xl: 26px;
  --dd-fs-2xl: 28px;
  /* stanja: u redu, čeka, problem, neaktivno (tekst, podloga oznake, rub i traka) */
  --dd-ok-text: #166534;
  --dd-ok-bg: #dcfce7;
  --dd-ok: #16a34a;
  --dd-warn-text: #92400e;
  --dd-warn-bg: #fef3c7;
  --dd-warn: #f59e0b;
  --dd-bad-text: #991b1b;
  --dd-bad-bg: #fee2e2;
  --dd-bad: #dc2626;
  --dd-muted-text: #374151;
  --dd-muted-bg: #e5e7eb;
  --dd-muted-edge: #9ca3af;
  --ut-palette-primary: var(--dd-primary);
  --ut-palette-primary-contrast: #ffffff;
  --ut-palette-primary-alt: var(--dd-primary-dark);
  --ut-palette-primary-shade: var(--dd-primary-soft);
  --ut-link-text-color: var(--dd-primary);
  /* Vita ove boje zadaje plavom (#056ac8): fokus, polja, kvačice, izbornici i brojači */
  --ut-focus-outline-color: var(--dd-primary);
  --a-field-input-focus-border-color: var(--dd-primary);
  --ut-field-input-focus-icon-color: var(--dd-primary);
  --ut-field-fl-input-focus-icon-background-color: var(--dd-primary);
  --a-checkbox-checked-background-color: var(--dd-primary);
  --a-menu-focused-background-color: var(--dd-primary);
  --a-button-count-background-color: var(--dd-primary);
  --a-cv-icon-background-color: var(--dd-primary);
  --a-cv-initials-background-color: var(--dd-primary);
  --ut-treeview-badge-background-color: var(--dd-primary);
  --a-button-border-radius: var(--dd-radius-sm);
  --ut-component-border-radius: var(--dd-radius);
  --ut-region-border-radius: var(--dd-radius);
  --a-cv-border-radius: var(--dd-radius);
  /* kartice: stanja koja APEX sam primjenjuje na kartice na koje se može kliknuti */
  --a-cv-border-color: var(--dd-border);
  --a-cv-shadow: none;
  --a-cv-hover-border-color: var(--dd-primary);
  --a-cv-hover-shadow: 0 0 0 3px var(--dd-primary-soft), 0 10px 22px -10px rgba(15, 118, 110, .35);
  --a-cv-active-border-color: var(--dd-primary-dark);
  --a-cv-active-shadow: 0 0 0 3px var(--dd-primary-soft);
  --a-cv-focus-border-color: var(--dd-primary);
  --a-cv-focus-shadow: 0 0 0 3px var(--dd-primary-soft);
}

body, .t-Body, .t-Body-main, .t-Body-content, .t-Body-contentInner { background-color: var(--dd-bg); }
body { color: var(--dd-text); }
.t-Body-contentInner { max-width: 1240px; margin-inline: auto; padding: 8px 16px 32px; }

/* zaglavlje */
.t-Header-branding { background: #ffffff; color: var(--dd-text); box-shadow: none; border-bottom: 1px solid var(--dd-border); }
.t-Header-logo, .t-Header-logo a, .t-Header-logo-link { color: var(--dd-primary-dark); font-weight: 700; }
.t-Header-logo .apex-logo-img { display: block; width: auto; height: 26px; }
/* prijava: logo umjesto ikone; naslov ostaje samo za čitače ekrana jer je naziv u logu */
.t-Login-header img.t-Login-logo { width: auto; max-width: 100%; height: 44px; border-radius: 0; background: none; object-fit: contain; }
.t-Login-header .t-Login-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.t-Header .t-Button--header, .t-Header .t-Button--header .t-Icon { color: var(--dd-text); }
.t-Header-nav { background: #ffffff; border-bottom: 1px solid var(--dd-border); }
.t-Header-nav .t-Tabs-link { color: var(--dd-muted); font-weight: 600; }
.t-Header-nav .t-Tabs-item.is-active .t-Tabs-link { color: var(--dd-primary); box-shadow: inset 0 -2px 0 var(--dd-primary); }

/* naslov stranice */
.dd-header { margin-top: 12px; }
.dd-title { font-size: var(--dd-fs-2xl); line-height: 1.2; font-weight: 700; margin: 0; color: var(--dd-text); }
.dd-sub { margin: 4px 0 0; color: var(--dd-muted); font-size: var(--dd-fs-md); }
.dd-actions { margin-top: 16px; text-align: end; }
.dd-actions .t-ButtonRegion { background: transparent; }
.dd-actions .t-ButtonRegion-wrap { padding: 0; }
/* gumbi se prelamaju umjesto da izlaze iz okvira */
.dd-actions .t-ButtonRegion-wrap { display: flex; justify-content: flex-end; align-items: flex-start; }
.dd-actions .t-ButtonRegion-col { display: block; min-width: 0; max-width: 100%; }
.dd-actions .t-ButtonRegion-col--content { flex: 0 0 auto; width: auto; padding: 0; }
.dd-actions .t-ButtonRegion-buttons { display: flex; flex-wrap: wrap; row-gap: 4px; }
.dd-actions .t-ButtonRegion-buttons:empty { display: none; }
.dd-actions .t-ButtonRegion-col--right .t-ButtonRegion-buttons { justify-content: flex-end; padding-inline-start: 0; }
/* Natrag je prvi gumb slijeva, malo odvojen od ostalih */
.dd-actions .t-ButtonRegion-col--left .t-ButtonRegion-buttons { padding-inline-end: 4px; }
.dd-actions .t-ButtonRegion-col--left .t-Button:first-child { margin-inline-end: 8px; }
@media (max-width: 992px) {
  .dd-actions .t-ButtonRegion-wrap { flex-wrap: wrap; justify-content: flex-start; row-gap: 4px; padding: 16px; }
  .dd-actions .t-ButtonRegion-buttons { gap: 4px; padding: 0; }
  .dd-actions .t-Button + .t-Button { margin-inline-start: 0; }
  .dd-actions .t-ButtonRegion-col--left .t-ButtonRegion-buttons { padding: 0 4px 0 0; }
  .dd-actions .t-ButtonRegion-col--right .t-ButtonRegion-buttons { justify-content: flex-start; }
}
/* podnožje drawera i dijaloga: svi gumbi u jednom retku (Zatvori lijevo, ostali desno). Kad ne stanu, npr. na
   mobitelu, red se pomiče vodoravno umjesto da gumbi prelaze u nove retke */
.t-Drawer-footer .t-ButtonRegion, .t-Dialog-footer .t-ButtonRegion { --ut-button-region-padding: .5rem; }
.t-Drawer-footer .t-ButtonRegion-wrap, .t-Dialog-footer .t-ButtonRegion-wrap { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: .5rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.t-Drawer-footer .t-ButtonRegion-col, .t-Dialog-footer .t-ButtonRegion-col { flex: none; width: auto; padding: 0; }
.t-Drawer-footer .t-ButtonRegion-col--content, .t-Dialog-footer .t-ButtonRegion-col--content { flex: 1 0 auto; }
.t-Drawer-footer .t-ButtonRegion-col--right, .t-Dialog-footer .t-ButtonRegion-col--right { margin-inline-start: auto; }
.t-Drawer-footer .t-ButtonRegion-buttons, .t-Dialog-footer .t-ButtonRegion-buttons { display: flex; flex-wrap: nowrap; gap: 8px; padding: 0; }
.t-Drawer-footer .t-ButtonRegion-buttons .t-Button, .t-Dialog-footer .t-ButtonRegion-buttons .t-Button { flex: none; margin: 0; white-space: nowrap; }
/* tablice u regijama: na uskom ekranu tablica se pomiče vodoravno, umjesto da okvir regije odreže zadnje stupce */
.t-Report-tableWrap { overflow-x: auto; overscroll-behavior-x: contain; }
/* vodoravno pomični redovi (podnožje, tablice, filteri na mobitelu): rub iza kojeg ima još sadržaja blago izblijedi.
   Preglednik bez animacija vezanih uz pomicanje samo pomiče red. Bez prelijevanja animacija ne radi, pa nema ni maske. */
@property --dd-fade-start { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --dd-fade-end { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes dd-scroll-fade {
  0% { --dd-fade-start: 0px; --dd-fade-end: 28px; }
  8% { --dd-fade-start: 28px; }
  92% { --dd-fade-end: 28px; }
  100% { --dd-fade-start: 28px; --dd-fade-end: 0px; }
}
@supports (animation-timeline: scroll()) {
  .t-Drawer-footer .t-ButtonRegion-wrap, .t-Dialog-footer .t-ButtonRegion-wrap, .t-Report-tableWrap {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--dd-fade-start), #000 calc(100% - var(--dd-fade-end)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--dd-fade-start), #000 calc(100% - var(--dd-fade-end)), transparent);
    animation: dd-scroll-fade linear both;
    animation-timeline: scroll(self inline);
  }
}
/* na mobitelu uži gumbi, da ih više stane bez pomicanja */
@media (max-width: 480px) {
  .t-Drawer-footer .t-ButtonRegion-wrap, .t-Dialog-footer .t-ButtonRegion-wrap { padding: .25rem; }
  .t-Drawer-footer .t-ButtonRegion, .t-Dialog-footer .t-ButtonRegion { --ut-button-region-padding: .25rem; }
  .t-Drawer-footer .t-ButtonRegion-buttons, .t-Dialog-footer .t-ButtonRegion-buttons { gap: 6px; }
  .t-Drawer-footer .t-Button, .t-Dialog-footer .t-Button { --a-button-padding-x: .625rem; }
}
.dd-subnav .t-Tabs { border-bottom: 1px solid var(--dd-border); }
.dd-subnav .t-Tabs-item.is-active .t-Tabs-link { color: var(--dd-primary); box-shadow: inset 0 -2px 0 var(--dd-primary); }
.dd-section-title { font-size: var(--dd-fs-md); font-weight: 700; margin: 16px 0 4px; color: var(--dd-text); }

/* kartice i regije */
.t-Region { border-radius: var(--dd-radius); border-color: var(--dd-border); box-shadow: none; }
.t-Region-header { border-top-left-radius: var(--dd-radius); border-top-right-radius: var(--dd-radius); background: transparent; }
.t-Region-title { font-weight: 700; }
.a-CardView { border-radius: var(--dd-radius); }
.a-CardView-title { font-weight: 700; transition: color .2s ease; }
/* kartica na koju se može kliknuti se pod mišem lagano podigne, a naslov poprimi boju aplikacije */
@media (hover: hover) {
  .a-CardView.has-actions--full:hover { transform: translateY(-2px); }
  .a-CardView.has-actions--full:hover .a-CardView-title { color: var(--dd-primary-dark); }
}
.a-CardView.has-actions--full:active { transform: none; }
/* u regiji koja se skrola bez razmaka (kartice u draweru) obrub i podizanje ne smiju se odrezati */
.t-Region--noPadding.t-Region--scrollBody .a-CardView-items { padding: 5px 4px 16px; }
.a-CardView-subTitle, .a-CardView-subContent { color: var(--dd-muted); }
.dd-kpi .a-CardView-title { font-size: var(--dd-fs-xl); line-height: 1.1; color: var(--dd-primary-dark); }
/* redak ispod naziva pločice, npr. „Pravo ističe u 30 dana: 2” uz Aktivne korisnike */
.dd-kpi .a-CardView-mainContent { color: var(--dd-warn-text); font-size: var(--dd-fs-sm); font-weight: 600; }
.dd-quick .t-Card-wrap { border-radius: var(--dd-radius); }
/* brze radnje i šifrarnici: isti obrub pod mišem kao kartice */
.t-Cards .t-Card-wrap { transition: border-color .2s ease, box-shadow .2s ease; }
.t-Cards .t-Card:hover .t-Card-wrap, .t-Cards .t-Card-wrap:focus-visible { border-color: var(--dd-primary); box-shadow: 0 0 0 3px var(--dd-primary-soft), 0 10px 22px -10px rgba(15, 118, 110, .35); }
.t-Cards .t-Card:hover .t-Card-title { color: var(--dd-primary-dark); }
@media (prefers-reduced-motion: reduce) {
  .a-CardView.has-actions--full:hover, .t-Cards--animRaiseCard .t-Card:hover { transform: none; }
}
.dd-quick .t-Card-icon .t-Icon { color: var(--dd-primary); }

/* filter: tražilica i pilule */
.dd-filters { margin-block: 8px; }
.dd-filters input[type="text"] { border-radius: var(--dd-radius-sm); min-height: 40px; }
.t-Form-fieldContainer--radioButtonGroup .apex-item-grid-row label { border-radius: var(--dd-radius-pill); }
/* filteri: segmentirani odabir, siva podloga i odabrana opcija u boji aplikacije */
.dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-grid-row { display: inline-flex; max-width: 100%; gap: 2px; padding: 3px; border-radius: calc(var(--dd-radius-sm) + 3px); background: #e9eceb; }
.dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-option { float: none; width: auto !important; min-width: 0; }
.dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option input + label { align-items: center; justify-content: center; min-inline-size: 0; min-block-size: 34px; padding: 6px 14px; border: 0; background: transparent; box-shadow: none; color: #4b5563; font-size: var(--dd-fs-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option input:not(:checked) + label:hover { background: rgba(255, 255, 255, .7); color: var(--dd-text); }
.dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option input:checked + label, .dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option input:checked + label:hover { background: var(--dd-primary); color: #fff; box-shadow: 0 1px 2px rgba(15, 118, 110, .3); }
.dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option input:focus + label { outline: none; }
.dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option input:focus-visible + label { outline: 2px solid var(--dd-primary); outline-offset: 2px; }
/* gumbi za odabir u formama (npr. spol): odabrana opcija u boji aplikacije, kao u filterima */
/* glavni gumbi i odabrane opcije: Vita ih boji plavo izravno na elementu, pa se boja aplikacije zadaje na istim selektorima */
.a-Button--hot, .a-CardView-button--hot, .apex-button-group input:checked + label, .t-Button--hot, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked + label, .ui-button--hot { --a-button-background-color: var(--dd-primary); --a-button-hover-background-color: var(--dd-primary-dark); --a-button-active-background-color: var(--dd-primary-dark); }
.a-Button--hot.t-Button--simple, .t-Button--hot.t-Button--simple, .ui-button--hot.t-Button--simple { --a-button-border-color: var(--dd-primary); --a-button-text-color: var(--dd-primary); }
.a-Button--hot.t-Button--link, .t-Button--hot.t-Button--link, .ui-button--hot.t-Button--link { --a-button-text-color: var(--dd-primary); }
.a-Button--hot.a-Button--noUI, .t-Button--hot.t-Button--noUI, .ui-button--hot.t-Button--noUI { --a-button-text-color: var(--dd-primary); color: var(--dd-primary); }
.t-Button--hot .fa:after, .t-Button--simple.t-Button--hot:hover .fa:after { background-color: var(--dd-primary); }
@media (max-width: 992px) {
  .dd-filters .t-Form-fieldContainer--radioButtonGroup { width: 100%; }
  .dd-filters .t-Form-fieldContainer--radioButtonGroup .t-Form-inputContainer { flex: 1 1 auto; width: 100%; }
  .dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc { --a-field-input-flex-grow: 1; width: 100%; }
  .dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-grid { display: block; width: 100%; }
  .dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-grid-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option input + label { min-block-size: 40px; padding: 6px 4px; font-size: var(--dd-fs-sm); text-align: center; white-space: normal; }
}

/* filteri u jednom redu: tražilica, ostala polja i status poravnati, s jednakim razmacima */
.dd-filters--row .row { align-items: center; column-gap: 12px; margin-inline: 0; padding-inline: var(--ut-grid-gutter-width, .5rem); }
.dd-filters--row .row > .col { flex: 0 0 auto; width: auto; max-width: 100%; min-width: 0; padding-inline: 0; }
.dd-filters--row .row > .col > .t-Form-fieldContainer { margin-inline: 0; padding-inline: 0; }
.dd-filters--row .row > .dd-filter-search { flex: 1 1 200px; }
.dd-filters--row .row > .dd-filter-date { flex: 0 0 160px; }
.dd-filters--row .row > .dd-filter-select { flex: 0 1 240px; }
/* poništavanje filtera: samo ikona, visoka kao polja, na kraju retka; širine iznad su takve da na širem ekranu stane u isti redak */
.dd-filters--row .row > .dd-filter-reset { order: 1; }
.dd-filter-reset .t-Button { min-width: 40px; min-height: 40px; border-radius: var(--dd-radius-sm); }
.dd-filters--row .dd-filter-search .t-Form-fieldContainer, .dd-filters--row .dd-filter-date .t-Form-fieldContainer, .dd-filters--row .dd-filter-select .t-Form-fieldContainer { width: 100%; max-inline-size: none; }
.dd-filters--row .t-Form-inputContainer { min-width: 0; padding-inline: 0; }
.dd-filters--row .t-Form-itemWrapper { min-width: 0; }
/* datum i padajući popis: polje i gumb kao jedna cjelina */
.dd-filters--row a-date-picker, .dd-filters--row .apex-item-group--popup-lov { display: flex; width: 100%; min-width: 0; }
.dd-filters--row a-date-picker input[type="text"], .dd-filters--row .apex-item-group--popup-lov input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
.dd-filters--row .a-Button--calendar, .dd-filters--row .a-Button--popupLOV { flex: 0 0 auto; min-height: 40px; margin-inline-start: -1px; border-radius: 0 var(--dd-radius-sm) var(--dd-radius-sm) 0; }
@media (max-width: 992px) {
  /* gumb za poništavanje ostaje uz tražilicu i datume, a padajući popis i status idu u svoj redak ispod */
  .dd-filters--row .row > .dd-filter-reset { order: 0; }
  .dd-filters--row .row > .dd-filter-select { flex-basis: 100%; order: 1; }
  .dd-filters--row .row > .dd-filter-status { flex-basis: 100%; order: 2; }
}
@media (max-width: 640px) {
  /* na mobitelu svi filteri u jednom retku koji se pomiče vodoravno: tražilica i poništavanje prvi, zatim datumi,
     padajući popis i status; svako polje zadrži punu širinu, a status ne lomi tekst */
  .dd-filters--row .row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: 4px; }
  .dd-filters--row .row::-webkit-scrollbar { display: none; }
  .dd-filters--row .row > .col { flex: none; }
  .dd-filters--row .row > .dd-filter-search { flex: 0 0 min(240px, 62vw); order: 0; }
  .dd-filters--row .row > .dd-filter-reset { order: 1; }
  .dd-filters--row .row > .dd-filter-date { flex: 0 0 150px; order: 2; }
  .dd-filters--row .row > .dd-filter-select { flex: 0 0 220px; order: 3; }
  .dd-filters--row .row > .dd-filter-status { flex: none; order: 4; }
  .dd-filters--row .t-Form-fieldContainer--radioButtonGroup, .dd-filters--row .t-Form-fieldContainer--radioButtonGroup .t-Form-inputContainer, .dd-filters--row .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc, .dd-filters--row .t-Form-fieldContainer--radioButtonGroup .apex-item-grid { width: auto; }
  .dd-filters--row .t-Form-fieldContainer--radioButtonGroup .apex-item-grid-row { display: inline-flex; width: auto; max-width: none; }
  .dd-filters--row .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option input + label { padding: 6px 14px; white-space: nowrap; }
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 640px) {
    .dd-filters--row .row, .dd-wiz-actions .t-ButtonRegion-wrap {
      -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--dd-fade-start), #000 calc(100% - var(--dd-fade-end)), transparent);
      mask-image: linear-gradient(to right, transparent, #000 var(--dd-fade-start), #000 calc(100% - var(--dd-fade-end)), transparent);
      animation: dd-scroll-fade linear both;
      animation-timeline: scroll(self inline);
    }
  }
}

/* slike proizvoda: sličica u popisu i pregled u draweru */
/* cijela slika ostaje vidljiva unutar kvadrata, bez rezanja i rastezanja */
.dd-thumb { display: block; box-sizing: border-box; width: 48px; height: 48px; padding: 3px; object-fit: contain; border-radius: var(--dd-radius-sm); border: 1px solid var(--dd-border); background: #ffffff; }
.dd-product-image { display: block; box-sizing: border-box; width: 120px; height: 120px; padding: 6px; object-fit: contain; border-radius: var(--dd-radius); border: 1px solid var(--dd-border); background: #ffffff; }
/* korisnici: slika na kartici je kvadratić kao sličica proizvoda, a ne APEX-ov krug */
.dd-people .a-CardView { --a-cv-icon-image-size: 48px; --a-cv-icon-image-border-radius: var(--dd-radius-sm); }
.dd-people .a-CardView-iconImg { box-sizing: border-box; padding: 3px; object-fit: contain; border: 1px solid var(--dd-border); background: #ffffff; }
.dd-image-picker { display: block; padding: 0; border: 0; border-radius: var(--dd-radius); background: none; cursor: pointer; }
.dd-image-picker:hover .dd-product-image, .dd-image-picker:focus-visible .dd-product-image { border-color: var(--dd-primary); box-shadow: 0 0 0 3px var(--dd-primary-soft); }
.dd-image-picker:focus-visible { outline: none; }
.dd-image-size { margin-top: 6px; color: var(--dd-muted); font-size: var(--dd-fs-xs); font-weight: 400; line-height: 16px; min-height: 16px; }

/* proizvodi donacije na kartici: sličica s količinom u kutu i naziv */
.dd-donprods { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.dd-donprod { display: flex; flex: 1 1 130px; align-items: center; gap: 12px; min-width: 0; max-width: 240px; }
.dd-donprod-img { position: relative; flex: none; }
.dd-thumb--sm { width: 40px; height: 40px; padding: 2px; border-radius: var(--dd-radius-sm); }
.dd-donprod-qty { position: absolute; right: -7px; bottom: -6px; box-sizing: border-box; min-width: 22px; padding: 0 4px; border: 2px solid var(--dd-card); border-radius: var(--dd-radius-sm); background: var(--dd-primary-dark); color: #ffffff; font-size: var(--dd-fs-xs); font-weight: 700; line-height: 15px; text-align: center; white-space: nowrap; }
.dd-donprod-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--dd-text); font-size: var(--dd-fs-sm); line-height: 17px; }
.dd-donprods-more { flex: none; color: var(--dd-muted); font-size: var(--dd-fs-sm); line-height: 17px; }
/* dodatni podaci na kartici (kontakt, OIB, zadnji paket) u jednom retku koji se prelama */
.dd-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--dd-muted); font-size: var(--dd-fs-sm); line-height: 18px; }
.dd-meta li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.dd-meta .fa { flex: none; color: var(--dd-primary); font-size: 14px; }
/* poziv i e-pošta: gumbi s ikonom na kartici i uz polje; na kartici moraju biti iznad poveznice koja otvara karticu */
.a-CardView.has-actions--full .a-CardView-button { z-index: var(--a-button-zindex, 2); }
.dd-contact-btn { justify-content: center; min-width: 40px; min-height: 40px; border-radius: var(--dd-radius-sm); color: var(--dd-primary); }
.dd-contact-btn .a-CardView-buttonIcon, .dd-contact-btn .t-Icon { color: var(--dd-primary); font-size: 18px; }
.dd-contact-btn:hover, .dd-contact-btn:focus-visible { border-color: var(--dd-primary); }
.a-CardView-actionsPrimary .dd-contact-btn + .dd-contact-btn { margin-inline-start: 8px; }
.t-Form-itemWrapper .dd-contact-btn { flex: none; min-height: 0; align-self: stretch; margin-inline-start: 8px; }
@media (max-width: 640px) {
  /* na mobitelu dva proizvoda u redu, da kartica ostane kratka */
  .dd-donprods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dd-donprod { max-width: none; }
}

/* stablo kategorija: glavne kategorije su kartice, podkategorije uvučene uz liniju vodilju */
.dd-cattree, .dd-cattree ul { margin: 0; padding: 0; list-style: none; }
.dd-cattree { display: grid; gap: 12px; align-items: start; margin-top: 8px; }
@media (min-width: 993px) {
  .dd-cattree { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
}
.dd-cattree > li { padding: 6px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: var(--dd-card); }
.dd-cattree ul { margin-inline-start: 27px; padding-inline-start: 10px; border-inline-start: 1px solid var(--dd-border); }
.dd-cattree summary { list-style: none; cursor: pointer; }
.dd-cattree summary::-webkit-details-marker { display: none; }
.dd-cattree-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 8px; border-radius: var(--dd-radius-sm); transition: background-color .15s ease; }
.dd-cattree-row:hover { background: var(--dd-primary-soft); }
.dd-cattree summary:focus-visible { outline: 2px solid var(--dd-primary); outline-offset: 1px; }
.dd-cattree-chevron { flex: none; width: 12px; color: var(--dd-muted); font-size: 11px; text-align: center; transition: transform .15s ease; }
.dd-cattree details[open] > summary .dd-cattree-chevron { transform: rotate(90deg); }
.dd-cattree-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--dd-radius-sm); background: var(--dd-primary-soft); color: var(--dd-primary); font-size: 15px; }
.dd-cattree > li > details > summary .dd-cattree-icon { width: 38px; height: 38px; background: var(--dd-primary); color: #ffffff; font-size: 17px; }
.dd-cattree-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.dd-cattree-name { overflow-wrap: anywhere; color: var(--dd-text); font-weight: 600; line-height: 1.3; text-decoration: none; }
.dd-cattree-name:hover, .dd-cattree-name:focus-visible { color: var(--dd-primary-dark); text-decoration: underline; }
.dd-cattree > li > details > summary .dd-cattree-name { font-size: var(--dd-fs-md); font-weight: 700; }
.dd-cattree-meta { color: var(--dd-muted); font-size: var(--dd-fs-xs); line-height: 1.4; }
.dd-cattree-add { flex: none; --a-button-background-color: transparent; --a-button-border-color: transparent; color: var(--dd-primary); }
.dd-cattree-add .t-Icon { color: var(--dd-primary); }
.dd-cattree-add:hover, .dd-cattree-add:focus-visible { --a-button-background-color: #ffffff; --a-button-border-color: var(--dd-primary); }
.dd-cattree-row.is-final .dd-cattree-icon { background: #f3f4f6; color: var(--dd-muted); }
.dd-cattree-row.is-inactive .dd-cattree-name, .dd-cattree-row.is-inactive .dd-cattree-icon { opacity: .6; }
.dd-mark { padding: 0 1px; border-radius: var(--dd-radius-sm); background: #fde68a; color: inherit; }
.dd-empty { margin: 16px 4px; color: var(--dd-muted); }
@media (max-width: 640px) {
  .dd-cattree ul { margin-inline-start: 14px; padding-inline-start: 6px; }
  .dd-cattree-row { gap: 8px; padding-inline: 4px; }
}

/* povijest izmjena: sažetak, dani i promjene kao kartice na vremenskoj crti */
.dd-hist-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 20px; }
.dd-hist-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: var(--dd-card); }
.dd-hist-stat strong { color: var(--dd-primary-dark); font-size: var(--dd-fs-xl); line-height: 1.1; }
.dd-hist-stat span { color: var(--dd-muted); font-size: var(--dd-fs-sm); }
.dd-hist-day { margin-bottom: 20px; }
.dd-hist-date { margin: 0 0 10px; color: var(--dd-text); font-size: var(--dd-fs-sm); font-weight: 700; }
.dd-hist-list { position: relative; margin: 0; padding: 0 0 0 44px; list-style: none; }
.dd-hist-list::before { position: absolute; top: 6px; bottom: 6px; left: 15px; width: 2px; border-radius: var(--dd-radius-pill); background: var(--dd-border); content: ""; }
.dd-hist-item { position: relative; margin-bottom: 12px; }
/* tema ikonama daje position: relative (.apex-icons-fontapex .fa), pa pravilo treba jaču specifičnost */
.dd-hist-list .dd-hist-icon { position: absolute; top: 16px; left: -44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 32px; border: 3px solid var(--dd-bg); border-radius: 50%; font-size: 13px; }
.dd-hist-item--i .dd-hist-icon { background: var(--dd-ok-bg); color: var(--dd-ok-text); }
.dd-hist-item--u .dd-hist-icon { background: var(--dd-warn-bg); color: var(--dd-warn-text); }
.dd-hist-item--d .dd-hist-icon { background: var(--dd-bad-bg); color: var(--dd-bad-text); }
.dd-hist-card { padding: 12px 16px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: var(--dd-card); }
.dd-hist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dd-hist-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.dd-hist-title strong { overflow-wrap: anywhere; color: var(--dd-text); font-size: var(--dd-fs-md); }
.dd-hist-what { color: var(--dd-muted); font-size: var(--dd-fs-sm); }
.dd-hist-changes { width: 100%; margin-top: 10px; border-collapse: collapse; table-layout: fixed; font-size: var(--dd-fs-sm); }
.dd-hist-changes th, .dd-hist-changes td { padding: 6px 8px; border-top: 1px solid var(--dd-border); overflow-wrap: anywhere; text-align: start; vertical-align: top; }
.dd-hist-changes thead th { border-top: 0; color: var(--dd-muted); font-size: var(--dd-fs-xs); font-weight: 600; }
.dd-hist-changes tbody th { width: 30%; color: var(--dd-muted-text); font-weight: 600; }
.dd-hist-item--u .dd-hist-old { color: var(--dd-bad-text); text-decoration: line-through; text-decoration-color: rgba(153, 27, 27, .4); }
.dd-hist-item--u .dd-hist-old:has(.dd-hist-empty) { text-decoration: none; }
.dd-hist-item--u .dd-hist-new { color: var(--dd-ok-text); font-weight: 600; }
.dd-hist-empty { color: var(--dd-muted); font-style: italic; font-weight: 400; }
.dd-hist-rest summary { margin-top: 6px; color: var(--dd-primary); font-size: var(--dd-fs-sm); font-weight: 600; cursor: pointer; }
.dd-hist-rest .dd-hist-changes { margin-top: 4px; }
.dd-hist-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; color: var(--dd-muted); font-size: var(--dd-fs-xs); }
.dd-hist-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.dd-hist-meta .fa { color: var(--dd-primary); }
.dd-hist-footer { margin: 4px 0 16px; text-align: center; }
@media (max-width: 640px) {
  .dd-hist-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-hist-list { padding-left: 32px; }
  .dd-hist-list::before { left: 11px; }
  .dd-hist-list .dd-hist-icon { top: 14px; left: -32px; width: 24px; height: 24px; border-width: 2px; font-size: 10px; }
  .dd-hist-card { padding: 10px 12px; }
  /* polje iznad vrijednosti, a kod izmjene prije i poslije jedno uz drugo */
  .dd-hist-changes thead { display: none; }
  .dd-hist-changes tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; padding: 6px 0; border-top: 1px solid var(--dd-border); }
  .dd-hist-changes th, .dd-hist-changes td { padding: 0; border: 0; }
  .dd-hist-changes tbody th { grid-column: 1 / -1; width: auto; margin-bottom: 2px; }
  .dd-hist-item--i .dd-hist-changes td, .dd-hist-item--d .dd-hist-changes td { grid-column: 1 / -1; }
}

/* zaliha proizvoda (kartica u formi proizvoda): sažetak i lotovi */
.dd-stock-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.dd-stock-stats .dd-hist-stat { padding: 10px 12px; }
.dd-stock-stats .dd-hist-stat strong { font-size: var(--dd-fs-lg); }
.dd-stock-type { display: block; color: var(--dd-muted); font-size: var(--dd-fs-xs); }
.t-Report-report .dd-num { text-align: end; white-space: nowrap; }
.dd-section-sub { margin: 4px 0 0; color: var(--dd-muted); font-size: var(--dd-fs-sm); font-weight: 600; }
.dd-section-sub + .dd-donprods { margin: 8px 0 16px; }

/* novi paket: pločice predložaka (radio gumbi) sa stavkama predloška */
.dd-tpl-label { margin: 12px 0 6px; color: var(--dd-text); font-size: var(--dd-fs-sm); font-weight: 600; }
.dd-tpl-list { display: grid; gap: 8px; }
.dd-tpl { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: var(--dd-card); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.dd-tpl:hover { border-color: var(--dd-primary); }
.dd-tpl:has(.dd-tpl-radio:checked) { border-color: var(--dd-primary); background: var(--dd-primary-soft); box-shadow: 0 0 0 1px var(--dd-primary); }
.dd-tpl:has(.dd-tpl-radio:focus-visible) { outline: 2px solid var(--dd-primary); outline-offset: 2px; }
.dd-tpl-radio { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--dd-primary); }
.dd-tpl-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dd-tpl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.dd-tpl-name { color: var(--dd-text); font-weight: 700; }
.dd-tpl-meta, .dd-tpl-desc { color: var(--dd-muted); font-size: var(--dd-fs-xs); }
.dd-tpl-items { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.dd-tpl--empty { border-style: dashed; }
/* stavka predloška: kategorija ili točno određen proizvod; neobavezna je isprekidana */
.dd-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius-pill); background: #f9fafb; color: var(--dd-muted-text); font-size: var(--dd-fs-xs); line-height: 18px; }
.dd-chip .fa { flex: none; color: var(--dd-muted); font-size: 11px; }
.dd-chip b { font-weight: 600; color: var(--dd-primary-dark); white-space: nowrap; }
.dd-chip--prod { border-color: #99d5cc; background: #f0faf8; }
.dd-chip--prod .fa { color: var(--dd-primary); }
.dd-chip--opt { border-style: dashed; }

/* pravo na paket: na kartici korisnika (novi paket) i u formi korisnika */
.dd-entitle { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; color: var(--dd-muted); font-size: var(--dd-fs-sm); line-height: 18px; }
.dd-entitle .fa { flex: none; margin-top: 2px; }
.dd-entitle--ok { color: var(--dd-ok-text); }
.dd-entitle--bad { color: var(--dd-bad-text); font-weight: 600; }
.dd-entitle--wait { color: var(--dd-warn-text); }
/* kartica paketa: koliko proizvoda i pakiranja je u paketu */
.dd-pkg-sum { margin: 6px 0 0; color: var(--dd-muted); font-size: var(--dd-fs-sm); }
.dd-badge--new { background: var(--dd-primary); color: #ffffff; }
/* kartice na popisima (paketi, predlošci, donacije, donatori, korisnici): stanje iznad naziva i slike, skroz lijevo;
   lijevi rub kartice u boji stanja. Četiri stanja: u redu (ok), čeka (warn), problem (bad), neaktivno (muted);
   paketi imaju svoja imena za ista stanja (draft = čeka, issued = u redu, cancelled = neaktivno) */
.dd-pkg-cards .a-CardView-badge { grid-area: icon-top; justify-self: start; margin: 0 0 8px; }
.dd-pkg-cards .a-CardView:has(.dd-status--ok, .dd-status--issued) { --dd-status-color: var(--dd-ok); }
.dd-pkg-cards .a-CardView:has(.dd-status--warn, .dd-status--draft) { --dd-status-color: var(--dd-warn); }
.dd-pkg-cards .a-CardView:has(.dd-status--bad) { --dd-status-color: var(--dd-bad); }
.dd-pkg-cards .a-CardView:has(.dd-status--muted, .dd-status--cancelled) { --dd-status-color: var(--dd-muted-edge); }
.dd-pkg-cards .a-CardView:has([class*="dd-status--"]) { box-shadow: inset 6px 0 0 var(--dd-status-color), 0 1px 3px rgba(17, 24, 39, .08); }
/* upozorenje na kartici (alergije korisnika) odmah ispod opisa */
.a-CardView-subContent > .dd-entitle:first-child { margin: 0 0 6px; }
.dd-title-badge { margin-inline-start: 8px; vertical-align: 2px; }

/* čarobnjak za kreiranje paketa: koraci */
.dd-steps ol { display: flex; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: none; }
.dd-step { flex: 1 1 0; min-width: 0; }
.dd-step-link { position: relative; display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: var(--dd-card); color: var(--dd-muted); text-decoration: none; }
a.dd-step-link:hover { border-color: var(--dd-primary); color: var(--dd-text); }
.dd-step-num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #e9eceb; color: #4b5563; font-weight: 700; font-size: var(--dd-fs-sm); }
.dd-step-label { display: flex; flex-direction: column; min-width: 0; font-weight: 600; font-size: var(--dd-fs-sm); line-height: 18px; }
.dd-step-label small { color: var(--dd-muted); font-weight: 400; font-size: var(--dd-fs-xs); }
.dd-step.is-current .dd-step-link { border-color: var(--dd-primary); background: var(--dd-primary-soft); color: var(--dd-text); box-shadow: 0 0 0 1px var(--dd-primary); }
.dd-step.is-current .dd-step-num, .dd-step.is-done .dd-step-num { background: var(--dd-primary); color: #ffffff; }
.dd-step.is-done .dd-step-link { color: var(--dd-text); }
.dd-wiz-timer { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 6px 12px; border-radius: var(--dd-radius-sm); background: var(--dd-primary-soft); color: var(--dd-primary-dark); font-size: var(--dd-fs-sm); }
.dd-wiz-timer.is-low { background: var(--dd-warn-bg); color: var(--dd-warn-text); }
.dd-wiz-timer.is-expired { background: var(--dd-bad-bg); color: var(--dd-bad-text); font-weight: 600; }
@media (max-width: 640px) {
  .dd-step-label small { display: none; }
  .dd-step-link { padding: 8px; gap: 6px; }
  .dd-step-label { font-size: var(--dd-fs-xs); line-height: 15px; }
}

/* korak 1: datum, paket i korisnici jedan ispod drugoga; sljedeći dio pojavljuje se kad je prethodni odabran */
.dd-wiz-sec { margin: 0 0 28px; padding: 18px 20px 20px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: var(--dd-card); }
.dd-wiz-sec--later { display: none; }
.dd-wiz-sec--later.is-open { display: block; animation: dd-wiz-in .25s ease-out; }
@keyframes dd-wiz-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dd-wiz-sec--later.is-open { animation: none; } }
.dd-wiz-sec-title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--dd-text); font-size: var(--dd-fs-md); font-weight: 700; }
.dd-wiz-num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--dd-primary-soft); color: var(--dd-primary-dark); font-size: var(--dd-fs-sm); font-weight: 700; }
.dd-wiz-sec-sub { margin: 2px 0 14px 36px; }
.dd-wiz-sec--date .t-Form-fieldContainer { max-width: 260px; margin-inline-start: 26px; }
.dd-wiz-sec .dd-tpl-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dd-wiz-sec .dd-filters { margin-top: 0; }
@media (max-width: 640px) {
  .dd-wiz-sec { padding: 14px 12px 16px; }
  .dd-wiz-sec-sub { margin-inline-start: 0; }
  .dd-wiz-sec--date .t-Form-fieldContainer { margin-inline-start: 0; }
}
/* gumbi čarobnjaka: Odustani malo odmaknut, Natrag i Dalje jedan uz drugoga */
.dd-wiz-actions .t-ButtonRegion-col--left .t-ButtonRegion-buttons { padding-inline-end: 24px; }
/* popisi: naslov, izbornik odjeljka i filteri ostaju na vrhu (app.js postavlja razmak od vrha za svaki redak) */
.dd-sticky-row { position: sticky; z-index: 100; background: var(--dd-bg); }
.dd-sticky-row.dd-sticky-last { padding-bottom: 6px; box-shadow: 0 8px 12px -12px rgba(17, 24, 39, .35); }
.dd-sticky-row .dd-filters { margin-block: 4px 0; }
/* naslov s opisom i gumbima ostaje na vrhu, odmah ispod zaglavlja aplikacije */
.row:has(> .col > .dd-wiz-head) { position: sticky; top: var(--dd-sticky-top, calc(var(--ut-header-height, 3rem) + 3rem)); z-index: 100; margin-bottom: 8px; padding-bottom: 6px; background: var(--dd-bg); box-shadow: 0 8px 12px -12px rgba(17, 24, 39, .35); }
.row:has(> .col > .dd-wiz-head) .dd-header, .row:has(> .col > .dd-wiz-head) .dd-actions { margin-top: 8px; margin-bottom: 0; }
@media (max-width: 640px) {
  .dd-wiz-head .dd-sub { display: none; }
}
/* na mobitelu i niskom ekranu naslov s gumbima ostaje u toku stranice, da ne prekrije korake i sadržaj */
@media (max-width: 640px), (max-height: 599px) {
  .row:has(> .col > .dd-wiz-head) { position: static; box-shadow: none; }
}
/* korak 3: značke uz proizvod jedna ispod druge, iste širine */
.dd-badges { display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 9.5em; vertical-align: middle; }
.dd-badges > .dd-badge { justify-content: center; text-align: center; white-space: normal; }
.dd-badges > :empty { display: none; }
/* korak 3: proizvodi u paketu grupirani po kategoriji */
.dd-inpack .dd-group-row th { padding-top: 10px; background: var(--dd-primary-soft); color: var(--dd-primary-dark); font-size: var(--dd-fs-xs); font-weight: 700; text-align: start; }
.dd-inpack .dd-group-row .fa { margin-inline-end: 6px; }
/* naziv proizvoda u paketu: klik ga traži među proizvodima na zalihi */
.dd-find { padding: 0; border: 0; background: none; color: var(--dd-primary-dark); font: inherit; text-align: start; cursor: pointer; }
.dd-find:hover { text-decoration: underline; }
.dd-find:focus-visible { outline: 2px solid var(--dd-primary); outline-offset: 2px; border-radius: var(--dd-radius-sm); }
/* stanje paketa na karticama korisnika: djelomičan narančasto, nepotpun crveno */
.dd-ring--djelomican { background: conic-gradient(var(--dd-warn) calc(var(--p) * 1%), #fde68a 0); }
.dd-ring--nepotpun { background: conic-gradient(var(--dd-bad) calc(var(--p) * 1%), #fecaca 0); }
.dd-wiz-tab--djelomican .dd-wiz-tab-meta { color: #b45309; }
.dd-wiz-tab--nepotpun .dd-wiz-tab-meta { color: #b91c1c; }
.dd-wiz-tab--potpun .dd-wiz-tab-meta { color: var(--dd-ok-text); }

/* dodavanje stavke (korak 2 i stavke paketa): količine sa strelicama, obavezno i gumb */
.dd-wiz-add { display: flex; flex-direction: column; gap: 10px; }
.dd-wiz-add-row { display: flex; gap: 12px; }
.dd-wiz-field { display: flex; flex: 1 1 0; flex-direction: column; gap: 4px; min-width: 0; color: var(--dd-text); font-size: var(--dd-fs-sm); font-weight: 600; }
.dd-wiz-field input { width: 100%; min-height: 36px; text-align: end; }
.dd-wiz-field select { width: 100%; min-height: 36px; }
.dd-wiz-field select:disabled { opacity: .7; }
/* otpis cijele donacije: što je od donacije na zalihi i gumb za dodavanje svih lotova */
.dd-wiz-don { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius-sm); background: var(--dd-primary-soft); }
.dd-wiz-don-text { margin: 0 0 8px; color: var(--dd-text); }
.dd-wiz-don-text .fa { margin-inline-end: 6px; color: var(--dd-primary-dark); }
/* količina (broj pakiranja) u retku tablica s proizvodima je istaknuta */
.dd-qty,
.t-Report-cell[headers="KOLICINA"], .t-Report-cell[headers="ZALIHA"], .t-Report-cell[headers="SLOZENO"],
.t-Report-cell[headers$="_kol"], .t-Report-cell[headers$="_pak"], .t-Report-cell[headers$="_zal"],
.t-Report-cell[headers$="_broj"], .t-Report-cell[headers="o_st"],
.dd-wiz-items input.dd-wiz-amount { font-weight: 700; }
.dd-wiz-add .dd-sub { margin: 0; }
.dd-wiz-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--dd-fs-sm); cursor: pointer; }
.dd-wiz-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--dd-primary); }
.dd-wiz-add-btn { align-self: flex-start; }

/* korak 1: predlošci (ručno kreiranje je izdvojeno na vrhu) i kartice korisnika */
.dd-wiz-sub { margin: 14px 0 6px; color: var(--dd-muted); font-size: var(--dd-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dd-tpl--manual { border-width: 2px; border-style: dashed; border-color: #99d5cc; background: #f8fcfb; }
.dd-tpl--manual .dd-tpl-name .fa { margin-inline-end: 6px; color: var(--dd-primary); }
/* oznaka zalihe predloška (pkg_package_wizard.stock_badge): broj paketa i stavka koja ga ograničava */
.dd-tpl-stock { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-inline-start: auto; }
.dd-tpl-limit { color: var(--dd-muted); font-size: var(--dd-fs-xs); }
.dd-ben-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 10px; color: var(--dd-muted); font-size: var(--dd-fs-sm); }
.dd-ben-bar strong { color: var(--dd-text); }
/* sve kartice korisnika iste su veličine: redovi su visoki kao najviša kartica, a duži tekst se skraćuje */
.dd-ben-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.dd-ben-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-ben-meta, .dd-ben-warn { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dd-ben { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: var(--dd-card); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.dd-ben:hover { border-color: var(--dd-primary); }
.dd-ben.is-selected, .dd-ben:has(.dd-ben-check:checked) { border-color: var(--dd-primary); background: var(--dd-primary-soft); box-shadow: 0 0 0 1px var(--dd-primary); }
.dd-ben:has(.dd-ben-check:focus-visible) { outline: 2px solid var(--dd-primary); outline-offset: 2px; }
.dd-ben-check { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--dd-primary); }
.dd-ben-img { flex: none; width: 40px; height: 40px; box-sizing: border-box; padding: 2px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius-sm); background: #ffffff; object-fit: contain; }
.dd-ben-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd-ben-name { color: var(--dd-text); font-weight: 700; }
.dd-ben-meta, .dd-ben-last { color: var(--dd-muted); font-size: var(--dd-fs-xs); line-height: 16px; }
.dd-ben-last .fa, .dd-ben-warn .fa { margin-inline-end: 4px; }
.dd-ben-warn { color: #c2410c; font-size: var(--dd-fs-xs); font-weight: 600; line-height: 16px; }
.dd-ben-warn .fa { color: #ea580c; }
/* korisnik bez prava: narančasti rub ostaje i kad je odabran */
.dd-ben.has-warn, .dd-ben.has-warn:has(.dd-ben-check) { border-inline-start: 4px solid #f97316; }

/* korak 2: stavke paketa */
.dd-wiz-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.dd-wiz-state .dd-badge { font-size: var(--dd-fs-sm); padding: 4px 12px; }
.dd-badge--tpl { background: var(--dd-primary-soft); color: var(--dd-primary-dark); }
.dd-badge--custom { background: #ffedd5; color: #9a3412; }
.dd-badge--custom .fa, .dd-badge--tpl .fa { margin-inline-end: 6px; }
.dd-wiz-items input[type="number"] { width: 6em; min-height: 32px; text-align: end; }
.dd-wiz-items .dd-item-name .fa { margin-inline-end: 6px; color: var(--dd-muted); }
.dd-wiz-items .dd-item-name .fa-cube { color: var(--dd-primary); }
.dd-wiz-items .dd-item-name .dd-sub, .dd-wiz-state .dd-sub { margin: 0; color: var(--dd-muted); font-size: var(--dd-fs-xs); }
.dd-req { display: inline-flex; align-items: center; gap: 4px; color: var(--dd-bad-text); font-weight: 600; white-space: nowrap; }
.dd-wiz-note { margin: 8px 0 0; color: var(--dd-muted); font-size: var(--dd-fs-sm); }
/* čarobnjak donacije: donator i podaci iz prvog koraka iznad proizvoda */
.dd-wiz-sec.dd-don-sum { margin-bottom: 16px; padding: 12px 16px; }
.dd-don-head { display: flex; align-items: center; gap: 12px; }
.dd-don-head-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.dd-don-head-body .dd-sub { margin: 0; }
/* čarobnjak donacije, prvi korak: kartice donatora s više zraka, podaci u recima s ikonom */
.dd-ben-list.dd-donor-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.dd-ben.dd-donor { gap: 14px; padding: 16px 18px; }
.dd-donor .dd-ben-img { width: 56px; height: 56px; }
.dd-donor .dd-ben-body { gap: 6px; }
.dd-donor .dd-ben-name { font-size: var(--dd-fs-md); line-height: 20px; white-space: normal; }
.dd-donor-type { align-self: flex-start; }
.dd-donor-rows { display: grid; gap: 6px; margin-top: 4px; }
.dd-donor-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--dd-text); font-size: var(--dd-fs-sm); line-height: 18px; overflow-wrap: anywhere; }
.dd-donor-row .fa { flex: none; width: 14px; color: var(--dd-primary); text-align: center; }
.dd-donor-row--muted { color: var(--dd-muted); }
.dd-donor-row--muted .fa { color: var(--dd-muted); }
/* otpis ili korekcija: razlog u retku lota i upozorenje uz pakiranja */
.dd-stock-lines .dd-stock-note { width: 100%; min-width: 12em; min-height: 32px; }
.dd-stock-lines .dd-num .dd-badge { margin-inline-start: 0; }
/* najviše pakiranja za otpis uz unos broja: u retku lota i kao gumb uz polje za dodavanje */
.dd-stock-qty { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.dd-stock-lines .dd-stock-amount { width: 5.5em; }
.dd-stock-max { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border: 1px solid var(--dd-primary); border-radius: 999px; background: var(--dd-primary-soft); color: var(--dd-primary-dark); font: inherit; font-size: var(--dd-fs-xs); font-weight: 600; line-height: 18px; white-space: nowrap; }
button.dd-stock-max { margin-inline-start: 8px; cursor: pointer; }
button.dd-stock-max:hover:not(:disabled) { background: var(--dd-primary); color: #fff; }
button.dd-stock-max:focus-visible { outline: 2px solid var(--dd-primary); outline-offset: 2px; }
.dd-stock-max.is-empty { border-color: var(--dd-border); background: transparent; color: var(--dd-muted); cursor: default; }
#P31_ADD_AMOUNT_CONTAINER .t-Form-itemText--post { display: flex; align-items: center; }
/* forma proizvoda: veličine pakiranja u mjernim jedinicama kategorije (mala tablica s filtrom praznih) */
.dd-sizes { margin: 4px 0 16px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius-sm); background: var(--dd-card); overflow: hidden; }
.dd-sizes-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border-bottom: 1px solid var(--dd-border); }
.dd-sizes-title { color: var(--dd-text); font-size: var(--dd-fs-sm); font-weight: 600; }
.dd-sizes-filter { display: inline-flex; align-items: center; gap: 6px; color: var(--dd-muted); font-size: var(--dd-fs-xs); font-weight: 600; cursor: pointer; }
.dd-sizes-filter input { accent-color: var(--dd-primary); margin: 0; }
.dd-sizes-list { margin: 0; padding: 0; list-style: none; }
.dd-size { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--dd-border); }
.dd-size:last-child { border-bottom: 0; }
.dd-sizes .dd-size-input.apex-item-text { flex: none; width: 8em; min-height: 34px; text-align: right; }
.dd-sizes .dd-size-input.is-invalid { border-color: var(--dd-bad); box-shadow: 0 0 0 1px var(--dd-bad); }
.dd-size-unit { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; color: var(--dd-muted); font-size: var(--dd-fs-sm); cursor: pointer; }
.dd-size-unit strong { min-width: 2.5em; color: var(--dd-text); font-weight: 600; }
.dd-size.is-empty .dd-size-unit strong { color: var(--dd-muted); }
.dd-sizes-none { margin: 0; padding: 12px 14px; color: var(--dd-muted); font-size: var(--dd-fs-sm); }
.dd-sizes-note { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 8px 14px; border-top: 1px solid var(--dd-border); background: var(--dd-bg); color: var(--dd-muted); font-size: var(--dd-fs-xs); line-height: 1.4; }
.dd-sizes-note .fa { flex: none; color: var(--dd-primary); }
/* inventura: kartica inventure u tijeku s napretkom */
.dd-count-open { margin: 4px 0 20px; padding: 16px 20px; border: 1px solid var(--dd-warn); border-radius: var(--dd-radius); background: var(--dd-card); box-shadow: inset 4px 0 0 var(--dd-warn); }
.dd-count-open-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.dd-count-open-title { margin: 6px 0 2px; color: var(--dd-text); font-size: var(--dd-fs-lg); font-weight: 700; }
.dd-count-open-head .dd-sub { margin: 0; font-size: var(--dd-fs-sm); }
.dd-count-open-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-count-progress { height: 8px; margin: 14px 0 8px; border-radius: var(--dd-radius-pill); background: var(--dd-muted-bg); overflow: hidden; }
.dd-count-progress span { display: block; height: 100%; border-radius: inherit; background: var(--dd-primary); }
.dd-count-open-sum { margin: 0; color: var(--dd-muted); font-size: var(--dd-fs-sm); }
.dd-count-open-sum strong { color: var(--dd-text); }
.dd-count-new-sub { margin: 0 0 8px; font-size: var(--dd-fs-sm); }
/* inventura: popis lotova za brojanje */
.dd-count-lines .dd-count-group th { padding: 10px 12px 6px; border-bottom: 1px solid var(--dd-border); background: var(--dd-bg); color: var(--dd-primary-dark); font-size: var(--dd-fs-sm); font-weight: 700; text-align: start; }
.dd-count-lines .dd-cnt-qty { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dd-count-lines .dd-cnt-input { width: 5.5em; text-align: right; }
.dd-count-lines .dd-cnt-note { width: 100%; min-width: 10em; }
.dd-count-lines .dd-cnt-exp { font-weight: 600; }
.dd-count-lines tr[data-state="diff"] > td:first-child { box-shadow: inset 3px 0 0 var(--dd-warn); }
.dd-count-lines tr[data-state="ok"] .dd-cnt-same, .dd-count-lines tr[data-state="diff"] .dd-cnt-same { visibility: hidden; }
.dd-count-lines tr.is-saving { opacity: .6; }
.dd-count-lines tr.is-saved > td { background: var(--dd-primary-soft); transition: background-color .3s ease; }
.dd-count-lines .dd-cnt-input.is-invalid { border-color: var(--dd-bad); box-shadow: 0 0 0 1px var(--dd-bad); }
.dd-count-history .dd-num { white-space: nowrap; }
/* popis za brojanje na papiru: prazna polja za upis */
.dd-doc-table .dd-doc-blank { min-width: 22mm; height: 9mm; }

/* korak 3: korisnici kao kartice s popunjenošću paketa */
.dd-wiz-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px; padding: 2px 2px 6px; }
.dd-wiz-tab { position: relative; display: flex; flex: 0 0 auto; align-items: stretch; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: var(--dd-card); }
.dd-wiz-tab.is-current { border-color: var(--dd-primary); background: var(--dd-primary-soft); box-shadow: 0 0 0 1px var(--dd-primary); }
.dd-wiz-tab-link { display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 10px; color: var(--dd-text); text-decoration: none; }
.dd-wiz-tab-text { display: flex; flex-direction: column; min-width: 0; max-width: 180px; }
.dd-wiz-tab-name { overflow: hidden; font-weight: 700; font-size: var(--dd-fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.dd-wiz-tab-meta { color: var(--dd-muted); font-size: var(--dd-fs-xs); white-space: nowrap; }
.dd-wiz-tab.is-complete .dd-wiz-tab-meta { color: var(--dd-ok-text); }
.dd-wiz-tab-remove { align-self: flex-start; margin: 4px 4px 0 0; padding: 2px 6px; border: 0; border-radius: var(--dd-radius-sm); background: transparent; color: var(--dd-muted); cursor: pointer; }
.dd-wiz-tab-remove:hover { background: var(--dd-bad-bg); color: var(--dd-bad-text); }
.dd-warn-icon { color: #ea580c; }
/* kružni pokazatelj popunjenosti; potpun paket ima zelenu kvačicu */
.dd-ring { --p: 0; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--dd-primary) calc(var(--p) * 1%), var(--dd-muted-bg) 0); font-size: var(--dd-fs-xs); font-weight: 700; color: var(--dd-text); }
.dd-ring > span { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dd-card); }
.dd-ring--done { background: var(--dd-ok); }
.dd-ring--done > span { background: var(--dd-ok); color: #ffffff; font-size: 14px; }
.dd-wiz-person { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
.dd-wiz-person h2 { margin: 0; font-size: var(--dd-fs-lg); }
.dd-wiz-person p { margin: 0; color: var(--dd-muted); font-size: var(--dd-fs-sm); }
.dd-lot { max-width: 190px; min-height: 32px; }
.dd-qty { width: 4.5em; min-height: 32px; text-align: end; }

/* oznake stanja */
.dd-badge { display: inline-block; padding: 2px 10px; border-radius: var(--dd-radius-pill); font-size: var(--dd-fs-xs); font-weight: 600; line-height: 18px; white-space: nowrap; }
.dd-badge--ok { background: var(--dd-ok-bg); color: var(--dd-ok-text); }
.dd-badge--warn { background: var(--dd-warn-bg); color: var(--dd-warn-text); }
.dd-badge--bad { background: var(--dd-bad-bg); color: var(--dd-bad-text); }
.dd-badge--muted { background: var(--dd-muted-bg); color: var(--dd-muted-text); }
/* proizvod s alergenom na koji je korisnik osjetljiv: smije u paket, ali se vidi uz naziv */
.dd-allergen { display: inline-flex; align-items: center; gap: 4px; white-space: normal; }
.dd-allergen .fa { font-size: 11px; }
.t-Tabs-link .dd-tab-alert { display: inline-flex; margin-inline-start: 6px; color: var(--dd-bad); font-size: 12px; }
.dd-link-danger { color: #b91c1c; font-weight: 600; }

/* tablice */
.t-Report-report { background: transparent; }
.t-Report-colHead { font-weight: 600; color: var(--dd-muted); background: transparent; }
.t-Report-cell { vertical-align: middle; }

@media (max-width: 640px) {
  .dd-actions { text-align: start; margin-top: 8px; }
  /* na mobitelu su gumbi jedan ispod drugoga */
  .dd-actions .t-ButtonRegion-wrap { display: block; padding: 16px; }
  .dd-actions .t-ButtonRegion-col { width: 100%; padding: 0; }
  .dd-actions .t-ButtonRegion-col--left .t-ButtonRegion-buttons:not(:empty) { margin-bottom: 8px; }
  .dd-actions .t-ButtonRegion-buttons { flex-direction: column; row-gap: 8px; padding: 0; }
  .dd-actions .t-ButtonRegion-col--left .t-ButtonRegion-buttons { padding-inline-end: 0; }
  .dd-actions .t-Button { width: 100%; margin: 0; }
  .dd-actions .t-ButtonRegion-col--left .t-Button:first-child { margin: 0 0 8px; }
  .dd-title { font-size: var(--dd-fs-xl); }
  /* čarobnjak: Odustani lijevo, Natrag i Dalje desno, u jednom retku koji se po potrebi pomiče vodoravno */
  .dd-wiz-actions .t-ButtonRegion-wrap { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 4px 0 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .dd-wiz-actions .t-ButtonRegion-col { flex: none; width: auto; }
  .dd-wiz-actions .t-ButtonRegion-col--right { margin-inline-start: auto; }
  .dd-wiz-actions .t-ButtonRegion-col--left .t-ButtonRegion-buttons:not(:empty) { margin-bottom: 0; }
  .dd-wiz-actions .t-ButtonRegion-buttons { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .dd-wiz-actions .t-Button { flex: none; width: auto; white-space: nowrap; }
  .dd-wiz-actions .t-ButtonRegion-col--left .t-Button:first-child { margin: 0; }
}

/* potvrde za ispis */
.dd-doc { background: #fff; max-width: 190mm; margin: 12px auto; padding: 12mm; color: #111827; font-size: 13px; line-height: 1.45; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); }
.dd-doc-head { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2px solid var(--dd-primary); padding-bottom: 10px; }
.dd-doc-org strong { font-size: 16px; }
.dd-doc-meta { text-align: end; white-space: nowrap; }
.dd-doc h1 { font-size: 20px; font-weight: 700; text-align: center; margin: 20px 0 16px; }
.dd-doc h2 { font-size: 13px; font-weight: 700; margin: 14px 0 4px; break-after: avoid; }
.dd-doc-party { margin: 0; }
.dd-doc-party td { padding: 1px 12px 1px 0; vertical-align: top; }
.dd-doc-party td:first-child { color: #4b5563; white-space: nowrap; }
.dd-doc-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.dd-doc-table th, .dd-doc-table td { border: 1px solid var(--dd-muted-edge); padding: 4px 6px; text-align: start; vertical-align: top; }
.dd-doc-table th { background: #f3f4f6; font-weight: 600; }
.dd-doc-table .dd-num { text-align: end; white-space: nowrap; }
.dd-doc-table tfoot td { font-weight: 700; }
/* stanje zalihe: naslov kategorije i zbroj kategorije */
.dd-doc-table .dd-doc-group td { padding-top: 8px; background: var(--dd-primary-soft); color: var(--dd-primary-dark); font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dd-doc-table .dd-doc-subtotal td { color: var(--dd-muted-text); font-weight: 600; }
/* lotovi ispod proizvoda: sitnije i uvučeno */
.dd-doc-table .dd-doc-lot td { padding-block: 2px; border-top-style: dotted; color: #4b5563; font-size: 11px; }
.dd-doc-table .dd-doc-lot td:nth-child(2) { padding-inline-start: 18px; }
.dd-doc p { margin: 6px 0; }
.dd-doc ul { margin: 4px 0 6px; padding-inline-start: 20px; }
.dd-doc li { font-size: inherit; line-height: inherit; }
/* privola: kvadratići koje ispitanik sam označi */
.dd-doc .dd-doc-checks { padding: 0; list-style: none; }
.dd-doc-checks li { display: flex; gap: 8px; margin: 6px 0; break-inside: avoid; }
.dd-doc-box { flex: none; box-sizing: border-box; width: 13px; height: 13px; margin-top: 3px; border: 1px solid #111827; border-radius: 2px; }
.dd-doc-note { font-size: 12px; color: var(--dd-muted-text); }
.dd-doc-sign { display: flex; justify-content: space-between; gap: 40px; margin-top: 36px; break-inside: avoid; }
.dd-doc-sign > div { flex: 1; }
.dd-doc-line { border-bottom: 1px solid #111827; height: 32px; margin-top: 4px; }
.dd-doc-stamp { text-align: center; align-self: flex-end; flex: 0 0 60px !important; color: #4b5563; }
/* potvrda o primitku: oznaka alergena uz proizvod i izjava o preuzimanju na vlastitu odgovornost */
.dd-doc-allergen { display: block; font-size: 11px; font-weight: 700; color: var(--dd-bad-text); }
.dd-doc-alert { margin: 12px 0; padding: 8px 12px; border: 2px solid var(--dd-bad-text); border-radius: 8px; break-inside: avoid; }
.dd-doc-alert h2 { margin-top: 0; color: var(--dd-bad-text); }
.dd-doc-alert-sign { display: flex; align-items: flex-end; gap: 8px; width: 55%; margin: 10px 0 4px auto; white-space: nowrap; }
.dd-doc-alert-sign .dd-doc-line { flex: 1; height: 22px; margin: 0; }
.dd-doc-warn { max-width: 190mm; margin: 12px auto 0; padding: 8px 12px; border-radius: 10px; background: var(--dd-warn-bg); color: var(--dd-warn-text); }

/* bez ruba stranice Chrome ne dodaje datum, naslov ni adresu; razmak daje sama potvrda */
@page { size: A4; margin: 0; }
@media print {
  .t-Header, .t-Footer, .t-Body-nav, .t-Body-title, .t-Body-side, .dd-no-print, .dd-doc-warn,
  #apexDevToolbar, #apex-dev-toolbar, .a-DevToolbar, [class*="DevToolbar"] { display: none !important; }
  html, body, .t-Body, .t-Body-main, .t-Body-content, .t-Body-contentInner { background: #fff !important; margin: 0 !important; padding: 0 !important; max-width: none !important; min-height: 0 !important; }
  .container, .row, .col { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; }
  .dd-doc { border: 0; border-radius: 0; margin: 0; padding: 14mm; max-width: none; font-size: 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .dd-doc-table thead { display: table-header-group; }
  /* zbroj samo na kraju tablice, a ne na dnu svake stranice */
  .dd-doc-table tfoot { display: table-row-group; }
  .dd-doc-table tr { break-inside: avoid; }
  .dd-doc-table th { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* predložak paketa (drawer): stavke kao u čarobnjaku, uz jedinicu i obavezno u retku; paketi i statistika */
.dd-tple-items .dd-tple-unit { min-width: 5.5em; min-height: 32px; }
.dd-tple-req { gap: 6px; font-size: var(--dd-fs-sm); white-space: nowrap; }
/* lokot samo uz obaveznu stavku, kao u čarobnjaku */
.dd-tple-req .fa { display: none; }
.dd-tple-req:has(input:checked) { color: var(--dd-bad-text); font-weight: 600; }
.dd-tple-req:has(input:checked) .fa { display: inline-block; color: var(--dd-bad-text); }
.dd-tple-items input[type="number"] { width: 5em; }
.dd-tple-items .dd-item-name { min-width: 9em; }
.dd-tple-items tr.is-inactive .dd-item-name { color: var(--dd-muted); }
.dd-tple-top { margin: 0 0 8px; padding: 0; list-style: none; counter-reset: dd-top; }
.dd-tple-top li { display: flex; align-items: baseline; gap: 10px; padding: 6px 2px; border-top: 1px solid var(--dd-border); counter-increment: dd-top; font-size: var(--dd-fs-sm); }
.dd-tple-top li:first-child { border-top: 0; }
.dd-tple-top li::before { flex: none; width: 1.6em; color: var(--dd-muted); font-size: var(--dd-fs-xs); font-weight: 700; content: counter(dd-top) "."; }
.dd-tple-top-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dd-tple-top strong { flex: none; color: var(--dd-primary-dark); white-space: nowrap; }

/* moj profil (drawer) */
.dd-profile-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; }
.dd-profile-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--dd-primary-soft); color: var(--dd-primary-dark); font-size: var(--dd-fs-lg); }
.dd-profile-user { margin: 0; color: var(--dd-text); font-size: var(--dd-fs-md); font-weight: 700; overflow-wrap: anywhere; }
.dd-profile-head .dd-sub { margin: 2px 0 0; }

/* kretanja zaliha: brzi odabir razdoblja i vrste, statistika i kartice po danima */
.dd-mov-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 12px; }
.dd-mov-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dd-mov-types { margin: -4px 0 18px; }
.dd-mov-bar-label { margin-inline-end: 2px; color: var(--dd-muted); font-size: var(--dd-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dd-mov-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius-pill); background: var(--dd-card); color: var(--dd-text); font: inherit; font-size: var(--dd-fs-sm); font-weight: 600; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.dd-mov-chip strong { color: var(--dd-muted); font-weight: 700; }
.dd-mov-chip:hover { border-color: var(--dd-primary); color: var(--dd-primary-dark); }
.dd-mov-chip.is-active { border-color: var(--dd-primary); background: var(--dd-primary); color: #fff; }
.dd-mov-chip.is-active strong { color: rgba(255, 255, 255, .85); }
.dd-mov-chip:focus-visible { outline: 2px solid var(--dd-primary); outline-offset: 2px; }
.dd-mov-range { margin: 0; }
.dd-mov-stats { margin-top: 0; }
.dd-hist-date .dd-mov-daysum { margin-inline-start: 10px; color: var(--dd-muted); font-size: var(--dd-fs-sm); font-weight: 600; }
.dd-mov-plus { color: var(--dd-ok-text); }
.dd-mov-minus { color: var(--dd-bad-text); }
.dd-mov--in .dd-hist-icon { background: var(--dd-ok-bg); color: var(--dd-ok-text); }
.dd-mov--out .dd-hist-icon { background: var(--dd-primary-soft); color: var(--dd-primary-dark); }
.dd-mov--storno .dd-hist-icon { background: var(--dd-warn-bg); color: var(--dd-warn-text); }
.dd-mov--wo .dd-hist-icon { background: var(--dd-bad-bg); color: var(--dd-bad-text); }
.dd-mov--corr .dd-hist-icon { background: var(--dd-muted-bg); color: var(--dd-muted-text); }
.dd-mov-name { color: var(--dd-text); font-size: var(--dd-fs-md); font-weight: 700; overflow-wrap: anywhere; text-decoration: none; }
.dd-mov-name:hover { color: var(--dd-primary); text-decoration: underline; }
.dd-mov-amount { flex: none; font-size: var(--dd-fs-lg); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.dd-mov-amount span { color: var(--dd-muted); font-size: var(--dd-fs-xs); font-weight: 600; }
.dd-mov-sub { margin: 2px 0 0; color: var(--dd-muted); font-size: var(--dd-fs-sm); }
.dd-mov-lines summary { margin-top: 8px; color: var(--dd-primary); font-size: var(--dd-fs-sm); font-weight: 600; cursor: pointer; }
.dd-mov-table { margin-top: 6px; }
.dd-mov-table td { color: var(--dd-text); }
.dd-mov-table .dd-num { width: 4.5em; text-align: end; white-space: nowrap; }
@media (max-width: 640px) {
  /* čipovi u jednom retku koji se pomiče vodoravno, statistika zbijenija: popis ostaje blizu vrha */
  .dd-mov-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; min-width: 0; padding-bottom: 4px; scrollbar-width: thin; }
  .dd-mov-chip, .dd-mov-bar-label { flex: none; }
  .dd-mov-stats { gap: 8px; }
  .dd-mov-stats .dd-hist-stat { padding: 8px 10px; }
  .dd-mov-stats .dd-hist-stat strong { font-size: var(--dd-fs-lg); }
  .dd-mov-amount { font-size: var(--dd-fs-md); }
  /* proizvod preko cijelog retka, a lot, rok i pakiranja ispod */
  .dd-mov-table tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .dd-mov-table td:first-child { grid-column: 1 / -1; font-weight: 600; }
}

/* izvještaji (drawer): opis odabrane vrste i brzi odabir razdoblja ispod datuma */
.dd-rep-help { min-height: 2.9em; margin: 2px 0 0; }
.dd-rep-periods { margin-top: 4px; }
/* kretanja proizvoda (kartica u formi proizvoda) */
.dd-pmov .dd-badge { white-space: normal; }
.dd-catprod tr.is-inactive a { color: var(--dd-muted); }

/* predlošci: kategorija u predlošku ima opću sliku (proizvodi na polici) */
.dd-catimg { display: block; background: var(--dd-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Crect width='160' height='160' rx='28' fill='%23e6f4f1'/%3E%3Cg fill='%230f766e'%3E%3Crect x='22' y='120' width='116' height='8' rx='4'/%3E%3Crect x='34' y='60' width='26' height='60' rx='7'/%3E%3Crect x='41' y='42' width='12' height='20' rx='3'/%3E%3Crect x='66' y='80' width='28' height='40' rx='5'/%3E%3Crect x='100' y='54' width='34' height='66' rx='4'/%3E%3C/g%3E%3Cg fill='%23e6f4f1'%3E%3Crect x='39' y='80' width='16' height='18' rx='2'/%3E%3Crect x='70' y='93' width='20' height='10' rx='2'/%3E%3Crect x='106' y='66' width='22' height='14' rx='2'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }
.dd-donprod-kind { display: block; color: var(--dd-muted); font-size: var(--dd-fs-xs); line-height: 14px; }
/* donacija (drawer): zaprimljeni proizvodi s rokom i lotom u retku */
.dd-lot-prod { display: flex; align-items: center; gap: 10px; min-width: 12em; }
/* rok trajanja je APEX kalendar (a-date-picker) s poljem i gumbom */
.dd-lots .dd-lot-exp { inline-size: 11.5em; }
.dd-lots .dd-lot-exp input { min-height: 32px; text-align: start; }
.dd-lots input.dd-lot-no { width: 10em; min-height: 32px; text-align: start; }
.dd-lot-add #dd-lot-exp input, .dd-lot-add #dd-lot-number { text-align: start; }
.dd-lot-sum { margin: 10px 0 0; }

/* poveznice u sadržaju (stupci izvještaja, popisi u karticama i draweri) su podebljane, da se razlikuju od teksta;
   gumbi, kartice izbornika i ostale poveznice s klasom zadržavaju svoj izgled */
:is(.t-Body-content, .t-Dialog-body, .t-Drawer-body) a[href]:not([class]) { font-weight: 700; }
/* dokumenti: prazni stupci za potpis (popis za izdavanje) i popisano stanje (inventura) */
.dd-doc-table .dd-doc-signcell { min-width: 32mm; }
.dd-doc-table .dd-doc-count td { padding-block: 6px; }

/* paket (drawer): podaci o paketu, složenost i sastav */
.dd-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; margin: 4px 0 16px; }
.dd-facts > div { min-width: 0; }
.dd-facts dt { color: var(--dd-muted); font-size: var(--dd-fs-xs); font-weight: 600; }
.dd-facts dd { margin: 2px 0 0; color: var(--dd-text); font-size: var(--dd-fs-sm); overflow-wrap: anywhere; }
.dd-meter-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px; }
.dd-meter-head strong { color: var(--dd-text); font-size: var(--dd-fs-xl); line-height: 1; }
/* jedna traka u boji aplikacije na neutralnoj podlozi, zaobljenih krajeva */
.dd-meter { overflow: hidden; height: 8px; margin-bottom: 10px; border-radius: var(--dd-radius-pill); background: var(--dd-border); }
.dd-meter > span { display: block; height: 100%; border-radius: var(--dd-radius-pill); background: var(--dd-primary); }
.dd-pkg-split { margin: 6px 0; color: var(--dd-text); font-size: var(--dd-fs-sm); line-height: 1.6; }
.dd-pkg-split strong { font-weight: 700; }
.dd-pkg-split-label { display: inline-block; min-width: 9em; margin-inline-end: 6px; color: var(--dd-muted); font-size: var(--dd-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* paket (drawer), kartica Paket: jedna ploča kao kartica na popisu paketa, stanje iznad imena i lijevi rub u boji stanja */
.dd-pkg-panel { --dd-status-color: var(--dd-muted-edge); margin: 4px 0 16px; padding: 16px 20px 18px 26px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: var(--dd-card); box-shadow: inset 6px 0 0 var(--dd-status-color), 0 1px 3px rgba(17, 24, 39, .08); }
.dd-pkg-panel--draft { --dd-status-color: var(--dd-warn); }
.dd-pkg-panel--issued { --dd-status-color: var(--dd-ok); }
.dd-pkg-panel--cancelled { --dd-status-color: var(--dd-muted-edge); }
/* ista ploča za donaciju: aktivna (ok) ili neaktivna (muted) */
.dd-pkg-panel--ok { --dd-status-color: var(--dd-ok); }
.dd-pkg-panel--warn { --dd-status-color: var(--dd-warn); }
.dd-pkg-panel--bad { --dd-status-color: var(--dd-bad); }
.dd-pkg-panel--muted { --dd-status-color: var(--dd-muted-edge); }
.dd-pkg-panel .t-Report { margin-top: 4px; }
.dd-pkg-panel-head .dd-badge { margin-bottom: 6px; }
.dd-pkg-panel-title { margin: 0; color: var(--dd-text); font-size: var(--dd-fs-lg); font-weight: 700; overflow-wrap: anywhere; }
.dd-pkg-panel-sub { margin: 2px 0 8px; color: var(--dd-text); font-size: var(--dd-fs-sm); }
.dd-pkg-panel-stats { margin: 12px 0 4px; }
.dd-pkg-panel-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; }
.dd-pkg-panel-cols .dd-wiz-sub { margin-top: 12px; }
.dd-facts--list { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.dd-facts--list > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.dd-facts--list dd { margin: 0; }
/* razmak iza gumba koji je odvojen od ostalih (npr. Storniraj ispred Složi automatski) */
.t-ButtonRegion .dd-btn-gap { margin-inline-end: 16px; }
/* kartice u drawerima: s jednom karticom (npr. novi zapis) traka kartica se ne prikazuje */
.t-TabsRegion .t-Tabs:has(> li:only-child) { display: none; }

/* stil teme bira se prekidačem u zaglavlju, pa APEX-ova poveznica Customize u podnožju (svi stilovi teme) nije potrebna */
.t-Footer-customize { display: none; }
/* prekidač tamnog načina u traci zaglavlja: staza s kružićem; sunce u svijetlom, mjesec u tamnom načinu (ikonu mijenja app.js) */
.dd-theme-item .t-Button--navBar { position: relative; justify-content: center; min-width: 52px; }
.dd-theme-item .t-Button--navBar::before { content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; width: 40px; height: 22px; margin: -11px 0 0 -20px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius-pill); background: var(--dd-muted-bg); transition: background-color .2s ease, border-color .2s ease; }
.dd-theme-item .t-Button--navBar .t-Icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--dd-card); box-shadow: 0 1px 2px rgba(17, 24, 39, .3); color: var(--dd-warn); font-size: 11px; transform: translateX(-9px); transition: transform .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .dd-theme-item .t-Button--navBar::before, .dd-theme-item .t-Button--navBar .t-Icon { transition: none; }
}

/* tamni način: vrijedi kad je učitan stil teme Vita - Dark (prekidač u zaglavlju ili spremljena postavka korisnika);
   ispis ostaje svijetao, a dokumenti za ispis (.dd-doc) i na ekranu ostaju bijeli papir */
@media screen {
  html:has(link[href*="/css/Vita-Dark"]) {
    color-scheme: dark;
    /* prigušeni tamni način: sivoplave plohe umjesto gotovo crnih iz Vita - Dark */
    --dd-primary: #11998c;
    --dd-primary-dark: #5eead4;
    --dd-primary-soft: #24494a;
    --dd-bg: #2a2f35;
    --dd-card: #343a41;
    --dd-border: #474f58;
    --dd-text: #e6e9ed;
    --dd-muted: #a7b0ba;
    --dd-ok-text: #9ff0bd;
    --dd-ok-bg: #234a33;
    --dd-ok: #22c55e;
    --dd-warn-text: #fcd97a;
    --dd-warn-bg: #4d3d1c;
    --dd-warn: #f59e0b;
    --dd-bad-text: #fdb4b4;
    --dd-bad-bg: #552a2c;
    --dd-bad: #ef4444;
    --dd-muted-text: #d5dae0;
    --dd-muted-bg: #424951;
    --dd-muted-edge: #75808b;
    --ut-palette-primary-alt: #0f766e;
    --ut-link-text-color: var(--dd-primary-dark);
    --a-cv-hover-shadow: 0 0 0 3px var(--dd-primary-soft), 0 10px 22px -10px rgba(0, 0, 0, .5);
    /* plohe teme Vita - Dark (regije, kartice, mreže, polja, kartice zaglavlja) u istim tonovima */
    --ut-body-background-color: var(--dd-bg);
    --ut-body-title-background-color: var(--dd-bg);
    --ut-body-actions-background-color: var(--dd-bg);
    --ut-footer-background-color: var(--dd-bg);
    --ut-component-background-color: var(--dd-card);
    --ut-region-background-color: var(--dd-card);
    --ut-region-header-background-color: var(--dd-card);
    --ut-body-sidebar-background-color: var(--dd-card);
    --a-cv-background-color: var(--dd-card);
    --a-gv-background-color: var(--dd-card);
    --a-menu-background-color: var(--dd-card);
    --a-report-controls-cell-label-background-color: var(--dd-card);
    --a-datepicker-header-background-color: var(--dd-card);
    --a-datepicker-calendar-header-background-color: var(--dd-card);
    --a-datepicker-calendar-title-background-color: var(--dd-card);
    --ut-report-cell-hover-background-color: #3b424a;
    --ut-wizard-header-background-color: #3b424a;
    --a-gv-row-hover-background-color: #3b424a;
    --a-gv-cell-border-color: var(--dd-border);
    --a-gv-header-cell-border-color: var(--dd-border);
    --ut-report-cell-border-color: var(--dd-border);
    --a-field-input-background-color: #2d3238;
    --a-field-input-hover-background-color: #31373d;
    --a-field-input-focus-background-color: #2d3238;
    --a-field-input-border-color: #535c66;
    --a-checkbox-background-color: #2d3238;
    --a-cr-checkbox-background-color: #2d3238;
    --ut-navtabs-background-color: #3b424a;
    --ut-header-menubar-background-color: #3b424a;
    --ut-body-nav-background-color: #3b424a;
    --ut-navtabs-item-active-background-color: var(--dd-bg);
    --ut-header-menubar-item-current-background-color: var(--dd-bg);
    --a-treeview-node-selected-background-color: #2d3238;
    --a-treeview-node-focused-background-color: #2d3238;
  }
  html:has(link[href*="/css/Vita-Dark"]) .t-Header-branding, html:has(link[href*="/css/Vita-Dark"]) .t-Header-nav { background: var(--dd-card); }
  html:has(link[href*="/css/Vita-Dark"]) .t-Header-logo-link { background: url("alimis_logo_dark.svg") no-repeat left center / auto 26px; }
  html:has(link[href*="/css/Vita-Dark"]) .t-Header-logo .apex-logo-img { visibility: hidden; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-theme-item .t-Button--navBar::before { border-color: var(--dd-primary); background: var(--dd-primary); }
  html:has(link[href*="/css/Vita-Dark"]) .dd-theme-item .t-Button--navBar .t-Icon { color: var(--dd-primary); transform: translateX(9px); }
  html:has(link[href*="/css/Vita-Dark"]) .a-Button--hot, html:has(link[href*="/css/Vita-Dark"]) .a-CardView-button--hot, html:has(link[href*="/css/Vita-Dark"]) .apex-button-group input:checked + label, html:has(link[href*="/css/Vita-Dark"]) .t-Button--hot, html:has(link[href*="/css/Vita-Dark"]) .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked + label, html:has(link[href*="/css/Vita-Dark"]) .ui-button--hot { --a-button-hover-background-color: #0f766e; --a-button-active-background-color: #0f766e; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-grid-row { background: #2a2f35; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option input + label { color: var(--dd-muted); }
  html:has(link[href*="/css/Vita-Dark"]) .dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option input:not(:checked) + label:hover { background: rgba(255, 255, 255, .08); color: var(--dd-text); }
  html:has(link[href*="/css/Vita-Dark"]) .dd-filters .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option input:checked + label { color: #ffffff; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-cattree-add:hover, html:has(link[href*="/css/Vita-Dark"]) .dd-cattree-add:focus-visible { --a-button-background-color: var(--dd-card); }
  html:has(link[href*="/css/Vita-Dark"]) .dd-cattree-row.is-final .dd-cattree-icon { background: var(--dd-muted-bg); }
  html:has(link[href*="/css/Vita-Dark"]) .dd-mark { background: #6b5418; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-hist-item--u .dd-hist-old { text-decoration-color: rgba(252, 165, 165, .5); }
  html:has(link[href*="/css/Vita-Dark"]) .dd-chip { background: #2d3238; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-chip--prod { border-color: #2f6d65; background: #24403d; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-step-num { background: #2a2f35; color: var(--dd-muted); }
  html:has(link[href*="/css/Vita-Dark"]) .dd-step.is-current .dd-step-num, html:has(link[href*="/css/Vita-Dark"]) .dd-step.is-done .dd-step-num { background: var(--dd-primary); color: #ffffff; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-ring--djelomican { background: conic-gradient(var(--dd-warn) calc(var(--p) * 1%), #5a4718 0); }
  html:has(link[href*="/css/Vita-Dark"]) .dd-ring--nepotpun { background: conic-gradient(var(--dd-bad) calc(var(--p) * 1%), #5a2a2a 0); }
  html:has(link[href*="/css/Vita-Dark"]) .dd-wiz-tab--djelomican .dd-wiz-tab-meta { color: #fbbf24; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-wiz-tab--nepotpun .dd-wiz-tab-meta, html:has(link[href*="/css/Vita-Dark"]) .dd-link-danger { color: #f87171; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-tpl--manual { border-color: #2f6d65; background: #2b3e3e; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-ben-warn { color: #fdba74; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-ben-warn .fa, html:has(link[href*="/css/Vita-Dark"]) .dd-warn-icon { color: #fb923c; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-badge--custom { background: #533418; color: #fdba74; }
  html:has(link[href*="/css/Vita-Dark"]) .dd-donprod-qty { background: #0f766e; }
  html:has(link[href*="/css/Vita-Dark"]) .t-Header-nav .t-Tabs-item.is-active .t-Tabs-link, html:has(link[href*="/css/Vita-Dark"]) .dd-subnav .t-Tabs-item.is-active .t-Tabs-link, html:has(link[href*="/css/Vita-Dark"]) .dd-hist-rest summary, html:has(link[href*="/css/Vita-Dark"]) .dd-mov-lines summary, html:has(link[href*="/css/Vita-Dark"]) .dd-mov-name:hover { color: var(--dd-primary-dark); }
  html:has(link[href*="/css/Vita-Dark"]) .t-Button--hot.t-Button--simple, html:has(link[href*="/css/Vita-Dark"]) .t-Button--hot.t-Button--link, html:has(link[href*="/css/Vita-Dark"]) .t-Button--hot.t-Button--noUI, html:has(link[href*="/css/Vita-Dark"]) .a-Button--hot.t-Button--simple, html:has(link[href*="/css/Vita-Dark"]) .a-Button--hot.t-Button--link, html:has(link[href*="/css/Vita-Dark"]) .a-Button--hot.a-Button--noUI { --a-button-text-color: var(--dd-primary-dark); color: var(--dd-primary-dark); }
  html:has(link[href*="/css/Vita-Dark"]) .dd-doc {
    color-scheme: light;
    --dd-primary: #0f766e;
    --dd-primary-dark: #115e59;
    --dd-primary-soft: #e6f4f1;
    --dd-card: #ffffff;
    --dd-border: #e5e7eb;
    --dd-text: #1f2937;
    --dd-muted: #6b7280;
    --dd-ok-text: #166534;
    --dd-ok-bg: #dcfce7;
    --dd-warn-text: #92400e;
    --dd-warn-bg: #fef3c7;
    --dd-bad-text: #991b1b;
    --dd-bad-bg: #fee2e2;
    --dd-muted-text: #374151;
    --dd-muted-bg: #e5e7eb;
    --dd-muted-edge: #9ca3af;
  }
}

/* boje grafova (provjereno skriptom za pristupačnost: svjetlina, zasićenost, razlikovanje kod daltonizma, kontrast s plohom) */
:root { --dd-chart-in: #0d9488; --dd-chart-out: #d97706; --dd-hover: rgba(107, 114, 128, .08); }
@media screen {
  html:has(link[href*="/css/Vita-Dark"]) { --dd-chart-in: #2aa596; --dd-chart-out: #c98326; --dd-hover: rgba(167, 176, 186, .1); }
}

/* prijava: napomena nakon odjave jer se isti korisnik prijavio na drugom mjestu */
.dd-login-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--dd-radius-sm); background: var(--dd-warn-bg); color: var(--dd-warn-text); font-size: var(--dd-fs-sm); line-height: 1.45; }
.dd-login-note .fa { margin-top: 2px; font-size: 16px; }
.dd-login-note p { margin: 0; }

/* naslov čarobnjaka: dok je zalijepljen uz vrh, sažme se u jedan redak bez opisa (app.js dodaje is-stuck),
   a preglednik pri skoku na polje (greška, tipka Tab) ostavlja mjesta za njega (app.js postavlja scroll-padding-top) */
.dd-wiz-sentinel { height: 0; }
.row.is-stuck .dd-wiz-head .dd-sub { display: none; }
.row.is-stuck .dd-wiz-head .dd-title { font-size: var(--dd-fs-lg); }
.row.is-stuck .dd-header, .row.is-stuck .dd-actions { margin-top: 4px; }
/* tablet i manji laptop: naslov iznad, a gumbi u jednom retku ispod njega (inače se Odustani prelomi u novi red) */
@media (min-width: 641px) and (max-width: 1199px) {
  .row:has(> .col > .dd-wiz-head) > .col { flex: 0 0 100%; max-width: 100%; }
  .row:has(> .col > .dd-wiz-head) .dd-actions { margin-top: 6px; text-align: start; }
  .dd-wiz-actions .t-ButtonRegion-wrap { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 0; }
  .dd-wiz-actions .t-ButtonRegion-col { flex: none; width: auto; padding: 0; }
  .dd-wiz-actions .t-ButtonRegion-col--right { margin-inline-start: auto; }
  .dd-wiz-actions .t-ButtonRegion-buttons { flex-wrap: nowrap; gap: 8px; }
  .row.is-stuck .dd-wiz-head .dd-title { font-size: var(--dd-fs-md); }
}
/* izbor kao skupina gumba (npr. pet tipova donatora) smije se prelomiti u više redaka */
.dd-wiz-sec .t-Form-fieldContainer--radioButtonGroup .apex-item-grid-row { flex-wrap: wrap; }

/* kreiranje proizvoda prema barkodu: prijedlog iz Open Food Facts */
.dd-bc-result:not(:empty) { margin-top: 12px; }
.dd-bc-result .dd-entitle { margin: 0; }
.dd-bc-card { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; padding: 12px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius-sm); background: var(--dd-bg); }
.dd-bc-img { flex: none; width: 72px; height: 72px; border-radius: var(--dd-radius-sm); background: #ffffff; object-fit: contain; }
.dd-bc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd-bc-body .dd-badge { align-self: flex-start; margin-bottom: 2px; }
.dd-bc-body strong { color: var(--dd-text); font-size: var(--dd-fs-md); }
.dd-bc-source { margin: 10px 0 0; color: var(--dd-muted); font-size: var(--dd-fs-xs); }
.dd-off-image { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--dd-muted); font-size: var(--dd-fs-xs); }

/* kreiranje kategorije: što će se promijeniti */
.dd-cat-changes { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.dd-cat-change { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--dd-radius-sm); background: var(--dd-primary-soft); color: var(--dd-text); font-size: var(--dd-fs-sm); line-height: 1.45; }
.dd-cat-change .fa { margin-top: 2px; color: var(--dd-primary-dark); }
.dd-cat-change--warn { background: var(--dd-warn-bg); color: var(--dd-warn-text); }
.dd-cat-change--warn .fa { color: inherit; }

/* početna: Za napraviti (najhitnije prvo; boja ikone i tekst kažu koliko je hitno) */
.dd-todo { margin: 0; padding: 0; list-style: none; }
.dd-todo-item { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--dd-border); }
.dd-todo-item:last-child { border-bottom: 0; }
.dd-todo-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; }
.dd-todo--bad .dd-todo-icon { background: var(--dd-bad-bg); color: var(--dd-bad-text); }
.dd-todo--warn .dd-todo-icon { background: var(--dd-warn-bg); color: var(--dd-warn-text); }
.dd-todo--info .dd-todo-icon { background: var(--dd-primary-soft); color: var(--dd-primary-dark); }
.dd-todo-body { flex: 1 1 auto; min-width: 0; }
.dd-todo-title { margin: 0; color: var(--dd-text); font-size: var(--dd-fs-sm); font-weight: 600; line-height: 1.35; }
.dd-todo-title strong { font-size: var(--dd-fs-md); font-variant-numeric: tabular-nums; }
.dd-todo-text { margin: 2px 0 0; color: var(--dd-muted); font-size: var(--dd-fs-xs); }
.dd-todo-btn { flex: none; }
.dd-todo-empty { display: flex; align-items: center; gap: 12px; padding: 6px 2px; }
.dd-todo-empty > .fa { color: var(--dd-ok); font-size: 28px; }
@media (max-width: 480px) {
  .dd-todo-item { flex-wrap: wrap; }
  .dd-todo-btn { margin-inline-start: 48px; }
}

/* početna: brojke (cijela pločica je poveznica) */
.dd-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dd-kpi-tile { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: var(--dd-card); color: var(--dd-text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.dd-kpi-tile:hover, .dd-kpi-tile:focus-visible { border-color: var(--dd-primary); box-shadow: 0 0 0 3px var(--dd-primary-soft); text-decoration: none; }
.dd-kpi-tile .dd-kpi-icon { position: absolute; top: 14px; right: 14px; color: var(--dd-primary); opacity: .75; }
.dd-kpi-value { padding-inline-end: 22px; color: var(--dd-text); font-size: var(--dd-fs-2xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dd-kpi-label { color: var(--dd-text); font-size: var(--dd-fs-sm); font-weight: 600; }
.dd-kpi-sub { color: var(--dd-muted); font-size: var(--dd-fs-xs); }
.dd-kpi-delta--up { color: var(--dd-ok-text); }
.dd-kpi-delta .fa { margin-inline-end: 3px; }
@media (max-width: 480px) {
  .dd-kpi-grid { gap: 8px; }
  .dd-kpi-tile { padding: 12px; }
  .dd-kpi-value { font-size: var(--dd-fs-xl); }
}

/* početna: graf zaprimljeno i izdano po tjednima (stupci; prijelaz mišem ili fokus pokazuje brojke tjedna) */
.dd-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 14px; color: var(--dd-muted); font-size: var(--dd-fs-xs); }
.dd-chart-key { display: inline-flex; align-items: center; gap: 6px; }
.dd-chart-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--dd-chart-in); }
.dd-chart-key--out::before { background: var(--dd-chart-out); }
.dd-chart-total { margin-inline-start: auto; }
.dd-wk-chart { display: flex; gap: 8px; height: 230px; padding: 6px 0 24px; }
.dd-wk-axis { position: relative; flex: none; width: 36px; color: var(--dd-muted); font-size: 11px; font-variant-numeric: tabular-nums; text-align: end; }
.dd-wk-axis span { position: absolute; right: 0; transform: translateY(50%); }
.dd-wk-plot { position: relative; display: grid; flex: 1 1 auto; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 4px; border-bottom: 1px solid var(--dd-muted-edge, #9ca3af); }
.dd-wk-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--dd-border); }
.dd-wk { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; border-radius: 4px 4px 0 0; outline: none; cursor: default; }
.dd-wk:hover, .dd-wk:focus-visible { background: var(--dd-hover); }
.dd-wk:focus-visible { box-shadow: inset 0 0 0 2px var(--dd-primary); }
.dd-wk-bar { width: min(14px, 40%); border-radius: 4px 4px 0 0; background: var(--dd-chart-in); }
.dd-wk-bar--out { background: var(--dd-chart-out); }
.dd-wk-label { position: absolute; bottom: -21px; left: 50%; transform: translateX(-50%); color: var(--dd-muted); font-size: 11px; white-space: nowrap; }
.dd-wk-tip { position: absolute; top: 6px; left: 50%; z-index: 2; display: none; flex-direction: column; gap: 3px; min-width: 140px; padding: 8px 10px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius-sm); background: var(--dd-card); box-shadow: 0 8px 18px -6px rgba(17, 24, 39, .3); color: var(--dd-text); font-size: var(--dd-fs-xs); white-space: nowrap; transform: translateX(-50%); }
.dd-wk-tip .dd-chart-key { color: var(--dd-text); font-variant-numeric: tabular-nums; }
.dd-wk:hover .dd-wk-tip, .dd-wk:focus .dd-wk-tip { display: flex; }
.dd-wk-plot > .dd-wk:nth-child(-n+5) .dd-wk-tip { left: 0; transform: none; }
.dd-wk-plot > .dd-wk:nth-last-child(-n+3) .dd-wk-tip { right: 0; left: auto; transform: none; }
@media (max-width: 640px) {
  .dd-wk-plot > .dd-wk:nth-child(even) .dd-wk-label { display: none; }
  .dd-wk-chart { height: 200px; }
}

/* početna: zaliha po kategorijama (vodoravni stupci s brojem pakiranja na kraju) */
.dd-hbars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dd-hbar-link { display: grid; grid-template-areas: "name value" "track track"; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 6px 8px; border-radius: var(--dd-radius-sm); color: var(--dd-text); text-decoration: none; }
.dd-hbar-link:hover, .dd-hbar-link:focus-visible { background: var(--dd-hover); text-decoration: none; }
.dd-hbar-name { grid-area: name; min-width: 0; overflow: hidden; font-size: var(--dd-fs-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dd-hbar-sub { margin-inline-start: 6px; color: var(--dd-muted); font-size: var(--dd-fs-xs); font-weight: 400; }
.dd-hbar-value { grid-area: value; font-size: var(--dd-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.dd-hbar-track { grid-area: track; height: 10px; overflow: hidden; border-radius: 4px; background: var(--dd-hover); }
.dd-hbar-fill { display: block; height: 100%; border-radius: 4px; background: var(--dd-chart-in); }

/* početna: zadnje donacije */
.dd-recents { margin: 0; padding: 0; list-style: none; }
.dd-recent { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 2px; border-bottom: 1px solid var(--dd-border); }
.dd-recent:last-child { border-bottom: 0; }
.dd-recent a { font-weight: 600; }
.dd-recent-meta { grid-column: 1; color: var(--dd-muted); font-size: var(--dd-fs-xs); }
.dd-recent-qty { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }

/* drawer: cjeline obrasca kao kartice (naslov s ikonom, kratki opis, polja). Polje kojem je naslov kartice ujedno
   natpis (napomena, opis, alergeni, slika) ima skriveni natpis: ostaje za čitač zaslona, a polje je pune širine. */
:is(.dd-dw-sec, .dd-choice-sec) .t-Form-labelContainer--hiddenLabel { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(.dd-dw-sec, .dd-choice-sec) .t-Form-fieldContainer--hiddenLabel > .t-Form-inputContainer { flex-basis: 100%; width: 100%; max-width: 100%; }
.dd-dw-sec { margin: 0 0 12px; padding: 2px 16px 6px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: var(--dd-card); }
.dd-dw-sec .dd-section-title { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; }
.dd-section-icon { flex: none; width: 16px; color: var(--dd-primary); font-size: 14px; text-align: center; }
.dd-section-desc { margin: 0 0 4px 24px; font-size: var(--dd-fs-xs); }
@media (max-width: 480px) {
  .dd-dw-sec { padding: 2px 12px 6px; }
  .dd-section-desc { margin-inline-start: 0; }
}

/* čarobnjak izvještaja: vrsta izvještaja kao kartice s ikonom, nazivom i opisom (izvorni radio gumb ostaje za tipkovnicu) */
.dd-wiz-num--icon .fa { font-size: 12px; }
.dd-choice-sec .t-Form-inputContainer { flex-basis: 100%; width: 100%; max-width: 100%; }
.dd-choice-sec .apex-item-group--rc { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; width: 100%; }
/* UT na mobitelu daje opciji pola širine; ovdje je opcija cijela ćelija mreže */
.dd-choice-sec .t-Form-fieldContainer .apex-item-group.apex-item-group--rc > .apex-item-option { position: relative; display: flex; width: 100%; max-width: 100%; margin: 0; }
.dd-choice-sec .apex-item-option input + label { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding: 14px 16px 14px 46px; border: 1px solid var(--dd-border); border-radius: var(--dd-radius-sm); background: var(--dd-card); cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.dd-choice-sec .apex-item-option input + label::before { position: absolute; top: 17px; left: 16px; margin: 0; }
.dd-choice-sec .apex-item-option input + label::after { top: 17px; left: 16px; }
.dd-choice-sec .apex-item-option input + label:hover { border-color: var(--dd-primary); }
.dd-choice-sec .apex-item-option input:checked + label { border-color: var(--dd-primary); background: var(--dd-primary-soft); box-shadow: 0 0 0 1px var(--dd-primary); }
.dd-choice-sec .apex-item-option input:focus-visible + label { outline: 2px solid var(--dd-primary); outline-offset: 2px; }
.dd-choice-title { display: flex; align-items: center; gap: 8px; color: var(--dd-text); font-size: var(--dd-fs-md); font-weight: 700; line-height: 1.3; }
.dd-choice-title .fa { color: var(--dd-primary); }
.dd-choice-desc { color: var(--dd-muted); font-size: var(--dd-fs-sm); font-weight: 400; line-height: 1.45; white-space: normal; }
.dd-rep-periods { margin: 0 0 10px 36px; }
@media (max-width: 640px) {
  .dd-rep-periods { margin-inline-start: 0; }
}
/* veličina pakiranja u kartici drawera proizvoda: bez vlastitog okvira, naslov kao naslov kartice */
.dd-dw-sec .dd-sizes { margin: 0 -16px -6px; border: 0; border-radius: 0 0 var(--dd-radius) var(--dd-radius); background: transparent; }
.dd-dw-sec .dd-sizes-head { padding: 12px 16px 6px; border-bottom: 0; }
.dd-dw-sec .dd-sizes-title { display: flex; align-items: center; gap: 8px; font-size: var(--dd-fs-md); font-weight: 700; }
@media (max-width: 480px) {
  .dd-dw-sec .dd-sizes { margin-inline: -12px; }
}
/* sažetak prethodnog koraka u čarobnjaku: gumb Promijeni se ne skuplja, a na mobitelu ide ispod teksta */
.dd-don-head > .t-Button { flex: none; }
@media (max-width: 480px) {
  .dd-don-head { flex-wrap: wrap; }
}
/* drawer donacije, kartica Proizvodi: proizvod u tablici po lotu sa sličicom */
.dd-lotprod { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.dd-lotprod .dd-thumb { flex: none; }