/* ChaSK app2 — vizualni sloj iz mockupa 14-redesign-shell.
   Učitava se POSLIJE css/app.css. Ne dira public/app/css.
   Telefon (<768): isti tok; nasljeđuje font/tokenе, ne floating rail ni list-right. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/app2/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/app2/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/app2/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ⛔ `color-scheme` određuje boju NATIVNIH dijelova koje CSS ne doseže: kalendar u
   `datetime-local`/`date`, strelica i padajući popis `select`-a, klizači, polje za
   pretragu, te AUTOFILL na prijavi. Bez ovoga su u tamnoj temi ostajali BIJELI.
   ⚠ Stoji OVDJE, a ne u `css/app.css`: prijavu (`index.html`) stilizira stari
   `/app/css/app.css` + ovaj `theme.css`, dok se app2-ov `app.css` ondje ne učitava —
   pa je prijava do 29.08.2026. ostajala svijetla u tamnoj temi (audit B2). */
:root { color-scheme: light; }
.theme-dark { color-scheme: dark; }

:root {
  --navy-deep: #08153f;
  --ink: #0b1e5e;
  --brand: #0b1e5e;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --row-hover: rgba(255,255,255,.72);
  --glass-bg: rgba(255,255,255,.72);
  --line-soft: #f0f2f5;
  --seg-bg: #eef2f7;
  --shadow-soft: 0 6px 18px rgba(11,30,94,.07);
  --shadow-row: 0 2px 6px rgba(11,30,94,.08);
  --shadow-panel: 0 1px 2px rgba(11,30,94,.05), 0 6px 20px rgba(11,30,94,.07);
  --sky-soft: #e6f6fc;
}

.theme-dark {
  --bg: #0d1420;
  --list-bg: #101827;
  --text: #e2e8f4;
  --muted: #8b96ab;
  --line: #243047;
  --ink: #c3d4ff;
  --surface: #151d2e;
  --surface-2: #0f1727;
  --row-hover: rgba(255,255,255,.05);
  --glass-bg: rgba(13,20,32,.72);
  --line-soft: #1c2639;
  --seg-bg: #1a2334;
  --shadow-soft: 0 6px 18px rgba(0,0,0,.35);
  --shadow-row: 0 2px 6px rgba(0,0,0,.3);
  --shadow-panel: 0 6px 20px rgba(0,0,0,.35);
  --white: #151d2e;
  --sky-soft: #132b3f;
}

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.item-time, .msg-time, .badge, .tab-badge, .item-badge,
.snap-table td, .kpi-val, .num, .spd {
  font-variant-numeric: tabular-nums;
}

/* —— mikro-interakcije —— */
.rail-btn, .ptog, .drv-quick button,
.chat-role button, .task-period button, .list-chrome .list-sort button,
.head-pin, .head-route, .row-pin, .send-btn, .chat-action-btn, .tab-item,
.map-tools .seg button, .map-tools .map-fit, .map-tools .map-clear {
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease,
              transform .18s ease, opacity .18s ease;
}
.list-item, .task-card, .dock-row, .snap-row, .rep-item {
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}
.send-btn:hover { transform: translateY(-1px); }
.rail-btn:active, .ptog:active, .send-btn:active { transform: scale(.96); }

/* —— naslovi app2 chromea: --ink, da dark --navy ostane čitljiv u starim viewovima —— */
.list-head h1, .ws-head h2, .placeholder strong, .dock-row .nm,
.nadzor-h, .map-empty, .count-pill {
  color: var(--ink);
}
.ws-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.list-head h1 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

.pane {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}
.theme-dark .pane { background: var(--surface); }

/* —— floating rail (tablet+desktop) —— */
@media (min-width: 768px) {
  .rail {
    margin: 10px 6px 10px 10px;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(8,21,63,.35);
    align-self: stretch;
  }
  .rail-btn.active {
    color: var(--navy-deep);
    background: var(--sky);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(92,200,240,.35);
  }
  .rail-btn.active svg { stroke: var(--navy-deep); }
  .list-pane {
    border-right-color: var(--line);
  }
  .shell.wide.list-right .rail {
    margin: 10px 10px 10px 6px;
  }
  .shell.wide.list-right .list-pane {
    border-right: 0;
    border-left: 0;
    margin: 10px 10px 10px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
  }
}

