/* Real CLARA backend health states */

/* Sidebar: collapse the old backend card into a tiny presence dot near the admin avatar. */
#backendStatus.statusbox{
  position:absolute!important;
  left:49px!important;
  bottom:14px!important;
  z-index:40!important;
  display:grid!important;
  place-items:center!important;
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  min-height:15px!important;
  padding:0!important;
  margin:0!important;
  gap:0!important;
  border:2px solid #04101e!important;
  border-radius:999px!important;
  background:#04101e!important;
  box-shadow:none!important;
  cursor:pointer!important;
  overflow:visible!important;
  transition:transform .18s ease!important;
}
#backendStatus.statusbox:hover{transform:scale(1.08)!important}
#backendStatus.statusbox>span:not(.dot){
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
#backendStatus.statusbox .dot,
#backendStatus.backend-status-indicator .dot{
  display:block!important;
  flex:0 0 auto!important;
  width:7px!important;
  height:7px!important;
  margin:0!important;
  border-radius:50%!important;
  background:#ffc76b!important;
  box-shadow:0 0 10px rgba(255,199,107,.7)!important;
  transition:background .2s ease,box-shadow .2s ease!important;
}
#backendStatus.statusbox.backend-checking .dot,
#backendStatus.backend-status-indicator.backend-checking .dot{
  background:#ffc76b!important;
  box-shadow:0 0 10px rgba(255,199,107,.78)!important;
}
#backendStatus.statusbox.backend-online .dot,
#backendStatus.backend-status-indicator.backend-online .dot{
  background:#3ce0b0!important;
  box-shadow:0 0 10px rgba(60,224,176,.82)!important;
}
#backendStatus.statusbox.backend-degraded .dot,
#backendStatus.backend-status-indicator.backend-degraded .dot{
  background:#ffd429!important;
  box-shadow:0 0 10px rgba(255,212,41,.78)!important;
}
#backendStatus.statusbox.backend-offline .dot,
#backendStatus.backend-status-indicator.backend-offline .dot{
  background:#f04466!important;
  box-shadow:0 0 10px rgba(240,68,102,.88)!important;
}

/* Future-safe markup if the indicator is nested directly on the avatar. */
.profile-avatar-wrap{
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
}
#backendStatus.backend-status-indicator{
  position:absolute;
  right:-2px;
  bottom:-2px;
  z-index:2;
  display:grid;
  place-items:center;
  width:15px;
  height:15px;
  min-width:15px;
  min-height:15px;
  padding:0;
  margin:0;
  border:2px solid #04101e!important;
  border-radius:999px;
  background:#04101e!important;
  box-shadow:none!important;
  outline:0;
  cursor:pointer;
  transition:transform .18s ease;
}
#backendStatus.backend-status-indicator:hover{transform:scale(1.08)}
.backend-status-copy-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Login keeps the fuller explanation because backend readiness matters before sign-in. */
.backend-login-status{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  padding:11px 12px;
  border:1px solid rgba(153,178,216,.14);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.backend-health-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#ffc76b;box-shadow:0 0 12px rgba(255,199,107,.6);transition:background .2s ease,box-shadow .2s ease}
.backend-health-copy{min-width:0;flex:1}
.backend-health-copy b,.backend-health-copy small{display:block}
.backend-health-copy b{font-size:10px;color:#f5f9ff}
.backend-health-copy small{margin-top:3px;color:#8f9db5;font-size:9px;line-height:1.35}
.backend-login-status button{min-height:28px;padding:0 9px;border:1px solid rgba(153,178,216,.16);border-radius:8px;background:rgba(255,255,255,.035);color:#b7c5d7;font-size:8px;font-weight:900}
.backend-login-status.online{border-color:rgba(60,224,176,.24);background:rgba(60,224,176,.065)}
.backend-login-status.online .backend-health-dot{background:#3ce0b0;box-shadow:0 0 12px rgba(60,224,176,.78)}
.backend-login-status.degraded{border-color:rgba(255,212,41,.26);background:rgba(255,212,41,.055)}
.backend-login-status.degraded .backend-health-dot{background:#ffd429;box-shadow:0 0 12px rgba(255,212,41,.75)}
.backend-login-status.offline{border-color:rgba(240,68,102,.30);background:rgba(240,68,102,.065)}
.backend-login-status.offline .backend-health-dot{background:#f04466;box-shadow:0 0 12px rgba(240,68,102,.82)}
.backend-login-status.checking{border-color:rgba(255,199,107,.22);background:rgba(255,199,107,.045)}