/*
 * Zajednicke komponente: gornja traka, paneli, tabele, oznake, kontrole.
 * Sve deli isti jezik — ostre ivice, vlasasta linija, mono za brojeve.
 */

/* ---------------------------------------------------------------- TRAKA */

.traka {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 22px;
  height: var(--traka-h);
  padding: 0 20px;
  background: rgba(8, 9, 10, 0.92);
  border-bottom: 1px solid var(--linija);
  backdrop-filter: blur(8px);
}

.traka__marka {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}

.traka__marka b {
  font-size: 1.02rem;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tekst);
}

/* Kursor koji trepce — jedini ukras u traci, drzi "terminal" ton */
.traka__marka i {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--acid);
  animation: kucaj 1.15s steps(2, start) infinite;
}

@keyframes kucaj { 50% { opacity: 0; } }

.traka__podnaslov {
  font-family: var(--pismo-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--tekst-3);
  text-transform: uppercase;
}

.traka__meni {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-wrap: wrap;
}

.meni-veza {
  position: relative;
  padding: 7px 12px;
  font-family: var(--pismo-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tekst-2);
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.meni-veza:hover { color: var(--tekst); border-color: var(--linija-2); }

.meni-veza[aria-current="page"] {
  color: var(--acid);
  border-color: rgba(212, 247, 51, 0.35);
  background: var(--acid-mek);
}

.meni-veza--izlaz { color: var(--tekst-3); }
.meni-veza--izlaz:hover { color: var(--alarm); border-color: rgba(255, 68, 56, 0.4); }

/* Sat: poslednje azuriranje uvek u vidnom polju */
.traka__sat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 18px;
  border-left: 1px solid var(--linija);
  font-family: var(--pismo-mono);
  font-size: 0.7rem;
  color: var(--tekst-2);
  white-space: nowrap;
}

.traka__sat span { color: var(--tekst); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ LED CHIP */

.led-red { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.led {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--linija);
  background: var(--ploca);
  font-family: var(--pismo-mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-2);
}

.led::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--led);
  box-shadow: 0 0 8px currentColor;
  color: var(--led);
}

.led--radi::before { background: var(--led); color: var(--led); }
.led--delimicno::before { background: var(--jantar); color: var(--jantar); }
.led--pao {
  border-color: rgba(255, 68, 56, 0.45);
  color: #ffbdb8;
}
.led--pao::before { background: var(--alarm); color: var(--alarm); animation: puls 1.1s infinite; }

@keyframes puls { 50% { opacity: 0.25; } }

/* -------------------------------------------------------------- PANEL */

.panel {
  background: var(--ploca);
  border: 1px solid var(--linija);
}

.panel__glava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linija);
  background: linear-gradient(180deg, var(--ploca-2), var(--ploca));
}

.panel__glava h2, .panel__glava h3 {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  font-stretch: 112%;
}

.panel__telo { padding: 16px; }

/* Sklopivi panel — ikonica se okrece, telo se otvara po visini */
.sklopivo { cursor: pointer; user-select: none; }
.sklopivo:hover { background: var(--sloj); }
.collapse-icon { font-size: 0.7rem; color: var(--tekst-3); transition: transform 0.3s; }
.collapse-icon.open { transform: rotate(180deg); color: var(--acid); }
.collapsible-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.collapsible-body.open { max-height: 2400px; overflow-y: auto; }

/* ------------------------------------------------------------- TABELA */

.tabela { width: 100%; border-collapse: collapse; }

.tabela th {
  padding: 9px 14px;
  text-align: left;
  font-family: var(--pismo-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-3);
  border-bottom: 1px solid var(--linija-2);
  white-space: nowrap;
  background: var(--ploca);
  position: sticky;
  top: 0;
  z-index: 2;
}

.tabela td {
  padding: 10px 14px;
  font-size: 0.84rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  vertical-align: middle;
}

/* Datum se nikad ne prelama u dva reda */
.tabela td.mono { white-space: nowrap; }

.tabela tbody tr { transition: background 0.12s; }
.tabela tbody tr:hover td { background: var(--ploca-2); }
.tabela tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--acid); }
.tabela tr:last-child td { border-bottom: none; }

