/* css/layout.css */
* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin:0;
  background: var(--g-page);
  color: var(--text);
  font: 500 var(--fs-md)/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .01em;
}

/* App shell */
.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100dvh;
}
@media (max-width: 1100px) {
  .app { grid-template-columns: 76px 1fr; }
  .brand span, .nav button span { display:none; }
}

/* Sidebar */
.sidebar {
  background: var(--g-card);
  border-right: 1px solid var(--border);
  padding: 16px;
  position: sticky; top:0; height: 100dvh;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; font-size: 16px; }
.brand .dot { width:10px; height:10px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px rgba(110,168,254,.18); }
.nav { margin-top: 16px; display:flex; flex-direction:column; gap:8px; }
.nav button{
  appearance:none; border:1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--text); cursor:pointer; font-weight:700;
  text-align:left; padding:10px 12px; opacity:.95;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.nav button:hover{ background: var(--muted); }
.nav button.active{
  background: linear-gradient(180deg, rgba(77,127,255,.16), rgba(77,127,255,.10));
  border-color: rgba(77,127,255,.35);
  box-shadow: inset 0 0 0 1px rgba(77,127,255,.25);
}

/* Main */
.right { padding: 18px; display:grid; grid-template-rows:auto 1fr auto; gap:12px; }

/* ---------- Topbar (clean, final) ---------- */
:root {
  --topbar-h: 44px; /* adjust to taste (38/44/48) */
}

.topbar{
  display:flex;
  align-items:center;           /* vertical centering */
  gap:10px;
  background: var(--g-card);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  height: var(--topbar-h);      /* fixed height to match controls */
  padding: 0 10px;              /* no vertical padding, perfect centering */
  box-shadow: var(--shadow-sm);
  position: relative;           /* anchor popover to the bar */
}

/* optional spacer still supported */
.topbar .spacer{ flex:1; }

/* Bell: pushed to far right; centered content */
#btn-announcements{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  line-height:0;                /* remove emoji baseline sag */
  font-size:20px;
  padding:0 8px;                /* horizontal breathing room */
  border-radius:10px;
  cursor:pointer;
}

/* Popover: right-aligned, just under the bar */
.topbar #announcements-popover{
  position:absolute;
  right:10px;
  top:calc(100% + 6px);
  z-index:1000;
}

/* Footer (optional) */
.site-footer{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
  padding-top: 6px;
  opacity: .9;
}

.nav-divider{border:0;height:1px;background:var(--muted,#e5e9f2);margin:12px 0;opacity:.7}
.nav.nav-secondary{margin-top:8px}
.nav.nav-secondary button{opacity:.95}

/* ---------- Topbar (final) ---------- */
:root { --topbar-h: 44px; } /* adjust if you want taller/shorter */

.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;                 /* ensure it spans the grid width */
  height: var(--topbar-h);
  padding: 0 10px;            /* vertical centering without extra height */
  background: var(--g-card);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  position: relative;         /* anchors the popover */
}

.topbar .spacer{ flex:1 1 auto; }  /* pushes everything after it to the right */

/* Bell: no auto-margins; let the spacer do the pushing */
#btn-announcements{
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  line-height:0;              /* kills emoji baseline sag */
  font-size:20px;
  padding:0 8px;
  border-radius:10px;
  cursor:pointer;
}

/* Popover drops under the right edge of the bar */
.topbar #announcements-popover{
  position:absolute;
  right:10px;
  top:calc(100% + 6px);
  z-index:1000;
}