/* suite-header.css — Nicoby suite standard app header.
 * Self-contained (own --sh-* tokens, own class names) so it drops into any app
 * without depending on that app's variables. The bar stays dark & warm in both
 * light and dark themes, per suite convention. Admin header = brand + Sync +
 * user chip + theme/logout icons. Portals should render only the brand + theme. */
.suite-hd {
  --sh-bg:#15161a; --sh-line:rgba(255,255,255,.14); --sh-fg:#ece7db;
  --sh-dim:#9c988c; --sh-accent:#c9a24a;
  background:var(--sh-bg); color:var(--sh-fg);
  display:flex; align-items:center; gap:14px; padding:11px 18px; flex:none;
}
.suite-hd__brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:#fff; min-width:0; }
.suite-hd__brand:hover { text-decoration:none; }
.suite-hd__mark { width:34px; height:34px; border-radius:9px; display:block; flex:none; }
.suite-hd__names { display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.suite-hd__word { font-family:'Zalando Sans SemiExpanded',system-ui,sans-serif; font-weight:700; font-size:17px; letter-spacing:1.2px; text-transform:uppercase; white-space:nowrap; color:#fff; }
.suite-hd__sub { font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--sh-dim); margin-top:2px; white-space:nowrap; }
.suite-hd__spacer { flex:1; }
.suite-hd__cluster { display:flex; align-items:center; gap:8px; }

.suite-hd__ico {
  width:36px; height:36px; border-radius:10px; border:1px solid var(--sh-line);
  background:rgba(255,255,255,.04); color:#d8d2c6; display:grid; place-items:center;
  cursor:pointer; flex:none; padding:0; transition:.15s; font-family:inherit;
}
.suite-hd__ico:hover { color:#fff; border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.09); }
.suite-hd__ico svg { width:17px; height:17px; }
.suite-hd__ico[hidden] { display:none; }

.suite-hd__sync {
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px 0 11px;
  border-radius:10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  color:var(--sh-fg); font-size:13px; font-weight:600; font-family:inherit; cursor:pointer;
  white-space:nowrap; transition:.15s;
}
.suite-hd__sync:hover { color:#fff; border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.1); }
.suite-hd__sync[hidden] { display:none; }
.suite-hd__sync:disabled { opacity:.7; cursor:default; }
.suite-hd__sync svg { width:15px; height:15px; transition:transform .6s; }
.suite-hd__sync.spinning svg { animation:suite-spin .8s linear infinite; }
@keyframes suite-spin { to { transform:rotate(360deg); } }
.suite-hd__sync .ago { color:var(--sh-dim); font-weight:500; font-size:11.5px; }

.suite-hd__user { display:flex; align-items:center; gap:9px; min-width:0; order:-1; } /* avatar/name first, then the buttons */
.suite-hd__user:empty { display:none; }
.suite-hd__nm { display:flex; flex-direction:column; line-height:1.12; min-width:0; }
.suite-hd__nm b { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; }
.suite-hd__nm span { font-size:10.5px; color:var(--sh-dim); white-space:nowrap; }

.suite-hd__divider { width:1px; height:24px; background:rgba(255,255,255,.12); margin:0 2px; flex:none; }

/* Dropdown menu (e.g. a consolidated Settings control). */
.suite-hd__menu { position:relative; display:inline-flex; }
.suite-hd__menu[hidden] { display:none; }
.suite-hd__menupop {
  position:absolute; right:0; top:calc(100% + 6px); min-width:190px;
  background:#1c1d22; border:1px solid rgba(255,255,255,.14); border-radius:12px;
  padding:6px; box-shadow:0 12px 34px -10px rgba(0,0,0,.55); z-index:60;
  display:flex; flex-direction:column; gap:2px;
}
.suite-hd__menupop[hidden] { display:none; }
.suite-hd__menupop button {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:none; border:none; color:#e7e1d5; font-family:inherit; font-size:13.5px;
  padding:9px 11px; border-radius:8px; cursor:pointer; white-space:nowrap;
}
.suite-hd__menupop button:hover { background:rgba(255,255,255,.09); color:#fff; }

@media (max-width:640px) {
  .suite-hd { padding:10px 13px; gap:10px; }
  .suite-hd__sub { display:none; }
  .suite-hd__word { font-size:15px; letter-spacing:1px; }
  .suite-hd__nm { display:none; }               /* name collapses to just the avatar */
  .suite-hd__sync { padding:0; width:36px; justify-content:center; }
  .suite-hd__sync .lbl, .suite-hd__sync .ago { display:none; }
  .suite-hd__divider { display:none; }
}