/* Layout: na računalu bočna navigacija + radni stupac; na mobitelu (glavni unos) donja traka, gumb + i donji listovi */
:root{
  --bg:#f6f4f3; --surface:#ffffff; --sunk:#efebe9; --line:#e2dcd9;
  --ink:#1d1a19; --muted:#6b6461; --accent:#1d1a19; --accent-ink:#ffffff; --accent-soft:#ece6e3;
  --brand:#f3615a; --brand-ink:#ffffff;
  --urgent:#b42318; --urgent-soft:#fbe4e0; --high:#9a6a06; --high-soft:#f7ecd2; --ok:#2d7a3e; --ok-soft:#dcefdf;
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141211; --surface:#1d1a19; --sunk:#252120; --line:#36302e;
  --ink:#f1ece9; --muted:#a8a09c; --accent:#f1ece9; --accent-ink:#1d1a19; --accent-soft:#2e2927;
  --brand:#f3615a; --brand-ink:#ffffff;
  --urgent:#f08479; --urgent-soft:#3a1c19; --high:#e3b453; --high-soft:#352a12; --ok:#7fcf8e; --ok-soft:#183020;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141211; --surface:#1d1a19; --sunk:#252120; --line:#36302e;
  --ink:#f1ece9; --muted:#a8a09c; --accent:#f1ece9; --accent-ink:#1d1a19; --accent-soft:#2e2927;
  --brand:#f3615a; --brand-ink:#ffffff;
  --urgent:#f08479; --urgent-soft:#3a1c19; --high:#e3b453; --high-soft:#352a12; --ok:#7fcf8e; --ok-soft:#183020;
  color-scheme:dark}
