@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════
   GROZD Bonitet — zajednički dizajn-sistem (JEDAN izvor istine)
   Font, tokeni, shell (sidebar+topbar), avatar, rejting skala.
   Linkuje ga svaka strana: <link rel="stylesheet" href="/static/shared.css">
   Sve što je specifično za jednu stranu ostaje u njenom <style> bloku.
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokeni: boje + tipografija (SVIJETLA tema) ── */
:root{
  --primary:#5A3AB5;--deep:#2D1B69;--p100:#E6E0F5;--light:#F2EEF9;--tint:#F9F6FD;--ink:#1A1A2E;
  --n50:#F4F4F6;--n100:#E5E5EA;--n200:#D1D1D6;--n400:#8E8E93;--n600:#48484A;
  --success:#34C759;--warning:#FF9500;--danger:#FF3B30;--info:#007AFF;--white:#FFF;--bg:#FBFAFD;
  --shadow-card:0 1px 3px rgba(16,16,40,.04),0 8px 24px rgba(16,16,40,.05);
  --shadow-dd:0 12px 40px rgba(45,27,105,.16);
  --ease:cubic-bezier(.22,1,.36,1);--fast:160ms;--medium:420ms;
  /* razmaci */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  /* radiusi */
  --radius-sm:8px;--radius:11px;--radius-lg:14px;--radius-xl:18px;
  /* tipografska familija */
  --font-display:'Manrope',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'SF Mono','Fira Code',ui-monospace,monospace;
}
/* ── Tokeni: boje (TAMNA tema) ── */
[data-theme="dark"]{
  --primary:#9B86DF;--deep:#7B5DD6;--p100:#3D2B69;--light:#2D2548;--tint:#24203a;--ink:#F0F0F4;
  --n50:#0F0F18;--n100:#262636;--n200:#3A3A4E;--n400:#9A9AA0;--n600:#C9C9D4;--white:#1A1A28;--bg:#0C0A16;
  --success:#4ADE80;--warning:#FBBF24;--danger:#FB7185;--info:#60A5FA;
  --shadow-card:0 1px 3px rgba(0,0,0,.3);--shadow-dd:0 12px 40px rgba(0,0,0,.5);
}

/* ── Reset / osnove ── */
*{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:rgba(124,92,214,.35) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(124,92,214,.28);border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:rgba(124,92,214,.6)}
body{margin:0;font-family:var(--font-body);font-size:14px;color:var(--ink);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono)}

/* ── Shell layout ── */
.shell{display:flex;height:100vh;overflow:hidden}
.main{flex:1;display:flex;flex-direction:column;min-width:0}

/* ── Lijevi meni (jedinstveni sidebar) ── */
.sb{width:250px;flex-shrink:0;background:var(--white);border-right:1px solid var(--n100);display:flex;flex-direction:column;overflow:hidden}
.sb-top{height:58px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--n100);gap:10px;text-decoration:none;color:inherit;flex-shrink:0}
.logo{width:25px;height:30px;color:var(--primary);flex-shrink:0}
.sb-wm{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-.02em}
.sb-wm small{font-weight:600;color:var(--n400);font-size:11px;display:block;letter-spacing:.04em}
.sb-body{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:2px}
.sb-lnk{height:38px;display:flex;align-items:center;padding:0 12px;border-radius:9px;gap:10px;cursor:pointer;font-size:13px;font-weight:500;color:var(--n600);transition:all var(--fast);text-decoration:none}
.sb-lnk:hover{background:var(--tint);color:var(--primary)}
.sb-lnk.on{background:var(--light);color:var(--primary);font-weight:600}
.sb-lnk svg{width:17px;height:17px;stroke-width:1.8}

/* ── Topbar + prekidač teme ── */
.topbar{height:58px;border-bottom:1px solid var(--n100);display:flex;align-items:center;gap:14px;padding:0 18px;flex-shrink:0;background:var(--white)}
.tt{width:40px;height:40px;border-radius:11px;border:1px solid var(--n100);background:var(--white);color:var(--n600);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto}
.tt:hover{border-color:var(--primary);color:var(--primary)}
.icon-sun{display:none}
[data-theme="dark"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:none}

