/* =====================================================================================================
   Videz v slogu Apple design (nadgradnja erp.css, naloži se za njim)
   Načela: zadržanost (manj črt in barv, več praznega prostora), sistemska pisava z optičnimi velikostmi,
   prosojni materiali z zameglitvijo (glava, meni, okna), mehke sence za globino, fizično gibanje (vzmetne krivulje),
   jasen odziv na dotik (pritisk, fokus) in spoštovanje nastavitve »manj gibanja«.
   Barve podjetja (modra Jereb Elektronika) ostanejo; spremenijo se nevtralne barve, oblike in gibanje.
   ===================================================================================================== */
:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --paper:#f5f5f7; --card:#ffffff; --ink:#1d1d1f; --soft:#6e6e73; --faint:#86868b;
  --line:rgba(60,60,67,.13); --line-2:rgba(60,60,67,.22); --fill:rgba(118,118,128,.12); --fill-2:rgba(118,118,128,.2);
  --head-bg:transparent; --head-ink:#6e6e73;
  --mat:rgba(255,255,255,.72); --mat-side:rgba(246,246,248,.8); --mat-blur:saturate(180%) blur(20px);
  --shadow:0 1px 1px rgba(0,0,0,.03),0 4px 14px rgba(0,0,0,.05); --shadow-lift:0 2px 6px rgba(0,0,0,.05),0 18px 44px rgba(0,0,0,.12);
  --r:14px; --r-ctl:9px; --r-pill:999px;
  --spring:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.22,1,.36,1); --t-fast:140ms; --t-mid:260ms; --t-slow:420ms;
  --focus:0 0 0 3px color-mix(in srgb,var(--brand) 32%,transparent);
}
@media (prefers-color-scheme: dark){
  :root{--paper:#000000;--card:#1c1c1e;--ink:#f5f5f7;--soft:#a1a1a6;--faint:#8e8e93;--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16);
    --fill:rgba(118,118,128,.24);--fill-2:rgba(118,118,128,.34);--head-ink:#a1a1a6;--mat:rgba(28,28,30,.72);--mat-side:rgba(22,22,24,.82);
    --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 6px 20px rgba(0,0,0,.35);--shadow-lift:0 24px 60px rgba(0,0,0,.6)}
}

/* ---------- pisava ---------- */
html,body{font-family:var(--font);font-size:14px;line-height:1.47;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.kpi .v,.punch-clock,.al-time{font-family:var(--font-display);letter-spacing:-.015em}
.topbar h2{font-size:19px;font-weight:650;letter-spacing:-.022em}
.card h3,.modal-h h3{font-size:15px;font-weight:600;letter-spacing:-.012em}
.hint,.muted,label{letter-spacing:0}
.mono,td.num,th.num,.kpi .v{font-variant-numeric:tabular-nums}

/* ---------- materiali: glava in stranski meni (prosojno z zameglitvijo) ---------- */
.side{background:var(--mat-side);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);border-right:1px solid var(--line);border-top:3px solid var(--brand)}
.topbar{background:var(--mat);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);border-bottom:1px solid var(--line);border-top:0;padding:10px 22px;min-height:56px}
.brand{border-bottom:1px solid var(--line)}
nav{padding:6px 10px}
.nav-group{font-size:11px;font-weight:600;text-transform:none;letter-spacing:.01em;color:var(--faint);padding:16px 10px 5px}
.navlink{padding:7px 10px;border-radius:8px;transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.navlink:hover{background:var(--fill)}
.navlink.active{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand-d);font-weight:600;box-shadow:none}
.badge{border-radius:var(--r-pill);font-weight:600;font-variant-numeric:tabular-nums;padding:0 7px;line-height:18px}
.side-foot{border-top:1px solid var(--line)}

