/* ==========================================================================
   Termini — prikaz urnika za salone (HitraStran)
   Oblikovni žetoni in skupne komponente. Predloga: design_handoff_termini v3.
   Vsi razredi se začnejo s t- ; posamezni zasloni dodajo svoje s predpono
   sc-<zaslon>- v pripadajoči .css datoteki.
   ========================================================================== */

:root{
  /* barve */
  --blue:#3a56e8;
  --blue-lt:#7b93f5;
  --tile:#eef0fd;
  --d1:#08091a;
  --d2:#0e0f22;
  --d3:#141530;
  --cream:#f7f5f2;
  --white:#ffffff;
  --ink:#080808;
  --ink2:#757575;
  --ink3:#9a9a9a;
  --block:#e9e7e4;
  --block-grid:#cfd2de;
  --block-ink:#6f6c68;
  --block-ink2:#8d8a86;
  --green:#34d399;
  --red:#d13c3c;
  --red-tile:#fdeaea;
  --red-ink:#a82a2a;
  --red-ink2:#b04a4a;
  --orange:#e8a33a;
  --orange-tile:#fef3e2;
  --orange-ink:#b06f10;
  --orange-ink2:#95611a;
  --line:rgba(8,9,26,.06);
  --line2:rgba(8,9,26,.08);
  --line3:rgba(8,9,26,.12);
  --card-bd:rgba(8,9,26,.05);
  --on-dark:rgba(255,255,255,.09);
  --on-dark2:rgba(255,255,255,.18);
  /* pisave */
  --head:'Sora',system-ui,sans-serif;
  --body:'Outfit',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* premiki */
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--body);
  background:var(--d1);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
input,textarea,select{font:inherit;color:inherit}
svg{display:block;flex:none}
::selection{background:var(--blue);color:#fff}

/* ---------- ogrodje ---------- */
.t-app{position:fixed;inset:0;display:flex;background:var(--cream);overflow:hidden}
.t-screen{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--cream)}

/* temna glava (mobilno) */
.t-head{background:var(--d2);padding:0 22px 24px;flex:none;position:relative;z-index:2}
.t-status{display:flex;justify-content:space-between;align-items:center;
  font:500 12px/1 var(--mono);color:rgba(255,255,255,.5);padding:18px 4px 22px}