.tabela .broj {
  text-align: right;
  font-family: var(--pismo-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabela .presudan td { color: #ffb0a8; font-weight: 700; }

/* -------------------------------------------------------------- ZNACI */

/* Znak = pravougaona oznaka bez ispune; boja nosi znacenje, ne ukras */
.znak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--linija-2);
  font-family: var(--pismo-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--tekst-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.znak--cena { color: var(--tekst); border-color: var(--linija-2); background: var(--sloj); font-weight: 600; }
.znak--acid { color: var(--acid); border-color: rgba(212, 247, 51, 0.4); background: var(--acid-mek); }
.znak--ledena { color: var(--ledena); border-color: rgba(92, 200, 255, 0.3); }
.znak--ljubicasta { color: var(--ljubicasta); border-color: rgba(157, 140, 255, 0.35); }
.znak--jantar { color: var(--jantar); border-color: rgba(255, 176, 32, 0.35); }
.znak--alarm { color: #ff8078; border-color: rgba(255, 68, 56, 0.4); }
.znak--led { color: var(--led); border-color: rgba(53, 209, 122, 0.35); }
.znak--tiho { color: var(--tekst-3); border-color: var(--linija); }

/* ------------------------------------------------------------- DUGMAD */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--linija-2);
  background: var(--sloj);
  color: var(--tekst);
  font-family: var(--pismo-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
}

.dugme:hover { border-color: var(--tekst-3); background: var(--ploca-2); }
.dugme:active { transform: translateY(1px); }
.dugme:disabled { opacity: 0.45; cursor: not-allowed; }

.dugme--glavno {
  background: var(--acid);
  border-color: var(--acid);
  color: #0d1000;
}
.dugme--glavno:hover { background: #e2ff52; border-color: #e2ff52; color: #0d1000; }

.dugme--obris { background: transparent; }
.dugme--obris:hover { border-color: var(--acid); color: var(--acid); }

.dugme--alarm { background: transparent; border-color: rgba(255, 68, 56, 0.5); color: #ff8078; }
.dugme--alarm:hover { background: rgba(255, 68, 56, 0.12); border-color: var(--alarm); color: #ffb0a8; }

.dugme--puno-sirine { width: 100%; }

/* Cip = prekidac filtera; aktivno stanje je jedino sto svetli */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--linija);
  background: var(--ploca);
  font-family: var(--pismo-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-2);
  cursor: pointer;
  transition: all 0.15s;
}

.filter-chip:hover { border-color: var(--linija-2); color: var(--tekst); }

.filter-chip.active {
  background: var(--acid);
  border-color: var(--acid);
  color: #0d1000;
  font-weight: 600;
}

/* ------------------------------------------------------------- POLJA */

.polje {
  width: 100%;
  padding: 9px 12px;
  background: var(--noc);
  border: 1px solid var(--linija);
  color: var(--tekst);
  font-family: var(--pismo-mono);
  font-size: 0.8rem;
}

.polje::placeholder { color: var(--tekst-3); }
.polje:focus { outline: none; border-color: var(--acid); box-shadow: inset 0 0 0 1px rgba(212, 247, 51, 0.25); }

select.polje { cursor: pointer; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; }

/* Klizac: pravougaoni klizni element, staza kao merna skala */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: ew-resize;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--sloj);
  border-top: 1px solid var(--linija);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 18px;
  margin-top: -8px;
  background: var(--acid);
  border: none;
  box-shadow: 0 0 12px rgba(212, 247, 51, 0.35);
}

input[type="range"]::-moz-range-track { height: 4px; background: var(--sloj); }
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 18px; border: none; border-radius: 0;
  background: var(--acid);
}

/* Kvadratna potvrda umesto sistemske */
.stavka-potvrde {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--tekst-2);
  cursor: pointer;
  padding: 3px 0;
  transition: color 0.12s;
}

.stavka-potvrde:hover { color: var(--tekst); }

.stavka-potvrde input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid var(--linija-2);
  background: var(--noc);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: all 0.12s;
}

