:root{
  --bg:#050607;
  --text:#ffecec;
  --muted:#ff9b9b;

  --accent:#ff2b2b;
  --warn:#ffb347;
  --bad:#ff3b5c;
  --good:#7CFF6B;

  --shadow: 0 10px 30px rgba(0,0,0,.55);
  --radius: 18px;
  --mono: "Inter", sans-serif;
  --sans: "Inter", sans-serif;
}

*{ box-sizing:border-box; }
html{
  font-size:15px;
}
html,body{ height:100%; margin:0; }
body{
  background: radial-gradient(1200px 800px at 30% 20%, #1a0c0f 0%, var(--bg) 55%);
  color:var(--text);
  font-family:var(--sans);
  overflow:hidden;
}

.grid{
  position:fixed; inset:0;
  background:
    linear-gradient(to right, rgba(255,43,43,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,43,43,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 25% 20%, black 0%, transparent 65%);
  opacity:.75;
  pointer-events:none;
  animation: drift 14s linear infinite;
}
@keyframes drift{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-48px,-48px,0); }
}
.noise{
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.12;
  pointer-events:none;
}

body.alarm::after{
  content:"";
  position:fixed; inset:0;
  background: radial-gradient(circle at 50% 40%, rgba(255,43,43,.14), rgba(0,0,0,.75) 70%);
  pointer-events:none;
  animation: alarmPulse 1.2s infinite;
}
@keyframes alarmPulse{
  0%{ opacity:.45; }
  50%{ opacity:.95; }
  100%{ opacity:.45; }
}

.app{
  position:relative;
  height:100%;
  display:grid;
  grid-template-rows: 54px 1fr;
  gap:12px;
  padding:14px;
}

.panel{
  background:linear-gradient(180deg, rgba(11,11,15,.92), rgba(7,7,10,.86));
  border:1px solid rgba(255,43,43,.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  overflow:hidden;
  min-height:0;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(11,11,15,.92), rgba(8,8,12,.86));
  border:1px solid rgba(255,43,43,.20);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex; gap:12px; align-items:center;
  font-family: var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 68vw;
}

.logoImg,
.logoimg{
  width:26px;
  height:26px;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  display:block;
  border-radius:9px;
}

.status{
  display:flex; align-items:center; gap:12px;
  font-family: var(--mono);
  font-size:12px;
  color:var(--muted);
}
.pill{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,43,43,.08);
  border:1px solid rgba(255,43,43,.18);
  white-space:nowrap;
}
.dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--good);
  box-shadow: 0 0 12px rgba(124,255,107,.6);
}
.clock{ color:var(--text); opacity:.9; }

.main{
  display:grid;
  grid-template-columns: 280px 1fr 420px;
  gap:12px;
  height:100%;
  min-height:0;
}

/* Sidebar */
.side{ display:flex; flex-direction:column; min-height:0; }
.side header{
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,43,43,.14);
}
.user{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  letter-spacing:.08em;
}
.user strong{ color:var(--text); font-weight:600; }

.nav{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
}

.btn{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,43,43,.12);
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  cursor:pointer;
  transition:.15s ease;
  user-select:none;
}
.btn:hover{ border-color:rgba(255,43,43,.28); background:rgba(255,43,43,.08); }
.btn.active{
  border-color:rgba(255,43,43,.55);
  background:rgba(255,43,43,.12);
  box-shadow: 0 0 0 2px rgba(255,43,43,.10) inset;
  animation:pulseRed 2s infinite;
}
.btn.locked{
  opacity:.55;
  cursor:not-allowed;
  filter: grayscale(.15);
}
.btn.locked:hover{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,43,43,.12);
}
@keyframes pulseRed{
  0%{ box-shadow: 0 0 0 2px rgba(255,43,43,.10) inset, 0 0 6px rgba(255,43,43,.35); }
  50%{ box-shadow: 0 0 0 2px rgba(255,43,43,.12) inset, 0 0 16px rgba(255,43,43,.85); }
  100%{ box-shadow: 0 0 0 2px rgba(255,43,43,.10) inset, 0 0 6px rgba(255,43,43,.35); }
}

