/* sl-tablet: robusni sluzbeni tablet (MDT) - gumeni okvir, odbojnici, tipke, sistemska traka, lijevi meni.
   Sadrzaj ekrana ostaje u SecondLife stilu (svijetle kartice, crni kurziv naslovi, ostri kutovi). */
:root { --bz-t: 30px; --bz-r: 58px; --bz-b: 40px; --bz-l: 30px; }

/* ---------- uredjaj ---------- */
#tablet { background: radial-gradient(ellipse at 50% 60%, rgba(8, 9, 12, .35), rgba(4, 5, 7, .7)); }
.device {
    position: relative; width: min(1380px, 96vw); aspect-ratio: 16 / 10.2; max-height: 94vh;
    padding: var(--bz-t) var(--bz-r) var(--bz-b) var(--bz-l); border-radius: 26px;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 5px),
        linear-gradient(160deg, #2b2d31 0%, #1a1b1e 45%, #121315 100%);
    box-shadow:
        inset 0 0 0 2px #0a0a0b, inset 0 2px 0 3px rgba(255, 255, 255, .05), inset 0 -6px 14px rgba(0, 0, 0, .55),
        0 2.6rem 6rem rgba(0, 0, 0, .7), 0 .4rem 1rem rgba(0, 0, 0, .5);
}

