/* v2.8: vlastiti raspored tablica, odvojen od dvostupcane telemetrije. */
.container {max-width:1600px}
.middle-section {grid-template-columns:minmax(0,1fr) 290px}
.graph-card {min-width:0}
.middle-section.tables-wide {grid-template-columns:minmax(0,1fr)}
.tables-wide>.telemetry-card {display:none}
.pane-nav {display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap}
.pane-nav .btn {font-size:12px;padding:5px 11px;box-shadow:none}
.pane-nav .pane-title {font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.pane-nav .telemetry-toggle {background:transparent;color:var(--muted);border:1px solid var(--stroke-strong)}
/* Razmaci su namjerno tijesni: sve iznad tablice jede mjesto redovima.
   Vrijednosti su zajednicke za sva tri taba (Log, Drops, Outputs). */
.v28-pane {display:none;flex:1;min-height:0;flex-direction:column;gap:5px}
.v28-toolbar {display:grid;grid-template-columns:minmax(170px,1fr) minmax(150px,.8fr) minmax(170px,1.2fr) auto;gap:7px 9px;align-items:end;background:rgba(7,15,28,.5);border:1px solid var(--stroke);border-radius:9px;padding:7px 9px}
.v28-field {display:flex;flex-direction:column;gap:2px;min-width:0;font-size:10px;color:var(--muted);letter-spacing:.04em}
.v28-field input,.v28-field select,.v28-footer select {box-sizing:border-box;width:100%;min-height:27px;color:var(--text);background:#101c30;border:1px solid #33425a;border-radius:6px;padding:3px 7px;font:12px 'Sora',sans-serif;color-scheme:dark;letter-spacing:0}
.v28-field input:focus,.v28-field select:focus {outline:2px solid var(--accent);outline-offset:1px}
.v28-field input::placeholder {color:#7d90aa}
.v28-custom {display:none;gap:7px;margin-top:2px}
.v28-custom.visible {display:flex}
.v28-custom label {flex:1;min-width:0;font-size:10px}
.v28-custom input {margin-top:2px;font-size:11px}
.v28-tools {display:flex;gap:5px;align-items:center}
.v28-tools .btn,.v28-footer .btn {padding:6px 9px;box-shadow:none;font-size:11px;white-space:nowrap}
.v28-tools .btn.outline {border:1px solid #40516c;background:transparent;color:var(--text)}
.v28-caption {display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:15px;color:var(--muted);font-size:11px}
.v28-caption strong {color:var(--text);font-weight:500}
/* opis taba stoji u istom redu kao brojac - zasebni red je bio cisti gubitak visine */
.v28-caption .v28-about {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v28-live {display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer}
.v28-live input {accent-color:var(--accent)}
/* v2.9: traka zabrana - iznad tablice, u okviru, da se ne moze promasiti.
   Prazna se NE prikazuje (bez class="visible"), pa ne troši visinu. */
.v28-bans {display:none;border:1px solid #6d2740;background:rgba(255,79,122,.07);border-radius:9px;padding:7px 9px}
.v28-bans.visible {display:block}
.v28-bans-title {font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#ff9bb2;margin-bottom:4px}
.v28-bans table {width:100%;border-collapse:collapse;font-size:12px}
.v28-bans td {padding:2px 8px 2px 0;border:0;vertical-align:middle}
.v28-bans td.actions {text-align:right;width:70px}
.v28-bans .mono {font-family:ui-monospace,SFMono-Regular,Menlo,monospace;width:140px}
#logBansBadge {font-weight:600;letter-spacing:0}
.v28-message {font-size:12px;color:var(--warning);padding:5px 9px;background:rgba(243,162,27,.08);border-radius:6px;display:none}
.v28-message:not(:empty) {display:block}
.v28-scroll {flex:1;min-height:0;overflow:auto;border:1px solid var(--stroke);border-radius:9px;scrollbar-color:#3a4c65 transparent}
.v28-table {width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:12px;color:var(--text)}
/* border-box je OBAVEZAN: bez njega zadana sirina stupca ne ukljucuje padding,
   pa je svaki stupac bio 20 px siri od izracunatog i tablica je prelazila prozor */
.v28-table th,.v28-table td {box-sizing:border-box}
/* overflow:hidden je OBAVEZAN: bez njega naslov s nowrap razvuce stupac preko
   zadane sirine i tablica prelazi sirinu prozora (v2.9) */
.v28-table th {position:sticky;top:0;z-index:2;background:#17243a;color:#a8bbd1;text-align:left;font-weight:500;font-size:10px;letter-spacing:.035em;border-bottom:1px solid #34445c;height:27px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v28-table th button {display:block;background:transparent;border:0;padding:0;color:inherit;cursor:pointer;font:inherit;text-align:inherit;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v28-table th button:hover {color:var(--accent)}
/* v2.9: hvatiste za razvlacenje stupca (dvoklik vraca zadanu sirinu) */
.v28-grip {position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:3}
.v28-grip::after {content:"";position:absolute;top:7px;bottom:7px;left:4px;width:1px;background:#3c4e66}
.v28-grip:hover::after {left:3px;width:3px;background:var(--accent)}
body.v28-resizing {cursor:col-resize;user-select:none}
.v28-table td {padding:3px 10px;border-bottom:1px solid rgba(100,125,155,.12);vertical-align:middle;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.v28-table tbody>tr:nth-child(even) {background:rgba(120,150,190,.025)}
.v28-table tbody>tr:hover {background:rgba(106,168,255,.055)}
.v28-table .num {text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.v28-table .mono {font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;font-size:12px}
.v28-table .muted,.v28-muted {color:#8a9db6}
/* datum / remote port stoje u ISTOM redu uz glavnu vrijednost - dva reda po
   celiji su redove cinila dvostruko visima */
.v28-table .time-date {font-size:10px;color:#8a9db6;margin-left:6px;white-space:nowrap}
.v28-table .time-clock {font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.v28-table .name {white-space:nowrap;font-weight:500}
.v28-table .actions {overflow:visible;text-align:right;white-space:nowrap}
.v28-badge {display:inline-flex;align-items:center;gap:5px;border-radius:5px;padding:1px 6px;font-size:10px;white-space:nowrap;background:rgba(132,151,180,.12);color:#a9b9ce}
.v28-badge.good {color:#57dfaa;background:rgba(16,185,129,.1)}
.v28-badge.warn {color:#f6c567;background:rgba(243,162,27,.1)}
.v28-badge.bad {color:#ff7f9b;background:rgba(255,79,122,.1)}
.v28-table .drop-bad {color:#ff7f9b;font-weight:600}
.v28-action {background:transparent;border:1px solid #354860;border-radius:5px;padding:2px 7px;color:#b9ccdf;font:10px 'Sora',sans-serif;cursor:pointer;white-space:nowrap}
.v28-action:hover {color:var(--accent);border-color:var(--accent)}
.v28-action.danger {color:#ff9bb2}
.v28-action:disabled {opacity:.35;cursor:default}
.v28-empty {text-align:center;padding:34px 15px!important;color:#8a9db6;font-size:13px}
.v28-empty strong {display:block;color:var(--text);font-weight:500;margin-bottom:6px}
.v28-footer {display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:var(--muted)}
.v28-footer>div {display:flex;gap:7px;align-items:center}
.v28-footer select {width:65px;min-height:24px;font-size:11px;padding:2px}
.v28-footer .btn {background:transparent;border:1px solid var(--stroke-strong);color:var(--text);padding:3px 9px}
.v28-footer button:disabled {opacity:.3;cursor:default}
.v28-summary {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.v28-stat {border:1px solid var(--stroke);background:rgba(7,15,28,.35);border-radius:8px;padding:4px 9px}
.v28-stat span {display:block;font-size:10px;color:#8a9db6;margin-bottom:1px}
.v28-stat strong {font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
/* v2.9: kucica Total drops je gumb (potvrda alarma), pa mora izgledati kao ostale */
button.v28-stat {width:100%;text-align:left;font:inherit;color:var(--text);cursor:pointer}
button.v28-stat:focus-visible {outline:2px solid var(--accent);outline-offset:1px}
/* porast broja: crvena podloga koja trepti dok se ne klikne */
@keyframes v28-alarm {
    0%,49% {background:rgba(255,79,122,.34);border-color:#ff4f7a}
    50%,100% {background:rgba(255,79,122,.07);border-color:#5d2234}
}
.v28-stat.alarm {animation:v28-alarm 1s steps(1,end) infinite}
.v28-stat.alarm span {color:#ffc2d0}
.v28-stat.alarm strong {color:#ff93ab}
@media(prefers-reduced-motion:reduce){.v28-stat.alarm{animation:none;background:rgba(255,79,122,.3);border-color:#ff4f7a}}
.v28-stat small {font-size:10px;color:var(--muted);font-weight:400;margin-left:4px}
.v28-menu {display:inline-block;position:relative;text-align:left}
.v28-menu summary {list-style:none;cursor:pointer}
.v28-menu summary::-webkit-details-marker {display:none}
.v28-menu[open] .v28-menu-items {position:fixed;z-index:50;min-width:160px;padding:5px;background:#1c2c43;border:1px solid #46617f;border-radius:8px;box-shadow:0 12px 24px #0008}
.v28-menu-items button {display:block;width:100%;text-align:left;padding:8px;background:none;border:0;border-radius:4px;color:var(--text);font:11px 'Sora',sans-serif;cursor:pointer}
.v28-menu-head {padding:4px 8px 6px;font-size:10px;color:#8a9db6;border-bottom:1px solid #35495f;margin-bottom:4px;white-space:nowrap}
.v28-table td.actions .v28-badge.bad {cursor:pointer}
.v28-menu-items button:hover {background:#2c4260}
.v28-menu-items button.danger {color:#ff9bb2}
.v28-detail td {padding:8px 16px;background:#0d1a2c;border-bottom:1px solid #34445c}
.v28-detail table {width:100%;border-collapse:collapse;font-size:11px}
.v28-detail table th {position:static;height:22px;background:transparent;padding:3px 8px}
.v28-detail table td {padding:3px 8px;border:0;background:transparent}
.v28-detail-title {font-size:11px;color:var(--muted);margin-bottom:5px}
/* v2.9: prozor Setup Server je bio 50 % sirine ekrana (polja 756 px za broj
   porta!) i visi od ekrana, pa su donji gumbi ispadali. Sada je uzi, ne prelazi
   88 % visine i sam se skrola. */
.modal {overflow:auto}
.modal-content {width:min(580px,92vw);margin:4vh auto;max-height:88vh;overflow:auto;padding:16px 18px;text-align:left}
.modal-content h2 {font-size:16px}
/* v2.9: prozor Setup Server - jedan stil za sva polja umjesto desetak razlicitih
   inline stilova; raspored je sada ULAZ -> ULAZNO SIFRIRANJE -> IZLAZ ->
   IZLAZNO SIFRIRANJE -> BROJ IZLAZA -> PRO */
.v28-setup {text-align:left}
.v28-setup .fld {margin-bottom:9px}
.v28-setup .lbl {display:block;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:4px}
.v28-setup input[type=number],.v28-setup input[type=text],.v28-setup select {width:100%;box-sizing:border-box;border-radius:9px;padding:7px 9px;border:1px solid var(--stroke);background:rgba(15,23,42,.6);color:var(--text);font-size:13px}
.v28-setup input:focus,.v28-setup select:focus {outline:2px solid var(--accent);outline-offset:1px}
.v28-setup .hint {color:var(--muted);font-size:10px;margin-top:3px;line-height:1.45}
.v28-setup .box {border:1px solid var(--stroke);border-radius:9px;padding:9px 10px;margin-bottom:9px;background:rgba(7,15,28,.4)}
.v28-setup .box>.lbl {color:#cfe0f2}
.v28-setup .pro {border-color:#2f6f6b;background:rgba(57,198,190,.06)}
.v28-setup .pro>.lbl {color:var(--accent)}
.v28-setup .chk {display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text);margin-bottom:6px;cursor:pointer}
.v28-setup .chk input {flex:none}
.v28-setup .row {display:flex;gap:6px;align-items:center}
.v28-setup .row .btn {white-space:nowrap;padding:6px 10px;font-size:11px}
.v28-setup .grid {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.v28-setup .grid label {font-size:11px;color:var(--muted)}
.v28-setup .grid input {width:84px}
.v28-setup hr {border:0;border-top:1px solid var(--stroke);margin:9px 0}
.v28-setup .acts {display:flex;gap:8px;justify-content:center;margin-top:12px}
/* v2.9: onemoguceno spremanje kad je kombinacija preko granice gledatelja */
.modal-content .btn:disabled {opacity:.4;cursor:not-allowed;box-shadow:none}
.v28-toast {position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:11px 18px;background:#244a45;border:1px solid #51b8a1;border-radius:8px;color:#e1fff8;font-size:12px;z-index:20000;box-shadow:0 8px 30px #0008}
/* min-width tablice postavlja v28.js iz izracunatih sirina stupaca (v2.9) */
@media(max-width:1100px){.v28-toolbar{grid-template-columns:1fr 1fr 1fr}.v28-tools{grid-column:1/-1}.middle-section{grid-template-columns:minmax(0,1fr) 250px}}
@media(max-width:768px){.middle-section{grid-template-columns:minmax(0,1fr)}.v28-toolbar{grid-template-columns:1fr}.v28-tools{flex-wrap:wrap}.v28-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.v28-scroll{max-height:65vh;min-height:220px}.v28-custom{flex-wrap:wrap}.pane-nav .pane-title{width:100%}.v28-footer{flex-wrap:wrap}}