/* ===== Status OTHAL – App CSS (namespaced) ===== */
html, body { width:100%; max-width:100%; overflow-x:hidden; }

#othal-status-root { width: 100%; max-width: 100%; }
#othal-status-root .othal-root { width: 100%; max-width: 100%; }

/* ========= OTHAL APP THEME ========= */
#othal-status-app{
  --radius:16px;
  --shadow: 0 10px 34px rgba(0,0,0,.28);
  --ok:#2dd4bf;
  --warn:#fbbf24;
  --bad:#fb7185;

  --bg:#0b1220;
  --text:#eaf0ff;
  --muted:#9fb0d0;
  --line:rgba(255,255,255,.12);

  --card: linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.012));
  --card-status: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
  --card-urgent: linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.012));

  --input: rgba(255,255,255,.05);
  --input2: rgba(0,0,0,.10);
  --btn: rgba(255,255,255,.05);

  --btnPrimaryBorder: rgba(255,255,255,.18);
  --btnPrimaryBg: rgba(255,255,255,.08);

  color: var(--text);
  background: var(--bg);
  padding: 0;
  margin: 0;
}

#othal-status-app .othalStatusWrap{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 14px;
  background: var(--bg);
  border-radius: 0;      /* volle Breite ohne "Karte" */
  min-height: 100vh;
}

/* WP Themes haben oft max-width container – wir gehen bewusst auf volle Breite */
#othal-status-root { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; }
@media (max-width: 980px){
  #othal-status-root { margin-left: 0; margin-right: 0; width: 100%; }
}

#othal-status-app *{ box-sizing:border-box; }
#othal-status-app h1, #othal-status-app h2, #othal-status-app p, #othal-status-app label{ font-family:inherit; }

#othal-status-app .othalHeader{
  padding:10px 0 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

#othal-status-app .headLeft h1{
  margin:0 0 6px;
  font-size:24px;
  letter-spacing:.2px;
  color:#fff !important;
}

#othal-status-app .sub{ margin:0; color:var(--muted); font-size:13px; line-height:1.35; }

#othal-status-app .headRight{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

#othal-status-app .logo{ height:34px; width:auto; display:block; opacity:.98; }

#othal-status-app .othalMain{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
}

@media (max-width: 980px){
  #othal-status-app .othalHeader{ flex-direction:column; align-items:stretch; }
  #othal-status-app .headRight{ justify-content:flex-start; }
  #othal-status-app .othalMain{ grid-template-columns: 1fr; }
}

#othal-status-app .card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
}

#othal-status-app .card.statusCard{ background: var(--card-status); }
#othal-status-app .card.urgentCard{ background: var(--card-urgent); }
#othal-status-app .card.full{ grid-column: 1 / -1; }

#othal-status-app .card h2{
  font-size:16px;
  margin:0 0 10px;
  font-weight:800;
  color:#fff !important;
}

#othal-status-app .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
#othal-status-app label{ font-size:12px; color:var(--muted); display:block; margin:0 0 6px; }

#othal-status-app input[type="text"],
#othal-status-app input[type="date"],
#othal-status-app input[type="datetime-local"],
#othal-status-app textarea{
  width:100%;
  background: var(--input);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:12px;
  padding:10px 11px;
  outline:none;
  font-family: inherit;
}

#othal-status-app textarea{ min-height:120px; resize:vertical; }
#othal-status-app #output, #othal-status-app #urgentOutput{ overflow:hidden; resize:none; height:auto; min-height:220px; }

#othal-status-app .grid{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--input2);
  margin-bottom:10px;
}

@media (max-width: 640px){
  #othal-status-app .grid{ grid-template-columns: 1fr; }
}

#othal-status-app .name{ font-size:13px; line-height:1.25; }

#othal-status-app .btn{
  border:1px solid var(--line);
  background: var(--btn);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  cursor:pointer;
  transition:.15s ease;
  font-family: inherit;
  white-space:nowrap;
}

#othal-status-app .btn:hover{ transform: translateY(-1px); }

#othal-status-app .btn.primary{
  border-color: var(--btnPrimaryBorder);
  background: var(--btnPrimaryBg);
}

#othal-status-app .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  color:var(--muted);
  background: var(--btn);
}

#othal-status-app .dot{ width:8px;height:8px;border-radius:999px; background: var(--warn); display:inline-block; }
#othal-status-app .dot.ok{ background: var(--ok); }
#othal-status-app .dot.warn{ background: var(--warn); }
#othal-status-app .dot.bad{ background: var(--bad); }

#othal-status-app .footer-note{ margin-top:10px; color:var(--muted); font-size:11px; line-height:1.35; }
#othal-status-app .mini{ font-size:11px; color:var(--muted); }
#othal-status-app .rightCol{ display:flex; flex-direction:column; gap:14px; }

#othal-status-app .metaLine{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
#othal-status-app .metaBadge{
  border:1px solid var(--line);
  background: var(--btn);
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  color: var(--muted);
}

/* Read-only Status Chips */
#othal-status-app .statusBox{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color: var(--muted);
}
#othal-status-app .statusTag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding:8px 10px;
  border-radius:999px;
  white-space:nowrap;
}
#othal-status-app .statusTag b{ color: var(--text); font-weight:800; }

/* ========= PASSWORD GATE ========= */
#othal-status-gate{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  z-index: 9999;
}
#othal-status-gate .gateCard{
  width: min(520px, 100%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(17,24,39,.92);
  color: #eaf0ff;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 16px;
  font-family: inherit;
}
#othal-status-gate .gateTitle{ font-size: 18px; font-weight: 900; margin-bottom: 6px; color:#fff !important; }
#othal-status-gate .gateSub{ font-size: 13px; opacity:.85; margin-bottom: 12px; }
#othal-status-gate .gateRow{ display:flex; gap:10px; align-items:center; }
#othal-status-gate input{
  flex:1;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding:10px 11px;
  outline:none;
  font-family: inherit;
}
#othal-status-gate .gateMsg{ margin-top:10px; font-size: 12px; min-height: 18px; }
#othal-status-gate .gateHint{ margin-top:8px; font-size: 11px; opacity: .7; line-height: 1.35; }

/* ========= Collapsible Sections (5–9) ========= */
#othal-status-app details.card{ padding: 0; }
#othal-status-app details.card > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 14px;
  border-radius: var(--radius);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
#othal-status-app details.card > summary::-webkit-details-marker{ display:none; }

#othal-status-app .sumTitle{
  display:flex;
  flex-direction:column;
  gap:4px;
}
#othal-status-app .sumTitle b{
  font-size:16px;
  font-weight:900;
  color:#fff;
}
#othal-status-app .sumTitle span{
  font-size:11px;
  color: var(--muted);
}
#othal-status-app .chev{
  font-size:14px;
  color: var(--muted);
  transition: transform .15s ease;
}
#othal-status-app details[open] .chev{ transform: rotate(180deg); }
#othal-status-app .detailsContent{
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
}