/* =========================================================
   HUB v2 — svetla tema + "Danas uživo" + pozdrav (okt 2026)
   Sloj preko hub.css + hub-studio.css. Svetla tema: <html class="st lt">.
   ========================================================= */

/* ── pozdrav i "Danas uživo" (obe teme) ── */
.v2-hello { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin: 6px 0 18px; }
.v2-hello small { display: block; font: 600 14px/1 var(--font, system-ui); color: var(--text-dim); margin-bottom: 8px; }
.v2-hello h2 { margin: 0; font: 800 32px/1.05 var(--font-d, system-ui); letter-spacing: -.04em; color: var(--text); }
.v2-live { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 22px; }
.v2-live button { all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; border-radius: 22px; padding: 15px 16px 14px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-height: 104px; transition: transform .3s var(--spring, ease), border-color .2s; animation: hsIn .55s var(--st-ease, ease) both; }
.v2-live button:nth-child(2) { animation-delay: .05s } .v2-live button:nth-child(3) { animation-delay: .1s }
.v2-live button:hover { border-color: var(--line-2); } .v2-live button:active { transform: scale(.97); }
.v2-live .k { font: 700 12px/1 var(--font, system-ui); color: var(--text-dim); display: flex; align-items: center; gap: 7px; }
.v2-live .k i { width: 7px; height: 7px; border-radius: 50%; background: #30D158; box-shadow: 0 0 0 0 rgba(48,209,88,.6); animation: v2Live 2s infinite; }
@keyframes v2Live { 70% { box-shadow: 0 0 0 7px rgba(48,209,88,0); } 100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); } }
.v2-live b { font: 800 30px/1.05 var(--font-d, system-ui); letter-spacing: -.04em; color: var(--text); position: relative; z-index: 1; }
.v2-live small { font: 600 12px/1.2 var(--font, system-ui); color: var(--text-dim); position: relative; z-index: 1; }
.v2-live small em { font-style: normal; color: var(--acc); }
.v2-live svg.sp { position: absolute !important; right: 0; bottom: 0; width: 60% !important; height: 46px !important; opacity: .9; fill: none !important; stroke: none !important; }
.v2-live svg.sp path.l { stroke: var(--acc) !important; stroke-width: 2 !important; fill: none !important; vector-effect: non-scaling-stroke; }
.v2-live svg.sp path.a { fill: color-mix(in srgb, var(--acc) 16%, transparent) !important; stroke: none !important; }
@media (max-width: 760px) { .v2-live { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .v2-live button { padding: 12px; min-height: 92px; border-radius: 18px; } .v2-live b { font-size: 24px; } .v2-hello h2 { font-size: 26px; } .v2-live small { display: none; } }

/* ── prekidač teme u gornjoj traci ── */
.v2-theme { all: unset; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--text); transition: transform .3s var(--spring, ease); }
.v2-theme:active { transform: scale(.9) rotate(-20deg); }
.v2-theme svg { width: 18px !important; height: 18px !important; }

/* ── install dugme (kad pregledač nudi instalaciju) ── */
.v2-install { all: unset; cursor: pointer; height: 38px; padding: 0 14px; border-radius: 999px; display: none; align-items: center; gap: 7px; background: rgba(255,138,0,.14); color: var(--acc); font: 700 13px/1 var(--font, system-ui); }
.v2-install.on { display: inline-flex; }
.v2-install svg { width: 16px !important; height: 16px !important; }

