:root{
  --rz-blue:#00a3e0;
  --rz-purple:#5a2d82;
  --bg1:#f4f9fd;
  --bg2:#eef4fb;
  --text:#102a43;
  --muted:#627d98;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --shadow2:0 10px 24px rgba(0,163,224,.14);
  --radius:18px;
  --gap:14px;
  --success:#1b9a68;
  --warning:#dd8b10;
  --danger:#d64545;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(0,163,224,.20), transparent 60%),
    radial-gradient(circle at top right, rgba(90,45,130,.18), transparent 55%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  min-height:100vh;
  -webkit-text-size-adjust:100%;
}
.wrap{
  max-width:1100px;
  margin:auto;
  padding:26px 18px 44px;
  padding-left:max(18px, env(safe-area-inset-left));
  padding-right:max(18px, env(safe-area-inset-right));
}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px;
  border-radius:var(--radius);
  background:white;
  box-shadow:var(--shadow);
  border-top:5px solid var(--rz-blue);
}
.brand{display:flex;align-items:center;gap:14px;min-width:220px;}
.brand img{height:52px;width:auto;display:block;}
.brand strong{display:block;color:var(--rz-purple);font-size:15px;line-height:1.15;}
.brand span{font-size:12px;color:var(--muted);line-height:1.2;display:block;margin-top:2px;}
.header-actions{display:flex;gap:12px;align-items:center;width:min(700px,100%);justify-content:flex-end;flex:1;}
.search{flex:1;min-width:180px;max-width:420px;}
.search input{
  padding:11px 14px;border-radius:999px;border:1px solid rgba(0,0,0,.15);outline:none;width:100%;font-size:13px;
}
.search input:focus{border-color:var(--rz-blue);box-shadow:0 0 0 4px rgba(0,163,224,.18);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:13px;
  border:1px solid rgba(0,0,0,.12);background:linear-gradient(135deg, rgba(0,163,224,.12), rgba(90,45,130,.10));color:#0f2a3a;transition:.18s;white-space:nowrap;flex:0 0 auto;cursor:pointer;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(0,163,224,.14);}
main{margin-top:18px;display:flex;flex-direction:column;gap:14px;}
.section-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.section-head{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.08);background:linear-gradient(90deg, rgba(0,163,224,.10), rgba(90,45,130,.08));}
.section-head h2{margin:0;color:var(--rz-purple);font-size:14px;}
.section-body{padding:14px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
@media(max-width:1000px){ .grid{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .grid{ grid-template-columns:1fr;} }
.tile{
  padding:12px;border-radius:14px;border:1px solid rgba(0,0,0,.08);color:inherit;transition:.18s;display:flex;flex-direction:column;gap:8px;min-height:110px;background:white;
}
.tile:hover{transform:translateY(-3px);border-color:rgba(0,163,224,.40);box-shadow:var(--shadow2);}
.tile h3{margin:0;font-size:13.5px;}
.tile p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.25;}
.summary-grid .tile{min-height:96px;justify-content:flex-start;}
.metric{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg, rgba(0,163,224,.10), rgba(90,45,130,.10));color:var(--rz-purple);font-weight:800;font-size:16px;}
.status-line{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid rgba(0,0,0,.08);}
.status-line::before,.provider-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;}
.status-operational{color:var(--success);background:rgba(27,154,104,.10);}
.status-degraded{color:var(--warning);background:rgba(221,139,16,.10);}
.status-outage{color:var(--danger);background:rgba(214,69,69,.10);}
.status-unknown{color:var(--muted);background:rgba(98,125,152,.10);}
.provider-tile{min-height:unset;gap:10px;}
.provider-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.provider-status{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid rgba(0,0,0,.08);white-space:nowrap;}
.provider-meta{font-size:11px;color:var(--muted);display:grid;gap:4px;}
.provider-service-list{display:grid;gap:8px;margin-top:2px;}
.provider-service{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:12px;background:linear-gradient(135deg, rgba(0,163,224,.05), rgba(90,45,130,.03));border:1px solid rgba(0,0,0,.05);font-size:11.5px;}
.provider-service strong{font-size:12px;}
.notice-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.notice{
  border-radius:14px;border:1px solid rgba(0,0,0,.08);background: linear-gradient(135deg, rgba(0,163,224,.05), rgba(90,45,130,.03));
  padding:10px 12px;display:flex;flex-direction:column;gap:6px;
}
.notice[data-severity="medium"], .notice[data-severity="warning"]{border-left:6px solid rgba(245, 158, 11, .85);}
.notice[data-severity="high"], .notice[data-severity="critical"]{border-left:6px solid rgba(239, 68, 68, .90);}
.notice[data-severity="info"]{border-left:6px solid rgba(0,163,224,.70);}
.notice-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.notice-title{font-weight:800;font-size:13px;color:#12354b;margin:0;}
.notice-pill{padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800;border:1px solid rgba(0,0,0,.10);background:white;color:#0f2a3a;white-space:nowrap;flex:0 0 auto;}
.notice-desc{margin:0;font-size:11.5px;color:var(--muted);line-height:1.3;}
.notice-meta{margin-top:2px;font-size:10.5px;color:rgba(98,125,152,.95);}
.system-message{margin-bottom:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:linear-gradient(135deg, rgba(0,163,224,.06), rgba(90,45,130,.04));font-size:12px;color:var(--text);}
.hidden{display:none;}
.empty-state{padding:8px 2px;color:var(--muted);font-size:12px;}
footer{text-align:center;margin-top:18px;font-size:12px;color:var(--muted);}
@media(max-width:720px){header{ flex-direction:column; align-items:stretch; gap:12px; }.btn{ width:100%; text-align:center; }.header-actions{ width:100%; justify-content:stretch; flex-direction:column; }.search{ max-width:none; }}


.toolbar-buttons {
  display: flex;
  gap: 12px;
}

.portal-header-button {
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--rz-purple);
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.1);
  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
}