/* ── Rejting skala (9 tonova — bijeli tekst čitljiv u obje teme) ── */
.rb{border-radius:12px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);flex-shrink:0}
.rb b{font-weight:800;line-height:1}.rb span{font-size:7.5px;opacity:.85;margin-top:2px;letter-spacing:.03em}
.rp{font-family:var(--font-display);font-weight:800;font-size:11px;color:#fff;padding:3px 9px;border-radius:7px;display:inline-block}
.g-aaa{background:#0E9F57}.g-aa{background:#1FB05F}.g-a{background:#46C46B}
.g-bbb{background:#D99400}.g-bb{background:#FF9500}.g-b{background:#FF7A1A}
.g-ccc{background:#FF5A47}.g-cc{background:#FF3B30}.g-c{background:#D42419}.g-nr{background:#8E8E93}

/* ── Statusni bedž / čip (.tg) ── */
.tg{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap;background:var(--n50);color:var(--n600);border:1px solid var(--n100)}
.tg.ok{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success);border-color:transparent}
.tg.bad{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger);border-color:transparent}
.tg.warn{background:color-mix(in srgb,var(--warning) 16%,transparent);color:var(--warning);border-color:transparent}
.tg.info{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info);border-color:transparent}
.tg.owner{background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 18%,transparent),color-mix(in srgb,var(--primary) 6%,transparent));color:var(--primary);border-color:color-mix(in srgb,var(--primary) 45%,transparent)}

