/* Shared top header bar (js/header.js), constant across the dashboard and
   the admin page - there is no templating layer here, so both pages render
   it from the same module into their own <div id="appHeader">.
   --app-header-h is defined in tokens.css. */

.app-header{
  height:var(--app-header-h); padding:0 22px;
  display:flex; align-items:center;
  position:sticky; top:0; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.app-header-title{ font-family:var(--sans); font-weight:700; font-size:14px; color:var(--text-primary); }
.app-header-sep{ color:var(--text-secondary); margin:0 8px; font-weight:300; }
.app-header-back{
  margin-left:auto; font-family:var(--sans); font-weight:300; font-size:13px;
  color:var(--text-secondary); text-decoration:none;
}
.app-header-back:hover{ color:var(--text-primary); text-decoration:underline; }

/* ---------- signed-in user block (auth.js's renderUserBlock) ----------
   dashboard.html places this in the sidebar footer (width:100%, see
   layout.css's .side-foot); admin.html places it in its own compact topbar
   (.admin-topbar overrides the width - see admin.css). */
.user-block{ position:relative; }
.user-block-toggle{
  width:100%; height:52px; padding:0 10px; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); background:transparent; cursor:pointer;
  display:flex; align-items:center; gap:10px; text-align:left;
  transition:background-color .2s,border-color .2s;
}
.user-block-toggle:hover{ background:var(--surface-sunken); }
.user-avatar{
  width:30px; height:30px; flex:none; border-radius:50%; background:var(--blue-bold);
  color:var(--text-inverse); font-family:var(--sans); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.user-info{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.user-name{ font-family:var(--sans); font-weight:400; font-size:13px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); }
.user-caret{ width:14px; height:14px; flex:none; color:var(--text-secondary); }
.user-menu{
  position:absolute; bottom:calc(100% + 6px); left:0; right:0; z-index:20;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card); display:flex; flex-direction:column; padding:6px; gap:2px;
}
.user-menu-item{
  height:38px; padding:0 10px; border:0; border-radius:var(--radius-sm); background:transparent;
  color:var(--text-primary); font-family:var(--sans); font-weight:300; font-size:13px;
  display:flex; align-items:center; text-decoration:none; cursor:pointer; width:100%; text-align:left;
}
.user-menu-item:hover{ background:var(--surface-sunken); }