/* ==========================================================================
   EDGE DSS, izgled aplikacije
   Sve boje, razmaci i velicine dolaze iz tokens.css. Ovde nema ni jedne
   vrednosti napisane rukom, jer bi tada izmena identiteta trazila trazenje po
   fajlovima umesto izmene na jednom mestu.
   ========================================================================== */

/* Sakriveno je sakriveno.
   ---------------------------------------------------------------------------
   Atribut `hidden` u pregledacu znaci `display: none`, ali to je najslabije
   moguce pravilo, pa ga nadjacava svaki stil koji elementu zada `display`.
   Traka o jutarnjem prolazu je bas tako i ostajala na ekranu: kod ju je
   sakrivao i praznio, a `.prolaz-traka { display: flex }` ju je vracao, pa je
   iznad svakog ekrana stajala prazna traka sa bojom i razmakom, koja nista ne
   govori a zauzima mesto.

   Pravilo se pise jednom i za sve, a ne po elementu, jer se ista greska inace
   ponavlja svaki put kada neko sakrije element koji ima svoj `display`. Da se
   to vec desilo vidi se po tome sto je isto ovo bilo zakrpljeno samo za
   `.modal-backdrop`. */
[hidden] { display: none !important; }

/* --- Raspored ------------------------------------------------------------ */

.layout { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }

/* Meni ne stoji uz ivicu ekrana nego pluta na podlozi, kao i sve ostalo.
   Ivica ekrana je linija koju niko nije nacrtao, a ovaj raspored nema nijednu
   liniju: sve sto je celina, celina je po zaobljenju i senci. */
.sidebar {
  border: 0;
  background: var(--surface-card);
  display: flex; flex-direction: column;
  position: sticky; top: var(--space-4);
  height: calc(100vh - var(--space-4) * 2);
  margin: var(--space-4) 0 var(--space-4) var(--space-4);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.brand { padding: var(--space-5) var(--space-5) var(--space-6); }
.mark { display: inline-flex; align-items: baseline;
        font-size: var(--text-lg); font-weight: 600;
        letter-spacing: var(--tracking-tight); }
.mark .dot { width: 6px; height: 6px; border-radius: 50%;
             background: var(--brand); display: inline-block; margin-left: 3px; }
.brand-sub { display: block; font-size: var(--text-xs); color: var(--ink-muted);
             margin-top: 2px; }

nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-3);
      overflow-y: auto; }
/* Svaka stavka je pilula. Aktivna je crna sa belim tekstom, a narandzasta
   ostaje samo na ikonici: ona kaze gde si, i time je i dalje retka. */
nav a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-4); border-radius: var(--radius-pill);
  color: var(--ink-secondary); text-decoration: none;
  font-size: var(--text-sm); font-weight: 500;
  border: 0;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
nav a svg { width: 15px; height: 15px; fill: currentColor; flex: none; opacity: .7; }
nav a:hover { background: var(--surface-hover); color: var(--ink-primary); }
nav a.active {
  background: var(--surface-inverse);
  color: var(--ink-inverse);
  border-radius: var(--radius-pill);
}
.badge-count {
  margin-left: auto; font-size: var(--text-2xs); font-weight: 600;
  background: var(--status-warning-wash); color: var(--status-warning);
  padding: 1px 7px; border-radius: var(--radius-pill);
}

.sidebar-foot {
  margin-top: auto; padding: var(--space-4) var(--space-5);
  display: flex; justify-content: space-between;
  font-size: var(--text-xs); color: var(--ink-muted);
}
.sidebar-foot a { color: var(--ink-muted); }

.main { display: flex; flex-direction: column; min-width: 0; }
.pagehead {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface-page);
  border-bottom: 0;
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.pagehead h1 { font-size: var(--text-xl); font-weight: 600;
               letter-spacing: var(--tracking-tight); margin: 0; }
.pagehead-actions { display: flex; gap: var(--space-3); }
/* Sadrzaj ide preko cele sirine ekrana. Tabele sa mnogo kolona su ovde
   redovna pojava, a vodoravno pomeranje da bi se videla poslednja kolona je
   trosak koji se placa na svakom pogledu. */
.content { padding: var(--space-6); max-width: none; }

/* Tekst se i dalje drzi citljive sirine reda. Redak od dvesta znakova se ne
   cita nego se preskace, pa bi puna sirina odgovarala tabelama a smetala
   objasnjenjima. */
.content > p, .card > p, .empty p { max-width: 86ch; }

/* --- Osnovni elementi ---------------------------------------------------- */

/* Nijedna kartica nema granicu. Odvaja je razlika prema toniranoj podlozi,
   zaobljenje i siroka slaba senka. Granica i senka zajedno daju utisak okvira
   u okviru, pa se bira jedno. */
.card {
  background: var(--surface-card); border: 0;
  border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4); box-shadow: var(--shadow-card);
}
.card > h2, .section-title {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--ink-muted);
  margin: 0 0 var(--space-4);
}
.muted { color: var(--ink-muted); font-size: var(--text-sm); }
.sec { color: var(--ink-secondary); }

.tiles { display: grid; gap: var(--space-4); margin-bottom: var(--space-4);
         grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tile { background: var(--surface-card); border: 0; box-shadow: var(--shadow-card);
        border-radius: var(--radius-xl); padding: var(--space-5); }
.tile .lab { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
             letter-spacing: var(--tracking-wide); color: var(--ink-muted); }
.tile .val { font-size: var(--text-2xl); font-weight: 700;
             letter-spacing: var(--tracking-tight); margin-top: 8px; }
.tile .note { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 2px; }

.btn { font: inherit; font-size: var(--text-sm); font-weight: 500; height: 38px;
       padding: 0 var(--space-5); border-radius: var(--radius-pill); cursor: pointer;
       border: 1px solid transparent; white-space: nowrap;
       transition: background var(--duration-fast) var(--ease-standard); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--surface-inverse); color: var(--ink-inverse); }
.btn-secondary { background: var(--surface-sunken); color: var(--ink-primary);
                 border-color: transparent; }
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); }
.btn-quiet { background: transparent; color: var(--ink-secondary); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-hover); }
.btn-sm { height: 30px; padding: 0 var(--space-4); font-size: var(--text-xs); }

.badge { display: inline-flex; align-items: center; gap: 5px;
         font-size: var(--text-xs); padding: 2px 9px; border-radius: var(--radius-pill); }
