/* ============================================================
   Solidheberg — Status Page UI (public + admin) — 2026-02-02
   Scope: uniquement /status-page/
   ============================================================ */

:root{
  --sp-ok: #22c55e;
  --sp-warn: #f59e0b;
  --sp-bad: #ef4444;
  --sp-info: #60a5fa;
  --sp-ink: rgba(255,255,255,.92);
  --sp-muted: rgba(255,255,255,.72);
  --sp-faint: rgba(255,255,255,.56);

  --sp-card: var(--sh-card, rgba(255,255,255,.055));
  --sp-card2: var(--sh-card2, rgba(255,255,255,.075));
  --sp-border: var(--sh-border, rgba(255,255,255,.12));
  --sp-shadow: var(--sh-shadow-soft, 0 10px 30px rgba(0,0,0,.35));
  --sp-radius: 22px;
  --sp-radius-sm: 16px;
  --sp-glow: var(--sh-glow, 0 0 0 1px rgba(183,128,255,.24), 0 0 24px rgba(183,128,255,.18));
}

/* Layout */
.shsp-wrap{max-width:1100px;margin:30px auto;padding:0 12px;}
.shsp-wrap.sm{max-width:900px;}

.shsp-hero{
  position:relative;
  border-radius: var(--sp-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(183,128,255,.18);
  box-shadow: var(--sp-shadow);
  overflow:hidden;
}
.shsp-hero::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(600px 240px at 20% 0%, rgba(183,128,255,.35), transparent 55%),
    radial-gradient(520px 220px at 85% 10%, rgba(111,124,255,.28), transparent 60%),
    radial-gradient(460px 220px at 55% 100%, rgba(255,107,214,.16), transparent 65%);
  opacity:.65;
  pointer-events:none;
}
.shsp-hero > *{position:relative;}

