:root{
  --modal-radius: 18px;
  --modal-shadow: 0 25px 60px rgba(18,38,90,.18);
  --modal-border: 1px solid rgba(255,255,255,.65);
  --modal-card: rgba(255,255,255,.62);
  --modal-card2: rgba(255,255,255,.52);
  --modal-ring: 0 0 0 4px rgba(120,120,120,.20);
  --danger: rgba(255,59,48,.95);
  --dangerSoft: rgba(255,59,48,.14);
}

/* ✅ FIX: nicht mehr display:none togglen (Qt flackert sonst weiß) */
.hy-modalOverlay{
  position:fixed;
  inset:0;
  z-index:9999;

  /* vorher: display:none */
  display:block;

  /* statt display toggle: opacity/visibility */
  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform: translateZ(0);
  will-change: opacity;
}
.hy-modalOverlay.open{
  /* vorher: display:block */
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.hy-modalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(10,16,26,.28);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}

/* ✅ QtWebEngine: backdrop-filter macht oft white flicker -> Fake Blur */
.qtwe .hy-modalBackdrop{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  /* optisch sehr ähnlich: dunkler Overlay + weiche Highlights */
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(900px 700px at 85% 25%, rgba(122,158,253,.10), transparent 55%),
    rgba(10,16,26,.38);
}

.hy-modalWindow{
  position:absolute;
  left:50%;
  top:50%;

  /* ✅ kleiner Stabilizer für Qt: eigener Compositor layer */
  transform:translate(-50%,-50%) translateZ(0);

  width:min(560px,calc(100% - 32px));
  border-radius:var(--modal-radius);
  background:linear-gradient(180deg,var(--modal-card),var(--modal-card2));
  border:var(--modal-border);
  box-shadow:var(--modal-shadow);
  overflow:hidden;
  will-change: transform, opacity;
}

.hy-modalWindow::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(520px 240px at 80% 10%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(600px 320px at 50% 100%, rgba(122,158,253,.14), transparent 60%);
  pointer-events:none;
}

.hy-modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px;
}

.hy-modalTitle{
  font-weight:800;
  letter-spacing:-.02em;
  font-size:14px;
  color:rgba(11,18,32,.92);
  margin:0;
}

.hy-modalHeaderRight{
  display:flex;
  align-items:center;
  gap:10px;
}

.hy-modalClose{
  border:0;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(16,24,40,.10);
  width:36px;
  height:36px;
  border-radius:14px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease;
  box-shadow:0 10px 22px rgba(18,38,90,.08);
}
.hy-modalClose:hover{background:rgba(255,255,255,.75);}
.hy-modalClose:active{transform:scale(.98);}
.hy-modalClose:focus-visible{
  outline:none;
  box-shadow:var(--modal-ring),0 10px 22px rgba(18,38,90,.10);
}

.hy-modalHeaderBtn{
  border:0;
  cursor:pointer;
  height:36px;
  padding:0 14px;
  border-radius:14px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(16,24,40,.10);
  font-weight:800;
  letter-spacing:-.01em;
  color:rgba(11,18,32,.88);
  box-shadow:0 10px 22px rgba(18,38,90,.08);
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease;
}
.hy-modalHeaderBtn:hover{
  background:rgba(255,255,255,.75);
  box-shadow:0 12px 26px rgba(18,38,90,.10);
}
.hy-modalHeaderBtn:active{transform:scale(.98);}
.hy-modalHeaderBtn:focus-visible{
  outline:none;
  box-shadow:var(--modal-ring),0 12px 26px rgba(18,38,90,.12);
}

.hy-modalBody{
  padding:8px 14px 14px;
}

.hy-modalActions{
  display:flex;
  gap:10px;
  padding:0 14px 14px;
}

