/* ══ 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. */
.dock-list-table { flex: 1 1 auto; min-height: 0; overflow: auto; align-items: flex-start; }
.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; }

/* 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; }
.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; } }