/* ══ DOKOVANI PANEL ZA IZBOR ════════════════════════════════════════════════════════
   Umesto prozora preko celog ekrana, izbor (datum, kupac, objekat, artikal, količina)
   dešava se u panelu prikačenom uz obrazac sa desne strane. Obrazac ostaje na oku —
   vidi se šta je već uneto i šta još fali, pa nema „gde sam ono stao" posle zatvaranja
   prozora.

   Preuzeto iz STech-a (prijem alata), boje su kućne SirmiumSale: plava #185FA5,
   tekst #16222f, linije #e2e8f0. Unutrašnjost panela namerno koristi ZATEČENE delove
   (action-box, Basic_Search_Component, Pagination_Component, table--vessels, blue-row,
   ODABERI/PONIŠTI) da liči na BigPopup koji svi već znaju.

   Panel je uvek prisutan: dok se ništa ne bira drži uputstvo i savete, pa se prostor ne
   trza kad se pojavi/nestane.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ── RASPORED: obrazac levo, panel desno, oboje do dna ───────────────────────────── */
/* Roditelj (card u wizardu) je flex kolona sa fiksnom visinom — flex:1 daje ostatak
   visine ispod stepera, pa panel ide do dna prozora umesto da se završi na visini sadržaja. */
.dock-split { display: flex; gap: 12px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.dock-main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; margin-bottom: 0 !important; }
.dock-rail { flex: 0 0 460px; width: 460px; min-height: 0; display: flex; }

/* Na užim ekranima panel prvo omršavi, pa tek onda pada ispod obrasca — na 1180px za dve
   kolone više nema mesta a da obe ostanu upotrebljive. */
@media (max-width: 1400px) { .dock-rail { flex-basis: 400px; width: 400px; } }
@media (max-width: 1180px) {
    .dock-split { flex-direction: column; align-items: stretch; overflow-y: auto; }
    .dock-main { overflow: visible; flex: 0 0 auto; }
    .dock-rail { width: 100%; flex-basis: auto; flex: 0 0 auto; }
    .dock-card { height: auto !important; max-height: 78vh; }
}