html,body{height:100%}
html{padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
:root{--tabbar:62px}
body{margin:0;font-size:15px}
img{max-width:100%}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.01em}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.label{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.muted{color:var(--muted)}

/* Prijava */
.login{min-height:100%;display:grid;place-items:center;padding-block:40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.login-card{width:100%;max-width:520px;display:grid;gap:22px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:40px;height:auto;flex:none}
.brand-login{gap:14px}
.brand-login .logo{width:64px}
.brand-login>div{display:grid;gap:2px}
.brand b{font-family:var(--f-display);font-size:30px;letter-spacing:-.02em}
.brand span{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.people{display:grid;gap:8px}
.person{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;text-align:left;width:100%}
.person:hover{border-color:var(--accent)}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;background:var(--accent-soft);color:var(--accent);flex:none}
.person .who{flex:1;min-width:0}
.person .who div:first-child{font-weight:600}
.person .who div:last-child{font-size:13px;color:var(--muted)}
.tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.note{font-size:13px;color:var(--muted);border-left:2px solid var(--line);padding-left:12px}

/* Aplikacija */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100%}
.side{background:var(--surface);border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.side .brand b{font-size:22px}
.nav{display:grid;gap:2px}
.nav button{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border:0;background:none;border-radius:8px;text-align:left;font-weight:500;color:var(--muted)}
.nav button:hover{background:var(--sunk);color:var(--ink)}
.nav button[aria-current="true"]{background:var(--accent-soft);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--brand)}
.badge{font-family:var(--f-mono);font-size:11px;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:1px 7px}
.me{margin-top:auto;display:flex;gap:10px;align-items:center;padding-top:14px;border-top:1px solid var(--line)}
.me .who{flex:1;min-width:0;font-size:13px}
.me .who div:first-child{font-weight:600}
.linkbtn{background:none;border:0;color:var(--accent);font-weight:600;font-size:13px;padding:0}
main{min-width:0;padding-block:28px 60px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:980px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.wrap>*,.tasks>*,.block>*{min-width:0}
.proto{font-size:13px;background:var(--high-soft);color:var(--ink);border-radius:8px;padding:9px 14px;display:flex;gap:8px;flex-wrap:wrap}
.proto b{color:var(--high)}

/* Moj dan */
.dayhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.dayhead h1{font-size:clamp(26px,4vw,36px)}
.stats{display:flex;gap:22px;flex-wrap:wrap}
.stat .n{font-family:var(--f-display);font-size:24px;font-weight:700;line-height:1}
.stat .l{font-size:12px;color:var(--muted)}
.loadbar{height:6px;border-radius:99px;background:var(--sunk);overflow:hidden}
.loadbar i{display:block;height:100%;background:var(--ink);border-radius:99px}
.loadbar.over i{background:var(--urgent)}
section.block{display:grid;gap:10px}
.block h2{font-size:17px}
.tasks{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.task{display:grid;grid-template-columns:auto 64px minmax(0,1fr);gap:14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.task.done{opacity:.55}
.task.done .t-title{text-decoration:line-through}
.check{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;margin-top:1px;padding:0}
.check:hover{border-color:var(--accent)}
.task.done .check{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.t-time{font-family:var(--f-mono);font-size:13px;color:var(--muted);padding-top:2px}
.t-time b{display:block;color:var(--ink);font-weight:500;font-size:14px}
.t-body{min-width:0;display:grid;gap:4px}
.t-title{font-weight:600;overflow-wrap:anywhere}
.t-desc{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.t-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted)}
.pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.p-hitno{background:var(--urgent-soft);color:var(--urgent)}
.p-visok{background:var(--high-soft);color:var(--high)}
.p-normalan{background:var(--sunk);color:var(--muted)}
.p-nisko{background:transparent;border:1px solid var(--line);color:var(--muted)}
.triage{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end}
.triage .field{min-width:0}
.triage input{width:auto}
.seg button.p-on-hitno[aria-pressed="true"]{background:var(--urgent-soft);color:var(--urgent)}
.seg button.p-on-visok[aria-pressed="true"]{background:var(--high-soft);color:var(--high)}
.src{display:inline-flex;gap:5px;align-items:center;font-family:var(--f-mono);font-size:11.5px;background:var(--sunk);padding:2px 8px;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{padding:22px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);text-align:center;font-size:14px}

/* Pošta */
.mailgrid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:18px;align-items:start}
.maillist{display:grid;gap:6px}
.mail{display:grid;gap:3px;text-align:left;width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.mail:hover{border-color:var(--accent)}
.mail[aria-current="true"]{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--brand)}
.mail .from{font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;min-width:0}
.mail .from span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mail .subj{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail .st{font-size:11.5px}
.st-novo{color:var(--ink);font-weight:600}
.st-odobreno{color:var(--ok)}
.st-arhiva{color:var(--muted)}
.detail{background:var(--surface);border:1px solid var(--line);border-radius:12px;display:grid;min-width:0}
.detail > *{padding:18px 20px}
.detail > * + *{border-top:1px solid var(--line)}
.mailhead{display:grid;gap:4px}
.mailhead h2{font-size:20px}
.mailbody{white-space:pre-wrap;font-size:14.5px;max-height:260px;overflow:auto}
.ai{display:grid;gap:12px;background:var(--sunk)}
.ai-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ai-sum{font-size:14px}
.prop{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:10px}
.prop input[type=text],.prop textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:7px 9px}
.prop textarea{resize:vertical;min-height:52px;font-size:14px}
.prop .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.field{display:grid;gap:3px;min-width:0}
.field span{font-size:11.5px;color:var(--muted);font-weight:600}
select,input[type=date],input[type=time],input[type=number],.triage input[type=text]{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:6px 8px;width:100%;min-width:0}
.why{font-size:12.5px;color:var(--muted)}
.why b{color:var(--ink);font-weight:600}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;font-weight:600;font-size:14px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{opacity:.88}
.btn.small{padding:5px 10px;font-size:13px}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)}
.btn:disabled{opacity:.5;cursor:default}
.newmail{display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.newmail input,.newmail textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:8px 10px}
.newmail textarea{min-height:120px;resize:vertical}
.status{font-size:13px;color:var(--muted)}

/* Tim */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.member{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:10px;align-content:start}
.member-head{display:flex;gap:10px;align-items:center}
.member-head .who{flex:1;min-width:0}
.member-head .who div:first-child{font-weight:600}
.member-head .who div:last-child{font-size:12.5px;color:var(--muted)}
.mini{display:grid;gap:6px}
.mini-t{display:grid;grid-template-columns:48px 1fr;gap:8px;font-size:13.5px;align-items:start}
.mini-t .mono{font-size:12px;color:var(--muted);padding-top:1px}
.mini-t.done span:last-child{text-decoration:line-through;color:var(--muted)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:9px;font-size:14px;font-weight:500;z-index:9;max-width:calc(100% - 32px)}

/* Ikone, donja traka, gumb +, donji listovi */
.ic{width:22px;height:22px;flex:none}
.tabbar,.fab,.mobile-only{display:none}
.sheet-bg{position:fixed;inset:0;background:rgba(20,16,15,.45);z-index:20}
.sheet{position:fixed;z-index:21;left:50%;top:12vh;transform:translateX(-50%);width:min(560px,calc(100% - 32px));max-height:80vh;overflow:auto;background:var(--surface);border-radius:14px;padding:18px;display:grid;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head b{font-family:var(--f-display);font-size:19px}
.big-input{width:100%;font-size:18px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface)}
.big-input:focus{border-color:var(--accent);outline:none}
.btn.big{padding:13px 16px;font-size:16px;border-radius:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chipbtn{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:7px 14px;font-weight:600;font-size:14px;color:var(--muted)}
.chipbtn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chips input[type=date]{width:auto;flex:1;min-width:140px;border-radius:99px;padding:6px 12px}
.seg.wide{display:flex;width:100%}
.seg.wide button{flex:1;padding:9px 6px}
.who-chips{display:flex;flex-wrap:wrap;gap:6px}
.who-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:4px 12px 4px 4px;font-size:14px;font-weight:500;cursor:pointer}
.who-chip input{position:absolute;opacity:0;pointer-events:none}
.who-chip:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.who-chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.more-fields summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:14px;padding:4px 0}
.more-fields[open]{display:grid;gap:10px}
.sheet .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.sheet input[type=text],.sheet textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px}
.sheet textarea{min-height:70px;resize:vertical}
.menu{display:grid}
.menu button{display:flex;align-items:center;gap:14px;padding:14px 6px;border:0;border-bottom:1px solid var(--line);background:none;font-size:16px;font-weight:500;text-align:left;color:var(--ink)}
.menu button:last-child{border-bottom:0;color:var(--muted)}
.back{display:inline-flex;align-items:center;gap:4px;padding-left:2px;justify-self:start;font-size:15px;color:var(--accent)}

