GMS Tuzla - Stručni aktivi

Konfiguracija podataka stručnog aktiva

1. Podaci o aktivu

Naziv aktiva

Norma časova

Norma prema pedagoškim standardima u TK.

2. Unos podatka za podjelu časova

Ukupno časova u aktivu predmeta: 0 č

3. Radni list aktiva

<!DOCTYPE html>
<html lang="bs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Podjela časova: {{NAZIV_AKTIVA}}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            {{BOJE_STILOVI}}
            --bg: #f8fafc; --bg-card: #ffffff; --bg-alt: #f1f5f9;
            --text-main: #0f172a; --border: #cbd5e1; --siva-tekst: #64748b;
        }
        body { font-family: 'Inter', sans-serif; background-color: var(--bg); color: var(--text-main); padding: 20px; font-size: 16px; }
        
        .GMS-glavni-naslov { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 20px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .GMS-glavni-naslov h1 { font-size: 27px; color: #0f172a; font-weight: 700; }
        .GMS-glavni-naslov p { font-size: 16px; color: var(--siva-tekst); margin-top: 3px; }
        .grupa-dugmadi-print { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.wrapper { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 440px; gap: 20px; }
        .card { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        
        .sekcija-naslov { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #475569; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px; }
        
        /* PANEL ZA EDITOVANJE KONFIGURACIJE */
        .config-panel { display: none; background: #f8fafc; border: 2px solid #64748b; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
        .config-red-predmeta { background: #fff; border: 1px solid #e2e8f0; padding: 12px; border-radius: 8px; margin-bottom: 10px; display: grid; grid-template-columns: 2fr 1fr 1fr 3fr auto; gap: 10px; align-items: center; }
        .config-red-predmeta input, .config-red-predmeta select { padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; width: 100%; }
        .btn-config-brisi { background: #ef4444; color: #fff; border: none; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; }
        .btn-config-brisi:hover { background: #dc2626; }
        .config-akcije { display: flex; gap: 10px; margin-top: 15px; border-top: 1px solid #e2e8f0; padding-top: 15px; }

.predmet-kontejner { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 15px; }
        .predmet-kartica { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; transition: box-shadow 0.2s; }
        .predmet-kartica:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
        .predmet-info { border-left: 4px solid var(--boja-predmeta, #3b82f6); padding-left: 10px; margin-bottom: 12px; }
        .predmet-ime { font-size: 17px; font-weight: 700; color: #0f172a; }
        .predmet-detalji { font-size: 14px; color: var(--siva-tekst); font-family: 'IBM Plex Mono', monospace; margin-top: 3px; }
        .bedz-tip-nastave { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-left: 5px; text-transform: uppercase; }
        .bedz-tip-nastave.redovna { background: #e0f2fe; color: #0369a1; }
        .bedz-tip-nastave.izborna { background: #fef3c7; color: #b45309; }

/* Detaljna podjela u zbirnom pregledu - na ekranu skupljeno po default-u, na printu uvijek vidljivo */
        #zbirniPregledSadrzaj .kol-detalj { display: none; }
        #zbirniPregledSadrzaj .kol-detalj-red { display: none; }
        #zbirniPregledSadrzaj.detaljno-prikazano .kol-detalj { display: table-cell; }
        #zbirniPregledSadrzaj.detaljno-prikazano .kol-detalj-red { display: table-row; }
        
        .bedz-grupa { display: flex; flex-wrap: wrap; gap: 6px; }
        .class-badge { padding: 7px 12px; font-size: 14px; font-weight: 700; border-radius: 6px; cursor: pointer; user-select: none; transition: all 0.15s ease; border: 1px solid transparent; background: #f8fafc; box-shadow: 0 1px 2px rgba(0,0,0,0.02); text-align: center; font-family: 'IBM Plex Mono', monospace; }
        .class-badge.aktivan-selekcija { opacity: 1 !important; box-shadow: 0 0 0 2px rgba(15,23,42,0.15), 0 2px 4px rgba(0,0,0,0.15) !important; }

.desni-panel { position: sticky; top: 20px; height: calc(100vh - 40px); display: flex; flex-direction: column; gap: 15px; }
        .desni-panel .card { overflow-y: auto; overflow-x: hidden; }
        .lista-nastavnika { padding-right: 4px; }
        
        .nastavnik-kartica { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s; border-left: 4px solid #cbd5e1; }
        .nastavnik-kartica.selektovan { background: #f8fafc; border-color: #0f172a; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
        .nastavnik-glavno { display: flex; justify-content: space-between; align-items: center; }
        .nastavnik-ime { font-size: 17px; font-weight: 600; color: #0f172a; }
        
        .uloge-bedzevi-kontejner { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; margin-bottom: 6px; }
        .bedz-uloga { font-size: 15px; font-weight: 600; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
        .bedz-uloga.razrednik { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
        .bedz-uloga.funkcija { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
        .bedz-uloga.norma-licna { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

.nastavnik-akcije-btn { display: flex; gap: 8px; }
        .mala-akcija-btn { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 16px; padding: 2px; transition: color 0.15s; }
        .mala-akcija-btn:hover { color: #3b82f6; }
        .mala-akcija-btn.brisi:hover { color: #ef4444; }

.progres-kontejner { margin-top: 8px; background: #e2e2e2; height: 6px; border-radius: 3px; overflow: hidden; }
        .progres-bar { height: 100%; width: 0%; transition: width 0.3s; }
        .progres-bar.prekoracenje { background: #ef4444 !important; }
        
        .stat-linija { font-size: 15px; font-family: 'IBM Plex Mono', monospace; color: var(--siva-tekst); margin-top: 4px; display: flex; justify-content: space-between; }
        
        .forma-dodaj { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; background: #f8fafc; border: 1px solid var(--border); padding: 10px; border-radius: 6px; }
        .forma-naslov { font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 5px;}
        .forma-dodaj input[type="text"], .forma-dodaj select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
        .forma-dodaj input[type="number"] { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; width: 85px; }
        .forma-norma-licna-hint { font-size: 11px; color: #94a3b8; margin-top: -2px; }
        .forma-red-opcija { display: flex; align-items: center; gap: 15px; font-size: 13px; font-weight: 500; margin-top: 2px; }
        .forma-red-opcija label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
        .forma-red-opcija input[type="checkbox"] { cursor: pointer; }
        .forma-dodaj button { background: #0f172a; color: #fff; border: none; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; }
        
        .btn-akcija { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid var(--border); background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; color: #334155; }
        .btn-akcija:disabled { opacity: 0.45; cursor: not-allowed; }
        .btn-akcija:disabled:hover { background: #fff; }
        .btn-print-glavni { background: #0f172a; color: #fff; border: none; padding: 8px 16px; font-size: 15px; font-weight: 600; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        .btn-print-sekundarni { background: #475569; color: #fff; border: none; padding: 8px 16px; font-size: 15px; font-weight: 600; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        .btn-config-toggle { background: #4b5563; color: #fff; border: none; padding: 8px 16px; font-size: 15px; font-weight: 600; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        .btn-print-glavni:hover { background: #1e293b; } .btn-print-sekundarni:hover { background: #334155; } .btn-config-toggle:hover { background: #374151; }
        .btn-reset { color: #ef4444; border-color: #fca5a5; } .btn-reset:hover { background: #fef2f2; }
        
        .zauzeta-odjeljenja-lista { font-size: 13px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
        .mini-zauzet-bedz { padding: 3px 8px; background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
        .mini-zauzet-bedz i { color: #ef4444; cursor: pointer; font-size: 14px; }
        
        .tabela-konkurs { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 15px; }
        .tabela-konkurs th, .tabela-konkurs td { border: 1px solid #cbd5e1; padding: 10px 12px; text-align: left; }
        .tabela-konkurs th { background: #f8fafc; font-weight: 600; color: #475569; }

.konkurs-sumarno-naslov { font-size: 13px; font-weight: 700; color: #1e293b; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
        .tabela-konkurs-sumarno { width: 100%; border-collapse: collapse; font-size: 15px; }
        .tabela-konkurs-sumarno th, .tabela-konkurs-sumarno td { border: 1px solid #fde68a; padding: 10px 12px; text-align: left; }
        .tabela-konkurs-sumarno th { background: #fef3c7; font-weight: 700; color: #92400e; }
        .tabela-konkurs-sumarno tbody tr { background: #fffbeb; }
        .tabela-konkurs-sumarno td.kol-sati-sumarno { font-weight: 700; color: #b45309; white-space: nowrap; }
        .konkurs-razdvajac { border: none; border-top: 1px dashed #cbd5e1; margin: 18px 0; }
        .konkurs-detalji-naslov { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }

.glavni-nerasporedeno-bedz { background: #fef2f2; border: 1px solid #fee2e2; padding: 10px 15px; border-radius: 6px; font-size: 15px; font-weight: 700; color: #ef4444; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }

#printPojedinacniKontejner { display: none; background: #fff; }
        .stranica-nastavnika { background: #fff; padding: 20px; margin-bottom: 20px; }
        .print-naslov-nastavnika { font-size: 26px; font-weight: 700; margin-bottom: 5px; border-bottom: 2px solid #000; padding-bottom: 10px; text-transform: uppercase; }
        .print-tabela { width: 100%; border-collapse: collapse; margin-top: 20px; margin-bottom: 30px; }
        .print-tabela th, .print-tabela td { border: 1px solid #000; padding: 10px; text-align: left; font-size: 15px; }
        .print-tabela th { background: #f2f2f2; }
        
        .print-potpisi { margin-top: 60px; display: flex; justify-content: space-between; page-break-inside: avoid; }
        .print-potpisi-linija { border-top: 1px solid #000; width: 220px; text-align: center; font-size: 15px; padding-top: 5px; }

@media (max-width: 1400px) {
            #zbirniPregledSadrzaj > div:last-child table { font-size: 12px !important; }
            #zbirniPregledSadrzaj > div:last-child table th { padding: 6px 3px !important; }
            #zbirniPregledSadrzaj > div:last-child table td { padding: 3px 2px !important; }
        }

@media (max-width: 1200px) { 
            .wrapper { grid-template-columns: 1fr; } 
            .config-red-predmeta { grid-template-columns: 1fr; gap: 5px; }
            .btn-config-brisi { width: 100%; height: 40px; margin-top: 5px; }
            #zbirniPregledSadrzaj > div:last-child { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        }

@media (max-width: 768px) {
            body { padding: 10px; font-size: 14px; }
            .GMS-glavni-naslov { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
            .GMS-glavni-naslov h1 { font-size: 18px; line-height: 1.3; }
            .GMS-glavni-naslov p { font-size: 13px; }
            .grupa-dugmadi-print { flex-direction: column; width: 100%; gap: 8px; }
            .btn-print-glavni, .btn-print-sekundarni, .btn-config-toggle { width: 100%; justify-content: center; font-size: 14px; padding: 10px 12px; }
            .card { padding: 12px; border-radius: 8px; margin-bottom: 12px; }
            .sekcija-naslov { font-size: 13px; }
            .predmet-ime { font-size: 15px; }
            .predmet-detalji { font-size: 12px; }
            .class-badge { padding: 6px 8px; font-size: 12px; }
            .nastavnik-ime { font-size: 14px; }
            .stat-linija { font-size: 13px; }
            .btn-akcija { font-size: 13px; padding: 11px; }
            .glavni-nerasporedeno-bedz { font-size: 13px; padding: 10px 12px; flex-wrap: wrap; }
            .forma-dodaj input[type="text"], .forma-dodaj select { font-size: 16px !important; padding: 10px; }
            .tabela-konkurs-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .tabela-konkurs { font-size: 12px; min-width: 480px; }
            .tabela-konkurs th, .tabela-konkurs td { padding: 7px 8px; }
            #tabelaPredmetaPregled-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            #tabelaPredmetaPregled { font-size: 12px; min-width: 480px; }
            #tabelaPredmetaPregled th, #tabelaPredmetaPregled td { padding: 6px 7px; }
            #tabelaZbirPoPredmetu { font-size: 12px; min-width: 420px; }
            #tabelaZbirPoPredmetu th, #tabelaZbirPoPredmetu td { padding: 6px 7px; }
            
            /* Dinamička tabela na mobilnom */
            #zbirniPregledSadrzaj > div:last-child table { font-size: 10px !important; }
            #zbirniPregledSadrzaj > div:last-child table th { padding: 4px 2px !important; }
            #zbirniPregledSadrzaj > div:last-child table td { padding: 2px 1px !important; }
            #zbirniPregledSadrzaj > div:last-child div { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        }

@media (max-width: 400px) {
            body { padding: 8px; }
            .class-badge { font-size: 11px; padding: 5px 7px; }
            .GMS-glavni-naslov h1 { font-size: 16px; }
            .print-potpisi { flex-direction: column; gap: 30px; }
            .print-potpisi-linija { width: 100%; }
        }
        
        @media print {
            body { background: #fff !important; color: #000 !important; padding: 0 !important; zoom: 0.95; }
            .desni-panel, .forma-dodaj, .btn-akcija, .GMS-glavni-naslov, .mala-akcija-btn, .card .sekcija-naslov i, .glavni-nerasporedeno-bedz, .config-panel { display: none !important; }
            .wrapper { grid-template-columns: 1fr !important; }
            .card { border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 20px; page-break-inside: avoid; }
            .class-badge { border: 1px solid #000 !important; color: #000 !important; background: #fff !important; opacity: 1 !important; }
            .class-badge.aktivan-selekcija { outline: none !important; box-shadow: none !important; transform: none !important; filter: none !important; }
            
            body.print-mod-nastavnik .wrapper, body.print-mod-nastavnik .GMS-glavni-naslov { display: none !important; }
            body.print-mod-nastavnik #printPojedinacniKontejner { display: block !important; }
            .stranica-nastavnika { page-break-after: always; padding: 0 !important; margin: 0 !important; }
            .stranica-nastavnika:last-child { page-break-after: avoid; }

#zbirniPregledCard { page-break-inside: auto; }
            #zbirniPregledSadrzaj table { page-break-inside: auto; width: 100% !important; border-collapse: collapse !important; }
            #zbirniPregledSadrzaj tbody.zbirni-blok-nastavnika { page-break-inside: avoid; }
            #zbirniPregledSadrzaj thead { display: table-header-group; }
            
            /* KRITIČNO - Sve tabele pri ispisu trebaju imati linije */
            #zbirniPregledSadrzaj > div table { 
                border: 1px solid #000 !important;
                border-collapse: collapse !important;
                width: 100% !important;
                margin-bottom: 20px !important;
            }
            #zbirniPregledSadrzaj > div table th { 
                border: 1px solid #000 !important;
                background: #fff !important;
                color: #000 !important;
                padding: 8px !important;
                font-weight: 700 !important;
            }
            #zbirniPregledSadrzaj > div table td { 
                border: 1px solid #000 !important;
                padding: 6px 8px !important;
                font-size: 16px !important;
                color: #000 !important;
            }
            #zbirniPregledSadrzaj > div table td * {
                color: #000 !important;
            }
            #zbirniPregledSadrzaj > div table th * {
                color: #000 !important;
            }
            #zbirniPregledSadrzaj > div table tr { 
                page-break-inside: avoid !important;
            }
            #zbirniPregledSadrzaj > div { 
                page-break-inside: avoid !important;
                margin-bottom: 20px !important;
            }
            /* Zaglavlje nastavnika pri ispisu */
            #zbirniPregledSadrzaj > div > div:first-child {
                font-size: 14px !important;
            }

/* Na printu detaljna podjela je UVIJEK vidljiva, bez obzira na stanje na ekranu */
            #zbirniPregledSadrzaj .kol-detalj { display: table-cell !important; }
            #zbirniPregledSadrzaj .kol-detalj-red { display: table-row !important; }
            #btnPrebaciDetaljnuPodjelu { display: none !important; }
            #btnPrebaciBerzuTabelu { display: none !important; }

/* Zaglavlje s nazivom aktiva i predmeta vidljivo SAMO na printu zbirne podjele (window.print()),
               a ne i kad se štampaju pojedinačne stranice nastavnika (printPojedinacniKontejner ima svoja zaglavlja). */
            #printZbirniHeader { display: block !important; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 20px; }
            body.print-mod-nastavnik #printZbirniHeader { display: none !important; }
            
            /* Statistika redovi - skrivanje pri print za malo više prostora */
            #zbirniPregledSadrzaj > div:first-child { display: none !important; }

/* Sva slova u zbirnim tabelama moraju biti crna */
            #zbirniPregledSadrzaj table td,
            #zbirniPregledSadrzaj table th,
            #zbirniPregledSadrzaj table td *,
            #zbirniPregledSadrzaj table th *,
            .stranica-nastavnika table td,
            .stranica-nastavnika table th,
            .stranica-nastavnika table td *,
            .stranica-nastavnika table th * {
                color: #000 !important;
            }
            .stranica-nastavnika table th,
            #zbirniPregledSadrzaj table th {
                background: #fff !important;
            }
            /* Zaglavlje kartice nastavnika (obojena traka s imenom) - crno na printu */
            .kartica-nastavnika-header {
                background: #fff !important;
                color: #000 !important;
                border: 2px solid #000 !important;
            }
            .kartica-nastavnika-header,
            .kartica-nastavnika-header span,
            .kartica-nastavnika-header * {
                color: #000 !important;
                background: transparent !important;
            }
        }
    </style>
</head>
<body>

<div class="GMS-glavni-naslov">
        <div>
            <h1>{{NAZIV_AKTIVA}}</h1>
            <p>GMS Tuzla • Standardna sedmična norma za predmet: <strong id="prikazNormeNaslov">{{NORMA_SATI}}</strong> časova</p>
            <p style="margin-top:4px;">Predmeti: <strong id="prikazPredmetaNaslov"></strong></p>
        </div>
        <div class="grupa-dugmadi-print">
            <button class="btn-config-toggle" onclick="toggleConfigPanel()"><i class="fa-solid fa-gear"></i> Uredi konfiguraciju</button>
            <button class="btn-print-sekundarni" style="background:#10b981;" onclick="spremiPodjeluKaoFajl()" title="Sačuva trenutnu podjelu (nastavnike, zaduženja i konfiguraciju) kao HTML fajl na disk"><i class="fa-solid fa-floppy-disk"></i> Spremi podjelu</button>
            <button class="btn-print-sekundarni" onclick="printajSveNastavnikeOdjednom()"><i class="fa-solid fa-users-gear"></i> Štampaj za sve članove aktiva</button>
            <button class="btn-print-glavni" onclick="window.print()"><i class="fa-solid fa-print"></i> Štampaj zbirnu podjelu</button>
        </div>
    </div>

<div class="config-panel" id="glavniConfigPanel">
        <div class="sekcija-naslov" style="border-bottom-color:#64748b; color:#334155;"><i class="fa-solid fa-sliders"></i> ⚙️ Brzo uređivanje konfiguracije predmeta i norme</div>
        
        <div style="margin-bottom: 15px; max-width: 200px;">
            <label style="font-weight:700;">Norma časova aktiva:</label>
            <input type="number" id="configNormaSati" style="padding:8px; border:1px solid #cbd5e1; border-radius:6px; font-weight:700;">
        </div>

<div style="font-size:12px; font-weight:700; color:#475569; margin-bottom:5px; display:grid; grid-template-columns: 2fr 1fr 1fr 3fr auto; gap:10px; padding:0 12px;" class="desni-panel-skrij">
            <div>Naziv predmeta</div>
            <div>Razred</div>
            <div>Fond č/sed</div>
            <div>Odjeljenja / Grupe (odvojeno zarezom)</div>
            <div>Tip</div>
        </div>

<div class="config-akcije">
            <button class="btn-print-sekundarni" onclick="dodajNoviRedUConfigEditor()"><i class="fa-solid fa-plus"></i> Dodaj predmet</button>
            <button class="btn-print-glavni" style="background:#10b981;" onclick="sacuvajIzmijenjenuKonfiguraciju()"><i class="fa-solid fa-floppy-disk"></i> Sačuvaj izmjene i osvježi</button>
            <button class="btn-print-sekundarni" style="background:#64748b;" onclick="toggleConfigPanel()"><i class="fa-solid fa-xmark"></i> Zatvori</button>
        </div>
    </div>

<div class="card" id="zbirniPregledCard">
                <div class="sekcija-naslov" style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;">
                    <span><i class="fa-solid fa-list-check"></i> Zbirni pregled podjele aktiva</span>
                    <div style="display:flex; gap:6px; flex-wrap:wrap;">
                        <button onclick="prebaciDetaljnuPodjelu()" id="btnPrebaciDetaljnuPodjelu" class="btn-config-toggle" style="font-size:12px; padding:5px 10px;">
                            <i class="fa-solid fa-eye"></i> Detaljno
                        </button>
                        <button onclick="prebaciBerzuTabelu()" id="btnPrebaciBerzuTabelu" class="btn-config-toggle" style="font-size:12px; padding:5px 10px;">
                            <i class="fa-solid fa-columns"></i> Odjeljenja kao kolone
                        </button>
                    </div>
                </div>
                <div id="zbirniPregledSadrzaj"></div>
            </div>

<div class="card">
                <div class="sekcija-naslov"><i class="fa-solid fa-layer-group"></i> Raspodjela časova, odjeljenja i grupa</div>
                <div class="predmet-kontejner" id="mrezaPredmeta"></div>
            </div>
            
            <div class="card">
                <div class="sekcija-naslov"><i class="fa-solid fa-calculator"></i> Ukupno časova po  predmetima</div>
                <p style="font-size:13px; color:#64748b; margin-bottom:12px;">Zbir časova za isti  predmet: redovna + izborna zajedno.</p>
                <div id="tabelaZbirPoPredmetu-wrap" style="overflow-x:auto;">
                <table id="tabelaZbirPoPredmetu" style="width:100%; border-collapse:collapse; font-size:14px;">
                    <thead>
                        <tr style="background:#f1f5f9; text-align:left;">
                            <th style="padding:8px 10px; border-bottom:2px solid #cbd5e1;">Naziv predmeta</th>
                            <th style="padding:8px 10px; border-bottom:2px solid #cbd5e1; text-align:center; white-space:nowrap;">Ukupno časova</th>
                            <th style="padding:8px 10px; border-bottom:2px solid #cbd5e1;">Sastav (razred · tip · časova)</th>
                        </tr>
                    </thead>
                    <tbody id="tabelaZbirPoPredmetuTijelo"></tbody>
                    <tfoot>
                        <tr style="background:#f8fafc; font-weight:700;">
                            <td style="padding:8px 10px; border-top:2px solid #cbd5e1;">Ukupno aktiv</td>
                            <td style="padding:8px 10px; border-top:2px solid #cbd5e1; text-align:center;" id="tabelaZbirPoPredmetuUkupno">0 č</td>
                            <td style="padding:8px 10px; border-top:2px solid #cbd5e1;"></td>
                        </tr>
                    </tfoot>
                </table>
                </div>
            </div>

<div class="card">
                <div class="sekcija-naslov"><i class="fa-solid fa-chart-pie"></i> Pregled raspodjele po predmetima</div>
                <div class="glavni-nerasporedeno-bedz" id="glavniSumaNerasporedenoPanel">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                    <span>Preostalo neraspoređeno na nivou cijelog aktiva: <strong id="sumaSlobodnihSatiAktiva">0</strong> časova</span>
                </div>
                <div id="tabelaPredmetaPregled-wrap">
                <table id="tabelaPredmetaPregled" style="width:100%; border-collapse:collapse; font-size:14px;">
                    <thead>
                        <tr style="background:#f1f5f9; text-align:left;">
                            <th style="padding:8px 10px; border-bottom:2px solid #cbd5e1;">Predmet / razred</th>
                            <th style="padding:8px 10px; border-bottom:2px solid #cbd5e1; text-align:center;">Tip</th>
                            <th style="padding:8px 10px; border-bottom:2px solid #cbd5e1; text-align:center; white-space:nowrap;">Raspoređeno</th>
                            <th style="padding:8px 10px; border-bottom:2px solid #cbd5e1;">Popunjenost</th>
                            <th style="padding:8px 10px; border-bottom:2px solid #cbd5e1;">Slobodna odjeljenja/grupe</th>
                        </tr>
                    </thead>
                    <tbody id="tabelaPredmetaPregledTijelo"></tbody>
                </table>
                </div>
            </div>

<div class="card">
                <div class="sekcija-naslov"><i class="fa-solid fa-file-signature"></i> Prijedlog časova za konkurs</div>

<div class="konkurs-sumarno-naslov"><i class="fa-solid fa-square-binary" style="color:#b45309;"></i> Sumarno po predmetu (za raspisivanje konkursa)</div>
                <div class="tabela-konkurs-wrapper">
                <table class="tabela-konkurs-sumarno">
                    <thead><tr><th>Naziv predmeta</th><th>Preostalo časova)</th></tr></thead>
                    <tbody id="tabelaKonkursSumarnoTijelo"></tbody>
                </table>
                </div>

<div class="konkurs-detalji-naslov"><i class="fa-solid fa-list-ul"></i> Detaljno po razredu i tipu nastave</div>
                <div class="tabela-konkurs-wrapper">
                <table class="tabela-konkurs">
                    <thead><tr><th>Naziv predmeta i razred</th><th>Tip nastave</th><th>Preostalo časova</th><th>Slobodna odjeljenja/grupe</th></tr></thead>
                    <tbody id="tabelaKonkursTijelo"></tbody>
                </table>
                </div>
            </div>
        </div>

<div class="desni-panel">
            <div class="card" style="display:flex; flex-direction:column; height:100%; margin-bottom:0;">
                <div class="sekcija-naslov"><i class="fa-solid fa-users"></i> Članovi aktiva</div>
                <div id="verzijaIndikator" style="font-size:11px; color:#64748b; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:5px; padding:5px 10px; margin-bottom:10px; font-family: 'IBM Plex Mono', monospace; display:flex; align-items:center;"></div>
                
                <div class="forma-dodaj">
                    <div class="forma-naslov" id="lblFormaNaslov"><i class="fa-solid fa-user-plus"></i> NOVI ČLAN AKTIVA</div>
                    <input type="text" id="novoIme" placeholder="Ime i prezime..." onkeypress="if(event.key==='Enter') izvrsiAkcijuForme()">

<div class="forma-red-opcija" style="justify-content: space-between;">
                        <label for="inputNormaLicna" style="cursor:default;"><i class="fa-solid fa-scale-balanced"></i> Individualna norma</label>
                        <input type="number" id="inputNormaLicna" placeholder="puna" min="1" max="40">
                    </div>
                    <div class="forma-norma-licna-hint">Ostavite prazno za punu (sedmičnu) normu aktiva. Upišite broj časova za rad sa nepotpunom normom (npr. 11, 10, 6...).</div>
                    
                    <div class="forma-red-opcija">
                        <label><input type="checkbox" id="chkRazrednik" onchange="toggleRazrednikInput()"> Razrednik/ca</label>
                        <input type="text" id="inputRazredništvo" placeholder="npr. 4A" style="padding:4px 8px; font-size:12px; display:none; width:80px;">
                    </div>

<select id="selectUloga" style="padding:6px; font-size:13px; margin-top:2px;" onchange="toggleSlobodanUnosUloge()">
                        <option value="">— Bez dodatne uloge —</option>
                        <option value="Rukovodilac aktiva">Rukovodilac aktiva</option>
                        <option value="Voditelj sekcije">Voditelj sekcije</option>
                        <option value="DRUGO">Drugo zaduženje (upiši)...</option>
                    </select>
                    
                    <input type="text" id="inputCustomUloga" placeholder="Upišite zaduženje unutar aktiva..." style="padding:6px; font-size:13px; display:none; margin-top:2px;">

<div id="kontejnerDugmadiForme" style="display: flex; gap:6px;">
                        <button id="btnGlavnaAkcijaForme" onclick="izvrsiAkcijuForme()" style="flex:1;"><i class="fa-solid fa-user-plus"></i> Dodaj u aktiv</button>
                        <button id="btnOdustaniEdit" onclick="ponistiEditMod()" style="background:#64748b; display:none; color: #fff; border:none; padding:10px; border-radius:6px; cursor:pointer; font-weight:600;"><i class="fa-solid fa-xmark"></i> Odustani</button>
                    </div>
                </div>

<div class="lista-nastavnika" id="prikazNastavnika"></div>
                <div style="border-top:1px solid var(--border); padding-top:10px; margin-top:auto; display:flex; flex-direction:column; gap:6px;">
                    <button class="btn-akcija" id="btnUndo" onclick="izvrsiUndo()" disabled title="Poništi posljednju izmjenu (dodjelu/uklanjanje časa, dodavanje/brisanje nastavnika...)"><i class="fa-solid fa-rotate-left"></i> Poništi posljednju akciju</button>
                    <button class="btn-akcija btn-reset" onclick="resetujSvePodatke()"><i class="fa-solid fa-trash-can"></i> Resetuj kompletnu tabelu</button>
                </div>
            </div>
        </div>
    </div>

const PALETA_NASTAVNIKA = [
            '#2563eb', '#16a34a', '#d97706', '#dc2626', 
            '#7c3aed', '#0891b2', '#4f46e5', '#db2777', 
            '#059669', '#ea580c', '#9333ea', '#c026d3',
            '#1e3a8a', '#115e59', '#9a3412', '#84cc16'
        ];
        const SPEKTAR_BOJA_PREDMETA = [
            '#1e40af', '#2563eb', '#3b82f6', '#60a5fa', 
            '#c2410c', '#ea580c', '#f97316', '#15803d', 
            '#16a34a', '#22c55e', '#6b21a8', '#8b5cf6', 
            '#b91c1c', '#dc2626', '#ef4444', '#475569'
        ];

//Učitavanje dinamičkih ili statičkih predmeta/normi iz memorije
        //NAPOMENA: markeri /*@..@*/ ispod NE BRISATI — koriste se da bi "Spremi podjelu" pouzdano radio
        //i nakon više uzastopnih spremanja/ponovnih otvaranja fajla (vidi spremiPodjeluKaoFajl).
        /*@NS_S@*/let NORMA_SATI = JSON.parse(localStorage.getItem(KLJUC_MEMORIJE + '_normaSati')) || POCETNA_NORMA;/*@NS_E@*/
        /*@PK_S@*/let PREDMETI_CONFIG = JSON.parse(localStorage.getItem(KLJUC_MEMORIJE + '_predmetiConfig')) || POCETNI_CONFIG;/*@PK_E@*/

/*@NA_S@*/let nastavnici = JSON.parse(localStorage.getItem(KLJUC_MEMORIJE + '_nastavnici')) || [];/*@NA_E@*/
        /*@ZA_S@*/let zaduzenja = JSON.parse(localStorage.getItem(KLJUC_MEMORIJE + '_zaduzenja')) || {};/*@ZA_E@*/
        /*@VP_S@*/let verzijaPodataka = JSON.parse(localStorage.getItem(KLJUC_MEMORIJE + '_verzija')) || { broj: 0, vrijemeISO: null };/*@VP_E@*/
        let aktivniNastavnikId = null;
        let editNastavnikId = null;
        let prikaziDetaljnuPodjelu = false; // UI prekidač - samo za prikaz na ekranu, na printu je uvijek vidljivo
        let prikaziTabeluSaOdjeljenjima = false; // Toggle između klasične i nove tabele sa odjeljenjima kao kolonama

// Vraća tekst sa popisom (jedinstvenih) naziva predmeta iz PREDMETI_CONFIG, npr. "Matematika, Fizika".
        // Koristi se na printovima da se pored naziva aktiva vidi i koji predmeti su obuhvaćeni podjelom.
        function dobijPopisPredmetaTekst() {
            const jedinstveniNazivi = [];
            for (const kljuc in PREDMETI_CONFIG) {
                const naziv = PREDMETI_CONFIG[kljuc].naziv;
                if (naziv && !jedinstveniNazivi.includes(naziv)) {
                    jedinstveniNazivi.push(naziv);
                }
            }
            return jedinstveniNazivi.join(', ');
        }

// Ažurira prikaz popisa predmeta u glavnom naslovu (na ekranu) i u print-only zaglavlju
        // koje se koristi pri "Štampaj zbirnu podjelu" (window.print()).
        function azurirajPrikazPredmetaUNaslovu() {
            const popisPredmeta = dobijPopisPredmetaTekst();

const elNaslov = document.getElementById('prikazPredmetaNaslov');
            if (elNaslov) elNaslov.innerText = popisPredmeta || '—';

const elPrintHeader = document.getElementById('printZbirniHeader');
            if (elPrintHeader) {
                const nazivAktivaTekst = document.querySelector('.GMS-glavni-naslov h1') ? document.querySelector('.GMS-glavni-naslov h1').textContent.trim() : '';
                elPrintHeader.innerHTML =
                    '<div style="font-size:22px; font-weight:700; color:#000;">' + nazivAktivaTekst + '</div>' +
                    '<div style="font-size:14px; color:#333; margin-top:4px;">GMS Tuzla • Predmeti: ' + (popisPredmeta || '—') + '</div>';
            }
        }

// --- UNDO SISTEM ---
        // Čuva snapshot-e (nastavnici + zaduženja) prije svake izmjene, da se akcija može poništiti.
        let HISTORIJA_UNDO = [];
        const MAX_UNDO_KORAKA = 30;

function sacuvajCheckpoint() {
            HISTORIJA_UNDO.push({
                nastavnici: JSON.parse(JSON.stringify(nastavnici)),
                zaduzenja: JSON.parse(JSON.stringify(zaduzenja))
            });
            if (HISTORIJA_UNDO.length > MAX_UNDO_KORAKA) HISTORIJA_UNDO.shift();
            azurirajDugmeUndo();
        }

function azurirajDugmeUndo() {
            const dugme = document.getElementById('btnUndo');
            if (!dugme) return;
            dugme.disabled = HISTORIJA_UNDO.length === 0;
        }

function inicijalizujConfigEditorUI() {
            document.getElementById('configNormaSati').value = NORMA_SATI;
            const kontejner = document.getElementById('configKontejnerRedova');
            kontejner.innerHTML = '';

kreirajRedUConfigEditoru(p.naziv, p.razred, p.satiPoSedmici, cistaOdjeljenja, p.tipNastave);
            }
        }

function dodajNoviRedUConfigEditor() {
            kreirajRedUConfigEditoru('', 1, 2, '', 'redovna');
        }

function sacuvajIzmijenjenuKonfiguraciju() {
            const noveNorme = parseInt(document.getElementById('configNormaSati').value) || 21;
            const redovi = document.querySelectorAll('.config-red-predmeta');
            
            if(redovi.length === 0) {
                alert('Morate imati barem jedan predmet u konfiguraciji!');
                return;
            }

const NOVI_CONFIG = {};
            let validno = true;

redovi.forEach((red, indeks) => {
                const naziv = red.querySelector('.cfg-naziv').value.trim();
                const razred = parseInt(red.querySelector('.cfg-razred').value);
                const sati = parseInt(red.querySelector('.cfg-sati').value) || 2;
                const odjeljenjaTekst = red.querySelector('.cfg-odjeljenja').value.trim();
                const tipNastave = red.querySelector('.cfg-tip').value;

if(!naziv || !odjeljenjaTekst) {
                    validno = false;
                    red.style.background = '#fef2f2';
                    return;
                } else {
                    red.style.background = '#fff';
                }

const kljucGrupe = 'p_' + (indeks + 1);
                const ukupanKapacitet = odjeljenjaNiz.length * sati;

NOVI_CONFIG[kljucGrupe] = {
                    id: kljucGrupe,
                    naziv: naziv,
                    razred: razred,
                    satiPoSedmici: sati,
                    kapacitet: ukupanKapacitet,
                    tipNastave: tipNastave,
                    odjeljenja: odjeljenjaNiz
                };
            });

if(!validno) {
                alert('Greška! Popunite sva polja prije spašavanja (označena crvenkasto).');
                return;
            }

// Pročišćavanje zaduženja: ako je neko odjeljenje obrisano, oslobodi ta zaduženja
            for(const casId in zaduzenja) {
                const dijelovi = casId.split('_');
                const stariKljuc = dijelovi[0] + '_' + dijelovi[1];
                const odj = dijelovi[2];
                
                let postojiUNovom = false;
                for(const nKljuc in NOVI_CONFIG) {
                    if(NOVI_CONFIG[nKljuc].naziv === PREDMETI_CONFIG[stariKljuc]?.naziv && 
                       NOVI_CONFIG[nKljuc].razred === PREDMETI_CONFIG[stariKljuc]?.razred &&
                       NOVI_CONFIG[nKljuc].odjeljenja.includes(odj)) {
                        
                        // Ako se promijenio interni ID, mapiraj staro zaduženje na novu šifru
                        if(nKljuc !== stariKljuc) {
                            zaduzenja[NOVI_CONFIG[nKljuc].id + '_' + odj] = zaduzenja[casId];
                        }
                        postojiUNovom = true;
                        break;
                    }
                }
                // Ako predmet/odjeljenje više ne postoji ili je promijenjen ID, obriši stari ključ
                if(!postojiUNovom || !PREDMETI_CONFIG[stariKljuc]) {
                    delete zaduzenja[casId];
                }
            }

// Ažuriranje globalnih objekata
            NORMA_SATI = noveNorme;
            PREDMETI_CONFIG = NOVI_CONFIG;

// Čuvanje u LocalStorage
            localStorage.setItem(KLJUC_MEMORIJE + '_normaSati', JSON.stringify(NORMA_SATI));
            localStorage.setItem(KLJUC_MEMORIJE + '_predmetiConfig', JSON.stringify(PREDMETI_CONFIG));
            localStorage.setItem(KLJUC_MEMORIJE + '_zaduzenja', JSON.stringify(zaduzenja));

// Ažuriranje vizuelnih elemenata
            document.getElementById('prikazNormeNaslov').innerText = NORMA_SATI;
            azurirajPrikazPredmetaUNaslovu();
            
            // Dinamičko ubacivanje CSS varijabli boja za nove predmete
            let noveBojeStilovi = '';
            for(const kljuc in PREDMETI_CONFIG) {
                const indeksPredefinisane = parseInt(kljuc.split('_')[1]) - 1;
                const boja = SPEKTAR_BOJA_PREDMETA[indeksPredefinisane % SPEKTAR_BOJA_PREDMETA.length];
                noveBojeStilovi += `--boja-${kljuc}: ${boja};\n`;
            }
            
            // Kreiranje/Ažuriranje dinamičke style sekcije za boje
            let stilEl = document.getElementById('dinamickeBojeKonfig');
            if(!stilEl) {
                stilEl = document.createElement('style');
                stilEl.id = 'dinamickeBojeKonfig';
                document.head.appendChild(stilEl);
            }
            stilEl.innerHTML = `:root { ${noveBojeStilovi} }`;

povecajVerziju();
            generisiMrezuPredmeta();
            osvjeziPrikaz();
            toggleConfigPanel();
        }

function toggleRazrednikInput() {
            const chk = document.getElementById('chkRazrednik');
            document.getElementById('inputRazredništvo').style.display = chk.checked ? 'inline-block' : 'none';
            if(chk.checked) document.getElementById('inputRazredništvo').focus();
        }

function formatirajDatumVerzije(isoStr) {
            if(!isoStr) return '—';
            const d = new Date(isoStr);
            const dd = String(d.getDate()).padStart(2,'0');
            const mm = String(d.getMonth()+1).padStart(2,'0');
            const hh = String(d.getHours()).padStart(2,'0');
            const min = String(d.getMinutes()).padStart(2,'0');
            return dd + '.' + mm + '. ' + hh + ':' + min;
        }

function povecajVerziju() {
            verzijaPodataka.broj += 1;
            verzijaPodataka.vrijemeISO = new Date().toISOString();
            localStorage.setItem(KLJUC_MEMORIJE + '_verzija', JSON.stringify(verzijaPodataka));
            osvjeziIndikatornVerzije();
        }

function osvjeziIndikatornVerzije() {
            const el = document.getElementById('verzijaIndikator');
            if(el) {
                el.innerHTML = '<i class="fa-solid fa-code-branch" style="margin-right:4px;"></i> v' + verzijaPodataka.broj + ' • ' + formatirajDatumVerzije(verzijaPodataka.vrijemeISO);
            }
        }

function generisiMrezuPredmeta() {
            const mreza = document.getElementById('mrezaPredmeta');
            mreza.innerHTML = '';
            for (const kljuc in PREDMETI_CONFIG) {
                const p = PREDMETI_CONFIG[kljuc];
                const kartica = document.createElement('div');
                kartica.className = 'predmet-kartica';
                let bedzeviHTML = '';
                p.odjeljenja.forEach(odj => {
                    const casId = p.id + '_' + odj;
                    bedzeviHTML += '<div class="class-badge" data-id="' + casId + '" data-tip="' + p.id + '" data-casova="' + p.satiPoSedmici + '">' + odj + '</div>';
                });
                
                const tipOznaka = p.tipNastave === 'izborna' ? '<span class="bedz-tip-nastave izborna">Izborna</span>' : '<span class="bedz-tip-nastave redovna">Redovna</span>';

kartica.style.setProperty('--boja-predmeta', 'var(--boja-' + p.id + ')');
                kartica.innerHTML = '<div class="predmet-info"><div class="predmet-ime">' + p.naziv + ' ' + tipOznaka + '</div><div class="predmet-detalji">' + p.razred + '. razred • ' + p.satiPoSedmici + 'č/sedmično<br><strong style="color:#475569;">Ukupan fond: ' + p.kapacitet + ' č</strong></div></div><div class="bedz-grupa">' + bedzeviHTML + '</div>';
                mreza.appendChild(kartica);
            }
        }

function napraviStranicuNastavnikaHTML(nastavnik) {
            const sati = izracunajCasove(nastavnik.id);
            const normaNastavnika = dobijNormuNastavnika(nastavnik);
            const procenat = Math.round(Math.min((sati / normaNastavnika) * 100, 100));
            const imaIndividualnuNormu = (nastavnik.normaLicna !== undefined && nastavnik.normaLicna !== null && nastavnik.normaLicna !== '');
            const tipTekstAktiv = "{{NAZIV_AKTIVA}}";
            const popisPredmetaAktiva = dobijPopisPredmetaTekst();
            const verzijaStr = 'v' + verzijaPodataka.broj;
            const datumStr = formatirajDatumVerzije(verzijaPodataka.vrijemeISO);

let stavkeZaSortiranje = [];

for(const casId in zaduzenja) {
                if(zaduzenja[casId] === nastavnik.id) {
                    const dijelovi = casId.split('_');
                    const pKljuc = dijelovi[0] + '_' + dijelovi[1];
                    const odjIme = dijelovi[2];
                    const p = PREDMETI_CONFIG[pKljuc];
                    if(!p) continue;
                    stavkeZaSortiranje.push({ p, odjIme, casId });
                }
            }

stavkeZaSortiranje.sort((a, b) => {
                if(a.p.razred !== b.p.razred) return a.p.razred - b.p.razred;
                return a.odjIme.localeCompare(b.odjIme, 'bs');
            });

let tabličniRedovi = '';
            const imaZaduzenja = stavkeZaSortiranje.length > 0;

stavkeZaSortiranje.forEach(({ p, odjIme }) => {
                const tipTekst = p.tipNastave === 'izborna' ? 'Izborna nastava' : 'Redovna nastava';
                tabličniRedovi += '<tr>' +
                    '<td style="text-align:center; font-weight:bold;">' + p.razred + '.</td>' +
                    '<td>' + p.naziv + '</td>' +
                    '<td><strong>' + odjIme + '</strong> (' + tipTekst + ')</td>' +
                    '<td style="text-align:center; font-weight:bold;">' + p.satiPoSedmici + ' č</td>' +
                '</tr>';
            });

if(!imaZaduzenja) {
                tabličniRedovi = '<tr><td colspan="4" style="text-align:center; font-style:italic; padding:20px;">Nema dodijeljenih časova / slobodan status u ovom ciklusu.</td></tr>';
            }

return '<div class="stranica-nastavnika">' +
                '<div style="display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #e2e8f0; padding-bottom:10px; margin-bottom:14px;">' +
                    '<div style="text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#555;">GMS Tuzla • ' + tipTekstAktiv + (popisPredmetaAktiva ? ' • ' + popisPredmetaAktiva : '') + '</div>' +
                    '<div style="text-align:right; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:5px; padding:4px 10px;">' +
                        '<span style="font-family: monospace; font-size:13px; font-weight:700; color:#1d4ed8;">' + verzijaStr + '</span>' +
                        '<span style="font-size:11px; color:#64748b; margin-left:6px;">• ' + datumStr + '</span>' +
                    '</div>' +
                '</div>' +
                '<div class="print-naslov-nastavnika">' + nastavnik.ime + '</div>' +
                '<div style="margin-top: 8px; font-size: 15px; background:#f8fafc; padding:8px; border-radius:6px; border:1px solid #e2e8f0; margin-bottom:10px;">' + ulogeOpis + '</div>' +
                '<div style="margin-top: 10px; font-size: 15px;">Ukupno sedmično zaduženje: <strong>' + sati + '</strong> od normiranih <strong>' + normaNastavnika + '</strong> časova (' + procenat + '%)' + (imaIndividualnuNormu ? ' <span style="font-size:12px; color:#c2410c; font-weight:600;">(individualna/nepuna norma)</span>' : '') + '</div>' +
                (sati > normaNastavnika ? '<div style="margin-top: 8px; font-size: 15px; font-weight: 700; color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 7px 12px; display: inline-block;"><i class="fa-solid fa-triangle-exclamation"></i> Prekovremeni časovi: +' + (sati - normaNastavnika) + ' č iznad norme</div>' : '') +
                '<table class="print-tabela">' +
                    '<thead><tr><th style="width:10%; text-align:center;">Razred</th><th style="width:40%;">Naziv predmeta</th><th style="width:35%;">Odjeljenje / Grupa</th><th style="width:15%; text-align:center;">Fond časova</th></tr></thead>' +
                    '<tbody>' + tabličniRedovi + '</tbody>' +
                '</table>' +
                '<div class="print-potpisi">' +
                    '<div class="print-potpisi-linija">Potpis nastavnika</div>' +
                    '<div class="print-potpisi-linija">Predsjednik aktiva</div>' +
                '</div>' +
            '</div>';
        }

function printajPojedinacnogNastavnika(id, event) {
            event.stopPropagation();
            const nastavnik = nastavnici.find(n => n.id === id);
            if(!nastavnik) return;

const kontejner = document.getElementById('printPojedinacniKontejner');
            kontejner.innerHTML = napraviStranicuNastavnikaHTML(nastavnik);

document.body.classList.add('print-mod-nastavnik');
            window.print();
            setTimeout(() => { document.body.classList.remove('print-mod-nastavnik'); }, 500);
        }

function prebaciDetaljnuPodjelu() {
            prikaziDetaljnuPodjelu = !prikaziDetaljnuPodjelu;
            const sadrzaj = document.getElementById('zbirniPregledSadrzaj');
            const dugme = document.getElementById('btnPrebaciDetaljnuPodjelu');
            if(sadrzaj) sadrzaj.classList.toggle('detaljno-prikazano', prikaziDetaljnuPodjelu);
            if(dugme) {
                dugme.innerHTML = prikaziDetaljnuPodjelu
                    ? '<i class="fa-solid fa-eye-slash"></i> Sakrij detaljnu podjelu'
                    : '<i class="fa-solid fa-eye"></i> Prikaži detaljnu podjelu';
            }
        }

function prebaciBerzuTabelu() {
            prikaziTabeluSaOdjeljenjima = !prikaziTabeluSaOdjeljenjima;
            const dugme = document.getElementById('btnPrebaciBerzuTabelu');
            if(dugme) {
                dugme.style.background = prikaziTabeluSaOdjeljenjima ? '#a3c51c' : '#475569';
                dugme.innerHTML = prikaziTabeluSaOdjeljenjima
                    ? '<i class="fa-solid fa-table-columns"></i> Klasični pregled'
                    : '<i class="fa-solid fa-table-columns"></i> Odjeljenja kao kolone';
            }
            azurirajZbirniPregled();
        }

function azurirajZbirniPregled() {
            const sadrzaj = document.getElementById('zbirniPregledSadrzaj');
            if(!sadrzaj) return;

if(nastavnici.length === 0) {
                sadrzaj.innerHTML = '<p style="color:#94a3b8; font-style:italic; text-align:center; padding:10px;">Nema unesenih članova aktiva.</p>';
                return;
            }

if(prikaziTabeluSaOdjeljenjima) {
                azurirajZbirniPregledSaOdjeljenjima();
            } else {
                azurirajZbirniPregledKlasican();
            }
        }

function azurirajZbirniPregledKlasican() {
            const sadrzaj = document.getElementById('zbirniPregledSadrzaj');
            if(!sadrzaj) return;

const ukupnoSatiAktiva = nastavnici.reduce((sum, n) => sum + izracunajCasove(n.id), 0);
            const ukupnoNormaAktiva = nastavnici.reduce((sum, n) => sum + dobijNormuNastavnika(n), 0);
            
            // Izračunavanje preostalih časova
            let ukupnoKapacitetAktiva = 0;
            for (const kljuc in PREDMETI_CONFIG) {
                ukupnoKapacitetAktiva += PREDMETI_CONFIG[kljuc].kapacitet;
            }
            const preostaloSati = ukupnoKapacitetAktiva - ukupnoSatiAktiva;

let redovi = '';
            let ukupnoPrekovremenih = 0;
            nastavnici.forEach((n, idx) => {
                const sati = izracunajCasove(n.id);
                const normaNastavnika = dobijNormuNastavnika(n);
                const razlika = sati - normaNastavnika;
                if(razlika > 0) ukupnoPrekovremenih += razlika;
                const razlikaStr = razlika === 0 ? '—' : (razlika > 0 ? '+' + razlika + ' č' : razlika + ' č');
                const razlikaStil = razlika > 0 ? 'color:#dc2626;font-weight:700;' : (razlika < 0 ? 'color:#d97706;font-weight:700;' : 'color:#16a34a;font-weight:700;');
                const procenat = Math.min(Math.round((sati / normaNastavnika) * 100), 100);
                const bojaBara = sati > normaNastavnika ? '#dc2626' : (procenat >= 90 ? '#16a34a' : '#3b82f6');

let ulogeTekst = '';
                if(n.isRazrednik && n.razredništvoOdj) ulogeTekst += 'Razrednik/ca ' + n.razredništvoOdj;
                if(n.uloga) ulogeTekst += (ulogeTekst ? ' | ' : '') + n.uloga;
                if(!ulogeTekst) ulogeTekst = '—';

// --- Prikupljanje detaljne podjele (predmet / razred / odjeljenje) za ovog nastavnika ---
                let stavke = [];
                for(const casId in zaduzenja) {
                    if(zaduzenja[casId] === n.id) {
                        const dijelovi = casId.split('_');
                        const pKljuc = dijelovi[0] + '_' + dijelovi[1];
                        const odjIme = dijelovi[2];
                        const p = PREDMETI_CONFIG[pKljuc];
                        if(!p) continue;
                        stavke.push({ p, odjIme });
                    }
                }
                stavke.sort((a, b) => {
                    if(a.p.razred !== b.p.razred) return a.p.razred - b.p.razred;
                    return a.odjIme.localeCompare(b.odjIme, 'bs');
                });

const pozadina = idx % 2 === 0 ? '#ffffff' : '#f8fafc';
                const brojPodredova = stavke.length > 0 ? stavke.length : 1;

redovi += '<tbody class="zbirni-blok-nastavnika">';
                redovi += '<tr class="zbirni-glavni-red" style="background:' + pozadina + '; border-top:2px solid #cbd5e1;">' +
                    '<td rowspan="' + brojPodredova + '" style="text-align:center;font-weight:700;color:#64748b;vertical-align:top;padding-top:8px;">' + (idx+1) + '.</td>' +
                    '<td rowspan="' + brojPodredova + '" style="font-weight:600;vertical-align:top;padding-top:8px;">' + n.ime + (n.isRazrednik && n.razredništvoOdj ? ' <span style="display:inline-block;background:#dcfce7;color:#15803d;border:1px solid #bbf7d0;border-radius:4px;font-size:11px;font-weight:700;padding:1px 6px;vertical-align:middle;white-space:nowrap;">Razr. ' + n.razredništvoOdj + '</span>' : '') + '</td>' +
                    '<td rowspan="' + brojPodredova + '" style="font-size:13px;color:#475569;vertical-align:top;padding-top:8px;">' + ulogeTekst + '</td>' +
                    '<td rowspan="' + brojPodredova + '" style="text-align:center;font-weight:700;font-size:15px;vertical-align:top;padding-top:8px;">' + sati + ' č</td>' +
                    '<td rowspan="' + brojPodredova + '" style="text-align:center;color:#64748b;vertical-align:top;padding-top:8px;">' + normaNastavnika + ' č</td>' +
                    '<td rowspan="' + brojPodredova + '" style="text-align:center;vertical-align:top;padding-top:8px;' + razlikaStil + '">' + razlikaStr + '</td>' +
                    '<td rowspan="' + brojPodredova + '" style="min-width:80px;vertical-align:top;padding-top:8px;">' +
                        '<div style="background:#e2e8f0;border-radius:4px;height:8px;overflow:hidden;">' +
                            '<div style="height:100%;width:' + procenat + '%;background:' + bojaBara + ';"></div>' +
                        '</div>' +
                        '<div style="font-size:11px;color:#64748b;text-align:center;margin-top:2px;">' + procenat + '%</div>' +
                    '</td>';

if(stavke.length > 0) {
                    const prva = stavke[0];
                    const tipOznakaPrva = prva.p.tipNastave === 'izborna' ? ' <span style="color:#b45309;">(izb.)</span>' : '';
                    redovi += '<td class="kol-detalj" style="font-size:13px;padding:5px 8px;">' + prva.p.razred + '. ' + prva.p.naziv + tipOznakaPrva + '</td>' +
                              '<td class="kol-detalj" style="font-size:13px;padding:5px 8px;"><strong>' + prva.odjIme + '</strong></td>' +
                              '<td class="kol-detalj" style="font-size:13px;padding:5px 8px;text-align:center;">' + prva.p.satiPoSedmici + ' č</td>' +
                          '</tr>';
                    for(let i = 1; i < stavke.length; i++) {
                        const s = stavke[i];
                        const tipOznaka = s.p.tipNastave === 'izborna' ? ' <span style="color:#b45309;">(izb.)</span>' : '';
                        redovi += '<tr class="kol-detalj-red" style="background:' + pozadina + ';">' +
                            '<td class="kol-detalj" style="font-size:13px;padding:5px 8px;">' + s.p.razred + '. ' + s.p.naziv + tipOznaka + '</td>' +
                            '<td class="kol-detalj" style="font-size:13px;padding:5px 8px;"><strong>' + s.odjIme + '</strong></td>' +
                            '<td class="kol-detalj" style="font-size:13px;padding:5px 8px;text-align:center;">' + s.p.satiPoSedmici + ' č</td>' +
                        '</tr>';
                    }
                } else {
                    redovi += '<td class="kol-detalj" colspan="3" style="font-size:13px;padding:5px 8px;font-style:italic;color:#94a3b8;text-align:center;">— nema dodijeljenih časova —</td></tr>';
                }
                redovi += '</tbody>';
            });

sadrzaj.innerHTML =
                '<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;">' +
                    '<div style="background:#f0f9ff;border:1px solid #bae6fd;border-radius:7px;padding:10px 14px;">' +
                        '<div style="font-size:10px;font-weight:700;text-transform:uppercase;color:#0369a1;">Ukupno članova</div>' +
                        '<div style="font-size:24px;font-weight:700;color:#0f172a;">' + nastavnici.length + '</div>' +
                    '</div>' +
                    '<div style="background:#ede9fe;border:1px solid #ddd6fe;border-radius:7px;padding:10px 14px;">' +
                        '<div style="font-size:10px;font-weight:700;text-transform:uppercase;color:#6d28d9;">Ukupni broj časova</div>' +
                        '<div style="font-size:24px;font-weight:700;color:#0f172a;">' + ukupnoKapacitetAktiva + ' č</div>' +
                    '</div>' +
                    '<div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:7px;padding:10px 14px;">' +
                        '<div style="font-size:10px;font-weight:700;text-transform:uppercase;color:#15803d;">Raspoređeno časova</div>' +
                        '<div style="font-size:24px;font-weight:700;color:#0f172a;">' + ukupnoSatiAktiva + ' č</div>' +
                    '</div>' +
                    '<div style="background:#fefce8;border:1px solid #fef08a;border-radius:7px;padding:10px 14px;">' +
                        '<div style="font-size:10px;font-weight:700;text-transform:uppercase;color:#a16207;">Preostalo časova u aktivu</div>' +
                        '<div style="font-size:24px;font-weight:700;color:#ef4444;">' + preostaloSati + ' č</div>' +
                    '</div>' +
                '</div>' +
                '<table style="width:100%;border-collapse:collapse;font-size:14px;">' +
                    '<thead><tr style="background:#0f172a;color:#fff;">' +
                        '<th style="padding:8px;text-align:center;width:3%;">#</th>' +
                        '<th style="padding:8px 12px;text-align:left;width:16%;">Ime i prezime</th>' +
                        '<th style="padding:8px 12px;text-align:left;width:13%;">Uloge / Zaduženja</th>' +
                        '<th style="padding:8px;text-align:center;width:7%;">Dodij.</th>' +
                        '<th style="padding:8px;text-align:center;width:6%;">Norma</th>' +
                        '<th style="padding:8px;text-align:center;width:7%;">Prekovr.</th>' +
                        '<th style="padding:8px 12px;text-align:center;width:9%;">Popunj.</th>' +
                        '<th style="padding:8px 12px;text-align:left;width:18%;border-left:2px solid #334155;" class="kol-detalj">Predmet / razred</th>' +
                        '<th style="padding:8px 12px;text-align:left;width:13%;" class="kol-detalj">Odjeljenje / grupa</th>' +
                        '<th style="padding:8px;text-align:center;width:8%;" class="kol-detalj">Časova</th>' +
                    '</tr></thead>' +
                    redovi +
                    '<tfoot><tr style="background:#f1f5f9;font-weight:700;border-top:2px solid #cbd5e1;">' +
                        '<td colspan="3" style="padding:8px 12px;">UKUPNO AKTIV</td>' +
                        '<td style="padding:8px;text-align:center;">' + ukupnoSatiAktiva + ' č</td>' +
                        '<td style="padding:8px;text-align:center;">' + ukupnoNormaAktiva + ' č</td>' +
                        '<td style="padding:8px;text-align:center;color:' + (ukupnoPrekovremenih > 0 ? '#dc2626' : '#16a34a') + ';">' + (ukupnoPrekovremenih > 0 ? '+' + ukupnoPrekovremenih + ' č' : '—') + '</td>' +
                        '<td colspan="4" style="padding:8px;text-align:center;border-left:2px solid #cbd5e1;">' + preostaloSati + ' č preostalo na nivou aktiva</td>' +
                    '</tr></tfoot>' +
                '</table>';

sadrzaj.classList.toggle('detaljno-prikazano', prikaziDetaljnuPodjelu);
        }

function azurirajZbirniPregledSaOdjeljenjima() {
            const sadrzaj = document.getElementById('zbirniPregledSadrzaj');
            if(!sadrzaj) return;

let tabelasHTML = '';

// Za svakog nastavnika pravi ZASEBNU MALU TABELU
            nastavnici.forEach((nastavnik, nIdx) => {
                // Prikupi sve predmete ovog nastavnika
                let predmetiNastavnika = [];
                for (const casId in zaduzenja) {
                    if (zaduzenja[casId] === nastavnik.id) {
                        const dijelovi = casId.split('_');
                        const pKljuc = dijelovi[0] + '_' + dijelovi[1];
                        const odjIme = dijelovi[2];
                        const p = PREDMETI_CONFIG[pKljuc];
                        if (!p) continue;
                        
                        // Provjeri da li već postoji taj predmet u nizu
                        let postojiPredmet = false;
                        for (let pm of predmetiNastavnika) {
                            if (pm.p.id === p.id) {
                                pm.odjeljenja.push(odjIme);
                                postojiPredmet = true;
                                break;
                            }
                        }
                        if (!postojiPredmet) {
                            predmetiNastavnika.push({ p, odjeljenja: [odjIme] });
                        }
                    }
                }
                
                if (predmetiNastavnika.length === 0) return; // Preskoči ako nema zaduženja
                
                // Sortiraj predmete po razredu
                predmetiNastavnika.sort((a, b) => {
                    if (a.p.razred !== b.p.razred) return a.p.razred - b.p.razred;
                    return a.p.naziv.localeCompare(b.p.naziv, 'bs');
                });
                
                // Sortiraj odjeljenja za svakog nastavnika
                predmetiNastavnika.forEach(pm => {
                    pm.odjeljenja.sort((a, b) => {
                        const razredA = parseInt(a.charAt(0));
                        const razredB = parseInt(b.charAt(0));
                        if (razredA !== razredB) return razredA - razredB;
                        return a.localeCompare(b, 'bs');
                    });
                });

const satiNastavnika = izracunajCasove(nastavnik.id);
                const bojaNastavnika = nastavnik.boja || '#475569';

// Kreiraj malu tabelu za ovog nastavnika
                let tabelaHTML = '<div style="margin-bottom:25px; border:1px solid #cbd5e1; border-radius:8px; overflow:hidden;">';
                
                // Zaglavlje sa imenom i ukupnim satima
                tabelaHTML += '<div class="kartica-nastavnika-header" style="background:' + bojaNastavnika + ';color:#fff;padding:12px 15px;font-weight:700;font-size:16px;display:flex;justify-content:space-between;align-items:center;">';
                tabelaHTML += '<span>' + (nIdx+1) + '. ' + nastavnik.ime + (nastavnik.isRazrednik && nastavnik.razredništvoOdj ? ' <span style="background:rgba(255,255,255,0.25);border:1px solid rgba(255,255,255,0.4);border-radius:4px;font-size:14px;padding:1px 6px;margin-left:4px;vertical-align:middle;white-space:nowrap;">Razr. ' + nastavnik.razredništvoOdj + '</span>' : '') + '</span>';
                tabelaHTML += '<span style="background:rgba(255,255,255,0.2);padding:4px 10px;border-radius:4px;font-size:14px;">UKUPNO: ' + satiNastavnika + ' č</span>';
                tabelaHTML += '</div>';

// Tabela sa predmetima i odjeljenjima
                tabelaHTML += '<table style="width:100%;border-collapse:collapse;font-size:13px;background:#fff;">';
                tabelaHTML += '<tbody>';

predmetiNastavnika.forEach((pm, pIdx) => {
                    const tipOznaka = pm.p.tipNastave === 'izborna' ? ' (izb.)' : '';
                    const pozadina = pIdx % 2 === 0 ? '#ffffff' : '#f8fafc';
                    const ukupnoSatiZaPredmet = pm.p.satiPoSedmici * pm.odjeljenja.length;

// Red za predmet
                    tabelaHTML += '<tr style="background:' + pozadina + ';border-bottom:1px solid #e2e8f0;">';
                    tabelaHTML += '<td style="padding:8px 12px;border-right:1px solid #cbd5e1;font-weight:600;min-width:120px;font-size:13px;"><strong>' + pm.p.naziv + '</strong>' + tipOznaka + '</td>';

// Odjeljenja sa R/O i Čas
                    pm.odjeljenja.forEach(odj => {
                        tabelaHTML += '<td style="padding:0;border-right:1px solid #cbd5e1;text-align:center;min-width:50px;">';
                        tabelaHTML += '<div style="border-bottom:1px solid #cbd5e1;padding:4px 0;font-size:11px;color:#64748b;">' + odj + '</div>';
                        tabelaHTML += '<div style="padding:4px 0;font-weight:700;font-size:13px;">' + pm.p.satiPoSedmici + '</div>';
                        tabelaHTML += '</td>';
                    });

// Ukupno po predmetu
                    tabelaHTML += '<td style="padding:8px 12px;text-align:center;font-weight:700;background:#e8f0d4;color:#5d6d3d;min-width:50px;font-size:13px;">' + ukupnoSatiZaPredmet + '</td>';
                    tabelaHTML += '</tr>';
                });

tabelaHTML += '</tbody>';
                tabelaHTML += '</table>';
                tabelaHTML += '</div>';

tabelasHTML += tabelaHTML;
            });

sadrzaj.classList.toggle('detaljno-prikazano', prikaziDetaljnuPodjelu);
        }

function napraviUvodnuStranicu() {
            const tipTekstAktiv = "{{NAZIV_AKTIVA}}";
            const popisPredmetaAktiva = dobijPopisPredmetaTekst();
            const verzijaStr = 'v' + verzijaPodataka.broj;
            const datumStr = formatirajDatumVerzije(verzijaPodataka.vrijemeISO);

const ukupnoNastavnika = nastavnici.length;
            const ukupnoSatiAktiva = nastavnici.reduce((sum, n) => sum + izracunajCasove(n.id), 0);
            const ukupnoNormaAktiva = nastavnici.reduce((sum, n) => sum + dobijNormuNastavnika(n), 0);
            
            // Izračunavanje preostalih časova
            let ukupnoKapacitetAktiva = 0;
            for (const kljuc in PREDMETI_CONFIG) {
                ukupnoKapacitetAktiva += PREDMETI_CONFIG[kljuc].kapacitet;
            }
            const preostaloSati = ukupnoKapacitetAktiva - ukupnoSatiAktiva;

let redoviTabele = '';
            let ukupnoPrekovremenih = 0;
            nastavnici.forEach((n, idx) => {
                const sati = izracunajCasove(n.id);
                const normaNastavnika = dobijNormuNastavnika(n);
                const procenat = Math.round((sati / normaNastavnika) * 100);
                const prekoracenje = sati > normaNastavnika;
                const razlika = sati - normaNastavnika;
                if(razlika > 0) ukupnoPrekovremenih += razlika;
                const razlikaStr = razlika === 0 ? '—' : (razlika > 0 ? '+' + razlika + ' č' : razlika + ' č');
                const razlikaStil = razlika > 0 ? 'color:#dc2626; font-weight:700;' : (razlika < 0 ? 'color:#d97706; font-weight:700;' : 'color:#16a34a; font-weight:700;');

let ulogeTekst = '';
                if(n.isRazrednik && n.razredništvoOdj) ulogeTekst += '<span style="font-size:17px; font-weight:700; color:#15803d;">Razrednik/ca ' + n.razredništvoOdj + '</span> ';
                if(n.uloga) ulogeTekst += (ulogeTekst ? '| ' : '') + n.uloga;
                if(!ulogeTekst) ulogeTekst = '—';

const pozadina = idx % 2 === 0 ? '#ffffff' : '#f8fafc';

redoviTabele += '<tr style="background:' + pozadina + ';">' +
                    '<td style="text-align:center; font-weight:700; color:#64748b;">' + (idx + 1) + '.</td>' +
                    '<td style="font-weight:600;">' + n.ime + (n.isRazrednik && n.razredništvoOdj ? ' <span style="display:inline-block;background:#dcfce7;color:#15803d;border:1px solid #bbf7d0;border-radius:4px;font-size:11px;font-weight:700;padding:1px 6px;vertical-align:middle;white-space:nowrap;">Razr. ' + n.razredništvoOdj + '</span>' : '') + '</td>' +
                    '<td style="font-size:15px; color:#475569;">' + ulogeTekst + '</td>' +
                    '<td style="text-align:center; font-weight:700; font-size:16px;">' + sati + '</td>' +
                    '<td style="text-align:center; color:#64748b;">' + normaNastavnika + '</td>' +
                    '<td style="text-align:center; ' + razlikaStil + '">' + razlikaStr + '</td>' +
                    '<td style="text-align:center;">' +
                        '<div style="background:#e2e8f0; border-radius:4px; height:10px; width:100%; min-width:60px; overflow:hidden;">' +
                            '<div style="height:100%; width:' + Math.min(procenat, 100) + '%; background:' + (prekoracenje ? '#dc2626' : (procenat >= 90 ? '#16a34a' : '#3b82f6')) + ';"></div>' +
                        '</div>' +
                        '<div style="font-size:13px; color:#64748b; margin-top:2px;">' + procenat + '%</div>' +
                    '</td>' +
                '</tr>';
            });

return '<div class="stranica-nastavnika">' +
                '<div style="display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #0f172a; padding-bottom:10px; margin-bottom:20px;">' +
                    '<div>' +
                        '<div style="font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#555;">GMS Tuzla • ' + tipTekstAktiv + (popisPredmetaAktiva ? ' • ' + popisPredmetaAktiva : '') + '</div>' +
                        '<div style="font-size:22px; font-weight:700; color:#0f172a; margin-top:4px;">Zbirni pregled podjele časova aktiva</div>' +
                    '</div>' +
                    '<div style="text-align:right; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:5px; padding:4px 10px;">' +
                        '<span style="font-family: monospace; font-size:13px; font-weight:700; color:#1d4ed8;">' + verzijaStr + '</span>' +
                        '<span style="font-size:11px; color:#64748b; margin-left:6px;">• ' + datumStr + '</span>' +
                    '</div>' +
                '</div>' +

'<div style="display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-bottom:20px;">' +
                    '<div style="background:#f0f9ff; border:1px solid #bae6fd; border-radius:8px; padding:12px 16px;">' +
                        '<div style="font-size:11px; font-weight:700; text-transform:uppercase; color:#0369a1; margin-bottom:4px;">Ukupno članova</div>' +
                        '<div style="font-size:28px; font-weight:700; color:#0f172a;">' + ukupnoNastavnika + '</div>' +
                    '</div>' +
                    '<div style="background:#ede9fe; border:1px solid #ddd6fe; border-radius:8px; padding:12px 16px;">' +
                        '<div style="font-size:11px; font-weight:700; text-transform:uppercase; color:#6d28d9; margin-bottom:4px;">Ukupni broj časova</div>' +
                        '<div style="font-size:28px; font-weight:700; color:#0f172a;">' + ukupnoKapacitetAktiva + ' č</div>' +
                    '</div>' +
                    '<div style="background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:12px 16px;">' +
                        '<div style="font-size:11px; font-weight:700; text-transform:uppercase; color:#15803d; margin-bottom:4px;">Raspoređeno časova u aktivu</div>' +
                        '<div style="font-size:28px; font-weight:700; color:#0f172a;">' + ukupnoSatiAktiva + ' č</div>' +
                    '</div>' +
                    '<div style="background:#fefce8; border:1px solid #fef08a; border-radius:8px; padding:12px 16px;">' +
                        '<div style="font-size:11px; font-weight:700; text-transform:uppercase; color:#a16207; margin-bottom:4px;">Preostalo časova u aktivu</div>' +
                        '<div style="font-size:28px; font-weight:700; color:#ef4444;">' + preostaloSati + ' č</div>' +
                    '</div>' +
                '</div>' +

'<table style="width:100%; border-collapse:collapse; font-size:15px;">' +
                    '<thead>' +
                        '<tr style="background:#0f172a; color:#fff;">' +
                            '<th style="padding:10px 8px; text-align:center; width:4%;">#</th>' +
                            '<th style="padding:10px 12px; text-align:left; width:28%;">Ime i prezime</th>' +
                            '<th style="padding:10px 12px; text-align:left; width:28%;">Uloge / Zaduženja</th>' +
                            '<th style="padding:10px 8px; text-align:center; width:10%;">Dodijeljeno</th>' +
                            '<th style="padding:10px 8px; text-align:center; width:10%;">Norma</th>' +
                            '<th style="padding:10px 8px; text-align:center; width:10%;">Prekovremeni</th>' +
                            '<th style="padding:10px 12px; text-align:center; width:10%;">Popunjenost</th>' +
                        '</tr>' +
                    '</thead>' +
                    '<tbody>' + redoviTabele + '</tbody>' +
                    '<tfoot>' +
                        '<tr style="background:#f1f5f9; font-weight:700; border-top:2px solid #cbd5e1;">' +
                            '<td colspan="3" style="padding:10px 12px;">UKUPNO AKTIV</td>' +
                            '<td style="padding:10px 8px; text-align:center; font-size:16px;">' + ukupnoSatiAktiva + ' č</td>' +
                            '<td style="padding:10px 8px; text-align:center;">' + ukupnoNormaAktiva + ' č</td>' +
                            '<td style="padding:10px 8px; text-align:center; color:' + (ukupnoPrekovremenih > 0 ? '#dc2626' : '#16a34a') + ';">' + (ukupnoPrekovremenih > 0 ? '+' + ukupnoPrekovremenih + ' č' : '—') + '</td>' +
                            '<td style="padding:10px 8px; text-align:center;">' + preostaloSati + ' č preostalo</td>' +
                        '</tr>' +
                    '</tfoot>' +
                '</table>' +

'<div style="margin-top:50px; display:flex; justify-content:space-between;">' +
                    '<div style="border-top:1px solid #000; width:220px; text-align:center; font-size:14px; padding-top:5px;">Predsjednik aktiva</div>' +
                    '<div style="border-top:1px solid #000; width:220px; text-align:center; font-size:14px; padding-top:5px;">Direktor/ica škole</div>' +
                '</div>' +
            '</div>';
        }

function printajSveNastavnikeOdjednom() {
            if(nastavnici.length === 0) {
                alert('Nema unesenih članova aktiva za štampanje!');
                return;
            }
            const kontejner = document.getElementById('printPojedinacniKontejner');
            kontejner.innerHTML = '';

kontejner.innerHTML += napraviUvodnuStranicu();

nastavnici.forEach(n => {
                kontejner.innerHTML += napraviStranicuNastavnikaHTML(n);
            });

document.body.classList.add('print-mod-nastavnik');
            window.print();
            setTimeout(() => { document.body.classList.remove('print-mod-nastavnik'); }, 500);
        }

function izvrsiAkcijuForme() {
            if (editNastavnikId) {
                spasiIzmijenjenePodatke();
            } else {
                dodajNastavnika();
            }
        }

function dodajNastavnika() {
            const input = document.getElementById('novoIme');
            const ime = input.value.trim();
            if(!ime) return;

sacuvajCheckpoint();
            
            const chkRazrednik = document.getElementById('chkRazrednik');
            const inputRazredništvo = document.getElementById('inputRazredništvo');
            const selectUloga = document.getElementById('selectUloga');
            const customInput = document.getElementById('inputCustomUloga');

let finalnaUloga = '';
            if (selectUloga.value === 'DRUGO') {
                finalnaUloga = customInput.value.trim();
            } else {
                finalnaUloga = selectUloga.value;
            }

const bojaZaNastavnika = PALETA_NASTAVNIKA[nastavnici.length % PALETA_NASTAVNIKA.length];

const inputNorma = document.getElementById('inputNormaLicna');
            const unosNorme = inputNorma.value.trim();
            const normaLicna = unosNorme !== '' ? (parseInt(unosNorme) || null) : null;
            
            const novi = { 
                id: 'n_' + Date.now(), 
                ime: ime,
                boja: bojaZaNastavnika,
                isRazrednik: chkRazrednik.checked,
                razredništvoOdj: chkRazrednik.checked ? inputRazredništvo.value.trim().toUpperCase() : '',
                uloga: finalnaUloga,
                normaLicna: normaLicna
            };
            
            nastavnici.push(novi);
            ocistiFormu();
            sacuvajUMemoriju(false);
            osvjeziPrikaz();
            postaviAktivnog(novi.id);
        }

function pokreniEditMod(id, event) {
            event.stopPropagation();
            const n = nastavnici.find(nast => nast.id === id);
            if(!n) return;

editNastavnikId = n.id;
            
            document.getElementById('lblFormaNaslov').innerHTML = `<i class="fa-solid fa-user-pen" style="color:#2563eb;"></i> IZMJENA PODATAKA`;
            document.getElementById('btnGlavnaAkcijaForme').innerHTML = `<i class="fa-solid fa-floppy-disk"></i> Spasi izmjene`;
            document.getElementById('btnGlavnaAkcijaForme').style.background = '#2563eb';
            document.getElementById('btnOdustaniEdit').style.display = 'block';

document.getElementById('novoIme').value = n.ime;
            document.getElementById('inputNormaLicna').value = (n.normaLicna !== undefined && n.normaLicna !== null) ? n.normaLicna : '';
            document.getElementById('chkRazrednik').checked = n.isRazrednik;
            
            if(n.isRazrednik) {
                document.getElementById('inputRazredništvo').value = n.razredništvoOdj;
                document.getElementById('inputRazredništvo').style.display = 'inline-block';
            } else {
                document.getElementById('inputRazredništvo').value = '';
                document.getElementById('inputRazredništvo').style.display = 'none';
            }

if(n.uloga === 'Rukovodilac aktiva' || n.uloga === 'Voditelj sekcije' || n.uloga === '') {
                document.getElementById('selectUloga').value = n.uloga;
                document.getElementById('inputCustomUloga').style.display = 'none';
                document.getElementById('inputCustomUloga').value = '';
            } else {
                document.getElementById('selectUloga').value = 'DRUGO';
                document.getElementById('inputCustomUloga').value = n.uloga;
                document.getElementById('inputCustomUloga').style.display = 'block';
            }
            
            postaviAktivnog(n.id);
        }

function spasiIzmijenjenePodatke() {
            const n = nastavnici.find(nast => nast.id === editNastavnikId);
            if(!n) return;

const ime = document.getElementById('novoIme').value.trim();
            if(!ime) return;

sacuvajCheckpoint();

const chkRazrednik = document.getElementById('chkRazrednik');
            const inputRazredništvo = document.getElementById('inputRazredništvo');
            const selectUloga = document.getElementById('selectUloga');
            const customInput = document.getElementById('inputCustomUloga');

const inputNorma = document.getElementById('inputNormaLicna');
            const unosNorme = inputNorma.value.trim();

n.ime = ime;
            n.normaLicna = unosNorme !== '' ? (parseInt(unosNorme) || null) : null;
            n.isRazrednik = chkRazrednik.checked;
            n.razredništvoOdj = chkRazrednik.checked ? inputRazredništvo.value.trim().toUpperCase() : '';
            n.uloga = finalnaUloga;

ponistiEditMod();
            sacuvajUMemoriju(true);
            osvjeziPrikaz();
        }

function ponistiEditMod() {
            editNastavnikId = null;
            document.getElementById('lblFormaNaslov').innerHTML = `<i class="fa-solid fa-user-plus"></i> NOVI ČLAN AKTIVA`;
            document.getElementById('btnGlavnaAkcijaForme').innerHTML = `<i class="fa-solid fa-user-plus"></i> Dodaj u aktiv`;
            document.getElementById('btnGlavnaAkcijaForme').style.background = '#0f172a';
            document.getElementById('btnOdustaniEdit').style.display = 'none';
            ocistiFormu();
        }

function ocistiFormu() {
            document.getElementById('novoIme').value = '';
            document.getElementById('inputNormaLicna').value = '';
            document.getElementById('chkRazrednik').checked = false;
            document.getElementById('inputRazredništvo').value = '';
            document.getElementById('inputRazredništvo').style.display = 'none';
            document.getElementById('selectUloga').value = '';
            document.getElementById('inputCustomUloga').value = '';
            document.getElementById('inputCustomUloga').style.display = 'none';
        }

// Vraća individualnu (korigovanu) normu nastavnika ako je postavljena, inače opštu normu aktiva
        function dobijNormuNastavnika(nastavnik) {
            if(!nastavnik) return NORMA_SATI;
            const lična = nastavnik.normaLicna;
            if(lična !== undefined && lična !== null && lična !== '' && !isNaN(lična) && lična > 0) {
                return lična;
            }
            return NORMA_SATI;
        }

function osvjeziPrikaz(izuzetiCasId = null) {
            const kontejner = document.getElementById('prikazNastavnika');
            kontejner.innerHTML = '';
            
            nastavnici.forEach(n => {
                const sati = izracunajCasove(n.id);
                const normaNastavnika = dobijNormuNastavnika(n);
                const procenat = Math.min((sati / normaNastavnika) * 100, 100);
                let miniBedzevi = '';
                
                for(const casId in zaduzenja) {
                    if(zaduzenja[casId] === n.id) {
                        const dijelovi = casId.split('_');
                        const pKljuc = dijelovi[0] + '_' + dijelovi[1];
                        const odjIme = dijelovi[2];
                        if(!PREDMETI_CONFIG[pKljuc]) continue;
                        miniBedzevi += '<div class="mini-zauzet-bedz" style="border-color: ' + n.boja + '; color: ' + n.boja + '; font-weight: 700;">' + odjIme + ' (' + PREDMETI_CONFIG[pKljuc].satiPoSedmici + 'č)<i class="fa-solid fa-square-xmark" onclick="ukloniZaduzenjeDirektno(\'' + casId + '\', event)"></i></div>';
                    }
                }

function ukloniZaduzenjeDirektno(casId, event) {
            event.stopPropagation();
            sacuvajCheckpoint();
            delete zaduzenja[casId];
            sacuvajUMemoriju(true);
            osvjeziPrikaz();
        }

function osvjeziStatistikuOstatka() {
            const tabelaPregled = document.getElementById('tabelaPredmetaPregledTijelo');
            const tabela = document.getElementById('tabelaKonkursTijelo');
            const tabelaSumarno = document.getElementById('tabelaKonkursSumarnoTijelo');
            tabelaPregled.innerHTML = ''; tabela.innerHTML = '';

let ukupnoSlobodnoUAktivu = 0;
            const ostatakPoNazivu = {};

for (const kljuc in PREDMETI_CONFIG) {
                const p = PREDMETI_CONFIG[kljuc];
                let rasporedjeno = 0;
                let slobodna = [];

p.odjeljenja.forEach(odj => {
                    if (zaduzenja[p.id + '_' + odj]) { rasporedjeno += p.satiPoSedmici; }
                    else { slobodna.push(odj); }
                });

const ostatak = p.kapacitet - rasporedjeno;
                const tipOznakaTekst = p.tipNastave === 'izborna' ? 'Izborna' : 'Redovna';
                const procenat = p.kapacitet > 0 ? Math.round((rasporedjeno / p.kapacitet) * 100) : 0;
                const potpuno = ostatak <= 0;
                const bojaBara = potpuno ? '#16a34a' : (procenat >= 50 ? '#3b82f6' : '#ef4444');

if (ostatak > 0) {
                    ukupnoSlobodnoUAktivu += ostatak;
                    if (!ostatakPoNazivu[p.naziv]) { ostatakPoNazivu[p.naziv] = 0; }
                    ostatakPoNazivu[p.naziv] += ostatak;
                }

// --- Red u novoj tabeli "Pregled raspodjele po predmetima" (svi predmeti) ---
                const trPregled = document.createElement('tr');
                trPregled.style.borderBottom = '1px solid #e2e8f0';
                if(potpuno) trPregled.style.background = '#f0fdf4';
                trPregled.innerHTML =
                    '<td style="padding:8px 10px;"><span style="display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--boja-' + p.id + '); margin-right:6px;"></span><strong>' + p.naziv + '</strong> <span style="color:#64748b;">(' + p.razred + '. r)</span></td>' +
                    '<td style="padding:8px 10px; text-align:center;"><span class="bedz-tip-nastave ' + p.tipNastave + '">' + tipOznakaTekst + '</span></td>' +
                    '<td style="padding:8px 10px; text-align:center; white-space:nowrap;"><strong>' + rasporedjeno + '</strong> / ' + p.kapacitet + ' č</td>' +
                    '<td style="padding:8px 10px; min-width:140px;">' +
                        '<div style="display:flex; align-items:center; gap:8px;">' +
                            '<div style="background:#e2e8f0; border-radius:4px; height:9px; flex:1; overflow:hidden;">' +
                                '<div style="height:100%; width:' + Math.min(procenat, 100) + '%; background:' + bojaBara + ';"></div>' +
                            '</div>' +
                            '<span style="font-size:12px; font-weight:700; color:' + bojaBara + '; white-space:nowrap;">' + procenat + '%</span>' +
                            (potpuno ? '<i class="fa-solid fa-circle-check" style="color:#16a34a;" title="Potpuno raspoređeno"></i>' : '') +
                        '</div>' +
                    '</td>' +
                    '<td style="padding:8px 10px; font-size:12px; color:#64748b;">' + (slobodna.length > 0 ? slobodna.join(', ') : '<span style="color:#16a34a; font-weight:600;">— nema slobodnih —</span>') + '</td>';
                tabelaPregled.appendChild(trPregled);

// --- Red u postojećoj tabeli za konkurs (samo predmeti sa ostatkom) ---
                if (ostatak > 0) {
                    const tr = document.createElement('tr');
                    tr.innerHTML = '<td>' + p.naziv + ' (' + p.razred + '. razred)</td>' +
                                   '<td><span class="bedz-tip-nastave ' + p.tipNastave + '">' + tipOznakaTekst + '</span></td>' +
                                   '<td><strong style="color:#ef4444;">' + ostatak + ' č</strong></td>' +
                                   '<td>' + slobodna.join(', ') + '</td>';
                    tabela.appendChild(tr);
                }
            }

// --- Sumarna tabela za konkurs: preostali (neraspoređeni) fond sabran po nazivu predmeta ---
            if (tabelaSumarno) {
                tabelaSumarno.innerHTML = '';
                const naziviSaOstatkom = Object.keys(ostatakPoNazivu).sort((a, b) => a.localeCompare(b, 'bs'));

naziviSaOstatkom.forEach(naziv => {
                    const tr = document.createElement('tr');
                    tr.innerHTML =
                        '<td><strong>' + naziv + '</strong></td>' +
                        '<td class="kol-sati-sumarno">' + ostatakPoNazivu[naziv] + ' č</td>';
                    tabelaSumarno.appendChild(tr);
                });

if (tabelaSumarno.innerHTML === '') {
                    tabelaSumarno.innerHTML = '<tr><td colspan="2" style="text-align:center; font-style:italic; color:#10b981; padding:15px; background:#fff;"><i class="fa-solid fa-circle-check"></i> Svi časovi iz plana i programa su uspješno raspoređeni! Nema potrebe za konkursom.</td></tr>';
                }
            }

const sumaPanelSati = document.getElementById('sumaSlobodnihSatiAktiva');
            if(sumaPanelSati) {
                sumaPanelSati.innerText = ukupnoSlobodnoUAktivu;
            }

if(tabelaPregled.innerHTML === '') {
                tabelaPregled.innerHTML = '<tr><td colspan="5" style="text-align:center; font-style:italic; color:#94a3b8; padding:15px;">Nema definisanih predmeta u konfiguraciji aktiva.</td></tr>';
            }

if(tabela.innerHTML === '') {
                tabela.innerHTML = '<tr><td colspan="4" style="text-align:center; font-style:italic; color:#10b981; padding:15px;"><i class="fa-solid fa-circle-check"></i> Svi časovi iz plana i programa su uspješno raspoređeni! Nema potrebe za konkursom.</td></tr>';
            }

azurirajZbirPoNazivuPredmeta();
        }

// Zbir ukupnog fonda časova po nazivu predmeta, sabrano preko svih razreda i tipova nastave (redovna + izborna)
        function azurirajZbirPoNazivuPredmeta() {
            const tijelo = document.getElementById('tabelaZbirPoPredmetuTijelo');
            const celijaUkupno = document.getElementById('tabelaZbirPoPredmetuUkupno');
            if(!tijelo) return;

const zbirPoNazivu = {};
            let ukupnoAktiv = 0;

for (const kljuc in PREDMETI_CONFIG) {
                const p = PREDMETI_CONFIG[kljuc];
                if(!zbirPoNazivu[p.naziv]) {
                    zbirPoNazivu[p.naziv] = { ukupno: 0, sastav: [] };
                }
                zbirPoNazivu[p.naziv].ukupno += p.kapacitet;
                const tipKratko = p.tipNastave === 'izborna' ? 'IN' : 'redovna';
                zbirPoNazivu[p.naziv].sastav.push(p.razred + '. r · ' + tipKratko + ' · ' + p.kapacitet + ' č');
                ukupnoAktiv += p.kapacitet;
            }

const naziviSortirano = Object.keys(zbirPoNazivu).sort((a, b) => a.localeCompare(b, 'bs'));

tijelo.innerHTML = '';
            naziviSortirano.forEach(naziv => {
                const stavka = zbirPoNazivu[naziv];
                const tr = document.createElement('tr');
                tr.style.borderBottom = '1px solid #e2e8f0';
                tr.innerHTML =
                    '<td style="padding:8px 10px;"><strong>' + naziv + '</strong></td>' +
                    '<td style="padding:8px 10px; text-align:center; white-space:nowrap;"><strong>' + stavka.ukupno + '</strong> č</td>' +
                    '<td style="padding:8px 10px; font-size:12px; color:#64748b;">' + stavka.sastav.join('  |  ') + '</td>';
                tijelo.appendChild(tr);
            });

if(tijelo.innerHTML === '') {
                tijelo.innerHTML = '<tr><td colspan="3" style="text-align:center; font-style:italic; color:#94a3b8; padding:15px;">Nema definisanih predmeta u konfiguraciji aktiva.</td></tr>';
            }

if(celijaUkupno) celijaUkupno.innerText = ukupnoAktiv + ' č';
        }

function spremiPodjeluKaoFajl() {
            const danas = new Date();
            const datumStr = danas.toISOString().slice(0, 10);
            const nazivAktivaTekst = document.querySelector('.GMS-glavni-naslov h1').textContent.trim();
            const podrazumijevanoIme = `podjela_${nazivAktivaTekst.toLowerCase().replace(/[^a-z0-9]+/g, '_')}_${datumStr}`;
            const naziv = prompt('Unesite naziv fajla (bez .html):', podrazumijevanoIme);
            if (naziv === null) return;
            const imeFajla = (naziv.trim() || podrazumijevanoIme).replace(/[\\/:*?"<>|]/g, '_') + '.html';

// Uzimamo cijeli HTML izvorni kod i ubacujemo trenutne podatke direktno kao početne vrijednosti
            let html = document.documentElement.outerHTML;

// Zamjena IZMEĐU markera (a markeri ostaju netaknuti) — ovo radi pouzdano bez obzira
            // da li je fajl prvi put spremljen ili je već ranije spremljen/otvoren i sadrži
            // već "ohardkodirane" vrijednosti od ranije. Stari pristup (traženje tačnog originalnog
            // izraza sa localStorage.getItem(...)) bi prestao raditi nakon prvog spremanja, jer bi
            // ta linija već bila zamijenjena — pa bi drugo spremanje tiho zadržalo stare podatke.
            function zamijeniIzmedjuMarkera(izvor, oznaka, novaVrijednost) {
                const pocetak = `/*@${oznaka}_S@*/`;
                const kraj = `/*@${oznaka}_E@*/`;
                const escape = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                const regex = new RegExp(escape(pocetak) + '[\\s\\S]*?' + escape(kraj));
                if (!regex.test(izvor)) {
                    console.warn(`Marker ${oznaka} nije pronađen — podaci za ovu stavku možda nisu ažurirani u spremljenom fajlu.`);
                    return izvor;
                }
                return izvor.replace(regex, pocetak + novaVrijednost + kraj);
            }

html = zamijeniIzmedjuMarkera(html, 'NS', `let NORMA_SATI = ${JSON.stringify(NORMA_SATI)};`);
            html = zamijeniIzmedjuMarkera(html, 'PK', `let PREDMETI_CONFIG = ${JSON.stringify(PREDMETI_CONFIG)};`);
            html = zamijeniIzmedjuMarkera(html, 'NA', `let nastavnici = ${JSON.stringify(nastavnici)};`);
            html = zamijeniIzmedjuMarkera(html, 'ZA', `let zaduzenja = ${JSON.stringify(zaduzenja)};`);
            html = zamijeniIzmedjuMarkera(html, 'VP', `let verzijaPodataka = ${JSON.stringify(verzijaPodataka)};`);

const blob = new Blob([html], { type: 'text/html;charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = imeFajla;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);

alert(`✅ Podjela je sačuvana kao:\n"${imeFajla}"\n\nFajl možete otvoriti u browseru u bilo koje vrijeme — podaci su ugrađeni direktno u njega.`);
        }

// Print event - zaglavlja kartica nastavnika moraju biti crna
        window.addEventListener('beforeprint', function() {
            document.querySelectorAll('.kartica-nastavnika-header').forEach(function(el) {
                el.setAttribute('data-orig-bg', el.style.background);
                el.setAttribute('data-orig-color', el.style.color);
                el.style.background = '#fff';
                el.style.color = '#000';
                el.style.border = '2px solid #000';
                el.querySelectorAll('span').forEach(function(s) {
                    s.style.color = '#000';
                    s.style.background = 'transparent';
                    s.style.border = '1px solid #ccc';
                });
            });
        });
        window.addEventListener('afterprint', function() {
            document.querySelectorAll('.kartica-nastavnika-header').forEach(function(el) {
                el.style.background = el.getAttribute('data-orig-bg') || '';
                el.style.color = el.getAttribute('data-orig-color') || '';
                el.style.border = '';
                el.querySelectorAll('span').forEach(function(s) {
                    s.style.color = '';
                    s.style.background = '';
                    s.style.border = '';
                });
            });
        });