﻿/* ====================================================================================
   NIT Software Solutions © 2026 — Sva prava zadržana.
   Projekat:  NITErp
   Fajl:      NITErp.Client/wwwroot/css/erp-ljuska.css
   Modul:     UI / Ljuska
   Opis:      Raspored ljuske (sidebar + rail + zaglavlje) po mockupu v2. Ovde je
              preseljen i ceo <style> blok iz MainLayout.razor (~160 linija sa
              hardkodovanim bojama) — sve boje su sada tokeni iz erp-tema.css.
              Rail režim vozi atribut data-erp-rail="1" na <html> (localStorage ključ
              erpRail, primenjuje ga head skripta u App.razor pre prvog iscrtavanja).
   Nastalo:   20.08.2026, faza 2 UI standarda.
   ==================================================================================== */

/* ------------------------------------------------------------------------------------
   ŠKOLJKA
   ------------------------------------------------------------------------------------ */
.erp-shell {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.erp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ------------------------------------------------------------------------------------
   SIDEBAR — 248px, rail 56px. Boje isključivo iz --sidebar-* tokena: tema odlučuje
   da li je svetao (indigo) ili taman (okean, smaragd).
   ------------------------------------------------------------------------------------ */
.erp-sidebar {
    width: 248px;
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
    transition: width .18s ease;
    overflow: hidden;
}

/* ⚠️ Ceo rail blok važi SAMO na desktopu (21.08.2026, prijava sa testiranja):
   atribut data-erp-rail stoji na <html> i na telefonu, pa je fioka preko sadržaja
   bila široka 248px a pokazivala samo ikonice — width je mobilni blok već gazio,
   ali skrivanje natpisa nije. Na telefonu je fioka UVEK puna. */
@media (min-width: 768px) {

html[data-erp-rail="1"] .erp-sidebar {
    width: 56px;
}

/* Natpisi koji u rail režimu nestaju — ostaju samo ikonice sa title tooltipom. */
html[data-erp-rail="1"] .erp-sidebar .sb-tekst,
html[data-erp-rail="1"] .erp-sidebar .sb-pretraga,
html[data-erp-rail="1"] .erp-sidebar .sb-sekcija,
html[data-erp-rail="1"] .erp-sidebar .erp-nav-natpis,
html[data-erp-rail="1"] .erp-sidebar .erp-zvezda,
html[data-erp-rail="1"] .erp-sidebar .erp-nav-strelica {
    display: none;
}

html[data-erp-rail="1"] .erp-sidebar .nav-link {
    justify-content: center;
}

html[data-erp-rail="1"] .erp-sidebar .nav-link i.bi {
    margin-right: 0 !important;
}

/* Uvučeni podnivoi u rail režimu gube uvlaku — ikonice ostaju u koloni. */
html[data-erp-rail="1"] .erp-sidebar .erp-nav-deca {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
}

html[data-erp-rail="1"] .erp-sidebar .sb-kolaps i {
    transform: rotate(180deg);
}

html[data-erp-rail="1"] .erp-sidebar .sb-grupa {
    justify-content: center;
    padding: 8px 0;
}

html[data-erp-rail="1"] .erp-sidebar .sb-grupa-sadrzaj {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

html[data-erp-rail="1"] .erp-sidebar .sb-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

} /* kraj @media (min-width: 768px) — rail samo na desktopu */

/* --- brend --- */
.sb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
}

    .sb-brand .kocka {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 9px;
        background: var(--primary);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 14px;
    }

/* --- grupa modula (odluka od 20.08.2026: jedno stablo svih modula) --- */
.sb-grupa {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    margin-top: 2px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

    .sb-grupa:hover {
        background: var(--sidebar-hover);
    }

    .sb-grupa i {
        min-width: 18px;
        text-align: center;
        color: var(--sidebar-muted);
        font-size: 14.5px;
    }

.sb-grupa-sadrzaj {
    margin: 2px 0 6px 10px;
    padding-left: 5px;
    border-left: 1px solid var(--sidebar-border);
}

/* --- pretraga menija --- */
.sb-pretraga {
    padding: 6px 10px 8px;
}

    /* Syncfusion textbox u boji sidebara — do 20.08.2026 hardkodovano (#212529/#495057),
       pa je na svetlom sidebaru (indigo) polje ostajalo crno. */
    .sb-pretraga .custom-sidebar-search.e-input-group {
        background: var(--sidebar-hover) !important;
        border-color: var(--sidebar-border) !important;
    }

    .sb-pretraga .custom-sidebar-search .e-input {
        color: var(--sidebar-text) !important;
    }

        .sb-pretraga .custom-sidebar-search .e-input::placeholder {
            color: var(--sidebar-muted) !important;
        }

    .sb-pretraga .custom-sidebar-search .e-clear-icon {
        color: var(--sidebar-muted) !important;
    }

/* --- navigacija --- */
.erp-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 10px 10px;
}

.sb-sekcija {
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--sidebar-muted);
    font-weight: 700;
    margin: 12px 6px 4px;
    white-space: nowrap;
}

.erp-menu-item {
    transition: background .15s ease;
    margin: 0 0 1px;
    border-radius: 8px;
}

    .erp-menu-item:hover {
        background: var(--sidebar-hover);
    }

.erp-sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 9px !important;
    color: var(--sidebar-text) !important;
    border-radius: 8px;
    white-space: nowrap;
}

    .erp-sidebar-nav .nav-link i.bi {
        min-width: 18px;
        width: 18px;
        text-align: center;
        font-size: 14.5px;
        margin-right: 10px !important;
        color: var(--sidebar-muted) !important;
    }

/* Folderi — malo istaknutiji natpis, ista boja. */
.erp-sidebar-nav .nav-link.fw-bold {
    letter-spacing: .3px;
}

/* Aktivna stavka: prozirna primary pozadina + marker levo — sve izvedeno iz tokena. */
.erp-sidebar-nav .nav-link.active {
    background: var(--sidebar-active) !important;
    color: var(--sidebar-active-text) !important;
    border-left: 3px solid var(--primary) !important;
    border-radius: 0 8px 8px 0 !important;
    font-weight: 600;
}

    .erp-sidebar-nav .nav-link.active i.bi {
        color: var(--sidebar-active-text) !important;
    }

/* Podnivoi — tanka vođica i sitniji font. */
.erp-nav-deca {
    border-left: 1px solid var(--sidebar-border) !important;
    margin-left: 1.1rem !important;
    padding-left: .35rem !important;
}

    .erp-nav-deca .nav-link {
        font-size: 12.5px;
    }

    .erp-nav-deca .erp-nav-deca .nav-link {
        font-size: 12px;
        color: var(--sidebar-muted) !important;
    }

