/* ══ DOKOVANI PANEL ZA IZBOR ════════════════════════════════════════════════════════
   Umesto prozora preko celog ekrana, izbor (datum, dobavljač, alat, iznos, tekst) 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.

   Iz predloška je preuzet SAMO RASPORED. Boje i pismo su STech-ovi: kućna plava #185FA5,
   tekst #16222f, linije #e2e8f0 — isto kao wo-doc.css i wine2d2.css. 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 ───────────────────────────── */
/* popup__content 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 (.popup__content).
   Ranije je bio pun plavi okvir sa plavom trakom; to je vikalo 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 „tačku poravnanja" reda za visinu zaglavlja
   (.table--vessels th: 6px + ~16px + 6px + 2px obruba), pa označeni 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; }

/* 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, dobavljač, alat) 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; }

/* ── POLJA U OBRASCU KOJA SE BIRAJU U PANELU ─────────────────────────────────────── */
/* Polje koje se trenutno bira: kućni okvir isti kao na panelu, plus natpis ispod — bez
   toga se ne vidi KOJE od desetak polja panel opslužuje. */
.dock-field { border-color: #d7dde3; }
.dock-field.picking { border-color: #185FA5 !important; box-shadow: 0 0 0 3px rgba(24,95,165,.15); 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: #185FA5 !important; box-shadow: 0 0 0 2px rgba(24,95,165,.15); }
.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; }

/* ── JEDAN OD NEKOLIKO: radio-dugmići (Dock_Radio) ───────────────────────────────── */
/* Kad mogućnosti ima više od tri ili uz njih ide objašnjenje, traka dugmadi (.dock-seg) ne
   valja — natpisi se stisnu i nema gde da stane rečenica. Ovde svaka mogućnost ima svoj red,
   tačku i mesta za objašnjenje. Sama kvačica je sakrivena, a tačku crtamo sami, da izgled ne
   zavisi od pregledača. */
.dock-radio { display: flex; flex-direction: column; gap: 6px; }
.dock-radio-i { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 9px 12px;
                border: 1.5px solid #d7dde3; border-radius: 10px; background: #fff;
                cursor: pointer; line-height: 1.35; transition: border-color .12s, background .12s; }
.dock-radio-i:hover { border-color: #185FA5; background: #f6f9fd; }
.dock-radio-i input { position: absolute; opacity: 0; width: 0; height: 0; }
.dock-radio-i .dot { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
                     border: 2px solid #b8c2cc; background: #fff; }
.dock-radio-i .t { font-size: 12.5px; font-weight: 700; color: #16222f; }
.dock-radio-i .t small { display: block; font-size: 11.5px; font-weight: 500; color: #5b6b7b;
                         line-height: 1.4; margin-top: 2px; }
/* Izabrana: kućna plava, ista koju nose i .dock-seg button.on i „picking" polje. */
.dock-radio-i.on { border-color: #185FA5; background: #eef4fb; }
.dock-radio-i.on .dot { border-color: #185FA5; box-shadow: inset 0 0 0 3px #fff; background: #185FA5; }
/* Tastatura: kad se u grupu uđe tabom, mora da se vidi gde je fokus. */
.dock-radio-i input:focus-visible + .dot { box-shadow: 0 0 0 3px rgba(24, 95, 165, .35); }
.dock-radio-i.on input:focus-visible + .dot { box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px rgba(24, 95, 165, .35); }
.dock-seg button.on { background: #185FA5; color: #fff; }
.dock-seg button:not(.on):hover { background: #eef4fb; color: #185FA5; }

/* ── STAVKE: kartica spiska ──────────────────────────────────────────────────────── */
.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 · Ukupno komada: 95") 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; }
/* Glavni broj dokumenta (na prijemu: količina) — ista kućna plava kojom je količina
   istaknuta i u redovima tabele. */
.sum-chip .v--main { color: #185FA5; }
/* UMANJENJE: negativan zbir je narandžast, isto kao negativne količine u redovima tabele. */
.sum-chip .v--minus { color: #c2410c; }

/* ── 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. */
/* flex: 0 0 auto — u prozoru čarobnjaka traka je dete fleks-kolone (.popup__content), pa bi je
   podrazumevani flex-shrink stisnuo kad spisak stavki naraste. */
.shortcut-bar { position: sticky; bottom: 0; z-index: 5; flex: 0 0 auto; 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: #7c8b9a; line-height: 1.4; }
.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; } }

/* ── „POGLEDAJ OVDE" ──────────────────────────────────────────────────────────────────────
   Klik na polje u obrascu otvara izbor u panelu DESNO. Panel se pri tom ne pomera, pa se lako
   ne primeti da se nešto desilo — naročito kad je već bio otvoren za drugo polje. Zato panel
   tri puta blago pulsira okvirom kad počne da opslužuje novo polje.

   Sloj je iznad sadržaja ali ne hvata klik (pointer-events:none) i ne pomera ništa — animira se
   samo okvir i vrlo blaga podloga, ne veličina panela. */
.dock-card { position: relative; }
.dock-attn {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    border-radius: 14px;
    animation: dock-attn 620ms ease-out 3;
}
@keyframes dock-attn {
    0%   { box-shadow: inset 0 0 0 0 rgba(58,173,174,0);    background: rgba(58,173,174,0); }
    35%  { box-shadow: inset 0 0 0 3px rgba(58,173,174,.55); background: rgba(58,173,174,.09); }
    100% { box-shadow: inset 0 0 0 0 rgba(58,173,174,0);    background: rgba(58,173,174,0); }
}
/* Ko je u sistemu isključio animacije, taj ih ne dobija ni ovde. */
@media (prefers-reduced-motion: reduce) {
    .dock-attn { animation: none; }
}