/* Retter-Portal v1.3.85 – Traffic-Details, interaktive Zeitachse und Organisations-Onboarding */

/* Traffic: detailliertere Live-Besucher */
body.admin-surface .traffic-live-row--detail{
  display:block;
  padding:0;
  overflow:hidden;
}
body.admin-surface .traffic-live-row--detail>summary{
  list-style:none;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px;
  cursor:pointer;
  user-select:none;
}
body.admin-surface .traffic-live-row--detail>summary::-webkit-details-marker{display:none}
body.admin-surface .traffic-live-row--detail[open]>summary{
  border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--surface-2) 78%,transparent);
}
body.admin-surface .traffic-detail-caret{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.9rem;
  transition:transform .18s ease;
}
body.admin-surface .traffic-live-row--detail[open] .traffic-detail-caret{transform:rotate(180deg)}
body.admin-surface .traffic-person-detail-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:12px;
}
body.admin-surface .traffic-person-detail-grid article{
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--line-soft);
  border-radius:13px;
  background:color-mix(in srgb,var(--surface-2) 60%,transparent);
}
body.admin-surface .traffic-person-detail-grid span,
body.admin-surface .traffic-person-detail-grid strong,
body.admin-surface .traffic-person-detail-grid small{display:block;min-width:0}
body.admin-surface .traffic-person-detail-grid span{
  color:var(--muted-2);
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
body.admin-surface .traffic-person-detail-grid strong{
  margin-top:5px;
  color:var(--text);
  font-size:.82rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.admin-surface .traffic-person-detail-grid small{
  margin-top:3px;
  color:var(--muted);
  font-size:.69rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}
body.admin-surface .traffic-chart-wrap{position:relative}
body.admin-surface .traffic-chart-tooltip{
  position:absolute;
  z-index:8;
  min-width:190px;
  max-width:240px;
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--line-soft) 86%,transparent);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 18px 40px rgba(2,6,23,.28);
  backdrop-filter:blur(14px);
  pointer-events:none;
}
body.admin-surface .traffic-chart-tooltip[hidden]{display:none!important}
body.admin-surface .traffic-chart-tooltip strong{
  display:block;
  margin-bottom:7px;
  color:var(--text);
  font-size:.78rem;
}
body.admin-surface .traffic-chart-tooltip span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:3px 0;
  color:var(--muted);
  font-size:.7rem;
}
body.admin-surface .traffic-chart-tooltip b{font-weight:750}
body.admin-surface .traffic-chart-tooltip em{color:var(--text);font-style:normal;font-weight:900}
body.admin-surface[data-theme="light"] .traffic-chart-tooltip{
  background:rgba(255,255,255,.96);
  border-color:rgba(148,163,184,.28);
  box-shadow:0 18px 38px rgba(100,116,139,.18);
}
body.admin-surface[data-theme="light"] .traffic-live-row--detail[open]>summary,
body.admin-surface[data-theme="light"] .traffic-person-detail-grid article{background:#f8fafc}

/* Organisations-Onboarding */
body.admin-surface .onboarding-hero{align-items:flex-end}
body.admin-surface .onboarding-org-picker{min-width:min(390px,100%)}
body.admin-surface .onboarding-org-picker label{display:grid;gap:6px;color:var(--muted);font-size:.72rem;font-weight:850}
body.admin-surface .onboarding-summary-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}
body.admin-surface .onboarding-summary-strip article{
  min-height:105px;
  padding:15px 16px;
  border:1px solid var(--line-soft);
  border-radius:18px;
  background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
body.admin-surface .onboarding-summary-strip span,
body.admin-surface .onboarding-summary-strip strong,
body.admin-surface .onboarding-summary-strip small{display:block}
body.admin-surface .onboarding-summary-strip span{color:var(--muted-2);font-size:.64rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
body.admin-surface .onboarding-summary-strip strong{margin-top:8px;color:var(--text);font-size:1.35rem}
body.admin-surface .onboarding-summary-strip small{margin-top:6px;color:var(--muted);font-size:.72rem}
body.admin-surface .onboarding-wizard{padding:20px}
body.admin-surface .onboarding-steps{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  margin-bottom:22px;
  padding:7px;
  border:1px solid var(--line-soft);
  border-radius:18px;
  background:color-mix(in srgb,var(--surface-2) 65%,transparent);
}
body.admin-surface .onboarding-steps button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  min-height:44px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
body.admin-surface .onboarding-steps button span{
  display:grid;
  place-items:center;
  flex:0 0 24px;
  width:24px;height:24px;
  border-radius:999px;
  background:rgba(148,163,184,.12);
  font-size:.7rem;
  font-weight:950;
}
body.admin-surface .onboarding-steps button strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem}
body.admin-surface .onboarding-steps button.is-active{
  color:#fff;
  border-color:rgba(244,63,94,.34);
  background:linear-gradient(135deg,rgba(225,29,72,.88),rgba(190,24,93,.72));
  box-shadow:0 10px 24px rgba(225,29,72,.16);
}
body.admin-surface .onboarding-steps button.is-active span{background:rgba(255,255,255,.16)}
body.admin-surface .onboarding-step{display:none;min-height:360px}
body.admin-surface .onboarding-step.is-active{display:block}
body.admin-surface .onboarding-step-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
body.admin-surface .onboarding-step-head h2{margin:4px 0 4px}
body.admin-surface .onboarding-repeat-row{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(120px,.45fr) auto;
  gap:8px;
  margin-bottom:8px;
}
body.admin-surface .onboarding-existing-pill{align-self:center;justify-self:end}
body.admin-surface .onboarding-member-row{
  display:grid;
  grid-template-columns:120px minmax(140px,.8fr) minmax(150px,.9fr) minmax(170px,1fr) minmax(150px,.8fr) auto;
  gap:7px;
  margin-bottom:8px;
  padding:9px;
  border:1px solid var(--line-soft);
  border-radius:15px;
  background:color-mix(in srgb,var(--surface-2) 58%,transparent);
}
body.admin-surface .onboarding-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
body.admin-surface .onboarding-role-option{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:16px;
  background:color-mix(in srgb,var(--surface-2) 58%,transparent);
  cursor:pointer;
}
body.admin-surface .onboarding-role-option input{margin-top:3px}
body.admin-surface .onboarding-role-option span{display:grid;gap:4px}
body.admin-surface .onboarding-role-option strong{color:var(--text)}
body.admin-surface .onboarding-role-option small{color:var(--muted);line-height:1.45}
body.admin-surface .onboarding-finish-box{
  margin-top:16px;
  padding:16px;
  border:1px solid rgba(52,211,153,.25);
  border-radius:16px;
  background:rgba(16,185,129,.07);
}
body.admin-surface .onboarding-finish-box strong{color:#34d399}
body.admin-surface .onboarding-finish-box p{margin:5px 0 0;color:var(--muted)}
body.admin-surface .onboarding-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}
body.admin-surface .onboarding-actions>div{margin-right:auto;color:var(--muted);font-size:.73rem;font-weight:850}
body.admin-surface .onboarding-submit[hidden]{display:none!important}
body.admin-surface[data-theme="light"] .onboarding-summary-strip article,
body.admin-surface[data-theme="light"] .onboarding-wizard{background:#fff;border-color:rgba(148,163,184,.24)}
body.admin-surface[data-theme="light"] .onboarding-steps,
body.admin-surface[data-theme="light"] .onboarding-member-row,
body.admin-surface[data-theme="light"] .onboarding-role-option{background:#f8fafc;border-color:rgba(148,163,184,.22)}

@media (max-width:1180px){
  body.admin-surface .traffic-person-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.admin-surface .onboarding-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.admin-surface .onboarding-member-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.admin-surface .onboarding-member-row .btn{grid-column:2;justify-self:end}
}
@media (max-width:800px){
  body.admin-surface .onboarding-hero{align-items:stretch}
  body.admin-surface .onboarding-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.admin-surface .onboarding-role-grid{grid-template-columns:1fr}
  body.admin-surface .onboarding-repeat-row{grid-template-columns:1fr 1fr}body.admin-surface .onboarding-repeat-row .btn{grid-column:2;justify-self:end}
}
@media (max-width:620px){
  body.admin-surface .traffic-live-row--detail>summary{grid-template-columns:38px minmax(0,1fr);align-items:start}
  body.admin-surface .traffic-live-row--detail .traffic-live-time{grid-column:2;display:flex;align-items:center;gap:8px;text-align:left}
  body.admin-surface .traffic-person-detail-grid{grid-template-columns:1fr}
  body.admin-surface .traffic-chart-tooltip{min-width:172px;max-width:calc(100% - 16px)}
  body.admin-surface .onboarding-summary-strip{grid-template-columns:1fr 1fr}
  body.admin-surface .onboarding-steps{display:flex;overflow-x:auto;scrollbar-width:none}
  body.admin-surface .onboarding-steps::-webkit-scrollbar{display:none}
  body.admin-surface .onboarding-steps button{flex:0 0 auto;min-width:132px}
  body.admin-surface .onboarding-wizard{padding:15px}
  body.admin-surface .onboarding-step{min-height:0}
  body.admin-surface .onboarding-repeat-row,body.admin-surface .onboarding-member-row{grid-template-columns:1fr}
  body.admin-surface .onboarding-repeat-row .btn,body.admin-surface .onboarding-member-row .btn{grid-column:1;justify-self:stretch}
  body.admin-surface .onboarding-actions{display:grid;grid-template-columns:1fr 1fr}
  body.admin-surface .onboarding-actions>div{grid-column:1/-1;grid-row:1;text-align:center;margin:0}
  body.admin-surface .onboarding-actions .btn{width:100%}
}