/* =========================================================
   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);
}

/* Fullscreen overlay (prevents theme header/footer overlays) */
.pghm-portal-body .pghm-portal-root,
.pghm-portal-root.pghm-portal-fullscreen{
  position: fixed;
  inset: 0;
  z-index: 99999;
  padding: clamp(16px, 3vw, 44px);
  overflow: auto;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pghm-portal-root.pghm-portal-fullscreen .pghm-portal-shell{
  min-height: calc(100vh - 2 * clamp(16px, 3vw, 44px));
}

.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; }
}

/* ======================================================
   AUTH / LOGIN – Premium Layout
====================================================== */

/* Container fuer Login / Passwort */
.pghm-auth-wrap{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 36px);
}

/* Premium Karte */
.pghm-auth-card{
  width: min(680px, 94vw);
  border-radius: 26px;
  padding: clamp(24px, 3.2vw, 44px);
  background: rgba(12, 13, 15, 0.78);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  backdrop-filter: blur(16px);
}

.pghm-auth-title{
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--pghm-gold);
}

.pghm-auth-lead{
  margin: 0 0 22px;
  color: rgba(255,255,255,0.86);
  font-size: 16px;
  line-height: 1.5;
}

/* Felder */
.pghm-auth-form{
  display: grid;
  gap: 14px;
}

.pghm-auth-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pghm-auth-field label{
  display:block;
  margin: 0 0 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}

.pghm-auth-field input{
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 18px;
  outline: none;
}

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

.pghm-auth-actions{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 22px;
}

.pghm-auth-actions .pghm-btn{
  width: 100%;
  justify-content: center;
  padding: 16px 18px;
  min-height: 56px;
  font-size: 16px;
}

.pghm-auth-link{
  color: rgba(192,162,104,0.90);
  text-decoration: none;
  font-size: 14px;
}

.pghm-auth-link:hover{ text-decoration: underline; }

@media (max-width: 720px){
  .pghm-auth-row{ grid-template-columns: 1fr; }
}

/* ======================================================
   Portal.js Auth Klassen (Login / Reset) – Premium
====================================================== */

.pghm-login{
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 44px 16px;
}

.pghm-login-card{
  width: min(680px, 92vw);
  padding: 44px;
  border-radius: 26px;
  background: rgba(16,18,20,0.82);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 28px 90px rgba(0,0,0,0.58);
  backdrop-filter: blur(14px);
}

.pghm-brand{
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 10px;
}

.pghm-login-card h1{
  margin: 0 0 10px;
  font-size: clamp(34px, 3.2vw, 54px);
  line-height: 1.06;
}

.pghm-login-card p{
  margin: 0 0 22px;
  color: rgba(255,255,255,0.82);
  font-size: 16px;
  line-height: 1.5;
}

.pghm-login-card label{
  display: block;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  margin: 0 0 8px;
}

.pghm-login-card input[type="email"],
.pghm-login-card input[type="password"],
.pghm-login-card input[type="text"]{
  width: 100% !important;
  min-height: 56px !important;
  padding: 14px 16px !important;
  font-size: 18px !important;
  border-radius: 14px !important;
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #fff !important;
  outline: none !important;
}

.pghm-login-card input:focus{
  border-color: rgba(192,162,104,0.65) !important;
  box-shadow: 0 0 0 4px rgba(192,162,104,0.16) !important;
}

.pghm-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid rgba(192,162,104,0.55);
  background: linear-gradient(180deg, rgba(192,162,104,0.18), rgba(0,0,0,0.10));
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.pghm-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(192,162,104,0.85);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}

.pghm-btn:active{ transform: translateY(0); }

/* Etwas mehr Luft im Login-Flow */
.pghm-login-card .pghm-btn{
  margin-top: 18px;
  margin-bottom: 8px;
}

.pghm-login-links{
  margin-top: 14px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.pghm-link{
  color: rgba(192,162,104,0.95);
  text-decoration: none !important;
  font-size: 14px;
}

.pghm-link:hover{ text-decoration: underline !important; }

.pghm-muted{ color: rgba(255,255,255,0.70); }

@media (max-width: 600px){
  .pghm-login-card{ padding: 30px 22px; border-radius: 20px; }
  .pghm-login-card h1{ font-size: 34px; }
}

/* Login footer spacing */
.pghm-login-footer{
  margin-top: 16px;
}
.pghm-login-footer .pghm-auth-link{
  display: inline-block;
}