.shsp-h1{
  font-weight: 950;
  letter-spacing: .2px;
  margin: 0;
  background: linear-gradient(90deg, rgba(183,128,255,1), rgba(255,107,214,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shsp-sub{color: var(--sp-muted); font-weight: 600;}

/* Cards */
.shsp-card{background: var(--sp-card); border:1px solid var(--sp-border); border-radius: var(--sp-radius-sm); box-shadow: var(--sp-shadow);}
.shsp-card:hover{border-color: rgba(183,128,255,.35);}

.shsp-section-title{
  margin: 22px 0 12px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  letter-spacing: .2px;
}

/* Pills / badges */
.shsp-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  color: rgba(255,255,255,.92);
  line-height: 1;
}
.shsp-dot{width:10px;height:10px;border-radius:999px; background: rgba(255,255,255,.35); box-shadow: 0 0 0 6px rgba(255,255,255,.04);}

.shsp-pill[data-state="up"],
.shsp-pill[data-state="ok"]{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10);} 
.shsp-pill[data-state="up"] .shsp-dot,
.shsp-pill[data-state="ok"] .shsp-dot{background: var(--sp-ok); box-shadow: 0 0 0 6px rgba(34,197,94,.08);} 

.shsp-pill[data-state="degraded"],
.shsp-pill[data-state="warn"]{border-color: rgba(245,158,11,.40); background: rgba(245,158,11,.10);} 
.shsp-pill[data-state="degraded"] .shsp-dot,
.shsp-pill[data-state="warn"] .shsp-dot{background: var(--sp-warn); box-shadow: 0 0 0 6px rgba(245,158,11,.08);} 

.shsp-pill[data-state="down"],
.shsp-pill[data-state="bad"]{border-color: rgba(239,68,68,.40); background: rgba(239,68,68,.10);} 
.shsp-pill[data-state="down"] .shsp-dot,
.shsp-pill[data-state="bad"] .shsp-dot{background: var(--sp-bad); box-shadow: 0 0 0 6px rgba(239,68,68,.08);} 

.shsp-pill[data-state="info"],
.shsp-pill[data-state="maint"]{border-color: rgba(96,165,250,.40); background: rgba(96,165,250,.10);} 
.shsp-pill[data-state="info"] .shsp-dot,
.shsp-pill[data-state="maint"] .shsp-dot{background: var(--sp-info); box-shadow: 0 0 0 6px rgba(96,165,250,.08);} 

.shsp-pill.small{padding:6px 10px; font-weight: 800; font-size: 12px; gap:8px;}

/* Service list */
.shsp-service{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  padding: 14px 14px;
  text-decoration:none;
  color: inherit;
}

/*
  Public list items are rendered as:
    <div class="shsp-card shsp-service sp-item position-relative">
      <a class="stretched-link" ...></a>
      <div class="shsp-service-row">...</div>

  If the parent stays display:flex, the empty stretched-link becomes a flex item and
  can push the content to the right ("centered" look / huge gap). So we force public
  service cards back to block layout.
*/
.sp-item.shsp-service{
  display:block;
  padding: 14px 14px;
}

.sp-item.shsp-service > a.stretched-link{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
}

.sp-item.shsp-service .shsp-service-row{
  position:relative;
  z-index:2;
}

.shsp-service .title{font-weight: 900; color: rgba(255,255,255,.94);}
.shsp-service .meta{color: var(--sp-muted); font-weight: 600; font-size: .92rem;}
.shsp-service .key{color: var(--sp-faint); font-weight: 800;}

.shsp-service:hover{background: rgba(255,255,255,.03); border-radius: var(--sp-radius-sm);} 

.shsp-metric{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  color: var(--sp-muted);
  font-weight: 650;
  font-size: .92rem;
}

.shsp-kbd{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-weight: 850;
  font-size: .82rem;
}

/* Incidents */
.shsp-incident-title{font-weight: 950; margin: 0;}
.shsp-incident-meta{color: var(--sp-muted); font-weight: 650;}
.shsp-pre{white-space: pre-wrap; color: rgba(255,255,255,.88);}

/* Forms (admin) */
.shsp-input,
.shsp-select,
.shsp-textarea{
  width:100%;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 14px !important;
  padding: .65rem .85rem !important;
  box-shadow: none !important;
}
.shsp-input:focus,
.shsp-select:focus,
.shsp-textarea:focus{
  border-color: rgba(183,128,255,.65) !important;
  box-shadow: var(--sp-glow) !important;
}

.shsp-help{color: var(--sp-faint); font-weight: 650; font-size: .92rem;}

/* Buttons (status admin) */
.btn-sh-outline{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 14px !important;
  font-weight: 800;
}
.btn-sh-outline:hover{border-color: rgba(183,128,255,.60) !important; box-shadow: var(--sp-glow);}

.btn-sh-danger{
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(239,68,68,.38) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 14px !important;
  font-weight: 850;
}
.btn-sh-danger:hover{background: rgba(239,68,68,.18) !important;}

/* Tables */
.shsp-table{width:100%; border-collapse:separate; border-spacing:0 10px;}
.shsp-table td, .shsp-table th{padding: 10px 12px; vertical-align: middle;}
.shsp-table thead th{color: rgba(255,255,255,.72); font-weight: 900; font-size:.9rem; letter-spacing:.2px;}
.shsp-tr{background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.10);}
.shsp-tr td:first-child{border-top-left-radius: 14px; border-bottom-left-radius: 14px;}
.shsp-tr td:last-child{border-top-right-radius: 14px; border-bottom-right-radius: 14px;}

/* Small utilities */
.shsp-divider{height:1px; background: rgba(255,255,255,.10); margin: 18px 0;}

/* Incident link pill */
.shsp-incident-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.25);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  position:relative;
  z-index:2; /* utile avec stretched-link */
}
.shsp-incident-link:hover{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.35);
  color: rgba(255,255,255,.95);
}
.shsp-incident-link i{opacity:.95}

@media (max-width: 575px){
  .shsp-service{align-items:flex-start;}
}
/* --- Compact service cards (single-line aligned) --- */
.shsp-service-row{
  display:grid;
  /* Name column used to be too wide (560px) which created a huge empty gap.
     Keep it aligned but tighter so metrics start closer to the title. */
  grid-template-columns: minmax(240px, 420px) 1fr auto;
  align-items:center;
  column-gap:18px;
  row-gap:10px;
  min-width:0;
}

.shsp-service-namecol{
  font-weight:850;
  font-size:1rem;
  color: rgba(255,255,255,.96);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 420px;
  min-width:0;
  text-align:left;
  justify-self:start;
}

.shsp-service-metricscol{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
  color: rgba(255,255,255,.72);
  font-size:.82rem;
  min-width:0;
  text-align:left;
  justify-self:start;
}

.shsp-service-metricscol span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.shsp-metric-warn{
  color: rgba(245,158,11,.95);
  font-weight:700;
}

.shsp-service-right{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
}

