/*
 * ISA GUARDIAN — WEB-UI1B2
 * Cockpit de supervision.
 *
 * IMPORTANT :
 * Rouge = risque élevé / revue humaine.
 * Jamais culpabilité automatique.
 */


/* ==========================================================
   COCKPIT
   ========================================================== */

.guardian-supervision-cockpit{
  margin:0 0 18px;
  position:relative;
}

.guardian-cockpit-head{
  display:flex;
  align-items:center;
  gap:14px;

  margin-bottom:12px;
}

.guardian-cockpit-title{
  flex:1;
  min-width:0;
}

.guardian-cockpit-title h2{
  margin:0;

  color:var(--guardian-navy);
  font-size:17px;
  font-weight:900;
  letter-spacing:-.25px;
}

.guardian-cockpit-title p{
  margin:4px 0 0;

  color:var(--text2);
  font-size:11px;
  line-height:1.4;
}

.guardian-cockpit-status{
  display:inline-flex;
  align-items:center;
  gap:7px;

  padding:7px 11px;

  border-radius:999px;

  color:#17814F;
  background:#EAF7F1;
  border:1px solid #CCE9D9;

  font-size:10px;
  font-weight:900;

  white-space:nowrap;
}

.guardian-cockpit-status-dot{
  width:8px;
  height:8px;

  border-radius:50%;
  background:#22A867;

  box-shadow:
    0 0 0 4px rgba(34,168,103,.11);
}


/* ==========================================================
   KPI SUPERVISION
   ========================================================== */

.guardian-supervision-kpis{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}

.guardian-supervision-kpi{
  position:relative;
  overflow:hidden;

  min-height:118px;

  padding:17px;

  background:#FFFFFF;

  border:
    1px solid var(--border);

  border-radius:18px;

  box-shadow:
    0 8px 24px rgba(13,75,89,.055);
}

.guardian-supervision-kpi:before{
  content:"";

  position:absolute;
  inset:0 auto 0 0;

  width:4px;

  background:
    var(--guardian-primary);
}

.guardian-supervision-kpi.normal:before{
  background:#22A867;
}

.guardian-supervision-kpi.watch:before{
  background:#D99A22;
}

.guardian-supervision-kpi.review:before{
  background:#DC3D4B;
}

.guardian-kpi-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.guardian-kpi-icon{
  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:#EAF3F4;
  color:var(--guardian-navy);

  font-size:18px;
}

.guardian-supervision-kpi.normal
.guardian-kpi-icon{
  background:#EAF7F1;
  color:#17814F;
}

.guardian-supervision-kpi.watch
.guardian-kpi-icon{
  background:#FFF6DF;
  color:#9D6714;
}

.guardian-supervision-kpi.review
.guardian-kpi-icon{
  background:#FCEAED;
  color:#B72E3C;
}

.guardian-kpi-value{
  margin-top:12px;

  color:var(--guardian-navy);

  font-size:29px;
  font-weight:950;
  line-height:1;
}

.guardian-supervision-kpi.normal
.guardian-kpi-value{
  color:#17814F;
}

.guardian-supervision-kpi.watch
.guardian-kpi-value{
  color:#B27416;
}

.guardian-supervision-kpi.review
.guardian-kpi-value{
  color:#B72E3C;
}

.guardian-kpi-label{
  margin-top:6px;

  color:var(--text2);

  font-size:10px;
  font-weight:900;

  letter-spacing:.55px;
  text-transform:uppercase;
}


/* ==========================================================
   ZONE PRIORITAIRE
   ========================================================== */

.guardian-cockpit-bottom{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(310px,.42fr);

  gap:12px;

  margin-top:12px;
}

.guardian-review-note{
  display:flex;
  align-items:flex-start;
  gap:12px;

  padding:15px 16px;

  background:
    linear-gradient(
      120deg,
      #FFF7F8,
      #FFFFFF
    );

  border:
    1px solid #F1D5D9;

  border-radius:17px;
}

.guardian-review-icon{
  width:38px;
  height:38px;

  flex:0 0 38px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#FCEAED;
  color:#B72E3C;

  border-radius:12px;

  font-size:19px;
}

.guardian-review-note strong{
  display:block;

  color:#852A35;

  font-size:12px;
  font-weight:900;
}

.guardian-review-note p{
  margin:4px 0 0;

  color:#73565A;

  font-size:11px;
  line-height:1.45;
}


/* ==========================================================
   RACCOURCIS
   ========================================================== */

.guardian-cockpit-actions{
  display:flex;
  align-items:stretch;
  gap:8px;

  padding:8px;

  background:#FFFFFF;

  border:
    1px solid var(--border);

  border-radius:17px;

  box-shadow:
    0 6px 18px rgba(13,75,89,.045);
}

.guardian-cockpit-action{
  flex:1;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  min-height:44px;

  padding:8px 10px;

  border:
    1px solid var(--border);

  border-radius:12px;

  background:#F8FAFA;

  color:var(--guardian-navy);

  font-family:inherit;
  font-size:10px;
  font-weight:900;

  cursor:pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.guardian-cockpit-action:hover{
  background:#EAF3F4;

  border-color:
    rgba(26,128,140,.42);
}

.guardian-cockpit-action:active{
  transform:translateY(1px);
}


/* ==========================================================
   CARTES LIVE : HIERARCHIE RISQUE
   ========================================================== */

.dash-live-card,
.control-card{
  position:relative;
}

.dash-live-card.guardian-risk-watch,
.control-card.guardian-risk-watch{
  border-color:#EEDCA8 !important;
}

.dash-live-card.guardian-risk-suspect,
.control-card.guardian-risk-suspect{
  border-color:#F0C69F !important;
}

.dash-live-card.guardian-risk-critical,
.control-card.guardian-risk-critical{
  border-color:#EABAC0 !important;

  box-shadow:
    0 8px 28px rgba(183,46,60,.08) !important;
}

.guardian-review-chip{
  position:absolute;

  top:8px;
  right:8px;

  z-index:8;

  padding:4px 8px;

  border-radius:999px;

  background:#FCEAED;
  color:#A92C39;

  border:
    1px solid rgba(183,46,60,.18);

  font-size:8px;
  font-weight:950;
  letter-spacing:.35px;

  pointer-events:none;
}


/* ==========================================================
   RISQUES EXISTANTS
   ========================================================== */

.sc-critical,
.ai-risk.critical{
  position:relative;
}

.sc-critical{
  font-weight:900;
}

.ai-risk.critical{
  font-weight:900;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1100px){

  .guardian-supervision-kpis{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .guardian-cockpit-bottom{
    grid-template-columns:1fr;
  }
}


@media(max-width:620px){

  .guardian-cockpit-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .guardian-supervision-kpis{
    grid-template-columns:1fr;
  }

  .guardian-supervision-kpi{
    min-height:104px;
  }

  .guardian-cockpit-actions{
    flex-direction:column;
  }

  .guardian-cockpit-action{
    width:100%;
  }
}