/* atlas-account.css — Account-Trigger + Dropdown (geteilt zwischen Top-Nav und Toolbar)
 *
 * Verwendung: Atlas.account.mount(targetEl) baut die Elemente, dieser CSS-File
 * stylet sie. Caller kann eigene Wrap-Klasse hinzufuegen wenn Position oder
 * Z-Index abweicht. */

.atl-acc { position:relative; display:inline-block; }
.atl-acc[hidden] { display:none !important; }

.atl-acc-trigger {
  display:flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--atl-border);
  padding:4px 10px 4px 4px; border-radius:999px;
  color:var(--atl-text); cursor:pointer; font-family:inherit;
  transition: border-color .12s, background .12s;
}
.atl-acc-trigger:hover { border-color:var(--atl-border-bright); background:rgba(255,255,255,.04); }
.atl-acc-trigger-open { border-color:var(--atl-border-bright); background:var(--atl-primary-soft); }

.atl-acc-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--atl-primary-soft); color:var(--atl-primary);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; letter-spacing:.3px;
  border:1px solid var(--atl-border-bright);
}

.atl-acc-tier {
  font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; line-height:1.3;
  background:rgba(125,138,162,.18); color:var(--atl-text-mute);
}
.atl-acc-tier[data-tier="pro"]     { background:var(--atl-primary-soft); color:var(--atl-primary); }
.atl-acc-tier[data-tier="premium"] { background:rgba(255,220,80,.16); color:var(--atl-accent); }
.atl-acc-tier[data-tier="agency"]  { background:rgba(190,140,255,.18); color:#d2a8ff; }

.atl-acc-chev { font-size:12px; color:var(--atl-text-mute); margin-right:2px;
  transition: transform .12s; }
.atl-acc-trigger-open .atl-acc-chev { transform: rotate(180deg); }

/* Kompakt-Variante (z.B. in Karten-Toolbar): kein Tier-Chip, kleinerer Avatar */
.atl-acc-compact .atl-acc-trigger { padding:3px 8px 3px 3px; }
.atl-acc-compact .atl-acc-avatar { width:24px; height:24px; font-size:12px; }
/* Tier-Chip auch im compact-Header sichtbar (Pro/Premium/Agency-Hinweis am Avatar) */
.atl-acc-compact .atl-acc-tier { display:inline-block; font-size:12px; padding:1px 5px; }

.atl-acc-menu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:240px;
  background:var(--atl-surface-3); backdrop-filter: blur(20px) saturate(180%);
  border:1px solid var(--atl-border-mid); border-radius:var(--atl-radius-lg);
  box-shadow:var(--atl-shadow-lg); padding:6px; z-index:1000;
}
.atl-acc-head { padding:10px 12px 8px; }
.atl-acc-mail {
  font-size:13px; color:var(--atl-text-strong); font-weight:600;
  line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.atl-acc-tierline { margin-top:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.atl-acc-tier-badge {
  font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; line-height:1.3;
  background:rgba(125,138,162,.18); color:var(--atl-text-mute);
}
.atl-acc-tier-badge[data-tier="pro"]     { background:var(--atl-primary-soft); color:var(--atl-primary); }
.atl-acc-tier-badge[data-tier="premium"] { background:rgba(255,220,80,.16); color:var(--atl-accent); }
.atl-acc-tier-badge[data-tier="agency"]  { background:rgba(190,140,255,.18); color:#d2a8ff; }
.atl-acc-upgrade { font-size:12px; font-weight:600; color:var(--atl-primary); text-decoration:none; }
.atl-acc-upgrade:hover { text-decoration:underline; }
.atl-acc-upgrade[hidden] { display:none !important; }

.atl-acc-sep { height:1px; background:var(--atl-border); margin:6px 4px; }

.atl-acc-item {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; border-radius:6px;
  background:transparent; border:0; color:var(--atl-text);
  font-family:inherit; font-size:13px; text-align:left; cursor:pointer;
  text-decoration:none; transition: background .1s, color .1s;
}
.atl-acc-item:hover { background:var(--atl-primary-soft); color:var(--atl-text-strong); text-decoration:none; }
.atl-acc-item[hidden] { display:none !important; }
.atl-acc-item.atl-acc-logout { color:var(--atl-text-soft); }
.atl-acc-item.atl-acc-logout:hover { background:rgba(255,156,156,.10); color:var(--atl-error); }
.atl-acc-ico { width:18px; display:inline-block; text-align:center; opacity:.9; }

@media (max-width: 860px) {
  .atl-acc-trigger { padding:3px 8px 3px 3px; }
  .atl-acc-avatar { width:24px; height:24px; font-size:12px; }
  .atl-acc-tier { display:none; }
  .atl-acc-menu { position:fixed; top:56px; right:8px; left:auto;
    width:calc(100vw - 16px); max-width:280px; min-width:0; }
}