/* е-Администрација ПВШ Свилајнац — основни стил */
:root {
    --primarna: #1e5c2e;
    --primarna-svetla: #2e7d43;
    /* Наранџаста из Ненадовог предлога `prijava-predlog.html` (`--accent`).
       Засад је користи само прстен око грба у заглављу; стоји овде да, ако
       се палета усвоји шире, има једно место за измену. */
    --akcenat: #e76f51;
    /* светлији тон истог акцента (`--accent-soft` из истог предлога) — за
       наранџасти текст НА ТАМНОЈ подлози, где основни тон нема контраст */
    --akcenat-blagi: #f2a089;
    --pozadina: #f4f6f4;
    --kartica: #ffffff;
    --tekst: #1d2621;
    --ivica: #d8dfd9;
    --greska: #b3261e;
    --info-pozadina: #e8f1e9;
    /* заједнички речник — све стране користе ове вредности, не своје */
    --prigusen-tekst: #5b6b60;
    --ivica-blaga: #eef2ef;
    --pozadina-blaga: #f8faf9;
    --istaknuto: #eef4f0;
    --upozorenje: #8a5a00;
    --upozorenje-pozadina: #fdf3e2;
    --razmak: 12px;
    --radijus: 8px;

    /* ── ТИПОГРАФСКА ЛЕСТВИЦА · 05.08.2026 ─────────────────────────────
       Ненад: „погледај величину и тип фонта на овим страницама — различити
       су, на једној овако на другој онако."
       Мерено пре измене: СЕДАМНАЕСТ различитих величина (9.5 · 10 · 10.5 ·
       11 · 11.5 · 12 · 12.5 · 13 · 13.5 · 14 · 15 · 15.5 · 17 · 18 · 19 ·
       20 · 22px). Нису биле избор него накупљање.
       Сад их је ШЕСТ и ништа између. Свака страна узима одавде. */
    --f-naslov:   20px;   /* наслов стране */
    --f-odeljak:  16px;   /* наслов одељка */
    --f-podnas:   14px;   /* поднаслов, водећи текст */
    --f-osnovni:  13px;   /* основни текст, дугмад, поља */
    --f-tabela:   12px;   /* табеле, помоћни текст */
    --f-oznaka:   11px;   /* значке, ситне ознаке */
    --visina-reda: 1.45;

    /* ── КОНТРАСТ ──────────────────────────────────────────────────────
       Ненад: „неке друге ствари се једва виде." Пригушени текст и ивице
       били су преблиједи да носе податак. */
    --prigusen-jaci: #4d5c53;
    --ivica-jaka: #c3cec7;

    /* Зелена се повлачи из ИСПУНА у линију и текст. Пуна остаје само за
       ЈЕДНУ главну радњу по екрану и за стање (где си, шта је изабрано).
       Тиме боја носи значење уместо да виче. */
    --primarna-tiha: #2a5f39;
    /* О-52 · три врсте предмета, увек истом бојом, на СВАКОЈ страни.
       Ненад, 05.08.2026: „опште, стручни као НПП да буде одвојено неком бојом,
       и плус изборни другом бојом — свуда је то правило." */
    --sek-opste: #eaf0f7;          /* општеобразовни */
    --sek-opste-tekst: #1f4c7a;
    --sek-strucni: #e9f2ea;        /* стручни */
    --sek-strucni-tekst: #1e5c2e;
    --sek-izborni: #fbf0e4;        /* изборни, обе врсте */
    --sek-izborni-tekst: #8a5a00;
}
* { box-sizing: border-box; }
/* Скривање мора да надјача сваки `display` из речника. Без овога претрага
   „не ради": .md-stavka носи display:block, ауторско правило побеђује
   [hidden] из прегледача, па ставка остаје видљива иако је скривена. */
[hidden] { display: none !important; }
body {
    margin: 0;
    font-family: "Segoe UI", "Noto Sans", Arial, sans-serif;
    background: var(--pozadina);
    color: var(--tekst);
    font-size: var(--f-osnovni);
    line-height: var(--visina-reda);
    -webkit-font-smoothing: antialiased;
}

/* Наслови иду по лествици и не гоје се. Пре измене су били 22 · 20 · 19 · 18
   · 17 — пет вредности за три нивоа. */