/* Workspace */
.work{ display:flex; flex-direction:column; min-height:0; }
.work header{
  padding:14px 16px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px solid rgba(255,43,43,.14);
}
.title{
  font-family:var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.title b{ color:var(--text); letter-spacing:.18em; }

.content{
  padding:14px;
  overflow:auto;
  min-height:0;
}

/* Right panel */
.logs{ display:flex; flex-direction:column; min-height:0; }
.rightSplit{
  height:100%;
  display:grid;
  grid-template-rows:
    minmax(520px, 1fr)
    minmax(200px, 0.42fr);
  min-height:0;
}

.chatPane,.rosterPane{
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.paneHeader{
  padding:10px 12px 10px;
  border-bottom:1px solid rgba(255,43,43,.14);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
  flex:0 0 auto;
  gap:10px;
}

/* Chat */
.chatStream{
  flex:1;
  padding:12px 12px 10px;
  overflow:auto;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.55;
  min-height:0;
  color:rgba(255,236,236,.92);
}

/* 4-column log: time | rank | user | message */
.chatLine{
  display:grid;
  grid-template-columns: 72px 7ch 10ch 1fr; /* time | [RANK] | username | msg */
  column-gap: 2px;
  align-items:baseline;
  margin:0 0 10px;
}

.ts{
  color:rgba(255,155,155,.92);
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

.chatRank{
  white-space:nowrap;
  letter-spacing:.08em;
}

.chatUser{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:0;
  max-width:10ch;
  display:block;
}

.chatMsg{
  min-width:0;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  color:rgba(255,236,236,.92);
}

.chatInputBar{
  display:flex;
  gap:10px;
  padding:10px 12px 14px;
  border-top:1px solid rgba(255,43,43,.12);
  background:rgba(0,0,0,.35);
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  z-index:2;
}
.chatInputBar input{
  flex:1;
  border:1px solid rgba(255,43,43,.18);
  background:rgba(0,0,0,.18);
  border-radius:14px;
  padding:10px 12px;
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  outline:none;
}
.chatInputBar input:focus{
  border-color:rgba(255,43,43,.35);
  box-shadow: 0 0 0 2px rgba(255,43,43,.10) inset;
}

/* Roster as compact grid (5–6 per row) */
.rosterList{
  flex:1;
  padding:10px 12px 12px;
  overflow:auto;
  font-family:var(--mono);
  min-height:0;

  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap:8px;
  align-content:start;
}

@media (max-width: 1180px){
  .main{ grid-template-columns: 280px 1fr 380px; }
  .rosterList{
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }
}

.rosterTile{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 8px;
  border-radius:12px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,43,43,.12);
}
.badgeDot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,43,43,.28);
  border:1px solid rgba(255,43,43,.35);
  box-shadow: 0 0 10px rgba(255,43,43,.22);
  flex:0 0 auto;
}
.badgeDot.on{
  background: var(--good);
  border-color: rgba(124,255,107,.65);
  box-shadow: 0 0 12px rgba(124,255,107,.55);
}
.rosterName{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:14px;
  line-height:1;
}

/* Telemetry stream */
.logstream{
  padding:12px 12px 14px;
  overflow:auto;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.45;
  color:rgba(255,236,236,.92);
  min-height:220px;
  max-height:260px;
  border-radius:14px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,43,43,.12);
}
.logline{ display:flex; gap:10px; margin:0 0 6px; }
.tag{ min-width:64px; text-transform:uppercase; letter-spacing:.08em; opacity:.90; }
.tag.ok{ color:var(--good); }
.tag.warn{ color:var(--warn); }
.tag.bad{ color:var(--bad); }
.msg{ color:rgba(255,236,236,.92); }

/* Cards */
.cards{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.card{
  padding:14px;
  border-radius: 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,43,43,.14);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.card h3{
  margin:0 0 8px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.mono{ font-family:var(--mono); }
.muted{ color:var(--muted); }
.meter{
  margin-top:10px;
  height:10px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,43,43,.16);
  border-radius:999px;
  overflow:hidden;
}
.bar{ height:100%; width:72%; background:linear-gradient(90deg, rgba(255,43,43,.22), rgba(255,43,43,.90)); }

/* Buttons / inputs */
.primary{
  padding:10px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,43,43,.34);
  background:rgba(255,43,43,.12);
  color:var(--text);
  cursor:pointer;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-family:var(--mono);
  font-size:12px;
  flex:0 0 auto;
}
.primary:hover{ background:rgba(255,43,43,.18); }
.danger{
  padding:10px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,59,92,.35);
  background:rgba(255,59,92,.10);
  color:var(--text);
  cursor:pointer;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-family:var(--mono);
  font-size:12px;
}
.danger:hover{ background:rgba(255,59,92,.16); }

.miniBtn{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,43,43,.22);
  background:rgba(0,0,0,.18);
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
}
.miniBtn:hover{ background:rgba(255,43,43,.10); border-color:rgba(255,43,43,.35); }

.input,
.select,
.textarea{
  width:100%;
  border:1px solid rgba(255,43,43,.18);
  background:rgba(0,0,0,.18);
  border-radius:14px;
  padding:10px 12px;
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  outline:none;
}
.textarea{ resize:vertical; min-height:220px; }
.input:focus,.select:focus,.textarea:focus{
  border-color:rgba(255,43,43,.35);
  box-shadow: 0 0 0 2px rgba(255,43,43,.10) inset;
}