/* —— pane toggles —— */
.pane-togs {
  background: var(--surface);
  border-radius: 10px;
}
.ptog { height: 30px; border-radius: 8px; }
/* Fiksna sirina vrijedi samo za IKONSKE prekidace — `.nz-tog` (Ploča/Zid) nosi tekst i
   `app.css` mu daje `width: auto`, ali se `theme.css` ucitava poslije pa ga je gazio i
   rezao natpis. */
.ptog:not(.nz-tog) { width: 34px; }
.ptog svg { width: 17px; height: 17px; }
.ptog.on { background: var(--brand); color: #fff; }

/* —— filter chrome (14: kapsule na --seg-bg) —— */
.drv-quick, .chat-role, .task-period {
  background: var(--seg-bg);
  border-radius: 10px;
  padding: 3px;
  box-shadow: none;
  gap: 2px;
}
.drv-quick button, .chat-role button, .task-period button {
  height: 28px;
  border-radius: 8px;
  color: var(--muted);
}
.drv-quick button:hover, .chat-role button:hover, .task-period button:hover {
  color: var(--ink);
  transform: translateY(-1px);
}
/* ⛔ Upaljen prekidac se POPUNI, kao svaki drugi u aplikaciji (`.ptog.on`, `.map-btn.on`,
   `.acts-row .act.on`, `.list-sort button.on`). Do 01.09.2026. su ova tri reda — brzi
   filtri i prekidaci ispod pretrage — u svijetloj temi radili obrnuto: aktivan gumb je
   postajao BIJEL s plavim natpisom, a neaktivni su ostajali na `--seg-bg`. Tamna tema je
   vec bila popunjena, pa je ista aplikacija u dvije teme imala dva pravila. */
.drv-quick button.on, .chat-role button.on, .task-period button.on {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 6px rgba(11,30,94,.25);
}
.theme-dark .drv-quick, .theme-dark .chat-role, .theme-dark .task-period {
  background: var(--seg-bg);
}

.list-chrome .list-sort button {
  flex: 0 0 auto;
  width: auto;
  min-width: 32px;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.list-chrome .list-sort.task-sort > button[data-sort] { flex: 0 0 auto; }
.list-chrome .list-sort button:hover {
  background: var(--seg-bg);
  transform: translateY(-1px);
}
.list-chrome .list-sort button.on {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 6px rgba(11,30,94,.25);
}
.theme-dark .list-chrome .list-sort button { background: transparent; }

.list-chrome .head-pin,
.list-chrome .head-route,
.list-chrome .head-tasks {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 8px; color: var(--muted);
}
.list-chrome .head-pin:hover,
.list-chrome .head-route:hover,
.list-chrome .head-tasks:hover { background: var(--seg-bg); transform: translateY(-1px); }
.list-chrome .head-pin.on,
.list-chrome .head-tasks.on {
  color: var(--brand);
  background: var(--sky-soft);
}
.list-chrome .head-pin.on svg { fill: var(--sky); stroke: var(--brand); }
.theme-dark .list-chrome .head-pin.on { color: var(--sky); background: #132b3f; }
.theme-dark .list-chrome .head-pin.on svg { fill: var(--sky); stroke: var(--sky); }

.list-chrome .list-search input {
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font-size: 13px;
}
.list-chrome .list-search input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px #b6e6f7;
}

.gs-row .grp select,
.list-chrome .list-filt select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background-color: var(--seg-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding: 0 22px 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  box-shadow: none;
  max-width: 100%;
}
.theme-dark .gs-row .grp select,
.theme-dark .list-chrome .list-filt select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b96ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.list-chrome .list-filt,
.list-chrome .list-sort,
.list-chrome .list-period {
  overflow-x: auto;
  scrollbar-width: none;
}
.list-chrome .list-filt::-webkit-scrollbar,
.list-chrome .list-sort::-webkit-scrollbar { display: none; }

/* —— redovi liste (desktop/tablet: kartice kao 14; telefon ostaje stari list-item) —— */
@media (min-width: 768px) {
  .list-pane .list-item,
  #driver-stats-list .list-item,
  #vehicle-list .list-item {
    border-bottom: 0;
    border-radius: 10px;
    margin: 0 6px 1px;
    padding: 9px 10px;
    gap: 10px;
  }
  .list-pane .list-item:hover,
  #driver-stats-list .list-item:hover,
  #vehicle-list .list-item:hover {
    background: var(--row-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-row);
  }
  .list-pane .list-item.active,
  .list-pane .task-card.active,
  #detail-pane .task-card.active,
  #driver-stats-list .list-item.active,
  #vehicle-list .list-item.active {
    background: var(--surface);
    box-shadow: var(--shadow-row);
  }
  .theme-dark .list-pane .list-item.active,
  .theme-dark .list-pane .task-card.active,
  .theme-dark #detail-pane .task-card.active,
  .theme-dark #driver-stats-list .list-item.active,
  .theme-dark #vehicle-list .list-item.active {
    background: var(--surface);
    box-shadow: var(--shadow-row);
  }
  .list-pane .list-item .avatar {
    width: 34px; height: 34px; font-size: 10px;
  }
  .list-pane .task-card {
    border: 0;
    border-radius: 10px;
    margin: 2px 8px;
    box-shadow: none;
  }
  .list-pane .task-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-row);
  }
  .list-pane #chat-list,
  .list-pane #task-list,
  .list-pane #driver-stats-list,
  .list-pane #vehicle-list { padding: 0 2px 12px; }
}

