/* Pogon — industrijska komandna ploča. Tri teme preko data-theme na . */ :root, html[data-theme='ploca'] { --bg: #d9d6c9; --panel: #edebe1; --panelSoft: #e3e0d3; --ink: #1c1b16; --dim: #6e6a5b; --border: #bdb9a7; --accent: #e04e12; --accentInk: #fff6ef; --lampOk: #3f9b49; --lampBusy: #e8a21a; } html[data-theme='smjena'] { --bg: #15171a; --panel: #1f2226; --panelSoft: #23262b; --ink: #ece7da; --dim: #8e8a7c; --border: #31353b; --accent: #ffb23e; --accentInk: #1a1206; --lampOk: #5bc069; --lampBusy: #ffb23e; } html[data-theme='nacrt'] { --bg: #16365f; --panel: #1c4273; --panelSoft: #1a3d6a; --ink: #eaf2fb; --dim: #9fb6d4; --border: #2e5a92; --accent: #f2c14e; --accentInk: #1f1a05; --lampOk: #6bd08a; --lampBusy: #f2c14e; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: 'Saira', system-ui, sans-serif; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; } h1, h2, h3, .naslov { font-family: 'Saira Condensed', 'Saira', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .mono, .oznaka, .status, .datum { font-family: 'IBM Plex Mono', monospace; } a { color: var(--accent); } /* ----- Gumbi ----- */ .btn { font-family: 'Saira Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--accent); color: var(--accentInk); border: 1px solid var(--accent); border-radius: 4px; padding: 10px 16px; font-size: 15px; cursor: pointer; transition: filter 0.12s ease; } .btn:hover { filter: brightness(1.06); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn.sek { background: transparent; color: var(--ink); border: 1px solid var(--border); } .btn.opasno { background: transparent; color: #c0392b; border-color: #c0392b; } input, textarea, select { font-family: 'Saira', sans-serif; font-size: 16px; background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; width: 100%; } textarea { resize: vertical; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); } /* ----- Zaglavlje ----- */ .zaglavlje { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; } .logo { font-family: 'Saira Condensed', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.12em; cursor: pointer; } .logo .b { color: var(--accent); } .spacer { flex: 1; } /* Statusna lampica */ .lampa { width: 13px; height: 13px; border-radius: 50%; background: var(--lampOk); box-shadow: 0 0 6px var(--lampOk); display: inline-block; } .lampa.radi { background: var(--lampBusy); box-shadow: 0 0 8px var(--lampBusy); animation: trep 0.9s infinite; } @keyframes trep { 50% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .lampa.radi { animation: none; opacity: 0.85; } } .lampaTekst { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--dim); } /* Prebacivanje tema — kvadratići */ .teme { display: flex; gap: 6px; } .tema-kvadrat { width: 18px; height: 18px; border-radius: 3px; cursor: pointer; border: 2px solid var(--border); } .tema-kvadrat.aktivna { border-color: var(--accent); } .tema-kvadrat[data-t='ploca'] { background: #d9d6c9; } .tema-kvadrat[data-t='smjena'] { background: #15171a; } .tema-kvadrat[data-t='nacrt'] { background: #16365f; } /* ----- Layout ----- */ .omot { max-width: 980px; margin: 0 auto; padding: 18px 16px 80px; } /* Kartice projekata */ .mreza { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 620px) { .mreza { grid-template-columns: 1fr 1fr; } } .kartica { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 16px; cursor: pointer; position: relative; transition: border-color 0.12s ease; } .kartica:hover { border-color: var(--accent); } .kartica .naslov { font-size: 20px; } .kartica .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .znacka { font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 3px; color: var(--dim); text-transform: uppercase; } .datum { font-size: 12px; color: var(--dim); } .obrisi { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--dim); cursor: pointer; font-size: 16px; } .obrisi:hover { color: #c0392b; } .prazno { text-align: center; color: var(--dim); padding: 60px 20px; border: 1px dashed var(--border); border-radius: 8px; } /* Tabovi */ .tabovi { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .tab { font-family: 'Saira Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: none; border: none; color: var(--dim); padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; font-size: 15px; } .tab.aktivan { color: var(--ink); border-bottom-color: var(--accent); } /* Chat */ .razgovor { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; } .balon { padding: 12px 14px; border-radius: 8px; max-width: 88%; white-space: pre-wrap; } .balon.user { background: var(--accent); color: var(--accentInk); align-self: flex-end; border-bottom-right-radius: 2px; } .balon.ai { background: var(--panel); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 2px; } .balon .tko { font-family: 'IBM Plex Mono', monospace; font-size: 10px; opacity: 0.7; display: block; margin-bottom: 4px; } .unos-red { display: flex; gap: 8px; align-items: flex-end; } .unos-red textarea { flex: 1; } /* Radni nalog — graverska pločica */ .nalog-omot { background: var(--panel); border: 2px solid var(--border); border-radius: 6px; padding: 22px; } .nalog-zaglavlje { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px dashed var(--border); padding-bottom: 12px; margin-bottom: 16px; } .nalog-broj { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--dim); } .pecat { font-family: 'Saira Condensed', sans-serif; font-weight: 700; text-transform: uppercase; border: 2px solid var(--accent); color: var(--accent); padding: 4px 10px; border-radius: 4px; transform: rotate(-4deg); letter-spacing: 0.08em; } .nalog-sekcija { margin: 14px 0; } .nalog-sekcija h3 { font-size: 14px; color: var(--dim); margin-bottom: 4px; } .nalog-sekcija ul { margin: 4px 0; padding-left: 20px; } .slogan { font-style: italic; color: var(--dim); } .faza { border-left: 3px solid var(--accent); padding-left: 10px; margin: 8px 0; } /* Prototip */ .proto-okvir { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 6px; background: #fff; } .proto-trake { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; } .proto-trake select { width: auto; flex: 1; min-width: 180px; } /* Toast */ .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; z-index: 100; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; max-width: 90%; } .toast.vidljiv { opacity: 1; } /* Greška + ponovni pokušaj */ .greska-kut { background: var(--panel); border: 1px solid #c0392b; border-radius: 6px; padding: 14px; margin: 10px 0; color: var(--ink); } .greska-kut .btn { margin-top: 10px; } .skriveno { display: none !important; } .tih { color: var(--dim); } .indikator { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--dim); display: flex; align-items: center; gap: 8px; }