.hy-modalBtn{
  flex:1;
  border:1px solid rgba(16,24,40,.10);
  background:rgba(255,255,255,.60);
  color:rgba(11,18,32,.86);
  font-weight:700;
  padding:12px 14px;
  border-radius:16px;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  box-shadow:0 12px 26px rgba(18,38,90,.08);
}
.hy-modalBtn:hover{background:rgba(255,255,255,.76);}
.hy-modalBtn:active{transform:translateY(1px);}
.hy-modalBtn:focus-visible{
  outline:none;
  box-shadow:var(--modal-ring),0 12px 26px rgba(18,38,90,.10);
}

.hy-modalBtn.primary{
  background:linear-gradient(180deg,rgba(16,24,40,.92),rgba(16,24,40,.86));
  color:#fff;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.hy-modalBtn.primary:hover{
  background:linear-gradient(180deg,rgba(16,24,40,.98),rgba(16,24,40,.92));
  box-shadow:0 22px 60px rgba(0,0,0,.22);
}

body.hy-modal-open{overflow:hidden;}

.hyField{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.hyLabel{
  font-size:12px;
  color:rgba(11,18,32,.72);
}

.hyControl{
  display:flex;
  align-items:center;
  border-radius:16px;
  border:1px solid rgba(16,24,40,.10);
  background:rgba(255,255,255,.70);
  box-shadow:0 12px 30px rgba(18,38,90,.07);
}

.hyControl:focus-within{
  box-shadow:0 12px 30px rgba(18,38,90,.07),var(--modal-ring);
}

.hyInput{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  padding:14px;
  font-size:14px;
  color:rgba(11,18,32,.92);
}

.hyHint{
  margin-top:10px;
  font-size:12px;
  color:rgba(11,18,32,.58);
}

.hyCompanyCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(16,24,40,.10);
  background:rgba(255,255,255,.62);
  box-shadow:0 12px 28px rgba(18,38,90,.08);
}

.hyCompanyLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.hyAvatar{
  width:44px;
  height:44px;
  border-radius:16px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(16,24,40,.10);
  box-shadow:0 10px 22px rgba(18,38,90,.10);
  overflow:hidden;
  display:grid;
  place-items:center;
}

.hyAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hyChip{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.hyChipName{
  font-weight:800;
  font-size:13px;
  color:rgba(11,18,32,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hyChipSub{
  font-size:12px;
  color:rgba(11,18,32,.58);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hyRemoveBtn{
  width:36px;
  height:36px;
  border-radius:14px;
  border:1px solid rgba(16,24,40,.10);
  background:rgba(255,255,255,.55);
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--danger);
  font-weight:900;
  box-shadow:0 10px 22px rgba(18,38,90,.08);
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease;
}

.hyRemoveBtn:hover{
  background:var(--dangerSoft);
  box-shadow:0 12px 26px rgba(18,38,90,.10);
}

.hyRemoveBtn:active{transform:scale(.98);}

.hyRemoveBtn:focus-visible{
  outline:none;
  box-shadow:var(--modal-ring),0 12px 26px rgba(18,38,90,.12);
}

/* ===========================
   QTWEBENGINE SAFE MODE (MODAL)
   =========================== */

.qtwe .hy-modalWindow::after{
  display:none !important;
}

.qtwe .hy-modalWindow{
  box-shadow: 0 16px 40px rgba(18,38,90,.14) !important;
}


/* Overlay: statt top/left/transform -> grid centering */
.hy-modalOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* wichtig: eigene Ebene */
  isolation: isolate;
}

.hy-modalOverlay.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop bleibt wie gehabt */
.hy-modalBackdrop{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(10,16,26,.28);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Window: KEIN transform mehr */
.hy-modalWindow{
  position: relative;     /* war absolute */
  z-index: 1;

  left: auto;
  top: auto;
  transform: none !important;

  width: min(560px, calc(100% - 32px));
  border-radius: var(--modal-radius);
  background: linear-gradient(180deg,var(--modal-card),var(--modal-card2));
  border: var(--modal-border);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
}