button.row-pin {
  border: 0;
  background: transparent;
  color: #c5cdd6;
  width: 28px; height: 28px;
  border-radius: 8px;
}
button.row-pin:hover { color: var(--ink); background: var(--seg-bg); border-color: transparent; }
button.row-pin.on {
  background: var(--sky-soft);
  color: var(--brand);
  border-color: transparent;
}
button.row-pin.on svg { fill: var(--sky); stroke: var(--brand); }
.theme-dark button.row-pin.on { background: #132b3f; color: var(--sky); }
.theme-dark button.row-pin.on svg { fill: var(--sky); stroke: var(--sky); }
.acts-row .act, .acts-row a.dd-btn { color: var(--ink); }
.acts-row .act:hover, .acts-row a.dd-btn:hover { background: var(--sky-soft); }
.acts-row .act.on, .acts-row a.dd-btn.on { background: var(--brand); color: #fff; }

/* —— markeri vozila u LISTAMA (faza 3) ——
   Karta se ne dira: pločice (OSM/satelit) su svijetle u obje teme, pa marker na njima
   zadržava navy prsten i bijeli rub oznake. Mijenja se samo glif u popisu — on stoji na
   pozadini aplikacije, gdje navy prsten u tamnoj temi nestane. `vehicle-marker.js` čita
   ove varijable s fallbackom, pa Admin WEB i stari /app/ ostaju nepromijenjeni. */
.theme-dark {
  --veh-ring: var(--sky);
  --veh-badge-edge: var(--list-bg);
}

/* —— chat bubble-i (14) —— */
.chat-messages { background: var(--surface-2); padding: 14px 16px; }
.msg-bubble {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.45;
}
.msg-row.received .msg-bubble {
  background: var(--surface);
  border: 0;
  border-bottom-left-radius: 5px;
  box-shadow: var(--shadow-row);
  color: var(--text);
}
.msg-row.sent .msg-bubble {
  background: linear-gradient(180deg, #16357a 0%, #0b1e5e 100%);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.theme-dark .msg-row.sent .msg-bubble {
  background: linear-gradient(180deg, #1a3a7a 0%, #0b1e5e 100%);
}
.theme-dark .msg-row.received .msg-bubble {
  background: var(--surface);
  color: var(--text);
  border: 0;
}
.msg-urgent {
  border-left: 0;
  box-shadow: inset 3px 0 0 var(--red), var(--shadow-row);
}
.msg-warning {
  border-left: 0;
  box-shadow: inset 3px 0 0 var(--orange), var(--shadow-row);
}
.msg-row.sent .msg-urgent {
  box-shadow: inset 3px 0 0 #ff8a8a;
}
.msg-row.sent .msg-warning {
  box-shadow: inset 3px 0 0 #f0b64a;
}

.chat-input {
  background: var(--surface);
  padding: 8px 10px 10px;
  border-top: 0;
  gap: 8px;
}
.chat-input input {
  border: 0;
  border-radius: 20px;
  padding: 9px 14px;
  background: var(--list-bg);
  box-shadow: none;
}
.chat-input input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px #b6e6f7;
  background: var(--surface);
  border-color: transparent;
}
.chat-input .send-btn {
  width: 34px; height: 34px;
  background: var(--brand);
}

/* —— redci u Nadzoru (klasa `dock-row` je ostala iz starog docka) —— */
.dock-row { border-radius: 8px; }
.dock-row:hover { background: var(--list-bg); }
.dock-row.on {
  background: var(--sky-soft);
  box-shadow: none;
}
.theme-dark .dock-row.on {
  background: #132b3f;
  box-shadow: none;
}

/* —— gutteri svijetle na hover (14) —— */
.gutter::after {
  transition: opacity .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.gutter:hover::after, .gutter.drag::after {
  opacity: 1;
  background: var(--sky);
  box-shadow: 0 0 0 2px rgba(92,200,240,.35);
}

/* —— gumbi na karti (14) —— */
.map-btn {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(11,30,94,.12);
  transition: transform .15s, background .15s;
}
.map-btn:hover { transform: translateY(-1px); }
.map-btn.on { background: var(--brand); color: #fff; }
.theme-dark .map-btn {
  color: var(--sky);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.theme-dark .map-btn.on { background: var(--sky); color: var(--navy-deep); }

/* ⚠ `.hist-*` pravila obrisana 30.08.2026. (Y11) — ekran povijesti (`history.js`)
   više ne postoji. Iz grupiranih selektora iznad maknut je samo taj član. */

.nadzor-card {
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.shell-modal-box { background: var(--surface); border-radius: 14px; }

.snap-row:hover { background: var(--sky-soft); }
.snap-table th { background: var(--list-bg); color: var(--muted); }

/* telefon: chrome ostaje, floating rail i kartice lista se ne forsiraju */
@media (max-width: 767px) {
  .rail { margin: 0; border-radius: 0; box-shadow: none; }
  .ws-head h2 { color: #fff; }
  .theme-dark .ws-head h2 { color: #fff; }
}

.list-chrome .head-snap {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 8px; color: var(--muted);
}
.list-chrome .head-snap:hover { background: var(--seg-bg); transform: translateY(-1px); }
.acts-row .act.snap-back { color: var(--brand); }
.acts-row .act.snap-back:hover { background: var(--sky-soft); }

/* —— snimke: sazetak i trake u tamnoj temi —— */
.theme-dark { --chart-bar: #60a5fa; }
.snap-kpi { background: var(--surface-2); }
.snap-kpi .v { color: var(--ink); }
.snap-chart { background: var(--surface); box-shadow: var(--shadow-soft); }
.snap-ch-h { color: var(--ink); }
.theme-dark .snap-brow .track { background: var(--surface-2); }

/* —— pita i odabrani redak u tamnoj temi —— */
.theme-dark .snap-pie .pie-c1 { fill: var(--ink); }
.theme-dark .snap-cat-ico { background: #132b3f; color: var(--sky); }
.list-pane .list-item.active,
.list-pane .task-card.active,
#driver-stats-list .list-item.active,
#vehicle-list .list-item.active,
#chat-list .list-item.active {
  background: var(--sky-soft) !important;
  box-shadow: inset 3px 0 0 0 var(--brand), 0 2px 10px rgba(11,30,94,.16) !important;
}
.theme-dark .list-pane .list-item.active,
.theme-dark .list-pane .task-card.active,
.theme-dark #driver-stats-list .list-item.active,
.theme-dark #vehicle-list .list-item.active,
.theme-dark #chat-list .list-item.active {
  background: #16304a !important;
  box-shadow: inset 3px 0 0 0 var(--sky), 0 2px 10px rgba(0,0,0,.4) !important;
}