.badge-good { background: var(--status-good-wash); color: var(--status-good); }
.badge-warn { background: var(--status-warning-wash); color: var(--status-warning); }
.badge-crit { background: var(--status-critical-wash); color: var(--status-critical); }
.badge-info { background: #EAF2FC; color: #1F5FA8; }
.badge-outline { border: 1px solid var(--border-hairline); color: var(--ink-secondary); }
.badge-service { background: var(--brand-wash); color: var(--brand-ink); }

/* --- Tabele -------------------------------------------------------------- */

/* Tabela je prozracna: visoki redovi, nijedna uspravna linija, a vodoravna
   jedva vidljiva. Linija izmedju redova postoji da bi oko drzalo red, ne da bi
   se videla, pa je svetlija od granice kartice.

   Prvi stubac je nosilac reda i zato je taman i podebljan. Ostalo je priguseno,
   da bi se red citao kao jedna stvar sa podacima, a ne kao dvanaest jednako
   glasnih brojeva. */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
thead th {
  background: var(--surface-card); color: var(--ink-muted);
  font-size: var(--text-2xs); font-weight: 600; text-align: left;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-hairline);
  position: sticky; top: 0;
}
tbody td { padding: 15px var(--space-4); color: var(--ink-secondary);
           border-bottom: 1px solid color-mix(in srgb, var(--border-hairline) 55%, transparent); }
tbody td:first-child { color: var(--ink-primary); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-hover); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.table-wrap { border: 0; border-radius: var(--radius-xl);
              overflow-x: auto; background: var(--surface-card);
              box-shadow: var(--shadow-card); }
/* Siroka tabela se pomera vodoravno umesto da se secu poslednje kolone.
   Odsecena kolona je gora od trake za pomeranje, jer korisnik ne zna da fali. */
.table-wrap.scroll table { min-width: max-content; }

/* --- Redovi sa stanjem --------------------------------------------------- */

.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
       padding: 11px 0; border-bottom: 1px solid var(--border-hairline); }
.row:last-child { border-bottom: none; }
.row .k { color: var(--ink-secondary); font-size: var(--text-sm); }
.row .v { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.state { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.ok { color: var(--status-good); }
.warn { color: var(--status-warning); }
.crit { color: var(--status-critical); }

/* --- Karantin ------------------------------------------------------------ */

.issue { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
         background: var(--surface-card); margin-bottom: var(--space-4); overflow: hidden; }
.issue-head { display: flex; align-items: flex-start; justify-content: space-between;
              gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.issue-title { font-size: var(--text-lg); font-weight: 600; margin: 0 0 5px; }
.issue-meta { display: flex; gap: var(--space-4); flex-wrap: wrap;
              font-size: var(--text-xs); color: var(--ink-muted); }
.issue-body { padding: 0 var(--space-5) var(--space-5); }
.issue-msg { font-size: var(--text-sm); color: var(--ink-secondary);
             border-left: 3px solid var(--border-strong); padding-left: var(--space-4);
             margin: 0 0 var(--space-4); }

.suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.suggestion { display: flex; align-items: center; gap: var(--space-3);
              border: 1px solid transparent; background: var(--surface-sunken);
              border-radius: var(--radius-pill); padding: 8px var(--space-4);
              cursor: pointer; font: inherit; text-align: left;
              transition: border-color var(--duration-fast) var(--ease-standard); }
.suggestion:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.suggestion .code { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; }
.suggestion .nm { font-size: var(--text-xs); color: var(--ink-secondary); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- Grafikoni ------------------------------------------------------------ */

.chart { width: 100%; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Mreza i osa su najsvetlije na grafikonu. Podatak je najtamniji. */
.chart-grid-line { stroke: var(--chart-grid); stroke-width: 1; }
.chart-zero-line { stroke: var(--chart-axis); stroke-width: 1.5; }
.chart-tick { fill: var(--chart-label); font-size: 11px;
              font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.chart-dot { stroke: var(--surface-card); stroke-width: 2; }
.chart-hit { cursor: crosshair; }

.bar-good { fill: var(--status-good); }
.bar-bad  { fill: var(--status-critical); }

.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-4);
                margin-top: var(--space-3); font-size: var(--text-xs);
                color: var(--ink-secondary); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.chart-tip {
  position: fixed; z-index: 80; pointer-events: none;
  background: var(--surface-inverse); color: var(--ink-inverse);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  font-size: var(--text-xs); box-shadow: var(--shadow-popover); min-width: 130px;
}
.chart-tip .tip-head { font-weight: 600; margin-bottom: 4px; opacity: .75; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 6px;
                      justify-content: space-between; padding: 1px 0; }
.chart-tip .tip-row b { margin-left: var(--space-3); font-variant-numeric: tabular-nums; }
.chart-tip .tip-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }

.hbars { display: flex; flex-direction: column; gap: 7px; }
.hbar { display: grid; grid-template-columns: minmax(120px, 210px) 1fr auto;
        align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.hbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
             color: var(--ink-secondary); }
.hbar-track { position: relative; height: 16px; background: var(--surface-sunken);
              border-radius: var(--radius-sm); overflow: hidden; }
.hbar-track.split::before { content: ""; position: absolute; left: 50%; top: 0;
                            bottom: 0; width: 1px; background: var(--chart-axis); }
.hbar-fill { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-sm); }
.hbar-track:not(.split) .hbar-fill { left: 0; }
.hbar-track.split .hbar-fill.pos { left: 50%; }
.hbar-track.split .hbar-fill.neg { right: 50%; }
.hbar-fill.pos { background: var(--series-1); }
.hbar-fill.neg { background: var(--status-critical); }
.hbar-value { font-variant-numeric: tabular-nums; text-align: right;
              min-width: 90px; }
.hbar-value.neg { color: var(--status-critical); }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink-primary); }
th.sortable[data-dir]::after { content: " ↓"; }
th.sortable[data-dir="asc"]::after { content: " ↑"; }

/* --- Grupe proizvoda ------------------------------------------------------ */

.group-grid { display: grid; gap: var(--space-3);
              grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.group-card { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
              padding: var(--space-5); background: var(--surface-card);
              display: flex; flex-direction: column; gap: var(--space-3); }
.group-card.off { opacity: .6; }
.group-head { display: flex; align-items: flex-start; justify-content: space-between;
              gap: var(--space-3); }
.group-name { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.group-code { color: var(--ink-muted); margin-top: 2px; }
.group-meta { display: flex; flex-wrap: wrap; gap: var(--space-3);
              font-size: var(--text-xs); color: var(--ink-muted); }
.group-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }

th.pick, td.pick { width: 34px; padding-right: 0; }
td.pick input, th.pick input { width: 15px; height: 15px; accent-color: var(--brand-ink);
                               cursor: pointer; }

.bulkbar {
  position: sticky; bottom: var(--space-4); z-index: 4;
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4); padding: var(--space-3) var(--space-5);
  border: 0; border-radius: var(--radius-pill);
  background: var(--surface-card); box-shadow: var(--shadow-float);
  font-size: var(--text-sm);
}
.bulkbar select {
  font: inherit; font-size: var(--text-sm); height: 32px; padding: 0 var(--space-3);
  border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: var(--surface-card); color: var(--ink-primary);
}
.bulkbar > span:first-child { font-weight: 600; }

.picklist { max-height: 46vh; overflow: auto; background: var(--surface-sunken);
            border-radius: var(--radius-lg); }
.pickrow { display: flex; align-items: center; gap: var(--space-3);
           padding: 8px var(--space-3); cursor: pointer;
           border-bottom: 1px solid var(--border-hairline); font-size: var(--text-sm); }
.pickrow:last-child { border-bottom: none; }
.pickrow:hover { background: var(--surface-hover); }
.pickrow input { width: 15px; height: 15px; accent-color: var(--brand-ink); flex: none; }
.pickname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; }