/* gumeni odbojnici na kutovima */
.bump { position: absolute; width: 92px; height: 92px; background: linear-gradient(145deg, #121214, #050506); pointer-events: none; }
.bump::after { content: ''; position: absolute; inset: 10px; border: 2px solid rgba(255, 255, 255, .035); }
.bump.tl { top: -5px; left: -5px; border-radius: 32px 4px 26px 4px; }
.bump.tr { top: -5px; right: -5px; border-radius: 4px 32px 4px 26px; }
.bump.bl { bottom: -5px; left: -5px; border-radius: 4px 26px 4px 32px; }
.bump.br { bottom: -5px; right: -5px; border-radius: 26px 4px 32px 4px; }
.bump.tl::after { border-radius: 24px 2px 18px 2px; } .bump.tr::after { border-radius: 2px 24px 2px 18px; }
.bump.bl::after { border-radius: 2px 18px 2px 24px; } .bump.br::after { border-radius: 18px 2px 24px 2px; }

/* vijci */
.screw { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8b8e94, #3b3d41 60%, #1c1d1f); box-shadow: 0 1px 1px rgba(0, 0, 0, .8); pointer-events: none; }
.screw::before, .screw::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 1.6px; margin: -.8px 0 0 -3.5px; background: #17181a; transform: rotate(35deg); }
.screw::after { transform: rotate(125deg); }
.screw.s1 { top: 12px; left: 104px; } .screw.s2 { top: 12px; right: 104px; }
.screw.s3 { bottom: 14px; left: 104px; } .screw.s4 { bottom: 14px; right: 104px; }

/* gornji okvir: senzor, kamera, LED */
.bezel-top { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; pointer-events: none; }
.bezel-top .cam { position: static; width: 9px; height: 9px; margin: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3d5a8a, #0b1220 65%); box-shadow: 0 0 0 2px #050506; }
.bezel-top .sensor { width: 5px; height: 5px; border-radius: 50%; background: #0c0d0f; }
.bezel-top .led { width: 5px; height: 5px; border-radius: 50%; background: #1fd36b; box-shadow: 0 0 6px #1fd36b; }

/* donji okvir: natpis */
.bezel-bot { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 10px; color: #5c5f66; pointer-events: none; white-space: nowrap; }
.bezel-bot b { font-size: 15px; font-weight: 900; font-style: italic; letter-spacing: .14em; color: #75787f; text-shadow: 0 -1px 0 rgba(0, 0, 0, .8); }
.bezel-bot span { font-size: 9px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }

/* tipke s desne strane */
.hw { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.hwb { width: 34px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: linear-gradient(180deg, #2c2e32, #17181a); color: #8c9097; font-size: 10px; font-weight: 900; font-style: normal;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 3px rgba(0, 0, 0, .6); }
.hwb.vol { height: 26px; font-size: 14px; }
.hwb.power { height: 40px; color: #e04a3f; cursor: pointer; margin-bottom: 8px; }
.hwb.power svg { width: 17px; height: 17px; }
.hwb.power:hover { color: #fff; background: linear-gradient(180deg, #c8352b, #8e211a); }

/* ---------- ekran ---------- */
.screen { position: relative; display: flex; flex-direction: column; border-radius: 6px; background: var(--card-2); box-shadow: 0 0 0 3px #050506, 0 0 0 4px #2a2c30; }
.screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 50; border-radius: 6px;
    background: linear-gradient(125deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 32%); }

/* sistemska traka */
.sysbar { height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #08090b; color: #9ea3ab; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px 6px 0 0; }
.sb-l, .sb-r { display: flex; align-items: center; gap: 12px; }
.sb-l svg { width: 13px; height: 13px; fill: var(--acc); }
.sb-l b { color: #fff; letter-spacing: .14em; margin-left: -6px; }
.sb-l span { color: #5f646d; }
.sb-i { display: flex; align-items: center; gap: 5px; }
.sb-i svg { width: 12px; height: 12px; fill: #9ea3ab; }
.sig { display: flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.sig i { width: 3px; background: #9ea3ab; }
.sig i:nth-child(1) { height: 3px; } .sig i:nth-child(2) { height: 5px; } .sig i:nth-child(3) { height: 7px; } .sig i:nth-child(4) { height: 10px; opacity: .35; }
.bat .b { position: relative; width: 20px; height: 10px; border: 1.5px solid #9ea3ab; border-radius: 2px; padding: 1px; }
.bat .b::after { content: ''; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; background: #9ea3ab; }
.bat .b i { display: block; height: 100%; width: 86%; background: #4cd07d; }
.sb-d { color: #6c717a; }
.sb-t { color: #fff; font-size: 12px; font-style: italic; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* tijelo: meni + sadrzaj */
.body { flex: 1; min-height: 0; display: grid; grid-template-columns: 212px 1fr; border-radius: 0 0 6px 6px; overflow: hidden; }

/* lijevi meni */
.rail { background: linear-gradient(180deg, #131417, #0e0f11); border-right: 1px solid #000; }
.logo { padding: 9px 16px; }
.logo .shield { width: 36px; height: 40px; clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%); background: linear-gradient(160deg, #2b6cf0, #143c8f); }
#nav { padding: 2px 0 4px; gap: 1px; }
#nav .ns { padding: 9px 18px 3px; font-size: 9px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: #4e525a; }
#nav button { padding: 6px 18px; font-size: 11.5px; }
#nav button svg { width: 17px; height: 17px; opacity: .85; }
#nav button.on { background: linear-gradient(90deg, rgba(31, 95, 214, .32), rgba(31, 95, 214, .06)); }
#nav button.on svg { opacity: 1; }
#nav button i { border-radius: 2px; }

/* gornji red sadrzaja */
main { background: var(--card-2); }
.top { padding: 12px 22px; }
.top .ttl .label { display: block; }
.top .ttl h1 { font-size: 26px; }
.me { padding-right: 0; border-right: 0; }
.me .av { clip-path: polygon(50% 0, 100% 14%, 100% 60%, 50% 100%, 0 60%, 0 14%); background: linear-gradient(160deg, #e7c45a, #a8822a); color: #3a2c08; width: 34px; height: 38px; }

/* prijava preko ekrana (unutar okvira) */
#auth { inset: var(--bz-t) var(--bz-r) var(--bz-b) var(--bz-l); border-radius: 6px; }

/* uski ekrani: manji okvir */
@media (max-height: 760px) {
    :root { --bz-t: 24px; --bz-r: 50px; --bz-b: 32px; --bz-l: 24px; }
    #nav button { padding: 5px 16px; }
    #nav .ns { padding: 6px 16px 2px; }
}

/* ---------- tamna tema ---------- */
:root {
    --card: #1c1f25; --card-2: #15171b; --card-3: #272b33; --white: #22262d; --text: #e7e9ed; --muted: #8b919b;
    --line: rgba(255, 255, 255, .09); --acc: #3a7bf0; --acc-2: rgba(58, 123, 240, .16); --ok: #3ccf74; --bad: #f0524a; --warn: #f0ad2c; --ink: #343a44;
}
html, body { color: var(--text); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }
.screen { background: var(--card-2); }
.btn { background: var(--acc); }
.btn:hover { filter: brightness(1.12); }
.tabs button.on, .seg button.on, .chip.dark { background: #3d4450; }
.duty .cs { background: var(--card-3); color: var(--text); }
.st.s0 { background: rgba(60, 207, 116, .15); color: var(--ok); }
.st.s1 { background: rgba(240, 173, 44, .16); color: var(--warn); }
.st.s2 { background: rgba(58, 123, 240, .18); color: #7fa8f6; }
.st.s3 { background: var(--card-3); color: var(--muted); }
@keyframes flash { 50% { background: rgba(240, 173, 44, .22); } }
input, select, textarea { color-scheme: dark; }
.in, .sel, .ta, select, input, textarea { color: var(--text); }
.in::placeholder, .ta::placeholder { color: #666c76; }
#modal { background: rgba(0, 0, 0, .65); }
#auth { background: radial-gradient(ellipse at 50% 30%, #1d2a44, #0c0f15 70%); }
.top { background: var(--card); }
main { background: var(--card-2); }
.me .av { color: #3a2c08; }

/* policijska znacka umjesto stita */
.badge-ico { width: 14px; height: 14px; object-fit: contain; }
.badge-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.bshield-img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.badge-auth { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.me-badge { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }

/* evidencija privodjenja: fotografije i povijest statusa */
.mugs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mug { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mug img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border: 1px solid rgba(0, 0, 0, .14); cursor: zoom-in; background: #222; }
.mug.big { grid-column: 1 / -1; }
.mug.big img { cursor: zoom-out; }
.mug.none > div { aspect-ratio: 3 / 4; display: grid; place-items: center; border: 1px dashed rgba(0, 0, 0, .22); color: rgba(0, 0, 0, .3); }
.mug.none > div svg { width: 40px; height: 40px; }
.caselog { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(0, 0, 0, .1); }
.caselog > div { display: flex; align-items: center; gap: 10px; }