/* Compact Calendar list (dashboard card) */
.calListCompact{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
  max-height:180px;
  overflow:auto;
  padding-right:4px;
}
.calRow{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,43,43,.12);
  background:rgba(0,0,0,.14);
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.calRowLeft{ min-width:0; }
.calWhen{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  opacity:.8;
}
.calTitle{
  margin-top:6px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.calLoc{
  margin-top:6px;
  font-family:var(--mono);
  font-size:11px;
  opacity:.8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Dossiers layout */
.dosSplit{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:12px;
}
@media (max-width: 980px){
  .dosSplit{ grid-template-columns: 1fr; }
}

/* Dossiers: filter pills */
.dosFilterBar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 0 0 12px;
}
.dosPill{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,43,43,.22);
  background: rgba(0,0,0,.18);
  color: var(--text);
  font-family: var(--mono);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  cursor:pointer;
  transition:.12s ease;
}
.dosPill:hover{
  background: rgba(255,43,43,.10);
  border-color: rgba(255,43,43,.35);
}
.dosPill.active{
  background: rgba(255,43,43,.22);
  border-color: rgba(255,43,43,.55);
  box-shadow: 0 0 0 2px rgba(255,43,43,.10) inset;
}
.dosList{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:560px;
  overflow:auto;
  padding-right:4px;
}
.dosItem{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,43,43,.12);
  background:rgba(0,0,0,.14);
  cursor:pointer;
  transition:.12s ease;
}
.dosItem:hover{ border-color:rgba(255,43,43,.28); background:rgba(255,43,43,.06); }
.dosItem.read{
  border-color: rgba(124,255,107,.38);
  box-shadow: 0 0 0 2px rgba(124,255,107,.08) inset;
}

.dosItem.locked{
  opacity:.55;
  filter: grayscale(.15);
  cursor:not-allowed;
}
.dosItem.updated:not(.read){
  border-color: rgba(255,199,107,.35);
  box-shadow: 0 0 0 2px rgba(255,199,107,.08) inset;
}
.dosUpdDot{
  width:8px;
  height:8px;
  border-radius:99px;
  background: rgba(255,199,107,.95);
  box-shadow: 0 0 0 2px rgba(255,199,107,.20);
  display:inline-block;
}
.dosTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.dosCode{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.9;
}
.dosTitle{
  margin-top:6px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dosMeta{
  margin-top:6px;
  font-family:var(--mono);
  font-size:11px;
  opacity:.8;
}
.dosDetail{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,43,43,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.dosDetail h2{
  margin:0 0 8px;
  font-family:var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:14px;
  color:var(--text);
}
.dosDetail .muted{ opacity:.85; }

/* Dossiers: pinned/attention panel (right column, desktop list mode) */
.dosPinnedList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.dosPinnedItem{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,43,43,.12);
  background:rgba(0,0,0,.10);
  cursor:pointer;
  transition:.12s ease;
}
.dosPinnedItem:hover{ border-color:rgba(255,43,43,.28); background:rgba(255,43,43,.06); }
.dosPinnedTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.dosPinnedCode{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.9;
}
.dosPinnedFlag{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,43,43,.22);
  background:rgba(0,0,0,.18);
  opacity:.9;
}
.dosPinnedFlag.unread{ border-color: rgba(255,43,43,.35); }
.dosPinnedFlag.upd{ border-color: rgba(255,199,107,.45); box-shadow: 0 0 0 2px rgba(255,199,107,.08) inset; }
.dosPinnedFlag.read{ border-color: rgba(124,255,107,.40); box-shadow: 0 0 0 2px rgba(124,255,107,.08) inset; }
.dosPinnedFlag.pin{ border-color: rgba(137,201,255,.45); box-shadow: 0 0 0 2px rgba(137,201,255,.08) inset; }

.dosPinnedSection{
  margin-top:10px;
  margin-bottom:2px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.8;
}

.dosPin{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(137,201,255,.35);
  background:rgba(0,0,0,.16);
  opacity:.9;
}
.dosPinnedTitle{
  margin-top:6px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dosPinnedMeta{
  margin-top:6px;
  font-family:var(--mono);
  font-size:11px;
  opacity:.8;
}
.dosBodyText{
  margin-top:12px;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:var(--mono);
  font-size:18px;
  line-height:1.65;
  color:rgba(255,236,236,.92);
  }

.dosAddHeader{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(255,43,43,.12);
}

.dosAdds{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.dosAdd{
  border-radius:14px;
  border:1px solid rgba(255,43,43,.12);
  background: rgba(0,0,0,.10);
  padding:10px;
}

.dosAddMeta{
  font-family: var(--mono);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  opacity:.8;
}

/* additions header row with actions */
.dosAddHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.dosAddActions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.dosAddActions .miniBtn,
.dosAddActions .danger{
  padding:8px 12px;
  font-size:11px;
}


.dosAddBody{
  margin-top:8px;
  white-space:pre-wrap;
  word-break:break-word;

  /* exakt gleiche Typografie wie .dosBodyText */
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  color:rgba(255,236,236,.92);
}

/* PERSONNEL FILES layout */
.perSplit{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:12px;
  min-height:540px;
}
@media (max-width: 1040px){
  .perSplit{ grid-template-columns: 1fr; }
}

.perList{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:720px;
  overflow:auto;
  padding-right:4px;
}

.perItem{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,43,43,.12);
  background:rgba(0,0,0,.14);
  cursor:pointer;
  transition:.12s ease;
}
.perItem:hover{ border-color:rgba(255,43,43,.28); background:rgba(255,43,43,.06); }
.perItem.active{
  border-color:rgba(255,43,43,.55);
  box-shadow: 0 0 0 2px rgba(255,43,43,.10) inset;
}
.perAvatarSm{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,43,43,.20);
  background:rgba(0,0,0,.22);
  flex:0 0 auto;
  object-fit:cover;
}
.perItemMain{ min-width:0; }
.perItemTop{
  display:flex;
  gap:10px;
  align-items:baseline;
  justify-content:space-between;
  min-width:0;        /* erlaubt Schrumpfen */
}
.perItemName{
  font-family:var(--mono);
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.perItemMeta{
  font-family:var(--mono);
  font-size:11px;
  opacity:.78;
  letter-spacing:.10em;
  text-transform:uppercase;
  white-space:nowrap;
}
.perBadge{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,43,43,.18);
  background:rgba(255,43,43,.08);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.95;
}
.perBadge.good{ border-color: rgba(124,255,107,.35); background: rgba(124,255,107,.08); }
.perBadge.warn{ border-color: rgba(255,179,71,.35); background: rgba(255,179,71,.08); }
.perBadge.bad{  border-color: rgba(255,59,92,.40);  background: rgba(255,59,92,.10); }