/* Strelica foldera. */
.erp-nav-strelica {
    transition: transform .2s ease-in-out;
    font-size: .8rem;
    color: var(--sidebar-muted);
}

/* Zvezdice (omiljeni) — skrivene dok se ne pređe mišem preko stavke. */
.erp-zvezda {
    color: var(--warn);
    cursor: pointer;
}

.erp-star-hover {
    opacity: 0;
    transition: opacity .2s ease;
}

.erp-menu-item:hover .erp-star-hover {
    opacity: .5;
}

    .erp-menu-item:hover .erp-star-hover:hover {
        opacity: 1;
    }

/* --- dno: skupljanje u rail --- */
.sb-dno {
    border-top: 1px solid var(--sidebar-border);
    padding: 9px 10px;
}

.sb-kolaps {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 9px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--sidebar-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

    .sb-kolaps:hover {
        background: var(--sidebar-hover);
    }

/* ------------------------------------------------------------------------------------
   MOBILNI (<768px): sidebar postaje fioka preko sadržaja, sa zavesom.
   ------------------------------------------------------------------------------------ */
.erp-sidebar-zavesa {
    display: none;
}

@media (max-width: 767.98px) {
    .erp-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform .2s ease;
        width: 248px !important; /* rail nema smisla na telefonu */
    }

        .erp-sidebar.otvoren {
            transform: translateX(0);
        }

    .erp-sidebar-zavesa.on {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 13, 20, .4);
        z-index: 1040;
    }
}

/* ------------------------------------------------------------------------------------
   ZAGLAVLJE
   ------------------------------------------------------------------------------------ */
.erp-topbar {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
}

/* Pretraga u sredini — živa pretraga menija (Ctrl+K fokusira nju). */
.erp-trazilica {
    position: relative;
    flex: 1;
    max-width: 520px;
    margin: 0 auto;
}

    .erp-trazilica input {
        width: 100%;
        height: var(--ctrl-h);
        padding: 0 60px 0 32px;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface-2);
        color: var(--text);
        font: inherit;
        font-size: 12.5px;
        outline: none;
        cursor: pointer; /* okidač palete — ne kuca se ovde nego u paleti */
    }

        .erp-trazilica input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
        }

    .erp-trazilica i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        font-size: 13px;
    }

    .erp-trazilica kbd {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        color: var(--muted);
        border: 1px solid var(--border);
        border-radius: 5px;
        padding: 1px 5px;
        background: var(--surface);
    }

/* Čip — firma, godina. */
.erp-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    height: var(--ctrl-h);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text);
}

    .erp-chip i {
        color: var(--muted);
    }

    .erp-chip.erp-chip-firma {
        max-width: 340px;
    }

        .erp-chip.erp-chip-firma .erp-chip-tekst {
            overflow: hidden;
            text-overflow: ellipsis;
        }

/* Prazan padajući spisak — naš natpis umesto Syncfusion-ovog „No records found" (07.09.2026). */
.erp-combo-prazno {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

/* Čip firme koji se KLIKĆE (maketa F2, 07.09.2026) — do tada je firma bila samo ispis. */
.erp-chip.erp-chip-klik {
    cursor: pointer;
    user-select: none;
}

    .erp-chip.erp-chip-klik:hover {
        border-color: var(--primary);
    }

    .erp-chip.erp-chip-klik:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 1px;
    }

    .erp-chip .erp-chip-strelica {
        font-size: 10px;
    }

/* Zastor: klik pored zatvara panel. Providan je namerno — promena firme nije modalna radnja. */
.erp-firma-zastor {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

/* Panel sa biračem firme — ispod čipa, poravnat desno da ne izađe iz ekrana. */
.erp-firma-panel {
    /* ⚠️ `fixed`, ne `absolute`: čip stoji u `.erp-topbar` koji NIJE pozicioniran, pa bi se `absolute`
       računao od nekog dalekog pretka i panel bi odlutao. Vrh je visina trake (50px) + mali razmak. */
    position: fixed;
    top: 56px;
    right: 12px;
    z-index: 1050;
    width: 320px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    background: var(--surface);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, .18));
}

    .erp-firma-panel .erp-firma-naslov {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 6px;
    }

    .erp-firma-panel .erp-firma-nota {
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.35;
        color: var(--muted);
    }

/* Godina: Syncfusion lista u čipu — bez sopstvene ivice (klase e-custom-combo). */
.erp-chip .e-custom-combo {
    width: 64px;
}

/* Avatar sa inicijalima. */
.erp-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-soft-text);
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 700;
}

/* Hamburger. */
.erp-burger {
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text);
}

/* ------------------------------------------------------------------------------------
   PRESELJENO IZ MainLayout <style> BLOKA (20.08.2026) — tokenizovano.
   ------------------------------------------------------------------------------------ */

/* Kartice modula u dijalogu izbora podsistema. */
.erp-module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    transition: .3s;
}

.erp-module-card.border-primary {
    border-width: 2px;
}

/* Syncfusion combo u zaglavlju — bez ivica, boja teksta iz teme (bio #495057). */
.e-custom-combo .e-input-group,
.e-custom-combo .e-input-group.e-control-wrapper {
    border: none !important;
    background: transparent !important;
    padding-bottom: 0 !important;
}

.e-custom-combo .e-input-group::before,
.e-custom-combo .e-input-group::after {
    display: none !important;
}

.e-custom-combo .e-input {
    font-weight: 500 !important;
    color: var(--text) !important;
}

/* ------------------------------------------------------------------------------------
   DINAMIČKA FORMA (ErpDynamicForm) — ujednačeno pakovanje polja: isti vertikalni
   ritam redova i iste labele na svim formama, umesto da svaka „diše" drugačije.
   ------------------------------------------------------------------------------------ */
.erp-forma .erp-forma-red {
    row-gap: 4px;
    margin-bottom: 12px;
    align-items: end; /* polja različitih visina (checkbox pored teksta) stoje na istoj liniji */
}

    .erp-forma .erp-forma-red:last-child {
        margin-bottom: 0;
    }

.erp-forma .form-label,
.erp-forma label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 2px;
}

/* ------------------------------------------------------------------------------------
   OBJEKAT-STRANICA (kontrola pristupa, kasnije i dokumenta — faza 5): zaglavlje sa
   avatarom, tabovi i kartice sadržaja. Klase erp-objekat-* su OPŠTE, ne samo za
   korisnika — object page standard §6 koristi isti skelet.
   ------------------------------------------------------------------------------------ */
