:root{
  --pl-blue:#384074;
  --pl-blue-2:#222a52;
  --pl-accent:#26267b;

  --bg:#f4f6fb;
  --panel:#fff;
  --panel-2:#eef1fb;

  --border:rgba(56,64,116,.18);
  --border-2:rgba(56,64,116,.16);
  --text:#1c2238;
  --muted:rgba(28,34,56,.65);
}

html, body{height:100%;}
body.ic-page{margin:0;background:var(--bg);color:var(--text);}
.ic-shell{height:100vh;display:flex;flex-direction:column;min-height:0;}

.ic-topbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px;
  background:linear-gradient(90deg,var(--pl-blue),var(--pl-blue-2));
  color:#fff;
  box-shadow:0 8px 28px rgba(10,18,45,.18);
}
.ic-titlewrap{display:flex;flex-direction:column;gap:2px;}
.ic-title{font-size:1.35rem;font-weight:800;letter-spacing:.2px;text-shadow:0 1px 1px rgba(0,0,0,.15);}
.ic-subtitle{opacity:.9;font-size:.9rem;}
.ic-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.ic-body{flex:1 1 auto;min-height:0;display:flex;}
.ic-main{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;}
.ic-tablewrap{flex:1 1 auto;min-height:0;overflow:auto;padding:12px;}

.ic-sidebar{
  flex:0 0 360px;min-width:260px;max-width:520px;
  display:flex;flex-direction:column;min-height:0;
  background:var(--panel-2);
  border-left:1px solid var(--border);
}
.ic-sidebar-head{
  flex:0 0 auto;padding:12px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.55));
}
.ic-hint{font-size:.82rem;color:var(--muted);}
.ic-sidebar-content{flex:1 1 auto;min-height:0;overflow:auto;padding:12px;}
.ic-sidebar-bottompad{height:12px;}
.ic-sidebar-footer{flex:0 0 auto;padding:10px 12px;border-top:1px solid var(--border);background:rgba(255,255,255,.55);}
.ic-empty{
  border:1px dashed rgba(56,64,116,.35);
  background:rgba(56,64,116,.06);
  color:var(--pl-blue);
  padding:10px 12px;border-radius:12px;font-weight:600;
}

.ic-entity{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;margin-bottom:10px;border-radius:14px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--border);
  cursor:pointer;user-select:none;
  transition:background .12s ease,border-color .12s ease;
}
.ic-entity:hover{background:rgba(56,64,116,.06);border-color:rgba(56,64,116,.30);}
.ic-entity .ic-name{
  flex:1;font-weight:650;font-size:.98rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ic-entity .ic-add{color:rgba(56,64,116,.75);padding:8px 10px;border-radius:12px;}
.ic-entity:hover .ic-add{background:rgba(56,64,116,.10);}

/* table */
table#ImmunoCompareTable{
  background:var(--panel);
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(56,64,116,.24);
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
}
table#ImmunoCompareTable th, table#ImmunoCompareTable td{
  border:1px solid var(--border-2)!important;
  vertical-align:middle;
}

/* sticky header */
table#ImmunoCompareTable thead th{
  position:sticky;top:0;z-index:8;
  background:linear-gradient(90deg,var(--pl-blue),var(--pl-blue-2));
  color:#fff;
  white-space:nowrap;
  text-align:center;
}

/* sticky first column */
table#ImmunoCompareTable tbody td:first-child{
  position:sticky;left:0;z-index:7;
  background:var(--panel-2);
  white-space:nowrap;width:1%;
  text-align:left;
  padding-right:84px;
}

.ic-entitycell{
  display:block;
  max-width: 340px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

table#ImmunoCompareTable tbody td:not(:first-child){text-align:center;}

/* header template tooltip stays hidden (portal used) */
.tooltptext{ display:none !important; }

/* clickable sort icon in header */
.ic-sortbtn{
  position:absolute;
  right:6px;top:50%;
  transform:translateY(-50%);
  width:26px;height:26px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  z-index:60;
}
.ic-sortbtn:hover{background:rgba(255,255,255,.20);}
.ic-thlabel{display:inline-block;}

.ic-rowbtnbar{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:inline-flex; gap:8px; align-items:center;
}
.ic-rowbtn{
  width:26px;height:26px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--pl-accent);
  background: rgba(56,64,116,.08);
  border: 1px solid rgba(56,64,116,.18);
}
.ic-rowbtn:hover{
  background: rgba(56,64,116,.12);
  border-color: rgba(56,64,116,.28);
}

/* ===== portal tooltip (NOT clipped) ===== */
.ic-floating-tooltip{
  position: fixed;
  z-index: 3000;
  width: 420px;
  max-width: calc(100vw - 24px);
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:0;
  box-shadow:0 18px 55px rgba(10,18,45,.22);
  overflow:hidden;

  pointer-events: none; /* Header bleibt klickbar */
}

.ic-floating-tooltip .ic-tooltip-body{
  padding:12px;
  max-height:360px;
  overflow:auto;
  text-align:left;
}

/* glossary classes */
.titletooltip{
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
  background:linear-gradient(90deg,var(--pl-blue),var(--pl-blue-2));
  padding:10px 12px;
  font-size:1.02rem;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
}

.popup_float_left{
  float:left;
  width:150px;
  margin:0 12px 10px 0;
}

.ic-floating-tooltip p{ margin:0 0 10px 0; line-height:1.35; font-size:.92rem; }
.ic-floating-tooltip h6{ margin:10px 0 6px 0; font-weight:800; color:var(--pl-blue); font-size:.88rem; }
.ic-floating-tooltip ul{ margin:0 0 10px 18px; padding:0; font-size:.90rem; }
.ic-floating-tooltip li{ margin-bottom:4px; }
.ic-floating-tooltip b, .ic-floating-tooltip strong{ font-weight:800; }

/* Close X button */
.ic-xbtn{
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  color: #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.ic-xbtn:hover{ background: rgba(255,255,255,.20); }

/* ===== Responsive: Stack layout on small screens ===== */
@media (max-width: 991.98px) {

  .ic-body{
    flex-direction: column;
  }

  .ic-main{
    flex: 1 1 auto;
    min-height: 50vh;
  }

  .ic-sidebar{
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .ic-tablewrap{
    padding: 8px;
  }
}

/* ===== Responsive Header (small screens) ===== */
@media (max-width: 991.98px){

  .ic-topbar{
    position: relative;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }

  .ic-titlewrap{
    flex: 1 1 100%;
  }

  .ic-title{
    font-size: 1.15rem;
  }

  /* Close button: always top-right */
  .ic-xbtn{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
  }

  /* Actions: grid layout */
  .ic-actions{
    flex: 1 1 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-right: 52px; /* Platz fürs X oben rechts */
  }

  .ic-actions .btn,
  .ic-actions .btn-group,
  .ic-actions .btn-group > .btn{
    width: 100%;
  }

  /* Dropdown menu nicer on mobile */
  .ic-actions .dropdown-menu{
    width: 100%;
  }
}

/* Extra small phones: 1 column buttons */
@media (max-width: 575.98px){
  .ic-actions{
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .ic-xbtn{
    top: 8px;
    right: 8px;
  }
}