/* --- Kampanje ------------------------------------------------------------ */

.adbox { margin-top: var(--space-4); }

.links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.link-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 0; border-radius: var(--radius-pill);
  padding: 5px var(--space-3) 5px var(--space-4); background: var(--surface-sunken);
}
.link-chip .code { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; }
.link-chip .nm { font-size: var(--text-xs); color: var(--ink-secondary); }
.chip-x {
  border: none; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--text-md); line-height: 1; color: var(--ink-muted);
  padding: 0 4px; border-radius: var(--radius-sm);
}
.chip-x:hover { color: var(--status-critical); background: var(--status-critical-wash); }

.check { display: inline-flex; align-items: center; gap: var(--space-2);
         font-size: var(--text-sm); color: var(--ink-secondary); cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--brand-ink); }

/* --- Obrasci ------------------------------------------------------------- */

.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: var(--text-xs); font-weight: 600;
               color: var(--ink-secondary); margin-bottom: 5px; }
/* Polje za unos nema tvrdu granicu nego uvucenu podlogu. Kada se u njemu radi,
   podloga postaje bela, pa se vidi gde je pokazivac bez ijedne nove linije. */
.field input, .field select {
  width: 100%; font: inherit; font-size: var(--text-sm); height: 42px;
  padding: 0 var(--space-4); border-radius: var(--radius-lg);
  border: 1px solid transparent; background: var(--surface-sunken);
  color: var(--ink-primary);
  transition: background var(--duration-fast) var(--ease-standard);
}
.field input:focus, .field select:focus { background: var(--surface-card);
                                          border-color: var(--border-hairline); }
.field .hint { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-actions { display: flex; gap: var(--space-3); justify-content: flex-end;
                margin-top: var(--space-5); }
.form-error { font-size: var(--text-sm); color: var(--status-critical);
              background: var(--status-critical-wash); padding: var(--space-3);
              border-radius: var(--radius-md); margin-bottom: var(--space-4); }

.toolbar { display: flex; gap: var(--space-3); align-items: center;
           margin-bottom: var(--space-4); flex-wrap: wrap; }
.toolbar input:not([type="checkbox"]), .toolbar select {
  font: inherit; font-size: var(--text-sm); height: 38px; padding: 0 var(--space-4);
  border-radius: var(--radius-pill); border: 1px solid transparent;
  background: var(--surface-card); color: var(--ink-primary);
  box-shadow: var(--shadow-card); min-width: 260px;
}
.toolbar select { min-width: 0; }

/* --- Prazno stanje ------------------------------------------------------- */

.empty { text-align: center; padding: var(--space-8) var(--space-5);
         border: 0; border-radius: var(--radius-xl);
         color: var(--ink-muted); }
.empty h3 { font-size: var(--text-lg); color: var(--ink-primary); margin: 0 0 6px;
            font-weight: 600; }
.empty p { font-size: var(--text-sm); margin: 0 auto; max-width: 46ch; }

/* --- Iskacuci prozor ----------------------------------------------------- */

.modal-backdrop { position: fixed; inset: 0; background: rgba(11,11,11,.32);
                  display: flex; align-items: center; justify-content: center;
                  padding: var(--space-5); z-index: 50; }
/* Bez ovoga bi display: flex nadjacao svojstvo hidden, pa bi prozor stajao
   otvoren od ucitavanja stranice. */
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--surface-card); border-radius: var(--radius-card);
         box-shadow: var(--shadow-popover); width: 100%; max-width: 560px;
         max-height: 88vh; overflow: auto; }
.modal header { display: flex; align-items: center; justify-content: space-between;
                padding: var(--space-5) var(--space-6) var(--space-4);
                border-bottom: 0;
                position: sticky; top: 0; background: var(--surface-card); }
.modal h2 { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.modal > div { padding: 0 var(--space-6) var(--space-6); }

/* --- Obavestenja --------------------------------------------------------- */

.toast-wrap { position: fixed; bottom: var(--space-5); right: var(--space-5);
              display: flex; flex-direction: column; gap: var(--space-2); z-index: 60; }
.toast { background: var(--surface-inverse); color: var(--ink-inverse);
         padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
         font-size: var(--text-sm); box-shadow: var(--shadow-popover); max-width: 380px; }
.toast.err { background: var(--status-critical); }

.skeleton { color: var(--ink-muted); font-size: var(--text-sm); padding: var(--space-5) 0; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center;
             overflow-x: auto; margin: var(--space-3); }
  nav { flex-direction: row; }
  .sidebar-foot { display: none; }
  .content { padding: var(--space-4); }
}

.head-select {
  font: inherit; font-size: var(--text-sm); height: 34px; padding: 0 var(--space-4);
  border-radius: var(--radius-pill); border: 1px solid transparent;
  background: var(--surface-card); color: var(--ink-primary);
  box-shadow: var(--shadow-card);
}


/* --- Gusta tabela, za dnevni izvestaj ------------------------------------- */

/* Dnevni izvestaj nosi dvadesetak kolona. Uz uobicajene razmake ne bi stao ni
   na sirok ekran, pa ova tabela ima svoje, uze razmake. Font ostaje isti, jer
   se smanjenjem slova dobija malo prostora a gubi citljivost. */
/* Gusta tabela je i dalje gusca od obicne, ali ne onoliko koliko je bila.
   Ista tabela u Kontroli obracuna vraca se na najuze razmake, jer se tamo
   poredi red sa redom pa svaki dodatni piksel znaci jedno pomeranje vise. */
.table-dense td, .table-dense th { padding: 10px var(--space-3); }
body[data-ruta="kontrola"] .table-dense td,
body[data-ruta="kontrola"] .table-dense th { padding: 7px 7px; }
.table-dense td { font-size: var(--text-xs); }
.table-dense .mono, .table-dense td { white-space: nowrap; }
.table-dense thead th { font-size: var(--text-2xs); line-height: 1.25; }

/* Grupe kolona se odvajaju tankom crtom, da se u nizu brojeva vidi gde
   prestaje jedna celina a pocinje druga. */
.table-dense .group-start { border-left: 1px solid var(--border-hairline); }