.stavka-potvrde input[type="checkbox"]:checked {
  background: var(--acid);
  border-color: var(--acid);
}

.stavka-potvrde input[type="checkbox"]:checked::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #0d1000;
}

/* --------------------------------------------------------- OBAVESTENJA */

.obavestenje {
  border: 1px solid var(--linija-2);
  border-left-width: 3px;
  background: var(--ploca);
  padding: 13px 16px;
  margin-bottom: 12px;
  font-size: 0.86rem;
}

.obavestenje__naslov {
  font-family: var(--pismo-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.obavestenje--alarm { border-left-color: var(--alarm); background: linear-gradient(90deg, rgba(255, 68, 56, 0.08), transparent 55%); }
.obavestenje--alarm .obavestenje__naslov { color: #ff8078; }

.obavestenje--upozorenje { border-left-color: var(--jantar); background: linear-gradient(90deg, rgba(255, 176, 32, 0.08), transparent 55%); }
.obavestenje--upozorenje .obavestenje__naslov { color: var(--jantar); }

.obavestenje--info { border-left-color: var(--ledena); }
.obavestenje--info .obavestenje__naslov { color: var(--ledena); }

.obavestenje--ok { border-left-color: var(--led); }
.obavestenje--ok .obavestenje__naslov { color: var(--led); }

/* ------------------------------------------------------------- SAVET */

.info-tooltip { position: relative; display: inline-flex; cursor: help; margin-left: 5px; }

.info-tooltip .tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--linija-2);
  color: var(--tekst-3);
  font-family: var(--pismo-mono);
  font-size: 0.6rem;
  font-weight: 700;
}

.info-tooltip:hover .tooltip-icon { border-color: var(--acid); color: var(--acid); }

.info-tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 200;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  padding: 9px 11px;
  background: var(--sloj);
  border: 1px solid var(--linija-2);
  border-left: 2px solid var(--acid);
  color: var(--tekst-2);
  font-family: var(--pismo);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  text-align: left;
  transition: opacity 0.18s;
}

.info-tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }

/* ------------------------------------------------------------- MODAL */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4, 5, 6, 0.82);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
}

.modal-overlay.active { display: flex; }

.modal {
  width: 560px;
  max-width: 92vw;
  background: var(--ploca);
  border: 1px solid var(--linija-2);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}

.modal__glava {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linija);
  background: var(--ploca-2);
}

.modal__telo { padding: 18px; }

.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--acid);
  box-shadow: 0 0 10px var(--acid);
  animation: puls 1.2s infinite;
}

/* Napredak kao niz blokova, ne kao zaobljena traka */
.napredak {
  position: relative;
  height: 26px;
  background: var(--noc);
  border: 1px solid var(--linija);
  overflow: hidden;
  margin-bottom: 12px;
}

.napredak__ispuna {
  height: 100%;
  width: 0;
  background:
    repeating-linear-gradient(90deg, var(--acid) 0 10px, rgba(212, 247, 51, 0.55) 10px 14px);
  transition: width 0.4s ease;
}

.napredak__tekst {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pismo-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--tekst);
  mix-blend-mode: difference;
}

.modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linija); margin-bottom: 14px; }
.modal-stat { background: var(--noc); padding: 11px; text-align: center; }
.modal-stat .mv { font-family: var(--pismo-mono); font-size: 1.15rem; font-weight: 700; color: var(--acid); }
.modal-stat .ml { font-family: var(--pismo-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-3); margin-top: 3px; }

.modal-log {
  background: var(--noc);
  border: 1px solid var(--linija);
  padding: 10px 12px;
  font-family: var(--pismo-mono);
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--tekst-2);
  max-height: 96px;
  overflow-y: auto;
  margin-bottom: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ------------------------------------------------------------- PRAZNO */

.prazno {
  padding: 56px 20px;
  text-align: center;
  border: 1px dashed var(--linija-2);
  color: var(--tekst-3);
  font-family: var(--pismo-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.prazno::before {
  content: "[ NEMA PODATAKA ]";
  display: block;
  margin-bottom: 10px;
  color: var(--linija-2);
  letter-spacing: 0.24em;
}