/* ---------- vsebina ---------- */
.view{padding:22px 26px 64px}
.card{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 18px 16px}
.kpis{gap:12px}
.kpi{border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px}
.kpi .l{font-size:12px;font-weight:500;color:var(--soft)} .kpi .v{font-size:26px;font-weight:650;line-height:1.15;margin-top:4px} .kpi .s{color:var(--faint)}
.kpi.bad,.kpi.good{border-top-color:var(--line)}
.kpi.bad .l::before,.kpi.good .l::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--red)} .kpi.good .l::before{background:var(--green)}

/* ---------- gumbi: jasen odziv na pritisk ---------- */
.btn{border-radius:var(--r-ctl);border:1px solid var(--line-2);padding:7px 14px;font-weight:500;background:var(--card);transition:transform var(--t-fast) var(--spring),background-color var(--t-fast) ease,border-color var(--t-fast) ease,box-shadow var(--t-fast) ease,filter var(--t-fast) ease;-webkit-tap-highlight-color:transparent}
.btn:hover{border-color:var(--line-2);background:color-mix(in srgb,var(--card) 92%,var(--ink))}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn.primary{border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.08)} .btn.primary:hover{background:var(--brand);filter:brightness(1.08)}
.btn.danger{border-color:var(--line-2)} .btn.danger:hover{background:var(--red-bg);border-color:transparent}
.btn.ghost{border-color:transparent;background:transparent} .btn.ghost:hover{background:var(--fill)}
.btn.sm{padding:4px 10px;font-size:12.5px;border-radius:7px}
.punch-btn{border-radius:16px;transition:transform var(--t-fast) var(--spring),filter var(--t-fast) ease;box-shadow:0 1px 2px rgba(0,0,0,.08)} .punch-btn:active{transform:scale(.98)}

