/* =========================================================
   PGHM Health Risk Monitoring – Portal UI
   Ziel: sauber, konsistent mit Site-Typografie, volle Umlaute
   ========================================================= */

:root{
  /* Fallbacks (wenn Theme keine Variablen liefert) */
  --pghm-font-family: inherit;
  --pghm-font-size: 19px;
  --pghm-line-height: 1.6;

  --pghm-gold: #C0A268;
  --pghm-bg: rgba(0,0,0,0.55);
  --pghm-card: rgba(10,12,14,0.62);
  --pghm-card-border: rgba(192,162,104,0.35);
  --pghm-text: #F2F2F2;
  --pghm-muted: rgba(242,242,242,0.72);
  --pghm-shadow: 0 18px 48px rgba(0,0,0,0.45);

  --pghm-radius: 18px;
  --pghm-gap: 18px;
}

/* Root */
.pghm-portal-root{
  font-family: var(--pghm-font-family);
  font-size: var(--pghm-font-size);
  line-height: var(--pghm-line-height);
  color: var(--pghm-text);
}

.pghm-portal-root a{ color: var(--pghm-gold); text-decoration: none; }
.pghm-portal-root a:hover{ text-decoration: underline; }

/* Layout */
.pghm-portal-shell{
  display: grid;
  grid-template-columns: 260px minmax(0,1fr);
  gap: 0;
  min-height: 70vh;
}

.pghm-portal-sidebar{
  padding: 28px 18px;
  background: rgba(0,0,0,0.35);
  border-right: 1px solid rgba(255,255,255,0.08);
}

.pghm-portal-main{
  padding: 34px 34px 44px;
}

/* Sidebar */
.pghm-brand{
  font-size: 20px;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.pghm-brand strong{ font-weight: 700; }

.pghm-side-nav{ margin-top: 14px; display: grid; gap: 10px; }

.pghm-side-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 12px;
  color: rgba(242,242,242,0.92);
  font-size: 18px;
}

.pghm-side-link.is-active{
  background: rgba(192,162,104,0.14);
  outline: 1px solid rgba(192,162,104,0.28);
}

.pghm-side-meta{
  margin-top: 16px;
  color: var(--pghm-muted);
  font-size: 16px;
}

/* Headings */
.pghm-h1{
  margin: 0 0 14px;
  font-size: clamp(40px, 4.5vw, 72px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--pghm-gold);
}

.pghm-h2{
  margin: 0 0 12px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
}

.pghm-sub{
  margin: 0 0 18px;
  color: var(--pghm-muted);
  max-width: 68ch;
}

/* Cards */
.pghm-card{
  background: var(--pghm-card);
  border: 1px solid var(--pghm-card-border);
  border-radius: var(--pghm-radius);
  box-shadow: var(--pghm-shadow);
  padding: 26px;
}

/* Forms */
.pghm-form{ display: grid; gap: 16px; max-width: 980px; }

.pghm-row{
  display: grid;
  grid-template-columns: minmax(320px,1fr) minmax(320px,1fr) auto;
  gap: 18px;
  align-items: end;
}

.pghm-field{ display: grid; gap: 6px; }

.pghm-label{
  font-size: 17px;
  color: var(--pghm-muted);
}

.pghm-input{
  width: 100%;
  padding: 16px 18px !important;
  min-height: 56px;
  font-size: 18px !important;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: var(--pghm-text);
  outline: none;
  font-size: 18px !important;
}

.pghm-input:focus{
  border-color: rgba(192,162,104,0.55);
  box-shadow: 0 0 0 4px rgba(192,162,104,0.12);
}

.pghm-help{ font-size: 15px; color: var(--pghm-muted); }

/* Buttons: wir respektieren vorhandenes Theme-Button Styling.
   Falls keins vorhanden ist, geben wir einen sauberen Fallback. */
.pghm-btn{
  appearance: none;
  cursor: pointer;
  padding: 16px 24px !important;
  min-height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(192,162,104,0.55);
  background: rgba(0,0,0,0.30);
  color: var(--pghm-text);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 18px !important;
}

.pghm-btn:hover{
  background: rgba(192,162,104,0.16);
}

.pghm-btn:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

/* Alerts */
.pghm-alert{
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.28);
}

.pghm-alert.is-success{ border-color: rgba(80, 200, 120, 0.55); background: rgba(80,200,120,0.10); }
.pghm-alert.is-warn{ border-color: rgba(255, 170, 0, 0.55); background: rgba(255,170,0,0.10); }
.pghm-alert.is-error{ border-color: rgba(255, 70, 70, 0.55); background: rgba(255,70,70,0.10); }

/* Mobile */
@media (max-width: 980px){
  .pghm-portal-shell{ grid-template-columns: 1fr; }
  .pghm-portal-sidebar{ border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .pghm-portal-main{ padding: 22px 16px 34px; }
  .pghm-row{ grid-template-columns: 1fr; }
}