/* Slog za orodje Lokacija.
   Barve ne zapisujemo trdo, ampak jemljemo spremenljivke iz assets/style.css,
   da orodje sledi temi strani (temna podlaga, jantarni poudarek). Ce se tema
   strani kdaj spremeni, se ta datoteka spremeni z njo. */

/* ── Zavihki ─────────────────────────────────────────────────────── */

.lok-zavihki {
    display: flex;
    align-items: center;
    gap: .35rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.lok-zavihki a {
    padding: .6rem 1.1rem;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color .15s, background .15s;
}

.lok-zavihki a:hover {
    color: var(--text-soft);
    background: var(--surface-2);
}

.lok-zavihki a.aktiven {
    background: var(--surface-2);
    color: var(--amber);
    font-weight: 600;
    border-color: var(--border-2);
    margin-bottom: -1px;
}

/* ── Zemljevid ───────────────────────────────────────────────────── */

.lok-zemljevid {
    height: 62vh;
    min-height: 340px;
    border-radius: var(--radius);
    border: 1px solid var(--border-2);
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
}

/* Na sirokih zaslonih zemljevid poci iz osrednjega stolpca (max 1180px) in
   uporabi skoraj celo sirino okna. 92vw (ne 100vw) pusti majhen rob in se
   izogne vodoravnemu drsniku zaradi sirine sistemske drsne palice.
   Tabela in statistika pod zemljevidom ostanejo v stolpcu. */
@media (min-width: 1240px) {
    .lok-zemljevid {
        width: 92vw;
        margin-left: calc(50% - 46vw);
        height: 74vh;
    }
}

/* Leaflet nariše svoje ozadje svetlo; ploščice OSM so svetle, zato tega
   ne barvamo temno — le robove uskladimo s stranjo. */
.lok-zemljevid .leaflet-control-attribution {
    font-size: 10px;
}

/* ── Orodna vrstica ──────────────────────────────────────────────── */

.lok-orodna {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-bottom: 1rem;
}

.lok-orodna select,
.lok-orodna input[type="date"] {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.lok-orodna select:focus,
.lok-orodna input[type="date"]:focus {
    outline: none;
    border-color: var(--amber);
    background: var(--surface-3);
    box-shadow: 0 0 0 3px var(--amber-dim);
}

.lok-orodna button {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text-soft);
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.lok-orodna button:hover {
    background: var(--surface-hi);
    color: var(--text);
    border-color: var(--amber);
}

/* ── Kartice statistike ──────────────────────────────────────────── */

.lok-stat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.lok-stat div {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .8rem .95rem;
}

.lok-stat b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

.lok-stat span {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: var(--text-muted);
}

/* ── Tabela ──────────────────────────────────────────────────────── */

.lok-tabela {
    width: 100%;
    border-collapse: collapse;
}

.lok-tabela th {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--border-2);
    text-align: left;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lok-tabela td {
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: .92rem;
    color: var(--text-soft);
}

.lok-tabela tbody tr:hover td {
    background: var(--surface-2);
}

/* Naprave brez novosti dve uri prikazemo zbledelo. */
.lok-tabela tr.stara td {
    opacity: .45;
}

/* Stalen napis ob piki v zavihku Zivo. Leafletov oblacek ima privzeto svetlo
   ozadje in puscico; oboje zamenjamo s temno tablico brez puscice, da napis
   deluje enako nad svetlim zemljevidom in nad satelitskim posnetkom. */
.leaflet-tooltip.lok-oznaka {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .1rem .5rem .1rem .3rem;
    border: none;
    border-radius: 999px;
    background: rgba(11, 15, 25, .82);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.leaflet-tooltip.lok-oznaka::before {
    display: none;
}

.lok-oznaka-crta {
    display: inline-block;
    width: 4px;
    height: 12px;
    border-radius: 2px;
}

/* Oznaka polne ure na sledi. Manjsa in bledejsa od imen v zavihku Zivo:
   pot je glavna stvar na zemljevidu, ure so opora ob njej. */
.leaflet-tooltip.lok-ura {
    padding: 0 .3rem;
    border: none;
    border-radius: 3px;
    background: rgba(255, 255, 255, .88);
    color: #14324f;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.leaflet-tooltip.lok-ura::before {
    display: none;
}

/* Izbira barve pike v adminski tabeli. */
.lok-barve {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: .35rem;
}

.lok-barva-obrazec {
    margin: 0;
}

.lok-barva {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}

.lok-barva--izbrana {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--surface-2);
}

/* Naprava, ki ne javlja vec oz. ji je zmanjkovalo baterije. Barva vrstice je
   namig, besedna oznaka ob imenu pa nosi pomen tudi brez nje. */
.lok-tabela tr.lok-tiho > td {
    background: var(--red-dim);
}

.lok-tabela tr.lok-baterija > td {
    background: var(--amber-dim);
}

.lok-znak {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
    border: 1px solid currentColor;
}

.lok-znak--tiho {
    color: var(--red);
}

.lok-znak--baterija {
    color: var(--amber);
}

.lok-pika {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    vertical-align: -1px;
    margin-right: .45rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

/* ── Graf dnevnih razdalj ────────────────────────────────────────── */

.lok-graf {
    width: 100%;
    height: 190px;
}

.lok-graf rect {
    fill: var(--blue);
    transition: fill .15s;
}

.lok-graf rect:hover {
    fill: var(--amber);
}

.lok-graf text {
    font-size: 9px;
    fill: var(--text-dim);
}

/* ── Prazno stanje ───────────────────────────────────────────────── */

.lok-prazno {
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px dashed var(--border-2);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
}

/* ── Prijava ─────────────────────────────────────────────────────── */

.lok-prijava {
    max-width: 340px;
    margin: 3rem auto;
}

.lok-prijava form {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

/* Stran svojega sloga za polja ne uporabi na input[type=password],
   zato ga tu uskladimo z ostalimi polji. */
.lok-prijava input[type="email"],
.lok-prijava input[type="password"] {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.lok-prijava input[type="email"]:focus,
.lok-prijava input[type="password"]:focus {
    outline: none;
    border-color: var(--amber);
    background: var(--surface-3);
    box-shadow: 0 0 0 3px var(--amber-dim);
}

/* Gumb prevzame .btn iz assets/style.css; tu ga le raztegnemo po sirini
   obrazca in poudarimo, ker je edino dejanje na strani. */
.lok-prijava .btn {
    justify-content: center;
    width: 100%;
    padding: 11px 18px;
    font-size: 15px;
}

/* ── Admin del ───────────────────────────────────────────────────── */


/* Adminska tabela je siroka (veliko tehnicnih stolpcev), zato jo pustimo
   drseti vodoravno, da ne razbije postavitve strani. */
.lok-admin-scroll {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.lok-admin-tabela {
    min-width: 900px;
}

.lok-admin-tabela code {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--text-muted);
}

/* Obrazci v vrstici tabele: polje + gumb v eni vrsti. */
.lok-admin-obrazec {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.lok-admin-obrazec input[type="text"] {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    min-width: 8rem;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.lok-admin-obrazec input[type="text"]:focus {
    outline: none;
    border-color: var(--amber);
    background: var(--surface-3);
    box-shadow: 0 0 0 3px var(--amber-dim);
}

/* Vec dejanj pri odobreni napravi drug pod drugim (ozka celica). */
.lok-admin-dejanja {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    align-items: flex-start;
}

/* Nevarno dejanje (izbris): rdeci obris, brez jantarnega poudarka. */
.btn--nevarno {
    background: transparent;
    color: var(--red);
    border: 1px solid var(--red);
    box-shadow: none;
}

.btn--nevarno:hover {
    background: var(--red-dim);
    color: var(--red);
    filter: none;
}