.perProfile{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,43,43,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

.perHeader{
  display:flex;
  gap:14px;
  align-items:flex-start;
  flex-wrap:wrap;
}

/* ✅ NEW: Avatar column wrapper (Avatar + Rank Patch stacked) */
.perAvatarCol{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  flex:0 0 auto;
}

/* existing avatar */
.perAvatar{
  width:120px;
  height:120px;
  border-radius:18px;
  border:1px solid rgba(255,43,43,.22);
  background:rgba(0,0,0,.22);
  object-fit:cover;
  flex:0 0 auto;
}

/* ✅ NEW: Rank patch under avatar (120px wide; ~34px tall @ 827x236 ratio) */
.perRankPatch{
  width:120px;
  height:34px;
  display:block;
  object-fit:contain;
  border:none;
  background:none;
  box-shadow:none;
}

.perHeaderMain{ flex:1; min-width:240px; }
.perNameLine{
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
}
.perName{
  font-family:var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:950;
  font-size:16px;
}
.perSub{
  font-family:var(--mono);
  opacity:.78;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:11px;
}
.perActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}

.perGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 760px){
  .perGrid{ grid-template-columns: 1fr; }
}
.perBox{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,43,43,.12);
  background:rgba(0,0,0,.12);
}
.perBox h4{
  margin:0 0 10px;
  font-family:var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
}
.perRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-top:1px solid rgba(255,43,43,.08);
  font-family:var(--mono);
  font-size:12px;
}
.perRow:first-of-type{ border-top:none; padding-top:0; }
.perKey{
  opacity:.78;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:11px;
}
.perVal{
  text-align:right;
  max-width: 65%;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
  line-height:1.35;
}
.perText{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.65;
  white-space:pre-wrap;
  word-break:break-word;
  color:rgba(255,236,236,.92);
}