/* Red sa zbirom se odvaja crtom i podebljava, da se u nizu redova odmah vidi
   gde prestaju stavke a pocinje zbir. Bez toga se zbir cita kao jos jedna
   stavka, pa izgleda kao da je najveca kategorija duplo veca nego sto jeste. */
.table-dense tbody tr.sum-row td {
  border-top: 1px solid var(--border-strong);
  font-weight: 600;
  color: var(--ink-primary);
}

/* Kategorije pracenja u Podesavanjima
   --------------------------------------------------------------------------- */

.kat-spisak { display: flex; flex-direction: column; gap: var(--space-3);
              margin-bottom: var(--space-4); }

.kat-red { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
           padding: var(--space-3) var(--space-4); }
.kat-ugasena { opacity: 0.55; }

.kat-glava { display: flex; align-items: center; justify-content: space-between;
             gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.kat-glava strong { margin-right: var(--space-2); }
.kat-radnje { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.kat-clanovi { display: flex; gap: var(--space-2); flex-wrap: wrap;
               margin-bottom: var(--space-3); font-size: var(--text-sm); }

/* Dugme za sklanjanje stoji unutar znacke, pa nasledjuje njenu boju i velicinu.
   Zaseban stil bi ga pretvorio u drugu vrstu dugmeta na svakoj znacki. */
.btn-x { border: 0; background: none; cursor: pointer; padding: 0 0 0 6px;
         color: inherit; font: inherit; line-height: 1; opacity: 0.55; }
.btn-x:hover { opacity: 1; }

.kat-dodaj, .kat-nova { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kat-nova { margin-bottom: var(--space-3); }
.kat-dodaj select, .kat-dodaj input, .kat-nova input {
  font: inherit; font-size: var(--text-sm); height: 34px; padding: 0 var(--space-2);
  border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: var(--surface-card); color: var(--ink-primary); min-width: 0;
}
.kat-nova input { flex: 1 1 280px; }
.kat-prefiks { width: 190px; }

/* --- Klikabilan red i detalj proizvoda ------------------------------------ */

tbody tr.clickable { cursor: pointer; }

.receipt-row { display: grid; grid-template-columns: 1fr 100px 140px 28px;
               gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.receipt-row select, .receipt-row input {
  font: inherit; font-size: var(--text-sm); height: 34px; padding: 0 var(--space-2);
  border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: var(--surface-card); color: var(--ink-primary); min-width: 0;
}

.detail-head { display: flex; align-items: center; gap: var(--space-3);
               flex-wrap: wrap; margin-bottom: var(--space-4); }
.detail-head .muted { margin-right: auto; }
.detail-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.ai-box { border-style: dashed; }
.ai-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); }
.ai-row input { flex: 1; font: inherit; font-size: var(--text-sm); height: 36px;
                padding: 0 var(--space-3); border-radius: var(--radius-md);
                border: 1px solid var(--border-strong); background: var(--surface-card); }
.ai-row input:disabled, .ai-row button:disabled { opacity: .55; cursor: not-allowed; }
.ai-suggest { display: flex; flex-wrap: wrap; gap: var(--space-2);
              margin-bottom: var(--space-3); opacity: .6; }

/* Detalj proizvoda je sadrzajan, pa mu treba vise mesta od obicnog prozora. */
.modal.wide { max-width: 920px; }

/* Presek kampanja. Dugmad koja se ponasaju kao jezicci, jer se izmedju analize,
   preseka po proizvodima i povezivanja prelazi cesto, a svaki prelazak preko
   glavnog menija izgubio bi izabrani period i mesto u tabeli. */
.segmented { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: var(--space-4);
             background: var(--surface-card); border: 0;
             box-shadow: var(--shadow-card); border-radius: var(--radius-pill); }
.segmented button { font: inherit; font-size: var(--text-sm); cursor: pointer;
                    padding: 7px var(--space-5); border: 0; border-radius: var(--radius-pill);
                    background: transparent; color: var(--ink-secondary); }
.segmented button:hover { color: var(--ink-primary); }
.segmented button.on { background: var(--surface-inverse); color: var(--ink-inverse);
                       border: 0; font-weight: 600; }

/* Zaglavlje po kome se sortira mora da se prepozna kao dugme pre nego sto se
   klikne, inace se sortiranje ne otkrije. */
table.sortable thead th { cursor: pointer; user-select: none; }
table.sortable thead th:hover { color: var(--ink-primary); text-decoration: underline;
                                text-underline-offset: 3px; }
table tfoot td { font-weight: 700; color: var(--ink-primary);
                 border-top: 1px solid var(--border-hairline);
                 background: var(--surface-sunken); }
.ck-name { display: inline-block; max-width: 340px; overflow: hidden;
           text-overflow: ellipsis; vertical-align: bottom; }
td .sub { font-size: var(--text-2xs); margin-top: 2px; max-width: 320px;
          overflow: hidden; text-overflow: ellipsis; }

/* Troskovi iz knjigovodstva. Potvrdjen red se namerno stisava, jer spisak
   postoji zbog onoga sto jos ceka odluku, a ne zbog onoga sto je gotovo. */
tr.done td { opacity: .62; }
.cat-select { font: inherit; font-size: var(--text-xs); height: 28px; max-width: 200px;
              padding: 0 var(--space-2); border-radius: var(--radius-sm);
              border: 1px solid var(--border-strong); background: var(--surface-card);
              color: var(--ink-primary); }
td.sub-cell { max-width: 260px; white-space: normal; font-size: var(--text-2xs);
              line-height: 1.35; }
.hbar-value .muted { display: inline-block; min-width: 56px; text-align: right; }

/* ==========================================================================
   Mreza pocetnog ekrana

   Ekran je do sada bio jedan stubac kartica jednake tezine, pa je pogled morao
   da procita sve da bi nasao ono sto trazi. Mreza uvodi razliku u velicini:
   sto je celina vaznija, to zauzima vise mesta. Velicina je ovde jedini nosilac
   prvenstva, jer boja u ovom sistemu vec ima svoj posao.
   ========================================================================== */

.bento { display: grid; grid-template-columns: repeat(12, 1fr);
         gap: var(--space-4); margin-bottom: var(--space-4); align-items: stretch; }
.bento > * { grid-column: span 12; min-width: 0; }

@media (min-width: 1100px) {
  .b-3 { grid-column: span 3; }
  .b-4 { grid-column: span 4; }
  .b-5 { grid-column: span 5; }
  .b-6 { grid-column: span 6; }
  .b-7 { grid-column: span 7; }
  .b-8 { grid-column: span 8; }
  .b-9 { grid-column: span 9; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .b-3, .b-4, .b-5, .b-6 { grid-column: span 6; }
}

/* Kartica u mrezi. Vece zaobljenje i najtanja senka odvajaju je od tonirane
   podloge, pa granica moze da bude svetlija nego ranije. */
.panel { background: var(--surface-card); border: 0;
         border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6);
         box-shadow: var(--shadow-card); display: flex; flex-direction: column;
         gap: var(--space-4); }
.panel > h2, .panel-title {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--ink-muted); margin: 0;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between;
              gap: var(--space-4); }
.panel-note { font-size: var(--text-xs); color: var(--ink-muted); margin: 0; }
.panel > .table-wrap { margin: 0 calc(var(--space-6) * -1) calc(var(--space-5) * -1);
                       border: 0; box-shadow: none;
                       border-top: 1px solid var(--border-hairline);
                       border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* Crna kartica. Jedna po ekranu, za broj oko koga se sve vrti. */
.panel-ink { background: var(--surface-ink); border-color: var(--surface-ink);
             color: var(--ink-inverse); justify-content: space-between; }
.panel-ink .panel-title, .panel-ink .panel-note { color: rgba(255,255,255,.62); }
.panel-ink .ledger-k { color: rgba(255,255,255,.62); }
.panel-ink .ledger-v { color: #FFFFFF; }
.panel-ink .ledger-row { border-color: rgba(255,255,255,.10); }

/* --- Veliki broj ---------------------------------------------------------- */

/* Iznos se lomi na celi deo i pare. Celi deo nosi red velicine i zato je
   pun, pare su tacnost i zato su prigusene. Bez toga oko cita ceo niz cifara
   istom paznjom, pa se red velicine gubi bas na mestu gde je najvazniji. */
.big { font-size: var(--text-3xl); font-weight: 600; line-height: 1.05;
       letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums;
       display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.big .cents { opacity: .45; font-size: .62em; }
.big .unit { font-size: .38em; font-weight: 500; opacity: .55;
             letter-spacing: 0; margin-left: 2px; }
.big.mid { font-size: var(--text-2xl); }

/* --- Znacka promene ------------------------------------------------------- */

.chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
        font-size: var(--text-xs); font-weight: 600; padding: 3px 9px;
        border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.chip-up   { background: var(--status-good-wash); color: var(--status-good); }
.chip-down { background: var(--status-critical-wash); color: var(--status-critical); }
.chip-flat { background: var(--surface-sunken); color: var(--ink-muted); }
.panel-ink .chip-up   { background: rgba(47,180,78,.16);  color: #7DDA92; }
.panel-ink .chip-down { background: rgba(229,86,75,.16);  color: #F3948B; }
.panel-ink .chip-flat { background: rgba(255,255,255,.10); color: rgba(255,255,255,.7); }

/* --- Knjiga od prihoda do marze ------------------------------------------- */

.ledger { display: flex; flex-direction: column; }
.ledger-row { display: flex; align-items: center; justify-content: space-between;
              gap: var(--space-4); padding: 9px 0;
              border-bottom: 1px solid var(--border-hairline); }
.ledger-row:last-child { border-bottom: none; }
.ledger-k { color: var(--ink-secondary); font-size: var(--text-sm); }
.ledger-v { font-size: var(--text-sm); font-variant-numeric: tabular-nums;
            font-weight: 500; }
.ledger-row.sum { border-top: 1px solid var(--border-strong); margin-top: 2px; }
.ledger-row.sum .ledger-k { color: var(--ink-primary); font-weight: 600; }
.ledger-row.sum .ledger-v { font-weight: 600; }
.ledger-row.minus .ledger-v { color: var(--ink-secondary); }

/* --- Trakice perioda ------------------------------------------------------ */

.pills { display: inline-flex; gap: 2px; padding: 4px; background: var(--surface-card);
         border: 0; box-shadow: var(--shadow-card); border-radius: var(--radius-pill); }
.pills button { font: inherit; font-size: var(--text-xs); font-weight: 500;
                cursor: pointer; padding: 5px 13px; border: 0;
                border-radius: var(--radius-pill); background: transparent;
                color: var(--ink-secondary); }
.pills button:hover { color: var(--ink-primary); }
.pills button.on { background: var(--surface-inverse); color: var(--ink-inverse);
                   font-weight: 600; }

/* ==========================================================================
   Dopune okvira aplikacije uz toniranu podlogu
   ========================================================================== */

/* Zaglavlje se blago zamucuje ispod sebe dok se lista, pa red tabele koji
   prolazi ispod naslova ne izgleda kao da je deo naslova. */
.pagehead { background: color-mix(in srgb, var(--surface-page) 82%, transparent);
            backdrop-filter: blur(10px); border-bottom-color: transparent; }
.pagehead h1 { font-size: var(--text-2xl); letter-spacing: -0.03em; }
.pagehead-actions { align-items: center; }

/* Naslov ekrana dobija liniju sa nazivom celine iznad sebe, jer sistem ima
   osam ekrana pa je korisno videti gde si i pre nego sto se procita sadrzaj. */
.pagehead-titles { display: flex; flex-direction: column; gap: 2px; }
.pagehead-eyebrow { font-size: var(--text-2xs); font-weight: 600;
                    text-transform: uppercase; letter-spacing: var(--tracking-wide);
                    color: var(--ink-muted); }

nav a.active svg { opacity: 1; fill: var(--brand); }

.tile .val { font-variant-numeric: tabular-nums; }

/* Prazan ekran je poziv na potez, pa ima istu tezinu kao i kartica. */
.empty { background: var(--surface-card); border: 0;
         border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
         padding: var(--space-7) var(--space-6); }

/* Grafikon u kartici zauzima preostalu visinu i stoji u sredini. Kartice u
   istom redu su iste visine, a grafikon ima nepromenljiv odnos strana, pa bi
   bez ovoga ostajala prazna povrsina ispod njega. */
.panel > [id^="chart-"] { flex: 1; display: flex; flex-direction: column;
                          justify-content: center; min-height: 0; }
.panel > [id^="chart-"] .chart { width: 100%; }

/* Traka koja nosi stanje umesto samo znaka. Crvena je nestasica, zuta je
   upozorenje, brend boja ostaje za obicnu vrednost, i time i dalje retka. */
.hbar-fill.crit { background: var(--status-critical); }
.hbar-fill.warn { background: var(--status-warning); }

/* Vrednost u plocici ne prelama se u dva reda. Prelomljen iznos se cita kao
   dva broja, pa se izgubi trenutak u kome plocica treba da bude jasna odmah. */
.tile .val { white-space: nowrap; font-size: clamp(19px, 1.7vw, 28px); }

/* Veliki broj se ne prelama. Prelomljen iznos se cita kao dva broja, pa se
   gubi ono zbog cega je uopste velik. Umesto prelamanja, smanjuje se. */
.big { flex-wrap: nowrap; white-space: nowrap;
       font-size: clamp(24px, 3vw, 40px); }
.big.mid { font-size: clamp(20px, 2.1vw, 28px); }

@media (max-width: 1099px) {
  .layout { grid-template-columns: 212px 1fr; }
  .content { padding: var(--space-5); }
  .pagehead { padding: var(--space-4) var(--space-5); flex-wrap: wrap; }
}

/* Kontrola obracuna. Istaknuti koraci su medjuzbirovi, i oni su ono sto se
   stvarno cita: ostali redovi objasnjavaju kako se do njih doslo. */
tr.korak-vazan td { background: var(--surface-sunken); font-weight: 600; }
tr.korak-vazan td.num { font-size: var(--text-sm); }
td.minus { color: var(--ink-secondary); }

/* Napomena uz korak obracuna se prelama, ne skracuje. Skracena recenica sa tri
   tacke ovde bi sakrila bas ono zbog cega napomena i postoji. */
tr td .sub { max-width: 46ch; white-space: normal; overflow: visible;
             text-overflow: clip; }

/* Polje za priznati iznos. Prazno znaci ceo iznos, pa je i prikazano prazno,
   a ne popunjeno brojem koji bi izgledao kao rucno unet. */
.pnl-input { font: inherit; font-size: var(--text-xs); height: 28px; width: 96px;
             text-align: right; font-variant-numeric: tabular-nums;
             padding: 0 var(--space-2); border-radius: var(--radius-sm);
             border: 1px solid var(--border-strong); background: var(--surface-card);
             color: var(--ink-primary); }
.pnl-input::placeholder { font-size: var(--text-2xs); color: var(--ink-muted); }

/* Ispod iznosa u strukturi troskova stoji koliko je fakturisano, kada se
   razlikuje. Broj se poravnava desno kao i iznos iznad njega. */
.hbar-value .sub { text-align: right; max-width: none; }
.hbar-sub { display: block; font-size: var(--text-2xs); color: var(--ink-muted);
            text-align: right; margin-top: 1px; }

/* --- Savetnik ------------------------------------------------------------- */

/* Nalaz nosi vise slojeva: tvrdnju, obrazlozenje, predlog i ocenu provere.
   Kada bi sve stajalo istom tezinom, oko bi prvo palo na najduzi deo, a
   najduzi deo je obicno obrazlozenje, koje se cita tek kada tvrdnja zainteresuje. */
.nalaz { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
         background: var(--surface-card); padding: var(--space-5) var(--space-6);
         margin-bottom: var(--space-4); }
.nalaz-head { display: flex; align-items: flex-start; justify-content: space-between;
              gap: var(--space-4); margin-bottom: var(--space-3); }
.nalaz-title { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; margin: 0; }
.nalaz-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
              margin-top: 6px; font-size: var(--text-xs); color: var(--ink-muted); }
.nalaz-body { font-size: var(--text-sm); color: var(--ink-primary); line-height: 1.6; }
.nalaz-part { margin-top: var(--space-3); font-size: var(--text-sm);
              color: var(--ink-secondary); line-height: 1.6; }
.nalaz-part b { color: var(--ink-primary); font-weight: 600; }
.nalaz-foot { display: flex; align-items: center; justify-content: space-between;
              gap: var(--space-4); flex-wrap: wrap;
              margin-top: var(--space-4); padding-top: var(--space-4);
              border-top: 1px solid var(--border-hairline); }

/* Ocena je merilo kvaliteta sloja, pa mora da bude na dohvat ruke u trenutku
   citanja. Ocena koja se daje na drugom ekranu ne daje se. */
.ocena { display: inline-flex; gap: var(--space-2); }
.ocena button.on[data-ocena="korisno"] { background: var(--status-good-wash);
                                         color: var(--status-good); font-weight: 600; }
.ocena button.on[data-ocena="nije"] { background: var(--status-critical-wash);
                                      color: var(--status-critical); font-weight: 600; }

.chat { display: flex; flex-direction: column; gap: var(--space-4); }
.chat-red { display: flex; flex-direction: column; gap: var(--space-2); }
.chat-pitanje { align-self: flex-end; max-width: 70ch; background: var(--surface-inverse);
                color: var(--ink-inverse); padding: var(--space-3) var(--space-5);
                border-radius: var(--radius-xl); font-size: var(--text-sm); line-height: 1.5; }
.chat-odgovor { align-self: flex-start; max-width: 78ch; background: var(--surface-card);
                border: 0; box-shadow: var(--shadow-card); padding: var(--space-5);
                border-radius: var(--radius-xl); font-size: var(--text-sm); line-height: 1.6;
                white-space: pre-wrap; }
.chat-foot { align-self: flex-start; display: flex; align-items: center;
             gap: var(--space-3); font-size: var(--text-xs); color: var(--ink-muted); }
.chat-unos { display: flex; gap: var(--space-3); align-items: flex-end;
             margin-top: var(--space-5); }
.chat-unos textarea { flex: 1; min-height: 60px; resize: vertical; font: inherit;
                      font-size: var(--text-sm); padding: var(--space-4) var(--space-5);
                      border: 0; border-radius: var(--radius-xl);
                      box-shadow: var(--shadow-card);
                      background: var(--surface-card); color: var(--ink-primary); }

/* --------------------------------------------------------------------------
   Kontrola obracuna: traka sa periodom i kolone koje se prevlace.
   -------------------------------------------------------------------------- */

.period { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.period input[type="date"] { min-width: 9.5rem; }
.period .muted { font-size: var(--text-xs); }

/* Zaglavlje koje se moze prevuci. Pokazivac i isprekidana linija postoje da bi
   se to videlo pre nego sto se proba, jer funkcija koja se ne vidi ne postoji. */
.kol-vuci { cursor: grab; user-select: none; }
.kol-vuci:hover { background: var(--surface-hover); }
.kol-vuci::after { content: " ⠿"; color: var(--ink-muted); font-size: var(--text-2xs); }
.kol-vuci.vuce-se { opacity: 0.4; cursor: grabbing; }

/* Mesto na koje ce kolona pasti. Linija stoji sa leve strane ciljne kolone,
   jer se prevucena kolona ubacuje bas ispred nje. */
.kol-meta { box-shadow: inset 2px 0 0 0 var(--accent, currentColor); }

/* Rucni raspon stoji pored ponudjenih duzina, a ne umesto njih. Kada je zadat,
   nijedna trakica nije oznacena, jer bi oznacena trakica tvrdila da se gleda
   nesto sto se ne gleda. */
.period-rucno { display: inline-flex; align-items: center; gap: var(--space-2);
                margin-left: var(--space-2); }
.period-rucno input[type="date"] { min-width: 8.5rem; padding: 4px 8px;
                                   font-size: var(--text-xs); }
.period-rucno .muted { font-size: var(--text-xs); }

/* --------------------------------------------------------------------------
   Ciljevi

   Traka pokazuje dva podatka, a ne jedan. Popunjeni deo je ono sto je uradjeno,
   a crtica je ono sto je do danas trebalo. Bez crtice bi traka od cetrdeset
   odsto dvadesetog dana od trideset izgledala kao napredak, a to je zaostatak.
   -------------------------------------------------------------------------- */
.hbar-ocekivano { position: absolute; top: 0; bottom: 0; width: 2px;
                  background: var(--ink-primary); opacity: .6; }
.hbar-value .sub { display: block; font-size: var(--text-2xs); font-weight: 400; }

/* ==========================================================================
   Meki sloj: istaknuta kartica, oznake kretanja i sitne ispravke

   Ovaj deo dovrsava prelaz na izgled bez granica. Sve sto je ranije bilo
   omedjeno linijom sada je omedjeno razmakom, zaobljenjem i senkom.
   ========================================================================== */

/* Tabela unutar kartice ne nosi svoju senku. Dve senke jedna u drugoj daju
   utisak okvira u okviru, a granica se bas i uklanjala da tog utiska nema. */
.card .table-wrap,
.modal .table-wrap { box-shadow: none; background: transparent; }
.card .table-wrap thead th,
.modal .table-wrap thead th { background: var(--surface-card); }

/* Red sa stanjem prati istu logiku kao red tabele: linija je tu da drzi red,
   ne da se vidi. */
.row, .ledger-row {
  border-bottom-color: color-mix(in srgb, var(--border-hairline) 55%, transparent);
}
.row { padding: 13px 0; }

/* --- Istaknuta kartica ---------------------------------------------------- */

/* Jedna po ekranu, za broj oko koga se sve vrti. Ispuna je brend narandzasta,
   a tekst je crn i nikada beo: kontrast narandzaste prema beloj je 2.87:1, sto
   je ispod praga citljivosti. Pravilo iz tokens.css ovde nije ukras nego uslov
   da se broj uopste procita. */
.panel-brand, .tile-brand {
  background: var(--brand); color: var(--ink-primary);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--brand) 55%, transparent);
}
.panel-brand .panel-title, .panel-brand .panel-note,
.tile-brand .lab, .tile-brand .note { color: rgba(11, 11, 11, .62); }
.panel-brand .ledger-k { color: rgba(11, 11, 11, .62); }
.panel-brand .ledger-row { border-color: rgba(11, 11, 11, .12); }
.tile-brand .val { color: var(--ink-primary); }

/* --- Oznaka kretanja ------------------------------------------------------ */

/* Strelica nosi smer, boja kaze da li je smer dobar. Zeleno i crveno ostaju na
   kretanju, jer je to jedino mesto gde boja donosi ocenu. Narandzasta se na
   ovaj posao ne stavlja: ona pokazuje gde si, a ne da li je dobro. */
.chip { padding: 4px 11px; font-size: var(--text-xs); }
.chip-flat { background: var(--surface-sunken); }

/* --- Sitnice -------------------------------------------------------------- */

.brand { padding: var(--space-5) var(--space-5) var(--space-5); }
.sidebar-foot { padding-bottom: var(--space-5); }

/* Zaglavlje se lepi za vrh sadrzaja, a sadrzaj pocinje ispod plutajuceg menija,
   pa razmak sa leve strane vise ne dolazi od granice nego od samog rasporeda. */
.content { padding: var(--space-5) var(--space-6) var(--space-7); }

/* Kolona koja se prevlaci mora da ostane prepoznatljiva i bez sive podloge
   zaglavlja, pa se oznaka za prevlacenje vidi tek na prelaz misem. */
.kol-vuci::after { opacity: .45; }

/* Radnja koja se ponavlja na svakoj kartici nije glavna radnja ekrana. Kada bi
   svaka od cetrnaest kartica nosila crno dugme, crna bi prestala da znaci
   "ovo je potez koji se ocekuje", a to je jedini razlog zbog koga je crna. */
.group-card .btn-primary { background: var(--surface-sunken); color: var(--ink-primary); }
.group-card .btn-primary:hover { background: var(--surface-hover); }
.group-actions .btn { height: 32px; padding: 0 var(--space-4); font-size: var(--text-xs); }

/* ==========================================================================
   Bela podloga: granica umesto senke

   Odluka vlasnika, avgust 2026: stranica je bela, a kartica je bela sa okvirom.

   Ovo nije samo izmena boje pozadine. Senka razdvaja tako sto pravi razliku u
   svetlini prema podlozi. Kada su podloga i kartica iste svetline, ta razlika
   ne postoji, pa senka postaje mrlja koja ne kaze nista. Razdvajanje zato
   preuzima granica, a kartica gubi senku: granica i senka zajedno daju utisak
   okvira u okviru.

   Senka ostaje samo onome sto stvarno lebde iznad sadrzaja: prozoru, oblacicu
   grafikona, traci koja prati pogled i plutajucem meniju. Tu senka ne razdvaja
   nego kaze da je nesto iznad, a to je posao koji granica ne moze da odradi.
   ========================================================================== */

.card,
.tile,
.table-wrap,
.panel,
.issue,
.nalaz,
.group-card,
.empty,
.chat-odgovor,
.toolbar input:not([type="checkbox"]),
.toolbar select,
.head-select,
.chat-unos textarea,
.pills,
.segmented {
  border: 1px solid var(--border-hairline);
  box-shadow: none;
}

/* Meni pluta, pa zadrzava senku, ali dobija i granicu, da se na beloj podlozi
   vidi gde prestaje i kada je pogled na vrhu strane. */
.sidebar { border: 1px solid var(--border-hairline); box-shadow: var(--shadow-card); }

/* Tabela u kartici i dalje nema svoj okvir, jer je kartica vec uokvirena. */
.card .table-wrap,
.modal .table-wrap,
.panel > .table-wrap { border: 0; }

/* Istaknuta kartica nosi ispunu, pa joj granica ne treba: ispuna sama kaze
   gde prestaje. Senka u boji ostaje, jer je ona ovde naglasak a ne razdvajanje. */
.tile-brand, .panel-brand {
  border-color: transparent;
  box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--brand) 60%, transparent);
}
.panel-ink { border-color: var(--surface-ink); }

/* Uvucena polja ostaju bez granice, jer ih razdvaja podloga koja je tamnija od
   bele. Granica bi im dodala drugu ivicu preko one koju vec imaju. */
.field input, .field select { border-color: transparent; }
.field input:focus, .field select:focus { border-color: var(--border-strong); }

/* Traka koja prati pogled i iskacuci prozor stvarno lebde, pa zadrzavaju senku. */
.bulkbar { border: 1px solid var(--border-hairline); box-shadow: var(--shadow-float); }
.modal { border: 1px solid var(--border-hairline); }

/* Zaglavlje tabele na beloj podlozi nema svoju podlogu, pa liniju ispod sebe
   drzi nesto jaca nego linija izmedju redova. */
thead th { border-bottom: 1px solid var(--border-hairline); }

/* Deo koraka u obracunu. Uvucen i prigusen, jer objasnjava red iznad sebe, a ne
   stoji kao zaseban korak. */
tr.korak-deo td { font-size: var(--text-2xs); }

/* Ko je prijavljen, u dnu menija. Prigusen je, jer ne trazi nikakav potez, ali
   mora da postoji: dvoje ljudi gleda isti sistem sa istog spiska. */
.korisnik { margin-top: auto; padding: var(--space-3) var(--space-5) 0;
            display: flex; align-items: center; justify-content: space-between;
            gap: var(--space-2); font-size: var(--text-xs); }
.korisnik-ime { color: var(--ink-secondary); overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.korisnik-odjava { color: var(--ink-muted); text-decoration: none; flex: none; }
.korisnik-odjava:hover { color: var(--status-critical); }
.korisnik + .sidebar-foot { margin-top: var(--space-2); }


/* Zahtevi kupaca
   ---------------------------------------------------------------------------
   Zahtev i kupac se citaju zajedno, jer se odluka donosi iz oba. Zato stoje
   jedan pored drugog dok ima mesta, a na uskom ekranu jedan ispod drugog. */
.zahtev-dvokolona { display: grid; gap: var(--space-4);
                    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.zahtev-dvokolona > .card { margin-bottom: 0; }

/* Traka koja se javi kada podaci zaostanu
   ---------------------------------------------------------------------------
   Stoji na vrhu pocetnog ekrana, iznad brojeva na koje se odnosi. Rupa u
   podacima se inace ne vidi kao greska nego kao slab dan, pa mora da bude
   recenica, ne oznaka. */
.traka-povlacenje {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  background: var(--status-warning-wash); color: var(--ink-primary);
  border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4); font-size: var(--text-sm);
}
.traka-povlacenje strong { display: block; }

.izvor-red { display: flex; align-items: center; gap: 8px; padding: 4px 0;
             font-size: var(--text-sm); font-weight: 400; text-transform: none;
             letter-spacing: 0; color: var(--ink-primary); }
.izvor-red input { width: auto; }

/* Provera veze i istorija povlacenja
   ---------------------------------------------------------------------------
   Greska stoji u celini, u zapisu sa fiksnom sirinom slova. Skracena greska ume
   da izostavi bas onaj deo po kome se prepoznaje uzrok, a prelomljena poruka o
   adresi se ne moze prekucati. */
.provera-izvor { border-top: 1px solid var(--border-hairline); padding: var(--space-4) 0; }
.provera-izvor:first-of-type { border-top: 0; padding-top: 0; }
.provera-glava { display: flex; align-items: center; gap: var(--space-3);
                 margin-bottom: var(--space-3); }
.provera-korak { padding: 6px 0 6px var(--space-4);
                 border-left: 2px solid var(--border-hairline); margin-left: 4px; }
.provera-korak-glava { display: flex; align-items: center; gap: var(--space-3);
                       flex-wrap: wrap; font-size: var(--text-sm); }
.provera-korak pre, .red-greske pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs); line-height: 1.5; white-space: pre-wrap;
  word-break: break-word; margin: 6px 0 0; padding: var(--space-3);
  background: var(--surface-sunken); border-radius: var(--radius-md);
  color: var(--ink-secondary);
}
.red-greske td { padding-top: 0; }

.kandidat-trazenje { display: flex; gap: var(--space-3); align-items: center;
                     flex-wrap: wrap; margin: var(--space-4) 0; }
.kandidat-trazenje input { flex: 1 1 320px; min-width: 220px;
  font: inherit; font-size: var(--text-sm); padding: 9px var(--space-4);
  background: var(--surface-sunken); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md); color: var(--ink-primary); }

