/* ============================================================
   AutoLOG — zajednički stil za celu aplikaciju

   Jedno mesto za boje, zaobljenja, senke, bočni meni, donju
   navigaciju na telefonu, kartice, forme i dugmad. Ranije je svaki
   raspored (servis, vlasnik, admin, javna strana) nosio svoju kopiju
   istog CSS-a, pa je promena boje dugmeta značila četiri izmene.

   Redosled: promenljive → osnova → raspored (meni, sadržaj, topbar)
   → komponente → telefon → štampa.
   ============================================================ */

:root {
    /* Brend */
    --al-mrk:          #021526;   /* mornarsko plava — osnovna boja */
    --al-mrk-svetla:   #0a2540;
    --al-crv:          #f11a20;   /* crvena iz logotipa — akcije */
    --al-crv-tamna:    #c6151a;

    /* Površine i tekst */
    --al-podloga:      #f0f2f5;
    --al-povrsina:     #ffffff;
    --al-ivica:        #e6e9ef;
    --al-tekst:        #1f2937;
    --al-tekst-siv:    #667085;

    /* Statusne boje — malo mekše od Bootstrap-ovih, da se slažu sa brendom */
    --al-zeleno:       #16a34a;
    --al-zeleno-pod:   #eaf7ee;
    --al-zuto:         #d97706;
    --al-zuto-pod:     #fff7e6;
    --al-plavo:        #4361ee;
    --al-plavo-pod:    #eef2ff;
    --al-crv-pod:      #fff0f1;

    /* Oblik */
    --al-radius:       14px;
    --al-radius-s:     10px;
    --al-senka:        0 2px 8px rgba(2, 21, 38, .06);
    --al-senka-hover:  0 8px 22px rgba(2, 21, 38, .10);

    /* Mere rasporeda */
    --al-meni-sirina:  250px;
    --al-donja-nav-h:  64px;

    /* Bootstrap-ove promenljive prepisane na brend, da sva dugmad i
       linkovi automatski dobiju našu crvenu i plavu. */
    --bs-danger:       #f11a20;
    --bs-danger-rgb:   241, 26, 32;
    --bs-dark:         #021526;
    --bs-dark-rgb:     2, 21, 38;
    --bs-link-color:   #021526;
    --bs-link-hover-color: #f11a20;
    --bs-body-color:   #1f2937;
    --bs-border-radius: 10px;
}

/* ------------------------------------------------------------
   Osnova
   ------------------------------------------------------------ */
body {
    background: var(--al-podloga);
    color: var(--al-tekst);
    -webkit-font-smoothing: antialiased;
}

/* Slika nikad ne sme da probije širinu roditelja */
img {
    max-width: 100%;
}

/* ------------------------------------------------------------
   Bočni meni — isti tamni za sve uloge
   ------------------------------------------------------------ */
.sidebar {
    width: var(--al-meni-sirina);
    min-height: 100vh;
    background: var(--al-mrk);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
}

.sidebar-logo {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
    padding: 22px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-znak {
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 9px;
    padding: 3px;
    object-fit: contain;
    flex: none;
}

/* Cilja se samo unutrašnji span sa "LOG". Reč je u jednom elementu;
   da je "Auto" ostao goli tekst u flex kutiji, gap bi upao i između
   "Auto" i "LOG". */
.sidebar-logo .rec span {
    color: var(--al-crv);
}

/* Oznaka uloge pored logotipa (ADMIN i sl.) — mora biti specifičnije od
   pravila iznad, inače bi tekst bio crven na crvenoj podlozi. */
.sidebar-logo .sidebar-badge {
    font-size: .62rem;
    background: var(--al-crv);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0;
    font-weight: 700;
}

.sidebar .nav {
    padding: 8px 0;
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, .68);
    padding: 11px 16px;
    border-radius: var(--al-radius-s);
    margin: 2px 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus-visible,
.sidebar .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .10);
}

.sidebar .nav-link.active {
    background: rgba(241, 26, 32, .22);
}

.sidebar .nav-link i {
    width: 22px;
    font-size: 1.1rem;
    text-align: center;
    flex: none;
}

.sidebar .nav-link.text-danger {
    color: #ff6b70 !important;
}

.sidebar .nav-link.text-danger:hover {
    background: rgba(241, 26, 32, .18);
    color: #fff !important;
}

.sidebar hr {
    border-color: rgba(255, 255, 255, .12);
    margin: 8px 20px;
    opacity: 1;
}

