/*
 * ISA GUARDIAN
 * WEB-UI1B3B
 *
 * Fiche premium de supervision.
 * Aucun changement du moteur de score.
 */


/* ==========================================================
   CONTENEUR
   ========================================================== */

#detail-panel.guardian-session-review{
  display:flex !important;
  flex-direction:column;
  gap:14px;
}


/* ==========================================================
   HERO SESSION
   ========================================================== */

.guardian-session-hero{
  position:relative;
  overflow:hidden;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;

  padding:21px 23px;

  background:
    linear-gradient(
      118deg,
      #083B46 0%,
      #0D4B59 58%,
      #1A808C 100%
    );

  border-radius:22px;

  box-shadow:
    0 16px 40px rgba(13,75,89,.17);

  color:#FFFFFF;
}

.guardian-session-hero:after{
  content:"";

  position:absolute;
  right:22px;
  top:50%;

  width:108px;
  height:108px;

  transform:translateY(-50%);

  background:
    url("../assets/branding/isa_guardian_mark.png")
    center / contain
    no-repeat;

  opacity:.08;

  pointer-events:none;
}

.guardian-session-hero-copy{
  position:relative;
  z-index:1;
}

.guardian-session-eyebrow{
  margin-bottom:5px;

  color:#A9D3D8;

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

  letter-spacing:1.05px;
  text-transform:uppercase;
}

.guardian-session-hero h2{
  margin:0;

  color:#FFFFFF;

  font-size:21px;
  font-weight:950;

  letter-spacing:-.35px;
}

.guardian-session-hero p{
  max-width:690px;

  margin:7px 0 0;

  color:#D5E7E9;

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

.guardian-session-live-state{
  position:relative;
  z-index:1;

  display:inline-flex;
  align-items:center;
  gap:7px;

  padding:8px 11px;

  background:
    rgba(255,255,255,.10);

  border:
    1px solid rgba(255,255,255,.17);

  border-radius:999px;

  color:#FFFFFF;

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

  white-space:nowrap;
}

.guardian-session-live-state:before{
  content:"";

  width:8px;
  height:8px;

  border-radius:50%;

  background:#45D18B;

  box-shadow:
    0 0 0 4px rgba(69,209,139,.13);
}


/* ==========================================================
   IDENTITE
   ========================================================== */

.guardian-session-identity-card{
  border-radius:20px !important;

  box-shadow:
    0 10px 28px rgba(13,75,89,.07) !important;
}

.guardian-session-identity-card
.score-pill{
  border:
    1px solid transparent !important;
}


/* ==========================================================
   SECTION TITLES
   ========================================================== */

.guardian-session-review
.card-title{
  display:flex;
  align-items:center;

  min-height:30px;

  color:
    var(--guardian-navy) !important;

  font-size:13px !important;
  font-weight:950 !important;

  letter-spacing:-.1px;
}


/* ==========================================================
   LIVE WEBCAM + ECRAN
   ========================================================== */

.guardian-session-live-card{
  border-radius:20px !important;

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

  box-shadow:
    0 12px 30px rgba(13,75,89,.075) !important;
}

.guardian-session-live-card
img{
  transition:
    transform .18s ease,
    filter .18s ease;
}

.guardian-session-live-card
img:hover{
  transform:scale(1.012);
}


/* ==========================================================
   PRECHECK
   ========================================================== */

.guardian-session-precheck{
  background:
    linear-gradient(
      120deg,
      #F8FBFB,
      #FFFFFF
    ) !important;
}

.guardian-session-precheck
.sr{
  min-height:40px;

  padding:8px 10px;

  background:#F7FAFA;

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

  border-radius:11px;
}


/* ==========================================================
   GALERIE
   ========================================================== */

.guardian-session-gallery{
  border-radius:20px !important;
}

.guardian-session-gallery
.gallery-tabs{
  padding:4px;

  background:#F4F8F9;

  border-radius:13px;
}

.guardian-session-gallery
.gtab{
  border-radius:10px !important;
}

.guardian-session-gallery
.gtab.active{
  background:
    var(--guardian-primary) !important;

  color:#FFFFFF !important;
}

.guardian-session-gallery
.snap-card{
  border-radius:14px !important;

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

  overflow:hidden;
}


/* ==========================================================
   TIMELINE
   ========================================================== */

.guardian-session-timeline{
  border-radius:20px !important;
}

.guardian-session-timeline
.tl{
  max-height:460px !important;

  padding-right:4px;
}

.guardian-session-timeline
.tl-item{
  position:relative;

  padding:10px 11px !important;

  background:#F8FAFA !important;

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

  border-radius:12px !important;
}


/* ==========================================================
   SYNTHESE VISUELLE
   ========================================================== */

.guardian-session-summary{
  display:grid;

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

  gap:10px;
}

.guardian-session-summary-card{
  padding:13px 14px;

  background:#FFFFFF;

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

  border-radius:15px;

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

.guardian-session-summary-card
.guardian-summary-key{
  color:var(--text2);

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

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

.guardian-session-summary-card
.guardian-summary-value{
  margin-top:5px;

  color:var(--guardian-navy);

  font-size:21px;
  font-weight:950;
}


/* ==========================================================
   REVUE HUMAINE
   ========================================================== */

.guardian-human-review{
  padding:18px;

  background:
    linear-gradient(
      125deg,
      #F6FAFA,
      #FFFFFF
    );

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

  border-radius:20px;

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

.guardian-human-review-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.guardian-human-review-mark{
  width:42px;
  height:42px;

  flex:0 0 42px;

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

  border-radius:13px;

  background:#EAF3F4;

  color:var(--guardian-navy);

  font-size:17px;
  font-weight:950;
}

.guardian-human-review-copy{
  flex:1;
}

.guardian-human-review h3{
  margin:0;

  color:var(--guardian-navy);

  font-size:14px;
  font-weight:950;
}

.guardian-human-review p{
  margin:5px 0 0;

  color:var(--text2);

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

.guardian-human-review-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;

  margin-top:13px;
}

.guardian-review-open{
  min-height:40px;

  padding:8px 13px;

  border:0;

  border-radius:11px;

  background:
    var(--guardian-primary);

  color:#FFFFFF;

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

  cursor:pointer;
}

.guardian-review-open:hover{
  background:
    var(--guardian-navy);
}


/* ==========================================================
   LOCAL REVIEW WARNING
   ========================================================== */

.guardian-local-review-warning{
  margin:10px 0 13px;

  padding:11px 13px;

  background:#FFF8E7;

  color:#725415;

  border:
    1px solid #F0DCA8;

  border-radius:12px;

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

.guardian-local-review-warning
strong{
  color:#76500D;
}


/* ==========================================================
   SEMANTIQUE RISQUE
   ========================================================== */

.guardian-risk-label-normal{
  color:#17814F !important;
}

.guardian-risk-label-watch{
  color:#A46C14 !important;
}

.guardian-risk-label-critical{
  color:#B72E3C !important;
}


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

@media(max-width:900px){

  .guardian-session-hero{
    grid-template-columns:1fr;
  }

  .guardian-session-live-state{
    justify-self:start;
  }
}


@media(max-width:680px){

  .guardian-session-hero{
    padding:18px;

    border-radius:18px;
  }

  .guardian-session-summary{
    grid-template-columns:1fr;
  }

  .guardian-human-review{
    padding:15px;
  }

  .guardian-human-review-actions{
    flex-direction:column;
  }

  .guardian-review-open{
    width:100%;
  }
}