/* ══════════════ SVETLA TEMA ══════════════ */
html.st.lt {
  --bg: #F2F2F7; --panel: #FFFFFF; --panel-2: #F2F2F7; --card-solid: #FFFFFF; --card: #FFFFFF; --card-bg: #FFFFFF;
  --line: rgba(0,0,0,.07); --line-2: rgba(0,0,0,.12); --hi: rgba(0,0,0,.06); --stroke: rgba(0,0,0,.07); --stroke2: rgba(0,0,0,.05);
  --text: #111113; --text-main: #111113; --text-dim: #6E6E73; --muted: #6E6E73; --fill: rgba(0,0,0,.05);
  --acc: #F57C00; --ok: #1F9D46; --red: #E5372B;
  color-scheme: light;
}
html.st.lt body { background: var(--bg) !important; color: var(--text); }
html.st.lt ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); }
/* trake i meni */
html.st.lt .ios-top-bar { background: rgba(242,242,247,.82) !important; border-bottom-color: var(--line) !important; }
html.st.lt .app-title, html.st.lt .clock { color: var(--text) !important; }
html.st.lt .hub-logo { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
html.st.lt .ios-dock, html.st.lt nav.ios-dock, html.st.lt .dock { background: rgba(255,255,255,.86) !important; border-color: var(--line) !important; box-shadow: 0 10px 30px -12px rgba(0,0,0,.18) !important; }
html.st.lt .dock-item { color: #6E6E73 !important; }
html.st.lt .dock-item.active { color: var(--acc) !important; background: rgba(245,124,0,.10) !important; box-shadow: none !important; }
html.st.lt .dock-item.active svg { filter: none; }
/* kartice i površine */
html.st.lt .bento-box:not(.full-width), html.st.lt .ios-card, html.st.lt .loc-card, html.st.lt .sms-card, html.st.lt .an-card, html.st.lt .an-tile, html.st.lt .v2-live button {
  background: #fff !important; border-color: rgba(0,0,0,.06) !important; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18) !important; }
html.st.lt .bento-box.accent-1.full-width { box-shadow: 0 18px 40px -18px var(--acc) !important; }
html.st.lt .bento-box:not(.full-width) .bento-icon { border-color: rgba(0,0,0,.06) !important; box-shadow: none !important; }
html.st.lt .bento-box.accent-5 .bento-icon { background: rgba(0,0,0,.05) !important; color: #111 !important; }
html.st.lt .bento-box.accent-4 .bento-val { color: var(--red) !important; }
html.st.lt .bento-box:not(.full-width) .bento-val, html.st.lt .ios-section-title, html.st.lt .card-title, html.st.lt .loc-title, html.st.lt h1, html.st.lt h2, html.st.lt h3 { color: var(--text) !important; }
html.st.lt .bento-lbl, html.st.lt .loc-sub, html.st.lt p { color: var(--text-dim); }
html.st.lt [class*="loc-info"], html.st.lt .loc-grid, html.st.lt .loc-details, html.st.lt .info-box { background: #F5F5F8 !important; border-color: rgba(0,0,0,.05) !important; }
/* polja i dugmad */
html.st.lt input, html.st.lt select, html.st.lt textarea { background: #fff !important; color: var(--text) !important; border-color: rgba(0,0,0,.12) !important; }
html.st.lt .ios-search-bar input { background: #fff !important; }
html.st.lt .ios-btn-text, html.st.lt .ios-btn-action, html.st.lt .sms-filter-btn, html.st.lt .audit-chip, html.st.lt .audit-stat-pill { background: #fff !important; color: var(--text) !important; border-color: rgba(0,0,0,.1) !important; }
html.st.lt .ios-btn-action:hover, html.st.lt .ios-btn-text:hover { background: #F2F2F7 !important; }
html.st.lt .sms-filter-btn.active, html.st.lt .audit-chip.active { background: var(--acc) !important; color: #fff !important; border-color: var(--acc) !important; }
/* tabele, modali */
html.st.lt table, html.st.lt .audit-table-wrap { background: #fff !important; color: var(--text); }
html.st.lt .audit-table thead tr, html.st.lt #sessions-table thead tr { background: #F5F5F8 !important; }
html.st.lt .audit-table td, html.st.lt .audit-table th, html.st.lt #sessions-table td, html.st.lt #sessions-table th { color: var(--text) !important; border-color: rgba(0,0,0,.06) !important; }
html.st.lt .ios-modal-overlay { background: rgba(0,0,0,.28) !important; }
html.st.lt .ios-modal, html.st.lt .ios-sheet, html.st.lt .sheet, html.st.lt .alert-box, html.st.lt .modal-content { background: #fff !important; color: var(--text) !important; box-shadow: 0 -20px 60px rgba(0,0,0,.18) !important; }
html.st.lt .sheet-handle { background: rgba(0,0,0,.15) !important; }
html.st.lt .sheet-close, html.st.lt .alert-btn { background: rgba(0,0,0,.05) !important; color: var(--text) !important; }
html.st.lt .skeleton { background: linear-gradient(90deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 75%) !important; background-size: 200% 100% !important; }
/* konzola ostaje tamna (terminal), ali sa svetlim okvirom */
html.st.lt #tab-console pre, html.st.lt .console-box, html.st.lt .terminal { background: #1C1C1E !important; color: #E5E5EA !important; }
/* analitika u svetloj temi */
html.st.lt .an-seg button.on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
html.st.lt .an-tip { background: #1C1C1E; }
html.st.lt .an-bars rect.b { fill: rgba(0,0,0,.07); }
html.st.lt .bento-box.accent-4:not(.full-width) .bento-val { color: var(--red) !important; }
html.st.lt .data-val { color: var(--text) !important; } html.st.lt .data-val.text-blue { color: #0A6CDB !important; }

/* ── iPhone kao instalirana aplikacija: sadržaj ne sme da upadne pod sat/bateriju ni pod crticu na dnu ──
   env(safe-area-*) je 0 u običnom pregledaču i na računaru, pa se tamo ništa ne menja. */
@media (min-width: 1024px) {
  .ios-top-bar { margin-top: calc(16px + env(safe-area-inset-top)) !important; }
}
@media (max-width: 1023.98px) {
  .ios-top-bar { padding-top: calc(14px + env(safe-area-inset-top)) !important; padding-left: max(20px, env(safe-area-inset-left)) !important; padding-right: max(20px, env(safe-area-inset-right)) !important; }
  .ios-dock { bottom: calc(12px + env(safe-area-inset-bottom)) !important; left: max(12px, env(safe-area-inset-left)) !important; right: max(12px, env(safe-area-inset-right)) !important; }
  .main-container { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
}
/* svetla tema na iPhone-u (aplikacija): sat i baterija su uvek beli, pa iza njih ide tamna traka visine statusne trake */
@media (max-width: 1023.98px) {
  html.st.lt .ios-top-bar { background: linear-gradient(#1C1C1E 0, #1C1C1E env(safe-area-inset-top), rgba(242,242,247,.86) env(safe-area-inset-top)) !important; }
}
/* Postavke → SMS tablet */
.v2d-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.v2d-row:first-child { border-top: 0; }
.v2d-row span { flex: 1; min-width: 0; } .v2d-row b { display: block; font-size: 14px; color: var(--text); }
.v2d-row small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.v2d-old { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; background: rgba(48,209,88,.12); color: var(--ok, #30D158); }
.v2d-old.on { background: rgba(255,159,10,.12); color: var(--acc); }
.v2m-st { font: 700 11px/1 var(--font, system-ui); font-style: normal; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.v2m-st.ok { background: rgba(48,209,88,.14); color: var(--ok, #30D158); } .v2m-st.bad { background: rgba(255,69,58,.14); color: var(--red, #FF453A); }