/* Linija nule na linijskom grafikonu.
   Deli dobitak od gubitka, pa je jaca od ostalih crta u mrezi. Kada bi bila
   ista kao one, znak vrednosti bi se citao iz polozaja, a to je pogadjanje. */
.chart-zero-line { stroke: var(--ink-muted); stroke-width: 1.25; stroke-opacity: 0.55; }

/* Traka o jutarnjem prolazu.
   ZASTO STOJI IZNAD SVAKOG EKRANA. Kada povlacenje stane, nista ne pukne.
   Dani prosto fale, poslednji dan sa podacima izgleda kao poslednji dan
   poslovanja, i to lici na slab period umesto na kvar. Oznaka sa brojem uz
   stavku menija se previdi, jer broj bez recenice ne trazi nista, pa se ovde
   pise sta se dogodilo i sta treba uraditi. */
.prolaz-traka {
  display: flex; align-items: flex-start; gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-hairline);
  background: var(--status-warning-wash);
  color: var(--ink-primary);
  font-size: var(--text-sm); line-height: 1.5;
}
.prolaz-traka[data-ocena="greska"] { background: var(--status-critical-wash); }
.prolaz-traka .prolaz-znak {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  fill: var(--status-warning);
}
.prolaz-traka[data-ocena="greska"] .prolaz-znak { fill: var(--status-critical); }
.prolaz-traka .prolaz-tekst { flex: 1 1 320px; min-width: 220px; }
.prolaz-traka .prolaz-naslov {
  font-weight: 650; font-size: var(--text-md); margin: 0 0 2px;
}
.prolaz-traka .prolaz-opis { margin: 0; color: var(--ink-secondary); }
.prolaz-traka .prolaz-detalj {
  margin: var(--space-2) 0 0; color: var(--ink-muted);
  font-size: var(--text-xs);
}
.prolaz-traka .prolaz-radnje { flex: none; display: flex; gap: var(--space-2); }

/* Podaci porudzbine uz zahtev kupca. */
.stavke-veze {
  margin: 0 0 var(--space-3);
  padding-left: 20px;
  font-size: var(--text-sm);
  color: var(--ink-secondary);
}
.stavke-veze li { margin-bottom: 2px; }

/* Upozorenje da je jos jedan zahtev vezan za istu porudzbinu.
   Nije greska samo po sebi, jer porudzbina ume da ima vise stavki, pa je ton
   opomena a ne alarm. Kada porudzbina ima jednu stavku, jedna od veza je
   pogresna, i to je jedini nacin da se to uopste primeti. */
.upozorenje-veze {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--status-warning);
  background: var(--status-warning-wash);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
}
.upozorenje-veze p { margin: 0 0 var(--space-2); color: var(--ink-primary); }
.upozorenje-veze ul { margin: 0; padding-left: 20px; color: var(--ink-secondary); }
.upozorenje-veze li { margin-bottom: 2px; }
.upozorenje-veze a { color: var(--brand-ink); }