/* Алат за коначне аутомате — изглед усклађен са сајтом уџбеника (боје ФОН логотипа) */
:root {
  --teget: #1a2f5a; --magenta: #c53d95; --tirkiz: #38ba9b; --lavanda: #8680bc; --zlato: #fcb94d; --koral: #f1716c;
  --mastilo: #1e2a44; --tiho: #6b7285; --linija: #dfe2ec; --pozadina: #f6f7fb;
  --traka: linear-gradient(90deg, #c53d95 0 20%, #8680bc 20% 40%, #38ba9b 40% 60%, #fcb94d 60% 80%, #f1716c 80% 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: Inter, "Segoe UI", system-ui, sans-serif; color: var(--mastilo); background: white; }
#alat { display: flex; flex-direction: column; height: 100vh; min-height: 560px; }
button, select, input, textarea { font: inherit; }
button, .dugmad-vrh a {
  font-size: .8rem; font-weight: 600; padding: .38rem .7rem; border: 1px solid var(--linija); background: white;
  color: var(--mastilo); cursor: pointer; text-decoration: none; white-space: nowrap;
}
button:hover, .dugmad-vrh a:hover { border-color: var(--lavanda); color: #5b4fa8; }
button.aktivno { background: var(--teget); border-color: var(--teget); color: white; }

.traka-vrh { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--teget); color: white; padding: .5rem 1rem; position: relative; }
.traka-vrh::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--traka); }
.logo { font-weight: 700; font-size: 1rem; }
.logo span { font-weight: 400; font-size: .78rem; opacity: .75; margin-left: .5rem; }
.dugmad-vrh { display: flex; gap: .3rem; flex-wrap: wrap; }
.dugmad-vrh button, .dugmad-vrh a { background: rgba(255,255,255,.1); color: white; border-color: rgba(255,255,255,.3); }
.dugmad-vrh button:hover, .dugmad-vrh a:hover { background: rgba(255,255,255,.22); color: white; }

#tabovi { display: flex; align-items: flex-end; gap: 2px; padding: .7rem .8rem 0; background: var(--pozadina); border-bottom: 1px solid var(--linija); overflow-x: auto; }
.tab { display: flex; align-items: center; gap: .4rem; padding: .38rem .7rem; border: 1px solid var(--linija); border-bottom: 0;
  background: #eceef5; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.tab.aktivan { background: white; font-weight: 600; box-shadow: inset 0 3px 0 var(--magenta); }
.tab .x { border: 0; background: none; padding: 0 .1rem; font-size: .9rem; color: var(--tiho); }
.tab input { font-size: .82rem; width: 9rem; }

.radni-prostor { flex: 1; display: flex; min-height: 0; }
.platno-okvir { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.alatke { display: flex; gap: .3rem; padding: .45rem .6rem; border-bottom: 1px solid var(--linija); flex-wrap: wrap; }
.alatke .razmak { flex: 1; }
#platno { flex: 1; width: 100%; background:
  radial-gradient(circle, #d9dce6 1px, transparent 1px) 0 0 / 22px 22px, white; outline: none; user-select: none; touch-action: none; }
#statusna { position: absolute; left: .7rem; bottom: .5rem; font-size: .75rem; color: var(--tiho); background: rgba(255,255,255,.85); padding: .15rem .4rem; }

.panel { width: 340px; flex: 0 0 340px; border-left: 1px solid var(--linija); overflow-y: auto; background: #fbfbfd; font-size: .86rem; }
.panel details { border-bottom: 1px solid var(--linija); padding: .55rem .8rem; }
.panel summary { font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tiho); cursor: pointer; margin-bottom: .4rem; }
.panel details.ugnjezdeno { border: 0; padding: .3rem 0 0; }
.panel details.ugnjezdeno summary { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.red { display: flex; gap: .35rem; align-items: center; margin: .35rem 0; flex-wrap: wrap; }
.panel input[type=text], .panel select, .panel textarea { width: 100%; padding: .35rem .5rem; border: 1px solid var(--linija); background: white; }
.panel label { display: flex; align-items: center; gap: .4rem; width: 100%; }
.panel label.cb { width: auto; }
.tiho { color: var(--tiho); }
#rec, #vise-reci { font-family: "JetBrains Mono", Consolas, monospace; }
#traka-reci { font-family: "JetBrains Mono", Consolas, monospace; font-size: 1.1rem; letter-spacing: .12em; margin: .4rem 0; min-height: 1.6em; }
#traka-reci .procitano { color: var(--tiho); }
#traka-reci .tekuci { background: var(--magenta); color: white; padding: 0 .1em; }
#rezultat-sim.prihvata { color: #1f8a6e; font-weight: 700; }
#rezultat-sim.odbija { color: #c0392b; font-weight: 700; }
#rezultati-testa table, #tablica table { border-collapse: collapse; width: 100%; margin-top: .4rem; font-size: .82rem; }
#rezultati-testa td, #tablica td, #tablica th { border: 1px solid var(--linija); padding: .2rem .4rem; text-align: center; }
#tablica th { background: #eef0f6; }
.da { color: #1f8a6e; font-weight: 700; } .ne { color: #c0392b; font-weight: 700; }
code { font-family: "JetBrains Mono", Consolas, monospace; background: #eef0f6; padding: 0 .25rem; }
kbd { font-family: "JetBrains Mono", Consolas, monospace; font-size: .8em; border: 1px solid var(--linija); border-bottom-width: 2px; padding: 0 .3rem; background: white; }

.pomoc { position: fixed; inset: 0; background: rgba(20, 26, 51, .45); display: flex; align-items: center; justify-content: center; z-index: 10; }
.pomoc[hidden] { display: none; }
.pomoc-sadrzaj { background: white; max-width: 720px; max-height: 88vh; overflow-y: auto; padding: 1.2rem 1.6rem; position: relative; font-size: .9rem; line-height: 1.55; }
.pomoc-sadrzaj h2 { margin-top: 0; color: var(--teget); }
.pomoc-sadrzaj h3 { color: #5b4fa8; margin-bottom: .3rem; }
.pomoc .zatvori { position: absolute; right: .8rem; top: .8rem; }

/* елементи цртежа */
.stanje circle { fill: white; stroke: var(--mastilo); stroke-width: 1.8; }
.stanje.izabrano circle.spoljni { stroke: var(--magenta); stroke-width: 3; }
.stanje.tekuce circle.spoljni { fill: #fbe3f1; stroke: var(--magenta); stroke-width: 3; }
.stanje text { font-family: Cambria, "Times New Roman", serif; font-style: italic; font-size: 17px; fill: var(--mastilo); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.prelaz path.linija { fill: none; stroke: var(--mastilo); stroke-width: 1.7; }
.prelaz path.pogodak { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.prelaz.izabrano path.linija { stroke: var(--magenta); stroke-width: 2.6; }
.prelaz.upotrebljen path.linija { stroke: var(--tirkiz); stroke-width: 3; }
.prelaz text { font-family: Cambria, "Times New Roman", serif; font-style: italic; font-size: 16px; fill: var(--mastilo); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: white; stroke-width: 4px; }
.prelaz.izabrano text { fill: var(--magenta); }
.pocetna-strelica { stroke: var(--mastilo); stroke-width: 1.8; fill: none; }
.privremena { stroke: var(--lavanda); stroke-width: 1.8; stroke-dasharray: 5 4; fill: none; }

@media (max-width: 900px) {
  .radni-prostor { flex-direction: column; }
  .panel { width: 100%; flex: 0 0 auto; max-height: 45vh; border-left: 0; border-top: 1px solid var(--linija); }
  #platno { min-height: 420px; }
}