.perListTable{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.perEntry{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,43,43,.12);
  background:rgba(0,0,0,.14);
  font-family:var(--mono);
  font-size:12px;
}
.perEntryLeft{ min-width:0; }
.perEntryTitle{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.perEntryMeta{
  margin-top:6px;
  opacity:.78;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:11px;
}

/* Modal */
.modalOverlay{
  position:fixed;
  inset:0;
  background: radial-gradient(900px 600px at 35% 25%, rgba(255,43,43,.10) 0%, rgba(5,6,7,.96) 60%),
              rgba(0,0,0,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display:grid;
  place-items:center;
  z-index:120;
}
.modalBox{
  width:min(760px, calc(100% - 28px));
  border-radius: 18px;
  border:1px solid rgba(255,43,43,.22);
  background:linear-gradient(180deg, rgba(11,11,15,.94), rgba(7,7,10,.88));
  box-shadow: 0 30px 80px rgba(0,0,0,.70);
  overflow:hidden;
}
.modalHeader{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,43,43,.14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.modalTitle{
  font-family:var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
}
.modalBody{
  padding:14px;
}

/* Modal feedback (game result) */
.modalBox.shakeBad{
  animation: modalShake .38s ease-out;
  border-color: rgba(255,59,92,.55);
  box-shadow: 0 30px 80px rgba(0,0,0,.70), 0 0 0 3px rgba(255,59,92,.22);
}
@keyframes modalShake{
  0%{ transform:translateX(0); }
  20%{ transform:translateX(-7px); }
  40%{ transform:translateX(7px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(5px); }
  100%{ transform:translateX(0); }
}
.modalBox.glowOk{
  border-color: rgba(124,255,107,.55);
  box-shadow: 0 30px 80px rgba(0,0,0,.70), 0 0 0 3px rgba(124,255,107,.16);
}

/* LOGIN overlay blur */
.lockscreen{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:
    radial-gradient(900px 600px at 35% 25%, rgba(255,43,43,.10) 0%, rgba(5,6,7,.96) 60%),
    rgba(0,0,0,.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index:50;
}
.login{
  width:min(620px, calc(100% - 28px));
  padding:18px;
  border-radius: 22px;
  background:linear-gradient(180deg, rgba(11,11,15,.94), rgba(7,7,10,.88));
  border:1px solid rgba(255,43,43,.20);
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
  position:relative;
}
.login .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.login h1{
  margin:14px 0 0;
  font-family:var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:14px;
  color:var(--muted);
}
.login h1 b{ color:var(--text); }

.fields{ display:grid; gap:10px; margin-top:10px; }
.field{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,43,43,.16);
  background:rgba(0,0,0,.20);
  font-family:var(--mono);
}
.field span{
  color:var(--muted);
  min-width:108px;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
}
.field input{
  width:100%;
  border:none; outline:none;
  background:transparent;
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
}

.login .actions{
  margin-top:12px;
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  flex-wrap:wrap;
}
.hint{ opacity:.75; }
.err{
  display:none;
  margin-top:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,59,92,.35);
  background:rgba(255,59,92,.10);
  font-family:var(--mono);
  color:rgba(255,236,236,.92);
}
.sep{ opacity:.6; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,43,43,.18); border-radius:999px; border:1px solid rgba(255,43,43,.14); }
::-webkit-scrollbar-track{ background:rgba(0,0,0,.20); }

.denyFlash{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0;
  background: radial-gradient(circle at 50% 40%, rgba(255,59,92,.20), rgba(0,0,0,.78) 70%);
  z-index:90;
}
.denyFlash.on{
  animation: denyPulse .42s ease-out;
}
@keyframes denyPulse{
  0%{ opacity:0; }
  25%{ opacity:.95; }
  100%{ opacity:0; }
}
.login.deny{
  animation: denyOutline .45s ease-out;
}
@keyframes denyOutline{
  0%{ box-shadow: 0 30px 80px rgba(0,0,0,.65); border-color: rgba(255,43,43,.20); }
  25%{ box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 0 3px rgba(255,59,92,.30); border-color: rgba(255,59,92,.55); }
  100%{ box-shadow: 0 30px 80px rgba(0,0,0,.65); border-color: rgba(255,43,43,.20); }
}

/* Success flash */
.okFlash{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0;
  background: radial-gradient(circle at 50% 40%, rgba(124,255,107,.18), rgba(0,0,0,.78) 70%);
  z-index:90;
}
.okFlash.on{
  animation: okPulse .42s ease-out;
}
@keyframes okPulse{
  0%{ opacity:0; }
  25%{ opacity:.95; }
  100%{ opacity:0; }
}

/* BOOT SCREEN */
.bootscreen{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.92);
  overflow:hidden;
}
.bootscreen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,43,43,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,43,43,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity:.35;
  animation: bootDrift 2.8s linear infinite;
}
@keyframes bootDrift{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-48px,-48px,0); }
}
.bootInner{
  position:relative;
  width:min(760px, calc(100% - 28px));
  padding:18px 18px 16px;
  border-radius: 18px;
  border:1px solid rgba(255,43,43,.22);
  background:linear-gradient(180deg, rgba(11,11,15,.94), rgba(7,7,10,.88));
  box-shadow: 0 30px 80px rgba(0,0,0,.70);
  font-family: var(--mono);
  overflow:hidden;
}
.bootInner::after{
  content:"";
  position:absolute;
  inset:-40px 0 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), transparent 55%);
  opacity:.12;
  pointer-events:none;
  animation: bootFlicker 1.2s infinite;
}
@keyframes bootFlicker{
  0%{ opacity:.08; transform:translateY(0); }
  50%{ opacity:.16; transform:translateY(6px); }
  100%{ opacity:.10; transform:translateY(0); }
}
.bootTitle{
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-size:12px;
  margin-bottom:10px;
}
.bootLog{
  font-size:12px;
  line-height:1.6;
  color:rgba(255,236,236,.92);
  min-height:180px;
  white-space:pre-wrap;
}
.bootHint{
  margin-top:10px;
  opacity:.6;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* =======================
   CONTAINMENT TILE + GAME
   ======================= */
.containHdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.containState{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  opacity:.85;
}
.containDot{
  width:10px;height:10px;border-radius:50%;
  border:1px solid rgba(255,43,43,.22);
  background:rgba(255,43,43,.18);
  box-shadow: 0 0 12px rgba(255,43,43,.22);
}
.containDot.good{
  background: var(--good);
  border-color: rgba(124,255,107,.65);
  box-shadow: 0 0 14px rgba(124,255,107,.55);
}
.containDot.warn{
  background: var(--warn);
  border-color: rgba(255,179,71,.65);
  box-shadow: 0 0 14px rgba(255,179,71,.45);
}
.containDot.bad{
  background: var(--bad);
  border-color: rgba(255,59,92,.65);
  box-shadow: 0 0 16px rgba(255,59,92,.55);
}
.containBig{
  font-family:var(--mono);
  font-size:22px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:950;
}
.containLine{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.containBanner{
  margin-top:12px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,43,43,.14);
  background:rgba(0,0,0,.14);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.5;
}
.containBanner.bad{
  border-color: rgba(255,59,92,.35);
  background: rgba(255,59,92,.08);
}
.containBanner.warn{
  border-color: rgba(255,179,71,.32);
  background: rgba(255,179,71,.07);
}
.containBanner.good{
  border-color: rgba(124,255,107,.30);
  background: rgba(124,255,107,.06);
}

/* Game area */
.gameShell{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.gameTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.gameStats{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
}
.gameArena{
  position:relative;
  height:360px;
  border-radius:16px;
  border:1px solid rgba(255,43,43,.16);
  background:
    radial-gradient(650px 320px at 30% 25%, rgba(255,43,43,.09), rgba(0,0,0,.25) 60%),
    rgba(0,0,0,.14);
  overflow:hidden;
  cursor:crosshair;
  user-select:none;
  touch-action:manipulation;
}
.gameArena:active{
  cursor:grabbing;
}

/* Target (pixel face) */
.worm{
  position:absolute;
  width:30px;
  height:30px;
  transform: translate(-50%, -50%);
  border-radius:8px;
  border:1px solid rgba(255,43,43,.22);
  background: url("../aftonsparv.png") center / contain no-repeat;
  image-rendering: pixelated;
  box-shadow: 0 0 14px rgba(0,0,0,.35);
}
.worm::after{ content:none; }

.gameHint{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.55;
  color:rgba(255,236,236,.92);
  opacity:.9;
}
.gameHint b{ color:var(--text); }

/* =========================
   MOBILE (iPhone/Android)
   ========================= */
@media (max-width: 820px){
  body{
    overflow:hidden;
    -webkit-text-size-adjust: 100%;
  }

  .app{
    height: 100dvh;
    padding: 10px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    gap:10px;
    grid-template-rows: auto 1fr;
  }

  .topbar{
    padding:10px 12px;
    flex-wrap:wrap;
    gap:10px;
  }
  .topbar .brand{ max-width: 70vw; }
  .status{ flex-wrap:wrap; gap:10px; }

  /* single column */
  .main{
    grid-template-columns: 1fr !important;
    height:100%;
    min-height:0;
  }
  .side{ display:none !important; }

  /* Right panel primary */
  .rightSplit{
    height:100%;
    min-height:0;
    display:grid;
    grid-template-rows: minmax(0, 1fr) minmax(120px, 0.28fr);
    gap:12px;
  }

  .chatPane,.rosterPane{
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  /* chat stream compact */
  .chatStream{
    flex:1;
    min-height:0;
    padding:10px 10px 8px;
    overflow:auto;
    font-size:11px;
    line-height:1.45;
  }

  /* TIME | RANK | USER | MESSAGE */
  .chatLine{
    grid-template-columns: 56px 7ch 10ch 1fr; /* time | [RANK] | username | msg */
    gap: 0 4px;   /* row-gap 0, column-gap 4px */
    margin:0 0 8px;
    align-items:baseline;
  }

  /* ✅ Mini-Abstand nur zwischen Timestamp und Rang */
  .chatRank{
    padding-left: 4px;
  }
  
    /* ✅ Personnel (nur Mobile): Abstand zwischen "Back to List" und Profilbild */
  body.mobile-personnel.mobile-per-detail .perBackBtn{
    margin-bottom: 12px;
  }

  .ts{ min-width:56px; }

  /* input always visible; iOS zoom fix */
  .chatInputBar{
    flex:0 0 auto;
    padding:10px 10px calc(14px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,43,43,.12);
    background:rgba(0,0,0,.35);
  }
  .chatInputBar input{
    font-size:16px;              /* prevents iOS zoom */
    padding:12px 12px;
    transform-origin:left center;
  }

  /* roster tiles slightly smaller */
  .rosterList{
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap:8px;
  }
  .rosterName{ font-size:13px; }

  /* stack cards / splits */
  .cards{ grid-template-columns: 1fr; }
  .dosSplit{ grid-template-columns: 1fr; }
  .perSplit{ grid-template-columns: 1fr; min-height:0; }

  /* modals and login fill nicely */
  .modalBox{
    width: calc(100% - 18px);
    max-height: calc(100dvh - 18px);
  }
  .modalBody{
    max-height: calc(100dvh - 120px);
    overflow:auto;
  }
  .login{
    width: calc(100% - 18px);
    padding:16px;
  }
  .field span{ min-width:92px; }

  .gameArena{ height:300px; }

  /* MOBILE APP MODES (views) */
  .work, .logs{ display:none; }           /* default hidden on mobile */

  /* Chat view shows right split */
  body.mobile-chat .logs{ display:flex; }

  /* Dash view shows work (middle content) */
  body.mobile-dash .work{ display:flex; }
  body.mobile-dash .logs{ display:none; }

  /* Dossiers view uses work too */
  body.mobile-dossiers .work{ display:flex; }
  body.mobile-dossiers .logs{ display:none; }

  /* Personnel view uses work too */
  body.mobile-personnel .work{ display:flex; }
  body.mobile-personnel .logs{ display:none; }
  
  /* Reports view uses work too */
  body.mobile-reports .work{ display:flex; }
  body.mobile-reports .logs{ display:none; }

  /* collapsible sections */
  section.collapsed .chatStream,
  section.collapsed .chatInputBar,
  section.collapsed .rosterList{
    display:none;
  }

  /* MOBILE MENU (tap logo) */
  .mobileMenu,
  .mobileMenuBackdrop{ display:none; }

  body.mobile-menu-open .mobileMenu,
  body.mobile-menu-open .mobileMenuBackdrop{
    display:block;
  }

  .mobileMenuBackdrop{
    position:fixed;
    inset:0;
    z-index:210;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .mobileMenu{
    position:fixed;
    top: 66px;
    left: 12px;
    z-index:220;

    width: min(240px, calc(100vw - 24px));
    padding: 10px;
    border-radius: 16px;
    background: rgba(0,0,0,.72);
    border: 1px solid rgba(255,43,43,.18);
    box-shadow: 0 20px 60px rgba(0,0,0,.65);
  }

  .mobileMenu .mmItem{
    width:100%;
    text-align:left;
    margin: 0 0 8px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,43,43,.22);
    background: rgba(255,43,43,.10);
    color: var(--text);
    font-family: var(--mono);
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 12px;
    cursor:pointer;
  }
  .mobileMenu .mmItem:last-child{ margin-bottom:0; }
  .mobileMenu .mmItem:hover{
    background: rgba(255,43,43,.16);
    border-color: rgba(255,43,43,.35);
  }

  .logoImg, .logoimg{ cursor:pointer; }
}

  /* ✅ Mobile Login: nicht abschneiden, sondern fit + ggf. innen scrollen */
  .lockscreen{
    padding: 10px; /* gibt dem Panel Luft zum Rand */
  }

  .login{
    width: min(560px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px - env(safe-area-inset-bottom));
    overflow: auto;           /* falls es zu hoch wird: innen scrollen */
  }

  /* Buttons dürfen umbrechen statt rechts rauszulaufen */
  .login .actions{
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Buttons auf schmalen Screens gleichmäßig */
  .login .actions .primary,
  .login .actions .danger{
    flex: 1 1 160px;          /* pro Button min ~160px, sonst umbrechen */
    text-align: center;
  }

/* =========================
   MOBILE: Personnel = List -> Detail (stacked)
   ========================= */
@media (max-width: 820px){

  /* default: list */
  body.mobile-personnel:not(.mobile-per-detail) .perProfile{ display:none; }
  body.mobile-personnel:not(.mobile-per-detail) .perList{ display:flex; }

  /* detail view */
  body.mobile-personnel.mobile-per-detail .perList{ display:none; }
  body.mobile-personnel.mobile-per-detail .perProfile{ display:block; }

  /* make the detail feel like a focused screen */
  body.mobile-personnel.mobile-per-detail .perProfile{
    margin-top: 2px;
  }

  /* back button */
  .perBackBtn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,43,43,.22);
    background: rgba(0,0,0,.18);
    color: var(--text);
    font-family: var(--mono);
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size:12px;
    cursor:pointer;
  }
  .perBackBtn:active{
    background: rgba(255,43,43,.12);
    border-color: rgba(255,43,43,.35);
  }

  /* optional: tighter header spacing in detail */
  body.mobile-personnel.mobile-per-detail .perHeader{
    gap:12px;
  }
}

/* =====================================================
   MOBILE: DOSSIERS = LIST -> DETAIL (STACKED VIEW)
   ===================================================== */
@media (max-width: 820px){

  /* Standard: nur Liste sichtbar */
  body.mobile-dossiers .dosSplit .dosDetail{
    display:none;
  }

  body.mobile-dossiers .dosSplit .dosList{
    display:flex;
  }

  /* Wenn JS "mobile-detail" setzt -> nur Detail sichtbar */
  body.mobile-dossiers .dosSplit.mobile-detail .dosList{
    display:none;
  }

  body.mobile-dossiers .dosSplit.mobile-detail .dosDetail{
    display:block;
  }

  /* Back Button */
  .mobileBackBtn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    margin-bottom:12px;

    border-radius:14px;
    border:1px solid rgba(255,43,43,.22);
    background: rgba(0,0,0,.18);

    color: var(--text);
    font-family: var(--mono);
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size:12px;

    cursor:pointer;
  }

  .mobileBackBtn:active{
    background: rgba(255,43,43,.12);
    border-color: rgba(255,43,43,.35);
  }
}

/* =========================
   iOS: Prevent input zoom everywhere
   ========================= */
@media (max-width: 820px){
  input,
  textarea,
  select,
  .input,
  .textarea,
  .select,
  .field input{
    font-size:16px !important;   /* iOS zoom killer */
  }

  /* IMPORTANT: don't scale inputs on iOS, it can trigger awkward zoom/viewport jumps */
  .chatInputBar input{
    transform: none !important;
  }
}

/* =========================
   DESKTOP TYPO TUNING
   ========================= */
@media (min-width: 821px){

  body{
    font-size: 13px;
  }

  /* Panels / Text allgemein */
  .chatStream,
  .logstream,
  .dosBodyText,
  .dosAddBody,
  .perText{
    font-size: 12px;
  }

  /* Sidebar Buttons */
  .btn{
    font-size: 11px;
    letter-spacing: .08em;
  }

  /* Topbar */
  .brand,
  .status{
    font-size: 11px;
  }

  /* Dossier Titel */
  .dosTitle{
    font-size: 11px;
  }

  /* Dashboard Headlines */
  .dosDetail h2{
    font-size: 13px;
  }

  .containBig{
    font-size: 20px;
  }

}
/* =========================
   DESKTOP: Smaller typography
   (hard overrides because many rules use px)
   ========================= */
@media (min-width: 821px){

  /* global base */
  body{ font-size: 12px; }

  /* Topbar / labels */
  .brand,
  .status,
  .title,
  .paneHeader,
  .card h3{
    font-size: 11px !important;
    letter-spacing: .08em !important;
  }

  /* Sidebar buttons */
  .btn{
    font-size: 10px !important;
    letter-spacing: .08em !important;
    padding: 11px 12px !important;
  }

  /* Inputs / buttons */
  .input, .select, .textarea,
  .chatInputBar input,
  .primary, .danger, .miniBtn{
    font-size: 11px !important;
  }

  /* Main text blocks */
.chatStream,
.logstream,
.gameHint,
.perText,
.msg{
  font-size: 11px !important;
  line-height: 1.55 !important;
}

/* ✅ Dossiers Freitext bewusst größer */
.dosBodyText,
.dosAddBody{
  font-size: 14px !important;
  line-height: 1.7 !important;
}

  /* Dossier titles/meta */
  .dosTitle{ font-size: 11px !important; }
  .dosMeta, .dosCode{ font-size: 10px !important; }

  /* Big numbers/headlines */
  .containBig{ font-size: 18px !important; }
  .dosDetail h2{ font-size: 12px !important; }
  .perName{ font-size: 14px !important; }
}


/* =====================================================
   DESKTOP: DOSSIERS = LIST -> DETAIL (FULL WIDTH)
   ===================================================== */
@media (min-width: 821px){
  /* When enabled, hide the list column and show the dossier full width */
  .dosSplit.detail-only{
    grid-template-columns: 1fr;
  }
  .dosSplit.detail-only > .card{
    display:none;
  }
  .dosSplit.detail-only #dosDetail{
    display:block;
  }

  /* Back button (same style as mobile) */
  .dosBackBtn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    margin-bottom:12px;

    border-radius:14px;
    border:1px solid rgba(255,43,43,.22);
    background: rgba(0,0,0,.18);

    color: var(--text);
    font-family: var(--mono);
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size:12px;

    cursor:pointer;
  }
  .dosBackBtn:active{
    background: rgba(255,43,43,.12);
    border-color: rgba(255,43,43,.35);
  }
}
/* --- MOBILE DOSSIER WIDTH FIX --- */
@media (max-width: 820px){

  .dosCard{
    min-width: 0;           /* verhindert flex-overflow */
    overflow: hidden;       /* nichts darf nach rechts raus */
  }

  .dosCard h4{
    word-break: break-word; /* lange Wörter umbrechen */
    overflow-wrap: anywhere;
  }

  .dosCard .dosTop{
    flex-wrap: wrap;        /* Code + Datum dürfen umbrechen */
  }

  .dosCard .dosDate{
    white-space: nowrap;    /* Datum bleibt sauber */
  }

}


/* =====================================================
   DESKTOP: PERSONNEL = LIST ONLY -> DETAIL (FULL WIDTH)
   - matches Dossiers behavior: no right column in list mode
   ===================================================== */
@media (min-width: 821px){

  /* list-only: hide right column completely */
  .perSplit.list-only{
    grid-template-columns: 1fr;
  }
  .perSplit.list-only #perProfile{
    display:none;
  }

  /* detail-only: hide list column and show profile full width */
  .perSplit.detail-only{
    grid-template-columns: 1fr;
  }
  .perSplit.detail-only > .card{
    display:none;
  }
  .perSplit.detail-only #perProfile{
    display:block;
  }

  /* Back button (same style family as dossiers) */
  .perBackBtn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    margin-bottom:12px;

    border-radius:14px;
    border:1px solid rgba(255,43,43,.22);
    background: rgba(0,0,0,.18);

    color: var(--text);
    font-family: var(--mono);
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size:12px;

    cursor:pointer;
  }
  .perBackBtn:active{
    background: rgba(255,43,43,.12);
    border-color: rgba(255,43,43,.35);
  }
}