/* ── Nalog (avatar + dropdown, gore desno) ── */
.acct{position:relative;flex-shrink:0}
.acct-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--n100);background:var(--white);padding:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--fast)}
.acct-btn:hover{border-color:var(--primary)}
.acct.open .acct-btn{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,92,214,.14)}
.acct-av{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--deep));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:12.5px;letter-spacing:.02em}
.acct-pop{position:absolute;top:calc(100% + 10px);right:0;width:264px;background:var(--white);border:1px solid var(--n100);border-radius:var(--radius-lg);box-shadow:var(--shadow-dd);z-index:80;display:none;overflow:hidden;animation:acctin .16s var(--ease)}
@keyframes acctin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acct.open .acct-pop{display:block}
.acct-hd{display:flex;align-items:center;gap:12px;padding:16px}
.acct-hd .acct-av{width:44px;height:44px;font-size:15px;flex-shrink:0}
.acct-id{min-width:0}
.acct-nm{font-family:var(--font-display);font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-em{font-size:12px;color:var(--n400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.acct-demo{display:inline-block;margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,transparent);padding:2px 8px;border-radius:20px}
.acct-sep{height:1px;background:var(--n100)}
.acct-mi{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13px;font-weight:600;color:var(--n600);cursor:pointer;text-decoration:none;transition:background var(--fast)}
.acct-mi:hover{background:var(--tint);color:var(--primary)}
.acct-mi svg{width:16px;height:16px;stroke-width:1.8}

/* ── Modali / lijepi popup-ovi (nikad native prompt/alert/confirm) ── */
.gm-ov{position:fixed;inset:0;background:rgba(16,14,32,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;animation:gmfade .18s var(--ease) forwards;padding:20px}
@keyframes gmfade{to{opacity:1}}
.gm{background:var(--white);border:1px solid var(--n100);border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-dd);width:100%;max-width:420px;overflow:hidden;transform:translateY(8px) scale(.98);animation:gmrise .22s var(--ease) forwards}
@keyframes gmrise{to{transform:none}}
.gm-h{padding:20px 22px 6px}
.gm-h b{font-family:var(--font-display,'Manrope');font-weight:800;font-size:17px;letter-spacing:-.01em;display:block}
.gm-h span{color:var(--n400);font-size:13px;margin-top:4px;display:block;line-height:1.5}
.gm-b{padding:12px 22px 8px}
.gm-in{width:100%;height:44px;border:1px solid var(--n100);background:var(--n50);border-radius:11px;padding:0 14px;font:inherit;font-size:15px;color:var(--ink);outline:none;transition:all var(--fast)}
.gm-in:focus{border-color:var(--primary);background:var(--white);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.gm-f{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px 20px}
.gm-btn{height:42px;padding:0 18px;border-radius:11px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;border:1px solid var(--n100);background:var(--white);color:var(--n600);transition:all var(--fast)}
.gm-btn:hover{border-color:var(--primary);color:var(--primary)}
.gm-btn.pri{background:var(--primary);border-color:var(--primary);color:#fff}
.gm-btn.pri:hover{filter:brightness(1.08);color:#fff}
.gm-btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
/* toast (zamjena za alert) */
.gm-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--white,#fff);padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:210;box-shadow:var(--shadow-dd);opacity:0;animation:gmtoast .25s var(--ease) forwards;max-width:90vw}
[data-theme="dark"] .gm-toast{background:var(--n100);color:var(--ink)}
@keyframes gmtoast{to{opacity:1;transform:translateX(-50%)}}

/* ══ MOBILNO: sidebar kao off-canvas drawer + hamburger ══ */
.hamb{display:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--n100);background:var(--white);color:var(--n600);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.hamb:hover{border-color:var(--primary);color:var(--primary)}
.hamb svg{width:22px;height:22px;stroke-width:2}
.sb-ov{position:fixed;inset:0;background:rgba(16,14,32,.5);z-index:98;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.sb-ov.open{opacity:1;pointer-events:auto}
@media(max-width:860px){
  .shell{display:block;height:auto;min-height:100dvh;overflow:visible}
  .main{min-height:100dvh;min-width:0}
  .sb{position:fixed;top:0;left:0;bottom:0;width:284px;max-width:84vw;z-index:99;
      transform:translateX(-100%);transition:transform .28s var(--ease);box-shadow:var(--shadow-dd);border-right:1px solid var(--n100)}
  .sb.open{transform:none}
  .hamb{display:inline-flex}
  .topbar{padding:0 12px;gap:10px}
  .tt{width:38px;height:38px}
  /* pop-ovi (nalog/zvono) da ne bježe van ekrana — puna širina, sidreni desno */
  .acct-pop{position:fixed;top:60px;right:10px;left:10px;width:auto;max-width:none}
  .search{max-width:none}
  .bell-pop{position:fixed;top:60px;left:10px;right:10px;width:auto;max-width:none;max-height:70dvh}
}

/* ══════════════════════════════════════════════════════════════════
   KANONSKI TOPBAR — pretraga, zvono, spinner (isti na svim stranama)
   ══════════════════════════════════════════════════════════════════ */
/* ── Globalna pretraga u topbaru ── */
.search{flex:1;max-width:560px;position:relative}
.search input{width:100%;height:40px;border:1px solid var(--n100);background:var(--n50);border-radius:11px;padding:0 14px 0 40px;font:inherit;font-size:15px;color:var(--ink);outline:none;transition:all var(--fast)}
.search input:focus{border-color:var(--primary);background:var(--white);box-shadow:0 0 0 3px rgba(124,92,214,.12)}
.search svg{position:absolute;left:13px;top:12px;width:16px;height:16px;stroke:var(--n400)}
.search .spin{position:absolute;right:13px;top:12px;display:none}
.search.loading .spin{display:block}
.search .spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cspin{display:inline-block;width:11px;height:11px;border:2px solid var(--n200);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px}

/* ── Zvono / centar obavještenja (jedinstveno na svim stranama) ── */
.bell-wrap{position:relative;flex-shrink:0}
.bell-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--white)}
.bell-pop{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-width:92vw;max-height:min(70vh,520px);overflow:auto;background:var(--white);border:1px solid var(--n100);border-radius:14px;box-shadow:var(--shadow-dd);z-index:60;display:none}
.bell-pop.open{display:block}
.bell-h{position:sticky;top:0;background:var(--white);display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--n100);z-index:1}
.bell-h b{font-family:var(--font-display);font-size:14px}
.bell-h a{font-size:12px;color:var(--primary);cursor:pointer;font-weight:600}
.nrow{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--n100);cursor:pointer;transition:background var(--fast)}
.nrow:hover{background:var(--tint)}
.nrow.unread{background:color-mix(in srgb,var(--primary) 5%,transparent)}
.nrow .stripe{width:4px;border-radius:3px;flex-shrink:0}
.nrow.kriticno .stripe{background:var(--danger)}.nrow.vazno .stripe{background:var(--warning)}.nrow.info .stripe{background:var(--n200)}
.nrow .nbody{min-width:0;flex:1}
.nrow .ntop{display:flex;align-items:baseline;gap:8px}
.nrow .ntop b{font-size:13px;font-family:var(--font-display);font-weight:700}
.nrow .ntime{margin-left:auto;font-size:10.5px;color:var(--n400);flex-shrink:0}
.nrow .ntx{font-size:12px;color:var(--n600);margin-top:2px;line-height:1.4}
.nrow .chg{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:11px;font-weight:700}
.nrow .chg .a{color:var(--n400)}.nrow .chg .b{color:var(--ink)}
.bell-empty{padding:30px 20px;text-align:center;color:var(--n400);font-size:13px}
.bell-foot{position:sticky;bottom:0;background:var(--white);border-top:1px solid var(--n100);padding:10px 16px;text-align:center}
.bell-foot a{font-size:12.5px;color:var(--primary);font-weight:600;cursor:pointer}

/* ── Prekidač teme unutar avatar menija (ikone sunca/mjeseca) ── */
.acct-mi .icon-sun,.acct-mi .icon-moon{width:16px;height:16px}