/* Shared layout1 styles (topbar + common tokens)
   Pages (dashboard/task) should still include their own css for layout details.
*/

:root{
  --radius: 14px;
  --shadow: 0 12px 30px rgba(0,0,0,.12);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Minimal topbar scaffolding; actual colors come from page css vars */
a{ text-decoration:none; color: inherit; }
a:hover{ text-decoration:none; }

.topbar{ height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:280px; }
.logo{
  width:32px;height:32px;border-radius:10px;
  background: linear-gradient(135deg, rgba(122,162,255,.95), rgba(97,212,163,.95));
  box-shadow: var(--shadow);
}
.brand h1{ font-size:14px; margin:0; letter-spacing:.2px; font-weight:700; }
.brand span{ display:block; font-size:12px; opacity:.65; margin-top:2px; }
.nav{ display:flex; gap:8px; align-items:center; justify-content:center; flex:1; }
.actions{ display:flex; align-items:center; gap:8px; min-width: 280px; justify-content:flex-end; }

/* Common pill badge (used in topbar actions/center across pages) */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 10px; border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.70);
  color: var(--muted);
  font-size: 12px;
  max-width: 520px;
}
html[data-theme="dark"] .pill{ background: rgba(12,19,32,.7); }

/* Scrollbar styling (WebKit + Firefox)
   Keep subtle and theme-friendly. Applied globally; per-page vars provide colors.
*/
*{
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(120,120,140,.45) transparent;
}

/* WebKit */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(120,120,140,.35);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(120,120,140,.50); background-clip: content-box; }

html[data-theme="dark"] *{
  scrollbar-color: rgba(200,200,220,.28) transparent;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{
  background: rgba(200,200,220,.20);
  background-clip: content-box;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{
  background: rgba(200,200,220,.32);
  background-clip: content-box;
}