/* ── PANEL ───────────────────────────────────────────────────────────────────────── */
.dock-card { flex: 1 1 auto; min-width: 0; height: 100%; background: #fff; border: 1px solid #d7dde3;
             border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
/* Aktivan panel se izdvaja teal okvirom — istim kojim je uokviren i sam prozor.
   Pun plavi okvir sa plavom trakom bi vikao jače od svega na ekranu. */
.dock-card.on { border-color: #3aadae; }

/* Naslov panela je obična sekcija kao svuda u aplikaciji: bela podloga, tamno pismo i tanka
   crta ispod (isto kao h2.border-bottom-teal na obrascima). */
.dock-head { flex: 0 0 auto; background: #fff; color: #16222f; padding: 11px 14px 9px; display: flex;
             align-items: flex-start; gap: 10px; border-bottom: 1.5px solid #000; }
.dock-head-t { flex: 1 1 auto; min-width: 0; }
.dock-head-k { font-size: 10px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
               color: #94a3b8; line-height: 1.3; }
.dock-head-n { font-size: 16px; font-weight: 700; line-height: 1.3; color: #16222f; }
.dock-head-x { font-size: 11.5px; color: #5b6b7b; line-height: 1.4; margin-top: 3px; }
.dock-head-close { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
                   background: #f1f5f9; border: 1px solid #d7dde3; color: #5b6b7b; font-size: 14px;
                   font-weight: 700; line-height: 1; }
.dock-head-close:hover { background: #e2e8f0; color: #16222f; }

/* Zaglavlje praznog stanja je još tiše — panel tada ništa ne traži od korisnika. */
.dock-head--idle { border-bottom-color: #e2e8f0; }
.dock-head--idle .dock-head-n { color: #5b6b7b; font-weight: 600; }

.dock-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; }
/* Lista i kalendar sami raspoređuju svoju visinu (traka gore, sadržaj u sredini, dugmad
   dole), pa im panel daje čist flex prostor bez svog razmaka i bez svog skrola. */
.dock-body--flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dock-foot { flex: 0 0 auto; border-top: 1px solid #e2e8f0; padding: 10px 14px; background: #fbfcfe; }

/* ── PRAZNO STANJE: uputstvo i saveti ────────────────────────────────────────────── */
.dock-empty-i { display: flex; gap: 10px; background: #eef4fb; border: 1px solid #cfe0f2; border-radius: 11px;
                padding: 11px 13px; font-size: 12.5px; line-height: 1.5; color: #2c4a68; }
.dock-empty-i .ic { flex: 0 0 auto; font-size: 15px; line-height: 1.2; }
.dock-tips { margin-top: 12px; background: #fffbeb; border: 1px solid #fde9b5; border-radius: 11px; padding: 11px 13px; }
.dock-tips-t { font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: #92700c; margin-bottom: 6px; }
.dock-tips ul { margin: 0; padding-left: 17px; }
.dock-tips li { font-size: 12.5px; line-height: 1.55; color: #4a3d13; margin-bottom: 4px; }
.dock-tips li:last-child { margin-bottom: 0; }

/* ── SADRŽAJ „LISTA" — isti delovi kao BigPopup, samo u koloni od 460px ──────────── */
.dock-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dock-list-top { flex: 0 0 auto; padding: 10px 12px 8px; border-bottom: 1px solid #eef2f6; background: #fbfcfe; }
/* align-items:flex-start je ovde ključno: .table-responsive je `display:flex`, pa se tabela
   kao fleks-dete razvuče na celu visinu i redovi postanu visoki po 90px kad ih ima malo.
   Ovako tabela ima svoju prirodnu visinu, a višak redova skroluje. */
/* Par piksela sa strane: spisak je jedini deo panela bez razmaka (dock-body--flush gasi
   padding), pa su i prva kolona i klizač dodirivali okvir kartice. */
.dock-list-table { flex: 1 1 auto; min-height: 0; overflow: auto; align-items: flex-start; padding: 0 6px; }
.dock-list-table > .table { height: auto; }
.dock-list-foot { flex: 0 0 auto; display: flex; padding: 10px 12px; border-top: 1px solid #e2e8f0; background: #fbfcfe; }

/* Lepljivo zaglavlje tabele (.table thead {position:sticky}) prekriva red na koji se
   doskroluje. scroll-margin-top pomera „tacku poravnanja“ reda za visinu zaglavlja
   (.table--vessels th: 6px + ~16px + 6px + 2px obruba), pa oznaceni red uvek stane ISPOD
   zaglavlja, a ne iza njega. Radi zajedno sa DockScrollTo (block:'nearest') iz App.razor. */
.dock-list-table .table--vessels tbody tr { scroll-margin-top: 32px; }

/* OZNAČEN RED — preuzeto iz STech-a (wo-doc.css). Bez ovoga se u SaleWeb-u red označen
   strelicama praktično ne vidi: wine2d2.css ima samo `outline` na <tr>, koji je STech baš
   zbog toga i zamenio inset senkom na ćelijama („ne pomera raspored"). Ograničeno na spisak
   u panelu da ostale tabele u aplikaciji ostanu kakve jesu. */
.dock-list-table .table.table--vessels tbody tr.blue-row > td { box-shadow: inset 0 2px 0 #111827, inset 0 -2px 0 #111827; }
.dock-list-table .table.table--vessels tbody tr.blue-row > td:first-child { box-shadow: inset 0 2px 0 #111827, inset 0 -2px 0 #111827, inset 2px 0 0 #111827; }
.dock-list-table .table.table--vessels tbody tr.blue-row > td:last-child { box-shadow: inset 0 2px 0 #111827, inset 0 -2px 0 #111827, inset -2px 0 0 #111827; }

/* Paginacija je pravljena za široku traku — u koloni od 460px se zbije, ali stane cela
   (isti elementi, isti redosled, samo manji razmaci). */
.dock-list-top .action-box + .action-box { margin-top: 7px; }
.dock-list-top .action-box ul { margin-right: 8px; }
.dock-list-top .number-wrapper { min-width: 0; font-size: 12px; }
.dock-list-top .pagination-select { max-width: 66px; }

/* ── SADRŽAJ „TEKST-OBJAŠNJENJE" ─────────────────────────────────────────────────── */
.dock-help-x { font-size: 13.5px; line-height: 1.65; color: #334155; margin: 0; }
.dock-help-eg { margin-top: 11px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 11px;
                padding: 9px 12px; font-size: 13px; color: #16222f; line-height: 1.5; }
.dock-help-eg .k { display: block; font-size: 10px; font-weight: 800; letter-spacing: .9px;
                   text-transform: uppercase; color: #94a3b8; margin-bottom: 2px; }

/* ── SADRŽAJ „KALENDAR" ──────────────────────────────────────────────────────────── */
.dock-cal { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px; }
.dock-cal-wrap { height: 330px; }

/* ── SADRŽAJ „DIGITRON" ──────────────────────────────────────────────────────────── */
/* Prikaz broja je pravo polje: prima i kucanje sa tastature, ne samo klik po dugmadima. */
.dock-num { display: block; width: 100%; text-align: right; font-size: 30px; font-weight: 800; color: #16222f;
            padding: 10px 14px 12px; border: 1.5px solid #d7dde3; border-radius: 12px; background: #fbfcfe;
            line-height: 1.15; font-variant-numeric: tabular-nums; font-family: inherit; }
.dock-num:focus { outline: none; border-color: #185FA5; box-shadow: 0 0 0 3px rgba(24,95,165,.13); }
.dock-keys-hint { font-size: 11.5px; color: #94a3b8; line-height: 1.45; margin: 10px 0 0; }
.dock-num-k { font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: #94a3b8;
              text-align: left; margin-bottom: 3px; }
.dock-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.dock-key { border: 1.5px solid #d7dde3; background: #fff; border-radius: 12px; padding: 13px 0; cursor: pointer;
            font-size: 19px; font-weight: 800; color: #16222f; font-family: inherit; line-height: 1; }
.dock-key:hover { border-color: #185FA5; background: #eef4fb; }
.dock-key:disabled { opacity: .35; cursor: default; }
.dock-key:disabled:hover { border-color: #d7dde3; background: #fff; }
.dock-key--wipe { color: #C0392B; font-size: 16px; }

/* Napomene i opisi NE idu u panel — tekst se kuca u obrascu, tamo gde se i čita. Panel je
   samo za izbor (datum, kupac, objekat, artikal) i za unos broja. */

/* ── DUGMAD PANELA ───────────────────────────────────────────────────────────────── */
.dock-btn { border: none; border-radius: 10px; padding: 10px 14px; font-size: 12.5px; font-weight: 800;
            cursor: pointer; font-family: inherit; line-height: 1.1; }
.dock-btn--ok { background: #185FA5; color: #fff; }
.dock-btn--off { background: #eef2f7; color: #5b6b7b; }
.dock-btn--del { background: #fdecea; color: #C0392B; }
.dock-btn--w { width: 100%; }
.dock-btn:hover { filter: brightness(1.05); }
.dock-foot .row2 { display: flex; gap: 8px; }
.dock-foot .row2 .dock-btn { flex: 1 1 0; }
.dock-foot .row3 { display: flex; gap: 8px; }
.dock-foot .row3 .dock-btn { flex: 1 1 0; }

/* ── POLJE NA KOME SI TRENUTNO ──────────────────────────────────────────────────── */
/* Plavi okvir je boja dugmeta (.button--primary, #408DFB) — ista koju nose DALJE i ODABERI,
   pa se ne uvodi nova boja u aplikaciju. Nosi ga polje koje panel trenutno opslužuje, bilo
   da se bira u panelu ili se u njega kuca; bez toga se na obrascu od desetak polja ne vidi
   gde si. */
.dock-field { border-color: #d7dde3; }
/* Okvir se crta box-shadow prstenom, a ne debljim border-om: border-width bi pomerio
   raspored za piksel pri svakom prelasku sa polja na polje. */
.dock-field.picking { border-color: #408DFB !important; box-shadow: 0 0 0 2px #408DFB; background: #fff !important; }
/* Popunjeno polje je zeleno — na obrascu sa deset polja se iz aviona vidi šta još fali. */
.dock-field.filled { border-color: #16a34a !important; background: #f6fdf8 !important; }
.dock-pick-hint { font-size: 11.5px; font-weight: 700; color: #185FA5; line-height: 1.4; margin: 3px 0 0; }
.dock-pick-hint::before { content: "▸ "; }

/* Datum je tri polja (dan.mesec.godina). Boji se SVAKO POLJE ZA SEBE, ne okvir oko sva tri —
   okvir oko celine je izgledao kao da je označen ceo red obrasca. */
.dock-date.picking .input--primary { border-color: #408DFB !important; box-shadow: 0 0 0 2px #408DFB; }
.dock-date.filled .input--primary { border-color: #16a34a !important; background: #f6fdf8 !important; }

/* ── STAVKE: uređivač kao SVOJA KARTICA IZNAD TABELE ─────────────────────────────── */
/* Uređivač je posebna kartica iznad spiska, ne blok ugurán u tabelu: unos i pregled su dva
   posla i vizuelno se razdvajaju. max-height se animira jer se visina sadržaja ne zna
   unapred; vrednost je gornja granica, ne stvarna visina. */
.dock-editor { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s ease, opacity .25s ease; }
.dock-editor.open { max-height: 1400px; opacity: 1; }
.dock-editor-in { border: 1px solid #d7dde3; border-radius: 14px; background: #fff; padding: 15px 17px; margin-bottom: 12px; }
.dock-editor-h { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; }
.dock-editor-h .t { font-size: 15.5px; font-weight: 800; color: #16222f; white-space: nowrap; }
.dock-editor-x { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; background: #f1f5f9;
                 border: 1px solid #d7dde3; color: #5b6b7b; font-size: 15px; font-weight: 700; cursor: pointer; line-height: 1; }
.dock-editor-x:hover { background: #e2e8f0; color: #16222f; }

/* Radnje uređivača, poravnate desno ispod polja. */
.dock-ed-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.dock-ed-foot .button { margin-bottom: 0; }

/* Izbor načina unosa kao jedan prekidač sa dva položaja, umesto dva odvojena dugmeta. */
.dock-seg { display: flex; border: 1.5px solid #d7dde3; border-radius: 10px; overflow: hidden; background: #fff; }
.dock-seg button { flex: 1 1 0; border: none; background: #fff; padding: 8px 16px; font-size: 12.5px;
                   font-weight: 800; color: #5b6b7b; cursor: pointer; font-family: inherit; line-height: 1.2; white-space: nowrap; }
.dock-seg button + button { border-left: 1.5px solid #d7dde3; }
.dock-seg button.on { background: #185FA5; color: #fff; }
.dock-seg button:not(.on):hover { background: #eef4fb; color: #185FA5; }

/* ── STAVKE: kartica spiska ──────────────────────────────────────────────────────── */
.dock-sum { font-size: 12.5px; color: #5b6b7b; line-height: 1.4; }
.dock-sum b { color: #16222f; }
.dock-tablehint { font-size: 11.5px; color: #94a3b8; margin: 0 0 8px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .dock-editor { transition: none; } }

/* ── ZBIROVI IZNAD TABELE ────────────────────────────────────────────────────────── */
/* Jedan red sitnog sivog teksta („Ukupno stavki: 3 · Ukupna količina: 95,00 kg") se nije
   čitao — broj je nosio ista slova kao natpis. Ovde svaka jedinica ima svoju pločicu:
   natpis sitno gore, broj krupno ispod, poravnat desno da se cifre porede po koloni.
   Klase su opšte, pa ih može koristiti svaka tabela sa zbirom u zaglavlju. */
.sum-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; margin-right: 10px; }
.sum-chip { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
            padding: 4px 12px 6px; min-width: 76px; text-align: right; line-height: 1.15; }
.sum-chip .k { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .8px;
               text-transform: uppercase; color: #94a3b8; white-space: nowrap; }
.sum-chip .v { display: block; font-size: 16px; font-weight: 800; color: #16222f;
               font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Kilogrami su glavni broj dokumenta — ista plava kojom su i u tabeli istaknute količine. */
.sum-chip .v--kg { color: #185FA5; }
/* UMANJENJE: negativan zbir je narandžast, isto kao negativne količine u redovima tabele. */
.sum-chip .v--minus { color: #c2410c; }
/* Zvezdica uz zbir: podatak fali, broj je manji nego što stvarno jeste. */
.sum-chip .v-flag { color: #c2410c; font-size: 13px; margin-left: 1px; cursor: help; }

/* ── PREČICE TASTATURE: statusna linija u dnu obrasca ────────────────────────────── */
/* Prečica se uči samo ako se VIDI, ali natpisi razbacani po dugmadima odvlače pogled sa
   unosa. Zato su svi tasteri na JEDNOM mestu, u dnu ekrana, sitno i sivo — kao statusna
   linija u poslovnim programima. Lepi se za dno, pa se vidi i dok se spisak skroluje. */
.shortcut-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap;
                gap: 6px 18px; align-items: center; margin: 10px 0 0; padding: 7px 14px;
                background: #f8fafc; border: 1px solid #e8edf2; border-radius: 10px;
                font-size: 11px; color: #94a3b8; }
.shortcut-bar span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.shortcut-bar kbd { font-family: inherit; font-size: 10px; font-weight: 700; color: #5b6b7b;
                    background: #fff; border: 1px solid #dbe3ea; border-bottom-width: 2px;
                    border-radius: 5px; padding: 1px 6px; line-height: 1.5; }
/* Na uskom ekranu nema tastature — traka se sklanja da ne troši prostor. */
@media (max-width: 900px) { .shortcut-bar { display: none; } }