/* services/app/static/css/header_auth.css
   Header-Auth-UI: Modal (Login/Register), Avatar/Dropdown, Icons/Badges, Logo.
   Namespace-Prefix: .hy-* (geringe Kollision mit Theme)
*/

/* ---------- Modal ---------- */
.hy-modal{position:fixed;inset:0;display:none;z-index:2147483000}
.hy-modal[aria-hidden="false"]{display:block}
.hy-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:saturate(120%) blur(2px)}
.hy-modal__dialog{position:relative;max-width:520px;margin:6vh auto;z-index:1}
.hy-modal__close{position:absolute;top:-12px;right:-12px;width:40px;height:40px;border-radius:999px;background:#111827;border:1px solid #374151;color:#e5e7eb}
.hy-form-msg{margin-top:10px;padding:10px 12px;border-radius:10px;background:#1f2937;border:1px solid #7f1d1d;color:#fecaca}
.hy-tabs{display:flex;gap:6px;margin-bottom:10px}
.hy-tab{flex:1 1 0;background:#0b1220;border:1px solid #1f2937;border-radius:10px;padding:8px 10px;color:#e2e8f0;cursor:pointer}
.hy-tab[aria-selected="true"]{background:#111827;border-color:#374151;font-weight:700}
.hy-pane{display:none}
.hy-modal-open body{overflow:hidden}

/* ---------- Header Right (auth bar) ---------- */
.hy-authbar{display:flex;align-items:center;gap:10px}
.hy-ico{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid #1f2937;border-radius:10px;background:#0b1220;color:#e5e7eb
}
.hy-ico:hover{background:#111827;border-color:#374151}
.hy-badge{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:#ef4444;color:#fff;font-size:11px;line-height:18px;text-align:center
}

/* ---------- Avatar + Dropdown ---------- */
.hy-avatar-menu{position:relative}
.hy-avatar-btn{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:999px;border:1px solid #1f2937;background:#0b1220;padding:0
}
.hy-avatar-btn:hover{background:#111827;border-color:#374151}
.hy-avatar-img{width:36px;height:36px;border-radius:999px;object-fit:cover}
.hy-dropdown{
  position:absolute;right:0;top:48px;min-width:220px;background:#0b1220;border:1px solid #1f2937;
  border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.35);padding:8px;display:none;z-index:2147483646
}
.hy-dropdown[aria-hidden="false"]{display:block}
.hy-dropdown-header{padding:8px 10px;border-bottom:1px solid #1f2937;margin-bottom:6px}
.hy-name{font-weight:700;color:#e5e7eb}
.hy-role{font-size:12px;color:#9ca3af}
.hy-item{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;background:transparent;border:none;color:#e5e7eb}
.hy-item:hover{background:#111827}

/* ---------- Logo (brand) ---------- */
#logo .brand{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg, #e2e8f0);line-height:1
}
#logo .logo-icon{display:inline-flex}
#logo .logo-icon svg{display:block;color:var(--accent2,#0ea5e9)}
#logo .logo-main,#logo .logo-mobile{font-weight:800;letter-spacing:.2px;line-height:1}
#logo .logo-main{font-size:20px}
#logo .logo-mobile{display:none;font-size:18px}
@media (max-width:640px){
  #logo .logo-main{display:none}
  #logo .logo-mobile{display:inline}
}



/* Avatar-Dropdown sichtbar/positioniert machen, falls nicht in .hy-dd-wrap */
.hy-avatar-menu { position: relative; }
.hy-avatar-menu .hy-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  display: none;
  z-index: 2000;
}
.hy-avatar-menu .hy-dropdown[aria-hidden="false"] { display: block; }

/* --- Header dropdowns: Positionierung konsistent --- */
.menu_side_area,
#hy-avatar-wrap { overflow: visible; }

.hy-dd-wrap { position: relative; }

.hy-dd-wrap .hy-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 2000;
}

/* Avatar-spezifisch: erzwinge rechte Ausrichtung, keine Transforms */
#hy-avatar-wrap .hy-dropdown {
  min-width: 260px;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
}

/* Buttons/Img sauber */
#hy-avatar-btn { display: inline-flex; align-items: center; border-radius: 9999px; }
.hy-avatar-img { width: 32px; height: 32px; border-radius: 9999px; display: block; }

/* Sichtbarkeit */
.hy-dd-wrap .hy-dropdown[aria-hidden="true"]  { display: none; }
.hy-dd-wrap .hy-dropdown[aria-hidden="false"] { display: block; }