.erp-objekat-zaglavlje {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.erp-avatar-veliki {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 15px;
}

.erp-objekat-naslovi b {
    display: block;
    font-size: 16px;
}

.erp-objekat-naslovi small {
    color: var(--muted);
    font-size: 12px;
}

.erp-objekat-tabovi {
    display: flex;
    gap: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

    .erp-objekat-tabovi button {
        border: 0;
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        padding: 0 2px 7px;
        cursor: pointer;
    }

        .erp-objekat-tabovi button.on {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            margin-bottom: -1px;
        }

        .erp-objekat-tabovi button:disabled {
            opacity: .45;
            cursor: default;
        }

.erp-objekat-kartice {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
    align-items: start;
}

/* Kartica pristupa jednoj firmi. */
.erp-pristup-kartica {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}

.erp-pristup-vrh {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    font-size: 13px;
}

    .erp-pristup-vrh > i {
        color: var(--primary);
    }

.erp-pristup-red {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    padding: 3px 0;
}

.erp-pristup-x {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--muted);
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

    .erp-pristup-x:hover {
        color: var(--err);
        background: var(--err-soft);
    }

/* Isprekidana kartica-poziv za dodelu u novoj firmi. */
.erp-pristup-nova {
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 74px;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

    .erp-pristup-nova:hover {
        color: var(--primary);
        border-color: var(--primary);
    }

/* Mali čip za podatke unutar kartica (modul, OJ, sektor). */
.erp-mini-cip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 11.5px;
    color: var(--text);
    white-space: nowrap;
}

    .erp-mini-cip i {
        color: var(--muted);
        font-size: 11px;
    }

/* ------------------------------------------------------------------------------------
   VOĐENI TOK U KORACIMA (slajder „Dodeli pristup") — indikator 1—2—3 sa naslovima,
   napomena o dometu i pregled pred potvrdu. Korak koji je prošao ili je aktivan
   dobija akcenat; crta između korака ostaje neutralna da ne liči na progress bar.
   ------------------------------------------------------------------------------------ */
.erp-koraci {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.erp-korak {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
}

    .erp-korak span {
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1px solid var(--border);
        font-size: 11.5px;
        font-weight: 600;
    }

    .erp-korak.on {
        color: var(--text);
        font-weight: 600;
    }

        .erp-korak.on span {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }

.erp-korak-crta {
    flex: 1 1 16px;
    min-width: 16px;
    height: 1px;
    background: var(--border);
}

/* Rečenica-napomena ispod polja (domet, broj kombinacija). */
.erp-korak-napomena {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2, var(--bs-tertiary-bg));
    font-size: 12.5px;
    color: var(--text);
}

    .erp-korak-napomena i {
        color: var(--primary);
    }

/* Pregled pred potvrdu — redovi labela/vrednost, kao dok-panel ali u slajderu. */
.erp-pregled-dodele {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px 14px;
}

    .erp-pregled-dodele .dok-red {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 0;
        border-bottom: 1px dashed var(--border);
        font-size: 13px;
    }

        .erp-pregled-dodele .dok-red:last-child {
            border-bottom: 0;
        }

    .erp-pregled-dodele .dok-labela {
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
    }

/* ------------------------------------------------------------------------------------
   SANDUČE SPREMNOSTI (RF-1, Radni centar) — dokumenta koja ne mogu na portal.
   Crta se SAMO kad ih ima; razlozi su klik-dugmad ka spisku.
   ------------------------------------------------------------------------------------ */
.erp-rc-sanduce {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    border: 1px solid var(--warn);
    border-radius: 12px;
    background: var(--warn-soft);
    padding: 12px 16px;
    margin-bottom: 16px;
}

    .erp-rc-sanduce .broj {
        display: flex;
        flex-direction: column;
    }

        .erp-rc-sanduce .broj b {
            font-size: 24px;
            line-height: 1.1;
            color: var(--warn);
        }

        .erp-rc-sanduce .broj span {
            font-size: 12px;
            color: var(--muted);
        }

    .erp-rc-sanduce .razlozi {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        flex: 1;
    }

        .erp-rc-sanduce .razlozi button {
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--surface);
            color: var(--text);
            font: inherit;
            font-size: 12.5px;
            padding: 4px 12px;
            cursor: pointer;
        }

            .erp-rc-sanduce .razlozi button:hover {
                border-color: var(--warn);
            }

            .erp-rc-sanduce .razlozi .koliko {
                font-weight: 700;
                color: var(--warn);
                margin-right: 4px;
            }

/* ------------------------------------------------------------------------------------
   POZADINSKI POSLOVI (RF-4, /sistem/radnici) — red po poslu: levo šta je i kako je
   prošao, desno šta sme da se menja. „Preostalo" je jedini broj koji raste kad
   nešto ne valja — zato jedini ima upozoravajuću boju.
   ------------------------------------------------------------------------------------ */
.erp-radnik {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 12px 14px;
    margin-bottom: 10px;
}

    .erp-radnik.mrtav {
        opacity: .65;
        grid-template-columns: minmax(0, 1fr);
    }

    .erp-radnik .naslov {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 14px;
    }

    .erp-radnik .opis {
        font-size: 12.5px;
        color: var(--muted);
        margin: 4px 0 8px;
    }

    .erp-radnik .stanje {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        font-size: 12.5px;
        color: var(--muted);
    }

        .erp-radnik .stanje b {
            color: var(--text);
        }

        .erp-radnik .stanje .preostalo.ima {
            color: var(--err);
            font-weight: 600;
        }

            .erp-radnik .stanje .preostalo.ima b {
                color: var(--err);
            }

    .erp-radnik .greska {
        margin-top: 8px;
        font-family: monospace;
        font-size: 11.5px;
        color: var(--err);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.erp-radnik-podesavanja {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 1px dashed var(--border);
    padding-left: 16px;
    font-size: 12.5px;
}

    .erp-radnik-podesavanja label {
        display: flex;
        flex-direction: column;
        gap: 3px;
        color: var(--muted);
    }

    .erp-radnik-podesavanja .prekidac {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        color: var(--text);
        cursor: pointer;
    }

    .erp-radnik-podesavanja input[type="number"],
    .erp-radnik-podesavanja input[type="text"],
    .erp-radnik-podesavanja select {
        height: 28px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: 12.5px;
        padding: 0 8px;
    }

    .erp-radnik-podesavanja small {
        color: var(--muted);
        font-size: 11px;
        margin-top: -4px;
    }

    .erp-radnik-podesavanja .erp-akcija {
        align-self: flex-end;
    }

@media (max-width: 991px) {
    .erp-radnik {
        grid-template-columns: minmax(0, 1fr);
    }

    .erp-radnik-podesavanja {
        border-left: 0;
        padding-left: 0;
        border-top: 1px dashed var(--border);
        padding-top: 10px;
    }
}

/* ------------------------------------------------------------------------------------
   ODBIJENO SLANJE (RF-2, SeoDokumentDetalji) — trajni panel, ne toast: poruka sa
   servera nabraja SVE prepreke, prečice vode gde se koja popravlja.
   ------------------------------------------------------------------------------------ */
.erp-slanje-greska {
    border: 1px solid var(--err);
    border-radius: 10px;
    background: var(--err-soft);
    padding: 12px 14px;
    margin: 8px 0 14px;
}

    .erp-slanje-greska .vrh {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--err);
        font-size: 14px;
    }

        .erp-slanje-greska .vrh .erp-pristup-x {
            margin-left: auto;
        }

    .erp-slanje-greska p {
        margin: 8px 0;
        font-size: 13.5px;
        color: var(--text);
    }

    .erp-slanje-greska .precice {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 12.5px;
        color: var(--muted);
    }

/* ------------------------------------------------------------------------------------
   KARTON PRISTUPA (/core/admin/korisnici/{id}/karton) — štampani pregled. Na ekranu je
   kartica; pri štampi @media print skloni ljusku i ostavi samo karton.
   ------------------------------------------------------------------------------------ */
.erp-karton {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 20px 24px;
    max-width: 960px;
}

.erp-karton-vrh {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 2px solid var(--border-strong);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

    .erp-karton-vrh h4 {
        margin: 0;
        font-size: 18px;
    }

    .erp-karton-vrh small {
        color: var(--muted);
        font-size: 12px;
    }

.erp-karton-zbir {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    color: var(--muted);
    text-align: right;
}

/* Dijagramski vrh kartona: četiri kartice KO→GDE→ŠTA SME→ŠTA VIDI, boje po ulozi
   kartice (usvojeni crtež od 21.08.2026). */
.erp-karton-dijagram {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 8px;
}

@media (max-width: 991px) {
    .erp-karton-dijagram {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.erp-karton-kartica {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--muted);
}

    .erp-karton-kartica .naslov {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 8px;
    }

    .erp-karton-kartica .stavka {
        padding: 5px 0;
        border-top: 1px dashed var(--border);
        line-height: 1.5;
    }

        .erp-karton-kartica .stavka b {
            color: var(--text);
            font-size: 12.5px;
        }

        .erp-karton-kartica .stavka.podnaslov {
            font-weight: 600;
            color: var(--text);
        }

        .erp-karton-kartica .stavka.prazno {
            font-style: italic;
        }

    .erp-karton-kartica.lj {
        border-color: rgba(var(--primary-rgb), .55);
    }

        .erp-karton-kartica.lj .naslov {
            color: var(--primary);
        }

    .erp-karton-kartica.zel {
        border-color: var(--ok);
    }

        .erp-karton-kartica.zel .naslov {
            color: var(--ok);
        }

    .erp-karton-kartica.nar {
        border-color: var(--warn);
    }

        .erp-karton-kartica.nar .naslov {
            color: var(--warn);
        }

    .erp-karton-kartica.siv .naslov {
        color: var(--muted);
    }

.erp-karton-naslov {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 18px 0 8px;
}

.erp-karton-firma {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    margin: 10px 0 6px;
}

.erp-karton-uloga {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 14px 0 6px;
    font-size: 13.5px;
}

    .erp-karton-uloga small {
        color: var(--muted);
        font-size: 12px;
    }

.erp-karton-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    margin-bottom: 8px;
}

    .erp-karton-tabela th {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--muted);
        font-weight: 600;
        text-align: left;
        padding: 5px 8px;
        border-bottom: 1px solid var(--border-strong);
    }

    .erp-karton-tabela td {
        padding: 5px 8px;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
    }

    .erp-karton-tabela .c {
        text-align: center;
        width: 64px;
    }

.erp-karton-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.erp-karton-dno {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 11.5px;
    color: var(--muted);
}

/* Štampa: ostaje SAMO sadržaj — ljuska, tabovi i akcije se sklanjaju. */
@media print {
    .erp-sidebar,
    .erp-sidebar-zavesa,
    .erp-topbar,
    .erp-tabbar,
    .erp-bez-stampe {
        display: none !important;
    }

    /* Školjka drži sadržaj u skrol-kontejneru fiksne visine (100vh + overflow) —
       štampa tako vidi SAMO prvi ekran i nudi jednu stranu. Za štampu se visine
       otpuštaju i skrol gasi, pa se sadržaj prelama na onoliko strana koliko treba. */
    html, body {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .erp-shell {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .erp-main {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .erp-karton {
        border: 0;
        max-width: none;
        padding: 0;
    }

    /* Red tabele se ne seče na prelazu strane. */
    .erp-karton-tabela tr,
    .erp-karton-kartica {
        break-inside: avoid;
    }
}

/* ------------------------------------------------------------------------------------
   STRANICA GRUPE (/core/admin/grupe/{id}) — paket pristupa levo, članovi desno.
   ------------------------------------------------------------------------------------ */
.erp-grupa-kolone {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

@media (max-width: 991px) {
    .erp-grupa-kolone {
        grid-template-columns: minmax(0, 1fr);
    }
}

.erp-kolona-naslov {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    margin-bottom: 8px;
}

/* Red člana grupe — avatar, ime, X za uklanjanje. */
.erp-clan-red {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px dashed var(--border);
    font-size: 13px;
}

    .erp-clan-red:last-of-type {
        border-bottom: 0;
    }

    .erp-clan-red .naziv {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ------------------------------------------------------------------------------------
   MATRICA ULOGA (/core/admin/uloge) — uloge kao spisak levo, velika matrica desno,
   prekidač smera „Po ulozi / Po ekranu". Usvojen raspored „leva strana + centralna
   velika" sa mockupa od 21.08.2026.
   ------------------------------------------------------------------------------------ */
.erp-mx {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.erp-mx-levo {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 8px;
}

.erp-mx-levo-naslov {
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 10px 8px;
}

.erp-mx-uloga {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
}

    .erp-mx-uloga:hover {
        background: rgba(var(--primary-rgb), .08);
        color: var(--text);
    }

    .erp-mx-uloga.on {
        background: rgba(var(--primary-rgb), .14);
        color: var(--primary);
        font-weight: 600;
    }

    .erp-mx-uloga .naziv {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .erp-mx-uloga i {
        font-size: 12px;
        flex: none;
    }

/* Prekidač preko cele širine levog panela (Uloge / Ekrani). */
.erp-mx-smer-pun {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

    .erp-mx-smer-pun button {
        flex: 1;
    }

/* Pretraga iznad stabla ekrana. */
.erp-mx-stablo-trazi {
    width: 100%;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    padding: 0 10px;
    margin-bottom: 8px;
}

/* Grana stabla (grupa prava) — mirnija od stavke, da se hijerarhija vidi. */
.erp-mx-stablo-grupa {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 7px 8px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
}

    .erp-mx-stablo-grupa:hover {
        color: var(--text);
    }

    .erp-mx-stablo-grupa .naziv {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Dete stabla (ekran ili specifična operacija) — uvučeno, ista silueta kao uloga. */
.erp-mx-uloga.dete {
    padding-left: 24px;
    font-size: 12.5px;
}

/* Rasklopljeni deo ispod uloge (spisak korisnika — do RB-5 samo najava). */
.erp-mx-korisnici {
    margin: 2px 6px 8px;
    padding: 8px 10px;
    border-left: 2px solid var(--border);
    font-size: 12px;
    color: var(--muted);
}

.erp-mx-desno {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.erp-mx-vrh {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

    .erp-mx-vrh b {
        font-size: 14.5px;
    }

/* Prekidač smera — ista silueta kao pogledi na gridu, samo manji. */
.erp-mx-smer {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

    .erp-mx-smer button {
        border: 0;
        background: transparent;
        padding: 4px 14px;
        font: inherit;
        font-size: 12.5px;
        color: var(--muted);
        cursor: pointer;
    }

        .erp-mx-smer button.on {
            background: var(--primary);
            color: #fff;
            font-weight: 600;
        }

.erp-mx-trazi {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .erp-mx-trazi input,
    .erp-mx-trazi select {
        height: 30px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: 12.5px;
        padding: 0 10px;
        min-width: 190px;
    }

/* Žuta traka nesačuvanih izmena — isti jezik kao bedž „nesačuvano" kod korisnika. */
.erp-mx-izmene {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 13px;
}

    .erp-mx-izmene .erp-akcija {
        margin-left: 0;
    }

    .erp-mx-izmene .desno {
        margin-left: auto;
        display: flex;
        gap: 8px;
    }

/* Tabela matrice — čist HTML, bez grid komponente. */
.erp-mx-tabela {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

    .erp-mx-tabela th {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--muted);
        font-weight: 600;
        padding: 7px 10px;
        border-bottom: 1px solid var(--border);
        text-align: center;
    }

        .erp-mx-tabela th:first-child {
            text-align: left;
            padding-left: 14px;
        }

    .erp-mx-tabela td {
        padding: 5px 10px;
        border-bottom: 1px solid var(--border);
        text-align: center;
    }

        .erp-mx-tabela td:first-child {
            text-align: left;
            padding-left: 14px;
        }

    .erp-mx-tabela tr:hover td {
        background: rgba(var(--primary-rgb), .04);
    }

    .erp-mx-tabela input[type="checkbox"] {
        width: 15px;
        height: 15px;
        accent-color: var(--primary);
        cursor: pointer;
    }

    .erp-mx-tabela select {
        height: 26px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: 12px;
        padding: 0 6px;
        max-width: 100%;
    }

/* Zaglavlje grupe (harmonika) unutar matrice. */
.erp-mx-grupa {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

    .erp-mx-grupa .zbir {
        margin-left: auto;
        font-weight: 400;
        font-size: 12px;
        color: var(--muted);
    }

        /* Grupa koja NOSI bar jedno pravo — pill sa akcentom, da se vidi iz aviona. */
        .erp-mx-grupa .zbir.ima {
            background: rgba(var(--primary-rgb), .15);
            color: var(--primary);
            font-weight: 600;
            border-radius: 999px;
            padding: 1px 10px;
        }

.erp-mx-podnaslov {
    padding: 6px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.erp-mx-prazno {
    padding: 48px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
}

/* ------------------------------------------------------------------------------------
   TRAKA STRANICE (ErpTrakaStranice) — red iznad grida: levo prečice (linkovi),
   desno akcije stranice. Silueta razdvaja: link je pill sa strelicom, akcija je
   zaobljeni pravougaonik na tamnijoj podlozi.
   ------------------------------------------------------------------------------------ */
.erp-traka-stranice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

    .erp-traka-stranice .erp-precice {
        margin-bottom: 0 !important;
    }

.erp-traka-desno {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Akcija stranice — RADI nešto (za razliku od prečice koja VODI negde). */
.erp-akcija {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s ease;
}

    .erp-akcija i {
        color: var(--muted);
        font-size: 13px;
    }

    .erp-akcija:hover:not(:disabled) {
        color: var(--primary);
        border-color: var(--primary);
        background: var(--surface);
    }

        .erp-akcija:hover:not(:disabled) i {
            color: var(--primary);
        }

    .erp-akcija:disabled {
        opacity: .55;
        cursor: default;
    }

/* ------------------------------------------------------------------------------------
   PREČICE (ErpPrecice) — čipovi iznad grida, otvaraju radnu karticu.
   ------------------------------------------------------------------------------------ */
.erp-precica {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .12s ease;
}

    .erp-precica > i:first-child {
        color: var(--primary);
        font-size: 13px;
    }

    .erp-precica .erp-precica-strelica {
        color: var(--muted);
        font-size: 10px;
    }

    .erp-precica:hover {
        color: var(--primary);
        border-color: var(--primary);
        background: var(--primary-soft);
        box-shadow: var(--shadow-sm);
    }

        .erp-precica:hover .erp-precica-strelica {
            color: var(--primary);
        }

/* ------------------------------------------------------------------------------------
   RADNI CENTAR (UI standard §8, v1) — početna: pločice ekrana po modulu.
   ------------------------------------------------------------------------------------ */
.erp-rc {
    max-width: 1100px;
}

.erp-rc-zaglavlje {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

    .erp-rc-zaglavlje h4 {
        margin: 0;
        font-weight: 700;
    }

.erp-rc-sekcija {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin: 18px 0 8px;
}

    .erp-rc-sekcija::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
    }

.erp-rc-plocice {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.erp-rc-plocica {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
}

    .erp-rc-plocica i {
        color: var(--primary);
        font-size: 16px;
        min-width: 20px;
        text-align: center;
    }

    .erp-rc-plocica span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .erp-rc-plocica:hover {
        border-color: var(--primary);
        color: var(--text);
        box-shadow: var(--shadow-sm);
    }

/* Pločica sandučeta je <button>, ne <a> — jer vodi na filtriran spisak, a ne na ekran.
   Bez ova tri reda pregledač joj daje svoj font i pozadinu, pa u istom redu sa
   pločicama ekrana izgleda kao druga vrsta elementa. */
button.erp-rc-plocica {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

    button.erp-rc-plocica b {
        color: var(--warn);
        margin-right: 4px;
    }

/* ------------------------------------------------------------------------------------
   POSLEDNJE RADNJE (RB-2, Radni centar) — trag samog korisnika nad e-dokumentima.
   Jedan red = jedna radnja; klik vodi na dokument. Detalji su namerno stišani: red se
   čita s leva („kada — šta — koji dokument"), a objašnjenje se gleda samo kad zatreba.
   ------------------------------------------------------------------------------------ */
.erp-rc-dogadjaji {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.erp-rc-dogadjaj {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

    .erp-rc-dogadjaj:hover {
        border-color: var(--primary);
        box-shadow: var(--shadow-sm);
    }

    .erp-rc-dogadjaj .kada {
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
        min-width: 84px;
    }

    .erp-rc-dogadjaj .sta {
        font-weight: 600;
        white-space: nowrap;
    }

    .erp-rc-dogadjaj .broj {
        color: var(--primary);
        font-weight: 600;
        white-space: nowrap;
    }

    .erp-rc-dogadjaj .detalji {
        color: var(--muted);
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

/* ------------------------------------------------------------------------------------
   RADNI TABOVI (mockup v2, faza 4) — otvorene stranice kao kartice ispod zaglavlja.
   Aktivna kartica se boji u --primary trakom na vrhu i „utapa" u pozadinu sadržaja.
   ------------------------------------------------------------------------------------ */
/* ══════════════════════════════════════════════════ STRANICE PUNE VISINE (10.09.2026)
   ☠️ Vlasnik: „da li poslednja kartica može da bude zakovana za donji deo ekrana i da nema skrola
      uopšte stranice u zavisnosti od monitora i rezolucije, a da se može skrolovati samo grid sa
      stavkama tokom unosa?"
   Ekran dokumenta je od 04.09. tako i zamišljen, ali je visinu računao kao `100vh - 56px` — dakle
   POGAĐAO je koliko školjka zauzme. A iznad sadržaja stoje traka sa pretragom I traka radnih tabova,
   pa i unutrašnji razmak članka (`p-4`): zbir je znatno veći od 56 px. Razlika je izlazila kao skrol
   cele stranice, i to različit na svakoj rezoluciji — što je tačno ono što se videlo.

   ⚠️ Zato se visina više NE RAČUNA nego NASLEĐUJE: stranica koja nosi klasu `puna-visina` kaže
      školjci da joj da tačno onoliko koliko je preostalo, i da ugasi svoj skrol. Ništa se ne pogađa,
      pa nijedna rezolucija, zum ni skrivena traka tabova ne mogu da je razmaknu.
   ⛔ Radi kroz `:has()`, dakle SAMO na stranicama koje su to izričito tražile — ostali ekrani se
      ponašaju tačno kao pre. Pregledač koji `:has()` ne podržava jednostavno ostane na starom
      ponašanju (stranica se skroluje): gubi se udobnost, ne funkcija.
   ⛔ Unutrašnji razmak članka se gasi jer takva stranica sama nosi svoje razmake — inače bi
      `p-4` sa svake strane dodao 24 px i vratio skrol na mala vrata. */

.erp-main:has(.puna-visina) {
    overflow: hidden;
}

.erp-page-content:has(> .puna-visina) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
}

    .erp-page-content:has(> .puna-visina) > .puna-visina {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

.erp-tabbar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 12px 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    flex: none;
}

.erp-rtab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    white-space: nowrap;
    max-width: 220px;
}

    .erp-rtab .erp-rtab-naslov {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .erp-rtab .x {
        border: 0;
        background: transparent;
        color: var(--muted);
        width: 18px;
        height: 18px;
        min-width: 18px;
        border-radius: 5px;
        display: grid;
        place-items: center;
        cursor: pointer;
        padding: 0;
    }

        .erp-rtab .x:hover {
            background: var(--surface-2);
            color: var(--err);
        }

    .erp-rtab:hover {
        color: var(--text);
        background: var(--surface-2);
        border-color: var(--border);
    }

    .erp-rtab.on {
        color: var(--primary);
        background: var(--bg);
        border-color: var(--border);
        position: relative;
    }

        /* Traka u boji akcenta na vrhu aktivne kartice. */
        .erp-rtab.on::before {
            content: '';
            position: absolute;
            left: 10px;
            right: 10px;
            top: 0;
            height: 2px;
            border-radius: 0 0 2px 2px;
            background: var(--primary);
        }

        /* Prekriva donju ivicu trake, pa aktivna kartica „prelazi" u sadržaj. */
        .erp-rtab.on::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: var(--bg);
        }

/* ------------------------------------------------------------------------------------
   KOMANDNA PALETA (mockup v2, faza 4) — Ctrl+K: centrirana kartica preko zavese,
   pretraga ekrana svih modula. Komponenta ErpKomandnaPaleta.
   ------------------------------------------------------------------------------------ */
.erp-cmdp {
    position: fixed;
    inset: 0;
    background: rgba(10, 13, 20, .45);
    z-index: 1060; /* iznad panela personalizacije */
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}

    .erp-cmdp.on {
        display: flex;
    }

.erp-cmd {
    width: min(560px, 92vw);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

    .erp-cmd input {
        width: 100%;
        padding: 15px 18px;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 15px;
        border-bottom: 1px solid var(--border);
    }

    .erp-cmd .st {
        padding: 12px 18px 6px;
        font-size: 10.5px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 700;
    }

    .erp-cmd .it {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 9px 18px;
        font-size: 13.5px;
        cursor: pointer;
        color: var(--text);
    }

        .erp-cmd .it:hover,
        .erp-cmd .it.on {
            background: var(--primary-soft);
        }

        .erp-cmd .it i {
            color: var(--muted);
            width: 18px;
            text-align: center;
        }

        .erp-cmd .it kbd {
            margin-left: auto;
            font-size: 10px;
            color: var(--muted);
            border: 1px solid var(--border);
            border-radius: 5px;
            padding: 1px 6px;
            background: var(--surface);
        }

    .erp-cmd .erp-cmd-prazno {
        padding: 16px 18px;
        color: var(--muted);
        font-size: 13px;
    }

    .erp-cmd .ft {
        padding: 9px 18px;
        border-top: 1px solid var(--border);
        color: var(--muted);
        font-size: 11px;
    }

/* ------------------------------------------------------------------------------------
   PANEL PERSONALIZACIJE (mockup v2) — komponenta ErpPersonalizacija.

   ⚠️ NAMERNO globalno, ne scoped (.razor.css). Nađeno 20.08.2026: host bundle
   NITErp.Client.styles.css sadrži samo `@import 'NITErp.Client.Client.bundle.scp.css'`
   BEZ `_content/NITErp.Client.Client/` prefiksa, pa import u pretraživaču gađa koren
   sajta i vraća 404 — scoped CSS iz klijentske biblioteke NIKAD ne stigne do ekrana.
   Zato su i stari template .razor.css fajlovi delovali „nevidljivo". Dok se koren tog
   problema ne reši, stilovi komponenti idu ovde; klase nose erp- prefiks pa ne
   kolidiraju.
   ------------------------------------------------------------------------------------ */
.erp-zavesa {
    position: fixed;
    inset: 0;
    background: rgba(10, 13, 20, .4);
    z-index: 1040;
    display: none;
}

    .erp-zavesa.on {
        display: block;
    }

.erp-pers {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 95vw);
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    display: none;
    flex-direction: column;
}

    .erp-pers.on {
        display: flex;
    }

    .erp-pers .pers-h {
        padding: 15px 18px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .erp-pers .pers-h b {
            font-size: 15px;
        }

        .erp-pers .pers-h small {
            display: block;
            color: var(--muted);
            font-size: 11.5px;
        }

        .erp-pers .pers-h .pers-ikona {
            font-size: 17px;
            color: var(--primary);
        }

        .erp-pers .pers-h .x {
            margin-left: auto;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--muted);
            width: 30px;
            height: 30px;
            border-radius: 8px;
            cursor: pointer;
        }

    .erp-pers .pers-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px 18px;
    }

    .erp-pers .p-sek {
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 700;
        margin: 18px 0 9px;
    }

        .erp-pers .p-sek:first-child {
            margin-top: 0;
        }

    .erp-pers .tema-kartice {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .erp-pers .tema-k {
        border: 2px solid var(--border);
        border-radius: 10px;
        padding: 7px;
        cursor: pointer;
        text-align: center;
    }

        .erp-pers .tema-k.on {
            border-color: var(--primary);
        }

        .erp-pers .tema-k .pre {
            height: 44px;
            border-radius: 6px;
            display: flex;
            overflow: hidden;
            margin-bottom: 6px;
        }

            .erp-pers .tema-k .pre i {
                display: block;
            }

        .erp-pers .tema-k span {
            font-size: 11.5px;
            font-weight: 600;
        }

    .erp-pers .seg {
        display: flex;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 9px;
        padding: 3px;
        gap: 3px;
    }

        .erp-pers .seg button {
            flex: 1;
            border: 0;
            background: transparent;
            color: var(--muted);
            font: inherit;
            font-size: 12px;
            font-weight: 600;
            padding: 6px 0;
            border-radius: 7px;
            cursor: pointer;
        }

            .erp-pers .seg button.on {
                background: var(--surface);
                color: var(--text);
                box-shadow: var(--shadow-sm);
            }

    .erp-pers .akcenti {
        display: flex;
        gap: 9px;
        flex-wrap: wrap;
    }

    .erp-pers .akc {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        display: grid;
        place-items: center;
        color: #fff; /* kvačica na obojenom krugu — uvek bela, kao u mockupu */
        font-size: 12px;
    }

        .erp-pers .akc.on {
            border-color: var(--text);
        }

        /* Krug „boja teme": trobojni prelaz tri palete. Gotovi tonovi su namerni —
           krug predstavlja sve tri teme, ne trenutnu. */
        .erp-pers .akc-tema {
            background: conic-gradient(#1570ef, #4f46e5, #0f766e, #1570ef);
        }

    .erp-pers .pers-foot {
        padding: 12px 18px;
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--muted);
        font-size: 11.5px;
        gap: 8px;
    }

        .erp-pers .pers-foot span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

/* ------------------------------------------------------------------------------------
   PRIJAVNI EKRAN (mockup v1) — split: levo brend panel u gradijentu teme
   (--login-panel iz erp-tema.css), desno forma. Koristi ga AuthLayout, pa isti
   izgled dobijaju i zaboravljena lozinka i demo registracija.
   ------------------------------------------------------------------------------------ */
.erp-login-wrap {
    display: flex;
    min-height: 100vh;
    background: var(--bg);
}

.erp-login-left {
    flex: 1.1;
    background: var(--login-panel);
    color: #fff; /* tekst na gradijentu — uvek svetao, u oba režima */
    padding: 56px;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

    .erp-login-left::after {
        content: '';
        position: absolute;
        right: -120px;
        top: -120px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%);
    }

.erp-login-logo {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

    /* Pun logo se koristi od ~120 px širine naviše (brend/README.txt); 64 px visine ≈ 138 px. */
    .erp-login-logo img {
        height: 64px;
        width: auto;
        display: block;
    }

.erp-login-hero h1 {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    max-width: 420px;
    margin-bottom: 14px;
}

.erp-login-hero p {
    opacity: .85;
    max-width: 400px;
    line-height: 1.6;
}

.erp-login-feat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13.5px;
}

    .erp-login-feat div {
        display: flex;
        gap: 10px;
        align-items: center;
        opacity: .92;
    }

    .erp-login-feat i {
        background: rgba(255, 255, 255, .15);
        border-radius: 8px;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
    }

.erp-login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
}

.erp-login-alati {
    position: absolute;
    top: 18px;
    right: 22px;
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--muted);
}

    /* Izbor palete u uglu — širina po sadržaju, ne cela linija. */
    .erp-login-alati .form-select {
        width: auto;
    }

.erp-login-karta {
    width: 100%;
    max-width: 400px;
}

.erp-login-naslov {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--text);
}

.erp-login-pod {
    color: var(--muted);
    margin-bottom: 28px;
}

/* ------------------------------------------------------------------------------------
   DONJA NAVIGACIJA — telefon (UI standard §9, 21.08.2026).
   Ispod 768px bočni meni ne doseže palac; 5 odredišta stoji uz donju ivicu:
   Početna · dva omiljena ekrana · Novo (objave) · Više (fioka sa celim menijem).
   Na desktopu ne postoji. env(safe-area-inset-bottom) zbog telefona bez tastera.
   ------------------------------------------------------------------------------------ */
.erp-donja-nav {
    display: none;
}

@media (max-width: 767.98px) {
    .erp-donja-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1039; /* ispod zavese (1040) — fioka menija ide PREKO trake */
        display: flex;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Sadržaj ne sme da se sakrije iza trake — poslednji red tabele ostaje dostupan. */
    .erp-main {
        padding-bottom: 64px;
    }
}

.erp-dn-stavka {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 4px 6px;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

    .erp-dn-stavka i {
        font-size: 20px;
        line-height: 1;
    }

    .erp-dn-stavka span:last-child {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* NavLink sam dodaje .active na stavku čija je ruta otvorena. */
    .erp-dn-stavka.active {
        color: var(--primary);
    }

.erp-dn-ikona {
    position: relative;
    line-height: 1;
}

.erp-dn-znacka {
    position: absolute;
    top: -5px;
    right: -12px;
    min-width: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--err);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
}


/* ------------------------------------------------------------------------------------
   TRAKA MODULA — izgled menija „traka" (maketa MN1, vlasnik 09.09.2026).
   Uska kolona sa ikonicom po modulu; panel desno (.erp-sidebar) nosi SAMO izabran modul.
   ⛔ Boje idu iz istih --sidebar-* tokena kao i panel: traka i panel su jedna celina, pa
      tema mora da ih menja zajedno. Nijedna vrednost se ne zakucava.
   ⚠️ Traka NE nestaje u rail režimu — rail skuplja panel, a traka je tada jedini put do
      drugog modula. Da nestane, korisnik bi ostao zaključan u jednom modulu.
   ------------------------------------------------------------------------------------ */
.erp-modul-traka {
    width: 60px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 0;
    background: color-mix(in srgb, var(--sidebar-bg) 88%, #000);
    border-right: 1px solid var(--sidebar-border);
    overflow-y: auto;
    overflow-x: hidden;
}

    .erp-modul-traka .mt-brand {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: var(--primary);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 16px;
        margin-bottom: 8px;
        flex: none;
    }

    .erp-modul-traka button {
        position: relative;
        width: 44px;
        height: 40px;
        flex: none;
        border: 0;
        background: transparent;
        color: var(--sidebar-muted);
        border-radius: 9px;
        cursor: pointer;
        display: grid;
        place-items: center;
        font-size: 16px;
    }

        .erp-modul-traka button:hover {
            background: var(--sidebar-hover);
            color: var(--sidebar-text);
        }

        .erp-modul-traka button.on {
            background: var(--sidebar-hover);
            color: var(--sidebar-text);
        }

            /* Trakica uz levu ivicu — ista uloga kao aktivna stavka u panelu. */
            .erp-modul-traka button.on::before {
                content: '';
                position: absolute;
                left: -8px;
                top: 8px;
                bottom: 8px;
                width: 3px;
                border-radius: 0 3px 3px 0;
                background: var(--primary);
            }

    /* Broj stavki modula: „Administracija 30" je upozorenje samo po sebi. */
    .erp-modul-traka .mt-broj {
        position: absolute;
        top: 2px;
        right: 4px;
        font-size: 8.5px;
        font-weight: 800;
        line-height: 1;
        padding: 1px 3px;
        border-radius: 7px;
        background: var(--sidebar-hover);
        color: var(--sidebar-muted);
    }

/* Ime otvorenog modula stoji tamo gde inače stoji brend — logo je već u traci. */
.erp-sidebar .sb-brand .sb-modul {
    font-weight: 800;
    letter-spacing: -.2px;
}

/* Prekidač izgleda menija, u dnu panela uz „Skupi meni". */
.sb-izgled {
    display: flex;
    gap: 4px;
    padding: 6px 10px 2px;
}

    .sb-izgled button {
        flex: 1;
        height: 27px;
        border: 1px solid var(--sidebar-border);
        background: transparent;
        color: var(--sidebar-muted);
        border-radius: 7px;
        cursor: pointer;
        font-size: 13px;
    }

        .sb-izgled button:hover {
            background: var(--sidebar-hover);
            color: var(--sidebar-text);
        }

        .sb-izgled button.on {
            background: var(--sidebar-hover);
            color: var(--sidebar-text);
            border-color: color-mix(in srgb, var(--primary) 55%, transparent);
        }

/* ════════════════════════════════════════════════════════════════════════════════
   IZGLED „PRETRAGA" (maketa MN3) — kratak meni + katalog „Sve stranice"
   Bočni meni nosi samo omiljeno, nedavno i tekući modul; ceo spisak živi u katalogu
   preko celog ekrana, u kolonama po modulu. Nastalo 09.09.2026.
   ════════════════════════════════════════════════════════════════════════════════ */

/* Dugme „Sve stranice" u dnu menija — jedini stalni put do celog kataloga, pa
   namerno stoji vidljivo, a ne sakriveno u meni korisnika. */
.sb-sve-dugme {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 10px 2px;
    padding: 8px;
    border: 1px dashed var(--sidebar-border);
    border-radius: 8px;
    color: var(--sidebar-muted);
    cursor: pointer;
    font-weight: 700;
    font-size: 12.3px;
}

    .sb-sve-dugme:hover {
        border-color: color-mix(in srgb, var(--primary) 55%, transparent);
        color: var(--sidebar-text);
    }

/* U skupljenom meniju (rail) ostaje samo ikonica — natpis skida .sb-tekst pravilo. */
[data-erp-rail="1"] .sb-sve-dugme {
    margin-inline: 6px;
    padding: 8px 0;
}

/* ---- KATALOG PREKO CELOG EKRANA ---- */
.erp-sve {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--bg) 97%, #000);
}

.erp-sve-vrh {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

    .erp-sve-vrh h2 {
        font-size: 15px;
        font-weight: 800;
        margin: 0;
    }

.erp-sve-polje {
    flex: 1;
    max-width: 420px;
}

/* Broj pogodaka uz polje: sužavanje mora da ima odgovor i kad spisak izađe iz vidnog polja. */
.erp-sve-broj {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 9px;
}

.erp-sve-zatvori {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 17px;
    cursor: pointer;
    line-height: 1;
}

    .erp-sve-zatvori:hover {
        color: var(--text);
    }

.erp-sve-telo {
    flex: 1;
    overflow: auto;
    padding: 20px;
    column-width: 250px;
    column-gap: 26px;
}

.erp-sve-prazno {
    column-span: all;
    text-align: center;
    color: var(--muted);
    padding: 60px 0;
}

    .erp-sve-prazno i {
        font-size: 26px;
        display: block;
        margin-bottom: 8px;
        opacity: .6;
    }

.erp-sve-grupa {
    break-inside: avoid;
    margin-bottom: 22px;
}

    .erp-sve-grupa h4 {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--primary);
        padding-bottom: 6px;
        margin-bottom: 7px;
        border-bottom: 2px solid var(--primary-soft);
    }

        .erp-sve-grupa h4 span {
            margin-left: auto;
            color: var(--muted);
            font-weight: 700;
        }

.erp-sve-pod {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 9px 0 3px;
}

.erp-sve-grupa a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 12.6px;
}

    .erp-sve-grupa a i {
        color: var(--muted);
        font-size: 13px;
        width: 15px;
        text-align: center;
        flex-shrink: 0;
    }

    .erp-sve-grupa a:hover {
        background: var(--surface-2);
        color: var(--text);
    }

/* Na telefonu katalog je jedna kolona — kolone od 250px tamo nemaju gde. */
@media (max-width: 575.98px) {
    .erp-sve-telo {
        column-width: auto;
        padding: 14px;
    }

    .erp-sve-polje {
        max-width: none;
    }
}
