/* ============================================================
   layout.css — topbar, page shell, grids, section headings
============================================================ */

/* ---------- Top nav (glass bubble style) ---------- */
:root{
  --page-glow:
    radial-gradient(55% 60% at 90% 4%, rgba(165,135,255,.38), transparent 70%),
    radial-gradient(45% 50% at 62% 0%, rgba(150,180,255,.32), transparent 70%),
    radial-gradient(40% 50% at 8% 0%, rgba(255,255,255,.95), transparent 70%),
    linear-gradient(180deg,#e9e5fa 0,#f2effc 380px,#f6f3ff 640px);
}
body{ background:var(--page-glow), var(--lilac-bg); background-repeat:no-repeat; }

.topbar{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  padding:12px 32px;
  background:transparent;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
html:not([data-nav="side"]) .topbar{
  position:relative;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.brand{
  justify-self:start;
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:23px; letter-spacing:-0.02em;
  white-space:nowrap;
}
.brand-logo{ height:44px; width:auto; display:block; }
.brand-mark{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(145deg,#8a6bff,#5b34e6);
  box-shadow:0 10px 22px -8px rgba(95,54,232,.7), inset 0 1px 1px rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:18px; flex-shrink:0;
}

/* The glass pill (colours sampled from the design reference) */
.navlinks{
  display:flex; align-items:center; gap:0;
  margin:0; padding:3px;
  border-radius:999px;
  background:
    radial-gradient(70px 46px at 97% 96%, rgba(255,255,255,.34), rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#b3b4cf 0,#8087b1 12px,#6c739f 32px,#6e75a2 55%,#8489b8 82%,#9599c6 100%);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  position:relative;
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:
    0 18px 36px -18px rgba(60,50,150,.55),
    inset 0 2px 1px rgba(255,255,255,.7),
    inset 0 -3px 2px rgba(240,242,255,.8),
    inset 0 0 22px rgba(255,255,255,.10);
}
html:not([data-nav="side"]) .topbar .navlinks{
  position:fixed; top:12px; left:50%; z-index:60;
  transform:translateX(-50%) scale(var(--nav-scale, 1));
  transform-origin:top center;
}
html:not([data-nav="side"]) .topbar .brand{ grid-column:1; }
html:not([data-nav="side"]) .topbar .top-actions{ grid-column:3; }
.navlink{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-width:72px; height:40px; padding:0 6px; border-radius:20px;
  border:none; background:none; color:#fff;
  font-size:11px; font-weight:600; white-space:nowrap;
  text-shadow:0 1px 2px rgba(40,30,110,.28);
  -webkit-tap-highlight-color:transparent;
  position:relative; z-index:1; cursor:pointer;
}
.navlink svg{ width:18px; height:18px; flex-shrink:0; filter:drop-shadow(0 1px 2px rgba(40,30,110,.28)); transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.navlink.active svg{ transform:scale(1.2); }
/* Reserves bold width up front so nothing jumps when a tab turns bold */
.navlabel{ display:inline-flex; flex-direction:column; align-items:center; line-height:1.1; }
.navlabel::after{ content:attr(data-label); font-weight:800; height:0; overflow:hidden; visibility:hidden; }
.navlink:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* Active tab: glass bubble. It is its own element (.nav-bubble, created in router.js)
   that glides from one tab to the next instead of fading in place. */
.navlink.active{ font-weight:800; }
.nav-bubble{
  position:absolute; left:0; top:0; z-index:0; pointer-events:none;
  width:0; height:0; opacity:0; border-radius:20px;
  background:
    radial-gradient(62% 48% at 24% 15%, rgba(255,255,255,.70), rgba(255,255,255,0) 68%),
    radial-gradient(95% 62% at 50% 120%, #e6eaff 0%, rgba(190,178,255,.85) 40%, rgba(190,178,255,0) 74%),
    linear-gradient(160deg,#9f85f3 0%,#8272da 38%,#766ace 62%,#8a7be6 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.55),
    inset 0 0 18px 4px rgba(214,206,255,.80),
    inset 0 -4px 5px rgba(243,254,255,.95),
    inset 3px 4px 7px rgba(255,255,255,.55),
    0 0 22px 2px rgba(160,140,255,.40),
    0 10px 20px -8px rgba(80,60,200,.5);
  transition:transform .45s cubic-bezier(.34,1.35,.64,1), width .45s cubic-bezier(.34,1.35,.64,1), height .45s cubic-bezier(.34,1.35,.64,1);
}
.nav-bubble.ready{ opacity:1; }
.nav-bubble.no-anim{ transition:none; }
@media (prefers-reduced-motion: reduce){ .nav-bubble{ transition:none; } }

.top-actions{ display:flex; align-items:center; gap:10px; justify-self:end; }
.icon-btn{
  position:relative;
  width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 20px -10px rgba(76,47,196,.45), inset 0 1px 1px #fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
}
.icon-btn svg{ width:17px; height:17px; }
.icon-btn:hover{ background:#fff; color:var(--violet-700); }
.icon-btn.has-dot::after{
  content:""; position:absolute; top:7px; right:9px;
  width:9px; height:9px; border-radius:50%;
  background:#ef4444; border:2px solid #fff;
}
.avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(145deg,#8a6bff,#5b34e6);
  box-shadow:0 8px 18px -8px rgba(95,54,232,.7), inset 0 1px 1px rgba(255,255,255,.5);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; cursor:pointer;
}

/* Smaller screens: nav stays in the top middle, everything just shrinks */
@media (max-width:1180px){
  .topbar{ padding:10px 20px; gap:12px; }
  html:not([data-nav="side"]) .topbar .navlinks{ top:10px; }
  .navlink{ min-width:66px; height:38px; font-size:10.5px; border-radius:19px; }
  .navlink svg{ width:17px; height:17px; }
}
@media (max-width:920px){
  .topbar{ padding:10px 14px; }
  .brand{ font-size:0; gap:0; }               /* logo mark only */
  .brand-mark{ width:36px; height:36px; font-size:17px; border-radius:11px; }
  .brand-logo{ height:34px !important; }
  .navlink{ min-width:56px; height:36px; font-size:10px; border-radius:18px; }
  .navlink svg{ width:16px; height:16px; }
  .top-actions{ gap:8px; }
  .icon-btn{ width:36px; height:36px; }
  .avatar{ width:36px; height:36px; font-size:14px; }
}
@media (max-width:720px){
  .navlink{ min-width:50px; height:34px; font-size:9.5px; border-radius:17px; }
  .navlink svg{ width:15px; height:15px; }
}
@media (max-width:480px){
  .topbar{ padding:8px 10px; gap:8px; }
  html:not([data-nav="side"]) .topbar .navlinks{ top:8px; }
  .brand-mark{ width:32px; height:32px; font-size:15px; border-radius:10px; }
  .brand-logo{ height:26px !important; padding:3px 6px !important; }
  .avatar{ width:32px; height:32px; font-size:13px; }
  .navlinks{ padding:2px; }
  .navlink{ min-width:42px; height:32px; padding:0 2px; font-size:9px; gap:0; border-radius:16px; }
  .navlink svg{ width:14px; height:14px; }
}

/* ---------- Page shell ---------- */
main{ max-width:1180px; margin:0 auto; padding:0 32px 64px; }

/* The router swaps the contents of #app. Each partial's root uses .view. */
.view{ display:block; }

section.block{ margin-top:26px; }
.section-heading{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;
}
.section-heading h2{ font-size:21px; margin:0; letter-spacing:-0.01em; }
.section-heading p{ margin:2px 0 0; color:var(--ink-soft); font-size:13.5px; }

/* ---------- Shared grids ---------- */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid2{ display:grid; grid-template-columns:1.1fr 1fr; gap:20px; }

@media (max-width:980px){
  .grid3{ grid-template-columns:repeat(2,1fr); }
  .grid2{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  main{ padding:0 16px 48px; }
  .grid3{ grid-template-columns:1fr; }
}


/* ---------- avatar dropdown ---------- */
.top-actions{ position:relative; }
.avatar{ cursor:pointer; }
.user-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:80; min-width:230px;
  background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 40px -12px rgba(36,26,77,.35); padding:8px; display:none;
}
.user-menu.open{ display:block; }
.um-id{ padding:10px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.um-name{ font:700 15px Sora,sans-serif; }
.um-reg{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.user-menu button{
  display:block; width:100%; text-align:left; background:none; border:0; color:inherit; cursor:pointer;
  padding:10px 12px; border-radius:10px; font:600 14px Inter,sans-serif;
}
.user-menu button:hover{ background:var(--violet-100); }
.user-menu button.danger{ color:var(--rose); }


/* ---------- notifications panel (bell) ---------- */
.notif-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:90;
  width:min(360px, calc(100vw - 20px)); display:none; overflow:hidden;
  background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 18px 40px -12px rgba(36,26,77,.35);
}
.notif-panel.open{ display:block; }
.np-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.np-head b{ font:700 15px Sora,sans-serif; }
.np-head small{ color:var(--ink-soft); font-size:12.5px; margin-left:6px; }
.np-clear{ border:0; background:none; color:var(--violet-600); font:600 12.5px Inter,sans-serif; cursor:pointer; }
.np-list{ max-height:min(60vh, 380px); overflow-y:auto; }
.np-item{
  display:flex; gap:12px; width:100%; padding:12px 16px; border:0; border-bottom:1px solid var(--line);
  background:none; color:inherit; text-align:left; cursor:pointer; font:inherit;
}
.np-item:last-child{ border-bottom:0; }
.np-item:hover{ background:var(--violet-100); }
.np-item.new{ background:color-mix(in srgb, var(--violet-100) 70%, transparent); }
.np-ic{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:var(--violet-100); color:var(--violet-600); }
.np-ic svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.np-body{ min-width:0; flex:1; }
.np-body b{ display:block; font-size:13.5px; font-weight:600; }
.np-body span{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.np-body small{ display:block; margin-top:4px; font-size:11.5px; color:var(--ink-soft); }
.np-new{ align-self:center; width:8px; height:8px; border-radius:50%; background:var(--violet-600); flex-shrink:0; }
.np-empty{ padding:28px 16px; text-align:center; color:var(--ink-soft); font-size:13.5px; }