.t-status .t-dot{width:6px;height:6px;border-radius:999px;background:var(--green);display:inline-block}
.t-status.is-full .t-dot{background:var(--red)}
.t-status.is-full .t-sms{color:#f08c8c}
.t-status-r{display:flex;align-items:center;gap:7px}
.t-kicker{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--blue-lt);text-transform:uppercase}
.t-title{font:700 44px/1 var(--head);letter-spacing:-.04em;color:#fff;margin-top:14px}
.t-sub{display:flex;align-items:center;gap:10px;margin-top:12px;
  font:400 17px/1 var(--body);color:rgba(255,255,255,.72)}
.t-sub b{font-weight:500;color:var(--blue-lt)}
.t-eye{width:16px;height:16px;color:rgba(255,255,255,.45);cursor:pointer}
.t-eye:hover{color:rgba(255,255,255,.8)}
.t-band{height:30px;flex:none;
  background:linear-gradient(180deg,var(--d2) 0%,rgba(58,86,232,.3) 48%,var(--cream) 100%)}

/* steklo */
.t-glass{background:rgba(255,255,255,.07);backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid var(--on-dark2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.t-glass-lt{background:rgba(255,255,255,.62);backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 30px -14px rgba(8,9,26,.3)}
.t-circ{width:42px;height:42px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;color:#fff;flex:none}
.t-daypill{height:42px;padding:0 22px;border-radius:999px;display:flex;align-items:center;
  background:rgba(123,147,245,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(123,147,245,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  font:500 14px/1 var(--body);color:#fff}
.t-daynav{display:flex;gap:8px;margin-top:22px}

/* seznam */
.t-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 18px 120px;
  display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.t-list::-webkit-scrollbar{width:0}

/* vrstica termina */
.t-row{background:var(--white);border:1px solid var(--card-bd);border-radius:22px;
  padding:14px 16px;display:flex;align-items:center;gap:14px;width:100%;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.t-row:hover{box-shadow:0 10px 24px -16px rgba(8,9,26,.35)}
.t-row:active{transform:scale(.995)}
.t-row.is-past{opacity:.55}
.t-row.is-sel{background:var(--tile);border-color:rgba(58,86,232,.35)}
.t-time{width:42px;flex:none;font:600 14px/1 var(--mono);color:var(--blue)}
.t-rowmid{flex:1;min-width:0}
.t-name{font:600 16px/1.2 var(--head);letter-spacing:-.015em;color:var(--ink);
  display:flex;align-items:center;gap:7px}
.t-meta{font:400 13px/1.35 var(--body);color:var(--ink2);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-done{width:15px;height:15px;border-radius:999px;background:var(--green);flex:none;
  display:flex;align-items:center;justify-content:center;color:#053b28}
.t-done svg{width:9px;height:9px}

/* SMS pilule — SMS je VEDNO pilula, nikoli ikona */
.t-pill{flex:none;font:500 11px/1 var(--body);padding:6px 10px;border-radius:999px;white-space:nowrap}
.t-pill--ok{background:var(--tile);color:var(--blue)}
.t-pill--wait{background:var(--white);border:1px solid var(--line3);color:var(--ink2)}
.t-pill--none{background:#ededeb;color:var(--ink2)}
.t-pill--fail{background:var(--red-tile);color:var(--red);cursor:pointer}
.t-pill--noshow{background:var(--red-tile);color:var(--red)}

/* blokada (Pavza, Dopust) */
.t-blockrow{background:var(--block);border-radius:22px;padding:14px 16px;display:flex;
  align-items:center;gap:14px;width:100%}
.t-blockrow .t-time{color:var(--block-ink2)}
.t-blockrow .t-name{font-weight:600;color:var(--block-ink)}
.t-blockrow .t-dur{font:500 13px/1 var(--mono);color:var(--block-ink2)}

/* prosta vrzel */
.t-gap{display:flex;align-items:center;gap:10px;padding:2px 4px}
.t-gap::before,.t-gap::after{content:"";flex:1;height:1px;background:rgba(8,9,26,.18)}
.t-gap span{font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}

/* oznaka ZDAJ */
.t-now{display:flex;align-items:center;gap:8px;padding:4px 2px}
.t-now i{width:7px;height:7px;border-radius:999px;background:var(--blue);flex:none;
  box-shadow:0 0 0 3px rgba(58,86,232,.18)}
.t-now b{flex:1;height:1.5px;background:var(--blue);border-radius:2px}
.t-now span{font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--blue)}

/* plavajoča navigacija */
.t-nav{position:absolute;left:16px;right:16px;bottom:18px;height:auto;border-radius:999px;
  padding:10px 24px 9px;display:flex;justify-content:space-between;align-items:center;z-index:30}
.t-nav button{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink3);
  flex:1;transition:color .2s var(--ease)}
.t-nav button span{font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.t-nav button svg{width:21px;height:21px}
.t-nav button.is-on{color:var(--blue)}

/* FAB */
.t-fab{position:absolute;right:20px;bottom:94px;width:62px;height:62px;border-radius:999px;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
  z-index:29;box-shadow:0 18px 34px -10px rgba(58,86,232,.75);transition:transform .2s var(--ease)}
.t-fab:active{transform:scale(.94)}
.t-fab svg{width:26px;height:26px}

/* ---------- kartice, ploščice ---------- */
.t-card{background:var(--white);border:1px solid var(--card-bd);border-radius:20px;padding:16px}
.t-cardlbl{font:600 10px/1 var(--mono);letter-spacing:.16em;color:var(--ink3);
  text-transform:uppercase;margin-bottom:10px}
.t-tile{background:var(--tile);border-radius:20px;padding:14px 16px}
.t-tile--red{background:var(--red-tile)}
.t-tile--orange{background:var(--orange-tile)}
.t-tile h4{font:600 15px/1.2 var(--head);letter-spacing:-.015em;color:var(--red-ink)}
.t-tile--orange h4{color:var(--orange-ink)}
.t-tile p{font:400 13px/1.45 var(--body);color:var(--red-ink2);margin-top:4px}
.t-tile--orange p{color:var(--orange-ink2)}

/* ---------- polja in gumbi ---------- */
.t-field{min-height:52px;background:var(--white);border:1px solid var(--line2);
  border-radius:999px;padding:0 18px;display:flex;align-items:center;gap:10px;width:100%}
.t-field--box{border-radius:18px;padding:14px 18px;align-items:flex-start;min-height:0}
.t-field--focus{border-color:var(--blue)}
.t-field label,.t-fieldlbl{font:400 13px/1 var(--body);color:var(--ink2);flex:none}
.t-fieldval{margin-left:auto;font:500 16px/1 var(--body);color:var(--ink);text-align:right}
.t-fieldval--mono{font:600 16px/1 var(--mono)}
.t-field input{flex:1;min-width:0;border:0;outline:0;background:none;font:500 16px/1 var(--body)}
.t-field input::placeholder{color:var(--ink3);font-weight:400}
.t-field svg{width:17px;height:17px;color:var(--ink2)}
.t-fields{display:flex;gap:10px}
.t-fields>*{flex:1;min-width:0}

.t-btn{height:56px;border-radius:999px;background:var(--blue);color:#fff;display:flex;
  align-items:center;justify-content:center;gap:9px;width:100%;
  font:600 16px/1 var(--head);letter-spacing:-.015em;
  box-shadow:0 16px 30px -12px rgba(58,86,232,.7);transition:transform .18s var(--ease),filter .18s}
.t-btn:hover{filter:brightness(1.06)}
.t-btn:active{transform:translateY(1px)}
.t-btn svg{width:18px;height:18px}
.t-btn[disabled],.t-btn.is-off{background:#c9cde6;box-shadow:none;cursor:default}
.t-btn[disabled]:hover,.t-btn.is-off:hover{filter:none}
.t-btn--green{background:var(--green);color:#053b28;box-shadow:0 16px 30px -12px rgba(52,211,153,.6)}
.t-btn--sec{height:50px;background:var(--white);color:var(--ink);border:1px solid var(--line2);
  box-shadow:none;font-size:15px}
.t-btn--danger{height:50px;background:var(--white);color:var(--red);border:1px solid rgba(209,60,60,.35);
  box-shadow:none;font-size:15px}
.t-btn--dangersolid{height:50px;background:var(--red);color:#fff;box-shadow:none;font-size:15px}
.t-btnrow{display:flex;gap:10px}
.t-btnrow>*{flex:1;min-width:0}
.t-undo{display:block;width:100%;text-align:center;font:400 14px/1 var(--body);
  color:var(--ink2);padding:12px 0}
.t-undo:hover{color:var(--blue)}

/* stikalo */
.t-switchrow{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--white);
  border:1px solid var(--card-bd);border-radius:18px}
.t-switchrow .t-swtxt{flex:1;min-width:0}
.t-switchrow .t-swtxt b{display:block;font:500 15px/1.25 var(--body);color:var(--ink)}
.t-switchrow .t-swtxt span{display:block;font:400 12.5px/1.4 var(--body);color:var(--ink2);margin-top:3px}
.t-switch{width:50px;height:30px;border-radius:999px;background:#d7d9e3;flex:none;position:relative;
  transition:background .22s var(--ease)}
.t-switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;
  background:#fff;box-shadow:0 2px 6px rgba(8,9,26,.25);transition:transform .22s var(--ease)}
.t-switch.is-on{background:var(--blue)}
.t-switch.is-on::after{transform:translateX(20px)}

/* čipi storitev */
.t-chips{display:flex;flex-wrap:wrap;gap:8px}
.t-chip{height:38px;padding:0 15px;border-radius:999px;background:var(--white);
  border:1px solid var(--line2);display:flex;align-items:center;gap:8px;
  font:500 14px/1 var(--body);color:var(--ink)}
.t-chip i{width:8px;height:8px;border-radius:999px;flex:none}
.t-chip.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.t-chip.is-on i{background:#fff!important}

/* ---------- spodnji list / stranski panel ---------- */
.t-dim{position:absolute;inset:0;background:rgba(8,9,26,.3);z-index:40;opacity:0;
  transition:opacity .26s var(--ease)}
.t-dim.is-in{opacity:1}
.t-sheet{position:absolute;left:0;right:0;bottom:0;top:106px;background:var(--cream);
  border-radius:34px 34px 0 0;z-index:41;display:flex;flex-direction:column;
  box-shadow:0 -24px 60px -20px rgba(58,86,232,.55);
  transform:translateY(100%);transition:transform .26s var(--ease)}
.t-sheet.is-in{transform:none}
.t-grab{width:44px;height:4px;border-radius:999px;background:rgba(8,9,26,.16);
  margin:12px auto 2px;flex:none}
.t-sheetbody{flex:1;min-height:0;overflow-y:auto;padding:10px 20px 20px;
  display:flex;flex-direction:column;gap:12px}
.t-sheetbody::-webkit-scrollbar{width:0}
.t-sheettitle{font:700 26px/1 var(--head);letter-spacing:-.03em;color:var(--ink);padding:4px 0 6px}
.t-seclbl{font:600 10px/1 var(--mono);letter-spacing:.16em;color:var(--ink3);
  text-transform:uppercase;margin:6px 0 -2px}
.t-push{margin-top:auto;padding-top:14px}

/* ---------- namizje ---------- */
.t-side{display:none}
@media(min-width:900px){
  .t-side{display:flex;flex-direction:column;width:250px;flex:none;background:var(--d2);
    padding:26px 18px 20px;gap:22px;overflow-y:auto}
  .t-side::-webkit-scrollbar{width:0}
  .t-wordmark{font:700 22px/1 var(--head);letter-spacing:-.035em;color:#fff;
    display:flex;align-items:center;gap:10px}
  .t-appmark{width:30px;height:30px;border-radius:9px;background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center;flex:none}
  .t-appmark svg{width:17px;height:17px}
  .t-sidenav{display:flex;flex-direction:column;gap:4px}
  .t-sidenav button{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
    color:rgba(255,255,255,.62);font:500 14.5px/1 var(--body);transition:background .2s,color .2s}
  .t-sidenav button svg{width:18px;height:18px}
  .t-sidenav button:hover{color:#fff;background:rgba(255,255,255,.05)}
  .t-sidenav button.is-on{background:rgba(123,147,245,.16);color:#fff}
  .t-sidefoot{margin-top:auto}
  .t-quota{background:rgba(255,255,255,.05);border:1px solid var(--on-dark);border-radius:14px;padding:12px}
  .t-quota .t-qlbl{font:600 10px/1 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.45);
    text-transform:uppercase}
  .t-quota .t-qval{font:600 15px/1 var(--mono);color:#fff;margin-top:8px}
  .t-qbar{height:6px;border-radius:999px;background:rgba(255,255,255,.12);margin-top:9px;overflow:hidden}
  .t-qbar i{display:block;height:100%;border-radius:999px;background:var(--blue-lt)}
  .t-qbar.is-warn i{background:var(--orange)}
  .t-qbar.is-full i{background:var(--red)}

  /* glava v namiznem pogledu je svetla */
  .t-head{background:transparent;padding:30px 32px 18px}
  .t-status{display:none}
  .t-kicker{color:var(--blue)}
  .t-title{font-size:30px;color:var(--ink);margin-top:10px}
  .t-sub{color:var(--ink2)}
  .t-sub b{color:var(--blue)}
  .t-eye{color:var(--ink3)}
  .t-band{display:none}
  .t-nav{display:none}
  .t-fab{display:none}
  .t-list{padding:0 32px 32px}
  .t-headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
  .t-newbtn{height:44px;padding:0 20px;border-radius:999px;background:var(--blue);color:#fff;
    display:flex;align-items:center;gap:8px;font:600 14.5px/1 var(--head);flex:none;
    box-shadow:0 12px 24px -12px rgba(58,86,232,.7)}
  .t-newbtn svg{width:16px;height:16px}
  .t-daynav{margin-top:0}
  .t-circ,.t-daypill{color:var(--ink)}
  .t-circ.t-glass,.t-daypill{background:var(--white);border:1px solid var(--line2);
    box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

  /* dvostolpčni seznami */
  .t-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;
    flex:1;min-height:0;padding:0 32px 32px}
  .t-two>*{min-width:0;overflow-y:auto}
  .t-two>*::-webkit-scrollbar{width:0}
  .t-twocol{display:flex;flex-direction:column;gap:10px}

  /* spodnji list postane desni panel */
  .t-sheet{top:0;left:auto;right:0;bottom:0;width:420px;border-radius:0;
    border-left:1px solid rgba(8,9,26,.1);box-shadow:-30px 0 80px -30px rgba(8,9,26,.45);
    transform:translateX(100%)}
  .t-sheet.is-in{transform:none}
  .t-grab{display:none}
  .t-sheetbody{padding:26px 24px 24px}
  .t-close{position:absolute;top:22px;right:20px;width:32px;height:32px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;color:var(--ink2);
    background:rgba(8,9,26,.05)}
  .t-close:hover{background:rgba(8,9,26,.1);color:var(--ink)}
  .t-close svg{width:15px;height:15px}
}
@media(max-width:899px){
  .t-close{display:none}
  .t-two{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;
    padding:16px 18px 120px;gap:10px}
  .t-two>*:last-child{display:none}
  .t-two.is-detail>*:first-child{display:none}
  .t-two.is-detail>*:last-child{display:block}
  .t-headrow{display:block}
  .t-newbtn{display:none}
  .t-twocol{display:flex;flex-direction:column;gap:10px}
}

/* ---------- podrobnost (termin, stranka) ----------
   Na telefonu samostojen zaslon s temno glavo, na namizju desni stolpec. */
.t-detail{display:flex;flex-direction:column;min-height:0}
.t-dethead{background:var(--d2);padding:0 22px 22px;flex:none;
  margin:-16px -18px 0;border-radius:0}
.t-dethead .t-status{padding:18px 4px 16px}
.t-backbtn{width:42px;height:42px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;color:#fff;flex:none;margin-bottom:16px}
.t-dethead .t-kicker{color:var(--blue-lt)}
.t-detname{font:700 38px/1.02 var(--head);letter-spacing:-.04em;color:#fff;margin-top:12px;
  overflow-wrap:break-word}
.t-detline{display:flex;align-items:center;gap:8px;margin-top:12px;
  font:400 16px/1.3 var(--body);color:rgba(255,255,255,.72);flex-wrap:wrap}
.t-detline b{font-weight:500;color:var(--blue-lt)}
.t-detband{height:30px;flex:none;margin:0 -18px;
  background:linear-gradient(180deg,var(--d2) 0%,rgba(58,86,232,.3) 48%,var(--cream) 100%)}
.t-detbody{display:flex;flex-direction:column;gap:12px;padding-top:16px;min-height:0}
.t-empty-det{display:none}

@media(max-width:899px){
  .t-screen.is-detail>.t-head,.t-screen.is-detail>.t-band{display:none}
}
@media(min-width:900px){
  .t-dethead{background:transparent;padding:0 0 4px;margin:0}
  .t-dethead .t-status{display:none}
  .t-backbtn{display:none}
  .t-dethead .t-kicker{color:var(--blue)}
  .t-detname{font-size:34px;color:var(--ink);margin-top:8px}
  .t-detline{color:var(--ink2)}
  .t-detline b{color:var(--blue)}
  .t-detband{display:none}
  .t-detbody{padding-top:18px}
  .t-empty-det{display:flex;flex-direction:column;align-items:center;justify-content:center;
    height:100%;gap:12px;text-align:center;color:var(--ink3);
    font:400 15px/1.5 var(--body);padding:40px}
  .t-empty-det .t-ed-ic{width:54px;height:54px;border-radius:999px;background:rgba(8,9,26,.04);
    display:flex;align-items:center;justify-content:center;color:var(--ink3)}
}

/* ==========================================================================
   Telefon: nizja glava in drsenje brez zatikanja
   - glava je bila visoka ~300 px od 844; na manjsem telefonu je pojedla pol zaslona
   - backdrop-filter pod plavajoco navigacijo se pri vsakem drsnem okvirju znova
     izrise in na telefonu zatika, zato je tam zamenjan s poltrdno podlago
   ========================================================================== */
@media(max-width:899px){
  .t-head{padding:0 18px 16px}
  .t-status{padding:12px 2px 10px;font-size:11.5px}
  .t-title{font-size:32px;margin-top:6px}
  .t-sub{margin-top:8px;font-size:15px}
  .t-daynav{margin-top:12px}
  .t-circ{width:38px;height:38px}
  .t-daypill{height:38px;padding:0 18px;font-size:13.5px}
  .t-band{height:18px}
  .t-list,.t-two{padding-top:12px}
  .t-detname{font-size:30px;margin-top:8px}
  .t-detline{margin-top:8px;font-size:15px}
  .t-backbtn{width:38px;height:38px;margin-bottom:10px}
  .t-dethead{padding:0 18px 16px}
  .t-detband{height:18px}

  /* ---- Drsi stran sama, ne okvir v okvirju ----
     Prej je bila aplikacija pribita na zaslon in je drsel notranji okvir. Na telefonu
     to zatika (prvi poteg včasih premakne stran namesto seznama) in ob vsakem izrisu
     skoči na vrh. Zdaj drsi dokument, kot pri navadni spletni strani: brskalnik to
     dela najbolj gladko, glava se ob drsenju umakne, spodnja vrstica pa je pribita.
     Izbirniki imajo predpono .t-screen, ker se modulni slogi naložijo za app.css. */
  html,body{height:auto;overflow:visible}
  body{overflow-x:hidden;background:var(--cream)}
  .t-app{position:relative;inset:auto;display:block;overflow:visible;
    min-height:100vh;min-height:100dvh}
  .t-screen{display:block;overflow:visible}
  .t-screen .t-screen-in{overflow:visible;min-height:0;height:auto}
  .t-screen .t-two,.t-screen .t-list,.t-screen .sc-preg-body,
  .t-screen .sc-nast-body,.t-screen .sc-nast-main{overflow:visible;min-height:0;flex:none}
  .t-screen .t-two{padding-bottom:128px}
  .t-screen .sc-preg-body,.t-screen .sc-nast-main{padding-bottom:128px}

  /* spodnja vrstica, list in zatemnitev so pribiti na zaslon, ne na vsebino */
  .t-nav{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    padding:8px 10px 7px;
    background:rgba(255,255,255,.96);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-color:rgba(8,9,26,.06);
    box-shadow:0 12px 32px -12px rgba(8,9,26,.45);transform:translateZ(0)}
  .t-nav button span{font-size:9px;letter-spacing:.03em}
  .t-dim{position:fixed}
  .t-sheet{position:fixed;top:64px}
  body.je-zaklenjeno{overflow:hidden}

  /* plavajoči plus je zdaj v spodnji vrstici (T.nav), zato ga tu ni */
  .t-fab{display:none}

  .t-glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.1)}
  .t-daypill{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* glava z gumbom nazaj ob naslovu */
.t-headmain{display:flex;align-items:center;gap:12px;min-width:0}
.t-headmain .t-backinline{margin:0}
.t-headmain .t-backinline+div .t-title{margin-top:8px}

/* plus v sredini spodnje vrstice */
.t-nav .t-navplus{flex:none;width:50px;height:50px;border-radius:999px;background:var(--blue);
  color:#fff;display:flex;align-items:center;justify-content:center;margin:-18px 6px 0;
  box-shadow:0 12px 24px -8px rgba(58,86,232,.75),0 0 0 4px var(--cream)}
.t-nav .t-navplus svg{width:24px;height:24px}
.t-nav .t-navplus:active{transform:scale(.94)}
.t-nav .t-navplus:hover,.t-nav .t-navplus:focus{color:#fff}

/* nizki telefoni (npr. 667 px): naslov se skrci se za stopnjo */
@media(max-width:899px) and (max-height:730px){
  .t-title{font-size:26px}
  .t-detname{font-size:26px}
  .t-status{padding:10px 2px 8px}
  .t-head{padding-bottom:13px}
}

/* na dotik ni lebdenja — sicer ostane senca "prilepljena" po dotiku */
@media(hover:none){
  .t-row:hover{box-shadow:none}
  .t-nav button:hover{color:var(--ink3)}
  .t-nav button.is-on:hover{color:var(--blue)}
  .t-btn:hover{filter:none}
}

/* ---------- pasica prikaza ---------- */
.t-demo{position:absolute;left:0;right:0;top:0;z-index:60;background:var(--d1);
  color:rgba(255,255,255,.88);display:flex;align-items:center;gap:12px;
  padding:9px 16px;font:400 12.5px/1.3 var(--body);border-bottom:1px solid var(--on-dark)}
.t-demo b{font-weight:600;color:#fff}
.t-demo .t-demotag{font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  background:var(--blue);color:#fff;padding:5px 8px;border-radius:999px;flex:none}
.t-demo a{margin-left:auto;color:var(--blue-lt);text-decoration:none;flex:none;font-weight:500}
.t-demo a:hover{color:#fff}
.t-demo .t-reset{color:rgba(255,255,255,.55);flex:none;margin-left:0}
.t-demo .t-reset:hover{color:#fff}
.t-app{padding-top:38px}
@media(max-width:560px){
  .t-demo{font-size:11.5px;padding:8px 12px;gap:8px}
  .t-demo .t-hidesm{display:none}
  .t-app{padding-top:35px}
}

/* klikljivi elementi, ki niso gumb */
[data-act]{cursor:pointer}
[data-act] [data-act]{cursor:inherit}
.t-name button,.t-name a{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left}

/* zajem posnetkov za stran z opisom: brez pasice prikaza */
body.je-posnetek .t-demo{display:none}
body.je-posnetek .t-app{padding-top:0}

/* dostopnost */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
.t-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}