/* Ko je prijavljen — dno menija */
.sidebar-korisnik {
    margin-top: auto;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .6);
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sidebar-korisnik .ime {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zatamnjenje iza otvorenog menija na telefonu */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 21, 38, .55);
    z-index: 1035;
}

.sidebar-overlay.active {
    display: block;
}

/* ------------------------------------------------------------
   Glavni sadržaj i gornja traka
   ------------------------------------------------------------ */
.main-content {
    margin-left: var(--al-meni-sirina);
    padding: 28px 30px 40px;
    min-height: 100vh;
}

.topbar {
    background: var(--al-povrsina);
    border: 1px solid var(--al-ivica);
    border-radius: var(--al-radius);
    padding: 12px 18px;
    margin-bottom: 22px;
    box-shadow: var(--al-senka);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 64px;
}

.topbar h1,
.topbar h6 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

/* Dugme za meni je na telefonu jedini put do navigacije — najmanje 44px */
.topbar .btn-sm {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------------------
   Kartice
   ------------------------------------------------------------ */
.card {
    border: 1px solid var(--al-ivica);
    border-radius: var(--al-radius);
    box-shadow: var(--al-senka);
    background: var(--al-povrsina);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--al-ivica);
    font-weight: 700;
}

/* Kartica koja je link (kutice na dashboardu) */
.kutica {
    transition: transform .12s ease, box-shadow .12s ease;
}

.kutica:hover,
.kutica:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--al-senka-hover);
}

/* Ikona u obojenoj pločici (dashboard, liste) */
.ikona-plocica {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex: none;
}

.ikona-plocica.crvena { background: var(--al-crv-pod);   color: var(--al-crv); }
.ikona-plocica.plava  { background: var(--al-plavo-pod); color: var(--al-plavo); }
.ikona-plocica.zelena { background: var(--al-zeleno-pod); color: var(--al-zeleno); }
.ikona-plocica.zuta   { background: var(--al-zuto-pod);  color: var(--al-zuto); }
.ikona-plocica.siva   { background: var(--al-podloga);   color: var(--al-mrk); }
.ikona-plocica.tamna  { background: var(--al-mrk);       color: #fff; }

/* ------------------------------------------------------------
   Dugmad
   ------------------------------------------------------------ */
.btn {
    border-radius: var(--al-radius-s);
    font-weight: 600;
}

.btn:not(.btn-sm):not(.btn-lg) {
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
}

/* Mala dugmad (Izmeni, Obriši, Potvrdi...) su ona koja se najčešće
   dodiruju na telefonu; Bootstrap-ovih 31px je premalo za prst. */
.btn-sm {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-danger {
    --bs-btn-bg: var(--al-crv);
    --bs-btn-border-color: var(--al-crv);
    --bs-btn-hover-bg: var(--al-crv-tamna);
    --bs-btn-hover-border-color: var(--al-crv-tamna);
    --bs-btn-active-bg: var(--al-crv-tamna);
    --bs-btn-active-border-color: var(--al-crv-tamna);
}

.btn-outline-danger {
    --bs-btn-color: var(--al-crv);
    --bs-btn-border-color: var(--al-crv);
    --bs-btn-hover-bg: var(--al-crv);
    --bs-btn-hover-border-color: var(--al-crv);
    --bs-btn-active-bg: var(--al-crv-tamna);
}

.btn-dark {
    --bs-btn-bg: var(--al-mrk);
    --bs-btn-border-color: var(--al-mrk);
    --bs-btn-hover-bg: var(--al-mrk-svetla);
    --bs-btn-hover-border-color: var(--al-mrk-svetla);
    --bs-btn-active-bg: var(--al-mrk-svetla);
}

.btn-outline-dark {
    --bs-btn-color: var(--al-mrk);
    --bs-btn-border-color: var(--al-mrk);
    --bs-btn-hover-bg: var(--al-mrk);
    --bs-btn-hover-border-color: var(--al-mrk);
}

.btn-outline-secondary {
    --bs-btn-color: var(--al-tekst-siv);
    --bs-btn-border-color: #cfd5de;
    --bs-btn-hover-bg: var(--al-podloga);
    --bs-btn-hover-color: var(--al-mrk);
    --bs-btn-hover-border-color: #cfd5de;
}

/* ------------------------------------------------------------
   Forme
   ------------------------------------------------------------ */
.form-label {
    font-weight: 600;
    font-size: .92rem;
}

.form-control,
.form-select {
    border-radius: var(--al-radius-s);
    border-color: #d5dae2;
    padding: 10px 14px;
}

.form-control:not(.form-control-sm),
.form-select:not(.form-select-sm) {
    min-height: 44px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--al-mrk);
    box-shadow: 0 0 0 3px rgba(2, 21, 38, .12);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(241, 26, 32, .15);
}

.form-text {
    color: var(--al-tekst-siv);
}

.input-group-text {
    border-radius: var(--al-radius-s);
    border-color: #d5dae2;
    background: var(--al-povrsina);
}

/* ------------------------------------------------------------
   Oznake, liste, tabele
   ------------------------------------------------------------ */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
}

