/* ------------------------------------*\
    #RESET
\*------------------------------------ */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
    display: block;
}

body{
    line-height: 1;
}

ol, ul{
    list-style: none;
}

blockquote, q{
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after{
        content: "";
        content: none;
    }

table{
    border-collapse: collapse;
    border-spacing: 0;
}

/* ------------------------------------*\
    #BOX-SIZING
\*------------------------------------ */
html{
    box-sizing: border-box;
}

*, *::before, *::after{
    box-sizing: inherit;
}

@font-face {
    font-family: "KAUFMANN";
    src: url("../fonts/KAUFMANN.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
/* ------------------------------------*\
    #PAGE
\*------------------------------------ */
html{
    height: 100dvh;
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    background-color: #f5f6fa;
    overflow: hidden;
}

address, h1, h2, h3, h4, h5, h6, blockquote, p, pre, dl, ol, ul, figure, hr, table, fieldset{
    margin-bottom: 10px;
}

body{
    overflow: hidden;
    height: 100%;
}

img{
    max-width: 100%;
}

i{
    font-style: italic;
}

strong{
    font-weight: 700;
}

p{
    font-size: 14px;
    line-height: 1.3;
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

main{
    position: relative;
    z-index: 10;
}

i{
    font-style: italic;
}

*::-webkit-scrollbar{
    width: 5px;
    height: 5px;
}

*::-webkit-scrollbar-track{
    background: #e2e2e2;
    border-radius: 50px;
}

*::-webkit-scrollbar-thumb{
    border-radius: 50px;
    background: #21263c;
    width: 4.5px;
}

::-webkit-scrollbar-thumb:horizontal{
    background: #21263c;
    border-radius: 50px;
}

*{
    scrollbar-color: #21263c #e2e2e2;
    scrollbar-width: thin;
}

.table-responsive{
    overflow-x: auto;
    max-height: 100%;
    display: flex;
}

.table{
    /*min-width: 800px;*/
    display: table;
    width: 100%;
    border-radius: 8px;
    overflow: auto;
    position: relative;
}

    .table thead{
        position: sticky;
        z-index: 2;
        top: 0;
    }

    .table tbody{
        max-height: calc(100% - 64px); /* Set your desired max height */
        overflow-y: auto;
        width: calc(100% - 3px);
    }

    .table th{
        background-color: #DEDEDE;
        text-align: left;
        padding: 22px 24px;
        color: #21263C;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
    }

    /* Zaglavlja svih tabela: "Prvo slovo veliko, ostala mala" (sentence case) bez obzira na markup.
       lowercase spusti sve, pa ::first-letter vrati prvo slovo na veliko. */
    .table th{
        text-transform: lowercase;
    }
    .table th::first-letter{
        text-transform: uppercase;
    }

@media (max-width: 1540px) {
    .table th{
        font-size: 12px;
        line-height: 1.3;
        padding: 22px 15px;
    }
}

.table td{
    padding: 22px 0 22px 4px;
    text-align: left;
    font-size: 12px;
    line-height: 16px;
}

.table tr:nth-child(even) td{
    background-color: rgba(53, 91, 110, 0.05);
}

@media (max-width: 1540px) {
}

@media (max-width: 1540px) {
}

.table--vessels th{
    padding: 6px 0 6px 4px;
    align-content: center;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    color: #374151;
    font-weight: 600;
    font-size: 13px;
}

@media (max-width: 1540px) {
    .table--vessels th{
        font-size: 12px;
        line-height: 1.3;
        padding: 6px 5px 6px 4px;
    }
}

/* Kompaktnije, preglednije tabele: ćelije ostaju u JEDNOM redu — kolone se skupe na svoj sadržaj,
   a kolone sa više badge-eva/pilula (npr. "Stanje") se rašire umesto da se lome u dva reda.
   Prazan prostor između kolona se time smanjuje. table-responsive daje horizontalni scroll ako
   baš ne stane. Kolona sa dugim tekstom (opis, napomena) može vratiti lomljenje klasom `u-wrap`. */
.table--vessels th,
.table--vessels td{
    white-space: nowrap;
}
.table--vessels th.u-wrap,
.table--vessels td.u-wrap,
.table--vessels .u-wrap{
    white-space: normal;
}
/* Badge/pilula kolone često koriste inline `display:flex; flex-wrap:wrap` (npr. "Stanje" na obilascima).
   U ćeliji tabele forsiramo nowrap (kolona se raširi u jedan red umesto da se lomi u dva). !important
   da nadjača inline stil. Opt-out: stavi klasu `u-wrap` na taj flex div. */
.table--vessels td [style*="flex-wrap"]:not(.u-wrap){
    flex-wrap: nowrap !important;
}

/* `line-height` je OBAVEZAN: bez njega ćelija nasleđuje `body { line-height:1 }` iz reseta na vrhu
   ovog fajla, pa tekst koji se prelomi u dva reda naleže sam na sebe (repovi g\j\p\y udaraju u
   kvačice č\ć\š\ž\đ sledećeg reda). Ranije je postojao samo u `@media (max-width:1540px)` bloku
   ispod, pa se kvar video ISKLJUČIVO na širokim monitorima i delovao je nasumično. Jednoredne
   ćelije ne menjaju visinu — njih drži `padding`. */
.table--vessels td{
    padding: 8px 0 8px 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #000;
    vertical-align: middle;
}

    .table--vessels td p{
        color: #000;
        font-size: 12px;
    }

@media (max-width: 1540px) {
    .table--vessels td{
        font-size: 10px;
        line-height: 1.3;
        padding: 8px 0 8px 4px;
    }

        .table--vessels td p{
            font-size: 10px;
        }
}

.table--vessels .line{
    width: 8px;
    height: 32px;
    display: block;
    float: left;
    margin-right: 4px;
}

.table--vessels .line--yellow{
    background-color: #edad51;
}

.table--vessels .line--purple{
    background-color: #752145;
}

.table--vessels .line--orange{
    background-color: #ec7a62;
}

.table--vessels .td-col-bg{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}

.table.table--vessels tbody tr:not(.blue-row) td.td-status-over { background-color: #cce5ff !important; } /* Svetlo plava (Prebačaj) */
.table.table--vessels tbody tr:not(.blue-row) td.td-status-ok { background-color: #d4edda !important; } /* Svetlo zelena (Tačno) */
.table.table--vessels tbody tr:not(.blue-row) td.td-status-under { background-color: #f8d7da !important; } /* Svetlo crvena (Manjak) */

.divider{
    width: 100%;
    height: 1px;
    background-color: #d9d9d9;
    margin-bottom: 12px;
}

/* ------------------------------------*\
    #HEADINGS
\*------------------------------------ */
h1, h2, h3, h4, h5, h6{
    font-family: "REM", sans-serif;
}

    h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a{
        color: inherit;
    }

h1, .h1{
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.28px;
}

h2, .h2{
    font-size: 20px;
    line-height: 1.2;
}

h3, .h3{
    font-size: 14px;
    line-height: 1.2;
}

h4, .h4{
    font-size: 28px;
    line-height: 1.2;
}

h5, .h5{
    font-size: 25px;
    line-height: 1.2;
}

h6, .h6{
    font-size: 20px;
    line-height: 1.2;
}

/* ------------------------------------*\
    #link
\*------------------------------------ */
a{
    color: #000;
    transition: color 0.3s ease;
    text-decoration: none;
}

    a:hover{
        color: black;
    }

    a:focus, a:active{
        outline: none;
        color: black;
    }

.row{
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}

    .row.reverse{
        flex-direction: row-reverse;
    }

.col.reverse{
    flex-direction: column-reverse;
}

.col-xs-12{
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

.col-xs-12{
    flex-basis: 100%;
    max-width: 100%;
}

@media only screen and (min-width: 48em) {
    .container{
        width: 46rem;
    }
}

@media only screen and (min-width: 62em) {
    .container{
        width: 61rem;
    }

    .col-md-4, .col-md-6, .col-md-12{
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .col-md-4{
        flex-basis: 33.333%;
        max-width: 33.333%;
    }

    .col-md-6{
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-md-12{
        flex-basis: 100%;
        max-width: 100%;
    }
}

@media only screen and (min-width: 75em) {
    .container{
        width: 71rem;
    }
}
/*------------------------------------*\
    #FLEXBOX
\*------------------------------------*/
.o-flex{
    display: flex;
}

.o-flex--column{
    flex-direction: column;
}

.o-flex--center{
    align-items: center;
}

.o-flex--justify{
    justify-content: space-between;
}

.o-flex--justify-center{
    justify-content: center;
}

.o-flex--right{
    justify-content: flex-end;
}

.o-flex--auto{
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

@media screen and (min-width: 1216px) {
}

.flag{
    display: flex;
    align-items: center;
    gap: 10px;
}

    .flag .icon-wrapper--big{
        min-width: 80px;
        width: 80px;
        height: 80px;
        /*border-radius: 50%;*/
        overflow: hidden;
    }

        .flag .icon-wrapper--big img{
            width: 100%;
        }

/**
* Reset input styles.
*/
.input{
    -webkit-appearance: none;
    /* removing inner shadow on iOS inputs */
    -webkit-font-smoothing: inherit;
    box-sizing: border-box;
    transition: all 0.1s ease;
    background: none;
    border: none;
    color: #000;
    width: 100%;
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    padding: 0;
    /* remove browser defaults */
    vertical-align: middle;
    width: 100%;
}

    .input:invalid{
        box-shadow: none;
        /* fixes mozilla red outline (shadow) */
    }

    .input[readonly]{
        cursor: text;
    }

    .input::-ms-clear{
        display: none;
        /* remove IE clear icon */
    }

    .input:not(:disabled).error{
        border-color: #F62C2C;
    }

    .input:not(:disabled):focus{
        outline: none;
    }

.input--primary{
    height: 32px;
    color: #000;
    display: flex;
    font-size: 12px;
    align-items: center;
    background-color: transparent;
    padding: 0 16px;
    border: 1px solid #355B6E;
    border-radius: 8px;
    /**
   * @disabled
   */
}

    .input--primary:disabled{
        opacity: 0.5;
        cursor: not-allowed !important;
    }

.input--secondary{
    height: 32px;
    color: #000;
    display: flex;
    font-size: 12px;
    align-items: center;
    background-color: transparent;
    padding: 0 16px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    /**
   * @disabled
   */
}

    .input--secondary:not(:disabled):focus{
        border-color: #408DFB;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    .input--secondary:disabled{
        opacity: 0.5;
        cursor: not-allowed !important;
    }

.input--fourth{
    height: 48px;
    color: #000;
    display: flex;
    font-size: 16px;
    align-items: center;
    background-color: #FFF;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #E4E7EC;
    box-shadow: 0px 1px 2px 0px rgba(21, 28, 36, 0.05);
    /**
   * @disabled
   */
}

    .input--fourth:disabled{
        opacity: 0.5;
        cursor: not-allowed !important;
    }

.input-box{
    margin-bottom: 20px;
    position: relative;
}

    .input-box p:not(.error){
        margin-bottom: 4px;
        /*font-weight: 500;*/
        font-size: 14px;
        color: #141C25;
        text-shadow: 0px 1px 2px rgba(20, 28, 36, 0.04);
    }

    .input-box span.error{
        color: #F62C2C;
        font-size: 14px;
        margin-top: 5px;
    }

        .input-box span.error svg{
            margin-right: 5px;
        }

.input-box{
    margin-bottom: 20px;
    position: relative;
}

.input-icon.active .eye-open{
    display: block;
}

.input-icon.active .eye-close{
    display: none;
}

.input-dropdown{
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 6;
    transform: translate(-50%, -14px);
    width: 663px;
    max-width: 80%;
    padding: 8px 16px 16px;
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    box-shadow: 136px 42px 40px 0px rgba(201, 201, 201, 0), 87px 27px 37px 0px rgba(201, 201, 201, 0.01), 49px 15px 31px 0px rgba(201, 201, 201, 0.05), 22px 7px 23px 0px rgba(201, 201, 201, 0.09), 5px 2px 13px 0px rgba(201, 201, 201, 0.1);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

    .input-dropdown.active{
        visibility: visible;
        opacity: 1;
    }

    .input-dropdown .input{
        font-size: 12px;
        color: #000;
    }

    .input-dropdown ul{
        margin-bottom: 0;
        overflow: auto;
        max-height: 200px;
    }

        .input-dropdown ul a{
            font-size: 12px;
            color: #000;
        }

        .input-dropdown ul li{
            margin-bottom: 10px;
        }

/* ── FILTER PANEL: ograničena visina + scroll, dugmad uvek na dnu ──
   Dodaje se UZ .input-dropdown (klasa .filter-dropdown), da picker popup-i (oprema, korisnik, grad…)
   zadrže svoje ponašanje. Bogat filter ume da preraste ekran — tada sadržaj skroluje, a „Pretraga"
   i „Poništi" ostaju vidljivi na dnu panela umesto da odu ispod ivice ekrana.
   Struktura: .input-dropdown.filter-dropdown > .filter-dropdown__body + .filter-dropdown__actions */
.input-dropdown.filter-dropdown{
    display: flex;
    flex-direction: column;
    /* Panel visi ispod dugmeta u zaglavlju liste — odbija se visina zaglavlja, da dno ostane na ekranu.
       Bez min-height: kratak filter ostaje kratak, dugačak se seče i skroluje. */
    max-height: calc(100vh - 240px);
    padding-bottom: 0;
}

    .filter-dropdown__body{
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 6px;
    }

    .filter-dropdown__actions{
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background: #FFF;
        border-top: 1px solid #E6E8EC;
        padding: 10px 0 12px;
        margin-top: 4px;
    }

.button{
    -webkit-font-smoothing: inherit;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    color: #000;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    transition: all 0.2s ease;
    background-color: transparent;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    text-decoration: none;
    line-height: 1;
}

    .button:not(:disabled):active{
        outline: none;
        box-shadow: none !important;
        text-decoration: none;
    }

    .button:disabled{
        opacity: 0.5;
        cursor: not-allowed !important;
    }

@media (max-width: 480px) {
    .button{
        min-width: 0 !important;
        width: 100%;
    }
}

.button--primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 32px;
    width: auto;
    padding: 0 20px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    background: #408DFB;
    min-width: 144px;
}

    .button--primary:not(:disabled):hover, .button--primary:not(:disabled):focus, .button--primary:not(:disabled):active{
        color: #fff;
        background-color: #0e6ffa;
    }

.button--secondary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 32px;
    width: auto;
    padding: 0 20px;
    color: #000;
    border-radius: 8px;
    border: 1px solid #408DFB;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    min-width: 144px;
}

    .button--secondary:not(:disabled):hover, .button--secondary:not(:disabled):focus, .button--secondary:not(:disabled):active{
        color: #ffffff;
        background-color: #408DFB;
    }

.button--third{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 32px;
    width: auto;
    padding: 0 20px;
    color: #000;
    border-radius: 8px;
    border: 1px solid #408DFB;
    background-color: #fff;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    min-width: 144px;
}

    .button--third:not(:disabled):hover, .button--third:not(:disabled):focus, .button--third:not(:disabled):active{
        color: #ffffff;
        background-color: #408DFB;
    }

/* === Reusable "izaberi sve / poništi" pill dugmad (standard za grupne selekcije) ===
   Upotreba: <a class="sel-btn sel-btn--all"><i class="fa fa-check-circle"></i> Izaberi sve</a>
             <a class="sel-btn sel-btn--none"><i class="fa fa-ban"></i> Poništi</a>
             <a class="sel-btn sel-btn--neutral"><i class="fa fa-..."></i> Preset</a>   (opcioni 3. preset)
   Uz njih ide opcioni brojač: <span class="sel-count">3 / 8</span> */
.sel-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid #e2e8f0; background:#fff; border-radius:18px; padding:6px 15px; font-size:12px; font-weight:700; cursor:pointer; color:#475569; box-shadow:0 1px 2px rgba(15,23,42,0.05); transition:transform .1s, box-shadow .12s, background .12s, border-color .12s; user-select:none; text-decoration:none; }
.sel-btn:hover { transform:translateY(-1px); box-shadow:0 3px 8px rgba(15,23,42,0.12); }
.sel-btn:active { transform:translateY(0); }
.sel-btn i { font-size:13px; }
.sel-btn--all { color:#0f766e; border-color:#5eead4; }
.sel-btn--all:hover { background:#f0fdfa; border-color:#2dd4bf; }
.sel-btn--none { color:#64748b; }
.sel-btn--none:hover { background:#f8fafc; border-color:#cbd5e1; }
.sel-btn--neutral { color:#1e3a8a; border-color:#bfdbfe; }
.sel-btn--neutral:hover { background:#eff6ff; border-color:#93c5fd; }
.sel-count { font-size:11px; font-weight:700; color:#94a3b8; background:#f1f5f9; padding:3px 9px; border-radius:11px; }

.button--danger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 32px;
    width: auto;
    padding: 0 20px;
    color: #fff;
    border-radius: 8px;
    background-color: #FF4D4D;
    font-size: 12px;
    text-decoration: none;
    min-width: 144px;
}

    .button--danger:not(:disabled):hover, .button--danger:not(:disabled):focus, .button--danger:not(:disabled):active{
        color: #ffffff;
        background-color: #e60000;
    }

.button--success{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 32px;
    width: auto;
    padding: 0 20px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    background: lightseagreen;
    min-width: 144px;
}

    .button--success:not(:disabled):hover, .button--success:not(:disabled):focus, .button--success:not(:disabled):active{
        color: #fff;
        background-color: seagreen;
    }

.modal{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    visibility: hidden;
    opacity: 0;
}

    .modal.active{
        visibility: visible;
        opacity: 1;
    }

.modal__overlay{
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.modal__content{
    border-radius: 8px;
    background: #FFF;
    position: relative;
    z-index: 2;
    width: 670px;
    padding: 24px;
}

    .modal__content .close{
        position: absolute;
        top: 24px;
        right: 24px;
    }

    .modal__content h2{
        margin-bottom: 30px;
    }

.modal--error .modal__content{
    width: 414px;
    padding: 16px 24px 24px;
    border-radius: 24px;
}

    .modal--error .modal__content .button{
        height: 48px;
        font-size: 16px;
        width: 182px;
    }

main{
    height: 100%;
    display: flex;
}

.auth{
    background-color: #F5F6FA;
    display: flex;
    height: 100dvh;
    width: 100%;
}

    .auth form{
        min-width: 382px;
        margin-bottom: 30px;
    }

    .auth .button{
        height: 48px;
        font-size: 16px;
        font-weight: 400;
    }

    .auth .text{
        max-width: 624px;
        text-align: center;
        line-height: 24px;
        font-size: 16px;
        font-weight: 400;
        color: #637083;
    }

        .auth .text a{
            color: #637083;
        }

.form-wrapper{
    background-color: #F5F6FA;
    flex: 1 1 50%;
    overflow: auto;
    padding: 50px;
    min-width: 50%;
}

.slider-wrapper{
    background-color: #21263C;
    flex: 1 1 50%;
    min-width: 50%;
}

.aside{
    flex: 1 1 316px;
    background-color: #21263c;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    flex-direction: column;
}

    .aside.active{
        flex: 0 0 auto;
        width: 72px;
    }

        .aside.active .flag__content{
            display: none;
        }

        .aside.active .aside__header{
            padding: 32px 12px;
            justify-content: center;
        }

        /* Section heading u collapsed modu — prikazuje se sa skraćenim tekstom (Zad., Gov., ...)
           Margine i font-size se podudaraju sa expanded režimom (vidi .aside__heading h3 ispod)
           da naslovi u oba režima izgledaju identično po veličini i razmaku. */
        .aside.active .aside__heading{
            margin: 14px 0 8px 0;
            text-align: center;
        }
            .aside.active .aside__heading a{
                justify-content: center;
            }
            .aside.active .aside__heading h3{
                font-size: 17px;
                letter-spacing: 0.3px;
            }
            .aside.active .aside__heading img{
                display: none; /* nema mesta za strelicu u 72px sidebar-u */
            }

        /* Padding ostaje, ali NE postavljamo display: flex; flex-direction: column — to bi sprečilo
           vertical margin collapsing između trigger dugmeta (.mb → margin-bottom: 20px) i prvog
           naslova sekcije (.aside__heading → margin-top: 14px), što bi pravilo ~14px viška iznad
           naslova u collapsed režimu u poređenju sa expanded. Block layout sa margin collapse je
           identičan ponašanju expanded `.aside__content`. */
        .aside.active .aside__content{
            padding: 28px 10px;
        }

            .aside.active .aside__content .o-flex--right{
                display: block;
                text-align: center;
            }

            .aside.active .aside__content .left-aside-trigger{
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .aside.active .aside__content .left-aside-trigger svg{
                    transform: rotate(180deg);
                }

        /* Match expanded `.aside__list` (samo margin-bottom). Prethodno je imao i padding-bottom: 10px
           + border-bottom kao vizuelni separator, ali sa novom margin: 14px 0 8px 0 na .aside__heading
           to je davalo ~35px gap iznad sledećeg naslova — u expanded režimu je ~26px. Sada se podudara. */
        .aside.active .aside__list{
            margin-bottom: 12px;
        }

        .aside.active li{
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .aside.active li a{
                padding: 0;
                height: 40px;
                width: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .aside.active li a span{
                    display: none;
                }

.aside__header{
    background-color: #fff;
    padding: 32px 24px;
    min-height: 112px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

    .aside__header .icon-wrapper{
        min-width: 48px;
        width: 48px;
        height: 48px;
        /*border-radius: 50%;*/
        overflow: hidden;
    }

.aside__content{
    overflow: auto;
    flex: 1 1 100%;
    padding: 28px 12px;
}

.aside__heading{
    margin: 14px 0 8px 0;
}

    .aside__heading a{
        align-items: center;
    }

    .aside__heading h3{
        margin-top: 0;
        margin-bottom: 0;
        color: #fff;
        font-size: 17px;
        line-height: 1.25;
    }

    /* Chevron strelica — inline style ima height:20px, ovaj selector ga override-uje (img selector ima specificnosti 0,1,1) */
    .aside__heading img{
        height: 12px !important;
    }

    /* Default: prikaži pun naslov, sakrij skraćeni (collapsed override ispod) */
    .aside-heading-short{
        display: none;
    }
    .aside.active .aside-heading-full{
        display: none;
    }
    .aside.active .aside-heading-short{
        display: inline;
    }

.aside__list{
    margin-bottom: 12px;
}

    .aside__list a{
        color: #fff;
        font-size: 14px;
        gap: 8px;
        padding: 2px 4px;
        border-radius: 8px;
    }

        .aside__list a.active{
            background: #408dfb;
        }

        /* Beli zaobljeni pravougaonik oko ikone za bolji kontrast na tamnoj sidebar pozadini.
           Padding dodaje 4px oko 28px ikone -> ukupno 36x36 vizuelno.
           `.aside-ico` je isti taj okvir za stavku koja umesto slike nosi emodzi (spoljasnji
           servis) — da red u meniju stoji poravnat kao i svi ostali. */
        .aside__list a img,
        .aside__list a .aside-ico{
            background: #ffffff;
            padding: 4px;
            border-radius: 6px;
            box-sizing: content-box;
        }

        .aside__list a .aside-ico{
            width: 28px;
            height: 28px;
            line-height: 28px;
            font-size: 19px;
            text-align: center;
            display: inline-block;
            flex: 0 0 auto;
        }

.main-content{
    flex: 1 1 calc(100% - 316px);
    /* Flex stavka se po pravilu NE skuplja ispod svog sadržaja (min-width:auto). Bez ovoga jedna
       široka tabela (nowrap ćelije) razvuče celu radnu površinu preko ekrana, pa se seku i zaglavlje,
       pločice i filteri — a ne samo tabela. Sa min-width:0 tabela ostaje u svom `table-responsive`
       okviru sa horizontalnim scroll-om, a ostatak strane se lepo uklapa. */
    min-width: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.card{
    border-radius: 16px;
    background-color: #fff;
    padding: 16px;
}

.card-heading{
    margin-bottom: 8px;
}

    .card-heading .breadcrumb{
        gap: 3px;
    }

.action-box{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

    .action-box ul{
        gap: 10px;
        margin-right: 15px;
    }

    .action-box .input-box{
        flex: 1 1 100%;
    }

        .action-box .input-box svg{
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translate(0, -50%);
        }

.steps-nav{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 104px;
}

    .steps-nav li{
        position: relative;
    }

        .steps-nav li.active .circle{
            background-color: #408dfb;
        }

        .steps-nav li.active:before{
            background-color: #408dfb !important;
        }

        .steps-nav li .circle{
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #d9d9d9;
            transition: all 0.3s ease-in-out;
        }

        .steps-nav li:not(:last-child):before{
            position: absolute;
            left: 100%;
            top: 50%;
            width: 98px;
            height: 1px;
            content: "";
            transition: all 0.3s ease-in-out;
            background-color: #d9d9d9;
            margin-left: 3px;
        }

        .steps-nav li span{
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translate(-50%, 10px);
            color: #000;
            font-size: 12px;
            white-space: nowrap;
        }

.aside-trigger{
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #EDAD51;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .aside-trigger .trigger-icon2{
        display: none;
    }

    .aside-trigger.active .trigger-icon1{
        display: none;
    }

    .aside-trigger.active .trigger-icon2{
        display: block;
    }

.grid{
    display: flex;
    gap: 10px;
    height: calc(100% - 164px);
}

    .grid .card{
        width: 100%;
    }

    .grid .grid-row p{
        font-size: 12px;
        white-space: nowrap;
    }

    .grid .grid-row .input-box{
        margin-top: 20px;
    }

    .right-aside.active{
        visibility: visible;
        opacity: 1;
    }

.pagination{
    margin-bottom: 0;
    gap: 4px;
}

    .pagination li{
        display: flex;
        align-items: center;
    }

    .pagination a{
        display: flex;
        align-items: center;
    }

    .pagination span{
        white-space: nowrap;
        color: #637083;
        font-size: 12px;
        margin: 0 4px;
    }

.tabs{
    gap: 24px;
    display: inline-flex;
    border-bottom: 3px solid #F5F7F8;
}

    .tabs a{
        color: #D9D9D9;
        font-size: 20px;
        line-height: 28px;
        padding: 4px 0;
        position: relative;
    }

        .tabs a:before{
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 100%;
            content: "";
            background-color: #21263c;
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .tabs a.active{
            font-weight: 700;
            color: #21263c;
        }

            .tabs a.active:before{
                visibility: visible;
                opacity: 1;
            }

.owl-carousel .item{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    padding-bottom: 135px;
}

    .owl-carousel .item img{
        width: initial;
        max-width: 100%;
        height: auto;
    }

    .owl-carousel .item h1{
        color: #fff;
        margin-top: 60px;
        margin-bottom: 15px;
    }

    .owl-carousel .item p{
        font-size: 16px;
        color: #fff;
        margin-bottom: 0;
    }

.owl-carousel .owl-dots{
    display: flex;
    align-items: center;
    gap: 20px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 60px;
}

    .owl-carousel .owl-dots .owl-dot.active span{
        background-color: #fff;
    }

    .owl-carousel .owl-dots span{
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid #fff;
        display: block;
    }

.timeline-wrapper .icon-wrapper{
    background-color: #fff;
    margin-right: 26px;
    margin-top: 12px;
    padding: 4px 0;
}

.timeline-wrapper .content-wrapper{
    border-radius: 16px;
    background: #F5F7F8;
    padding: 16px;
    width: 100%;
}

    .timeline-wrapper .content-wrapper .divider{
        margin: 8px 0;
    }

    .timeline-wrapper .content-wrapper p:last-child{
        margin-bottom: 0;
    }

.u-text-center{
    text-align: center !important;
}

.u-text-right{
    text-align: right !important;
}

.relative{
    position: relative !important;
}

.w-100{
    width: 100%;
}

.h-100{
    height: 100%;
}

.max-h-100{
    max-height: 100%;
}

.min-h-100{
    min-height: 100%;
}

.min-w-100px{
    min-width: 100px;
}

.min-w-150px{
    min-width: 150px;
    text-wrap: auto !important;
}

.w-150px{
    width: 150px;
    text-wrap: auto !important;
}

.w-fullwidht-minus-150px{
    width: Calc(100% - 150px);
}

.clr-white{
    color: #fff !important;
}

.clr-blue{
    color: #408DFB !important;
}

/* ------------------------------------*\
    #TRUMPS - SPACING
\*------------------------------------ */
/**
 * Margin and padding helper classes. Use these to tweak layout on a micro
 * level.
 *
 * `.(m|p)(t|r|b|l|h|v)(-|+|0) {}` = margin/padding top/right/bottom/left/horizontal/vertical less/more/none
 */
/**
      * Margin helper classes.
      *
      * Add margins.
      */
.m{
    margin: 20px !important;
}

.mt{
    margin-top: 20px !important;
}

.mr{
    margin-right: 20px !important;
}

.mb{
    margin-bottom: 20px !important;
}

.ml{
    margin-left: 20px !important;
}

.mh{
    margin-right: 20px !important;
    margin-left: 20px !important;
}

.mb---{
    margin-bottom: calc(20px / 8) !important;
}

.ml---{
    margin-left: calc(20px / 8) !important;
}

.mt--{
    margin-top: calc(20px / 4) !important;
}

.mr--{
    margin-right: calc(20px / 4) !important;
}

.mb--{
    margin-bottom: calc(20px / 4) !important;
}

.ml--{
    margin-left: calc(20px / 4) !important;
}

/**
      * Add small margins.
      */
.m-{
    margin: calc(20px / 2) !important;
}

.mt-{
    margin-top: calc(20px / 2) !important;
}

.mr-{
    margin-right: calc(20px / 2) !important;
}

.mb-{
    margin-bottom: calc(20px / 2) !important;
}

.ml-{
    margin-left: calc(20px / 2) !important;
}

/**
      * Add large margins.
      */
.m\+{
    margin: calc(20px * 2) !important;
}

.mt\+{
    margin-top: calc(20px * 2) !important;
}

.mr\+{
    margin-right: calc(20px * 2) !important;
}

.mb\+{
    margin-bottom: calc(20px * 2) !important;
}

.ml\+{
    margin-left: calc(20px * 2) !important;
}

.mh\+{
    margin-right: calc(20px * 2) !important;
    margin-left: calc(20px * 2) !important;
}

/**
      * Add huge margins.
      */
.m\+\+{
    margin: calc(20px * 4) !important;
}

.mt\+\+{
    margin-top: calc(20px * 4) !important;
}

.mr\+\+{
    margin-right: calc(20px * 4) !important;
}

.mb\+\+{
    margin-bottom: calc(20px * 4) !important;
}

.ml\+\+{
    margin-left: calc(20px * 4) !important;
}

.mh\+\+{
    margin-right: calc(20px * 4) !important;
    margin-left: calc(20px * 4) !important;
}

/**
      * Remove margins.
      */
.m0{
    margin: 0 !important;
}

.mt0{
    margin-top: 0 !important;
}

.mr0{
    margin-right: 0 !important;
}

.mb0{
    margin-bottom: 0 !important;
}

.ml0{
    margin-left: 0 !important;
}

/**
      * Negative margins.
      */
.-m{
    margin: calc(20px * -1) !important;
}

.-mt{
    margin-top: calc(20px * -1) !important;
}

.-mr{
    margin-right: calc(20px * -1) !important;
}

.-mb{
    margin-bottom: calc(20px * -1) !important;
}

.-ml{
    margin-left: calc(20px * -1) !important;
}

.-mh{
    margin-right: calc(20px * -1) !important;
    margin-left: calc(20px * -1) !important;
}

.-mv{
    margin-top: calc(20px * -1) !important;
    margin-bottom: calc(20px * -1) !important;
}

/**
      * Tiny negative margins.
      */
.-m--{
    margin: calc(calc(20px / 4) * -1) !important;
}

.-mt--{
    margin-top: calc(calc(20px / 4) * -1) !important;
}

.-mr--{
    margin-right: calc(calc(20px / 4) * -1) !important;
}

.-mb--{
    margin-bottom: calc(calc(20px / 4) * -1) !important;
}

.-ml--{
    margin-left: calc(calc(20px / 4) * -1) !important;
}

.-mh--{
    margin-right: calc(calc(20px / 4) * -1) !important;
    margin-left: calc(calc(20px / 4) * -1) !important;
}

.-mv--{
    margin-top: calc(calc(20px / 4) * -1) !important;
    margin-bottom: calc(calc(20px / 4) * -1) !important;
}

/**
      * Small negative margins.
      */
.-m-{
    margin: calc(calc(20px / 2) * -1) !important;
}

.-mt-{
    margin-top: calc(calc(20px / 2) * -1) !important;
}

.-mr-{
    margin-right: calc(calc(20px / 2) * -1) !important;
}

.-mb-{
    margin-bottom: calc(calc(20px / 2) * -1) !important;
}

.-ml-{
    margin-left: calc(calc(20px / 2) * -1) !important;
}

.-mh-{
    margin-right: calc(calc(20px / 2) * -1) !important;
    margin-left: calc(calc(20px / 2) * -1) !important;
}

.-mv-{
    margin-top: calc(calc(20px / 2) * -1) !important;
    margin-bottom: calc(calc(20px / 2) * -1) !important;
}

/**
      * Large negative margins.
      */
.-m\+{
    margin: calc(calc(20px * 2) * -1) !important;
}

.-mt\+{
    margin-top: calc(calc(20px * 2) * -1) !important;
}

.-mr\+{
    margin-right: calc(calc(20px * 2) * -1) !important;
}

.-mb\+{
    margin-bottom: calc(calc(20px * 2) * -1) !important;
}

.-ml\+{
    margin-left: calc(calc(20px * 2) * -1) !important;
}

.-mh\+{
    margin-right: calc(calc(20px * 2) * -1) !important;
    margin-left: calc(calc(20px * 2) * -1) !important;
}

.-mv\+{
    margin-top: calc(calc(20px * 2) * -1) !important;
    margin-bottom: calc(calc(20px * 2) * -1) !important;
}

/**
      * Huge negative margins.
      */
.-m\+\+{
    margin: calc(calc(20px * 4) * -1) !important;
}

.-mt\+\+{
    margin-top: calc(calc(20px * 4) * -1) !important;
}

.-mr\+\+{
    margin-right: calc(calc(20px * 4) * -1) !important;
}

.-mb\+\+{
    margin-bottom: calc(calc(20px * 4) * -1) !important;
}

.-ml\+\+{
    margin-left: calc(calc(20px * 4) * -1) !important;
}

.-mh\+\+{
    margin-right: calc(calc(20px * 4) * -1) !important;
    margin-left: calc(calc(20px * 4) * -1) !important;
}

.-mv\+\+{
    margin-top: calc(calc(20px * 4) * -1) !important;
    margin-bottom: calc(calc(20px * 4) * -1) !important;
}

/**
      * Padding helper classes.
      *
      * Add paddings.
      */
.p{
    padding: 20px !important;
}

.pt{
    padding-top: 20px !important;
}

.pr{
    padding-right: 20px !important;
}

.pb{
    padding-bottom: 20px !important;
}

.pl{
    padding-left: 20px !important;
}

.pt--{
    padding-top: calc(20px / 4) !important;
}

/**
      * Add small paddings.
      */
.p-{
    padding: calc(20px / 2) !important;
}

/**
      * Add large paddings.
      */
.p\+{
    padding: calc(20px * 2) !important;
}

.pt\+{
    padding-top: calc(20px * 2) !important;
}

.pr\+{
    padding-right: calc(20px * 2) !important;
}

.pb\+{
    padding-bottom: calc(20px * 2) !important;
}

.pl\+{
    padding-left: calc(20px * 2) !important;
}

/**
      * Add huge paddings.
      */
.p\+\+{
    padding: calc(20px * 4) !important;
}

.pt\+\+{
    padding-top: calc(20px * 4) !important;
}

.pr\+\+{
    padding-right: calc(20px * 4) !important;
}

.pb\+\+{
    padding-bottom: calc(20px * 4) !important;
}

.pl\+\+{
    padding-left: calc(20px * 4) !important;
}

.pr0{
    padding-right: 0 !important;
}

.pl0{
    padding-left: 0 !important;
}
/*# sourceMappingURL=app.css.map */
/*---------------Calendar-----------*/
.audit-calendar-header{
    width: 100%;
    margin-top: auto;
    margin-bottom: 5px;
    color: #fff;
}

.audit-calendar-header-row{
    display: flex;
    align-items: center;
    justify-content: start;
}

.audit-dates{
    width: 100%;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: auto;
}

.audit-lightblue-text{
    color: #abdedf;
}

.audit-lightred-text{
    color: #e41f1f;
}

.audit-sunday-text-color{
    color: #f17373;
    cursor: default !important;
}

    .audit-sunday-text-color:hover{
        background-color: transparent !important;
        color: #f17373 !important;
    }

.audit-current-date-background{
    background-color: #2c6a94;
}

.audit-w-10-center-center{
    width: 10%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.audit-day-wrapper{
    width: 10%;
    height: calc((100vw - 80px) * 0.3 *0.07);
    align-items: center;
    justify-content: center;
    display: flex;
    box-sizing: border-box;
}

.audit-day-cell{
    width: 90%;
    height: 90%;
    text-align: center;
    box-sizing: border-box;
    border-radius: 60%;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 2px;
    cursor: pointer;
}

    .audit-day-cell:hover{
        background-color: #8eadbd;
        color: #5ec8c9; /* #cf571d;*/
    }

    .audit-day-cell span{
        height: 16px;
        line-height: 16px;
    }

.audit-month-year{
    font-size: 28px;
    color: #000;
    margin: auto;
    cursor: pointer;
}

    .audit-month-year:hover{
        color: #5ec8c9;
    }
/*---------------!Calendar-----------*/
/*---------------Calendar picker-----------*/
.calendar-anchor-container{
    position: relative;
    display: inline-block;
}

.audit-calendar-picker-freeze-layer{
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(25, 56, 58, 0.57);
    z-index: 9001;
    overflow-y: auto;
    cursor: pointer;
}

.audit-calendar-picker-wrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9001;
}

.audit-calendar-picker-card{
    border-radius: 10px !important;
    position: relative;
    top: 30%;
    width: 100%;
    z-index: 9010;
    margin-right: auto !important;
    margin-left: auto !important;
    background-color: #121212db !important;
}

.audit-calendar-picker-card-body{
    width: 80%;
    margin: auto;
    padding: 5px;
}
/*---------------!Calendar picker-----------*/
.small-calendar__body{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 30px 30px 30px 30px 30px 30px 30px;
}

    .small-calendar__body .cell{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
    }

        .small-calendar__body .cell span{
            min-width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

    .small-calendar__body .cell--today span{
        color: red;
    }

    .small-calendar__body .cell--current span{
        background-color: #387fb5;
        color: #fff;
    }

    .small-calendar__body .cell.cell--gray{
        color: #7e8387;
        font-weight: 400;
    }

    .small-calendar__body .cell.cell--teal{
        color: cadetblue;
    }

    .small-calendar__body .cell--finished span{
        background-color: #07d965;
        color: #fff;
    }

    .small-calendar__body .cell span:hover{
        background-color: #0e6ffa;
    }

    .my-calendars .my-calendars-header.is-active svg{
        transform: rotate(180deg);
    }
.button--green-circle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 25px;
    width: 25px;
    text-decoration: none;
    background-color: #408DFB;
    border-radius: 50%;
}

    .button--green-circle:not(:disabled):hover, .button--green-circle:not(:disabled):focus, .button--green-circle:not(:disabled):active{
        background-color: #0e6ffa;
    }

    .button--green-circle img{
        height: 60%;
        width: auto;
    }

.button--red-circle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 25px;
    width: 25px;
    text-decoration: none;
    background-color: #e50000;
    border-radius: 50%;
}

    .button--red-circle:not(:disabled):hover, .button--red-circle:not(:disabled):focus, .button--red-circle:not(:disabled):active{
        background-color: #740000;
    }

    .button--red-circle img{
        height: 60%;
        width: auto;
    }
/******************** PDF ********************/
.video-container{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

    .video-container iframe, .video-container object, .video-container embed{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
/******************** PDF ********************/

.button-tooltip{
    position: relative;
    z-index: 4;
}

    .button-tooltip span{
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 3;
        top: 100%;
        left: 50%;
        margin-left: -15px;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 18px;
        padding: 5px;
    }

    .button-tooltip:hover span{
        visibility: visible;
        opacity: 1;
    }

.button-tooltip-right{
    position: relative;
    z-index: 4;
}

    .button-tooltip-right span{
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 3;
        top: 100%;
        left: 50%;
        margin-left: -235px;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 18px;
        padding: 5px;
    }

    .button-tooltip-right:hover span{
        visibility: visible;
        opacity: 1;
    }

/* ========================================= */
/* MERGED FROM: LoaderStyle.css               */
/* ========================================= */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bee-loader-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background: #6d9f8a9e;
    z-index: 9999;
}

.bee-loader-wrapper-JS{
    display: none;
}

.bee-loader-wrapper-JS-show{
    display: flex;
}

.bee-loader{
    position: relative;
    width: 200px;
    height: 200px;
}

    .bee-loader span{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotate(calc(18deg * var(--i)));
    }

        .bee-loader span::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            background: #ddc729;
            border-radius: 50%;
            transform: scale(0);
            animation: bee-loader_animate 2s linear infinite;
            animation-delay: var(--d);
        }

@keyframes bee-loader_animate {
    0% {
        transform: scale(0);
    }

    10% {
        transform: scale(1.2);
    }

    80%,100% {
        transform: scale(0);
    }
}

.bee-loader-icon{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: bee-loader_rotating 2s linear infinite;
    animation-delay: -1s;
}

@keyframes bee-loader_rotating {
    0% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(370deg);
    }
}

.bee-loader-icon::before{
    content: url('/images/pig.png');
    position: absolute;
    top: 150px;
    left: 175px;
    transform: rotate(251deg);
}



/* ========================================= */
/* MERGED FROM: wine2d3.css                   */
/* ========================================= */



.img-size-64, .img-size-18{
    height: auto;
}

.img-size-18{
    width: 28px;
}

.cursor-pointer{
    cursor: pointer !important;
}


/*---------------Loader---------------*/
.spinner-container{
    width: 100%;
    margin: 30px 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner{
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #299d9e;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}


.cursor-pointer{
    cursor: pointer !important;
}


.table tr.blue-row{
    outline: 2px solid #21263c;
    outline-offset: -2px; /* da uđe "unutra" */
}

.table tr td{
    /*font-weight: 500;*/
    /*background-color: #EDAD51;*/
    /*color: white;*/
    padding-left: 6px;
    padding-right: 6px;
}

.table tbody tr.blue-row{
    /*transform: scale(1.01);*/
    /*box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);*/
}

.table tr.green-row td{
    /*font-weight: 500;*/
    background-color: lightgreen;
    /*color: white;*/
}

.table tbody tr.green-row{
    /*transform: scale(1.01);*/
    /*box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);*/
}

.table tr.red-row td{
    /*font-weight: 500;*/
    /*background-color: lightcoral;*/
    /*color: white;*/
}

.table tbody tr.red-row{
    /*transform: scale(1.01);*/
    /*box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);*/
}



/*---------------SweetAlert---------------*/
.swal2-container{
    z-index: 9999 !important;
}
/*---------------SweetAlert---------------*/


/******************** blazored-toast ********************/
.blazored-toast-container{
    z-index: 9999 !important;
}
/******************** blazored-toast ********************/

.border-bottom-teal{
    border-bottom: 1.5px solid #000000;
}

.w-50{
    width: 50%;
}

.h-30{
    height: 30%;
}

.h-50{
    height: 50%;
}

.w-30-px{
    width: 30px;
}


.table--vessels .line--white{
    background-color: white;
    border-color: black;
    border: solid;
    border-width: thin;
}

.border-black{
    border-color: black;
    border: solid;
    border-width: thin;
}

.selected-row-text{
    color: #f3f3f3 !important;
    background-color: #408dfb;
    border-radius: 8px;
    padding: 10px;
    font-size: 17px !important;
}

.li-selected-row-text{
    position: sticky;
    top: 0;
}

/*---------------Pagination---------------*/

.pagination-select{
    border-radius: 22px;
    background-color: #f5f5f5;
    border: 1px solid #76c6c7;
    height: 30px;
    text-align: center;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
    margin: 2px;
}

.number-wrapper{
    height: 30px;
    border-radius: 22px;
    color: #444444;
    background-color: #d8d8d9;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 14px;
    white-space: nowrap;
    margin: 2px;
}

.button--blue-circle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 25px;
    width: 25px;
    text-decoration: none;
    background-color: #408dfb;
    border-radius: 50%;
    margin: 2px;
}

    .button--blue-circle:not(:disabled):hover, .button--blue-circle:not(:disabled):focus, .button--blue-circle:not(:disabled):active{
        background-color: #265291;
    }

    .button--blue-circle img{
        height: 60%;
        width: auto;
    }

/*---------------Pagination---------------*/


.select{
    /*width: 100%;*/
    border: 1px solid #D9D9D9;
    border-radius: 8px !important;
    font-size: 14px !important;
    height: 32px;
}

select:focus{
    border: 1px solid black !important;
}


/******************** Switch ********************/
.switch-input-wrapper label{
    display: inline-block;
    position: relative;
    height: 30px;
    width: 60px;
    background-color: #fb1919;
    cursor: pointer;
    font-size: 0;
    color: transparent;
    border-radius: 22px;
    transition: background-color 500ms ease;
}

    .switch-input-wrapper label:after{
        content: '';
        display: block;
        height: 26px;
        width: 26px;
        position: absolute;
        top: 2px;
        right: 32px;
        border-radius: 50%;
        background-color: #e8e8e8;
        box-shadow: 2px 0px 0px rgba(0, 0, 0, 0.15);
        transition: right 500ms ease, background-color 500ms ease, box-shadow 500ms ease;
    }

.switch-input-wrapper input:checked + label{
    background: #408dfb;
}

    .switch-input-wrapper input:checked + label:after{
        right: 2px;
        background-color: #fff;
        box-shadow: -2px 0px 0px rgba(0, 0, 0, 0.1);
    }

.switch-input-wrapper input{
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    bottom: 0;
}

.switch-input-box label{
    line-height: 44px;
    vertical-align: middle;
}

.switch-input-wrapper span{
    position: relative;
    top: -46px;
    left: 0;
    font-size: 12px;
    letter-spacing: 1px;
    color: #095a55;
    font-weight: 500;
}

.switch-input-wrapper{
    cursor: pointer;
    height: 32px;
}
/******************** Switch ********************/
/*---------------AUDIT---------------*/
/*---------------Calendar-----------*/
.audit-calendar-header{
    width: 100%;
    margin-top: auto;
    margin-bottom: 5px;
    color: #fff;
}

.audit-calendar-header-row{
    display: flex;
    align-items: center;
    justify-content: start;
}

.audit-dates{
    width: 100%;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: auto;
}

.audit-lightblue-text{
    color: #abdedf;
}

.audit-lightred-text{
    color: #e41f1f;
}

.audit-sunday-text-color{
    color: #f17373;
    cursor: default !important;
}

    .audit-sunday-text-color:hover{
        background-color: transparent !important;
        color: #f17373 !important;
    }

.audit-current-date-background{
    background-color: #408dfb;
}

.audit-w-10-center-center{
    width: 10%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.audit-day-wrapper{
    width: 10%;
    height: calc((100vw - 80px) * 0.3 *0.07);
    align-items: center;
    justify-content: center;
    display: flex;
    box-sizing: border-box;
}

.audit-day-cell{
    width: 90%;
    height: 90%;
    text-align: center;
    box-sizing: border-box;
    border-radius: 60%;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 2px;
    cursor: pointer;
}

    .audit-day-cell:hover{
        background-color: #8eadbd;
        color: #5ec8c9; /* #cf571d;*/
    }

    .audit-day-cell span{
        height: 16px;
        line-height: 16px;
    }

.audit-month-year{
    font-size: 28px;
    color: #000;
    margin: auto;
    cursor: pointer;
}

    .audit-month-year:hover{
        color: #5ec8c9;
    }


/*---------------!Calendar-----------*/
/*---------------Calendar picker-----------*/
.audit-calendar-picker-freeze-layer{
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(25, 56, 58, 0.57);
    z-index: 9001;
    overflow-y: auto;
    cursor: pointer;
}

.audit-calendar-picker-wrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9001;
}

.audit-calendar-picker-card{
    border-radius: 10px !important;
    position: relative;
    top: 30%;
    width: 250px;
    z-index: 9010;
    margin-right: auto !important;
    margin-left: auto !important;
    background-color: #121212db !important;
}

.audit-calendar-picker-card-body{
    width: 70%;
    margin: auto;
    padding: 5px;
}
/*---------------!Calendar picker-----------*/
/*---------------AUDIT---------------*/
/******************** Popup ********************/
.select-content{
    position: absolute;
    width: 100%;
    padding: 5px;
    height: 300px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #6660;
    box-shadow: 7px 10px 18px 0px rgba(150,150,150,0.79);
    z-index: 100;
    transition: all .5s ease-in-out;
    transform-origin: left top;
    transform: scaleY(0);
}

.select-content-show{
    transform: scaleY(1);
}
/*---------------!Signature-----------*/

/*---------------Popup-----------*/
.popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9000;
    transition: all 0.3s ease;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

    .popup.is-active{
        visibility: visible;
        opacity: 1;
        pointer-events: all;
    }

        .popup.is-active .close-popup{
            visibility: visible;
            opacity: 1;
        }

        .popup.is-active .popup__content{
            transform: translate(0, 0);
        }

    .popup.popup--big .close-popup{
        left: 95% /*20px*/;
    }

    .popup.popup--big .popup__content{
        max-width: 95% /*1825px*/;
    }

.popup__overlay{
    background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 1;
}

.close-popup{
    position: absolute;
    left: 856px;
    top: 0;
    transform: translate(-60%, 50%);
    z-index: 10;
    transition: background-color 0.3s ease, visibility .3s ease .5s, opacity .3s ease .5s;
    visibility: hidden;
    opacity: 0;
}

.popup__content{
    position: absolute;
    left: 0;
    top: 10px;
    z-index: 2;
    height: calc(100% - 20px);
    width: 100%;
    max-width: 856px;
    background-color: #f1f1f1;
    border: 1px solid #3aadae;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    transition: all 0.3s ease .5s;
    transform: translate(-100%, 0);
}
    /*.popup__content .cart {
    margin-bottom: 10px; }*/
    .popup__content .cart__body{
        /* border-top: 1px solid #069c9e;
    padding: 15px 15px 0;
    margin-top: 10px;*/
    }

    .popup__content .cart__footer{
        /*  border-top: 1px solid #069c9e;
    padding: 15px 15px 0;
    margin-top: 10px; */
    }

    .popup__content .cart--accordion .cart__header a{
        display: block;
        width: 100%;
        text-decoration: none;
        position: relative;
    }

    .popup__content .cart--accordion .cart__header img{
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        transition: all .3s ease;
    }

    .popup__content .cart--accordion .cart__header.is-active img{
        transform: translate(0, -50%) rotate(180deg);
    }


.button--red-circle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 25px;
    width: 25px;
    text-decoration: none;
    background-color: #e50000;
    border-radius: 50%;
}

    .button--red-circle:not(:disabled):hover, .button--red-circle:not(:disabled):focus, .button--red-circle:not(:disabled):active{
        background-color: #740000;
    }

    .button--red-circle img{
        height: 60%;
        width: auto;
    }

.button--red-circle-big{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 40px;
    width: 40px;
    text-decoration: none;
    background-color: #e50000;
    border-radius: 50%;
}

    .button--red-circle-big:not(:disabled):hover, .button--red-circle:not(:disabled):focus, .button--red-circle:not(:disabled):active{
        background-color: #740000;
    }

    .button--red-circle-big img{
        height: 60%;
        width: auto;
    }

.cart__header{
    margin: 0px 10px;
}

.cart__body{
    padding: 0px 10px;
}

/*---------------!Popup-----------*/


.button--blue-circle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 25px;
    width: 25px;
    text-decoration: none;
    background-color: #408dfb;
    border-radius: 50%;
}

    .button--blue-circle:not(:disabled):hover, .button--blue-circle:not(:disabled):focus, .button--blue-circle:not(:disabled):active{
        background-color: #4f8685;
    }

    .button--blue-circle img{
        height: 60%;
        width: auto;
    }

.w30{
    width: 30px;
}

.attachment-box{
    border: 1px solid #ddd;
    padding: 10px;
    background: #fafafa;
}

.attachment-image{
    max-width: 100%;
    max-height: 300px;
    border: 1px solid #ccc;
}



.img-host{
    position: relative;
    width: 100%;
    user-select: none;
    touch-action: none; /* bitno za pointer na touch uređajima */
}

.selection-rect{
    position: absolute;
    border: 2px solid #00a3ff;
    background: rgba(0,163,255,0.15);
    pointer-events: none;
}

.cart_header_icon {
    height: 18px;
    transition: all 0.5s;
}

.cart_header_icon_rotation {
    transform: rotate(180deg);
}

.filter-btn:hover svg path,
.filter-btn:focus svg path,
.filter-btn:focus-visible svg path {
    stroke: #fff !important;
}
/* Requisition Item Picking Progress Bars */
.picking-cell {
    text-align: right !important;
    padding-right: 10px !important;
    vertical-align: middle !important;
}

.picking-progress-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 140px;
}

.picking-progress-value {
    font-weight: 500;
    font-size: 1.05em;
}

.picking-progress-percentage {
    font-size: 0.8em;
    font-weight: 600;
    margin-top: 2px;
}

.picking-progress-wrapper {
    width: 100%;
    max-width: 150px;
    background-color: #e9ecef;
    border-radius: 4px;
    height: 6px;
    position: relative;
    margin-top: 2px;
    overflow: hidden;
}

.picking-progress-wrapper.transparent {
    background-color: transparent;
}

.picking-progress-bar {
    height: 100%;
    border-radius: 4px;
    position: absolute;
    left: 0;
}

.picking-progress-bar.overflow {
    left: auto;
    right: 0;
    opacity: 0.85;
}


/* Transport Note Component Elements */
.tn-regions {
    font-weight: 500;
    max-width: 250px;
}

.tn-subtext {
    font-size: 0.85em; 
    color: #888;
}

.tn-progress-container {
    width: 100%;
    max-width: 250px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.tn-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: #000000;
    padding: 0 2px;
}

.tn-progress-wrapper {
    width: 100%;
    background-color: #e9ecef;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    position: relative;
}

.tn-progress-wrapper.mt-2px {
    margin-top: 2px;
}

.tn-progress-bar {
    height: 100%;
    border-radius: 4px;
    position: absolute;
}

.tn-progress-bar.drive {
    background-color: #17a2b8;
}

.tn-progress-bar.delivery {
    background-color: #28a745;
}

.tn-mass-cell {
    min-width: 130px;
}

.tn-mass-header {
    font-size: 0.9em;
    margin-bottom: 4px;
}

.tn-mass-wrapper {
    width: 100%;
    max-width: 250px;
    background-color: #e9ecef;
    border-radius: 4px;
    height: 8px;
    margin-bottom: 6px;
    overflow: hidden;
}

.tn-mass-bar {
    height: 100%;
    border-radius: 4px;
}

.tn-creator-name {
    font-size: 0.9em;
    font-weight: 500;
}

/* ============================================================
   FoodPlanner — stilovi za menadžerski planer nabavke hrane
   ============================================================ */

/* --- Slajderi sa vidljivom trakom i tačkom (chrome + firefox) --- */
.planner-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 9px;
    background: linear-gradient(to right,
        #185FA5 0%,
        #185FA5 var(--planner-fill, 50%),
        #d8d8d8 var(--planner-fill, 50%),
        #d8d8d8 100%);
    border-radius: 5px;
    outline: none;
    flex: 1;
    cursor: pointer;
    margin: 10px 0;
}
.planner-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #185FA5;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}
.planner-slider::-moz-range-track {
    height: 9px;
    background: #d8d8d8;
    border-radius: 5px;
}
.planner-slider::-moz-range-progress {
    height: 9px;
    background: #185FA5;
    border-radius: 5px;
}
.planner-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #185FA5;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

/* --- KPI cards: uvek u jednom redu, jednake širine --- */
.planner-kpi-row {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}
.planner-kpi-row > div {
    flex: 1 1 0;
    min-width: 0;
}

/* --- Dvokolonski red (Zalihe + Alarmi): jednake širine, wrap na uskim ekranima --- */
.planner-two-col {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.planner-two-col > div {
    flex: 1 1 350px;
    min-width: 0;
}

/* --- KPI card sadržaj --- */
.planner-kpi-card {
    text-align: center;
}
.planner-kpi-value {
    font-size: 28px;
    font-weight: 600;
}
.planner-kpi-value--blue { color: #185FA5; }
.planner-kpi-value--green { color: #3B6D11; }
.planner-kpi-value--orange { color: #854F0B; }
.planner-kpi-value--red { color: #A32D2D; }
.planner-kpi-sub {
    font-size: 11px;
    color: #888;
}

/* --- Stock coverage bar --- */
.planner-stock-row {
    margin-bottom: 10px;
}
.planner-stock-row__head {
    font-size: 12px;
    margin-bottom: 3px;
}
.planner-stock-row__badge {
    padding: 1px 7px;
    border-radius: 7px;
    font-size: 11px;
}
.planner-stock-row__track {
    height: 6px;
    background: #eee;
    border-radius: 3px;
}
.planner-stock-row__fill {
    height: 6px;
    border-radius: 3px;
}

/* --- Alarmi --- */
.planner-alarm {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 6px;
    border: 1px solid;
}
.planner-alarm--ok {
    background: #EAF3DE;
    border-color: #97C459;
    color: #27500A;
    font-size: 13px;
}
.planner-alarm--critical {
    background: #FCEBEB;
    border-color: #F09595;
    color: #791F1F;
}
.planner-alarm--warning {
    background: #FAEEDA;
    border-color: #EF9F27;
    color: #633806;
}

/* --- Tabele planera --- */
.planner-table-wrap {
    overflow-x: auto;
}
.planner-table tr.total {
    background: #f6f6f6;
    font-weight: 600;
}
.planner-price-input {
    width: 80px !important;
    text-align: right;
    padding: 0 6px;
}

/* --- Found-info pomoćni tekst --- */
.planner-hint {
    font-size: 11px;
    color: #888;
}

/* --- Pill labele za status (koriste i FoodPlanner i AnimalPlanner) --- */
.p-ok, .p-warn, .p-info, .p-danger {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}
.p-ok { background: #EAF3DE; color: #3B6D11; }
.p-warn { background: #FAEEDA; color: #854F0B; }
.p-info { background: #E6F1FB; color: #185FA5; }
.p-danger { background: #FCEBEB; color: #A32D2D; }

/* ============================================================
   Planeri (Animal + Food) — vizuelno poravnanje sa ostatkom aplikacije
   (scope-ovano na .planner-page da ne dira ostale .card/.ct van planera)
   ============================================================ */

/* Naslov kartice/sekcije — kao kućni border-bottom-teal header */
.planner-page .ct {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1.5px solid #000;
}

/* Podnaslovi u Parametri kartici (h3) — isti teal-underline stil */
.planner-page h3 {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    border-bottom: 1.5px solid #000;
    padding-bottom: 4px;
    margin-bottom: 10px;
}

/* KPI kartice — izgled kao Dashboard KPI (bela kartica, levi akcenat, meka senka) */
.planner-page .planner-kpi-row > div { flex: 1 1 190px; min-width: 190px; }
.planner-page .planner-kpi-card {
    text-align: left;
    background: #fff;
    border-radius: 14px;
    padding: 18px 18px 16px 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-left: 4px solid #94a3b8;
}
.planner-page .planner-kpi-card--blue   { border-left-color: #185FA5; }
.planner-page .planner-kpi-card--green  { border-left-color: #3B6D11; }
.planner-page .planner-kpi-card--orange { border-left-color: #854F0B; }
.planner-page .planner-kpi-card--red    { border-left-color: #A32D2D; }
/* KPI labela — Dashboard stil (uppercase, sivo), bez title border-a */
.planner-page .planner-kpi-card .ct {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 12px;
}
.planner-page .planner-kpi-value {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}
.planner-page .planner-kpi-sub {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
}

/* Tasks — grid kartica + lista (zamenjuje inline stilove) */
.planner-page .planner-task-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.planner-page .planner-task-grid > div { flex: 1 1 280px; min-width: 280px; }
.planner-page .planner-task-list {
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
    color: #555;
    line-height: 1.7;
}

/* Chart container (zamenjuje inline height) */
.planner-page .planner-chart-wrap {
    position: relative;
    height: 280px;
}

/* --- Veterinarski protokoli --- */

/* Phase timeline — vizuelni bar 4 faze tova (karantin / faza1 / faza2+3 / karenca) */
.vet-phase-timeline {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.vet-phase {
    padding: 10px 12px;
    font-size: 12px;
    text-align: center;
}
.vet-phase__name { font-weight: 600; }
.vet-phase__sub { font-size: 11px; opacity: 0.8; }
.vet-phase--quarantine { background: #E6F1FB; color: #0C447C; flex: 1; }
.vet-phase--ph1        { background: #EAF3DE; color: #27500A; flex: 2; }
.vet-phase--ph23       { background: #FAEEDA; color: #633806; flex: 1.5; }
.vet-phase--karenca    { background: #FCEBEB; color: #791F1F; flex: 0.5; }

/* Karenca duration pill (auto-color po danima) */
.vet-pill-days-short, .vet-pill-days-mid, .vet-pill-days-long {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}
.vet-pill-days-short  { background: #EAF3DE; color: #27500A; }
.vet-pill-days-mid    { background: #FAEEDA; color: #633806; }
.vet-pill-days-long   { background: #FCEBEB; color: #791F1F; }

/* Calendar / checklist row sa labelom levo i pillom desno */
.vet-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    gap: 8px;
}
.vet-row:last-child { border-bottom: none; }
.vet-row-label { color: #555; flex-shrink: 0; }



/* ============================================================
 * TIMELINE — vertikalni rail sa colored dots, date headers,
 * event cards, user avatar pills i diff prikazom.
 * Koristi se prvenstveno u DocumentDmsTimeline, ali je generic
 * pa može da se reuse-uje za bilo koji event/activity log.
 * ============================================================ */

.timeline-rail {
    position: relative;
    padding-left: 40px;
}

.timeline-rail::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 24px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, #e6e8ec 0%, #e6e8ec 95%, transparent 100%);
    z-index: 0;
}

.timeline-date-header {
    position: relative;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8a93a3;
    font-weight: 700;
    margin: 14px 0 10px -40px;
    padding-left: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeline-date-header:first-child {
    margin-top: 0;
}

.timeline-date-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eef0f4;
}

.timeline-item {
    position: relative;
    margin-bottom: 14px;
}

.timeline-dot {
    position: absolute;
    left: -39px;
    top: 4px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 0 0 4px #fff, 0 1px 3px rgba(0,0,0,0.08);
    z-index: 1;
}

.timeline-body {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    padding: 10px 12px;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.timeline-body:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-color: #d8dde5;
}

.timeline-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.timeline-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.timeline-time {
    font-size: 11px;
    color: #8a93a3;
    white-space: nowrap;
    cursor: help;
}

.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}

.timeline-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f7f9fc;
    border: 1px solid #eef0f4;
    padding: 2px 8px 2px 2px;
    border-radius: 12px;
    font-size: 11px;
    color: #4a5161;
}

.timeline-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

.timeline-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e6f1fb;
    color: #0c447c;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.timeline-diff {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f7f9fc;
    border: 1px solid #eef0f4;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.timeline-diff .old-val {
    color: #A32D2D;
    text-decoration: line-through;
    opacity: 0.7;
}

.timeline-diff .arrow {
    color: #8a93a3;
    font-weight: bold;
}

.timeline-diff .new-val {
    color: #27500A;
    font-weight: 600;
}

.timeline-comment {
    margin-top: 8px;
    padding: 8px 10px;
    background: #f7f9fc;
    border-left: 3px solid #408DFB;
    border-radius: 0 4px 4px 0;
    color: #4a5161;
    font-size: 13px;
    font-style: italic;
    line-height: 1.4;
}

.timeline-comment::before {
    content: '"';
    color: #408DFB;
    font-weight: bold;
    margin-right: 2px;
}

.timeline-comment::after {
    content: '"';
    color: #408DFB;
    font-weight: bold;
    margin-left: 2px;
}

.timeline-empty {
    text-align: center;
    padding: 40px 20px;
    color: #8a93a3;
}

.timeline-empty svg {
    opacity: 0.35;
    margin-bottom: 12px;
}

/* ============================================================
 * BTN-PRINT — dugme za PDF stampu (hodogram, istorija naloga...).
 * Soft-blue "ghost" stil uskladjen sa .button--secondary i plavim
 * refresh ikonom pored kog stoji (isti akcenat #408DFB, radius 8px,
 * Inter 12px). Ikonica nasledjuje boju teksta (currentColor) pa
 * prati hover. Hover popunjava punom plavom + suptilna senka.
 * Drop-in svuda gde stoji "Stampaj PDF".
 * ============================================================ */

.btn-print {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 13px;
    color: #0e6ffa;
    background: #eef5ff;
    border: 1px solid #cfe2fe;
    border-radius: 8px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .btn-print svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        flex-shrink: 0;
    }

    .btn-print:not(:disabled):hover, .btn-print:not(:disabled):focus {
        color: #fff;
        background: #408DFB;
        border-color: #408DFB;
        box-shadow: 0 4px 12px rgba(64, 141, 251, 0.28);
        transform: translateY(-1px);
    }

    .btn-print:not(:disabled):active {
        transform: translateY(0);
        box-shadow: none;
    }

/* ============================================================
 * AVATAR CLUSTER — kompaktan prikaz vise korisnika u redu tabele
 * (preklapaju ce circle avatari sa inicijalima + "+N" za vise).
 * Koristi se npr. u AnimalInputNote-Component za prikaz ucesnika
 * dokumenta. Generic, moze i drugde gde ima vise vezanih usera.
 * ============================================================ */

.avatar-cluster {
    display: inline-flex;
    align-items: center;
}

.avatar-cluster__item {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
    margin-left: -8px;
    cursor: help;
    flex-shrink: 0;
    line-height: 1;
    white-space: pre-line;
}

.avatar-cluster__item:first-child {
    margin-left: 0;
}

.avatar-cluster__more {
    background: #e6e8ec;
    color: #555;
    font-weight: 600;
}

/* ============================================================
 * TASK COUNT CLUSTER — male obojene chip-ice sa brojem zadataka
 * po kategoriji (zavrseni / aktivni / probijen rok). Koristi se
 * u list-tabelama dokumenata (AnimalInputNote-Component, mozda i
 * druge u buducnosti) da se na prvi pogled vidi stanje zadataka.
 * ============================================================ */

.task-count-cluster {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    white-space: pre-line; /* da tooltip moze multi-line */
}

.task-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    line-height: 1.2;
    white-space: pre-line;
}

.task-count--done {
    background: #EAF3DE;
    color: #27500A;
}

.task-count--upcoming {
    background: #FAEEDA;
    color: #633806;
}

.task-count--overdue {
    background: #FCEBEB;
    color: #A32D2D;
}

/* ============================================================
 * TASK CARD GRID — kartice za zadatke u DocumentDmsTasks
 * (TaskActionBar). Svaka kartica je clickable, sa border-left
 * indikatorom stanja, status-icon krugom, hover effect-om i
 * chevron strelicom desno. Reusable za bilo koji list zadataka.
 * ============================================================ */

.task-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 10px;
}

.task-card {
    background: #fff;
    border: 1px solid #eef0f4;
    border-left: 4px solid #ccc;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.task-card--open        { border-left-color: #408DFB; }
.task-card--inprogress  { border-left-color: #D4A017; }
.task-card--overdue     { border-left-color: #A32D2D; }
.task-card--completed   { border-left-color: #27AE60; }
.task-card--reassigned  { border-left-color: #5B7DB1; }
.task-card--returned    { border-left-color: #A32D2D; }
.task-card--notmine     { border-left-color: #6A6A6A; }

.task-card:hover {
    border-color: #b8c2cf;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.task-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.task-card__body {
    flex: 1;
    min-width: 0;
}

.task-card__title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1f2c;
    line-height: 1.3;
    margin-bottom: 5px;
    word-break: break-word;
}

.task-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6a7180;
}

.task-card__status {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 11px;
}

.task-card__sep {
    color: #c0c5cf;
    font-weight: bold;
}

.task-card__assignee {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.task-card__avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.task-card__due--overdue {
    color: #A32D2D;
    font-weight: 600;
}

.task-card__priority {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.task-card__priority--high {
    background: #FAEEDA;
    color: #633806;
}

.task-card__priority--urgent {
    background: #FCEBEB;
    color: #A32D2D;
}

.task-card__chevron {
    color: #c0c5cf;
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: -2px;
    transition: color 0.15s, transform 0.15s;
}

.task-card:hover .task-card__chevron {
    color: #408DFB;
    transform: translateX(3px);
}

/* ============================================================
 * PHOTO GALLERY — krupni thumbnail-ovi sa task chip-om, datumom,
 * GPS/kamera badge-ima i komentarom. Koristi se u DocumentDmsPhotos
 * komponenti. Klik na karticu otvara punu sliku u novom tabu.
 * ============================================================ */

.photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.photo-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.photo-card:hover {
    border-color: #b8c2cf;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.photo-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f0f3f7;
    overflow: hidden;
}

.photo-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-card__badges {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
}

.photo-card__badge {
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
    cursor: help;
}

.photo-card__badge--primary {
    background: rgba(247, 195, 47, 0.95);
    color: #4a3500;
    font-weight: 700;
}

.photo-card__body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.photo-card__task {
    display: inline-block;
    background: #e6f1fb;
    color: #0c447c;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    align-self: flex-start;
    margin-bottom: 2px;
    word-break: break-word;
    max-width: 100%;
}

.photo-card__date {
    font-size: 11px;
    color: #6a7180;
    font-weight: 500;
}

.photo-card__comment {
    font-size: 12px;
    color: #1a1f2c;
    line-height: 1.4;
    margin-top: 4px;
    padding: 6px 8px;
    background: #f7f9fc;
    border-left: 3px solid #408DFB;
    border-radius: 0 4px 4px 0;
    font-style: italic;
    word-break: break-word;
}

.photo-card__file-info {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px dashed #eef0f4;
    font-size: 10px;
    color: #8a93a3;
}

.photo-card__filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.photo-card__filesize {
    flex-shrink: 0;
}

.photo-gallery-empty {
    text-align: center;
    padding: 40px 20px;
    color: #8a93a3;
}

.photo-gallery-empty svg {
    opacity: 0.35;
    margin-bottom: 12px;
}

/* Kompaktno prazno stanje galerije: ikonica i poruka u jednom redu umesto bloka od 180px.
   Prazna galerija ne treba da zauzima prostor sekcijama ispod nje. */
.photo-gallery-empty--compact {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    padding: 10px 13px;
    background: #f8fafc;
    border: 1px dashed #dbe3ec;
    border-radius: 10px;
}

.photo-gallery-empty--compact svg {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* ----- mali badge za prikaz broja slika u listinim tabelama ----- */
.photo-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f3e6ff;
    color: #5a2d82;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
}

/* Inline thumbnail za AttachmentAdded evente u timeline-u.
 * Mala slika ispod komentara — klik otvara punu sliku u novom tabu. */
.timeline-thumb {
    display: inline-block;
    margin-top: 8px;
    text-decoration: none;
}

.timeline-thumb img {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eef0f4;
    transition: transform 0.15s, box-shadow 0.15s;
    display: block;
}

.timeline-thumb:hover img {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-color: #408DFB;
}

/* Label iznad timeline-comment quote bloka — naglašava da je sledeći blok
 * korisnikov komentar (a ne npr. task prefix ili metadata). */
.timeline-comment-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8a93a3;
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 2px;
}

.timeline-comment-label + .timeline-comment {
    margin-top: 0;
}

/* Wrap-up container za vise inline thumbnail-a u jednom timeline eventu
 * (npr. Complete event spojen sa 2-3 uploaded slike u istom trenutku). */
.timeline-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.timeline-thumbs .timeline-thumb {
    margin-top: 0;
}

/* ============================================================
 * PHOTO MODAL — lightbox za pregled slika sa info panelom desno
 * i ←/→ navigacijom. Renderuje se preko popup popup--big shell-a
 * koji je već u app-u (zbog konzistentnosti sa drugim modal-ima).
 * ============================================================ */

.photo-modal {
    max-width: 1400px;
    margin: 0 auto;
}

.photo-modal__main {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 12px;
}

.photo-modal__image-wrap {
    flex: 2 1 480px;
    min-width: 320px;
    background: #f0f3f7;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.photo-modal__image-wrap a {
    display: block;
    line-height: 0;
}

.photo-modal__image {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

.photo-modal__info {
    flex: 1 1 280px;
    min-width: 280px;
}

.photo-modal__info-row {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f3f7;
    font-size: 13px;
    align-items: flex-start;
}

.photo-modal__info-row:last-child {
    border-bottom: none;
}

.photo-modal__label {
    color: #6a7180;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 110px;
}

.photo-modal__value {
    color: #1a1f2c;
    word-break: break-word;
    flex: 1;
}

.photo-modal__comment {
    padding: 10px 12px;
    background: #f7f9fc;
    border-left: 3px solid #408DFB;
    border-radius: 0 4px 4px 0;
    color: #4a5161;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    word-break: break-word;
}

/* ============================================================
 * DROPZONE — stilizovan file-input kontejner (dashed border,
 * centriran icon + title + sub-text + standardno-prikazan input).
 * Originalno iz Animal-InitialImport (.rgg-dropzone), izvučeno
 * ovde kao generic .dropzone za reuse na drugim upload-ima.
 * ============================================================ */

.dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 22px 16px;
    text-align: center;
    background: #f8fafc;
    transition: border-color 0.15s, background 0.15s;
}

.dropzone:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.dropzone.is-uploading {
    border-color: #d97706;
    background: #fffbeb;
}

.dropzone.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dropzone__icon {
    font-size: 38px;
    color: #94a3b8;
    margin-bottom: 6px;
    line-height: 1;
}

.dropzone.is-uploading .dropzone__icon { color: #d97706; }

.dropzone__title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.dropzone__sub {
    font-size: 12px;
    color: #64748b;
}

.dropzone input[type="file"] {
    margin-top: 10px;
    cursor: pointer;
}

/* ============================================================
 * TASK DETAIL POPUP — info-row blok, opis, prioritet badge,
 * danger-zone separator. Koristi se u TaskActionBar SelectedTask
 * popup-u (i može i u drugim "task detail" pregledima).
 * ============================================================ */

.task-detail-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.task-detail-info-row {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f3f7;
    font-size: 13px;
    align-items: center;
}

.task-detail-info-row:last-child { border-bottom: none; }

.task-detail-info-label {
    color: #6a7180;
    font-weight: 600;
    min-width: 140px;
    flex-shrink: 0;
}

.task-detail-info-value {
    color: #1a1f2c;
    flex: 1;
    word-break: break-word;
}

.task-detail-priority {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.task-detail-priority--high {
    background: #FAEEDA;
    color: #633806;
}

.task-detail-priority--urgent {
    background: #FCEBEB;
    color: #A32D2D;
}

.task-detail-description {
    padding: 10px 12px;
    background: #f7f9fc;
    border-left: 3px solid #408DFB;
    border-radius: 0 4px 4px 0;
    color: #1a1f2c;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.task-danger-zone {
    border-top: 1px dashed #e6e8ec;
    padding-top: 12px;
    margin-top: 16px;
}

.task-danger-zone-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #A32D2D;
    font-weight: 700;
    margin: 0 0 6px;
}

.task-readonly-banner {
    padding: 10px 14px;
    background: #FFF7CC;
    border: 1px solid #EF9F27;
    border-radius: 6px;
    color: #633806;
    font-size: 13px;
    line-height: 1.4;
}

/* ============================================================
 * TASK ACTION SECTION — info hint + dugmad sa SVG ikonama + 
 * "Upravljanje zadatkom" zona umesto starog "Opasne akcije".
 * Koristi se u DocumentTask-Component SelectedTask popup-u.
 * ============================================================ */

.task-action-hint {
    background: #f7f9fc;
    border-left: 3px solid #408DFB;
    border-radius: 0 4px 4px 0;
    padding: 8px 12px;
    margin-bottom: 12px;
    color: #4a5161;
    font-size: 12px;
    line-height: 1.5;
}

.task-action-hint strong { color: #0c447c; }

.task-action-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
}

.task-action-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.task-action-btn svg { flex-shrink: 0; }

.task-manage-zone {
    border-top: 1px dashed #e6e8ec;
    padding-top: 12px;
    margin-top: 16px;
}

.task-manage-zone-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6a7180;
    font-weight: 700;
    margin: 0 0 8px;
}

/* ============================================================
 * TASK FORM HINTS — sekcijski intro i field-level help text
 * za DocumentTask-AddEdit formu i slične forme gde je potrebno
 * dodatno objašnjenje pored labela.
 * ============================================================ */

.task-section-intro {
    font-size: 12px;
    color: #6a7180;
    font-style: italic;
    margin: -4px 0 12px;
    line-height: 1.5;
}

.task-field-hint {
    font-size: 11px;
    color: #6a7180;
    line-height: 1.45;
    margin: 4px 0 8px 4px;
    padding-left: 10px;
    border-left: 2px solid #e6e8ec;
}

/* ============================================================
 * TASK FORM TIP — amber/orange info box za savete na dnu forme.
 * Lako se uklanja jer je samostalna klasa, ne pripada drugim
 * komponentama u app-u. Stilski je drugačiji od plavog
 * task-action-hint-a (info banner) da se odmah vidi razlika.
 * ============================================================ */

.task-form-tip {
    background: #fffbeb;
    border-left: 3px solid #d97706;
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    margin-top: 16px;
    font-size: 12px;
    color: #633806;
    line-height: 1.55;
}

.task-form-tip strong { color: #92400e; }

.task-form-tip ul {
    margin: 6px 0 0 0;
    padding-left: 18px;
}

.task-form-tip ul li {
    margin: 4px 0;
}

.task-form-tip em {
    font-style: normal;
    background: #FCEBEB;
    color: #A32D2D;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}