@media (prefers-reduced-motion:no-preference){.task,.mail,.btn{transition:border-color .15s,opacity .2s}}

/* Boje osoba: validirana kategorijska paleta, isti redoslijed u oba načina */
:root{--p7:#6250d6;--p7-on:#ffffff;--p8:#e34948;--p8-on:#ffffff;--p6:#a6551f;--p6-on:#ffffff;--p1:#2a78d6;--p2:#eb6834;--p3:#8831b3;--p4:#eda100;--p5:#e87ba4;--p1-on:#ffffff;--p2-on:#1a0d05;--p3-on:#ffffff;--p4-on:#1d1400;--p5-on:#2a0b18}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--p1:#3987e5;--p2:#d95926;--p3:#a24fd0;--p6:#a8673a;--p4:#c98500;--p5:#d55181;--p2-on:#150903;--p5-on:#1f0710;--p7:#9085e9;--p8:#e66767}}
:root[data-theme="dark"]{--p1:#3987e5;--p2:#d95926;--p3:#a24fd0;--p6:#a8673a;--p4:#c98500;--p5:#d55181;--p2-on:#150903;--p5-on:#1f0710;--p7:#9085e9;--p8:#e66767}
.av.sm{width:24px;height:24px;font-size:10px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.task{position:relative;overflow:hidden}
.task::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pc,transparent)}
.t-open{all:unset;cursor:pointer;font-weight:600;display:block;overflow-wrap:anywhere}
.t-open:hover{color:var(--accent)}
.t-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:11.5px;padding:2px 7px;border-radius:6px;background:var(--accent-soft);color:var(--accent)}
.t-detail{grid-column:1/-1;display:grid;gap:14px;border-top:1px solid var(--line);margin:4px -14px -12px;padding:14px;background:var(--sunk)}
.td-time{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.td-time .big{font-family:var(--f-display);font-size:20px;font-weight:700;margin-right:6px}
.timer-on{background:var(--urgent);border-color:var(--urgent);color:#fff}
.notes{display:grid;gap:10px}
.note-i{display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:14px}
.n-meta{font-size:12px;color:var(--muted)}
.n-text{white-space:pre-wrap;overflow-wrap:anywhere}
.t-detail textarea{width:100%;min-height:64px;resize:vertical;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px}
.member{border-top:4px solid var(--pc)}
.newtask{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:10px}
.newtask input[type=text],.newtask textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:8px 10px}
.newtask textarea{min-height:60px;resize:vertical}
.newtask .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.board{background:var(--surface);border:1px solid var(--line);border-radius:12px;display:grid;grid-template-rows:1fr auto;height:max(380px,calc(100vh - 230px));min-height:0}
.feed{overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-height:0;background:var(--sunk);border-radius:12px 12px 0 0}
.daysep{align-self:center;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface);padding:3px 10px;border-radius:99px;margin:10px 0 4px}
.msg{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:end;max-width:min(560px,88%)}
.msg .av{width:28px;height:28px;font-size:11px}
.bubble{background:var(--surface);border-radius:12px 12px 12px 4px;padding:8px 12px;box-shadow:inset 3px 0 0 var(--pc);min-width:0}
.bubble .who{font-size:12px;font-weight:600;display:flex;gap:8px;align-items:baseline}
.bubble .who time{font-weight:400;color:var(--muted);font-family:var(--f-mono);font-size:11px}
.bubble .tx{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px}
.msg.mine{align-self:flex-end;grid-template-columns:minmax(0,1fr)}
.msg.mine .av{display:none}
.msg.mine .bubble{background:var(--accent-soft);border-radius:12px 12px 4px 12px;box-shadow:none}
.msg.cont .av{visibility:hidden}
.msg.cont .who{display:none}
.mention{font-weight:600;color:var(--accent)}
.composer{display:flex;gap:8px;align-items:flex-end;padding:12px;border-top:1px solid var(--line)}
.composer textarea{flex:1;min-width:0;resize:none;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 12px;max-height:140px;min-height:42px}
.board-empty{margin:auto;text-align:center;color:var(--muted);max-width:40ch;display:grid;gap:6px}
.team-row{display:flex}
.team-row .av{width:30px;height:30px;font-size:11px;margin-left:-6px;box-shadow:0 0 0 2px var(--bg)}
.chip.warn{background:var(--high-soft);color:var(--high)}
.bounce-row{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:8px}
.bounce-row input{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:6px 8px;width:100%;min-width:0}
@media (max-width:600px){.bounce-row{grid-template-columns:1fr}}
.returns{display:grid;gap:6px}
.ret{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 12px}
.ret .arrow{color:var(--muted)}
.mini-open{all:unset;cursor:pointer}
.mini-open:hover{color:var(--accent)}
.mini-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Izvještaj */
.seg{display:inline-flex;gap:2px;background:var(--sunk);padding:3px;border-radius:9px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:7px;font-weight:600;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:grid;gap:14px;min-width:0}
.panel h2{font-size:17px}
.bars{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:minmax(120px,190px) 1fr 92px;gap:12px;align-items:center}
.bar-label{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px}
.bar-label span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track{height:18px;display:flex;gap:2px;position:relative}
.track i{display:block;height:100%;min-width:3px}
.track i:last-child{border-radius:0 4px 4px 0}
.track .plan{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.45}
.bar-val{font-family:var(--f-mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.bar-val small{display:block;color:var(--muted);font-size:11px}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.tbl-wrap{overflow-x:auto}
table.rep{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
table.rep th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
table.rep td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.rep td.num,table.rep th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.over{color:var(--urgent)} .under{color:var(--ok)}
.kpis{display:flex;gap:28px;flex-wrap:wrap}
.demo-note{font-size:13px;background:var(--high-soft);border-radius:8px;padding:9px 14px}
/* Osoba */
.member-link{width:100%;background:none;border:0;padding:4px;margin:-4px;border-radius:8px;font:inherit;color:inherit;text-align:left;cursor:pointer;min-height:44px}
.member-link:hover{background:var(--sunk)}
.member-link .chev{transform:rotate(180deg);color:var(--muted);flex:none;width:16px;height:16px}
.person-head{align-items:center}
.person-head .av{width:52px;height:52px;font-size:18px}
/* Radni nalog */
.tag.rn{font-family:var(--f-mono);background:var(--accent-soft);color:var(--ink)}
.triage .field.rn input{width:12ch}
.rn-tbl td.rn-n{font-family:var(--f-mono);font-weight:600;white-space:nowrap}
.rn-cards{display:grid;gap:8px;margin-top:10px}
.rn-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:4px}
.rn-card .rn-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rn-card .rn-top b{font-family:var(--f-mono);font-size:16px}
.rn-card .rn-top > .mono{white-space:nowrap}
.rn-tbl .rn-who,.rn-card .rn-who{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px}
/* Naslovna (Moj dan) */
.home-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 12px}
.home-day{font-family:var(--f-display);font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.01em}
.home-date{font-size:17px;color:var(--muted);margin:2px 0 4px}
.home-head + .loadbar{margin:0 0 14px}
.home-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
.home-main,.home-side{display:grid;gap:18px;min-width:0;align-content:start}
.home-main .block,.home-side .block{margin:0}
.mlist{display:grid;gap:6px}
.mrow{display:grid;grid-template-columns:48px 8px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:48px;padding:8px 12px 8px 10px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--pc);border-radius:10px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.mrow:hover{border-color:var(--muted);border-left-color:var(--pc)}
.mrow.done .mrow-title{text-decoration:line-through;color:var(--muted)}
.mrow-t{font-size:13px;font-weight:600}
.mrow-dot{width:8px;height:8px;border-radius:50%}
.mrow-main{display:grid;min-width:0}
.mrow-title{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow-meta{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow-dur{font-size:12px;color:var(--muted)}
.now-line{display:flex;align-items:center;gap:8px;color:var(--brand);font-size:12px;font-weight:600;margin:2px 0}
.now-line::after{content:"";flex:1;height:2px;background:var(--brand);border-radius:2px}
.empty.small{padding:14px;font-size:13.5px}
.warns{display:grid;gap:8px;margin:0}
.warn{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.warn.tone-urgent{border-color:color-mix(in srgb,var(--urgent) 45%,var(--line));background:color-mix(in srgb,var(--urgent) 6%,var(--surface))}
.warn.tone-high{border-color:color-mix(in srgb,var(--high) 45%,var(--line));background:color-mix(in srgb,var(--high) 7%,var(--surface))}
.warn-h{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t c" "s c";gap:2px 10px;align-items:center;width:100%;padding:10px 12px;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;min-height:48px}
.warn-t{grid-area:t;font-weight:700}
.tone-urgent .warn-t{color:var(--urgent)}
.warn-s{grid-area:s;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.warn-h .chev,.fold-h .chev{grid-area:c;transform:rotate(-90deg);color:var(--muted);width:16px;height:16px}
.warn-h .chev.up,.fold-h .chev.up{transform:rotate(90deg)}
.warn .mlist{padding:0 8px 8px}
.fold-h{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;min-height:44px}
.fold-h h2{margin:0}
.fold.muted h2{color:var(--muted)}
/* Odgovor na mail */
.reply-body{display:grid;gap:10px;max-height:64vh;overflow:auto;padding-bottom:4px}
.reply-body input[type=email],.reply-body input[type=text],.reply-ai input{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:9px 10px;font:inherit;font-size:16px}
.reply-body textarea{width:100%;min-height:200px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:10px;font:inherit;font-size:16px;line-height:1.5;resize:vertical}
.reply-ai{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.reply-ai input{flex:1;min-width:180px}
.reply-ai .btn{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.reply-body details summary{cursor:pointer;font-size:13.5px;color:var(--muted);padding:6px 0}
/* Organiziraj dan */
.plan-cta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.plan-cta .btn{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.plan-cta .btn.nudge{border-color:var(--brand);color:var(--ink)}
.plan-sheet .sheet-head b{display:inline-flex;align-items:center;gap:8px}
.plan-body{max-height:60vh;overflow:auto}
.plan-list{display:grid;gap:6px}
.plan-row{display:grid;grid-template-columns:auto 56px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.plan-row input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.plan-row.off{opacity:.5}
.plan-row.off b{text-decoration:line-through}
.plan-when{font-weight:600;padding-top:2px}
.plan-what{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
/* Ponude */
.pon-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.s-card.pon .pon-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.s-card.pon .pon-top b{font-size:15px}
.s-card.pon .pon-top .mono{font-weight:600;white-space:nowrap}
.linkchip{border:0;cursor:pointer;font:inherit;font-size:12px}
.linkchip:hover{text-decoration:underline}
.searchrow .askbtn span{white-space:nowrap}
/* Pitaj */
.searchrow{display:flex;gap:8px;margin:4px 0 14px}
.searchrow .searchbar{margin:0;flex:1;min-width:0}
.searchrow .searchbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.searchrow .askbtn{flex:none;width:auto;color:var(--ink);font-weight:600}
.ask-ex{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ask-ex .chipbtn{min-height:40px}
.ask-thread{display:grid;gap:10px;margin:0 0 14px}
.ask-q{justify-self:end;max-width:85%;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:14px 14px 4px 14px;white-space:pre-wrap;overflow-wrap:anywhere}
.ask-a{background:var(--surface);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:12px 16px;line-height:1.55;overflow-wrap:anywhere;min-width:0}
.ask-a p{margin:0 0 8px}.ask-a p:last-child{margin-bottom:0}
.ask-a ul{margin:4px 0 8px;padding-left:20px}.ask-a li{margin:3px 0}
.src-ref{display:inline-block;font:600 11.5px/1 var(--f-mono);padding:4px 6px;margin:0 1px;border-radius:5px;border:1px solid var(--line);background:var(--sunk);color:var(--ink);cursor:pointer;vertical-align:1px}
.src-ref:hover{border-color:var(--brand)}
.ask-form{display:flex;gap:8px;align-items:flex-end;position:sticky;bottom:12px;background:var(--bg);padding:6px 0}
.ask-form textarea{flex:1;min-width:0;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);resize:vertical;min-height:48px}
.ask-form .btn{min-height:48px}
/* Traži */
.searchbar{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:4px 0 14px;padding:0 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--muted);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.searchbar:hover{border-color:var(--muted)}
.searchfield{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:0 14px;min-height:48px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.searchfield:focus-within{border-color:var(--ink)}
.searchfield .ic{color:var(--muted);flex:none}
.searchfield input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:12px 0}
.s-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:6px;min-width:0;overflow-wrap:anywhere}
.s-title{font-weight:600;display:flex;gap:8px;align-items:baseline}
.s-title .dot{flex:none;transform:translateY(-1px)}
.s-hit{font-size:13.5px;line-height:1.45;color:var(--ink);padding:2px 2px 0;overflow-wrap:anywhere}
.tasks > .s-hit{margin:-4px 0 4px 14px}
.s-body{white-space:pre-wrap;font-size:13.5px;line-height:1.5;max-height:340px;overflow:auto;padding:10px;margin-top:6px;background:var(--sunk);border-radius:8px}
.s-card details summary{cursor:pointer;font-size:13.5px;color:var(--muted);padding:6px 0;min-height:32px}
mark{background:color-mix(in srgb,var(--brand) 28%,transparent);color:inherit;border-radius:2px;padding:0 1px}
@media (max-width:820px){.bar-row{grid-template-columns:1fr 70px}.bar-row .bar-label{grid-column:1/-1}}

.login-card input{width:100%}
.prop select,.prop input,.prop textarea{font:inherit}

.fk-groups{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));align-items:start}
.fk-group{margin:0}
.fk-item{padding:10px 0;border-top:1px solid var(--line);display:grid;gap:3px}
.fk-item:first-of-type{border-top:0}
.fk-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.fk-top .linkbtn{font-size:14px;text-align:left;min-height:32px;overflow-wrap:anywhere}
.fk-top .mono{white-space:nowrap;font-weight:600}
.fk-title{font-size:14px}
.fk-item .actions{margin-top:4px}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:12px 0;color:var(--ink);font:inherit;cursor:pointer;min-height:56px}
.switch-row>span{display:grid;gap:2px}
.switch{flex:none;width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.switch-row[aria-pressed="true"] .switch{background:var(--accent)}
.switch-row[aria-pressed="true"] .switch::after{transform:translateX(18px)}
/* Izvorni mail i privici u zadatku */
.srcmail{border:1px solid var(--line);border-radius:10px;padding:0 12px;margin:10px 0;background:var(--surface)}
.src-h{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;background:none;border:0;color:var(--ink);font:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:0}
.src-h>span{display:inline-flex;gap:8px;align-items:center}
.src-meta{font-size:13.5px;color:var(--muted);padding:2px 0 8px;overflow-wrap:anywhere}
.src-meta div{color:var(--ink);font-weight:600;margin-top:2px}
.src-body{white-space:pre-wrap;font-size:14px;line-height:1.5;overflow-wrap:anywhere;padding:8px 0 12px;border-top:1px solid var(--line)}
.srcmail .linkbtn{min-height:40px;margin-bottom:6px}
.atts{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 10px}
.att{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:40px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--sunk);color:var(--ink);text-decoration:none;font-size:13.5px}
.att:hover{border-color:var(--ink)}
.att .ic{width:16px;height:16px;flex:none}
.att-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.att-s{color:var(--muted);font-size:12px;flex:none}
/* Počisti staro */
.cl-akc{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--ink);white-space:nowrap}
.cl-zatvori{background:var(--accent);color:var(--accent-ink)}
.cl-spoji{background:var(--accent-soft)}
.cl-rok{border:1px solid var(--line);background:transparent}
.cl-zadrzi{color:var(--muted)}
.plan-when .mono{display:block;margin-top:4px;font-size:12.5px}
.clean-sheet .plan-row{grid-template-columns:auto 78px minmax(0,1fr)}
/* Kalendar */
.ic.flip{transform:scaleX(-1)}
.cal-head{flex-wrap:wrap;gap:12px}
.cal-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cal-nav .btn{min-height:40px}
.cal-nav .seg{margin-left:6px}
.cal-people{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
.chip-p{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.chip-p i{width:10px;height:10px;border-radius:50%;background:var(--pc)}
.chip-p.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cal-done{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);margin-left:auto;min-height:36px}
.cal-done input{width:18px;height:18px;accent-color:var(--accent)}
.cal-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) repeat(2,minmax(0,.75fr));gap:8px;align-items:start}
.cal-day{background:var(--sunk);border-radius:12px;padding:8px;min-height:140px;min-width:0}
.cal-day.today{outline:2px solid var(--brand);outline-offset:-2px}
.cal-day h3{display:flex;justify-content:space-between;gap:6px;font-size:13px;font-weight:500;margin:2px 4px 8px;color:var(--muted)}
.cal-day h3 b{color:var(--ink)}
.cal-day .mrow{grid-template-columns:38px 6px minmax(0,1fr);padding:6px 8px;min-height:44px;gap:6px}
.cal-day .mrow-dur{display:none}
.cal-day .mrow-title{font-size:13.5px}
.cal-empty{color:var(--muted);text-align:center;padding:10px 0}
.cal-month{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.cal-mh,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-mh span{font-size:12px;color:var(--muted);padding:8px;text-align:center;border-bottom:1px solid var(--line)}
.cal-cell{position:relative;min-height:104px;padding:6px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;display:flex;flex-direction:column;gap:3px;cursor:pointer;min-width:0}
.cal-grid>:nth-child(7n){border-right:0}
.cal-cell.blank{background:var(--sunk);cursor:default}
.cal-cell.today .cal-n{background:var(--brand);color:#fff;border-radius:999px;padding:0 7px}
.cal-cell.sel{background:var(--accent-soft)}
.cal-n{font-weight:600;font-size:13px;align-self:flex-start}
.cal-c{position:absolute;top:6px;right:6px;font-size:12px;color:var(--muted);font-family:var(--f-mono)}
.cal-dots{display:none;gap:3px}
.cal-dots i{width:7px;height:7px;border-radius:50%}
.cal-titles{display:grid;gap:2px;min-width:0}
.cal-titles span{font-size:11.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--pc);padding-left:4px}
.cal-titles span.done{text-decoration:line-through;color:var(--muted)}
.cal-titles span.muted{border:0;padding:0}
.cal-selday{margin-top:0}
.cal-items{display:grid;gap:6px}
.cal-item{display:grid;gap:3px;width:100%;text-align:left;padding:7px 8px 8px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--pc);border-radius:8px;color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.cal-item:hover{border-color:var(--ink);border-left-color:var(--pc)}
.cal-item.sel{box-shadow:0 0 0 2px var(--accent)}
.cal-item.done{opacity:.55}
.cal-item.done .ci-title{text-decoration:line-through}
.ci-top{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.ci-top b{color:var(--ink);font-weight:600}
.ci-top i{width:7px;height:7px;border-radius:50%;flex:none}
.ci-top span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-title{font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ci-meta{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-open{margin-top:16px}
@media (max-width:1100px){.cal-week{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ---- Mobitel (glavni unos): mora biti zadnje u datoteci ---- */
@media (max-width:820px){
  .desktop-only{display:none!important}
  .mobile-only{display:grid}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  main{padding-block:18px calc(var(--tabbar) + 90px + env(safe-area-inset-bottom,0px))}
  .wrap{gap:18px}
  /* donja traka */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .tabbar button{flex:1;min-width:0;height:var(--tabbar);border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--muted);position:relative;-webkit-tap-highlight-color:transparent}
  .tabbar button[aria-current="true"]{color:var(--ink)}
  .tabbar button[aria-current="true"]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
  .tabbar button[aria-current="true"] .ic{stroke-width:2.3}
  .tb-badge{position:absolute;top:7px;left:calc(50% + 6px);font-style:normal;font-family:var(--f-mono);font-size:10px;background:var(--urgent);color:#fff;border-radius:99px;padding:0 5px;line-height:16px}
  .fab{display:grid;place-items:center;position:fixed;z-index:11;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(var(--tabbar) + 16px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:18px;border:0;background:var(--brand);color:var(--brand-ink);box-shadow:0 8px 24px rgba(243,97,90,.4)}
  .fab .ic{width:28px;height:28px;stroke-width:2.4}
  .toast{bottom:calc(var(--tabbar) + 16px + env(safe-area-inset-bottom,0px))}
  /* donji list */
  .sheet{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:92dvh;border-radius:18px 18px 0 0;padding:16px max(16px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right,0px))}
  .sheet::before{content:"";justify-self:center;width:40px;height:4px;border-radius:99px;background:var(--line);margin:-6px 0 -4px}
  /* polja: 16px da iOS ne zumira kod tipkanja */
  input,select,textarea{font-size:16px!important}
  select,input[type=date],input[type=time],input[type=number],.triage input[type=text]{padding:9px 10px;border-radius:9px}
  .btn{padding:10px 14px}
  .btn.small{padding:8px 12px;font-size:14px}
  /* zaglavlje dana */
  .dayhead{align-items:flex-start}
  .dayhead h1{font-size:27px}
  .stats{gap:18px;width:100%}
  .stat .n{font-size:21px}
  /* zadatak */
  .task{grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:12px 12px 12px 14px}
  .t-time{grid-column:2;padding:0}
  .t-time b{display:inline;margin-right:6px}
  .t-body{grid-column:2}
  .task.notime .t-time{display:none}
  .check{width:28px;height:28px;border-radius:8px;position:relative}
  .check::after{content:"";position:absolute;inset:-10px}
  .t-open{padding:2px 0}
  .t-meta{gap:6px 8px}
  .t-meta .btn{padding:6px 10px!important}
  .t-detail{margin:6px -12px -12px -14px;padding:14px}
  .triage{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .triage .field:first-child{grid-column:1/-1}
  .triage .seg{display:flex;width:100%}
  .triage .seg button{flex:1;padding:9px 4px}
  .triage input{width:100%}
  .triage .field.rn{grid-column:1/-1}
  .home-grid{display:flex;flex-direction:column;gap:18px;align-items:stretch}
  .home-side{display:contents}
  .warns{order:-1}
  .home-day{font-size:30px}
  .triage .field.rn input{width:100%}
  .td-time{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .td-time .big,.td-time .muted{grid-column:span 3}
  .td-time .muted{margin:-6px 0 0!important;font-size:13px}
  .td-time [data-timer]{grid-column:span 3}
  .bounce-row{grid-template-columns:1fr}
  /* pošta: popis, pa mail preko cijelog ekrana */
  .mailgrid{grid-template-columns:minmax(0,1fr)}
  .detail > *{padding:14px}
  .mailbody{max-height:none}
  .mail .subj{white-space:normal}
  /* ploča */
  .board{height:calc(100dvh - var(--tabbar) - 150px - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px));min-height:320px}
  .feed{padding:14px 12px}
  .msg{max-width:92%}
  .team-row{display:none}
  .team{grid-template-columns:minmax(0,1fr)}
}
/* Kalendar na mobitelu: tjedan kao popis dana, mjesec kao mala mreža s točkama */
@media (max-width:820px){
  .cal-nav{width:100%}
  .cal-nav .seg{margin-left:auto}
  .cal-week{grid-template-columns:1fr;gap:8px}
  .cal-day{min-height:0}
  .cal-day .mrow{grid-template-columns:48px 8px minmax(0,1fr) auto;padding:8px 12px 8px 10px;min-height:48px;gap:10px}
  .cal-day .mrow-dur{display:block}
  .cal-day .mrow-title{font-size:15px}
  .cal-empty{text-align:left;padding:2px 6px 6px}
  .cal-cell{min-height:56px;padding:4px;align-items:center}
  .cal-n{align-self:center}
  .cal-c{display:none}
  .cal-titles{display:none}
  .cal-dots{display:flex;flex-wrap:wrap;justify-content:center}
  .cal-done{margin-left:0}
}