.badge.bg-success { background: var(--al-zeleno) !important; }
.badge.bg-warning { background: var(--al-zuto) !important; color: #fff !important; }
.badge.bg-danger  { background: var(--al-crv) !important; }
.badge.bg-dark    { background: var(--al-mrk) !important; }

.badge-osnivac {
    background: #0c5460;
    color: #fff;
}

.list-group-item-action {
    border-radius: var(--al-radius-s);
    transition: background-color .15s ease;
}

.list-group-item-action:hover {
    background-color: var(--al-podloga);
}

.list-group-flush > .list-group-item {
    border-color: var(--al-ivica);
}

.table > :not(caption) > * > * {
    padding: .6rem .5rem;
}

.table-light {
    --bs-table-bg: #f7f8fa;
}

/* Tačka na vremenskoj liniji servisne istorije */
.timeline-dot {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--al-mrk);
}

.timeline-dot.vlasnik {
    background: var(--al-tekst-siv);
}

/* Prazno stanje: ikona + poruka + (opciono) dugme */
.prazno {
    text-align: center;
    padding: 40px 20px;
    color: var(--al-tekst-siv);
}

.prazno i {
    font-size: 3rem;
    opacity: .45;
    display: block;
    margin-bottom: 12px;
}

.prazno h5,
.prazno h6 {
    color: var(--al-tekst);
    font-weight: 700;
}

.tekst-siv {
    color: var(--al-tekst-siv);
}

/* Upozorenja u brend bojama */
.alert {
    border-radius: var(--al-radius-s);
}

/* Paginacija */
.pagination .page-link {
    color: var(--al-mrk);
    border-color: var(--al-ivica);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-item.active .page-link {
    background: var(--al-mrk);
    border-color: var(--al-mrk);
}

/* Fokus tastaturom vidljiv, ali ne agresivan */
:focus-visible {
    outline: 3px solid rgba(241, 26, 32, .45);
    outline-offset: 2px;
}

/* Da naslov ne zavuče pod fiksiranu traku kad se skoči na #sekciju */
[id] {
    scroll-margin-top: 90px;
}

/* ------------------------------------------------------------
   Pregled slike preko cele strane
   ------------------------------------------------------------ */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 21, 38, .9);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 16px;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

/* ------------------------------------------------------------
   Donja navigacija — samo na telefonu
   ------------------------------------------------------------ */
.donja-nav {
    display: none;
}

@media (max-width: 767.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .28s ease;
        width: min(var(--al-meni-sirina), 84vw);
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    body.meni-otvoren {
        overflow: hidden;
    }

    .main-content {
        margin-left: 0;
        padding: 16px 16px calc(var(--al-donja-nav-h) + env(safe-area-inset-bottom, 0px) + 20px);
    }

    .topbar {
        padding: 10px 12px;
        margin-bottom: 16px;
        min-height: 60px;
    }

    .donja-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background: var(--al-povrsina);
        border-top: 1px solid var(--al-ivica);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 12px rgba(2, 21, 38, .06);
    }

    .donja-nav > a,
    .donja-nav > button {
        flex: 1 1 0;
        min-width: 0;
        height: var(--al-donja-nav-h);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--al-tekst-siv);
        text-decoration: none;
        font-size: .66rem;
        font-weight: 600;
        background: none;
        border: 0;
        padding: 0 2px;
        -webkit-tap-highlight-color: transparent;
    }

    .donja-nav > a i,
    .donja-nav > button i {
        font-size: 1.35rem;
        line-height: 1;
    }

    .donja-nav > a span,
    .donja-nav > button span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .donja-nav > a.active {
        color: var(--al-mrk);
    }

    .donja-nav > a.active i {
        color: var(--al-crv);
    }

    /* Središnje dugme — skeniranje je glavna radnja u aplikaciji,
       pa je izdignuto i crveno */
    .donja-nav .skeniraj .krug {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: var(--al-crv);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-top: -26px;
        border: 4px solid var(--al-podloga);
        box-shadow: 0 6px 16px rgba(241, 26, 32, .35);
    }

    .donja-nav .skeniraj:active .krug {
        transform: scale(.95);
    }

    /* Na telefonu tabele bez omotača ne smeju da guraju stranu */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* Zaključavanje pomeranja i animacije za korisnike koji ih ne žele */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .kutica,
    .list-group-item-action,
    .sidebar .nav-link {
        transition: none;
    }

    .kutica:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------
   Strana vozila: zaglavlje, tablica, brojke, vremenska linija
   ------------------------------------------------------------ */