h1 { font-size: var(--f-naslov);  font-weight: 600; margin: 0 0 14px; letter-spacing: -.01em; }
h2 { font-size: var(--f-odeljak); font-weight: 600; margin: 22px 0 10px; }
h3 { font-size: var(--f-podnas);  font-weight: 600; margin: 0 0 8px; }
a { color: var(--primarna); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ЗАГЛАВЉЕ · исти зелени градијент као страна за пријаву и Дом ученика.
   Ненад, 16.08.2026: „овакав зелени градијент са истом палетом имплементирај
   у заглављу система."

   Боје су исте као у Дому — `#1b4332 → #1a2e2a`, са наранџастим и зеленим
   одсјајем. ЈЕДИНА разлика је угао: тамо је панел висок и узак па иде 160°,
   овде је трака широка и ниска (88 px), где би 160° изгледало равно. Зато
   100°, да се прелив види по ДУЖИНИ траке. Одсјаји су померени у углове
   траке, не панела.

   Коса шара (135°, бело 2,5 %, пруга 2 px, корак 14 px) остаје изнад свега,
   иста као тамо.

   `--primarna` (#1e5c2e) се овим НЕ мења и даље служи на 38 места — дугмад,
   везе, наслови. Прелазак целе апликације на палету Дома је засебна одлука. */
.zaglavlje {
    background-color: #1b4332;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px),
        radial-gradient(60% 180% at 0% 100%, rgba(231, 111, 81, .16), transparent 60%),
        radial-gradient(55% 160% at 100% 0%, rgba(64, 145, 108, .45), transparent 62%),
        linear-gradient(100deg, #1b4332 0%, #1a2e2a 100%);
    color: #fff;
    padding: 0 16px;
}
.zaglavlje-unutra {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    /* Ненад, 09.08.2026: „узак је овај део горе… требало би да се повећа
       заглавље, шире и лепше би деловало." Са 52 на 76 px — толико тражи грб
       од 56 px са дисањем изнад и испод, а и блок корисника у два реда стаје
       без гужве. */
    min-height: 88px;
    flex-wrap: wrap;
}
.zaglavlje .logo { color: #fff; display: flex; align-items: center; gap: 13px; }
.zaglavlje .logo:hover { text-decoration: none; }
.logo-znak { display: flex; color: #fff; opacity: .95; }
.logo-tekst { display: flex; flex-direction: column; line-height: 1.25; }
/* ── ЈЕДИНО МЕСТО СА СОПСТВЕНОМ ВЕЛИЧИНОМ, И НАМЕРНО (16.08.2026) ────────
   Ненад: „повећај слова имена школе за мало." Величине НИСУ узете из
   заједничке скале (`--f-podnas` 14 px / `--f-tabela` 12 px) јер би их подизање
   померило свуда — скала постоји баш зато што је 03.08. затечено седамнаест
   различитих величина. Ово је знак школе, не текст стране, па има своје.

   Мерено у прегледачу пре избора: заглавље остаје високо 88 px за све
   пробане величине до 18 px, и ниједна не прелама натпис у два реда. Цена је
   само у томе где заглавље почне да се гужва при сужавању прозора:

       данас 14/12  испод 750 px
       15/13        испод 770 px
       16/13        испод 790 px   ← узето

   Четрдесет пиксела помака, у опсегу таблета усправно; испод 620 px ионако
   важи мобилно правило које други ред крије. */
.logo-tekst strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
/* БЕЛО, не бледозелено. Ненад, 09.08.2026: „пошто је зелена позадина, постави
   слова у бело." Разлику у важности носе ВЕЛИЧИНА и размак слова, не испрана
   боја — тако други ред остаје читак и на пројектору и на слабом екрану. */
.logo-tekst > span { font-size: 13px; color: #fff; opacity: .85; }
/* ТРЕЋИ РЕД · име програма, наранџасто (16.08.2026).
   Облик из Ненадовог `prijava-predlog.html` (`.brand-name span`): верзал,
   размакнута слова, тон акцента. Боја је СВЕТЛИЈИ акцент (#f2a089), не основни
   #e76f51 — основни на тамнозеленом заглављу даје слаб контраст, а овај је
   мерен и стоји (види проверу у `alati/testovi.php`).
   Размак слова је 1,6 px, не 3,5 као у предлогу: тамо стоји уз две речи, овде
   уз пуну реченицу коју би 3,5 развукло преко пола заглавља.

   ДВЕ КЛАСЕ У СЕЛЕКТОРУ, И ТО МОРА: изнад стоји `.logo-tekst > span` (класа +
   елемент), што је тежина 0-1-1 и туче голо `.logo-sistem` (0-1-0). Први
   покушај 16.08. управо тако је остао БЕО уместо наранџастог. Иста замка коју
   већ носи `.tabela td.d`. */
.logo-tekst > span.logo-sistem {
    font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
    font-weight: 700; color: var(--akcenat-blagi); opacity: 1; }
@media (max-width: 620px) { .logo-tekst > span.logo-sistem { display: none; } }

.zaglavlje-desno { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
/* Линкови ДИРЕКТНО у заглављу су светли — они стоје на зеленом. Мени корисника
   је бела картица и има своје правило ниже; зато `> a`, а не `a`. Раније је
   овде стајало `.zaglavlje-desno a`, па је бојило и ставке менија: измерено
   09.08.2026 — #dcebdd на белом даје контраст 1,24 : 1, а најмањи читљив је
   4,5 : 1. Ненад: „изабрао си неку светлу да се скоро и не види." */
.zaglavlje-desno > a { color: #dcebdd; display: flex; align-items: center; gap: 5px; font-size: var(--f-osnovni); }
.zaglavlje-desno > a:hover { color: #fff; text-decoration: none; }
.korisnik-info { color: #fff; font-size: var(--f-osnovni); }

/* ══ ГРБ, АВАТАР И МЕНИ КОРИСНИКА · 09.08.2026 ═══════════════════════════
   Ненад је послао прави грб школе (759×760, са алфом) — у ДВЕ верзије:
   `grb-belo.png` за тамну подлогу и `grb-zeleno.png` за белу — и
   тражио блок корисника десно, по узору на портал: улога ситно изнад, име
   испод, аватар десно, клик отвара мени. Тиме два стална линка („Лозинка",
   „Одјава") излазе из заглавља, а Администрација силази са дна леве траке
   овамо — она није радни модул него системска подешавања. */
/* Грб је зелене линије на провидној подлози — на зеленом заглављу би нестао,
   зато бели диск испод њега. Ненад, 09.08.2026: „грб је мали, као флека на
   зеленој позадини." Са 40 на 56 px — тек ту се прочита да је то печат са
   књигом, трактором и класом, а не мрља. Заглавље је зато подигнуто на 76 px. */
/* БЕЗ БЕЛОГ ДИСКА. Диск је постојао само зато што је зелени грб на зеленој
   подлози нестајао. Од 09.08.2026. заглавље носи БЕЛУ верзију грба, па подлога
   не треба — а са диском се бела слова у њему изгубе (Ненад: „сада се не види
   јер си поставио белу позадину"). */
/* ГРБ У ЗАГЛАВЉУ · зелена верзија на белом кругу (16.08.2026).
   Први покушај 09.08. је пао јер је подлога била тек нешто већа од грба, па
   су се зелена слова стапала са ободом. Зато диск сад има СВОЈУ попуну (грб
   је унутра мањи), пун обод и благу сенку — тако се чита као бели круг на
   зеленој траци, а не као мрља иза грба.

   ВЕЛИЧИНА 84 px НИЈЕ ОДАБРАНА ПО ОСЕЋАЈУ. Ненад, 16.08.2026: „повећај мало
   грб." Мерено у прегледачу: заглавље је високо 88 px и остаје 88 док је грб
   до 84 px; на 92 px почиње да гура заглавље наниже. Дакле 84 је највеће што
   стаје а да се распоред не помери — четвртина крупније од пређашњих 68.

   НАРАНЏАСТИ ПРСТЕН (16.08.2026) иде као `border`, не као још једна слика —
   тако прати величину сам и остаје оштар на сваком увећању. Боја је `--akcenat`
   (#e76f51), узета из Ненадовог `prijava-predlog.html`.

   У предлогу прстен стоји на 60 % провидности, али тамо лежи на ТАМНОЈ подлози
   и око празног круга. Овде лежи на БЕЛОМ диску, где провидна ивица омекша до
   невидљивости — исти разлог због кога је зелени грб 09.08. пропао на диску.
   Зато пун тон. */
.logo-grb { width: 84px; height: 84px; object-fit: contain; display: block;
            background: #fff; border-radius: 50%; padding: 6px;
            /* 3 → 2 → 1,5 px (Ненад, 16.08.2026, двапут: „превише дебео", па
               „тањи"). Сад је ИСТО као на логотипу Дома, где такође стоји
               1,5 px — прстен само раздваја грб од подлоге, не тражи пажњу.
               Испод овога иде 1 px, али тада на обичном екрану почне да се
               губи у сенци круга. */
            border: 1.5px solid var(--akcenat);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .28); }
@media (max-width: 620px) { .logo-grb { width: 56px; height: 56px; padding: 4px;
                                        border-width: 2px; } }

/* Аватар: иницијали на боји изведеној из имена (види `avatar()` у ui.php).
   Боја долази кроз `--av`, величина кроз `--av-px`, па иста класа служи и у
   заглављу и у списковима. */
.avatar {
    width: var(--av-px, 34px); height: var(--av-px, 34px);
    border-radius: 50%; background: var(--av, #d4a017); color: var(--av-tekst, #2e2206);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: calc(var(--av-px, 34px) * .40); font-weight: 700;
    letter-spacing: .02em; flex: 0 0 auto; user-select: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,.45);
}
/* У ЗАГЛАВЉУ круг нема своју боју — пропушта градијент иза себе
   (Ненад, 16.08.2026: „остави бела слова и овај круг, а позадина да буде од
   заглавља"). Круг се и даље види, али преко танког светлог обода уместо
   пуне подлоге, па иницијали делују као део траке а не као налепница на њој.

   Само у заглављу, и то намерно: исти аватар стоји и на списку старешина, на
   БЕЛОЈ подлози — тамо би прозирна позадина оставила бела слова на белом.
   Тамо остаје пуна зелена из палете.

   Бела слова на градијенту заглавља дају 11 до 14 : 1, дакле са великом
   резервом. */
.zaglavlje .avatar {
    background: transparent;
    color: #fff;
    box-shadow: none;
    border: 1.5px solid rgba(255, 255, 255, .55);
}

/* Мени је `<details>` — отвара се без JavaScript-а. */
.korisnik-meni { position: relative; }
.korisnik-meni > summary {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    list-style: none; padding: 3px 4px 3px 8px; border-radius: 22px;
}
.korisnik-meni > summary::-webkit-details-marker { display: none; }
.korisnik-meni > summary:hover { background: rgba(255,255,255,.12); }
.korisnik-meni[open] > summary { background: rgba(255,255,255,.18); }
.korisnik-tekst { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
/* И улога је БЕЛА — разлику носи величина и размак слова, не испрана боја
   (Ненад: „постави слова у бело"). */
.korisnik-uloga { font-size: var(--f-oznaka); color: #fff; opacity: .8; letter-spacing: .09em; }
.korisnik-ime   { font-size: var(--f-osnovni); color: #fff; font-weight: 600; }

.meni-panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    min-width: 250px; background: var(--kartica); color: var(--tekst);
    border: 1px solid var(--ivica); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18); overflow: hidden;
}
.meni-glava {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    background: var(--pozadina-blaga); border-bottom: 1px solid var(--ivica);
}
.meni-glava strong { display: block; font-size: var(--f-osnovni); }
.meni-glava .prigusen { font-size: var(--f-oznaka); }
.meni-panel a {
    display: flex; align-items: center; gap: 9px; padding: 10px 14px;
    color: var(--tekst); font-size: var(--f-osnovni);
}
.meni-panel a:hover { background: var(--info-pozadina); text-decoration: none; }
.meni-panel a.meni-odjava { border-top: 1px solid var(--ivica); color: var(--greska); }
.zaglavlje-desno .godina {
    background: rgba(255,255,255,.18);
    border-radius: 10px;
    padding: 2px 9px;
    font-size: var(--f-tabela);
    color: #fff;
}
/* Падајући избор школске године — иста значка, само што се може отворити.
   Стрелица је сопствена, да поље изгледа исто у сваком прегледачу. */
.godina-forma { margin: 0; display: flex; }
.godina-forma select {
    appearance: none; -webkit-appearance: none;
    background: rgba(255,255,255,.18) no-repeat right 9px center;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 10px;
    padding: 5px 28px 5px 11px; font: inherit; font-size: var(--f-tabela);
    cursor: pointer; line-height: 1.2;
}
.godina-forma select:hover { background-color: rgba(255,255,255,.28); }
.godina-forma select:focus { outline: 2px solid #fff; outline-offset: 1px; }
/* Списак се отвара у прегледачевом слоју — тамо мора бити читак, зато тамна
   слова на белом, не бела на белом. */
.godina-forma select option { color: var(--tekst); background: #fff; }
@media (max-width: 620px) {
    .logo-tekst strong { font-size: var(--f-podnas); }
    .logo-tekst span, .zaglavlje-desno .korisnik-info, .zaglavlje-desno a span { display: none; }
}

/* Овде је до 09.08.2026. стајало ПОНОВЉЕНО правило `.zaglavlje-desno a`, које
   је — јер долази касније у фајлу — надјачавало боју ставки менија корисника.
   Обрисано: горње правило важи, и сад гађа само линкове ДИРЕКТНО у заглављу. */

/* ── оквир: лева трака + садржај ─────────────────────────────────────── */
.okvir { display: flex; align-items: flex-start; gap: 0; }
/* Широка табела скролује САДРЖАЈ, не целу страну — иначе водоравни клизач
   одвуче и леву траку с екрана. Мерено: списак корисника је 858 px у
   колони од 707 px и гурао је документ на 1118 px. */
/* `clip` уместо `auto` (17.08.2026) — иначе `position: sticky` не ради ни на
   једном детету. Свако `overflow` осим `visible` и `clip` прави оквир за
   померање, па се лепљиви елемент лепи ЗА ЊЕГА, а не за прозор; глава о човеку
   на Додели је зато остајала на месту. `clip` задржава заустављање прелива, а
   не ствара тај оквир — и једини је од четири који допушта `overflow-y:
   visible`. Широке табеле и даље имају своје померање кроз `.omot-tab`. */
.sadrzaj { flex: 1; min-width: 0; max-width: 1180px; margin: 22px auto; padding: 0 22px; overflow-x: clip; }
.okvir.bez-rail .sadrzaj { margin: 24px auto; }

/* ══ ЛЕВА ТРАКА · ДВОСТЕПЕНА · 09.08.2026 ════════════════════════════════
   Мерено пре измене, прозор 900 px: стара трака са 12 модула и једним
   отвореним тражила је 1014 px — преливала се за 114. Модули и делови су
   делили исти ступац, па је свака нова страна гурала све остало.

   Сад су раздвојени:
     `.rail-stubac`  само иконице модула  → расте бројем МОДУЛА
     `.rail-panel`   делови отвореног     → расте бројем ДЕЛОВА

   Дугме `.rail-siri` разлаже стубац у пуне називе (`body.rail-sireno`), а
   избор се памти у `localStorage` — Ненадова допуна уз модел Б. */
.rail { display: flex; align-self: flex-start; position: sticky; top: 0; }

.rail-stubac {
    flex: 0 0 56px; width: 56px;
    height: 100vh; overflow-y: auto; overflow-x: hidden;
    background: var(--pozadina-blaga); border-right: 1px solid var(--ivica);
    padding: 10px 0; display: flex; flex-direction: column; gap: 2px;
}
/* Анимација ширења важи САМО пошто је страна нацртана (`rail-spreman` додаје
   `rail.js` после првог кадра). Без тога би се при сваком учитавању видело
   како трака расте од уске до раширене — а стање сад стиже са сервера, па нема
   шта да се анимира. Клик на дугме и даље клизи. */
body.rail-spreman .rail-stubac { transition: width .12s ease, flex-basis .12s ease; }
body.rail-sireno .rail-stubac { flex-basis: 216px; width: 216px; }

.rail-ikonica, .rail-siri {
    display: flex; align-items: center; gap: 11px;
    min-height: 40px; padding: 8px 0 8px 15px;
    color: var(--prigusen-tekst); border-left: 3px solid transparent;
    font: inherit; font-size: var(--f-osnovni); text-align: left;
    background: none; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer;
    white-space: nowrap;
}
.rail-ikonica .ikona, .rail-siri .ikona { flex: none; }
.rail-ikonica:hover, .rail-siri:hover { background: var(--istaknuto); color: var(--tekst); text-decoration: none; }
.rail-ikonica.tu {
    background: var(--kartica); border-left-color: var(--primarna);
    color: var(--primarna); font-weight: 600;
}
.rail-ikonica.nema { opacity: .45; cursor: default; }
.rail-siri { color: var(--tekst); margin-bottom: 4px; }

/* Назив се види само у раширеном облику; у ускoм стуб носи `title`, па име
   искочи на прелазу мишем. */
.rail-ime { display: none; overflow: hidden; text-overflow: ellipsis; }
body.rail-sireno .rail-ime { display: block; }

/* Област (Систематизација, Остали модули) — у ускoм облику само танка црта,
   у раширеном и наслов. Црта постоји увек, да се групе не слију. */
.rail-oblast-crta {
    margin: 6px 12px 2px; border-top: 1px solid var(--ivica); padding-top: 5px;
    font-size: var(--f-oznaka); letter-spacing: .1em; text-transform: uppercase;
    color: var(--prigusen-tekst); font-weight: 600; min-height: 1px;
}
/* Администрација иде ОДМАХ ИЗА последњег модула, одвојена цртом — не лепи се
   за дно екрана. Ненад, 09.08.2026: „да се лепи на крај у левом менију, а не
   да иде увек на дно стране."
   У праву је: лепљење за дно има смисла само кад списак скролује, а овај не
   скролује (12 модула троши 532 px од 900). Празнина између последњег модула и
   точкића само тера око да путује, а Администрација изгледа откачено уместо
   издвојено. Црта и даље говори да није у току посла са осталим модулима. */
.rail-ikonica.rail-dole {
    margin-top: 6px; border-top: 1px solid var(--ivica); padding-top: 12px;
}

/* ПАНЕЛ ДЕЛОВА — увучен и у ДРУГОЈ нијанси од стуба, да се одмах види да је
   ово садржај модула а не сам модул (Ненад: „нека буде друга нијанса да би се
   разликовао од модула"). */
.rail-panel {
    flex: 0 0 210px; width: 210px; height: 100vh; overflow-y: auto;
    background: var(--kartica); border-right: 1px solid var(--ivica);
    padding: 12px 0 10px; display: flex; flex-direction: column; gap: 1px;
}
.rail-panel-glava {
    padding: 2px 14px 10px; display: flex; flex-direction: column; gap: 2px;
    border-bottom: 1px solid var(--ivica); margin-bottom: 6px;
}
.rail-panel-ime {
    font-size: var(--f-oznaka); letter-spacing: .1em; text-transform: uppercase;
    color: var(--primarna); font-weight: 700;
}
.rail-panel-stanje {
    font-size: var(--f-oznaka); color: var(--prigusen-tekst);
    font-variant-numeric: tabular-nums;
}
.rail-deo {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 12px 7px 18px; font-size: var(--f-osnovni);
    color: var(--prigusen-tekst); border-left: 3px solid transparent; line-height: 1.35;
}
.rail-deo:hover { background: var(--istaknuto); color: var(--tekst); text-decoration: none; }
.rail-deo.tu {
    background: var(--info-pozadina); border-left-color: var(--primarna);
    color: var(--tekst); font-weight: 600;
}
.rail-deo.bledo { color: #93a398; }
.rail-deo .ikona { flex: none; }
/* Наслов групе у панелу (17.08.2026) — дели годишњи ток од основа и резултата.
   Није веза, зато нема ни увлачење за иконицу ни превлаку на прелазу мишем.
   Размак изнад раздваја групу; први наслов га не добија, да панел не почне
   празнином. */
.rail-deo-grupa {
    padding: 14px 12px 4px 18px; margin-top: 6px;
    border-top: 1px solid var(--ivica);
    font-size: var(--f-oznaka); font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: #93a398;
}
.rail-deo-grupa:first-child { margin-top: 0; border-top: 0; padding-top: 4px; }
/* само натпис се шири; кружић стања остаје своје величине — без `:not(.kolut)`
   кружић се развуче у елипсу */
.rail-deo > span:not(.kolut) { flex: 1; min-width: 0; }
.rail-znak { display: flex; align-items: center; color: var(--prigusen-tekst); }

/* кружић стања корака */
.kolut {
    width: 18px; height: 18px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--f-oznaka); font-weight: 600; font-variant-numeric: tabular-nums;
}
.kolut.ok   { background: var(--info-pozadina); color: var(--primarna); }
/* „следећи на реду" — обележен, али тише од стране на којој стојиш;
   иначе пуни кружић на кораку 5 надвиче активни ред на кораку 4 */
.kolut.sad  { border: 1.5px solid var(--primarna); color: var(--primarna); }
.kolut.ceka { border: 1px solid #c3cec7; color: #93a398; }
/* Од 11.08.2026. кружић више не носи цифру (ред ставки није ред бројева), па
   се „на реду" и „чека" разликују само дебљином ивице — премало. „На реду"
   добија тачку у средини: три стања, три различита знака. */
.kolut.sad::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--primarna);
}
.rail-deo.tu .kolut.sad::before { background: #fff; }
.rail-deo.tu .kolut.sad { background: var(--primarna); color: #fff; border-color: var(--primarna); }

/* На уском екрану трака лежи водоравно: стубац постаје ред иконица, панел
   ред делова испод њега. Обоје клизе, ништа се не сакрива. */
@media (max-width: 900px) {
    /* `align-items: flex-start` у УСПРАВНОМ flex-у више не значи „поравнај
       горе" него „ширина по садржају" — па је `.sadrzaj` растао до најшире
       табеле и разазидао целу страну. Мерено 07.09.2026. на 375 px: оквир је
       био тачно 375, а садржај у њему 1023. Отуд одсечен наслов, трака и
       заглавље на сваком телефону. `stretch` враћа садржај у ширину оквира;
       широка табела и даље клизи сама, кроз свој `overflow-x`. */
    .okvir { flex-direction: column; align-items: stretch; }
    .rail { flex-direction: column; width: 100%; position: static; }
    .rail-stubac, body.rail-sireno .rail-stubac {
        flex: none; width: 100%; height: auto; flex-direction: row;
        overflow-x: auto; overflow-y: hidden; padding: 6px 8px;
        border-right: 0; border-bottom: 1px solid var(--ivica);
    }
    .rail-ikonica, .rail-siri {
        border-left: 0; border-bottom: 3px solid transparent; padding: 6px 10px; min-height: 0;
    }
    .rail-ikonica.tu { border-left: 0; border-bottom-color: var(--primarna); }
    .rail-oblast-crta, .rail-godina { display: none; }
    .rail-panel {
        flex: none; width: 100%; height: auto; flex-direction: row;
        overflow-x: auto; padding: 4px 8px; gap: 0;
        border-right: 0; border-bottom: 1px solid var(--ivica);
    }
    .rail-panel-glava { display: none; }
    .rail-deo {
        border-left: 0; border-bottom: 3px solid transparent;
        white-space: nowrap; padding: 6px 10px;
    }
    .rail-deo.tu { border-left: 0; border-bottom-color: var(--primarna); }
}.podnozje {
    text-align: center; color: #7a8a7e; font-size: var(--f-tabela);
    padding: 24px 16px;
}

h1 { font-size: var(--f-naslov); margin: 0 0 8px; }
h2 { font-size: var(--f-naslov); margin: 24px 0 8px; }
.podnaslov { color: #5b6b60; margin-top: 0; }

/* Пријава */
/* ══════════════════════════════════════════════════════════════════════
   ПРИЈАВА · дословни пренос из Дома ученика (16.08.2026)

   Ненад: „да не би лутао, погледај ово, хоћу идентично апсолутно све сем
   овог натписа и ових бројки, и добро корисничко име."

   Извор је `E:\e dom\za_hosting\upisni_app\views\login.php` — жива страна
   `pvs-svilajnac.edu.rs/dom/login`, не онај ранији предлог. Разликују се:
   тамошњи логотип је 62 px, назив школе 19 px (не 26 — дугачак је па би се
   ломио), натпис испод има своју линију изнад, а ред са бројкама НЕ ПРЕЛАМА
   (`nowrap` + `gap: clamp`) него се стеже са ширином панела. Управо то ми је
   у првом покушају бежало у два реда.

   Боје су прочитане са живе стране (`--clr-*` из њиховог `main.css`), не
   преписане са слике:

       primary #2d6a4f · primary-dk #1b4332 · secondary #1a2e2a
       accent  #e76f51 · accent-soft #f2a089 · primary-bg #eef5f1
       page-bg #f5faf7 · border #ddd · border-green rgba(45,106,79,.2)

   ── ЗАШТО СУ ПРОМЕНЉИВЕ СПУШТЕНЕ НА `.prijava-strana` ───────────────────
   Њихова зелена НИЈЕ иста као `--primarna` ове апликације (#1e5c2e), која
   служи на 39 места. Овако страна за пријаву изгледа тачно као Дом, а
   остатак програма се не помера. Кад се одлучи да цела апликација пређе на
   ову палету, вредности се подижу у `:root` и ово се брише.

   ТРИ РАЗЛИКЕ ОД ИЗВОРА, СВЕ ТРАЖЕНЕ: натпис („школе" уместо „дома
   ученика"), бројке (одељења и профили уместо соба и лежајева) и поље за
   пријаву (корисничко име уместо е-поште).
   ══════════════════════════════════════════════════════════════════════ */
.prijava-strana {
    --clr-primary:      #2d6a4f;
    --clr-primary-dk:   #1b4332;
    --clr-primary-lt:   #40916c;
    --clr-primary-bg:   #eef5f1;
    --clr-secondary:    #1a2e2a;
    --clr-accent:       #e76f51;
    --clr-accent-soft:  #f2a089;
    --clr-page-bg:      #f5faf7;
    --clr-white:        #ffffff;
    --clr-muted:        #666;
    --clr-border:       #ddd;
    --clr-border-green: rgba(45, 106, 79, .2);
    --font-heading:     'Montserrat', sans-serif;
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
    color: #333;
    background: var(--clr-page-bg);
}
.prijava-strana .zaglavlje,
.prijava-strana .podnozje { display: none; }
.prijava-strana .okvir { display: block; }
/* ЧЕТИРИ КЛАСЕ, И МОРА: ред 295 носи `.okvir.bez-rail .sadrzaj` (0-3-0), што
   туче `.prijava-strana .sadrzaj` (0-2-0). Због тога је остајала маргина
   24 px горе и доле, па је испод панела зјапио појас светле боје преко целе
   ширине — Ненад, 16.08.2026: „зелена боја се не простире целом левом
   страном." Мерено: документ 958 px наспрам прозора од 910. */
.prijava-strana .okvir.bez-rail .sadrzaj { max-width: none; margin: 0; padding: 0; }

.prijava-shell { min-height: 100vh; display: grid;
                 grid-template-columns: minmax(400px, 46%) 1fr; }

/* ── Леви панел: бренд ─────────────────────────────────────── */
.prijava-brend {
    position: relative;
    background:
        radial-gradient(120% 90% at 0% 100%, rgba(231, 111, 81, .16), transparent 55%),
        radial-gradient(90% 70% at 100% 0%, rgba(64, 145, 108, .5), transparent 60%),
        linear-gradient(160deg, var(--clr-primary-dk) 0%, var(--clr-secondary) 100%);
    color: #f2f7f3;
    padding: 56px 52px;
    display: flex; flex-direction: column; overflow: hidden;
}
.prijava-brend::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(135deg,
        rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px);
}
.prijava-brend > * { position: relative; }

.prijava-vrh { display: flex; align-items: flex-start; gap: 18px; }
/* ЈЕДИНО ОДСТУПАЊЕ ОД ДОМА, И МОРА (Ненад, 16.08.2026: „грб није на белој
   позадини"). Тамо је логотип ФОТОГРАФИЈА (`logo.jpg`) која сама носи своју
   подлогу, па круг иза ње сме да буде благо наранџаст —
   `object-fit: cover; background: rgba(231,111,81,.14)`.

   Наш грб је зелен цртеж на ПРОЗИРНОЈ подлози. На тој наранџастој мрљи преко
   тамнозеленог панела зелена слова се не виде. Зато бело иза, попуна да грб
   не додирује обод, и `contain` уместо `cover` — да се цртеж не одсече.
   Наранџасти обод остаје исти. */
.prijava-logo { width: 62px; height: 62px; flex: none; border-radius: 50%;
                border: 1.5px solid rgba(231, 111, 81, .6);
                object-fit: contain; background: #fff; padding: 4px; }
.prijava-ime { padding-top: 2px; }
.prijava-ime strong { display: block; font-family: var(--font-heading);
                      font-size: 19px; font-weight: 700; line-height: 1.35; }
.prijava-ime span { display: block; margin-top: 10px; padding-top: 10px;
                    border-top: 1px solid rgba(255, 255, 255, .14);
                    font-size: 11.5px; letter-spacing: 2.6px;
                    text-transform: uppercase; color: #f2a089; font-weight: 700; }

/* ── Средина: слоган ────────────────────────────────────────── */
.prijava-sredina { margin-top: auto; margin-bottom: auto; padding: 44px 0; }
.prijava-sredina h1 { font-family: var(--font-heading);
                      font-size: clamp(26px, 2.9vw, 36px); font-weight: 800;
                      line-height: 1.24; max-width: 19ch; margin: 0; color: #f2f7f3; }
.prijava-sredina h1 em { color: #f2a089; font-style: normal; }
.prijava-uvodnik { margin: 20px 0 0; font-size: 15px; line-height: 1.65;
                   color: rgba(242, 247, 243, .74); max-width: 44ch; }

/* Ред са подацима НЕ ПРЕЛАМА — размак се стеже са ширином панела. */
.prijava-podaci { display: flex; flex-wrap: nowrap;
                  gap: clamp(14px, 2.2vw, 34px); padding-top: 28px;
                  border-top: 1px solid rgba(255, 255, 255, .12); margin: 0; }
.prijava-podatak { flex: none; }
.prijava-podatak b { display: block; font-family: var(--font-heading);
                     font-size: clamp(16px, 1.5vw, 20px); font-weight: 800;
                     color: #f2a089; white-space: nowrap; }
.prijava-podatak span { font-size: 12px; color: rgba(242, 247, 243, .6);
                        letter-spacing: .3px; white-space: nowrap; }
.prijava-podatak.godina { padding-right: clamp(14px, 2.2vw, 34px);
                          border-right: 1px solid rgba(255, 255, 255, .14); }
.prijava-podatak.godina b { color: #f2f7f3; }

/* ── Десни панел: форма ────────────────────────────────────── */
.prijava-panel { display: flex; flex-direction: column; align-items: center;
                 justify-content: center; padding: 48px 32px 28px;
                 background: var(--clr-page-bg); }
.prijava-kutija { width: 100%; max-width: 400px; }

.prijava-nadnaslov { font-size: 11.5px; font-weight: 700; letter-spacing: 2.5px;
                     text-transform: uppercase; color: var(--clr-primary);
                     display: flex; align-items: center; gap: 10px; margin: 0; }
.prijava-nadnaslov::before { content: ""; width: 26px; height: 3px;
                             background: var(--clr-accent); border-radius: 2px; }

.prijava-kutija h1 { font-family: var(--font-heading); font-size: 32px;
                     font-weight: 800; margin: 14px 0 8px;
                     color: var(--clr-primary-dk); letter-spacing: 0; }
.prijava-uvod { font-size: 14.5px; color: var(--clr-muted); line-height: 1.6;
                margin: 0 0 30px; }

/* Поља. Селектори носе `.prijava-strana` да надјачају општа правила
   `.forma input` из речника — иста замка са тежином која је истог дана
   двапут ујела у заглављу. */
.prijava-strana .prijava-polje { margin-bottom: 20px; }
.prijava-strana .prijava-polje > label { display: block; font-size: 13px;
    font-weight: 700; color: var(--clr-primary-dk); margin-bottom: 7px;
    letter-spacing: .2px; }
.prijava-unos { position: relative; }
.prijava-unos > .prijava-ikona { position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); color: #9aab9f; pointer-events: none;
    display: flex; }
.prijava-strana .prijava-unos input { width: 100%; margin: 0;
    padding: 13px 46px 13px 44px; font: inherit; font-size: 15px; color: #333;
    background: var(--clr-white); border: 1.5px solid var(--clr-border);
    border-radius: 8px; outline: none;
    transition: border-color .18s, box-shadow .18s; }
.prijava-strana .prijava-unos input::placeholder { color: #a9b6ac; }
.prijava-strana .prijava-unos input:hover { border-color: #bfd0c4; }
.prijava-strana .prijava-unos input:focus { border-color: var(--clr-primary);
    box-shadow: 0 0 0 4px rgba(45, 106, 79, .13); }

.prijava-oko { position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%); border: 0; background: transparent;
    width: 36px; height: 36px; border-radius: 8px;
    display: grid; place-items: center; color: #9aab9f; cursor: pointer;
    transition: background .15s, color .15s; }
.prijava-oko:hover { background: var(--clr-primary-bg); color: var(--clr-primary); }

.prijava-strana .prijava-dugme { width: 100%; padding: 14px 20px; font: inherit;
    font-size: 15.5px; font-weight: 700; letter-spacing: .3px; color: #fff;
    background: var(--clr-primary); border: 0; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: background .25s, transform .12s, box-shadow .2s;
    box-shadow: 0 6px 16px -6px rgba(27, 67, 50, .45); margin-top: 4px; }
.prijava-strana .prijava-dugme:hover { background: var(--clr-accent);
    box-shadow: 0 10px 22px -8px rgba(231, 111, 81, .55); }
.prijava-strana .prijava-dugme:active { transform: translateY(1px); }
.prijava-strana .prijava-dugme:focus-visible { outline: 2px solid var(--clr-primary);
    outline-offset: 2px; }
.prijava-dugme svg { transition: transform .18s; }
.prijava-dugme:hover svg { transform: translateX(3px); }

.prijava-napomena { margin-top: 26px; display: flex; gap: 12px;
    padding: 14px 16px; background: var(--clr-primary-bg);
    border: 1.5px solid var(--clr-border-green); border-radius: 8px;
    font-size: 13px; color: var(--clr-muted); line-height: 1.55; }
.prijava-napomena svg { flex: none; color: var(--clr-primary); margin-top: 1px; }

.prijava-podnozje { margin-top: 40px; font-size: 12px; color: #9aa69d;
                    text-align: center; line-height: 1.6; }
.prijava-panel .poruka { width: 100%; max-width: 400px; margin-bottom: 1rem; }

/* Између 920 и 1200 px панел је ужи него што ред тражи, па се размак и слог
   стежу. Без овога ред не прелама (nowrap) него излази ван панела. */
@media (max-width: 1200px) {
    .prijava-podaci { gap: 12px; }
    .prijava-podatak b { font-size: 15px; }
    .prijava-podatak span { font-size: 10.5px; letter-spacing: 0; }
    .prijava-podatak.godina { padding-right: 12px; }
}
@media (max-width: 920px) {
    .prijava-shell { grid-template-columns: 1fr; }
    .prijava-brend { padding: 24px 22px; }
    .prijava-logo { width: 48px; height: 48px; }
    .prijava-vrh { gap: 14px; }
    .prijava-ime strong { font-size: 15.5px; line-height: 1.3; }
    .prijava-ime span { margin-top: 8px; padding-top: 8px; font-size: 10px;
                        letter-spacing: 1.6px; }
    .prijava-sredina, .prijava-podaci { display: none; }
    .prijava-panel { padding: 34px 22px 24px; justify-content: flex-start; }
}

.login-kutija {
    max-width: 380px; margin: 60px auto;
    background: var(--kartica);
    border: 1px solid var(--ivica);
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.login-kutija h1 { text-align: center; }
.login-kutija .podnaslov { text-align: center; font-size: var(--f-osnovni); }

/* Форме */
.forma label { display: block; margin-bottom: 12px; font-weight: 600; }
.forma input, .forma select, .forma textarea {
    display: block; width: 100%; margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid var(--ivica);
    border-radius: 6px;
    font: inherit; font-weight: 400;
    background: #fff;
}
.forma.uska { max-width: 420px; }
.forma-inline { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-bottom: 16px; }
.forma-inline label { font-weight: 600; font-size: var(--f-osnovni); }
.forma-inline input, .forma-inline select {
    display: block; margin-top: 4px; padding: 7px 9px;
    border: 1px solid var(--ivica); border-radius: 6px; font: inherit;
}

/* ── ДУГМАД ────────────────────────────────────────────────────────────
   Ненад, 05.08.2026: „дугмад су у суштини превелика и одскачу овом јарком
   зеленом бојом."
   Било: 6/13 при 13.5px, а `primarno` пуна зелена — и таквих је на страни
   умело да буде и по пет. Сад је ОБРИС подразумеван и тих (сива ивица,
   тамно слово), а зелена остаје за ЈЕДНУ главну радњу по екрану.
   Тако боја носи значење: где је зелено, ту се нешто мења. */
.dugme {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--kartica);
    border: 1px solid var(--ivica-jaka);
    color: var(--tekst);
    border-radius: 5px;
    padding: 4px 10px;
    font-family: inherit; font-size: var(--f-osnovni); font-weight: 500; line-height: 1.35;
    cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.dugme:hover { background: var(--istaknuto); border-color: var(--primarna); text-decoration: none; }
.dugme.primarno {
    background: var(--primarna-tiha); border-color: var(--primarna-tiha);
    color: #fff; font-weight: 600;
}
.dugme.primarno:hover { background: var(--primarna); border-color: var(--primarna); }
.dugme.opasno { color: var(--greska); border-color: var(--ivica-jaka); }
.dugme.opasno:hover { background: #fbeae9; border-color: var(--greska); }
/* Дугме које је одрадило своје — стоји и даље, али престаје да тражи пажњу.

   Ненад, 23.08.2026: „да утихне; то директор и помоћник раде, нема потврде",
   и одмах затим „кад утихне, да ипак може поново да се активира да би
   евентуално променили". Дакле НИ забрана ни питање, него мања гласноћа: кад
   уговорени проценат већ стоји, „упиши из расподеле" би га прегазио, па не сме
   да буде најгласније на реду — али мора да остане кликтаво.

   ТЕЖИНА: `.dugme:hover` је (0,2,0), тачно колико и `.dugme.tiho`. Зато `tiho`
   стоји ИСПОД њега — иначе би га боја из hover-а тукла редоследом. Повратак у
   пун тон мора да носи `.dugme.tiho:hover`, (0,3,0), да туче обоје. То је она
   `font-weight` овде НЕ стоји: `.dugme.malo` је исте тежине (0,2,0) а долази
   испод, па би га тукао редоследом. Боја и ивица су довољне, и не сударају
   се ни са чим. */
.dugme.tiho { color: var(--prigusen-tekst); border-color: var(--ivica); }

/* ПРОЈЕКЦИЈА ПРИ ЧЕКИРАЊУ — колико ће замена имати кад преузме означено.

   Ненад, 24.08.2026: „да видимо како се мења проценат том што га мења."
   Три стања, иста три прага која важе и на серверу:
     тихо   унутар појаса од 5 % — нема шта да се јави
     појас  преко 5 % од уговора — иста граница као значка одступања
     кров   преко 130 % — законски кров преконормног рада (О-74)

   Боје прате већ утврђен речник: жута је „обрати пажњу", црвена „ван прописа".
   Ниједна нова нијанса се не уводи. */
.projekcija-pojas { color: var(--upozorenje); font-weight: 600; }
.projekcija-krov  { color: var(--greska);     font-weight: 600; }
.dugme.tiho:hover { color: var(--tekst); border-color: var(--primarna); background: var(--istaknuto); }
/* `.malo` је остало ради постојећих страна, али више не мења величину —
   лествица има само један корак за дугмад. Разлика је сад у размаку. */
.dugme.malo { padding: 3px 8px; font-size: var(--f-osnovni); font-weight: 500; }

/* ── јединствен изглед поља за унос ─────────────────────────────────────
   Свако поље, падајући списак и текст исте су висине и истог радијуса као
   дугме. Без овога је свака страна бирала своје, па су се у истом реду
   налазили елементи од 26, 30 и 34 px. */
input[type="text"], input[type="number"], input[type="search"],
input[type="email"], input[type="password"], input[type="date"], select, textarea {
    font-family: inherit; font-size: var(--f-osnovni); line-height: 1.35;
    padding: 4px 8px;
    border: 1px solid var(--ivica-jaka); border-radius: 5px;
    background: var(--kartica); color: var(--tekst);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--primarna); outline-offset: -1px; border-color: var(--primarna);
}
select { padding-right: 4px; }
.forma-inline { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.forma-inline label { display: flex; flex-direction: column; gap: 3px;
                      font-size: var(--f-oznaka); font-weight: 600;
                      text-transform: uppercase; letter-spacing: .04em;
                      color: var(--prigusen-jaci); }
/* НАТПИС ЈЕ СИТАН, ПОЉЕ НИЈЕ (24.08.2026).

   `.forma-inline label` поставља `--f-oznaka` (11 px, верзал) — то је за НАТПИС.
   Поље унутар њега је ту величину НАСЛЕЂИВАЛО, па су и падајући спискови и
   поља за унос били 11 px у целој апликацији. Ненад: „све је то ситно… повећај
   мало фонт." Мерено пре измене: и натпис и избор враћали су 11px.

   Враћа се на `--f-osnovni` (13 px) — иста величина коју већ носи поље за
   претрагу поред њих, па ред престаје да буде разнолик. */
.forma-inline label input, .forma-inline label select,
.forma-inline label textarea {
    font-weight: 400; color: var(--tekst); font-size: var(--f-osnovni);
}

/* Претрага у реду обрасца стоји под својим натписом, као и остала поља.

   `flex: 1 1 160px` које она носи важи за ВОДОРАВАН ред; унутар натписа, који
   је усправан флекс, тих 160 px постаје ВИСИНА — мерено 24.08.2026, натпис је
   излазио 182 px висок и разбијао цео ред. Зато се овде основа поништава, а
   ширина се задаје изричито. */
.forma-inline label > .pretraga-kutija { flex: 0 0 auto; width: 190px; }

/* ЈЕДНАКА ВИСИНА СВИХ КОНТРОЛА У РЕДУ.

   Мерено 24.08.2026: претрага 28 px, падајући списак 35, поље за датум 30 —
   три различите висине у истом реду, јер свака контрола носи своју подлогу.
   Дна су се поклапала, али су врхови били назубљени. Заједничка најмања висина
   их изједначава а да ниједној не смета. */
.forma-inline label input, .forma-inline label select,
.forma-inline label .pretraga {
    min-height: 34px; box-sizing: border-box;
}

/* ЗАКЉУЧАНА ВРЕДНОСТ И ЊЕНО ОТКЉУЧАВАЊЕ.

   Ненад, 24.08.2026: „кад се убаци, да не буде доступно за унос док се не
   кликне на неки знакић поред." Дотад је поље стајало отворено и уз њега три
   дугмета — ред се преламао у два и деловао расуто.

   Закључано стање је САМО број и знак поред њега. Поља и дугмад долазе тек на
   клик (`assets/izbor.js`). Без ЈС-а откључани део остаје скривен, али се
   вредност и даље види — зато је број, а не поље, оно што увек стоји. */
.zakljucana-vrednost {
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.zakljucana-vrednost strong { font-variant-numeric: tabular-nums; }
.upis-polja { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Поруке */
.poruka {
    border-radius: 6px; padding: 10px 14px; margin-bottom: 14px;
}
.poruka.info { background: var(--info-pozadina); border: 1px solid #bcd8c0; }
.poruka.greska { background: #fbeae9; border: 1px solid #eeb6b2; color: var(--greska); }

/* Картице модула */
/* КАРТИЦЕ ПОПУЊАВАЈУ РЕД, НЕ ОСТАВЉАЈУ РУПУ.

   Ненад, 24.08.2026: „да попуне целу страну, да буду истих димензија, визуелно
   да се лепо стопе у оквир стране."

   Било је `auto-fill`, што ствара онолико трака колико их стане — при 1200 px
   то је пет трака од 220, па три картице заузму три и оставе две празне.
   `auto-fit` празне траке скупља на нулу, па се картице развуку и поделе цео
   ред на једнаке делове. Ниједна друга вредност се не мења. */
.mreza-kartica {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.kartica {
    background: var(--kartica);
    border: 1px solid var(--ivica);
    border-radius: 10px;
    padding: 18px;
}
.oblast-naslov {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    font-size: var(--f-osnovni); letter-spacing: .1em; text-transform: uppercase;
    color: var(--prigusen-tekst); font-weight: 600;
    margin: 26px 0 2px; padding-bottom: 6px; border-bottom: 1px solid var(--ivica);
}
.oblast-naslov:first-of-type { margin-top: 14px; }
.oblast-stanje {
    letter-spacing: 0; text-transform: none; font-weight: 400; font-size: var(--f-tabela);
    font-variant-numeric: tabular-nums;
}
a.kartica { display: flex; color: inherit; }
a.kartica:hover { border-color: var(--primarna); text-decoration: none; box-shadow: 0 1px 3px rgba(19,26,22,.08); }
.kartica { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px; }
.kartica.zakljucana { background: var(--pozadina-blaga); color: var(--prigusen-tekst); }
.kartica-ikonica { color: var(--primarna); display: flex; }
.kartica.zakljucana .kartica-ikonica { color: var(--prigusen-tekst); }
.kartica-naziv { font-size: var(--f-odeljak); font-weight: 600; line-height: 1.3; }
.kartica-pod {
    margin-top: auto; font-size: var(--f-tabela); color: var(--prigusen-tekst);
    display: flex; align-items: center; gap: 5px;
}
.kartica-pod.otvori { color: var(--primarna); font-weight: 600; }

/* ── ШТА ТЕ ЧЕКА · задаци ──────────────────────────────────────────────
   Ненад, 08.09.2026: „мени је битно да наставник зна кад отвори систем шта
   има од задатака и до кад то треба да уради."

   Панел стоји ИЗНАД картица зато што је обавеза, а не понуда: картице кажу
   шта човек сме да отвори, ово шта мора да уради. Зато носи и јачу ивицу
   лево, у боји стања — оком се разликује пре него што се прочита.

   Урађен задатак ОСТАЈЕ у списку, стишан. Да нестане, човек не би видео да
   је завршио него да задатка нема — а то су две различите ствари. */
.zadaci-panel {
    background: var(--kartica); border: 1px solid var(--ivica);
    border-radius: 10px; padding: 14px 16px; margin-top: 18px;
}
.zadaci-naslov {
    font-size: var(--f-osnovni); letter-spacing: .1em; text-transform: uppercase;
    color: var(--prigusen-tekst); font-weight: 600; margin: 0 0 10px;
}
.zadaci-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zadatak {
    display: grid; gap: 3px;
    padding: 10px 12px; border-radius: 8px;
    background: var(--pozadina-blaga);
    border-left: 3px solid var(--ivica-jaka);
}
.zadatak.kasni   { border-left-color: var(--greska);  background: #fdeceb; }
.zadatak.na_redu { border-left-color: var(--upozorenje); background: var(--upozorenje-pozadina); }
.zadatak.gotovo  { border-left-color: var(--primarna); background: var(--pozadina-blaga); }

.zadatak-glava { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zadatak-naziv { font-size: var(--f-odeljak); font-weight: 600; line-height: 1.3; }
a.zadatak-naziv { color: var(--primarna); }
.zadatak.gotovo .zadatak-naziv { font-weight: 500; }
.zadatak-pod, .zadatak-opis {
    font-size: var(--f-tabela); color: var(--prigusen-tekst);
    font-variant-numeric: tabular-nums;
}
.zadatak.kasni .zadatak-pod { color: var(--greska); font-weight: 600; }

/* ── АДМИНСКА СТРАНА ЗАДАЦИ ────────────────────────────────────────────
   Један панел по задатку: наслов, бројеви, ко није урадио, радње. Панел је
   јединица зато што се задаци гледају ПОЈЕДИНАЧНО („ко још није попунио
   пријем родитеља"), а не као табела коју треба упоређивати ред по ред. */
.zadatak-admin.ugasen { opacity: .62; }
.zadatak-admin-glava {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    justify-content: space-between;
}
.zadatak-admin-glava h2 {
    margin: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.zadatak-brojevi {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 10px 0 4px; font-variant-numeric: tabular-nums;
}
.zadatak-brojevi .traka { flex: 1 1 160px; max-width: 320px; }

/* Списак оних који нису урадили стоји ОТВОРЕН док је задатак жив — то је
   оно због чега се страна и отвара. Скупља се тек кад је задатак укинут. */
.nisu-uradili { margin: 6px 0 2px; }
.nisu-uradili summary {
    cursor: pointer; font-weight: 600; color: var(--greska);
    font-size: var(--f-tabela);
}
.spisak-imena {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px 14px; font-size: var(--f-tabela);
}

/* Образац за задавање: три уска поља у реду, два широка испод. */
.zadatak-forma {
    display: grid; gap: 12px 16px; margin-top: 10px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: end;
}
.zadatak-forma .filter-polje.siroko { grid-column: 1 / -1; }
.zadatak-forma .filter-polje.siroko input { width: 100%; }
.zadatak-forma > button { justify-self: start; }

/* ── ДНЕВНИК ДОГАЂАЈА ──────────────────────────────────────────────────
   Триста редова се не читају него ПРЕЛЕЋУ. Зато три ствари: час у моноширини
   да се колона поравна, танка црта тамо где почиње нов дан, и озбиљне радње
   (лозинке, искључење, права, цела база) са својом бојом уз ивицу.
   Датум се исписује само кад се промени — разделник је сам ред. */
.tabela.dnevnik-dogadjaja { font-size: var(--f-tabela); }
.tabela.dnevnik-dogadjaja td.kada {
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tabela.dnevnik-dogadjaja td.kada .cas { color: var(--prigusen-tekst); }
.tabela.dnevnik-dogadjaja tr.nov-dan td { border-top: 2px solid var(--ivica-jaka); }
.tabela.dnevnik-dogadjaja tr.ozbiljna td:first-child {
    box-shadow: inset 3px 0 0 var(--greska);
}

/* ── ВРЕМЕ ОД-ДО · Термини пријема родитеља ────────────────────────────
   Ненад, 08.09.2026: избаци час, нека остане само поље за време од до; и
   „ово мора да буде топ у мобилном приказу".

   Два `type="time"` поља су на 375 px падала у РАЗЛИЧИТЕ редове, иако
   заједно траже 250 од 335 доступних пиксела — сваки `<label>` је сам себи
   био блок. Обмотач их држи као једну целину: натпис Време стоји над обома,
   од и до уз своја поља, и све стаје у један ред.

   Прелом унутар распона је намерно ИСКЉУЧЕН: ако простора нема, ужа су
   поља — а не два реда, јер прелом баш ту чини да до изгледа као засебно
   питање, а не као други крај истог. */
.vreme-raspon {
    display: inline-flex; align-items: baseline; gap: 8px;
    flex-wrap: nowrap;
}
.vreme-raspon .vreme-natpis { white-space: nowrap; }
.vreme-raspon label {
    display: inline-flex; align-items: baseline; gap: 5px;
    white-space: nowrap; min-width: 0;
}
.vreme-raspon select {
    min-width: 0; width: auto; font-variant-numeric: tabular-nums;
}

/* Звездица уз обавезно поље. Ненад, 09.09.2026: „од сад кад правимо форме,
   имај на уму која поља морају бити обавезна за унос." Знак стоји УЗ НАТПИС,
   не у пољу — човек треба да зна шта мора ПРЕ него што почне да куца, а не
   тек кад га образац одбије. */
.obavezno-znak {
    color: var(--greska); font-weight: 700; margin-left: 1px;
    cursor: help;
}
.ikona { display: inline-block; vertical-align: -.15em; }

/* Табеле */
.tabela { width: 100%; border-collapse: collapse; background: var(--kartica); margin: 12px 0; }
.tabela th, .tabela td {
    border: 1px solid var(--ivica);
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}
/* Проред заглавља је ЈЕДАН, свуда. Затечено је `.tabela th.d` носило 1,25, а
   обичан `th` наслеђивао 1,45 — па су у истом реду две врсте натписа падале на
   различите линије (мерено 09.08.2026 на збирном прегледу: 4,2 px). Ово затвара
   ту поделу за цео речник, не само за табеле извештаја. */
.tabela th { background: var(--info-pozadina); line-height: 1.25; }
.tabela tr:nth-child(even) td { background: #fafbfa; }

/* Табови */
.tabovi { display: flex; gap: 4px; flex-wrap: wrap; margin: 16px 0 20px; border-bottom: 2px solid var(--ivica); }
.tabovi a {
    padding: 8px 14px;
    border-radius: 6px 6px 0 0;
    color: var(--tekst);
    font-weight: 600;
}
.tabovi a:hover { background: var(--info-pozadina); text-decoration: none; }
.tabovi a.aktivan { background: var(--primarna); color: #fff; }

.panel {
    background: var(--kartica);
    border: 1px solid var(--ivica);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
}
.oznaka {
    display: inline-block; border-radius: 10px; padding: 1px 9px;
    font-size: var(--f-tabela); background: var(--info-pozadina); margin: 1px 2px;
}
.oznaka.siva { background: #ecefec; color: #5b6b60; }
/* ---------------------------------------------- Расподела задужења */
.prigusen { color: #6b7a70; font-size: var(--f-osnovni); font-weight: normal; }
.tabela td.d, .tabela th.d { text-align: right; white-space: nowrap; }
/* ЗАГЛАВЉЕ СМЕ ДА СЕ ПРЕЛАМА, ПОДАТАК НЕ.
   Ненад, 09.08.2026, снимак акта и обрасца: „Теорија са писменимТеорија",
   „Редни бројНазив предмета" — натписи су се преливали преко суседне колоне.
   Узрок: класа `d` носи `nowrap`, а стављана је и на ћелију и на натпис.
   Броју прелом не ваља („1 148,34" не сме да се преполови), натпису ваља.

   ЦЕНТРИРАНО, НЕ ДЕСНО. Ненад, исти дан: „ништа није симетрично, нема
   логике приказа." Десно поравнат натпис који се прелама на две-три линије
   даје назубљену леву ивицу — свака колона почиње на другом месту. Центриран
   се прелама симетрично, а норма испод (`.tanko`) седа тачно испод средине.
   Ћелије са бројевима остају десно поравнате — тамо поравнање носи значење. */
.tabela th.d {
    white-space: normal; overflow-wrap: anywhere; hyphens: auto;
    text-align: center; vertical-align: bottom; line-height: 1.25;
}
.tabela th.d .tanko { text-align: center; }

.oznaka.upozorenje { background: #fdecea; color: var(--greska); }

.tabela tr.red-ok td { background: #eef7f0; }
.tabela tr.red-delimicno td { background: #fdf6e6; }
.tabela tr.red-upozorenje td { background: #fdecea; }
.tabela tr.prigusen td { color: #6b7a70; }

/* Трака попуњености: празна · делимична · пуна */
.traka {
    display: inline-block; width: 110px; height: 10px;
    background: #ecefec; border-radius: 5px; overflow: hidden; vertical-align: middle;
}
.traka i { display: block; height: 100%; background: var(--primarna-svetla); }
.traka.puna i { background: var(--primarna); }
.traka.delimicna i { background: #d9a441; }
.traka.prazna i { background: transparent; }

.zaduzen { margin-bottom: 4px; }
.zaduzen .forma-inline { display: inline-flex; gap: 4px; margin-left: 6px; }

.poruka.visi { background: #fff8e6; border: 1px solid #e6c86a; }
.oznaka.visi-oznaka { background: #fdf0d0; color: #7a5b12; font-weight: 600; }
@media print {
    .zaglavlje, .podnozje, .dugme, .tabovi { display: none !important; }
    /* Master-detail на папиру иде обичним током: апсолутно постављен списак
       (види `.md-lista` ниже) нема од чега да се затегне кад стране нема, па
       би се преклопио са детаљем. Правило носи исте класе као оно које гази,
       и стоји ИЗНАД њега у фајлу — зато `!important`, да редослед не одлучује. */
    .md { position: static !important; min-height: 0 !important; }
    .md-lista { position: static !important; width: auto !important; }
    .md-detalj { margin-left: 0 !important; }
}

/* ==================================================================
   ЗАЈЕДНИЧКИ РЕЧНИК — 03.08.2026
   Пре овога је свака страна измишљала своје стилове у самом HTML-у,
   па је свака изгледала мало другачије. Ови делови се дефинишу овде
   ЈЕДНОМ, а стране их само користе. Ако нешто треба другачије, мења
   се овде — не додаје се style="" у страну.
   ================================================================== */

/* ---- master-detail: лево списак, десно рад ----

   ЛЕВА ПРАТИ ДЕСНУ (Ненад, 18.08.2026: „поравнај ову леву форму по висини
   доле са формом десно, онда ће страна изгледати профи… лева да прати десну,
   а не десна да се развуче због леве ко зна колико").

   Дотад је стајало `align-items: flex-start` и `max-height: calc(100vh −
   150px)`: списак се завршавао на једном екрану, а детаљ је ишао и преко
   2800 px (Предмети, кад предмет носи дугачак изузетак по пољу), па су се
   две колоне завршавале на сасвим различитим местима.

   ЗАШТО НЕ ПРОСТО `align-items: stretch`: пробано и измерено истог дана —
   списак од 173 предмета тад престане да клизи изнутра и нарасте на 11.567
   px, па ДЕСНА крене за левом. Тачно оно што Ненад не жели.

   Зато списак излази из тока: `.md` је оквир висине детаља, а списак се уз
   њега затеже горе-доле (`top: 0; bottom: 0`). Тако висину увек даје ДЕСНА
   страна, списак је тачно толики, а вишак ставки клизи у `.md-telo` — јер
   `.md-lista` сад има одређену висину, што је услов да унутрашњи `overflow`
   уопште проради.

   `min-height` на `.md` држи да страна не буде нижа од екрана кад је детаљ
   кратак. Штампа враћа обичан ток (види `@media print` ниже), јер апсолутно
   постављен списак на папиру нема од чега да се затегне. */
.md { display: block; position: relative; min-height: calc(100vh - 150px); }
.md-lista {
    position: absolute; top: 0; bottom: 0; left: 0; width: 268px;
    border: 1px solid var(--ivica); border-radius: var(--radijus);
    background: var(--pozadina-blaga); overflow: hidden;
    display: flex; flex-direction: column;
}
/* Кад је списак умотан у форму (чекирање предмета), форма мора да пренесе
   ланац висине даље — без овога `.md-telo` не добија висину, `.md-lista`
   га одсече, па се дугме испод списка уопште не види. */
.md-lista > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.md-glava {
    padding: 9px 12px; border-bottom: 1px solid var(--ivica);
    background: var(--info-pozadina); font-weight: 700; font-size: var(--f-osnovni);
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    flex-wrap: wrap;   /* поље за претрагу пада у свој ред */
}
.md-glava a { font-weight: 400; font-size: var(--f-tabela); }
.md-telo { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.md-podnozje { flex: none; }
.md-stavka {
    display: block; padding: 8px 12px; border-bottom: 1px solid var(--ivica-blaga);
    color: inherit; border-left: 4px solid transparent;
}
.md-stavka:hover { background: var(--istaknuto); text-decoration: none; }
.md-stavka.aktivna { background: var(--kartica); border-left-color: var(--primarna); }
.md-stavka.pazi { border-left-color: var(--greska); }
.md-red { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.md-ime { font-weight: 700; }
.md-meta { font-size: var(--f-tabela); color: var(--prigusen-tekst); margin-top: 1px; display: block; }
/* Размак до списка: 268 px ширине + 16 px јаза, исто као некадашњи `gap`.
   `min-height` је ИСТИ израз као на `.md` — кад је детаљ кратак (мерено на
   кораку 1: 541 px наспрам 570 px оквира) без њега лева испадне виша за
   разлику до пуног екрана, па се доње ивице опет разиђу. Проценат ту не ради:
   родитељ нема одређену висину него само `min-height`. */
.md-detalj {
    margin-left: 284px; min-width: 0; min-height: calc(100vh - 150px);
    border: 1px solid var(--ivica);
    border-radius: var(--radijus); background: var(--kartica); padding: 14px 16px;
}
.md-naslov { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.md-naslov h2 { margin: 0; font-size: var(--f-naslov); }

/* ---- значке ---- */
.oznaka.ok { background: #e8f3ec; color: var(--primarna); }
.oznaka.pazi { background: #fdeceb; color: var(--greska); }
.oznaka.blaga { background: var(--upozorenje-pozadina); color: var(--upozorenje); }
/* „Ван правилника" носи ПУНУ црвену, не бледу (Ненад, 17.08.2026: „све што је
   ван правилника треба да буде црвеном бојом да могу лако да уочим").
   Дотад је делило `.pazi` са „чека одлуку", па се у табели пуној бледих значки
   ништа није издвајало — а то је једина која значи да нешто није по пропису.
   Мора СТАЈАТИ ИСПОД `.pazi`: обе су по две класе, дакле исте тежине, па
   одлучује редослед — то је она замка која нас је овог месеца ујела четири
   пута.

   Пуна црвена са белим словима је пробана 17.08. и одбијена — Ненад: „превише
   је јака ова црвена боја, нека буде блага… блага црвена нијанса." Зато благ
   тон, али са обрубом: тако се разликује од „чека одлуку", која је истог дана
   пребачена на жуту (упозорење), да две различите ствари не носе исту боју. */
.oznaka.van-kval {
    background: #fdeceb; color: var(--greska);
    border: 1px solid #f0b4b0; font-weight: 600;
}
/* Исто и кад стоји као текст у значци „ко држи" — тамо нема своју позадину,
   па је носи слово. */
.van-kval-tekst { color: var(--greska); font-weight: 700; }

/* ---- сегментни бирач (радио дугмад као дугмад) ---- */
/* ПРЕЛАМА СЕ. Са `overflow: hidden` и без преламања бирач је секао последњу
   ставку — на расподели по одељењу IV-5 је постојало у HTML-у, а није се
   видело (Ненад, 05.08.2026: „у расподели немам 4-5 у овој траци").
   Податак се не сме крити стилом; преломљен ред је мања цена од сакривене
   ставке. Зато и `overflow: clip` уместо `hidden` — не сече преломљене редове. */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid #ccd5cd;
       border-radius: 6px; overflow: clip; vertical-align: middle;
       max-width: 100%; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 3px 13px; cursor: pointer; font-size: var(--f-osnovni); background: var(--kartica);
             border-right: 1px solid var(--ivica-blaga); user-select: none; margin: 0; font-weight: 400; }
.seg label:last-of-type { border-right: 0; }
.seg label:hover { background: var(--istaknuto); }
.seg input:checked + label { background: var(--primarna); color: #fff; font-weight: 600; }

/* ---- трака за радњу над целином ---- */
.traka-radnje {
    background: var(--pozadina-blaga); border: 1px solid var(--ivica-blaga);
    border-radius: 7px; padding: 10px 12px; margin: 12px 0 14px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* ---- трака филтера у панелу резултата ---- */
/* Ред „Изабрано" држи своју висину и кад је празан — иначе се цела страна
   помери за 37 px чим се скине последња значка, а то је исто оно скакање због
   ког је трака филтера претворена у мрежу (Ненад, 24.08.2026). */
.traka-filtera {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    font-size: var(--f-osnovni); padding: 8px 2px 10px;
    border-bottom: 1px solid var(--ivica-blaga); margin-bottom: 10px;
    min-height: 37px; box-sizing: content-box;
}
.traka-filtera .oznaka { display: inline-flex; align-items: center; gap: 6px; }
.traka-filtera .skini {
    text-decoration: none; font-weight: 700; line-height: 1;
    opacity: .55; padding: 0 1px;
}
.traka-filtera .skini:hover { opacity: 1; }
.razlozi-polje { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ---- разложен приказ: одељак и његови предмети ---- */
.tabela tr.odeljak td { background: var(--pozadina-blaga); font-weight: 600;
                        border-top: 2px solid var(--ivica); }
.tabela tr.stavka td:first-child { padding-left: 26px; }

/* ---- лепљива табела: заглавље и прве колоне остају видљиви ---- */
.okvir-lepljiv { overflow: auto; max-height: 72vh;
                 border: 1px solid var(--ivica); border-radius: 6px; }
.tabela.lepljiva { border-collapse: separate; border-spacing: 0; margin: 0; font-size: var(--f-tabela); }
.tabela.lepljiva th, .tabela.lepljiva td {
    border-bottom: 1px solid var(--ivica-blaga); border-right: 1px solid #f2f5f3;
}
.tabela.lepljiva thead th {
    position: sticky; top: 0; z-index: 3; background: var(--info-pozadina);
    box-shadow: inset 0 -2px 0 #ccd5cd;
}
.tabela.lepljiva .lepi1 {
    position: sticky; left: 0; z-index: 2; background: var(--kartica);
    min-width: 190px; box-shadow: inset -1px 0 0 var(--ivica);
}
.tabela.lepljiva .lepi2 {
    position: sticky; left: 190px; z-index: 2; background: var(--kartica);
    box-shadow: inset -2px 0 0 #ccd5cd;
}
.tabela.lepljiva thead .lepi1, .tabela.lepljiva thead .lepi2 { z-index: 4; background: var(--info-pozadina); }
.tabela.lepljiva tbody tr:nth-child(even) td,
.tabela.lepljiva tbody tr:nth-child(even) .lepi1,
.tabela.lepljiva tbody tr:nth-child(even) .lepi2 { background: var(--pozadina-blaga); }
.tabela.lepljiva tbody tr:hover td,
.tabela.lepljiva tbody tr:hover .lepi1,
.tabela.lepljiva tbody tr:hover .lepi2 { background: var(--istaknuto); }
.tabela.lepljiva td.kvad { text-align: center; padding: 3px 0; }
.tabela.lepljiva td.kvad:hover { background: #e8f3ec; }
.uspravno { writing-mode: vertical-rl; max-width: 26px; padding: 6px 4px; }

/* ---- вишеколонски списак чекбоксова ---- */
.stubovi { columns: 190px; column-gap: 20px; font-size: var(--f-osnovni); }
.stubovi label { display: block; break-inside: avoid; padding: 1px 0; font-weight: 400; }

/* ---- склопиво објашњење ---- */
details.objasnjenje summary { cursor: pointer; font-size: var(--f-osnovni); color: var(--primarna); padding: 2px 0; }

/* ---- ситан пригушен текст испод нечега ---- */
.napomena-ispod { font-size: var(--f-tabela); color: var(--prigusen-tekst); margin: 4px 0 0; }

/* ---- склопиво објашњење носи свој размак, да га стране не дописују ---- */
details.objasnjenje { margin-bottom: 12px; }
details.objasnjenje > .poruka { margin-top: 6px; }

/* ---- извештај: цифре у колони, збир надвучен ---- */
.tabela.izvestaj td.d, .tabela.izvestaj th.d {
    text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-family: "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
}
.tabela.izvestaj th.d { font-family: inherit; }
.tabela.izvestaj tfoot td { border-top: 2px solid var(--tekst); font-weight: 700; background: var(--pozadina-blaga); }
.broj-d { font-variant-numeric: tabular-nums; font-size: var(--f-oznaka); color: var(--prigusen-tekst);
          font-family: "Cascadia Mono", Consolas, monospace; }

/* ставка списка са квачицом */
.md-stavka.izbor { display: block; position: relative; padding-left: 30px; cursor: pointer; }
.md-stavka.izbor input { position: absolute; left: 11px; top: 10px; }
.md-podnozje { padding: 9px 12px; border-top: 1px solid var(--ivica); background: var(--pozadina-blaga);
               display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.md-podnozje.md-vrh { border-top: 0; border-bottom: 1px solid var(--ivica); }
/* број часова са својим процентом испод — да се види и једно и друго */
.pod-broj { display: block; font-size: var(--f-oznaka); color: var(--prigusen-tekst); font-weight: 400; line-height: 1.3; }
.tanko { display: block; font-weight: 400; font-size: var(--f-oznaka); color: var(--prigusen-tekst); letter-spacing: 0; }
/* ══ МЕРИЛА И ТОК КОРАКА · насловна страна модула · 09.08.2026 ═══════════
   Ненад: „ово са картицама је лоше… треба да се одмах види који су кораци
   завршени а који нису." Картице су замењене двема стварима: траком мерила,
   у којој сваки број стоји ТАЧНО ЈЕДНОМ, и списком корака редом, где стање
   носи иконица, а не текст који треба тумачити. */
.merila {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px; margin: 4px 0 20px;
}
.merilo {
    background: var(--kartica); border: 1px solid var(--ivica); border-radius: 10px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
/* број је главни садржај — цифре у колони, да се различити бројеви пореде */
.merilo-broj {
    font-size: var(--f-naslov); font-weight: 700; color: var(--primarna);
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.merilo-ime { font-size: var(--f-tabela); color: var(--prigusen-tekst); }

.koraci { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.korak {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--kartica); border: 1px solid var(--ivica); border-radius: 10px;
    padding: 12px 14px;
}
/* Стање се види и без боје — иконица је различитог облика (квачица у кругу ·
   казаљка · празан круг · катанац), да страна ради и у црно-белој штампи и
   ономе ко боје не разликује. */
.korak-znak { flex: 0 0 auto; display: flex; padding-top: 2px; }
.korak-gotov  .korak-znak { color: var(--primarna); }
.korak-u-toku .korak-znak { color: #a5761b; }
.korak-nije   .korak-znak { color: var(--prigusen-tekst); }
.korak-nije   { border-style: dashed; }
.korak-telo { flex: 1 1 auto; min-width: 0; }
.korak-telo h3 {
    margin: 0 0 3px; font-size: var(--f-podnas);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.korak-broj {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--info-pozadina); color: var(--primarna);
    font-size: var(--f-oznaka); font-weight: 700;
}
.korak-mera { margin: 0; font-size: var(--f-osnovni); font-variant-numeric: tabular-nums; }
.korak-opis { margin: 2px 0 0; font-size: var(--f-tabela); color: var(--prigusen-tekst); }
.korak-pazi {
    margin: 6px 0 0; font-size: var(--f-tabela); color: var(--greska);
    display: flex; align-items: center; gap: 5px;
}
.korak > .dugme { flex: 0 0 auto; align-self: center; }
@media (max-width: 640px) {
    .korak { flex-wrap: wrap; }
    .korak > .dugme { width: 100%; justify-content: center; }
}

/* ЗАЈЕДНИЧКА МЕРА КОЛОНА.
   Кад се на једној страни понавља ВИШЕ табела истог склопа — по једна за
   одељење, наставника, веће или фонд — свака се у затеченом распореду мери по
   СВОМ садржају, па се колоне разиђу. Ненад, 09.08.2026: „ова поља код једне
   овако, код друге другачије." Мерено истог дана, распон између табела истог
   заглавља: план одељења 215 px · преконормни 225 px · посебни фондови 137 px ·
   расподела 70 px · корак 2 — 24 px.
   Класа значи: удели из `<colgroup>` важе, ширина не зависи од садржаја. */
/* ДВА УГЛА НА ИСТЕ БРОЈЕВЕ — ситан избор уз наслов панела.
   Није `.tabovi` (то је трака преко целе стране, за прелазак на другу страну)
   него избор УНУТАР једног панела: исти подаци, друго слагање. Зато стоји у
   реду са насловом и ситнији је од њега. */
/* Ред са чекирањем на гомилу — стоји испод наслова панела, изнад табеле. */
.izbor-gomila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                margin: 0 0 10px; font-size: var(--f-oznaka); }

.tabovi-mali { margin-left: 12px; font-size: var(--f-oznaka); font-weight: 400; }
.tabovi-mali a {
    display: inline-block; padding: 2px 9px; border: 1px solid var(--ivica);
    border-radius: 999px; margin-right: 4px; text-decoration: none;
    color: var(--prigusen-jaci); background: var(--kartica);
}
.tabovi-mali a:hover { background: var(--istaknuto); }
.tabovi-mali a.aktivan {
    background: var(--primarna); border-color: var(--primarna); color: #fff;
}

/* Испис алатке приказан унутар стране (Администрација → Резервна копија):
   исти текст који би се видео у командној линији, само уоквирен. */
.ispis-alata {
    font-family: ui-monospace, Consolas, monospace; font-size: var(--f-oznaka);
    line-height: 1.45; white-space: pre-wrap; word-break: break-word;
    background: var(--info-pozadina); border: 1px solid var(--ivica-blaga);
    border-radius: 6px; padding: 12px 14px; margin: 0; max-height: 320px;
    overflow: auto;
}

.tabela.mera-kolona { table-layout: fixed; }

/* ФИКСНА ШИРИНА ЗНАЧИ ДА РЕЧ МОРА СМЕТИ ДА СЕ ПРЕЛОМИ.
   Ненад, 11.08.2026: „натписи у колони сектор при смањењу прозора преливају се
   на друге ћелије." Узрок није ћирилица — `opsteobrazovno` и „општеобразовно"
   имају истих 14 знакова, квар је био ту све време. Узрок је спој:
   `table-layout: fixed` не да колони да порасте, а „општеобразовно" је ЈЕДНА
   реч без размака, па нема где да се прелами — вишак исцури преко ивице ћелије.

   Исти квар је овај пројекат већ решио 09.08. за имена наставника (правило
   `.tabela.obrazac-tabela .ime` ниже, Ненад: „кад штампам са наставницима, име
   прелази из једне у другу ћелију"). Идиом је исти, само сад важи за СВАКУ
   табелу фиксне ширине — штити и „Рачунарство и информатика", „Санитарна
   група", „Српски језик и књижевност".

   ⚠ Бројеви се НЕ смеју преламати. Не смеју ни овде: `.tabela td.d` носи
   `white-space: nowrap`, а кад је `nowrap`, `overflow-wrap` нема дејства —
   правило их не додирује. (`.akt-tabela` већ носи исти пар вредности ниже,
   па се два правила не туку.) */
.tabela.mera-kolona td { overflow-wrap: anywhere; hyphens: auto; }

/* ПРАЗАН ДРУГИ РЕД ЧУВА ЛИНИЈУ, А НЕ НОСИ ТЕКСТ.
   Прво је писан као `<span class="tanko">&nbsp;</span>`, али је то ТЕКСТ: свака
   алатка која чита ХТМЛ без декодирања броји шест знакова. Мерено 09.08.2026 —
   `provera_stampe.php` је због тога колони „Радни однос" приписала 17 знакова
   уместо 11, па је страна испала шира него што јесте. Сад је чвор празан, а
   размак долази из стила: у ХТМЛ-у нема ничега, на екрану линија постоји. */
.tanko:empty::before { content: "\00A0"; }
/* извештај је густ — ужа поља, да цела табела стане */
.tabela.izvestaj th, .tabela.izvestaj td { padding: 5px 8px; }
.tabela.izvestaj th.d { font-size: var(--f-oznaka); letter-spacing: .04em; }
.tabela.izvestaj td.d { font-size: var(--f-tabela); line-height: 1.25; }
.tabela.izvestaj td:first-child { font-size: var(--f-osnovni); }

/* дугме-иконица уз поље за претрагу */
.dugme-ikona {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 28px; height: 26px; padding: 0; cursor: pointer;
    border: 1px solid var(--ivica-jaka, #bcc9c1); border-radius: 6px;
    background: var(--kartica); color: var(--primarna);
}
.dugme-ikona:hover { background: var(--primarna); color: #fff; border-color: var(--primarna); }

/* сегментни бирач од линкова (исти изглед као радио верзија) */
.seg a { padding: 5px 12px; font-size: var(--f-osnovni); color: var(--tekst);
         border-right: 1px solid var(--ivica); border-top: 1px solid transparent; }
.seg a:last-child { border-right: 0; }
/* кад се прелети у нов ред, горња ивица раздваја редове */
.seg { row-gap: 0; }
.seg a { border-top-color: var(--ivica-blaga); }
.seg a:first-child { border-top-color: transparent; }
.seg a:hover { background: var(--istaknuto); text-decoration: none; }
.seg a.izabran { background: var(--primarna); color: #fff; font-weight: 600; }

/* ---- АКТ О СИСТЕМАТИЗАЦИЈИ · званични документ · 09.08.2026 ----
   Глава стоји и на екрану и у штампи, заглавље табеле се понавља на свакој
   страни (`thead` то ради само од себе кад је табела дужа од стране), а ред
   се не прелама на две стране. */
/* ГЛАВА ДОКУМЕНТА — грб па назив школе па наслов.
   Ненад, 09.08.2026: „на документима стави грб." Тамо печат и припада: има
   места да се прочита, и штампа се у својој зеленој, без белог диска који му
   на екрану треба само зато што заглавље има зелену подлогу. */
/* АКТ И НОРМА ПО ПРЕДМЕТИМА: грб ЛЕВО од назива школе, пар заједно центриран
   (Ненад, 09.08.2026). Текст уз грб је лево поравнат — центриран вишеред текст
   поред слике изгледа неповезано; овако се чита као заглавље дописа. */
/* ГЛАВА ДОКУМЕНТА ЈЕ ЗА ПАПИР, НЕ ЗА ЕКРАН (Ненад, 11.08.2026).
   „Сад ова страна извештаја по предметима има грб а остале немају — склони то
   са стране, нека буде само при штампи, али за све."

   Грб, пун назив школе и поднаслов имају смисла на отиску, где документ мора
   сам да каже шта је и чији је. На екрану то само гура табелу надоле, а изнад
   ње већ стоји `<h1>` са истим именом. Зато глава више не постоји на екрану —
   а стране које је нису ни имале (Извештаји, План по одељењу) добиле су је
   кроз `norma_zaglavlje()`, да сваки отисак изгледа исто.

   `display` се мора вратити на `flex` при штампи: заједничка класа
   `.samo-stampa` враћа `block`, што би разбило распоред грб-поред-текста. */
.akt-glava { display: none; }
@media print {
    .akt-glava {
        display: flex; align-items: center; justify-content: center; gap: 16px;
        margin: 0 0 14px; text-align: left;
    }
}
.akt-glava-tekst { min-width: 0; }
.akt-grb { width: 74px; height: 74px; object-fit: contain; flex: 0 0 auto; }
@media print { .akt-grb { width: 62px; height: 62px; } }
.akt-skola { font-size: var(--f-podnas); font-weight: 600; margin: 0; }
.akt-naslov { font-size: var(--f-naslov); margin: 4px 0 2px; }
.akt-podnaslov { font-size: var(--f-tabela); color: var(--prigusen-jaci); margin: 0; }
/* Фиксан распоред: удели из `<colgroup>` важе, ништа не прераста ширину.
   Ненад, 09.08.2026: „смањи фонт и све по средини да равнаш и хоризонтално
   и вертикално."

   ВАЖНО О СПЕЦИФИЧНОСТИ: старо правило `.tabela td.d { text-align: right }`
   има два разреда, па је побеђивало `.akt-tabela td` са једним — бројеви су
   остајали десно и после моје измене. Зато сва правила испод носе
   `.tabela.akt-tabela`, да им специфичност буде већа од затеченог. */
.akt-tabela { font-size: var(--f-oznaka); table-layout: fixed; width: 100%; }
.tabela.akt-tabela th,
.tabela.akt-tabela td {
    border: 1px solid var(--ivica);
    text-align: center; vertical-align: middle;
    padding: 4px 5px; line-height: 1.3;
    white-space: normal; overflow-wrap: anywhere; word-break: normal; hyphens: auto;
}
/* заглавље: натпис при дну, да норме (630, 700, 840…) стану у један ред */
.tabela.akt-tabela th,
.tabela.akt-tabela th.d { vertical-align: bottom; text-align: center; line-height: 1.25; }
/* бројеви такође по средини — тако је Ненад тражио, а колоне су једнаке па
   се цифре и даље поклапају */
.tabela.akt-tabela td.d { text-align: center; white-space: normal; }
/* назив предмета и списак извршилаца остају ЛЕВО — то су реченице, не
   бројеви; центриран вишеред текст се не чита */
.tabela.akt-tabela td:nth-child(3),
.tabela.akt-tabela td:last-child { text-align: left; }
.tabela.akt-tabela tr.sekcija td { text-align: left; }
.tabela.akt-tabela tr.zbir-sekcije td:first-child,
.tabela.akt-tabela tfoot td:first-child { text-align: left; }
.akt-tabela tfoot td { background: var(--pozadina-blaga); border-top: 2px solid var(--ivica-jaka); }
@media print {
    /* заглавље и прелом редова средило заједничко правило ниже */
    .akt-tabela { font-size: var(--f-oznaka); }
    .akt-tabela th, .akt-tabela td { padding: 2px 4px; }
}

/* ---- омот табеле: широка табела клизи У СЕБИ, не гура страну ----
   Класа се користила на осам места, а у стилу је није било — па су широке
   табеле или гурале страну или се гњечиле. У штампи омот нестаје, да не
   одсече садржај. */
.omot-tab { overflow-x: auto; max-width: 100%; }
@media print { .omot-tab { overflow: visible; } }

/* ---- образац по одељењу, облика Ненадовог Word документа ---- */
.obrazac { margin: 22px 0 34px; }
/* ОБРАЗАЦ: грб и назив школе СКРОЗ ЛЕВО (Ненад, 09.08.2026), а ознака одељења
   се одгурне удесно — тако глава има једно тежиште лево и једно десно, уместо
   троје разбацаних. */
.obrazac-glava { display: flex; justify-content: flex-start; align-items: center;
                 gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
                 border-bottom: 2px solid var(--ivica); padding-bottom: 6px; }
/* Ознака одељења се одгурне удесно (`margin-left: auto`), да глава има једно
   тежиште лево — грб и школа — и једно десно. Правило мора да буде ЈЕДНО:
   раније је ниже стајало `.obrazac-glava h2 { margin: 0 }`, исте специфичности
   и касније у фајлу, па је поништавало гурање удесно (мерено: ознака је
   завршавала 203 px од десне ивице уместо на њој). */
.obrazac-glava h2 { margin: 0 0 0 auto; }
/* Грб на обрасцу је мањи него на акту — образац је радни лист по одељењу и
   мора цео да стане на једну страну, па глава не сме да отме висину. */
.obrazac-grb { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
@media print { .obrazac-grb { width: 30px; height: 30px; } }
/* Фиксан распоред: удели из `<colgroup>` важе, ништа не прераста ширину
   стране. Без овога су образац и лист извештаја прелазили ивицу папира
   (мерено 09.08.2026). */
.obrazac-tabela { table-layout: fixed; width: 100%; }
.tabela.obrazac-tabela th, .tabela.obrazac-tabela td {
    border: 1px solid var(--ivica); vertical-align: top;
    overflow-wrap: anywhere; word-break: normal;
}
/* ЗАГЛАВЉЕ ОБРАСЦА: СВЕ по средини, без изузетка.
   Ненад, 09.08.2026: „није све поравнато у заглављу по средини, неколико пута
   сам ти то напоменуо." Био је у праву — оставио сам „Назив предмета" лево
   јер је реченица, а он тражи мирно заглавље у коме ниједна колона не одскаче.
   У ЋЕЛИЈАМА назив предмета остаје лево (тамо се чита), у ЗАГЛАВЉУ не. */
.tabela.obrazac-tabela th,
.tabela.obrazac-tabela th.d {
    text-align: center; vertical-align: bottom;
    white-space: normal; line-height: 1.2;
}
/* норма испод натписа (630, 700, 840…) седа по средини своје колоне */
.tabela.obrazac-tabela th .tanko,
.tabela.akt-tabela th .tanko { text-align: center; display: block; }

/* ══ ЗАГЛАВЉЕ ЈЕ ДВОРЕДНО НА СВАКОЈ СТРАНИ · 09.08.2026 ══════════════════
   Ненад: „нису сви натписи поравнати исто… битно ми је да буде једнообразно."

   Мерено на обрасцу пре измене: свих девет `th` већ је имало `text-align:
   center` и `vertical-align: bottom`, али је ДОЊА ИВИЦА НАТПИСА падала на
   две висине — шест колона врста наставе носи `.tanko` са нормом испод, а
   „Редни број", „Назив предмета" и „Норма %" нису носили ништа, па им је
   натпис седао тачно једну линију ниже (13,2 px).

   Решење није у стилу него у грађи: СВАКА колона добија свој други ред.
   Где има норму — стоји норма; где има јединицу — стоји „%"; где нема ни
   једно ни друго — стоји `&nbsp;` и само чува линију. Тако сви натписи
   седну на исту доњу ивицу, а други ред свуда значи исто.
   Важи на пет страна: образац, акт, извештај по наставнику, план одељења,
   збирни преглед норме. Ко дода нову колону — нека дода и њен други ред. */

/* НАТПИС СЕ НЕ МРВИ УСРЕД РЕЧИ.
   Мерено: на пуној ширини (табела 1136 px) ниједан од девет натписа обрасца
   не прелама реч — сви се ломе на размаку. Али `th` носи `overflow-wrap:
   anywhere`, па чим је колона упола ужа (узак прозор, увећан приказ) испадне
   „Ре/дн/и/бр/ој" и „Практичн/а". ПОДАТКУ прелом где стигне и даље треба
   (име наставника у уској ћелији), НАТПИСУ не.
   О СПЕЦИФИЧНОСТИ: правила изнад иду до `.tabela.obrazac-tabela th.d`
   (0,3,1), па их ово мора набројати — иначе ћутке не ради. Иста замка као
   код `.tabela td.d`, забележена двапут. */
.tabela th,
.tabela th.d,
.tabela.obrazac-tabela th,
.tabela.obrazac-tabela th.d,
.tabela.akt-tabela th,
.tabela.akt-tabela th.d {
    overflow-wrap: normal; word-break: normal; hyphens: none;
}

/* ЗАГЛАВЉЕ ЈЕ ЈЕДАН СТИЛ, НЕ ДВА.
   Табеле класе `izvestaj` — план одељења, збирни преглед, лист по наставнику —
   имале су ДВЕ врсте натписа у истом реду: `th.d` је 11 px са размакнутим
   словима (правило испод), а обичан `th` је падао на основних 13 px и на
   средину ћелије, јер га хвата `.tabela td, .tabela th { vertical-align:
   middle }` ниже у фајлу. Мерено на збирном прегледу: „Предмет" је био крупнији
   од осталих осам натписа и стајао 4,2 px изнад њих.

   Три ствари су се разилазиле, свака мерена за себе: величина (13 px : 11 px),
   проред (1,45 : 1,25 — `.tabela th.d` носи свој) и дно ћелије. Зато их правило
   поставља све три одједном, па заглавље има ЈЕДАН стил за све колоне. */
.tabela.izvestaj th {
    font-size: var(--f-oznaka); letter-spacing: .04em;
    line-height: 1.25; vertical-align: bottom;
}

/* Образац и акт имају фиксне уделе колона и оба стоје у `.omot-tab`. На уском
   прозору нека омот КЛИЗИ, уместо да се натписи гњече. У штампи омот нестаје
   и ово не важи — папир има своју ширину. */
@media screen {
    .obrazac-tabela, .akt-tabela { min-width: 900px; }
}

/* ИМЕ НАСТАВНИКА СМЕ ДА СЕ ПРЕЛАМА.
   Ненад, 09.08.2026: „кад штампам са наставницима, име прелази из једне у
   другу ћелију." Ћелија са часовима носи класу `d`, а она има `nowrap` —
   исти узрок као малопре код заглавља, само сад на податку. Броју прелом и
   даље не ваља, имену ваља. */
/* ћелија са часовима: и број и име по средини своје колоне */
.tabela.obrazac-tabela td.celija { text-align: left; white-space: normal; }
.tabela.obrazac-tabela .sati { white-space: nowrap; text-align: center; display: block; }
.tabela.obrazac-tabela .ime {
    white-space: normal; overflow-wrap: break-word;
    word-break: normal; hyphens: none;
}
/* ћелија обрасца: горе часови, испод име наставника — као што се у Word-у
   куцало име поред броја часова */
/* Од 09.08.2026. образац има ШЕСТ колона врста наставе уместо четири
   (Ненад: „користи ово са извештаја да свуда буде овакав распоред"), па
   ћелија мора да буде ужа да девет колона стане на страну. */
.obrazac-tabela .celija { min-width: 84px; }
.obrazac-tabela th { font-size: var(--f-oznaka); }
@media print {
    /* ЈЕДНО ОДЕЉЕЊЕ = ЈЕДНА СТРАНА · шаблон мерен по НАЈГОРЕМ одељењу.
       Ненад, 09.08.2026: „мораш да погледаш које одељење има максималан број
       предмета па на том да се направи шаблон."

       Најгоре је II-2: 13 предмета → 20 редова + 3 траке одељака = 23 реда.
       Положена А4: 210 − 8 − 6 mm = 196 mm ≈ 741 px на 96 dpi.

           глава обрасца            34 px
           заглавље табеле          38 px
           23 реда × највише 23 px 529 px
           ────────────────────────────────
           укупно                  601 px  од 741 → остаје 140 px резерве

       Ред од 23 px значи: фонт 9 px, проред 1,1 (линија 10 px), две линије
       (часови + име) = 20 px, попуна 1+1, ивица 1. Отуд ове вредности —
       нису одабране по осећају него израчунате уназад из најгорег случаја. */
    /* Величине долазе из саме стране, по броју редова тог одељења
       (`--o-font`, `--o-ime`, `--o-prored` поставља `stampa.php`). Ово су
       само резерве ако их нема.

       ── ЗАШТО СВУДА `.tabela.obrazac-tabela`, А НЕ САМО `.obrazac-tabela`
       Мерено 16.08.2026 у прегледачу: цео овај шаблон НИЈЕ РАДИО. Страна је
       уредно исписивала `--o-font: 8px` за II-2, а цртало се 11 px. Разлог је
       иста замка коју већ носи `.tabela td.d`: ниже у фајлу стоје правила са
       ЈЕДНАКОМ тежином (обоје једна класа), па побеђују редоследом —

           ред 1146  @media print  .tabela { font-size: var(--f-oznaka) }
           ред 1147  @media print  .tabela th, .tabela td { padding: 3px 6px }
           ред 1131  (екран)       .obrazac-tabela .ime { font-size: var(--f-tabela) }

       Тукли су фонт, попуну и име — три од четири ствари због којих шаблон
       уопште постоји. Са две класе овде је тежина већа и редослед више не
       одлучује. Ново правило за образац МОРА да носи `.tabela.obrazac-tabela`. */
    .tabela.obrazac-tabela { font-size: var(--o-font, 9px); line-height: var(--o-prored, 1.1); }
    /* образац за штампу нема прстен — он иде на бело, где наранџаста нема шта
       да раздваја; исти разлог због кога га нема ни акт */
    .tabela.obrazac-tabela .celija { min-width: 0; }
    .tabela.obrazac-tabela th, .tabela.obrazac-tabela td { padding: 1px 3px; }
    .tabela.obrazac-tabela th { font-size: var(--o-ime, 8px); line-height: 1.15; }
    .tabela.obrazac-tabela .sati { font-size: calc(var(--o-ime, 8px) - 1px); }
    /* Висину даје `--o-visina`, коју рачуна `stampa.php` из броја редова
       (17.08.2026) — раније је овде стајало `min-height: 0`, па је табела
       увек била збијена уз врх и остављала празну доњу половину папира на
       малим одељењима. Празан образац никад испод 20 px, руци треба места. */
    .tabela.obrazac-tabela .ime { min-height: var(--o-visina, 15px);
                           line-height: 1.05; margin-top: 0;
                           font-size: var(--o-ime, 8px); }
    /* празан образац се ШТАМПА па се на њега пише руком (Ненад, 16.08.2026:
       „да имам и писани и електронски траг расподеле"), зато линија мора да
       буде виша него кад је име одштампано. 20 px ≈ 5,3 mm. */
    .tabela.obrazac-tabela.za-pisanje .ime { min-height: max(20px, var(--o-visina, 20px)); }
    .tabela.obrazac-tabela tr.sekcija td { padding: 1px 5px; font-size: var(--o-ime, 8px); }
    .tabela.obrazac-tabela .tanko { font-size: calc(var(--o-ime, 8px) - 1px); }
    .obrazac-glava { margin-bottom: 3px; padding-bottom: 2px; }
    .obrazac-glava h2 { font-size: 13px; }
    .obrazac-glava div { font-size: 8px; }
    .obrazac { margin: 0 0 4px; }
}
/* Оријентација странице НИЈЕ постављена намерно: `@page { size: landscape }`
   важи за цео документ, па би и извештај по наставнику отишао положено, а то
   Ненад није тражио. Ако образац буде претесан на усправној А4, положено се
   бира у самом дијалогу за штампу — или се овде дода једна линија. */
/* ── БРОЈ ЧАСОВА У УГАО, ИМЕ ДОБИЈА ЦЕЛУ ЋЕЛИЈУ (16.08.2026) ─────────────
   Ненад: „можеш ли ове бројеве да померишь да стоје у мањим ћелијама горе
   десно да би име презиме могло да стане."

   Дотад су број и име стајали један испод другог, обоје по средини — па је
   име делило и висину и ширину са бројем и преламало се у два реда. Мерено
   у прегледачу, у најгорем случају (име у свих 681 поље):

       број у углу штеди 135 px по обрасцу у просеку, до 164
       најгоре одељење II-2: 655 → 531 px

   Због тога лествица фонта више није потребна: на 11 px сада стају СВА
   одељења са 94 px зазора, док су највећа раније падала на 9 px. Дакле
   помак броја у угао не ситни текст него га УКРУПЊАВА.

   Број остаје видљив јер се чита при провери; име се чита стално, па њему
   иде цела ћелија. Ћелија мора да буде `position: relative` да би угао био
   њен, а не странице. */
.obrazac-tabela td.celija { position: relative; }
/* Укупан број поља је ТАМНИЈИ од бројева појединих наставника (Ненад,
   17.08.2026: „овај укупан број нешто тамнији, ово остали испод укупног
   нешто блеђи и ситнији") — он је број ПОЉА, они су подела унутар њега. */
.obrazac-tabela .sati { position: absolute; top: 0; right: 3px; z-index: 1;
                        line-height: 1; font-weight: 700; opacity: 1;
                        font-size: calc(var(--f-oznaka) - 1px); }
/* Кад поље држи више наставника, укупан број силази у СВОЈ РЕД: на првом
   реду би се сударио са бројем тог наставника и стеснио му презиме. */
.obrazac-tabela .sati-vrh {
    position: static; display: block; text-align: right; margin-bottom: 1px;
}
/* Тад подметач више не треба — у углу нема ничега да се обилази. */
.obrazac-tabela .ime-vise .ko:first-child::before { content: none; }
.obrazac-tabela .ime { display: block; font-size: var(--f-tabela); font-weight: 400;
                       text-align: left; min-height: var(--o-visina, 15px);
                       margin-top: 0; }
/* ── ДУГО ИМЕ НЕ СМЕ ПОД БРОЈ ЧАСОВА (17.08.2026) ────────────────────────
   Ненад: „кад је име превише дугачко иде преко броја часова, неуредно је."

   Тачно, и то по конструкцији: `.sati` је АПСОЛУТНО позициониран у горњи
   десни угао, а `.ime` је блок преко целе ширине — па дуго име прође испод
   броја. Најдужа су 28 знакова („Милошевић Стевановић Драгана").

   Решење није ужа колона него подметач: празан плутајући правоугаоник у
   горњем десном углу самог имена. Прва линија тече поред броја, а свака
   следећа користи пуну ширину — број не губи место, име се не сакрива, а
   висина не расте. Ширина покрива до четири цифре. */
/* ── ИМЕ ЛЕВО, ЧАСОВИ ДЕСНО (17.08.2026) ─────────────────────────────────
   Ненад: „ова имена и презимена равнај скроз лево а часове десно, ломи
   презиме а испод име, не пребацуј само једно слово у други ред… где има више
   наставника са бројем часова смањи величину броја и број скроз десно."

   Сваки наставник је свој ред (`.ko`), а у њему две ставке: име лево, број
   десно. Ред је flex, па се број лепи уз десну ивицу без обзира колико је име
   дугачко, а име се прелама САМО на размаку — отуд више нема „Црњакови / ћ
   Миланка". `break-word` дозвољава прелом усред речи ЈЕДИНО ако сама реч не
   стане у колону; најдужа је „Димитријевић", која стане.

   Плутајући подметач који је дотад чувао место угаоном броју је укинут: `.ko`
   је flex оквир, а плутајући елемент у њега не улази, па не би имао дејства.
   Место сад чува размак на ПРВОМ реду, тамо где угаони број и стоји. */
/* ПЛУТАЊЕ, НЕ FLEX (17.08.2026, друга проба) — прва верзија је `.ko` ставила
   у flex ред, па је име добијало само ону ширину коју му остави број и ломило
   се на слогове: „Марк / овић / Боба / н". У flex реду ставке стоје ЈЕДНА
   ПОРЕД ДРУГЕ, а овде треба да прва линија имена иде поред броја, а следеће
   да користе ЦЕЛУ ширину ћелије — то уме само плутање.

   Број стоји ПРЕ имена у извору, јер плутајући елемент увлачи текст који
   долази иза њега. `::before` на првом реду чува место угаоном збиру, па се
   број наставника смести лево од њега. `clear` спречава да следећи наставник
   склизне уз претходни број. */
.obrazac-tabela .ko { display: block; }
.obrazac-tabela .ko::after { content: ''; display: block; clear: both; }
.obrazac-tabela .ko:first-child::before {
    content: ''; float: right; width: 2.7em; height: 1.05em;
}
.obrazac-tabela .ko-sati {
    float: right; margin-left: 5px; font-size: .75em; opacity: .5;
    white-space: nowrap; font-weight: 400;
}
.obrazac-tabela .ko-ime {
    overflow-wrap: break-word; word-break: normal; hyphens: none;
}
/* Празан образац иде већима да на њега РУКОМ уписују расподелу. Тамо ћелија
   није приказ него место за писање: виша линија и танка тачкаста основа да
   рука има где да седне. Само тај облик — попуњен образац се чита, не пише. */
.obrazac-tabela.za-pisanje .ime {
    min-height: max(20px, var(--o-visina, 20px)); border-bottom: 1px dotted #9aa39d;
}
/* потписи (директор, председник већа) уклоњени 05.08.2026 — Ненад: „то није
   потребно". Ако икад затребају, иду овде. */
.nova-strana { break-before: page; page-break-before: always; }

/* ---- штампа: остаје само извештај ---- */
.samo-stampa { display: none; }
@media print {
    .zaglavlje, .rail, .podnozje, .ne-stampaj, .objasnjenje,
    .md-lista, .tabovi, .traka-radnje { display: none !important; }
    .okvir, .md { display: block; }
    .sadrzaj { max-width: none; margin: 0; padding: 0; overflow: visible; }
    .md-detalj { border: 0; padding: 0; }
    .samo-stampa { display: block; margin-top: 10px; }
    .tabela { font-size: var(--f-oznaka); }
    .tabela th, .tabela td { padding: 3px 6px; }
    tfoot { display: table-footer-group; }
    a[href]::after { content: none; }
    body { background: #fff; }
}

/* ==================================================================
   ПРЕЛОМИ СТРАНИЦЕ ПРИ ШТАМПИ — једно место за све табеле · 09.08.2026
   Ненад: „дугме штампа ломи ми табелу тако да неколико реда прелази у
   другу страну… да не ломи на битним местима, нпр. код наслова."

   Три правила, важе на СВАКУ табелу која се штампа:
     1 ред се не сече на две стране          (break-inside: avoid на tr)
     2 заглавље се понавља на врху сваке      (thead као table-header-group)
     3 наслов одељка не остаје сам на дну      (break-after: avoid на њему,
       — прелази с првим редом који му следи)     плус држи следећи ред
   ================================================================== */
@media print {
    table { break-inside: auto; }
    thead { display: table-header-group; }
    tfoot { display: table-row-group; }

    /* ред увек цео на једној страни */
    tr { break-inside: avoid; page-break-inside: avoid; }

    /* наслов одељка и његов међузбир вуку суседни ред за собом, да не
       остану сами на дну стране */
    tr.sekcija, tr.celina, tr.odeljak {
        break-after: avoid; page-break-after: avoid;
    }
    tr.zbir-sekcije, tfoot tr {
        break-before: avoid; page-break-before: avoid;
    }

    /* НЕ стављати `break-inside: avoid` на цео образац или панел.
       Проба 09.08.2026: образац од дванаест редова не стане у остатак стране,
       па га прегледач гурне ЦЕО на следећу — прва страна остане празна.
       Ненад: „сада је горе него што је било." Довољно је да се не сече РЕД
       (правило изнад) и да наслов вуче свој први ред. */
    .obrazac, .panel { break-inside: auto; }
    .akt-glava { break-inside: avoid; page-break-inside: avoid; }
    .panel > h2, .panel > h3, .naslov-sekcije {
        break-after: avoid; page-break-after: avoid;
    }
}

/* ---- ситан унос у ћелији табеле ---- */
.mini-unos { display: flex; gap: 6px; align-items: center; margin: 0; flex-wrap: nowrap; }
.mini-polje { display: flex; align-items: center; gap: 3px; font-weight: 400; }
.mini-polje > span { font-size: var(--f-oznaka); color: var(--prigusen-tekst); letter-spacing: .03em; }
.mini-unos input { width: 46px; text-align: right; font: inherit; font-size: var(--f-tabela);
                   padding: 2px 4px; border: 1px solid var(--ivica); border-radius: 4px; }
.mini-unos input:focus { outline: 2px solid var(--primarna); outline-offset: -1px; }
.red-brojeva { white-space: nowrap; }
/* три поља једно поред другог у траци радње */
.stubovi-polja { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; }
.stubovi-polja label { display: flex; flex-direction: column; gap: 3px; font-size: var(--f-tabela); font-weight: 600; }
.stubovi-polja select { font: inherit; font-size: var(--f-osnovni); padding: 3px 6px; max-width: 300px; }
.stubovi-polja .prigusen { font-weight: 400; }
.gore-b { color: #1c6b3f; font-weight: 600; }
.dole-b { color: var(--greska); font-weight: 600; }
/* ПОДАТАК ПО СРЕДИНИ, НАТПИС ПРИ ДНУ — једно правило за све табеле.
   Раније је овде стајало `.tabela td, .tabela th { vertical-align: middle }`, а
   `.tabela th.d` изнад је носило `bottom`. У истом заглављу су тако постојале
   две врсте натписа: они са класом `d` при дну, обични по средини. Мерено
   09.08.2026 — на збирном прегледу 4,2 px разлике, на списку наставника 8,1 px.
   Натпис при дну је и услов да дворедно заглавље ради: други ред (норма или
   јединица) мора да стоји испод, а натписи изнад њега на једној линији. */
.tabela td { vertical-align: middle; }
.tabela th { vertical-align: bottom; }
.tabela tr.a21-red td { background: var(--info-pozadina); }
/* ── О-52 · СЕКЦИЈЕ ПРЕДМЕТА ───────────────────────────────────────────
   Редослед и боја као у НПП-у: општеобразовни · изборни општеобразовни ·
   стручни · изборни стручни. Правило важи на СВАКОЈ страни која исписује
   предмете, не само у плану (Ненад, 05.08.2026).
   Заглавље секције носи пуну боју, а њени редови танку траку с лева —
   да се блок види, а табела остане читка. */
.tabela tr.sekcija td {
    font-size: var(--f-oznaka); font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; padding: 5px 10px;
    background: var(--info-pozadina); color: var(--primarna);
}
.tabela tr.sek-1 td { background: var(--sek-opste);   color: var(--sek-opste-tekst); }
.tabela tr.sek-3 td { background: var(--sek-strucni); color: var(--sek-strucni-tekst); }
.tabela tr.sek-2 td,
.tabela tr.sek-4 td { background: var(--sek-izborni); color: var(--sek-izborni-tekst); }

.tabela tr.u-sek-1 td:first-child { box-shadow: inset 3px 0 0 var(--sek-opste); }
.tabela tr.u-sek-3 td:first-child { box-shadow: inset 3px 0 0 var(--sek-strucni); }
.tabela tr.u-sek-2 td:first-child,
.tabela tr.u-sek-4 td:first-child { box-shadow: inset 3px 0 0 var(--sek-izborni); }

/* ── ИЗБОРНИ РЕД У АКТУ ───────────────────────────────────────────────────
   Ненад, 10.09.2026: „категориши их у акту тако — А2.1, А2.2, Б2 — жутом
   бојом."

   Изборни ред седи УНУТАР свог одељка, како га НПП слаже (А2.2 међу
   општеобразовним, Б2 међу стручним), па се дотад није разликовао од
   обавезног. Сад носи исту жуту као заглавље изборног одељка и ознаку уз
   назив предмета.

   Ознака је ту и због ШТАМПЕ: акт се потписује на папиру, а прегледачи
   подразумевано не штампају позадине. Боја помаже на екрану, ознака важи и
   на папиру. */
.tabela tr.red-izborni td { background: var(--sek-izborni); }

.oznaka.izborni-znak {
    margin-left: 6px; background: #f6e2c3; color: var(--sek-izborni-tekst);
    font-weight: 700; letter-spacing: .02em;
}

/* ── ИСПИСАН УЧЕНИК ───────────────────────────────────────────────────────
   Остаје у списку — извештај га броји — али се види да више није ту: исто
   као у школском програму, сив и са датумом уз име. */
.tabela tr.ispisan td { color: #8a948e; }
.tabela tr.ispisan td strong { color: #8a948e; font-weight: 500; }
/* Ненад, 13.09.2026: „смањи мало величину фонта за збирни приказ и
   појединачни у табели" — било 1.25rem док су биле само четири цифре. */
.tabela.stanje-odeljenja td { font-size: 1.05rem; }
.tabela.stanje-odeljenja td .prigusen { font-size: var(--f-tabela); }

/* ── ИЗБОР КОЛОНА ─────────────────────────────────────────────────────────
   Ненад, 11.09.2026: „дај опцију да филтрирам шта ће се све видети у приказу
   и уједно штампати и извозити." Значке као прекидачи, исти облик као у
   траци филтера: изабрано се види (зелено, са ×), остало се нуди (сиво). */
.izbor-kolona {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 0 0 8px;
}
.izbor-kolona .filter-naslov { margin-right: 4px; }
.izbor-kolona .oznaka { text-decoration: none; cursor: pointer; }
.izbor-kolona .oznaka.siva:hover { background: #dfe5e0; }
.izbor-kolona-sve { margin-left: 6px; font-size: var(--f-oznaka); color: var(--prigusen-tekst); }
.izbor-kolona-sve a { color: var(--primarna); }

/* Ознака разреда као веза — бира цео разред (Ненад, 11.09.2026: „чекирам сва
   одељења прве"). Иста мрежа као у Расподели; тамо је ознака обичан текст. */
a.razred-veza { text-decoration: none; cursor: pointer; border-radius: 4px; padding: 0 4px; }
a.razred-veza:hover { background: #e9f2ea; }
a.razred-veza.izabran { background: var(--primarna); color: #fff; }

/* Филтер по месту: натпис ИЗНАД своје контроле, као у траци филтера. */
.filter-mesto { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 10px; }
.filter-mesto label { display: flex; flex-direction: column; gap: 3px; }
.filter-mesto select { min-width: 220px; max-width: 100%; }
.filter-mesto input[type=search] { min-width: 240px; max-width: 100%; }

/* ── ПРЕДМЕТ КАО ЦЕЛИНА ─────────────────────────────────────────────────
   Ненад, 28.08.2026, у три корака — сваки је поправио претходни:

     1 · „убаци да се види као целина, нпр. дебље линије"
     2 · „ове линије су превише јаке, чак јаче од самог оквира табеле"
     3 · „боље и прегледније кад би уклонио ове ћелије, да остане сам назив
          предмета, одељење и профил, можда по средини"

   Крајње решење: разред, одељење, предмет и ознака НПП-а спајају се преко
   свих врста тог предмета (`rowspan` у `izv_raspodela/index.php`), усправно
   центрирано. Празних ћелија више нема, па нема ни линија које секу празнину.

   Основно правило `.tabela th, .tabela td` носи `vertical-align: top` — то је
   тачно за обичан ред, али спојена ћелија висока пет редова тад виси при врху.
   `.tabela td.spojena` носи две класе и елемент, исто колико и основно
   правило, а стоји касније — па побеђује. Слабији селектор би само ћутао;
   та замка је у овом фајлу забележена шест пута. */
.tabela td.spojena { vertical-align: middle; }

/* Почетак блока: нијансу јача линија од осталих, слабија од оквира. Толико
   да око ухвати где предмет почиње, а да ништа не виче. */
.tabela tr.pocetak-bloka td { border-top-color: var(--ivica-jaka); }

/* Први ред тела не тражи ништа посебно — изнад њега већ стоји заглавље. */
.tabela tbody tr.pocetak-bloka:first-child td { border-top-color: var(--ivica); }

/* наслов секције кад предмети нису у једној табели него у панелима */
.naslov-sekcije {
    font-size: var(--f-tabela); font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; padding: 6px 12px; border-radius: 6px;
    margin: 20px 0 8px;
}
.naslov-sekcije.sek-1 { background: var(--sek-opste);   color: var(--sek-opste-tekst); }
.naslov-sekcije.sek-3 { background: var(--sek-strucni); color: var(--sek-strucni-tekst); }
.naslov-sekcije.sek-2,
.naslov-sekcije.sek-4 { background: var(--sek-izborni); color: var(--sek-izborni-tekst); }

/* значка врсте, кад ред стоји сам (нпр. у листи по већу) */
.oznaka.vrsta-1 { background: var(--sek-opste);   color: var(--sek-opste-tekst); }
.oznaka.vrsta-3 { background: var(--sek-strucni); color: var(--sek-strucni-tekst); }
.oznaka.vrsta-2,
.oznaka.vrsta-4 { background: var(--sek-izborni); color: var(--sek-izborni-tekst); }
.tabela tr.slot-red td { background: var(--upozorenje-pozadina); }
.tabela tr.zbir-sekcije td { background: var(--pozadina-blaga); font-style: italic;
                             color: var(--prigusen-tekst); }
.tabela tr.zbir-sekcije td strong { font-style: normal; color: var(--tekst); }
.upozorenje-tekst { color: var(--greska); font-weight: 600; }
/* први ред новог одељења у заједничкој табели — линија раздваја групе */
.tabela tr.novo-odeljenje td { border-top: 2px solid var(--ivica-jaka, #c3cec7); }
.tabela tr.novo-odeljenje:first-child td { border-top: 0; }
.mini-unos input:focus { outline: 2px solid var(--primarna); outline-offset: -1px; }

/* ---- А2.1 групе (корак 5) — пресељено са стране 04.08.2026 ---- */
.a21-blok {
    border: 1px solid var(--ivica); border-radius: var(--radijus);
    margin-bottom: 10px; background: var(--kartica); overflow: hidden;
}
.a21-zaglavlje {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    background: var(--pozadina-blaga); border-bottom: 1px solid var(--ivica);
}
.a21-razred { font-weight: 700; min-width: 84px; font-size: var(--f-osnovni); }
.a21-tip { min-width: 190px; }
.a21-max { margin-left: auto; font-size: var(--f-tabela); color: var(--prigusen-tekst); }
/* 205 px, не 150: од 11.08.2026. „Г 10 · В 18" више не сме да се ломи, па је
   најужи ред шири него раније — чекбокс 16 + ознака 46 + „36 нед." ~46 +
   бројеви ~62 + размаци ~24 ≈ 194 px. Са 150 px је садржај излазио ван оквира,
   а са 170 би излазио на ужем прозору. `auto-fill` сам смањи број колона. */
.a21-odeljenja {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 2px 8px; padding: 10px 12px;
}
.a21-odeljenje {
    display: flex; align-items: baseline; gap: 6px; padding: 3px 6px;
    border-radius: 4px; font-size: var(--f-tabela); cursor: pointer;
}
.a21-odeljenje:hover { background: var(--istaknuto); }
.a21-oznaka { min-width: 46px; font-weight: 600; }
.a21-ned { color: var(--prigusen-tekst); font-size: var(--f-oznaka); }
/* `nowrap` — без њега се „Г 2 · В 13" ломи у два реда чим поље постане уско,
   па број за Верску падне испод (Ненад, 11.08.2026). */
.a21-djaka { color: var(--prigusen-tekst); font-size: var(--f-oznaka); font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
/* Одељење које изабрани предмет већ слуша у некој групи. Права брана је у
   упису (`a21_dodaj`); ово само штеди покушај који би био одбијен. */
.a21-zauzeto-polje { opacity: .5; background: var(--pozadina-blaga); cursor: not-allowed; }
.a21-zauzeto-polje:hover { background: var(--pozadina-blaga); }
/* Ознака ЗАМЕЊУЈЕ бројеве ђака (`a21.js` их сакрије), не додаје се уз њих —
   иначе ред нарасте преко колоне и цела мрежа испадне из оквира. */
.a21-zauzeto { margin-left: auto; white-space: nowrap; }
.a21-slobodno { font-size: var(--f-oznaka); color: var(--prigusen-tekst); margin-left: 10px; }
.a21-zbir { font-size: var(--f-tabela); margin-right: auto; color: var(--prigusen-tekst); }
.a21-zbir strong { font-variant-numeric: tabular-nums; color: var(--tekst); }
.a21-vrh .a21-oznaka, .a21-vrh .a21-ned { font-weight: 700; color: var(--primarna); }
.a21-podnozje {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    border-top: 1px solid var(--ivica-blaga); background: var(--pozadina-blaga);
}
.a21-napomena { flex: 1; max-width: 320px; }

/* ---- претрага (ћирилица и латиница подједнако) ---- */
.pretraga-kutija { display: flex; align-items: center; gap: 6px; flex: 1 1 160px; min-width: 0; }
.pretraga {
    flex: 1 1 auto; min-width: 0; width: 100%;
    font: inherit; font-size: var(--f-osnovni); padding: 4px 8px;
    border: 1px solid var(--ivica); border-radius: 6px;
    background: var(--kartica); color: inherit;
}
.pretraga:focus { outline: 2px solid var(--primarna); outline-offset: -1px; border-color: var(--primarna); }
.pretraga-brojac { font-size: var(--f-oznaka); color: var(--prigusen-tekst); white-space: nowrap; }
.pretraga-brojac.prazno { color: var(--greska); }
.md-glava .pretraga-kutija { flex: 1 0 100%; }

/* ── ЗАЈЕДНИЧКА ТРАКА ФИЛТЕРА · 09.08.2026 ────────────────────────────
   Ненад: „натписи се не виде, није прегледно… иста трака на свим странама."
   Пре измене: три кутије једна испод друге, натпис „Веће" одвојен од своје
   дугмади јер је трака преламала ред, и низ од тридесет одељења у комаду.
   Сад: свака контрола носи свој натпис ИЗНАД себе, па се не може одвојити
   колико год се трака преламала. */
.filter {
    background: var(--pozadina-blaga); border: 1px solid var(--ivica-blaga);
    border-radius: var(--radijus); padding: 11px 13px; margin: 0 0 14px;
}
/* stretch + space-between: натписи стоје у истом реду горе, а падајући
   спискови у истом реду доле, иако само неки имају кутију за претрагу */
/* ТРАКА ФИЛТЕРА ИМА ИСТУ ВИСИНУ НА СВЕ ТРИ СТРАНЕ.

   Ненад, 24.08.2026: „кад прелазим са стране на страну, због разлике ова
   дугмад беже час доле час горе час лево."

   Узрок је измерен: три стране носе различит број филтера —
       Салдо · Наставници   2   Категорија · Веће
       Салдо · Категорије   3   + Изостави предмет
       Салдо · Предмети     4   + Предмет · Изостави предмет
   Са `flex-wrap` то значи различит број редова, па различиту висину траке, па
   све испод почиње на другој висини.

   Решење је МРЕЖА СА СТАЛНИМ БРОЈЕМ КОЛОНА: четири колоне увек, а страна са
   два филтера остави две празне. Тако трака има један ред на све три стране и
   ништа не скаче. Испод 900 px иде на две колоне, испод 600 на једну — тад је
   ионако свака страна за себе, па поређење нема смисла.

   `min-height` изједначава поља: оно са изабраним значкама је више од празног
   (мерено: 80 наспрам 49 px), па би без њега ред дисао при сваком избору. */
.filter-red {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 16px; align-items: start;
}
@media (max-width: 900px) { .filter-red { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .filter-red { grid-template-columns: 1fr; } }
.filter-polje { display: flex; flex-direction: column; gap: 4px;
                justify-content: flex-start; min-width: 0; min-height: 84px; }
.filter-polje > label {
    font-size: var(--f-oznaka); font-weight: 600; letter-spacing: .02em;
    text-transform: uppercase; color: var(--prigusen-jaci);
    display: flex; justify-content: space-between; gap: 8px;
}
.filter-polje > label .t-tiho { font-size: var(--f-oznaka); font-weight: 400; }
.filter-polje form { margin: 0; }
.filter-polje select { width: 100%; max-width: 100%; }
.filter-polje .pretraga-kutija { flex: 0 0 auto; }
.filter-polje .pretraga-brojac:empty { display: none; }

/* Одељења: кратке и једнообразне ознаке, па остају дугмад — али сложена
   по разредима. Четири кратка реда уместо низа од тридесет (Ненад: „слажем
   се"). Ознака разреда држи ширину да се колоне поклапају међу редовима. */
.filter-odeljenja { display: flex; gap: 10px; align-items: flex-start;
                    margin-top: 11px; padding-top: 11px;
                    border-top: 1px solid var(--ivica-blaga); }
.filter-naslov {
    font-size: var(--f-oznaka); font-weight: 600; letter-spacing: .02em;
    text-transform: uppercase; color: var(--prigusen-jaci);
    padding-top: 5px; flex: 0 0 auto;
}
/* РАЗРЕДИ СТОЈЕ ЈЕДАН ПОРЕД ДРУГОГ ДОК ИМА ШИРИНЕ (11.08.2026).
   Ненад: „да ли да ставиш овај избор одељења у два реда, да ли ће визуелно
   бити лепше."

   Јесте — али не тако што се разреди СПОЈЕ у два реда. Спајањем би I и II
   постали један низ од седамнаест дугмади без ознаке разреда између, а на
   ужем прозору би се преломио на непредвидивом месту и дао рашчупан трећи
   ред. Уместо тога сваки разред остаје своја целина СА својом ознаком, а
   целине се слажу у ток који се сам прелама.

   Мерено на 1296 px: I и II стану у први ред, III и IV у други — тачно два
   реда која су и тражена. На ужем прозору се враћа на један разред по реду,
   без рашчупаног прелома. Уштеда у висини ≈ 62 px, а ознака разреда се не
   губи ни у једном случају.

   ── МРЕЖА, НЕ ПРЕЛОМ (исти дан, после прве пробе) ─────────────────────
   Прва верзија је користила `flex-wrap`, па је други стубац почињао тамо
   где се први завршио: „II" је седело на 560 px, а „IV" на 575, јер разред
   III има шире ознаке од разреда I. Ненад: „само поравнај ове траке са
   разредима по левој страни ивици."

   `grid` са `auto-fit` даје прави стубац — сви разреди у другој колони
   почињу на истом месту, без обзира колико је дугмади било у првој.
   `min(100%, 30rem)` чува да на уском екрану стубац не прерасте ширину
   (позната замка `auto-fit`-а: `minmax` са фиксним минимумом гура прелив).

   ── ПОРАВНАЊЕ ПО ИНДЕКСУ (17.08.2026) ─────────────────────────────────
   Ненад: „можеш ли да поравнаш да одељења са истим индексом буду једно испод
   другог."

   То укида распоред из првог пасуса: два разреда један поред другог се више
   не могу сложити, јер поравнање тражи да сваки разред буде СВОЈ РЕД у истој
   мрежи. Плаћа се висином (четири реда уместо два), добија се да I-2, II-2,
   III-2 и IV-2 стоје у истом ступцу.

   Број колона зна PHP (унија свих индекса кроз разреде) и предаје га кроз
   `--kolona`. Где разред нема тај индекс, стоји празно место — без њега би се
   следећа ознака померила улево и поравнање би пало баш тамо где је најважније
   (II и III немају 6, али имају 6M и 6R). */
.filter-razredi { display: grid; gap: 4px 0; min-width: 0; }
.filter-razred {
    display: grid;
    grid-template-columns: 26px repeat(var(--kolona, 9), minmax(0, 1fr));
    align-items: center; gap: 0 4px; min-width: 0;
}
.razred-oznaka { text-align: right; font-weight: 700;
                 font-size: var(--f-tabela); color: var(--prigusen-jaci);
                 padding-right: 6px; }
/* Појединачне значке, не спојена трака: у мрежи са празним местима спојени
   оквир би се прекидао на рупама и изгледао покварено. */
.odelj-dugme {
    display: block; text-align: center; padding: 4px 6px;
    font-size: var(--f-osnovni); color: var(--tekst);
    background: var(--kartica); border: 1px solid var(--ivica);
    border-radius: 5px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.odelj-dugme:hover { background: var(--istaknuto); text-decoration: none; }
.odelj-dugme.izabran { background: var(--primarna); border-color: var(--primarna);
                       color: #fff; font-weight: 600; }
.odelj-prazno { display: block; }

/* ── ГЛАВА ИЗАБРАНОГ НАСТАВНИКА · 09.08.2026 ──────────────────────────
   Ненад: „кад изаберем наставника да видим колико му је норме додељено и
   колико треба, и његов статус — одређено или неодређено." */
/* Глава о човеку ОСТАЈЕ ГОРЕ при скроловању (17.08.2026). Ненад: „често
   скролујем доста"; бројеви „до циља" и „додељено" морају да буду видљиви док
   бира поље, иначе се одлучује напамет. Подлога је пуна, не прозирна — испод
   пролазе табеле. `z-index` је изнад садржаја, а испод траке и заглавља. */
.covek-glava {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
    background: var(--kartica); border: 1px solid var(--ivica);
    border-left: 3px solid var(--primarna);
    border-radius: var(--radijus); padding: 11px 14px; margin: 0 0 14px;
    position: sticky; top: 0; z-index: 20;
}
@media print { .covek-glava { position: static; } }

/* ── СИДРО НЕ СМЕ ДА ЗАВРШИ ИСПОД ЛЕПЉИВЕ ГЛАВЕ (17.08.2026) ─────────────
   Ненад: „кад кликнем на додели или уклони да останем ту где јесам, а не да
   се помери сидро."

   Сидра су била исправна — свако дугме шаље своје поље. Али прегледач доводи
   мету на сам врх прозора, а тамо од исте вечери стоји лепљива глава о човеку
   и покрива је. Ред на који се вратиш постоји, само се не види, што изгледа
   као да је страна одскочила.

   `scroll-margin-top` каже прегледачу да остави толико места изнад мете.
   Важи за СВЕ стране, преко `:target` — свака има бар једно сидро, а тамо где
   лепљиве главе нема мета само добије мало ваздуха изнад себе, што не смета.
   Вредност је нешто већа од главе (мерено ≈ 70 px са размаком), да ред не
   седне тачно уз њену ивицу. */
:root { --lepljivo-visina: 92px; }
:target { scroll-margin-top: var(--lepljivo-visina); }
/* Ред табеле је мета код доделе и уклањања из списка поља; и `tr` и `td`
   добијају размак, јер поједини прегледачи рачунају од ћелије. */
tr:target, tr:target > td, tr:target > th { scroll-margin-top: var(--lepljivo-visina); }
@media print { :target { scroll-margin-top: 0; } }
.covek-ime { font-size: var(--f-odeljak); font-weight: 700; margin: 0; }
.covek-broj { display: flex; flex-direction: column; gap: 1px; }
.covek-broj b { font-size: var(--f-podnas); font-weight: 700; }
.covek-broj span { font-size: var(--f-oznaka); color: var(--prigusen-jaci);
                   text-transform: uppercase; letter-spacing: .02em; }
.covek-broj.istaknut b { color: var(--primarna); }
.covek-broj.mana b { color: var(--greska); }
.covek-traka { flex: 1 1 160px; min-width: 120px; max-width: 260px; }

/* ── ЦЕЛИНА · ЈЕДАН ПРЕДМЕТ У ЈЕДНОМ ОДЕЉЕЊУ · 09.08.2026 ─────────────
   Ненад: „ако неки предмет у неком одељењу има теорију, вежбе и блок, да
   се одвоји неком нијансом као целина, због прегледности."

   Прво решење је било смена нијанси по целини. Ненад, исти дан после пробе:
   „да ли су нијансе неопходне пошто је већ одвојено по блоковима" — нису.
   Раздваја ТРАКА (подебљано + пуна линија изнад); сенчење редова је радило
   исти посао слабије, а тукло се и са О-52 траком с лева и са истицањем
   реда на који упис враћа.

   Правило остаје: боја = врста предмета, а целину носи трака. Класа
   `naizmenicno` стоји ниже, ако сенчење икад затреба. */
.tabela tr.celina td {
    background: var(--pozadina-blaga);
    border-top: 2px solid var(--ivica-jaka);
    padding: 7px 10px;
    font-size: var(--f-osnovni);
}
.tabela tr.celina.naizmenicno td,
.tabela tr.u-celini.naizmenicno td { background: #eef1ef; }
.tabela tr.celina.naizmenicno td { background: #e7ebe8; }
.celina-zbir { float: right; display: inline-flex; align-items: center; gap: 8px;
               font-size: var(--f-tabela); color: var(--prigusen-jaci); }

/* ── КОЛОНЕ ТАБЕЛЕ ПОЉА · 09.08.2026 ──────────────────────────────────
   Ненад: „ова дугмад и називи треба да се поравнају… дугмад се појављују
   не једно испод другог, и ако је неки предмет заузет па нема квачице,
   натпис не стоји како треба."

   Три узрока, сва уклоњена:
   1 · квачица је стајала У ЋЕЛИЈИ назива, па се назив померао лево-десно
       од реда до реда. Сад је квачица СВОЈА колона — постоји у сваком
       реду док је масовна додела укључена, и празна је где не треба.
   2 · име наставника и дугме били су у истој ћелији, па је дугме почињало
       тамо где се заврши име. Сад су две колоне, а радња је десно
       поравната — све „Додели" и „Уклони" стоје у једној линији.
   3 · СВАКА ТАБЕЛА ЈЕ ИМАЛА СВОЈЕ ШИРИНЕ (Ненад, 09.08.2026: „ова поља код
       једне овако, код друге другачије"). Мерено на I-1, дванаест табела:
       иста ширина 945 px, исте шест колона, а колона радње иде од 99 до
       437 px, колона наставника од 103 до 325. Табела која још има слободно
       поље носи падајући списак од 420 px и разбије распоред; она код које
       је све додељено се скупи. Зато сад `table-layout: fixed` и удели у
       `<colgroup>`, исти у свакој табели — ширина више не зависи од тога
       шта је у њој. Ширине ћелија више НЕ стоје овде, него у уделима. */
.tabela.tabela-polja { table-layout: fixed; }
.tabela-polja .k-kvacica { padding-right: 0; text-align: center; }
.tabela-polja .k-radnja  { text-align: right; white-space: normal; }
.tabela-polja .ko-drzi   { white-space: normal; }
/* Ред радње увек истог облика: списак заузима пун ред своје колоне, а број
   часова и дугме силазе испод њега, десно поравнати. Раније је списак сам
   одређивао ширину колоне, па је свака табела испала другачија. */
.tabela-polja .k-radnja .forma-inline {
    display: flex; flex-wrap: wrap; width: 100%;
    align-items: center; gap: 6px; justify-content: flex-end;
}
.tabela-polja .k-radnja select { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.tabela-polja .k-radnja .dugme { min-width: 82px; justify-content: center; }
/* поља целине увучена, да се види да припадају траци изнад */
.tabela tr.u-celini td:first-child { padding-left: 22px; }
/* УВЛАЧЕЊЕ ИДЕ НА НАЗИВ ПОЉА, НЕ НА КВАЧИЦУ.
   Док је масовна додела укључена, прва ћелија реда је квачица — па је правило
   изнад увлачило њу. Мерено 09.08.2026: ћелији од 28 px остајало је 6 px за
   квадратић који тражи 20, и садржај се прелио у 165 редова. Сад увлачење
   пада на ћелију ДО ње, а квачица носи своју ускладу. */
.tabela-polja tr.u-celini td.k-kvacica { padding-left: 4px; padding-right: 0; }
.tabela-polja tr.u-celini td.k-kvacica + td { padding-left: 22px; }

/* извештај: сви редови истог предмета у једној нијанси */
.tabela tr.predmet-naizmenicno td { background: #f4f6f5; }

/* ред на који се вратило после доделе — да се око одмах нађе */
tr:target td { background: var(--info-pozadina); }
tr:target td:first-child { box-shadow: inset 3px 0 0 var(--primarna); }


/* ── ПОМОЋНЕ КЛАСЕ · 05.08.2026 ────────────────────────────────────────
   Замењују инлајн стилове по страницама. Пре измене их је било 162, а 51
   је задавао величину фонта — зато су се стране разилазиле. Речник сад
   покрива оно што се стварно понављало; страна више нема шта да измишља. */
.d-desno   { text-align: right; }
.d-levo    { text-align: left; }
.d-sredina { text-align: center; }
.u-redu    { display: inline; }
.bez-preloma { white-space: nowrap; }
.t-sitno   { font-size: var(--f-tabela); }
.t-oznaka  { font-size: var(--f-oznaka); }
.t-tiho    { font-size: var(--f-tabela); color: var(--prigusen-jaci); }
.t-greska  { color: var(--greska); }
.na-desno  { margin-left: auto; }
.red-radnji { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bez-margine { margin: 0; }
.gore-0 { margin-top: 0; }
.dole-0 { margin-bottom: 0; }
.dole-1 { margin-bottom: 6px; }
.dole-2 { margin-bottom: 12px; }
.gore-1 { margin-top: 6px; }
.gore-2 { margin-top: 12px; }
.gore-3 { margin-top: 22px; }
.sirina-mala { width: 64px; }
.sirina-srednja { width: 150px; }
/* прекидач у траци радње — понављао се као инлајн стил на четири стране */
.prekidac { display: flex; align-items: center; gap: 6px;
            font-size: var(--f-osnovni); white-space: nowrap; }
.uska-tabela { max-width: 560px; }
.trag-greske { white-space: pre-wrap; font-size: var(--f-tabela); margin: 6px 0 0; }

/* ══════════════════════════════════════════════════════════════════════
   БЛОК НАСТАВА · 25.08.2026.

   Модул уводи ТАЧНО ЈЕДНУ нову боју — дан блока. Све остало узима из
   постојећег речника. Разлог је исти као на списку старешина: кад свака
   страна донесе своју палету, ништа се више не чита на први поглед.

   ЗАМКА ТЕЖИНЕ СЕЛЕКТОРА (ујела четири пута до сада): опште правило
   `.tabela td.d` носи ДВЕ класе и туче свако наменско са једном. Зато
   табела баланса иде као `.tabela.blok-balans td`, не као `.blok-balans td`.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --blok: #dbe9f4;
    --blok-ivica: #9dbdd8;
    --blok-tekst: #1f4c7a;
}

.blok-raspored { display: grid; grid-template-columns: minmax(0, 1fr) 290px;
    gap: 18px; align-items: start; }
@media (max-width: 900px) { .blok-raspored { grid-template-columns: 1fr; } }

/* ── календар месеца ─────────────────────────────────────────────── */
.kalendar-blok { border: 1px solid var(--ivica); border-radius: var(--radijus);
    overflow: hidden; background: var(--kartica); }
.kalendar-blok .kalendar-vrh { display: flex; justify-content: space-between;
    align-items: baseline; gap: 10px; padding: 9px 12px;
    border-bottom: 1px solid var(--ivica-blaga); background: var(--pozadina-blaga); }
.kalendar-blok .kalendar-vrh .tanko { font-size: var(--f-tabela); color: var(--prigusen-tekst); }

.dani-mreza { display: grid; grid-template-columns: repeat(5, 1fr); }
.dani-mreza .glava { font-size: var(--f-osnovni); font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--prigusen-jaci); text-align: center;
    padding: 7px 0; background: var(--pozadina-blaga);
    border-bottom: 1px solid var(--ivica-blaga); }
.dani-mreza .dan { min-height: 132px; padding: 7px 8px; position: relative;
    border-right: 1px solid var(--ivica-blaga); border-bottom: 1px solid var(--ivica-blaga); }
.dani-mreza .dan:nth-child(5n + 5) { border-right: 0; }
.dani-mreza .dan .br { font-size: var(--f-podnas); font-weight: 600;
    color: var(--prigusen-jaci); display: block; }
.dani-mreza .dan.prazan { background: var(--pozadina-blaga); }
.dani-mreza .dan.nenastavni { background: repeating-linear-gradient(135deg,
    var(--kartica), var(--kartica) 5px, var(--pozadina-blaga) 5px, var(--pozadina-blaga) 10px); }
.dani-mreza .dan.nenastavni .br { color: #b9c2bc; }
.dani-mreza .dan.blok { background: var(--blok); box-shadow: inset 3px 0 0 var(--blok-ivica); }
.dani-mreza .dan.blok .br { color: var(--blok-tekst); font-weight: 600; }
.dani-mreza .dan.predlozen { outline: 1px dashed var(--primarna-svetla); outline-offset: -3px; }
.dani-mreza .dan.izabran { outline: 2px solid var(--primarna); outline-offset: -2px; }

.dani-mreza .sitno-sivo { display: block; margin-top: 4px; font-size: var(--f-oznaka);
    color: #9aa49d; line-height: 1.25; }
.dani-mreza .sitno-blok { display: block; margin-top: 4px; font-size: var(--f-oznaka);
    color: var(--blok-tekst); }
.dani-mreza .znak-zamene { position: absolute; right: 6px; top: 5px;
    font-size: var(--f-oznaka); color: var(--akcenat); font-weight: 600; }
.dani-mreza .kvacica-dana { display: flex; align-items: center; gap: 4px;
    margin-top: 5px; font-size: var(--f-oznaka); color: var(--prigusen-tekst); cursor: pointer; }
.dani-mreza .kvacica-dana input { margin: 0; }

.blok-dugmad { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cela-nedelja { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-top: 14px; padding: 10px 12px; background: var(--pozadina-blaga);
    border: 1px solid var(--ivica-blaga); border-radius: var(--radijus);
    font-size: var(--f-tabela); }
.cela-nedelja .tanko { color: var(--prigusen-tekst); }

/* ── бочна плоча фонда ───────────────────────────────────────────── */
.ploca-fonda { border: 1px solid var(--ivica); border-radius: var(--radijus);
    overflow: hidden; background: var(--kartica); margin-bottom: 14px; }
.ploca-fonda h2 { margin: 0; padding: 9px 12px; font-size: var(--f-podnas);
    background: var(--pozadina-blaga); border-bottom: 1px solid var(--ivica-blaga); }
.ploca-fonda.izmena h2 { background: var(--info-pozadina); color: var(--primarna); }
.ploca-fonda .telo-ploce { padding: 12px; }
.ploca-fonda .par { display: flex; justify-content: space-between; align-items: baseline;
    padding: 5px 0; border-bottom: 1px dotted var(--ivica-blaga); font-size: var(--f-osnovni); }
.ploca-fonda .par:last-of-type { border-bottom: 0; }
.ploca-fonda .par span:first-child { color: var(--prigusen-tekst); }
.ploca-fonda .par b { font-variant-numeric: tabular-nums; }
.ploca-fonda .par .uz { font-size: var(--f-oznaka); color: var(--prigusen-tekst);
    font-weight: 400; margin-left: 5px; }
.ploca-fonda .blok-vodeci { margin: 0 0 10px; font-size: var(--f-osnovni); }
.ploca-fonda .izmena-red { display: flex; gap: 8px; align-items: flex-end;
    flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--ivica-blaga); }
.ploca-fonda .izmena-red .tanko { font-size: var(--f-oznaka); color: var(--prigusen-tekst); }

.balans-dana { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ivica-blaga); }
.balans-dana h3 { margin: 0 0 6px; font-size: var(--f-oznaka); text-transform: uppercase;
    letter-spacing: .04em; color: var(--prigusen-jaci); font-weight: 600; }
.tabela.blok-balans td { padding: 3px 6px; border: 0;
    border-bottom: 1px dotted var(--ivica-blaga); }
.tabela.blok-balans tr:last-child td { border-bottom: 0; }

.poruka-blok { margin: 10px 0 0; padding: 8px 10px; border-radius: 6px;
    font-size: var(--f-tabela); }
.poruka-blok.upozorenje { background: var(--upozorenje-pozadina); color: var(--upozorenje);
    border: 1px solid #f0dcb8; }

/* ── листови за слање наставницима ───────────────────────────────── */
/* Слово је `--f-osnovni`, НЕ мање. Ненад, 25.08: „ако је потребно прећи на
   други лист, али да буде увек читљиво“. Прво се троши ширина (две колоне),
   па тек онда лист — никад читљивост. */
.list-bloka { background: var(--kartica); border: 1px solid var(--ivica);
    border-radius: var(--radijus); padding: 26px 30px; max-width: 780px;
    margin: 0 auto 20px; }
.list-bloka .list-vrh { text-align: center; border-bottom: 2px solid var(--primarna);
    padding-bottom: 11px; }
.list-bloka .list-vrh .skola { font-size: var(--f-podnas); font-weight: 600; letter-spacing: .02em; }
.list-bloka .list-vrh .mesto { font-size: var(--f-tabela); color: var(--prigusen-tekst); }
.list-bloka h2 { text-align: center; font-size: var(--f-odeljak); margin: 14px 0 3px;
    letter-spacing: .02em; }
.list-bloka .list-pod { text-align: center; font-size: var(--f-osnovni);
    color: var(--prigusen-tekst); margin: 0 0 14px; }
.list-dve-kolone { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }

.tabela.blok-list { font-size: var(--f-osnovni); }
.tabela.blok-list td, .tabela.blok-list th { padding: 4px 7px; }
.tabela.blok-list td.d { width: 30px; }
.tabela.blok-list .oznaka-odeljenja { font-weight: 600; white-space: nowrap; }
/* Бојење вишедневних редова избачено 25.08.2026 — текст („ПОН. – ПЕТ.") и
   распон датума то већ кажу, па је боја била само шум на документу који
   иде на седамдесетак наставника. */

.tabela.blok-stanje { font-size: var(--f-tabela); }
.tabela.blok-stanje .oznaka-odeljenja { font-weight: 600; white-space: nowrap; }
.tabela.blok-stanje .dani-preostali { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela.blok-stanje .dani-preostali .nula { color: #b9c2bc; }
.tabela.blok-stanje .dani-preostali .preko { color: var(--greska); font-weight: 600; }

.kocke { display: inline-flex; gap: 2px; vertical-align: -1px; }
.kocke i { width: 9px; height: 9px; border: 1px solid var(--blok-ivica);
    border-radius: 2px; display: block; }
.kocke i.pun { background: var(--blok-ivica); }
.kocke i.prazan { background: var(--kartica); }

.list-legenda { margin-top: 10px; font-size: var(--f-tabela); color: var(--prigusen-tekst);
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.list-fus { margin-top: 13px; font-size: var(--f-tabela); color: var(--prigusen-tekst);
    border-top: 1px dotted var(--ivica-jaka); padding-top: 8px; line-height: 1.5; }
.list-potpis { margin-top: 30px; display: flex; justify-content: flex-end; }
.list-potpis div { text-align: center; font-size: var(--f-osnovni); width: 250px; }
.list-potpis .crta { display: block; border-top: 1px solid var(--tekst);
    margin-bottom: 4px; padding-top: 26px; }

@media print {
    .list-bloka { border: 0; padding: 0; max-width: none; margin: 0; }
    /* Оба документа у једном исписивању — други почиње на СВОМ листу. */
    .list-bloka.novi-list { break-before: page; page-break-before: always; }
    .tabela.blok-list, .tabela.blok-stanje { font-size: var(--f-osnovni); }
    .list-dve-kolone { gap: 0 14px; }
}

/* ── мрежа месеца: одељења × дани ────────────────────────────────── */
/* Заглавље носи датум И скраћену ознаку дана — Ненад, 25.08. Без ње се не
   види да ли је неки понедељак заостао, а баш то Правилник тражи. */
.mreza-meseca { overflow-x: auto; border: 1px solid var(--ivica);
    border-radius: var(--radijus); background: var(--kartica); }
.tabela.mreza-blok { font-size: var(--f-oznaka); border-collapse: collapse; min-width: 900px; }
.tabela.mreza-blok th, .tabela.mreza-blok td { border: 1px solid var(--ivica-blaga);
    padding: 0; text-align: center; }
.tabela.mreza-blok thead th { background: var(--pozadina-blaga); color: var(--prigusen-jaci);
    font-weight: 600; width: 26px; padding: 3px 0; line-height: 1.2;
    text-transform: none; letter-spacing: 0; }
.tabela.mreza-blok thead th .dn { display: block; font-weight: 400; font-size: 9px;
    color: var(--prigusen-tekst); text-transform: uppercase; }
.tabela.mreza-blok thead th .dn.zam { color: var(--akcenat); font-weight: 700; }
.tabela.mreza-blok thead th.vikend, .tabela.mreza-blok thead th.vikend .dn { color: #c6cdc8; }
.tabela.mreza-blok thead th.sa-zamenom { background: var(--upozorenje-pozadina); }
.tabela.mreza-blok .ime-odeljenja { text-align: left; padding: 4px 8px; white-space: nowrap;
    position: sticky; left: 0; background: var(--kartica); z-index: 1;
    font-size: var(--f-tabela); }
.tabela.mreza-blok .ime-odeljenja .tanko { display: block; font-size: var(--f-oznaka);
    color: var(--prigusen-tekst); }
.tabela.mreza-blok tbody tr:nth-child(even) .ime-odeljenja { background: var(--pozadina-blaga); }
.tabela.mreza-blok td.c { height: 26px; width: 26px; }
.tabela.mreza-blok td.c.vikend { background: var(--pozadina-blaga); }
.tabela.mreza-blok td.c.nen { background: repeating-linear-gradient(135deg,
    var(--kartica), var(--kartica) 4px, var(--pozadina-blaga) 4px, var(--pozadina-blaga) 8px); }
.tabela.mreza-blok td.c.b { background: var(--blok); box-shadow: inset 0 0 0 1px var(--blok-ivica); }

/* Данашња КОЛОНА, не ћелија: у мрежи од тридесет дана пута тридесет
   одељења оквир на једној ћелији нико не би нашао. Заглавље добија пун
   оквир, а ћелије испод бочне црте — тако се колона чита од врха до дна,
   а позадина стања (блок · ненаставни · викенд) остаје нетакнута.
   Здружено правило за `b` постоји из истог разлога као горе: `box-shadow`
   је једна особина и последња вредност брише претходну. */
.tabela.mreza-blok thead th.danas {
    box-shadow: inset 0 0 0 2px var(--primarna); color: var(--primarna); font-weight: 700; }
.tabela.mreza-blok td.c.danas {
    box-shadow: inset 1px 0 0 var(--primarna), inset -1px 0 0 var(--primarna); }
.tabela.mreza-blok td.c.b.danas {
    box-shadow: inset 0 0 0 1px var(--blok-ivica),
                inset 1px 0 0 var(--primarna), inset -1px 0 0 var(--primarna); }

.legenda-blok { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px;
    font-size: var(--f-oznaka); color: var(--prigusen-tekst); align-items: center; }
.legenda-blok i { display: inline-block; width: 14px; height: 14px; border-radius: 3px;
    vertical-align: -2px; margin-right: 5px; border: 1px solid var(--ivica-blaga); }
.legenda-blok .uzorak-blok { background: var(--blok); border-color: var(--blok-ivica); }
.legenda-blok .uzorak-vikend { background: var(--pozadina-blaga); }
.legenda-blok .uzorak-nen { background: repeating-linear-gradient(135deg,
    var(--kartica), var(--kartica) 4px, var(--pozadina-blaga) 4px, var(--pozadina-blaga) 8px); }
.legenda-blok .uzorak-danas { background: var(--povrsina);
    box-shadow: inset 0 0 0 2px var(--primarna); border-color: transparent; }

/* ── годишњи преглед ─────────────────────────────────────────────── */
.tabela.blok-godisnji .oznaka-odeljenja { white-space: nowrap; font-weight: 600; }
.tabela.blok-godisnji td.dan-kolona { font-variant-numeric: tabular-nums; }
.tabela.blok-godisnji td.dan-kolona .cilj { color: var(--prigusen-tekst); font-weight: 400; }
.tabela.blok-godisnji td.dan-kolona.preko { color: var(--greska); font-weight: 600; }

/* ── календар године ─────────────────────────────────────────────── */
.tabela.blok-kalendar tr.red-zamene td { background: var(--upozorenje-pozadina); }

/* Ко је ЈОШ на блоку тог дана. Ненад, 25.08: „да се то олакша због
   дуплирања или захтева за дуплим одељењем истог дана на блоку“. Стоји у
   самој ћелији, да се преклапање види ПРЕ уписа. */
.dani-mreza .drugi-na-bloku { display: block; margin-top: 4px; font-size: var(--f-oznaka);
    color: var(--prigusen-tekst); line-height: 1.3; }
.dani-mreza .dan.blok .drugi-na-bloku { color: var(--blok-tekst); }

/* Плоча измене стоји ИЗНАД фонда и носи боју, да се види чим се кликне. */
.ploca-fonda.izmena { border-color: var(--primarna); }

/* ── значке одељења у ћелији дана ────────────────────────────────── */
/* Ненад, 25.08.2026: „ова одељења су толико ситно исписана да се једва виде“
   и „да се већ додељени блокови на тој страни доделе појављују (назив
   одељења)“. Зато свако одељење добија СВОЈУ значку, читљиву; изабрано
   носи пуну боју и води на измену, туђа стоје тише али се виде. */
.odeljenja-dana { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.znacka-blok { display: inline-block; padding: 1px 6px; border-radius: 4px;
    font-size: var(--f-tabela); font-weight: 600; line-height: 1.5;
    white-space: nowrap; border: 1px solid transparent; }
.znacka-blok.moje { background: var(--blok-ivica); color: #fff;
    border-color: var(--blok-tekst); text-decoration: none; }
.znacka-blok.moje:hover { background: var(--blok-tekst); }
.znacka-blok.tudje { background: var(--pozadina-blaga); color: var(--prigusen-jaci);
    border-color: var(--ivica-jaka); font-weight: 500; }

/* Дан на коме ИМА блока добија прозирну попуну, да се види и без читања. */
.dani-mreza .dan.blok { background: var(--blok); box-shadow: inset 3px 0 0 var(--blok-ivica); }
/* Сенчење дана са туђим блоком избачено 25.08.2026 — Ненад: значке се и
   овако виде, а прозирна попуна је правила шум. */

/* ── ДАНАС ────────────────────────────────────────────────────────
   Ненад, 08.09.2026: „стави благо засенчење на тренутни дан, датум…
   код свих и код админа."

   Оквир, никад позадина — исто правило као на школском календару и на
   зборном прегледу по данима. Позадина ове ћелије већ носи стање (блок ·
   ненаставни · празан), па би је нова боја прекрила и податак би нестао.

   ЗАШТО ПОСТОЈИ И ЗДРУЖЕНО ПРАВИЛО. `box-shadow` је ЈЕДНА особина: дан
   који је и блок и данас добио би само последњу вредност, па би му
   нестала лева трака. Зато се обе сенке пишу заједно, а не рачуна се на
   то да ће се сложити саме. */
.dani-mreza .dan.danas { box-shadow: inset 0 0 0 2px var(--primarna); }
.dani-mreza .dan.danas .br { color: var(--primarna); font-weight: 700; }
.dani-mreza .dan.blok.danas {
    box-shadow: inset 3px 0 0 var(--blok-ivica), inset 0 0 0 2px var(--primarna); }
.dani-mreza .dan.blok.danas .br { color: var(--blok-tekst); }

/* ── трака радњи ИЗНАД календара, у једном реду ──────────────────── */
.blok-dugmad.gore { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin: 0 0 12px; padding: 10px 12px; background: var(--pozadina-blaga);
    border: 1px solid var(--ivica-blaga); border-radius: var(--radijus); }
.nedelja-u-traci { display: flex; gap: 6px; align-items: center;
    font-size: var(--f-tabela); color: var(--prigusen-jaci); }
.nedelja-u-traci label { display: flex; gap: 6px; align-items: center; }
.nevidljiva-forma { display: none; }
.ispod-kalendara { margin: 10px 0 0; font-size: var(--f-tabela); color: var(--prigusen-tekst); }

/* Дугме уз поље, у истом реду — Ненад, 25.08: „помери треба да стоји
   поред поља (десно) помери на датум“. */
.polje-sa-dugmetom { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.polje-sa-dugmetom .filter-polje { min-width: 0; flex: 1 1 130px; }

/* ── грб уз назив школе на документима ───────────────────────────── */
/* Свилајнац НИЈЕ место испод назива него део назива, под наводницима, у истом
   реду и истим словом (Ненад, 25.08). */
.list-vrh { display: flex; align-items: center; justify-content: center; gap: 12px;
    text-align: left; }
.list-vrh .grb { width: 46px; height: auto; flex: 0 0 auto; }
.list-vrh .skola { font-size: var(--f-podnas); font-weight: 600; letter-spacing: .01em;
    line-height: 1.35; }

/* ── матрица одељење × дан недеље ────────────────────────────────── */
/* Облик из Ненадовог `табела блок 2019-2020.docx`: колоне у круговима
   пон·уто·сре·чет·пет, датум у ћелији. Празна ћелија унутар фонда одмах каже
   да тај дан недеље још није искоришћен. */
.naslov-tabele { font-size: var(--f-odeljak); margin: 26px 0 10px; }
.tabela.blok-matrica { font-size: var(--f-tabela); }
.tabela.blok-matrica th, .tabela.blok-matrica td { padding: 3px 5px; text-align: center; }
.tabela.blok-matrica th.krug { background: var(--istaknuto); color: var(--primarna);
    font-size: var(--f-oznaka); letter-spacing: .03em; }
.tabela.blok-matrica th.dan-kolona { width: 46px; font-size: var(--f-oznaka); }
.tabela.blok-matrica .ime-odeljenja { text-align: left; font-weight: 600; white-space: nowrap;
    position: sticky; left: 0; background: var(--kartica); z-index: 1; }
.tabela.blok-matrica tbody tr:nth-child(even) .ime-odeljenja { background: var(--pozadina-blaga); }
.tabela.blok-matrica td.datum-celija { font-variant-numeric: tabular-nums;
    color: var(--prigusen-tekst); }
.tabela.blok-matrica td.datum-celija.ima { background: var(--blok); color: var(--blok-tekst);
    font-weight: 600; }
.tabela.blok-matrica td.datum-celija.van-fonda { background: repeating-linear-gradient(135deg,
    var(--pozadina-blaga), var(--pozadina-blaga) 3px, #eceeed 3px, #eceeed 6px); }
.tabela.blok-matrica .pocetak-kruga { border-left: 2px solid var(--ivica-jaka); }

/* Заглавље на страни „Дани у недељи“: на екрану га нема, у штампи јесте.
   Разлог: страна је и преглед и документ, а документ мора да носи назив
   школе, наслов и потпис. */
.naslov-stampe { text-align: center; font-size: var(--f-odeljak); margin: 14px 0 3px;
    letter-spacing: .02em; }
.samo-stampa.list-vrh { margin-bottom: 0; }

/* ── ЗАМКА ТЕЖИНЕ СЕЛЕКТОРА, ПЕТИ ПУТ ───────────────────────────────
   `.samo-stampa` носи `display: none`, али `.list-vrh` носи `display: flex`
   и стоји НИЖЕ у фајлу — иста тежина, па побеђује редослед. Због тога се
   заглавље школе видело на екрану, а сме само у штампи (Ненад, 25.08:
   „не треба грб овде, само на штампи“).

   Лек је ДВЕ класе, не важнија вредност: `.samo-stampa.list-vrh` тежи више
   од самог `.list-vrh` и не зависи од редоследа. Исто правило важи за свако
   ново правило над `.tabela`. */
.samo-stampa.list-vrh { display: none; }
@media print {
    .samo-stampa.list-vrh { display: flex; }
}

/* Потпис: ИМЕ на црту, дужност ИСПОД ње (Ненад, 25.08.2026). Име се чита из
   базе, из посебног фонда организатора практичне наставе — не уписује се тврдо.

   `padding-top` изнад имена оставља простор за руком написан потпис. */
/* Ненад, 25.08.2026: „не потписује се ништа“. Значи ни простор изнад имена
   не треба; блок је збијен: име, црта, дужност одмах испод.

   `padding-top: 0` је ОБАВЕЗАН. Старије правило `.list-potpis .crta` носи
   `padding-top: 26px`, а иста тежина значи да ново правило гази само оно што
   ИЗРИЧИТО постави — без ове линије је испод црте остајало 26 px празнине.
   Замка тежине селектора, шести пут. */
.list-potpis .ime { display: block; font-size: var(--f-osnovni); padding-top: 0; }
.list-potpis .crta { display: block; border-top: 1px solid var(--tekst);
    margin: 2px 0 3px; padding-top: 0; }
.list-potpis .duznost { display: block; font-size: var(--f-tabela);
    color: var(--prigusen-tekst); margin: 0; }

/* ── ОБРАЗАЦ 40-ЧАСОВНЕ ─────────────────────────────────────────────────
   Затворено поље: го број који се кликом отвара у унос. Тачкаста линија је
   једини знак да се може дирати — Ненад, 06.09.2026: „овде је фонт и дебљина
   различит, направи да буде иста", па се број НЕ подебљава ни боји.
   Носе две класе да их опште `.tabela td.d` правило не претекне. */
.tabela td .o40-broj { cursor: pointer; border-bottom: 1px dotted var(--ivica-jaka); }
.tabela td .o40-broj:hover { border-bottom-color: var(--tekst); }

/* Колона радње: уска, јер носи једно дугме. Ненад, 06.09.2026: „ово поља су
   широка а има само квачицу." */
.tabela th.o40-radnja, .tabela td.o40-radnja { width: 2.4rem; text-align: center; padding-left: 0; padding-right: 0; }

/* Потврда стоји УЗ БРОЈ и види се само док је поље отворено — Ненад,
   06.09.2026: „овде остави чек боксове као што су били, ово сам мислио код
   броја или нешто слично."
     ✓ зелено   потврди и затвори
     ✕ црвено   обриши ставку */
.tabela td .o40-potvrda { margin-left: 0.3rem; white-space: nowrap; }
.tabela td .o40-ok, .tabela td .o40-ne {
    cursor: pointer; background: none; border: 1px solid var(--ivica);
    border-radius: 4px; padding: 0.05rem 0.3rem; margin-left: 0.15rem;
    line-height: 1; font-size: 0.9rem; font-family: inherit;
}
.tabela td .o40-ok { color: var(--primarna); }
.tabela td .o40-ne { color: var(--greska); }
.tabela td .o40-ok:hover { border-color: var(--primarna); background: #e8f3ec; }
.tabela td .o40-ne:hover { border-color: var(--greska); background: #fbeae9; }

/* Бројеви на обрасцу су мало већи од текста — они су оно што се чита.
   Ненад, 06.09.2026: „само ови бројеви да буду мало већи." */
.tabela td .o40-broj, .tabela td .o40-sati { font-size: 1.05rem; }

/* Најава измене: прелазак мишем преко РЕДА подебља линију и подложи ћелију,
   да се види да се ту може дирати. Ненад: „ова измена да се наслућује мало
   више кад мишем пређеш." */
.tabela tr:hover td .o40-broj {
    border-bottom: 1px solid var(--akcenat);
    background: var(--istaknuto);
    border-radius: 3px; padding: 0 0.25rem;
}

/* ── ЗА ГОДИШЊИ ПЛАН ─────────────────────────────────────────────────────
   Ставке су редови, људи колоне — исти облик као образац који се прилаже уз
   Годишњи план рада школе. Први ступац носи назив ставке, зато лево. */
.tabela.o40-plan th:first-child, .tabela.o40-plan td:first-child { text-align: left; }
.tabela.lomi-stranu { page-break-after: always; }
/* Осам колона на положеној А4: ситнији слог и прелом дугих имена. Ширине
   даје `<colgroup>` у самој страни, зато их овде нема. */
.tabela.o40-plan { table-layout: fixed; }
.tabela.o40-plan th, .tabela.o40-plan td { overflow-wrap: anywhere; }
@media print { .tabela.o40-plan { font-size: 0.78rem; } }

/* Бројеви по средини колоне, да прате УКУПНО испод — Ненад, 06.09.2026:
   „стави по средини ове бројеве да прати овај збир по средини."
   ТРИ КЛАСЕ намерно: опште `.tabela td.d` носи две и иначе би победило
   (иста замка као са `.tabela td.d { text-align: right }` — види белешку
   о тежини селектора). */
.tabela.o40-plan td.d, .tabela.o40-plan th.d { text-align: center; }
@media screen { .tabela.lomi-stranu { margin-bottom: 1.6rem; } }

/* ── ШКОЛСКИ КАЛЕНДАР ────────────────────────────────────────────────────
   Дванаест малих месеци један до другог, да се цела година види одједном без
   листања. `auto-fill` уместо фиксног броја колона: на ужем екрану их стане
   мање, на ширем више, а ниједан месец се не деформише. */
.kal-godina {
    display: grid; gap: 0.9rem;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.kal-mesec h3 { margin: 0 0 0.25rem; font-size: 0.86rem; font-weight: 600; }

/* Табеле дана НЕ носе класу `.tabela` намерно — оно опште правило би им дало
   размак и обрубе рачунате за спискове, а овде је свака ћелија један дан. */
.kal { border-collapse: collapse; width: 100%; table-layout: fixed; }
.kal th {
    font-weight: 400; font-size: 0.66rem; padding: 1px 0;
    color: var(--tekst-tiho); text-align: center;
}
.kal td {
    text-align: center; padding: 2px 0; font-size: 0.76rem;
    border: 1px solid transparent; border-radius: 3px;
}
.kal td.prazno { visibility: hidden; }
.kal td.vikend { color: var(--tekst-tiho); }

/* Данашњи дан: ОКВИР, никад позадина — позадина већ носи врсту дана, па би
   је нова боја прекрила. (Ненад, 07.09.2026: „осенчити неком благом
   нијансом тренутни датум.") */
.kal td.danas {
    box-shadow: inset 0 0 0 2px var(--primarna);
    border-radius: 3px; font-weight: 700;
}

/* Боја носи значење, али не сама: сваки означен дан има и `title` са пуним
   објашњењем, па се разлика не губи оном ко боје не разликује. */
.kal td.nenastavni { background: #fbeae9; color: var(--greska); font-weight: 600; }

/* ── БОЈЕ ПО ЛЕГЕНДИ ПРАВИЛНИКА (чл. 12, табеларни преглед) ─────────────
   Ненад, 07.09.2026: „ознаке на сличан начин као на овом школском табеларном
   приказу… ова црвена за завршне је превише јака и алудира да уопште нема
   наставе, ова црта доле се једва наслућује."

   Правило иза боја: ЈАЧИНА БОЈЕ = КОЛИКО ДАН ОДСТУПА.
     · дан кад нико не ради  → пуна боја
     · дан кад ради део њих  → блага боја
     · дан кад сви раде      → бела подлога и тачка у углу

   Зато ниједна ознака (`kal-oznaka`) нема позадину: настава се тог дана
   одржава и боја би лагала. Носи тачку, коју показује правило испод. */
.kal td.k-raspust     { background: #f2f4f7; color: #5b6472; font-weight: 600; }
.kal td.k-drzavni     { background: #fbeae9; color: var(--greska); font-weight: 700; }
.kal td.k-radni       { background: #eef1f6; color: #4a5568; font-weight: 600; }
.kal td.k-dan-skole   { background: #e8f3ec; color: var(--primarna); font-weight: 700; }
.kal td.k-ekskurzija  { background: #fdf3e7; color: #9a6321; font-weight: 600; }
/* Дани после 28.05. завршнима НЕ добијају боју — довољан је тај један датум.
   Ово правило намерно ништа не поставља; стоји да се види да је одлучено. */
.kal td.k-zavrsni     { /* без боје — Ненад, 08.09.2026 */ }
.kal td.k-zamena      { background: #e8f3ec; color: var(--primarna); font-weight: 700; }
.kal td.k-ostalo      { background: #f2f4f7; color: #5b6472; }

/* Ознака без дејства: дан остаје бео, у горњем десном углу стоји тачка.
   `.kal td.kal-oznaka` носи две класе и зато претеже правилу за категорију
   изнад — тежина селектора је у овом фајлу већ четири пута била узрок
   „стил не ради". */
.kal td.kal-oznaka {
    background: var(--povrsina); color: inherit; font-weight: 600;
    position: relative;
}
.kal td.kal-oznaka::after {
    content: ""; position: absolute; top: 2px; right: 2px;
    width: 5px; height: 5px; border-radius: 50%; background: #b08a3e;
}
.kal td.k-radno.kal-oznaka::after     { background: var(--greska); }
.kal td.k-kraj.kal-oznaka::after      { background: var(--primarna); }
/* ЗАВРШЕТАК НАСТАВЕ И ПРАКСЕ — једини датуми који носе оквир.
   Ненад, 08.09.2026: „може само оквир на 28 јер ту завршавају… можеш да
   нагласиш 13 август завршетак професионалне праксе, 18 јун завршетак за она
   одељења која немају професионалну праксу."
   Три дана у целој години, зато смеју да буду јасно означена. */
.kal td.k-kraj, .kal td.k-prakse {
    box-shadow: inset 0 0 0 2px var(--primarna); border-radius: 3px;
    font-weight: 700;
}
.kal-legenda.k-kraj, .kal-legenda.k-prakse {
    background: var(--povrsina); box-shadow: inset 0 0 0 2px var(--primarna);
}
.kal td.k-prijemni.kal-oznaka::after  { background: #6a5acd; }
.kal td.k-secanje.kal-oznaka::after   { background: #2f5b8c; }
.kal td.k-expo.kal-oznaka::after      { background: #0f9b8e; }
.kal td.k-verski.kal-oznaka::after    { background: #b08a3e; }

/* Легенда: свака ставка у свом реду токова, да се не ломи насред назива. */
/* Колона са редним бројем наставне недеље, лево од сваког реда — исто место
   где стоји и у табеларном прегледу уз Правилник. Тиха је намерно: број
   недеље се тражи кад затреба, не чита се уз сваки дан. */
.kal th.kal-ned, .kal td.kal-ned {
    width: 1.9rem; text-align: right; padding-right: 6px;
    color: var(--tekst-tiho); font-size: 0.72rem; font-weight: 400;
    border-right: 1px solid var(--ivica); background: transparent;
}
.kal-mesec h3 .kal-dana {
    float: right; font-weight: 400; font-size: 0.74rem; color: var(--tekst-tiho);
}
@media print { .kal-mesec h3 .kal-dana { float: none; margin-left: 8px; } }

.kal-legenda-blok {
    display: flex; flex-wrap: wrap; gap: 4px 18px;
    margin: 12px 0 4px; font-size: var(--f-6); color: var(--tekst-tiho);
}
.kal-stavka { display: inline-flex; align-items: center; gap: 6px; }
.kal-legenda.k-raspust    { background: #f2f4f7; }
.kal-legenda.k-drzavni    { background: #fbeae9; }
.kal-legenda.k-radni      { background: #eef1f6; }
.kal-legenda.k-dan-skole  { background: #e8f3ec; }
.kal-legenda.k-ekskurzija { background: #fdf3e7; }
.kal-legenda.k-zavrsni    { background: #fdf3e7; }
.kal-legenda.k-zamena     { background: #e8f3ec; }
.kal-legenda.k-ostalo     { background: #f2f4f7; }
.kal-legenda.danas        { background: var(--povrsina); box-shadow: inset 0 0 0 2px var(--primarna); }
/* Ознака у легенди изгледа исто као на мрежи: бело поље са тачком. */
.kal-legenda.kal-oznaka {
    background: var(--povrsina); border: 1px solid var(--ivica);
    position: relative;
}
.kal-legenda.kal-oznaka::after {
    content: ""; position: absolute; top: 2px; right: 2px;
    width: 5px; height: 5px; border-radius: 50%; background: #b08a3e;
}
.kal-legenda.k-radno.kal-oznaka::after    { background: var(--greska); }
.kal-legenda.k-kraj.kal-oznaka::after     { background: var(--primarna); }
.kal-legenda.k-prijemni.kal-oznaka::after { background: #6a5acd; }
.kal-legenda.k-secanje.kal-oznaka::after  { background: #2f5b8c; }
.kal-legenda.k-expo.kal-oznaka::after     { background: #0f9b8e; }
.kal-legenda.k-verski.kal-oznaka::after   { background: #b08a3e; }
.kal td.zamena     { background: #e8f3ec; color: var(--primarna); font-weight: 600; }

/* Дан који важи само за завршне разреде — иста боја, али са цртом, да се на
   први поглед разликује од оног који важи свима. */

/* Дан који важи САМО ЗА ЗАВРШНЕ разреде — блага нијанса, не црвено.
   Ненад, 07.09.2026: „матуранти иду на екскурзију, други нормално раде…
   мислим да треба да се нијанса благо промени."
   Носи ТРИ класе (`.kal td.nenastavni.samo-zavrsni`) да претегне општем
   правилу за `nenastavni` — оно има две и иначе би победило редоследом. */
/* „Важи само за завршне" НЕ носи никакву своју ознаку.

   Ненад, 08.09.2026: „ово за завршне разреде је превише јако, као да је то
   најбитније у целом календару; нека остане дискретно жуто без ових оквира
   испрекиданих… после тога нема потребе ништа бојити."

   Испрекидан оквир је стајао на деветнаест дана и вукао око јаче него распуст.
   Довољно је знати ЈЕДАН датум — 28.05.2027, кад завршним престаје настава;
   све после тога се подразумева. Зато оквир носи само тај дан, кроз
   `kategorija = kraj_polugodista`, а не сваки дан који се завршних тиче. */
.kal-legenda.samo-zavrsni {
    background: #fdf3e7; border: 1px solid #e0b878;
}
.kal td.zamena.samo-zavrsni {
    background: #eef4fb; color: #2f5b8c; border-bottom: 2px solid #a8c4e0;
}

.kal-legenda {
    display: inline-block; width: 0.72rem; height: 0.72rem;
    border-radius: 3px; vertical-align: -1px; margin-right: 0.15rem;
}
.kal-legenda.nenastavni   { background: #fbeae9; }
.kal-legenda.zamena       { background: #e8f3ec; }

/* Сажетак сопственог термина изнад поља за унос. */
.moj-termin-sazetak {
    margin: 0 0 10px; padding: 8px 12px; border-radius: 6px;
    background: var(--info-pozadina); border: 1px solid #bcd8c0;
}
.moj-termin-sazetak strong { font-size: var(--f-3); }
.moj-termin-sazetak .t-tiho { margin-left: 8px; }
.moj-termin-radnje { display: flex; align-items: center; gap: 8px; margin: 0; }
.moj-termin-radnje form { margin: 0; }

/* Зборни преглед блока по данима у недељи — данашњи датум. Иста замисао:
   ћелија већ носи стање (`ima`, `van-fonda`), па се додаје само оквир. */
.tabela .datum-celija.danas {
    box-shadow: inset 0 0 0 2px var(--primarna);
    font-weight: 700;
}

/* Штампа: мрежа се сужава да цела година стане на један лист. */
@media print {
    .kal-godina { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
    .kal td, .kal th { font-size: 0.66rem; }
}

/* ── МРЕЖА ЗА ГОДИШЊИ ПЛАН СЕ УРЕЂУЈЕ ─────────────────────────────────────
   Ненад, 06.09.2026: „било би ми корисно да могу да уређујем из овог приказа
   за годишњи план… кликнем на поље, аутоматски убаци број који је предвиђен
   по правилнику."

   ТЕЖИНА СЕЛЕКТОРА: `.tabela.o40-plan td.d` носи ТРИ класе, па све што му се
   супротставља мора да носи бар толико. Опште правило `.tabela td.d` је већ
   четири пута оборило наменско са једном класом.

   Цела ћелија је кликабилна, не само број: у мрежи је колона широка око
   115 px, а број у њој заузима десетак — гађати само њега је мучење. */
.tabela.o40-plan td.o40-c { cursor: pointer; }
.tabela.o40-plan td.o40-c:hover { background: var(--istaknuto); }

/* Поље за унос мора да стане у уску колону — зато је уже од броја и без
   стрелица које прегледач додаје бројчаном пољу (зато `type=text`). */
.tabela.o40-plan td.o40-c .o40-unos {
    width: 3.2rem; text-align: center; font-size: 1.05rem;
    padding: 0.05rem 0.15rem; border: 1px solid var(--primarna); border-radius: 3px;
}

/* Промењена ћелија се види ПРЕ чувања — иначе се не зна шта ће дугме уписати.
   Само она добија бојену подлогу; збир испод се не боји, он је последица. */
.tabela.o40-plan td.o40-c.o40-izmenjena { background: #fff6de; font-weight: 600; }
.tabela.o40-plan td.o40-c.o40-izmenjena:hover { background: #ffefc9; }

/* Збир који не седи на циљу — тиха ознака, не грешка: Ненад бира колико ко
   носи, а разлика показује ставке које још нису додељене. */
.tabela.o40-plan th.o40-ne-sedi { color: var(--greska); }

/* Штампа не зна за уређивање: ни оквир, ни подлога, ни показивач. */
@media print {
    .tabela.o40-plan td.o40-c, .tabela.o40-plan td.o40-c.o40-izmenjena {
        background: none; font-weight: inherit; cursor: auto;
    }
    .tabela.o40-plan th.o40-ne-sedi { color: inherit; }
}

/* ── ПРОМЕНА ЛОЗИНКЕ ─────────────────────────────────────────────────────
   Ненад, 08.09.2026: „модал онако леп са свим детаљима."

   Кад је промена ОБАВЕЗНА, страна се исцртава без леве траке (`stranica_pocetak`
   прима `nav = false`) и тело носи класу `lozinka-obavezno` — тад панел стоји
   усред екрана на затамњеној подлози, као модал. Кад је добровољна, исти панел
   је обичан део стране.

   Није прави модал са Јаваскриптом намерно: тако не постоји ништа што се гаси
   или заобилази. Брана је ионако на серверу, у `zahtevaj_prijavu()`. */
body.lozinka-obavezno {
    background: linear-gradient(160deg, #14332a 0%, #1a2e2a 100%);
    min-height: 100vh;
}
body.lozinka-obavezno .sadrzaj { max-width: 520px; margin: 0 auto; padding: 0 16px; }
body.lozinka-obavezno .okvir { min-height: 100vh; align-items: center; justify-content: center; }
body.lozinka-obavezno .podnozje { color: rgba(255, 255, 255, .45); }

.lozinka-panel {
    background: var(--kartica); border: 1px solid var(--ivica);
    border-radius: 12px; padding: 22px 24px; max-width: 520px;
}
.lozinka-panel.obavezno {
    box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
    border-color: rgba(255, 255, 255, .18);
    margin: 28px auto;
}
.lozinka-znak { font-size: 30px; margin: 0 0 6px; line-height: 1; }
.lozinka-panel h1 { font-size: 1.32rem; margin: 0 0 8px; line-height: 1.25; }
.lozinka-uvod { color: var(--tekst-tiho); margin: 0 0 16px; line-height: 1.5; }

.lozinka-forma { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.lozinka-polje { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.lozinka-polje > span { font-size: var(--f-tabela); }
.lozinka-polje input {
    width: 100%; padding: 10px 12px; font: inherit;
    border: 1px solid var(--ivica-jaka); border-radius: 7px; background: var(--povrsina);
}
.lozinka-polje input:focus {
    outline: 2px solid var(--primarna); outline-offset: 1px; border-color: var(--primarna);
}
.lozinka-prikaz { margin: 0; font-weight: 400; }
.lozinka-prikaz label { display: inline-flex; align-items: center; gap: 7px;
                        color: var(--tekst-tiho); font-size: var(--f-tabela); }

/* Услови: кружић који постаје квачица. Црвено се НЕ користи — човек још куца,
   а неиспуњен услов није грешка него корак који му предстоји. */
.lozinka-uslovi { list-style: none; margin: 2px 0 4px; padding: 0;
                  font-size: var(--f-tabela); color: var(--tekst-tiho); }
.lozinka-uslovi li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.lozinka-uslovi li::before {
    content: ""; width: 15px; height: 15px; border-radius: 50%;
    border: 1.5px solid var(--ivica-jaka); flex: 0 0 auto;
    background-repeat: no-repeat; background-position: center;
}
.lozinka-uslovi li.ok { color: var(--primarna); }
.lozinka-uslovi li.ok::before {
    border-color: var(--primarna); background-color: var(--primarna);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 11px 11px;
}
.lozinka-dugmad { display: flex; gap: 10px; align-items: center; margin-top: 4px; }

/* ── КВАЧИЦА У РЕДУ ОБРАСЦА ──────────────────────────────────────────────
   `.forma-inline label` је намењен натпису ИЗНАД поља: усправан, ситан,
   верзалом. Квачица тражи супротно — водоравно, поред себе, обичним словима.
   Без овога је чекбокс наслеђивао усправан ток и растао преко реда, а натпис
   се читао као наслов колоне.

   Три класе (`.forma-inline label.uz-polje`) јер опште правило носи две; са
   мање не би претегло. Тежина селектора у овом фајлу је већ пет пута била
   узрок да „стил не ради". */
.forma-inline label.uz-polje {
    flex-direction: row; align-items: center; gap: 7px;
    text-transform: none; letter-spacing: 0; font-weight: 400;
    font-size: var(--f-osnovni); color: var(--tekst);
    align-self: flex-end; padding-bottom: 7px;
}
.forma-inline label.uz-polje input[type="checkbox"] {
    display: inline-block; margin: 0; width: auto; flex: 0 0 auto;
    accent-color: var(--primarna);
}

/* Корисничко име уз наслов стране човека. Тихо, али увек ту: школа има
   четири Ненада и три Дејана, а корисничко име их сигурно раздваја. */
.naslov-korime {
    font-size: var(--f-tabela); font-weight: 400; color: var(--tekst-tiho);
    background: var(--pozadina-blaga); border: 1px solid var(--ivica);
    border-radius: 5px; padding: 2px 7px; margin-left: 8px;
    vertical-align: middle;
}

/* ── ПОТВРДА КРОЗ МОДАЛ ──────────────────────────────────────────────────
   Ненад, 08.09.2026: „стави да се сва ова упозорења при брисању и мењању
   јављају кроз модал, то ћемо касније да развијамо због естетике."

   Тридесет пет потврди на петнаест страна преузима `assets/potvrda.js` —
   ниједна страна се не мења. Овде стоји само изглед, што и јесте било у
   договору: развија се даље без дирања иједне радње.

   Заклон је `position: fixed` са својим слојем; панел се не помера садржајем
   иза себе, а на телефону се лепи уз дно, где му је палац. */
.modal-zaklon {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(16, 32, 26, .52);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: modal-ulaz .12s ease-out;
}
@keyframes modal-ulaz { from { opacity: 0 } to { opacity: 1 } }

.modal-panel {
    background: var(--kartica); border-radius: 12px;
    box-shadow: 0 20px 52px rgba(0, 0, 0, .34);
    padding: 20px 22px; max-width: 420px; width: 100%;
    border-top: 4px solid var(--primarna);
}
/* Опасна радња носи црвену црту, не црвену позадину: боја саопштава ШТА је
   у питању, а не виче на човека који је можда само погрешно кликнуо. */
.modal-panel.opasno { border-top-color: var(--greska); }

/* Јављање да радња НИЈЕ извршена — иста црвена црта као опасна радња, јер
   говоре о истој ствари са две стране: једна пита пре, друга каже после.
   Дугме је само једно, па сме да заузме цео ред. */
.modal-panel.javljanje { border-top-color: var(--greska); }
.modal-panel.javljanje .modal-dugmad { justify-content: flex-end; }
/* Успех кроз модал (13.09.2026) — иста кутија, зелена црта: „Урађено". */
.modal-panel.javljanje.uspeh { border-top-color: var(--primarna); }

.modal-naslov { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.3; }
.modal-telo {
    margin: 0 0 6px; color: var(--tekst); line-height: 1.45;
}
/* Прва линија тела је по правилу ИМЕ ЧОВЕКА — због тога су имена и додата у
   потврде (в1.31). Зато је истакнута. */
.modal-telo:first-of-type { font-weight: 600; }

.modal-dugmad {
    display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px;
}
.modal-dugmad .dugme { min-width: 7rem; justify-content: center; }

@media (max-width: 640px) {
    /* На телефону панел иде уз дно — тамо стиже палац, а не у средину екрана. */
    .modal-zaklon { align-items: flex-end; padding: 0; }
    .modal-panel {
        max-width: none; border-radius: 14px 14px 0 0; padding: 18px 16px 22px;
    }
    .modal-dugmad { flex-direction: column-reverse; }
    .modal-dugmad .dugme { width: 100%; min-height: 44px; }
}

/* ── УЛОГЕ КАО ЗНАЧКЕ ─────────────────────────────────────────────────────
   Ненад, 09.09.2026: „сад се улоге склањају без икаквог упозорења и неко ко
   има више улога не знам како се понаша."

   Табела „Додела улоге" је дотад давала ред по УЛОЗИ: ко има три улоге стајао
   је три пута, три пута исто име, три дугмета „Уклони" и ниједно не каже
   које. Сад је ред по ЧОВЕКУ, а свака улога је значка са својим „×".

   Значке се ЛОМЕ у више редова саме — зато на телефону не треба ниједно
   посебно правило: ћелија расте у висину уместо да гура табелу у ширину. */
.tabela.tabela-uloge td:first-child { white-space: nowrap; }
.tabela.tabela-uloge td { vertical-align: top; }

.uloga-znacka {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 6px 6px 0; padding: 3px 4px 3px 10px;
    background: #ecefec; color: #3f4b44;
    border-radius: 999px; font-size: 0.82rem; line-height: 1.5;
}
.uloga-znacka .uz-znacku {
    padding-left: 6px; border-left: 1px solid #cfd6d1;
    color: #5b6b60; font-weight: 600;
}
.uloga-znacka form { display: inline-flex; margin: 0; }

/* Дугме је тихо док се не дотакне: значка се чита као податак, не као
   позив на брисање. Пречник 22 px је најмање што прст поуздано погађа
   унутар значке, а сама значка носи и `title` и `aria-label`. */
.znacka-x {
    width: 22px; height: 22px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: transparent; color: #8a9790;
    font-size: 15px; line-height: 1;
}
.znacka-x:hover, .znacka-x:focus-visible {
    background: var(--greska); color: #fff; outline: none;
}

/* Изведена улога — настала уз старешинство или председништво, скида се тамо
   где је и настала. Друга боја и угашено дугме кажу то и без превлачења
   миша, што на телефону и јесте једини начин. */
.uloga-znacka.vezana { background: #f4f1e6; color: #6d6450; }
.uloga-znacka.vezana .uz-znacku { border-left-color: #ded6be; color: #8a7f65; }
.znacka-x[disabled] { cursor: not-allowed; color: #bcc3bd; }
.znacka-x[disabled]:hover { background: transparent; color: #bcc3bd; }

/* ══════════════════════════════════════════════════════════════════════════
   ОВДЕ ЈЕ КРАЈ ФАЈЛА, И ТО НАМЕРНО.

   Мобилни блок је до 08.09.2026. стајао око реда 500 — испред `.md-lista`
   (ред 1269) и десетина других правила. `@media` НЕ подиже тежину селектора:
   `.md-lista` из основног дела фајла и `.md-lista` из мог блока имају исту
   тежину, па побеђује онај који долази КАСНИЈЕ. Зато је списак на четири
   стране Норме остајао `position: absolute` широк 268 px, а табела у детаљу
   била широка ДВАДЕСЕТ ЧЕТИРИ пиксела — правило је било написано, примењено
   није било.

   Ово је пета пут да тежина/редослед селектора у овом фајлу ује.
   Свако ново мобилно правило иде ИСПОД ове црте, никад изнад.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   ТЕЛЕФОН · до 640 px
   ══════════════════════════════════════════════════════════════════════
   Ненад, 07.09.2026: „наставници ће одмах и у најчешћем случају да користе
   мобилни, среди ми мобилни приказ перфектно… све модуле среди да се на
   мобилном приказују професионално, да нема одсецања заглавља."

   Затечено стање, мерено на 375 px: најужи праг у целом фајлу био је 600 px,
   а телефон је 375–430. Штампа је имала преко шездесет правила, телефон
   двадесетак. Отуд три квара која се виде на СВАКОЈ страни:

     1 · назив школе излази ван екрана десно
     2 · табела бежи удесно, а последње колоне се не виде
     3 · имена се ломе по слово — „Бан / ков / ић / Иван"

   Правила испод не гађају ниједну страну посебно. Гађају ОБРАСЦЕ које све
   стране деле: заглавље, панел, табелу, траку радњи, обрасце. Тако нова
   страна долази већ сређена.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── ЗАГЛАВЉЕ ─────────────────────────────────────────────────────
       Назив се више не сече него се ЛОМИ. Прелом у два реда је увек бољи
       од одсецања: одсечено име не може да се прочита ни померањем. */
    .zaglavlje { padding: 0 12px; }
    .zaglavlje-unutra { gap: 10px; min-height: 0; padding: 10px 0; }
    .zaglavlje .logo { gap: 10px; flex: 1 1 100%; min-width: 0; }
    .logo-grb { width: 44px; height: 44px; padding: 3px; border-width: 1.5px; flex: 0 0 auto; }
    .logo-tekst { min-width: 0; }
    .logo-tekst strong {
        font-size: 15px; line-height: 1.2;
        white-space: normal; overflow-wrap: anywhere;
    }

    /* ── ШКОЛА СЕ ЗОВЕ ПУНИМ ИМЕНОМ И НА ТЕЛЕФОНУ ────────────────────
       Ненад, 09.09.2026: „видим да на насловној страни пише само
       Пољопривредна школа, не види се 'са домом ученика Свилајнац' —
       причам за мобилни приказ, натпис поред грба."

       Узрок је старо правило на 620 px:
           `.logo-tekst span, … { display: none; }`
       Оно крије СВАКИ `span` у логоу, а други ред назива је баш span. Исто
       то правило је већ једном сакрило име пријављеног човека, па га је овај
       блок вратио (види ниже); ово је остало.

       Школа се зове „Пољопривредно-ветеринарска школа са домом ученика
       'Свилајнац'" — прва половина без друге није име него скраћеница, а
       управо по дому се ова школа и разликује.

       Трећи ред (`.logo-sistem`, име програма) остаје сакривен: њега крије
       правило са ВЕЋОМ тежином (`.logo-tekst > span.logo-sistem`), па ово
       овде не дира. На телефону је важније име школе него име програма. */
    .logo-tekst > span {
        display: block;
        font-size: 12px; line-height: 1.25;
        white-space: normal; overflow-wrap: anywhere;
    }

    /* Десни блок пада у СВОЈ ред и држи се леве ивице — тако аватар не
       належе на десну ивицу екрана, што је било видљиво на 375 px. */
    .zaglavlje-desno { margin-left: 0; width: 100%; gap: 10px; justify-content: flex-start; }
    .godina-forma select { padding: 4px 24px 4px 9px; }

    /* Улога и име остају, само мањи — човек мора да види КО ЈЕ пријављен,
       иначе не зна чији термин уписује. Правило на 620 px их је сакривало. */
    .zaglavlje-desno .korisnik-tekst { display: flex; }
    .korisnik-uloga { font-size: 10px; }
    .korisnik-ime   { font-size: 13px; }
    .korisnik-meni > summary .avatar { --av-px: 34px; }
    .meni-panel { right: 0; left: auto; min-width: 210px; }

    /* ── САДРЖАЈ ──────────────────────────────────────────────────────
       Уже маргине: на 375 px свака страна маргине од 22 px поједе 12 %
       ширине, а то је баш оно што табели фали. */
    /* `margin: … auto` ГАСИ `stretch` у flex-у: аутоматске бочне маргине
       ставци враћају ширину по садржају. Зато је `.sadrzaj` био 1023 px у
       оквиру од 375 — и вукао наслов, траку и заглавље преко ивице екрана.
       Мерено 07.09.2026: тек кад су и `align-items: stretch` и ово оба на
       месту, страна стане у 375. Једно без другог не помаже. */
    .sadrzaj { margin: 14px 0; width: 100%; max-width: 100%; padding: 0 12px; }
    .panel { padding: 14px 12px; margin: 12px 0; border-radius: 8px; }
    h1 { font-size: 1.25rem; line-height: 1.25; }
    h2 { font-size: 1.05rem; margin: 16px 0 8px; }

    /* ── ТАБЕЛА ───────────────────────────────────────────────────────
       Табела на телефону КЛИЗИ водоравно уместо да се ломи. `display:
       block` прави оквир за померање на самој табели, па наслов панела и
       текст изнад ње остају мирни — за разлику од померања целог панела.

       `nowrap` је овде обавезан пар: без њега прегледач и даље стиска
       колоне и лома речи по слово, само сада унутар клизача. */
    .tabela {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
        white-space: nowrap; margin: 10px 0; font-size: 0.86rem;
    }
    .tabela th, .tabela td { padding: 7px 8px; }

    /* ── ПРВА КОЛОНА СЕ ЛЕПИ, АЛИ НЕ СМЕ ДА ПОЈЕДЕ ЕКРАН ──────────────
       Ненад, 08.09.2026: „на страни термини пријема виде се лепо имена и
       презимена, а овај део даље је веома узак."

       Мерено на 375 px: колона „Наставник" је била 223 px од 304 видљива —
       73 %, па је за свих пет осталих колона остајало осамдесет пиксела.
       Разлог је `white-space: nowrap` изнад: он даје свакој колони ПУНУ
       ширину најдужег имена („Видeновић Радовановић Биљана").

       Овде се то гаси само за прву колону: име се прелама у два реда, што
       кошта висину коју телефон има напретек, а враћа ширину које нема. */
    .tabela tbody td:first-child, .tabela thead th:first-child {
        position: sticky; left: 0; z-index: 1;
        background: var(--kartica);
        white-space: normal; overflow-wrap: break-word;
        max-width: 38vw; min-width: 5.5rem;
        /* Сенка уз десну ивицу залепљене колоне — без ње се при померању не
           види да текст ПРОЛАЗИ испод ње него делује као да се сече. */
        box-shadow: 3px 0 4px -2px rgba(0, 0, 0, .18);
    }

    /* ── ТАБЕЛА СА СПОЈЕНИМ РЕДОВИМА НЕ СМЕ ДА ЛЕПИ „ПРВУ" ЋЕЛИЈУ ─────
       Ненад, 08.09.2026: „ова бела поља прелазе при скроловању налево преко
       прве колоне… можда би требало да остане одељење и профил, а ово при
       скроловању да иде испод."

       Правило изнад претпоставља да СВАКИ ред има ћелију у првој колони. У
       табели са `rowspan` то не важи: ред „Вежбе" уопште нема ћелију разреда
       — она је спојена одозго. `td:first-child` тамо погађа ВРСТУ ЧАСОВА, па
       је правило лепило погрешну ћелију, давало јој белу подлогу и она је
       клизила ПРЕКО разреда.

       Три такве табеле има у целом систему (`ko-predaje`, `blok-matrica`,
       `obrazac-tabela`) и све три овде искључују опште правило. Ко сутра
       направи четврту са `rowspan`, дописује је у овај списак. */
    .tabela.ko-predaje tbody td:first-child,
    .tabela.blok-matrica tbody td:first-child,
    .tabela.obrazac-tabela tbody td:first-child {
        position: static; box-shadow: none; max-width: none;
    }

    /* ── КО ШТА ПРЕДАЈЕ: ЛЕПИ СЕ ОДЕЉЕЊЕ, НЕ РАЗРЕД ──────────────────
       Разред се на телефону склања јер исти податак већ стоји у ознаци
       одељења: „IV-5" каже и разред и одељење. Колона се уклања цела — и
       заглавље и ћелија која носи `rowspan` — па мрежа остаје исправна;
       редови без те ћелије се ионако не мењају.

       Лепи се ћелија КОЈА НОСИ СПАЈАЊЕ. Тако одељење са профилом стоји док
       се клизи, а врсте часова пролазе ИСПОД ње — тачно оно што је тражено. */
    .tabela.ko-predaje thead th:first-child,
    .tabela.ko-predaje tbody td[rowspan]:first-child { display: none; }
    .tabela.ko-predaje tbody td[rowspan]:nth-child(2) {
        position: sticky; left: 0; z-index: 2;
        background: var(--kartica);
        white-space: normal; overflow-wrap: break-word;
        max-width: 40vw; min-width: 6rem;
        box-shadow: 3px 0 4px -2px rgba(0, 0, 0, .18);
    }
    .tabela thead th:first-child { background: var(--zaglavlje-tabele, #eef4ef); }

    /* ── ЗНАК ДА ТАБЕЛА КЛИЗИ ─────────────────────────────────────────
       Без овога човек не зна да десно има још — види уску колону и мисли да
       је податак изгубљен. Две сенке на ивицама, чисто CSS-ом:
       `background-attachment: local` помера прекриваче СА садржајем, а
       `scroll` држи сенке на месту. Кад се дође до краја, прекривач стигне
       преко сенке и она нестане — тако сенка стоји тачно док има још. */
    .tabela {
        background-image:
            linear-gradient(to right, var(--kartica), rgba(255, 255, 255, 0)),
            linear-gradient(to left,  var(--kartica), rgba(255, 255, 255, 0)),
            linear-gradient(to right, rgba(0, 0, 0, .13), rgba(0, 0, 0, 0)),
            linear-gradient(to left,  rgba(0, 0, 0, .13), rgba(0, 0, 0, 0));
        background-position: 0 0, 100% 0, 0 0, 100% 0;
        background-repeat: no-repeat;
        background-size: 22px 100%, 22px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
    /* Ћелија са дугим текстом (напомена) сме да се ломи, али по РЕЧИМА. */
    .tabela td.tekst, .tabela td.napomena { white-space: normal; min-width: 12rem; }
    /* Омотач и клизач на самој табели не смеју да се удвоје. */
    .omot-tab { overflow: visible; }

    /* ── ТРАКА РАДЊИ И ДУГМАД ─────────────────────────────────────────
       Прст тражи 44 px висине — испод тога се промашује. */
    .traka-radnji { flex-wrap: wrap; gap: 8px; }
    .dugme { min-height: 40px; padding: 9px 14px; }
    .dugme.malo { min-height: 36px; }

    /* ── ОБРАСЦИ ──────────────────────────────────────────────────────
       Поља у СВОЈ ред, пуна ширина. Инлајн ширине у px (14rem, 20rem) су
       на 375 px шире од екрана, зато их овде гази `width: 100%`. */
    .forma-inline, .filter-red { flex-direction: column; align-items: stretch; }
    form p label { display: block; margin-bottom: 8px; }
    form p label input[type="text"], form p label input[type="date"],
    form p label input[type="number"], form p label select, form p label textarea {
        width: 100% !important; max-width: 100%; min-height: 40px;
    }
    .moj-termin-radnje { flex-wrap: wrap; }

    /* ── НИШТА ШИРЕ ОД СВОГ РЕДА ──────────────────────────────────────
       `min-width: auto` је подразумевана вредност за flex и grid ставку и
       значи „не смем да се сузим испод свог min-content". Дугачак назив већа
       или предмета тако разазида ред иако родитељ већ има `flex-wrap: wrap` —
       редом није било где да се прелије. Мерено 07.09.2026: осам страна је
       имало елементе до 1047 px, а `overflow-x: clip` их је само СЕКАО, што
       је баш оно што не сме да остане. */
    .forma-inline > *, .traka-radnje > *, .traka-radnji > *, .traka-filtera > *,
    .filter-red > *, .md-naslov > *, .red-radnji > *, .seg > *,
    .a21-zaglavlje > *, .a21-podnozje > *, .blok-raspored > *,
    .covek-glava > *, .stubovi-polja > * { min-width: 0; }

    .a21-zaglavlje, .a21-podnozje, .md-naslov, .covek-glava,
    .red-radnji, .seg, .stubovi-polja { flex-wrap: wrap; }
    .prekidac { flex-wrap: wrap; }

    /* ── ПОЉА ЗА УНОС ─────────────────────────────────────────────────
       Свако поље у своју ширину екрана. Инлајн ширине (`width: 14em`,
       `width: 88px`) остају тамо где су уске, али ништа не сме преко 100 %.
       Трака `forma-inline` пребацује натписе један испод другог — на 375 px
       три поља у реду нису ред него низ одсечака. */
    .forma-inline { width: 100%; }
    .forma-inline > label, .forma-inline > .pretraga-kutija,
    .forma-inline > select, .forma-inline > input { flex: 1 1 100%; max-width: 100%; }
    .sadrzaj input[type="text"], .sadrzaj input[type="search"],
    .sadrzaj input[type="date"], .sadrzaj input[type="email"],
    .sadrzaj select, .sadrzaj textarea { max-width: 100%; }
    .forma-inline label select, .forma-inline label input,
    .forma-inline label textarea { width: 100%; max-width: 100%; }
    .pretraga-kutija, .pretraga-kutija input { max-width: 100%; }

    /* Инлајн `min-width` на пољу (нпр. `style="min-width:320px"` на списку
       наставника) јача је од сваког правила из фајла, па се овде мора гасити
       изричито. `!important` је овде на месту: не бори се са другим правилом
       него са атрибутом, а важи само испод 640 px. */
    .sadrzaj select, .sadrzaj input, .sadrzaj textarea { min-width: 0 !important; }

    /* Натпис КОЈИ НОСИ ПОЉЕ не сме да се скупи испод тог поља — `min-width: 0`
       изнад важи за контејнере, не за њега. Без овога је натпис са уским
       пољем („Ангажовање %") падао на 13 px, а поље од 88 px му излазило.
       `min-content`, НЕ `max-content`: мерено 08.09.2026, са `max-content`
       натпис узима ширину целе реченице и бекства се врате на четири стране.
       `min-content` даје тачно оно што унутра мора да стане. */
    .traka-radnje > label, .traka-radnji > label { min-width: min-content; }
    .blok-raspored { grid-template-columns: 1fr; }

    /* Дугме СМЕ да се преломи. Са `nowrap` је дугме са називом стручног већа
       било 707 px — шире него цео екран, и просто је нестајало десно. */
    .dugme { white-space: normal; max-width: 100%; text-align: center; }

    /* Дугачка реч (назив, корисничко име, шифра) прелама се где мора, уместо
       да гурне цео ред. */
    h1, h2, h3, .oznaka, .prigusen, .list-fus { overflow-wrap: anywhere; }
    code, pre, samp { max-width: 100%; overflow-x: auto; display: block;
                      white-space: pre-wrap; overflow-wrap: anywhere; }

    /* ── СПИСАК И ДЕТАЉ ЈЕДАН ИСПОД ДРУГОГ ────────────────────────────
       Четири стране Норме користе распоред „списак лево, детаљ десно"
       (`.md`). Списак је `position: absolute` широк 268 px, а детаљ носи
       `margin-left: 284px` — на екрану од 375 px детаљу остаје 58, па је
       табела у њему била широка ДВАДЕСЕТ ЧЕТИРИ пиксела. Мерено 08.09.2026;
       у списку „најгорих" то су била три прва места, и то далеко испред
       осталих.

       На телефону нема два стубца: списак иде горе са својом висином, детаљ
       испод, пуном ширином. Исто што `@media print` већ ради из истог
       разлога — тамо стране нема, овде екрана. */
    .md { min-height: 0; }
    .md-lista {
        position: static; width: auto; max-height: 46vh; margin-bottom: 12px;
    }
    .md-detalj {
        margin-left: 0; min-height: 0; padding: 12px 10px;
    }

    /* ── ЗНАЧКЕ ОДЕЉЕЊА: ЧИПОВИ, НЕ МРЕЖА ────────────────────────────
       Ненад, 08.09.2026: „приказ на мобилном ових одељења није како треба."

       Разлог, мерен: `.filter-razred` је мрежа `26px + 9 × 1fr`. На 375 px
       остаје око 274 px за девет колона — тридесет пиксела по значки, а
       „I-1" тражи четрдесет. `text-overflow: ellipsis` је онда одсекао све
       у „I…", па се тридесет одељења није могло разликовати.

       Поравнање колона међу разредима вреди на широком екрану: I-1 стоји
       тачно изнад II-1. На телефону тог поравнања нема шта да користи, а
       кошта читљивост — па се напушта, како то ради свака трака филтера
       (chip / filter pill): значка ЗАДРЖАВА своју ширину и ред се ПРЕЛАМА,
       уместо да се садржај стиска.

       Отуд три ствари заједно, ниједна сама не решава:
         `flex-wrap: wrap`   ред се прелама уместо да гура
         `flex: 0 0 auto`    значка се не скупља испод свог текста
         `overflow: visible` елипса више нема шта да сече

       Празна места (`odelj-prazno`) држе поравнање колона — кад колона нема,
       она су само рупе, па се склањају. */
    .filter-odeljenja { flex-direction: column; gap: 4px; }
    .filter-naslov { padding-top: 0; }
    .filter-razredi { display: flex; flex-direction: column; gap: 8px; }
    .filter-razred {
        display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
        grid-template-columns: none;
    }
    .razred-oznaka {
        width: 100%; text-align: left; padding: 0 0 1px;
        font-size: var(--f-oznaka); letter-spacing: .04em;
    }
    .odelj-dugme {
        flex: 0 0 auto; min-width: 2.9rem; padding: 6px 9px;
        overflow: visible; text-overflow: clip;
    }
    .odelj-prazno { display: none; }
    /* Ознака разреда као веза је на телефону цео ред (лако се погађа прстом),
       али не сме да буде тамнозелена трака преко екрана — изабрано је нежно
       зелено са зеленим словима, неизабрано светла подлога. Мерено 11.09.2026. */
    a.razred-veza { padding: 4px 8px; border-radius: 6px; background: #f0f4f1; }
    a.razred-veza.izabran { background: var(--sek-strucni); color: var(--primarna); }
    /* Стање по одељењима: пет колона стану на 375 px кад бројеви нису 1,25rem. */
    .tabela.stanje-odeljenja td { font-size: 0.92rem; }
    /* Поднапомене заглавља (јединица, формула) на телефону гурају пету колону
       преко ивице за 37 px (мерено); бројеви говоре сами. */
    .tabela.stanje-odeljenja th .tanko { display: none; }
    /* И даље 28 px преко (363 : 335): ужа ћелијска маргина и мало мања слова
       за ову једну табелу — пет колона мора да стане без клизања. */
    .tabela.stanje-odeljenja th, .tabela.stanje-odeljenja td { padding-left: 6px; padding-right: 6px; }
    .tabela.stanje-odeljenja th { font-size: var(--f-oznaka); }

    /* ── ЛЕВА ТРАКА ───────────────────────────────────────────────────
       Иконице без натписа су на телефону погађање. Натпис уз иконицу
       стаје ако трака клизи, а она већ клизи од 900 px. */
    .rail-ikonica { padding: 6px 8px; }

    /* ── КАЛЕНДАР ─────────────────────────────────────────────────────
       Дванаест месеци у једном ступцу; свака мрежа стане цела. */
    .kal-godina { grid-template-columns: 1fr; }
    .kal td, .kal th { font-size: 0.8rem; padding: 4px 0; }
    .kal-legenda-blok { gap: 6px 12px; }
}

/* Веома узак екран (старији телефони, 360 px и мање) — само још мало ваздуха
   мање, ништа се не сакрива. */
@media (max-width: 380px) {
    .logo-tekst strong { font-size: 14px; }
    /* Задатак на телефону: панел и ред добијају мање бочног ваздуха, да
       значка стане уз назив. Измерено на 375 px: назив 236 + значка 60 = 296,
       а реду је остајало 296 — фалила су свега четири пиксела и значка је
       падала у свој ред. */
    .zadaci-panel { padding: 12px 10px; }
    .zadatak { padding: 9px 9px; }
    .zadatak-glava { gap: 4px 6px; }
    .zadatak-naziv { font-size: var(--f-osnovni); }
    /* Имена оних који нису урадили — једно испод другог, да се презиме
       не ломи на пола. */
    .spisak-imena { grid-template-columns: 1fr; }

    /* Подсетник уз дугмад — свој ред. На 375 px се обмотавао око „Сачувај
       измену" и „Одустани", почињао десно од другог дугмета и преламао се
       испод; читало се као натпис дугмета, а не као напомена уз образац. */
    .uz-dugmad { display: block; width: 100%; margin-top: 8px; }
    .logo-grb { width: 38px; height: 38px; }
    .sadrzaj { padding: 0 9px; }
    .panel { padding: 12px 10px; }
    .tabela { font-size: 0.82rem; }
    /* ── МОЈЕ ОДЕЉЕЊЕ, 13.09.2026 ──────────────────────────────────────
       Значке-прекидачи колона и филтера су биле 19 px високе, а прст-мета
       тражи бар 22 — само на овој страни, јер је `.oznaka` свуда. */
    .izbor-kolona .oznaka, .filter-mesto .oznaka { padding: 4px 10px; margin: 2px 2px; }
    .izbor-kolona-sve a { display: inline-block; padding: 4px 3px; }
    /* Табела стања има осам колона и клизи у себи; прва (ознака + назив
       профила) је залепљена. Са општих 38vw назив „Прехрамбено-биотехнолошки
       техничар" је падао у пет редова (ред 122 px, мерено 13.09.2026) — на
       46vw стане у два. */
    .tabela.stanje-odeljenja tbody td:first-child { min-width: 46vw; max-width: 46vw; }
}