/* ── Brand lockup (source unique : modules/branding.py) ── */
.brand-lockup { height: 30px; width: auto; display: block; user-select: none; }
.brand-mark   { height: 24px; width: auto; display: block; user-select: none; }

/* ── SVG icon system (recolorable via currentColor + CSS mask) ── */
.svic {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ic) no-repeat center / contain;
          mask: var(--ic) no-repeat center / contain;
  flex: 0 0 auto;
}
.svic-refresh { --ic: url(/assets/icons/refresh.svg); }
.svic-grid    { --ic: url(/assets/icons/grid.svg); }
.svic-user    { --ic: url(/assets/icons/user.svg); }
.svic-plus    { --ic: url(/assets/icons/plus.svg); }
.svic-x       { --ic: url(/assets/icons/x.svg); }
.svic-chevron { --ic: url(/assets/icons/chevron-down.svg); }
.svic-menu    { --ic: url(/assets/icons/menu.svg); }
.svic-table    { --ic: url(/assets/icons/table.svg); }
.svic-chart    { --ic: url(/assets/icons/chart.svg); }
.svic-globe    { --ic: url(/assets/icons/globe.svg); }
.svic-news     { --ic: url(/assets/icons/news.svg); }
.svic-layers   { --ic: url(/assets/icons/layers.svg); }
.svic-activity { --ic: url(/assets/icons/activity.svg); }

/* ── App header ── */
.app-header {
  background: var(--header);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  font-family: var(--font-sans);
  position: relative;
  /* Sits above the #desktop window layer (its own stacking context) so the
     layout dropdown — anchored inside the header — paints over the windows.
     Stays well below modals/splash (z-index 10000+). */
  z-index: 50;
}

/* ── Header left / right clusters ── */
.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.header-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex: 0 0 auto;
}

/* ── Header button bar (right side) ── */
.header-right-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Icon-only button (hamburger etc.) ── */
.icon-btn {
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  padding: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--r-btn) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.icon-btn .svic { width: 18px; height: 18px; }
.icon-btn:hover {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
/* REFRESH = action « live data » : ambre en permanence */
.icon-btn.hot { color: var(--accent) !important; background: var(--accent-soft) !important; }
.icon-btn.hot:hover { background: rgba(245, 166, 35, 0.18) !important; }

/* ── REFRESH variant of layout-btn ── */
.layout-btn.refresh-btn {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  letter-spacing: 1.5px;
}
.layout-btn.refresh-btn:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}