.vozilo-zaglavlje {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.vozilo-slika {
    width: 84px;
    height: 84px;
    border-radius: 14px;
    object-fit: cover;
    flex: none;
    background: var(--al-podloga);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--al-mrk);
}

.vozilo-naziv {
    font-size: clamp(1.25rem, 4.5vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.15;
    margin: 0;
}

/* Registarska oznaka, nalik pravoj tablici */
.tablica {
    display: inline-flex;
    align-items: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .06em;
    background: #fff;
    color: var(--al-mrk);
    border: 2px solid var(--al-mrk);
    border-radius: 6px;
    padding: 2px 10px 2px 0;
    overflow: hidden;
    white-space: nowrap;
}

.tablica::before {
    content: "SRB";
    background: #003399;
    color: #fff;
    font-size: .55rem;
    font-weight: 600;
    letter-spacing: 0;
    padding: 6px 4px;
    margin-right: 8px;
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* Traka sa brojkama - na telefonu se pomera vodoravno */
.stat-traka {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.stat-traka::-webkit-scrollbar {
    display: none;
}

.stat {
    flex: 1 0 auto;
    min-width: 108px;
    background: var(--al-povrsina);
    border: 1px solid var(--al-ivica);
    border-radius: 12px;
    padding: 10px 14px;
}

.stat .vrednost {
    font-weight: 800;
    font-size: 1.05rem;
    white-space: nowrap;
}

.stat .natpis {
    font-size: .72rem;
    color: var(--al-tekst-siv);
    white-space: nowrap;
}

/* Statusna pilula za sledeći servis */
.status-pilula {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 7px 14px;
    font-weight: 600;
    font-size: .88rem;
}

.status-pilula.success { background: var(--al-zeleno-pod); color: #15803d; }
.status-pilula.warning { background: var(--al-zuto-pod);   color: #b45309; }
.status-pilula.danger  { background: var(--al-crv-pod);    color: var(--al-crv-tamna); }

/* Vremenska linija servisne istorije */
.istorija-stavka {
    display: flex;
    gap: 14px;
    position: relative;
    padding-bottom: 22px;
}

.istorija-stavka:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--al-ivica);
}

.istorija-stavka:last-child {
    padding-bottom: 0;
}

.istorija-telo {
    flex: 1;
    min-width: 0;
}

.istorija-naslov {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.istorija-naslov .ko {
    font-weight: 700;
}

.istorija-stavke {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.istorija-stavke .badge {
    background: var(--al-podloga);
    color: var(--al-tekst);
    border: 1px solid var(--al-ivica);
    font-weight: 500;
    padding: 5px 9px;
}

.istorija-slike {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.istorija-slike img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
}

/* Oznake potpisa i potvrde - jezik poverenja sa početne strane */
.badge-servis     { background: var(--al-mrk); color: #fff; }
.badge-potvrdjeno { background: var(--al-zeleno-pod); color: #15803d; border: 1px solid #bbf7d0; }
.badge-nepotvrdjeno { background: var(--al-zuto-pod); color: #b45309; border: 1px solid #fde68a; }
.badge-vlasnik    { background: var(--al-podloga); color: var(--al-tekst-siv); border: 1px solid var(--al-ivica); }

/* ------------------------------------------------------------
   Štampa
   ------------------------------------------------------------ */
@media print {
    body {
        background: #fff;
    }

    .sidebar,
    .sidebar-overlay,
    .donja-nav,
    .topbar,
    .lightbox,
    .no-print,
    .btn,
    form {
        display: none !important;
    }

    .main-content {
        margin: 0;
        padding: 0;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }
}