.portal-header-button:hover {
  background: rgba(255,255,255,1);
}

.portal-header-button.primary {
  background: rgba(255,255,255,0.7);
  color: var(--rz-purple);
}


.header-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.16);
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.portal-header-button:hover {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-1px);
}

.portal-header-button:active {
  transform: translateY(0);
}

@media (max-width: 900px) {
  .header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .header-buttons {
    width: 100%;
    flex-direction: column;
  }

  .portal-header-button {
    width: 100%;
  }
}



/* Fix zichtbaarheid header buttons */
.header-actions{
  display:flex;
  gap:12px;
  align-items:center;
  width:auto;
  min-width:0;
  flex:1;
  justify-content:flex-end;
  flex-wrap:nowrap;
}

.search{
  flex:1 1 320px;
  min-width:180px;
  max-width:420px;
}

.header-buttons{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  white-space:nowrap;
}

.portal-header-button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  color:#2f3f56;
  background:#eef3f7;
  border:1px solid #bfcad6;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:background 0.2s ease,border-color 0.2s ease,transform 0.2s ease,color 0.2s ease;
  cursor:pointer;
}

.portal-header-button:hover{
  background:#e6edf3;
  border-color:#aebdcb;
  color:#243649;
  transform:translateY(-1px);
}

.portal-header-button:active{
  transform:translateY(0);
}

@media (max-width: 900px){
  header{
    align-items:stretch;
  }

  .header-actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }

  .search{
    max-width:none;
  }

  .header-buttons{
    width:100%;
    flex-direction:column;
  }

  .portal-header-button{
    width:100%;
  }
}




/* Portal knopstijl exacter afgestemd op screenshot */
.header-buttons{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  white-space:nowrap;
}

.portal-header-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid #b9c3ce;
  background:#eef3f7;
  color:#16324a;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(0,0,0,0.05);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  cursor:pointer;
  transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease,transform 0.15s ease;
  appearance:none;
  -webkit-appearance:none;
}

.portal-header-button:hover{
  background:#e8eef3;
  border-color:#adb9c5;
  color:#122c42;
}

.portal-header-button:active{
  background:#e1e8ee;
  transform:translateY(1px);
}

.portal-header-button.primary{
  background:#eef3f7;
  color:#16324a;
  border-color:#b9c3ce;
}

.portal-header-button.primary:hover{
  background:#e8eef3;
  border-color:#adb9c5;
  color:#122c42;
}



/* Exacte knopstijl gebaseerd op support.html */
.btn{
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  font-size:13px;

  border:1px solid rgba(0,0,0,.12);
  background:linear-gradient(135deg, rgba(0,163,224,.12), rgba(90,45,130,.10));
  color:#0f2a3a;

  transition:.18s;
  white-space:nowrap;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(0,163,224,.14);
}

.portal-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:auto;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.header-buttons{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  white-space:nowrap;
}

@media(max-width:720px){
  .header-buttons{
    width:100%;
    flex-direction:column;
  }

  .portal-nav-btn{
    width:100%;
    text-align:center;
  }
}