/* ---------- vnosna polja ---------- */
input,select,textarea{border-radius:var(--r-ctl);border:1px solid var(--line-2);padding:8px 10px;background:var(--card);transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
label{font-weight:500}
::placeholder{color:var(--faint);opacity:1}

/* ---------- zavihki kot segmentni preklopnik ---------- */
.tabs{display:inline-flex;max-width:100%;gap:2px;padding:2px;background:var(--fill);border:0;border-radius:var(--r-ctl);margin-bottom:16px;overflow:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:6px 14px;border:0;border-radius:7px;color:var(--ink);font-weight:500;font-size:13px;transition:background-color var(--t-mid) var(--spring),box-shadow var(--t-mid) var(--spring),color var(--t-fast) ease}
.tab:hover{color:var(--ink);background:var(--fill)}
.tab.active{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 1px rgba(0,0,0,.04),0 2px 6px rgba(0,0,0,.1)}
@media (prefers-color-scheme: dark){.tab.active{background:#636366;color:#fff}}

/* ---------- tabele: brez težkih glav, tanke ločnice ---------- */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
th{background:var(--card);color:var(--head-ink);font-weight:600;font-size:12px;border-bottom:1px solid var(--line-2)}
th,td{border-bottom:1px solid var(--line);padding:9px 12px}
tbody tr{transition:background-color var(--t-fast) ease}
tbody tr.click:hover td{background:color-mix(in srgb,var(--brand) 7%,transparent)}
tfoot td{background:var(--paper)}
.pill{border-radius:var(--r-pill);border:0;background:var(--fill);color:var(--soft);font-weight:500;padding:2px 9px}
.lv{border-radius:var(--r-pill);font-weight:500}
.bar{border:0;background:var(--fill);border-radius:var(--r-pill);height:8px} .bar>i{border-radius:var(--r-pill)}

/* ---------- okna (sheet): zameglitev ozadja, vzmetno odpiranje ---------- */
.modal-bg{background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);animation:ap-fade var(--t-mid) ease-out}
.modal{border-radius:18px;box-shadow:var(--shadow-lift);border:1px solid var(--line);animation:ap-pop var(--t-slow) var(--spring);transform-origin:50% 30%;overflow:hidden}
.modal-h{border-bottom:1px solid var(--line);padding:14px 18px}
.modal-f{border-top:1px solid var(--line);background:color-mix(in srgb,var(--card) 96%,var(--ink))}
@keyframes ap-fade{from{opacity:0}to{opacity:1}}
@keyframes ap-pop{from{opacity:0;transform:translateY(10px) scale(.965)}to{opacity:1;transform:none}}

/* ---------- obvestila (toast): material, vzmetni prihod ---------- */
.toast{background:rgba(44,44,46,.92);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);border-radius:14px;padding:11px 16px;box-shadow:0 10px 30px rgba(0,0,0,.22);animation:ap-toast var(--t-slow) var(--spring)}
.toast.err{background:color-mix(in srgb,var(--red) 92%,transparent)}
@keyframes ap-toast{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- prehod med stranmi (kratek, brez skokov; ob sprotnem osveževanju ga ni) ---------- */
.view-page{animation:ap-page var(--t-mid) var(--ease-out)}
.view-page.no-anim{animation:none}
@keyframes ap-page{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- prijava ---------- */
.login{background:radial-gradient(1200px 600px at 20% 0%,color-mix(in srgb,var(--brand) 85%,#fff) 0%,var(--brand) 45%,var(--brand-d) 100%)}
.login-card{border-radius:22px;padding:30px 28px;box-shadow:0 30px 80px rgba(8,20,50,.38);background:color-mix(in srgb,var(--card) 90%,transparent);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);border:1px solid rgba(255,255,255,.35)}
@media (prefers-color-scheme: dark){.login-card{border-color:rgba(255,255,255,.08)}}

/* ---------- drobnosti ---------- */
a.btn,a.btn:hover{text-decoration:none}
.topbar h2{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{color:var(--faint)}
.demo-note,.os-ask{border-radius:12px}
.live-bar{border:0;background:color-mix(in srgb,var(--brand) 12%,var(--card));box-shadow:0 1px 2px rgba(0,0,0,.06)}
.al-pop{border-radius:20px;border:1px solid var(--line);background:var(--mat);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);box-shadow:var(--shadow-lift);animation:ap-drop var(--t-slow) var(--spring)}
@keyframes ap-drop{from{opacity:0;transform:translate(-50%,-8px) scale(.97)}to{opacity:1;transform:translate(-50%,0)}}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 35%,transparent);outline-offset:1px}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
::selection{background:color-mix(in srgb,var(--brand) 22%,transparent)}

/* ---------- telefon: meni kot predal, okna kot spodnji list (sheet) ---------- */
@media (max-width:900px){
  .side{left:0;transform:translateX(-105%);transition:transform var(--t-slow) var(--spring);width:264px;border-right:1px solid var(--line)}
  .side.open{left:0;transform:none;box-shadow:0 0 60px rgba(0,0,0,.25)}
  .side.dragging{transition:none}
  .side{touch-action:pan-y}
  .view{padding:14px 12px 64px} .topbar{padding:8px 12px;min-height:52px}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)} .card,.kpi{min-width:0} /* široke tabele se drsajo znotraj kartice, stran se ne razširi */
}
@media (max-width:760px){
  .modal-bg{place-items:end stretch;padding:0;align-content:end}
  .modal,.modal.wide{max-width:none;width:100%;border-radius:18px 18px 0 0;border-bottom:0;max-height:92vh;display:flex;flex-direction:column;animation:ap-sheet var(--t-slow) var(--spring);transform-origin:50% 100%}
  .modal .modal-b{overflow:auto}
  .modal-h{position:relative;padding-top:20px;touch-action:none;cursor:grab}
  .modal-h::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:var(--line-2)}
  .modal.dragging{transition:none;animation:none}
  .modal.snap{transition:transform var(--t-mid) var(--spring)}
  #toast-root{left:12px;right:12px;bottom:14px;justify-items:center}
  @keyframes ap-sheet{from{transform:translateY(100%)}to{transform:none}}
}

/* ---------- manj gibanja ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .btn:active:not(:disabled),.punch-btn:active{transform:none}
}