/* Compact incident pill (inline) */
.shsp-incident-mini{
  align-self:center;
  margin-top:0;
  padding:4px 10px;
  font-size:.78rem;
  border-radius:999px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.28);
  color: rgba(255,255,255,.94);
  text-decoration:none;
  max-width: 520px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  position:relative;
  z-index:2;
}

.shsp-incident-mini:hover{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.38);
  color: rgba(255,255,255,.98);
}

/* Mobile: allow stacking to avoid overflow */
@media (max-width: 900px){
  .shsp-service-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:flex-start;
  }
  .shsp-service-namecol{
    max-width:100%;
    flex: 1 1 100%;
  }
  .shsp-service-metricscol{
    flex: 1 1 100%;
    flex-wrap:wrap;
    white-space:normal;
  }
  .shsp-service-right{
    margin-left:0;
    justify-content:flex-start;
  }
}


/* Note / info card (ex: pas de checks sur 24h) */
.shsp-note{
  border: 1px solid rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .08);
}

/* Detail button (public service list) */
.shsp-detail-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:850;
  font-size:.78rem;
  position:relative;
  z-index:2; /* above stretched-link */
}
.shsp-detail-btn:hover{
  border-color: rgba(183,128,255,.60);
  box-shadow: var(--sp-glow);
  color: rgba(255,255,255,.96);
}
.shsp-detail-btn i{opacity:.95}

/* Admin services list (card rows) */
.shsp-admin-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.shsp-admin-service{
  padding: 14px 16px;
}

/* NEW: services list layout (list page only) */
.shsp-admin-svcgrid{
  display:grid;
  grid-template-columns: minmax(280px, 1fr) auto auto auto;
  align-items:center;
  gap:14px;
}

.shsp-admin-svc-left{min-width:0;}

.shsp-admin-svc-name{
  font-weight:950;
  color: rgba(255,255,255,.96);
  line-height:1.12;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.shsp-admin-svc-sub{
  margin-top:6px;
  color: rgba(255,255,255,.72);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.shsp-admin-svc-sub .shsp-k{
  max-width: 320px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.shsp-admin-svc-group{white-space:nowrap;}
.shsp-admin-svc-last{white-space:nowrap;}

.shsp-admin-svc-metrics{
  color: rgba(255,255,255,.78);
  font-weight:800;
  font-size:.88rem;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.shsp-admin-svc-badges{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* 2 colonnes : contenu | actions */
.shsp-admin-row{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:14px;
}

.shsp-admin-main{min-width:0; display:flex; flex-direction:column; gap:10px;}

/* Ligne 1 : titre + badges */
.shsp-admin-line1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.shsp-admin-title{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:10px;
}

.shsp-admin-name{
  font-weight:950;
  color: rgba(255,255,255,.96);
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 360px;
}

.shsp-admin-key{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 280px;
}

.shsp-admin-group{color: rgba(255,255,255,.72); font-weight:750; white-space:nowrap;}

.shsp-admin-badges{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;}

/* Ligne 2 : meta + métriques */
.shsp-admin-line2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.shsp-admin-meta2{
  color: rgba(255,255,255,.72);
  font-weight:650;
  font-size:.86rem;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.shsp-admin-metrics{
  color: rgba(255,255,255,.75);
  font-weight:750;
  font-size:.86rem;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.shsp-sep{opacity:.55; font-weight:800;}

.shsp-admin-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

.shsp-actionbtn{
  padding:.48rem .58rem !important;
  border-radius: 14px !important;
  line-height: 1 !important;
}
.shsp-actionbtn i{font-size:1rem;}

/* Responsive admin list */
@media (max-width: 992px){
  .shsp-admin-svcgrid{grid-template-columns: 1fr; align-items:start; gap:10px;}
  .shsp-admin-svc-metrics{white-space:normal; flex-wrap:wrap;}
  .shsp-admin-svc-badges{justify-content:flex-start;}
  .shsp-admin-actions{justify-self:start;}

  .shsp-admin-row{grid-template-columns: 1fr; gap:10px;}
  .shsp-admin-actions{justify-self:start;}
  .shsp-admin-line1{flex-direction:column; align-items:flex-start;}
  .shsp-admin-badges{justify-content:flex-start;}
  .shsp-admin-metrics{white-space:normal; flex-wrap:wrap;}
  .shsp-admin-name{max-width: 100%;}
  .shsp-admin-key{max-width: 100%;}
}