/*
 * ==========================================================
 * ISA GUARDIAN — COMMAND CENTER V1
 * WEB-UI1B1
 *
 * Identité officielle :
 * Primary : #1A808C
 * Navy    : #0D4B59
 * Deep    : #083B46
 *
 * Le vert / orange / rouge restent réservés aux états métier.
 * ==========================================================
 */


/* ==========================================================
   1. TOKENS
   ========================================================== */

:root{
  --isa:#1A808C !important;
  --isa-d:#0D4B59 !important;
  --isa-deep:#083B46 !important;
  --isa-l:#EAF3F4 !important;

  --guardian-primary:#1A808C;
  --guardian-navy:#0D4B59;
  --guardian-deep:#083B46;
  --guardian-soft:#EAF3F4;

  --bg:#F4F8F9 !important;
  --bg2:#FFFFFF !important;
  --bg3:#F8FAFA !important;

  --card:#FFFFFF !important;
  --glass:#FFFFFF !important;

  --border:#D9E6E8 !important;
  --border2:#C9DCDF !important;

  --text:#173239 !important;
  --text2:#64787E !important;

  --green:#22A867 !important;
  --yellow:#D99A22 !important;
  --orange:#E87924 !important;
  --red:#DC3D4B !important;

  --guardian-shadow:
    0 12px 30px rgba(13,75,89,.07);

  --guardian-shadow-hover:
    0 18px 42px rgba(13,75,89,.12);

  --guardian-radius-sm:12px;
  --guardian-radius:16px;
  --guardian-radius-lg:22px;
}


/* ==========================================================
   2. DOCUMENT
   ========================================================== */

html{
  background:#F4F8F9 !important;
}

body{
  color:var(--text) !important;
  background:
    radial-gradient(
      circle at 96% 0%,
      rgba(26,128,140,.08),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #F8FBFB 0%,
      #F4F8F9 100%
    ) !important;
}

body:before{
  display:none !important;
}


/* ==========================================================
   3. AUTHENTIFICATION
   ========================================================== */

#auth-screen{
  background:
    radial-gradient(
      circle at 18% 15%,
      rgba(26,128,140,.18),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #F4F8F9,
      #EAF3F4 50%,
      #F8FBFB
    ) !important;
}

.auth-card{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-radius:28px !important;
  box-shadow:
    0 26px 70px rgba(13,75,89,.14) !important;
  color:var(--text) !important;
}

.auth-sub{
  color:var(--text2) !important;
}

.auth-sub strong,
.auth-footer strong{
  color:var(--guardian-primary) !important;
}

.auth-footer{
  color:var(--text2) !important;
}

.auth-footer a{
  color:var(--guardian-primary) !important;
}

#auth-screen .field label{
  color:var(--guardian-navy) !important;
}

#auth-screen .field input{
  background:#F8FAFA !important;
  color:var(--text) !important;
  border:1.5px solid var(--border) !important;
}

#auth-screen .field input:focus{
  border-color:var(--guardian-primary) !important;
  box-shadow:
    0 0 0 4px rgba(26,128,140,.10) !important;
}


/* ==========================================================
   4. HEADER COMMAND CENTER
   ========================================================== */

header{
  min-height:68px !important;
  height:auto !important;

  padding:
    10px 20px !important;

  gap:12px !important;

  background:
    linear-gradient(
      118deg,
      #083B46 0%,
      #0D4B59 58%,
      #126473 100%
    ) !important;

  border-bottom:
    1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 8px 24px rgba(8,59,70,.18) !important;

  backdrop-filter:none !important;
}

.h-logo{
  width:46px !important;
  height:46px !important;

  object-fit:contain !important;

  background:#FFFFFF !important;

  padding:5px !important;

  border:
    1px solid rgba(255,255,255,.70) !important;

  border-radius:14px !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,.16) !important;
}

.h-title{
  color:#FFFFFF !important;
  font-size:17px !important;
  font-weight:900 !important;
  letter-spacing:-.2px !important;
  min-width:150px;
}

.h-title small{
  color:#B8DADD !important;
  letter-spacing:.12em !important;
  font-size:9px !important;
}

.badge{
  background:#FFFFFF !important;
  color:var(--guardian-navy) !important;

  border:
    1px solid rgba(255,255,255,.50) !important;

  box-shadow:none !important;
}


/* ==========================================================
   5. NAVIGATION
   ========================================================== */

.nav-tabs{
  display:flex;
  align-items:center;
  gap:4px;
}

.nav-tab{
  color:#C7DADC !important;

  background:
    transparent !important;

  border:
    1px solid transparent !important;

  border-radius:
    11px !important;

  padding:
    9px 11px !important;

  font-size:
    11px !important;

  font-weight:
    750 !important;

  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease !important;
}

.nav-tab:hover{
  color:#FFFFFF !important;

  background:
    rgba(255,255,255,.08) !important;

  border-color:
    rgba(255,255,255,.10) !important;
}

.nav-tab.active{
  color:#FFFFFF !important;

  background:
    rgba(26,128,140,.58) !important;

  border-color:
    rgba(126,222,227,.26) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.global-search{
  background:
    rgba(255,255,255,.09) !important;

  color:#FFFFFF !important;

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

  border-radius:
    12px !important;
}

.global-search::placeholder{
  color:#AAC2C7 !important;
}

.global-search:focus{
  border-color:
    rgba(126,222,227,.72) !important;

  box-shadow:
    0 0 0 3px rgba(26,128,140,.18) !important;
}

.module-select{
  background:
    rgba(255,255,255,.09) !important;

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

  color:#FFFFFF !important;

  border-radius:
    12px !important;
}

.module-select option{
  background:#FFFFFF !important;
  color:#173239 !important;
}

.hbtn{
  border-radius:11px !important;
}


/* ==========================================================
   6. CONTENT BACKGROUND
   ========================================================== */

.dash-wrap,
.control-wrap,
.panel{
  background:
    linear-gradient(
      180deg,
      #F8FBFB 0%,
      #F4F8F9 100%
    ) !important;

  color:var(--text) !important;
}

.dash-wrap{
  padding:
    22px 26px 34px !important;
}

.control-wrap,
.panel{
  padding:
    20px 24px !important;
}


/* ==========================================================
   7. DASHBOARD HERO
   ========================================================== */

.dash-hero{
  position:relative;
  overflow:hidden;

  min-height:142px;

  padding:
    24px 26px !important;

  margin-bottom:
    18px !important;

  background:
    linear-gradient(
      115deg,
      rgba(13,75,89,.98),
      rgba(26,128,140,.93)
    ) !important;

  border:
    1px solid rgba(255,255,255,.08) !important;

  border-radius:
    24px !important;

  box-shadow:
    0 18px 44px rgba(13,75,89,.16) !important;
}

.dash-hero:after{
  content:"";

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

  width:126px;
  height:126px;

  transform:
    translateY(-50%);

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

  opacity:.10;

  pointer-events:none;
}

.dash-hero h1{
  color:#FFFFFF !important;

  font-size:
    25px !important;

  font-weight:
    900 !important;

  letter-spacing:
    -.5px !important;

  position:relative;
  z-index:1;
}

.dash-hero p{
  color:#D9E9EA !important;

  max-width:
    740px !important;

  font-size:
    13px !important;

  line-height:
    1.5 !important;

  position:relative;
  z-index:1;
}

.dash-live-pill{
  position:relative;
  z-index:1;

  background:
    rgba(255,255,255,.12) !important;

  color:#FFFFFF !important;

  border:
    1px solid rgba(255,255,255,.18) !important;

  border-radius:
    999px !important;

  padding:
    9px 13px !important;
}


/* ==========================================================
   8. KPI
   ========================================================== */

.dash-mini-stats,
.top-stats{
  gap:
    12px !important;
}

.top-stats{
  background:#FFFFFF !important;

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

  box-shadow:
    0 4px 14px rgba(13,75,89,.035) !important;
}

.stat-chip,
.dash-mini{
  position:relative;
  overflow:hidden;

  background:#FFFFFF !important;

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

  border-radius:
    17px !important;

  box-shadow:
    0 8px 22px rgba(13,75,89,.055) !important;

  color:
    var(--text) !important;
}

.dash-mini{
  padding:
    15px 16px !important;
}

.dash-mini:before{
  content:"";

  position:absolute;
  left:0;
  top:0;
  bottom:0;

  width:4px;

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

.dash-mini.ok:before{
  background:
    var(--green);
}

.dash-mini.warn:before{
  background:
    var(--orange);
}

.dash-mini.danger:before{
  background:
    var(--red);
}

.dash-mini .label{
  color:
    var(--text2) !important;
}

.dash-mini .num{
  color:
    var(--guardian-navy) !important;

  font-size:
    29px !important;
}

.dash-mini.ok .num{
  color:
    var(--green) !important;
}

.dash-mini.warn .num{
  color:
    var(--orange) !important;
}

.dash-mini.danger .num{
  color:
    var(--red) !important;
}

.stat-chip strong{
  color:
    var(--guardian-navy) !important;
}


/* ==========================================================
   9. CARDS
   ========================================================== */

.card,
.dash-card,
.report-card,
.system-tile,
.student360-list,
.student360-metric,
.exam-report-kpi,
.ai-kpi,
.history-kpi,
.incident-item{
  background:#FFFFFF !important;

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

  color:
    var(--text) !important;

  box-shadow:
    var(--guardian-shadow) !important;
}

.card,
.dash-card,
.report-card,
.system-tile{
  border-radius:
    19px !important;
}

.dash-card{
  padding:
    17px !important;
}

.card-title,
.dash-card-hd h3,
.panel-toolbar h2,
.control-toolbar h2,
.report-card h3,
.student360-section h3{
  color:
    var(--guardian-navy) !important;
}

.card-title,
.dash-card-hd h3{
  font-weight:
    900 !important;
}


/* ==========================================================
   10. LIVE SESSIONS
   ========================================================== */

.dash-live-grid{
  gap:
    12px !important;
}

.dash-live-card{
  background:#FFFFFF !important;

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

  border-radius:
    17px !important;

  box-shadow:
    0 6px 20px rgba(13,75,89,.055) !important;

  overflow:hidden;
}

.dash-live-card:hover{
  transform:
    translateY(-3px) !important;

  border-color:
    rgba(26,128,140,.55) !important;

  box-shadow:
    var(--guardian-shadow-hover) !important;
}

.dash-live-img{
  background:
    #0B1720 !important;
}

.control-feed,
.evidence-card,
.live-box{
  background:
    #09161E !important;
}


/* ==========================================================
   11. SIDEBAR SESSIONS
   ========================================================== */

.sidebar{
  background:#FFFFFF !important;

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

  box-shadow:
    7px 0 22px rgba(13,75,89,.035) !important;
}

.sidebar-hd{
  background:
    linear-gradient(
      90deg,
      #EAF3F4,
      #F7FAFA
    ) !important;

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

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

  padding:
    14px 16px !important;

  font-weight:
    900 !important;
}

.sidebar-list{
  background:
    #FFFFFF !important;
}

.sess-card{
  background:
    #FFFFFF !important;

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

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

.sess-card:hover{
  background:
    #F3F9F9 !important;
}

.sess-card.active{
  background:
    #EAF3F4 !important;

  border-left:
    4px solid var(--guardian-primary) !important;
}

.sc-av,
.dash-row .avatar{
  background:
    linear-gradient(
      135deg,
      var(--guardian-primary),
      var(--guardian-navy)
    ) !important;

  color:
    #FFFFFF !important;
}


/* ==========================================================
   12. DASHBOARD LISTS
   ========================================================== */

.dash-row,
.priority-row{
  background:
    #F8FAFA !important;

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

  color:
    var(--text) !important;

  border-radius:
    14px !important;
}

.dash-row:hover,
.priority-row:hover{
  background:
    #F1F7F7 !important;
}

.dash-row .title{
  color:
    var(--text) !important;
}

.dash-row .sub{
  color:
    var(--text2) !important;
}


/* ==========================================================
   13. CONTROL CENTER
   ========================================================== */

.control-card{
  background:
    #FFFFFF !important;

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

  border-radius:
    19px !important;

  box-shadow:
    var(--guardian-shadow) !important;
}

.control-card:hover{
  border-color:
    rgba(26,128,140,.48) !important;

  box-shadow:
    var(--guardian-shadow-hover) !important;
}

.control-info .name{
  color:
    var(--text) !important;
}

.control-info .exam{
  color:
    var(--text2) !important;
}


/* ==========================================================
   14. INCIDENTS
   ========================================================== */

.incident-item{
  border-radius:
    17px !important;

  box-shadow:
    0 6px 20px rgba(13,75,89,.05) !important;
}

.incident-item.critical{
  border-color:
    #F1C6CB !important;
}

.incident-item.suspect{
  border-color:
    #F1D4B6 !important;
}

.incident-icon{
  background:
    #FFF5DF !important;
}

.incident-item.critical .incident-icon{
  background:
    #FCEAED !important;
}


/* ==========================================================
   15. AI
   ========================================================== */

.ai-auto-box{
  background:
    linear-gradient(
      120deg,
      #EAF3F4,
      #FFFFFF
    ) !important;

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

  border-radius:
    18px !important;
}

.ai-auto-icon{
  background:
    linear-gradient(
      135deg,
      var(--guardian-primary),
      var(--guardian-navy)
    ) !important;

  color:#FFFFFF !important;

  box-shadow:
    0 8px 20px rgba(13,75,89,.16) !important;
}

.ai-auto-box strong{
  color:
    var(--guardian-navy) !important;
}

.ai-auto-box p,
.ai-note,
.rule-help{
  color:
    var(--text2) !important;
}

.ai-auto-status{
  background:
    #E9F6EF !important;

  color:
    #17814F !important;

  border:
    1px solid #CCE9D9 !important;
}


/* ==========================================================
   16. TABLES
   ========================================================== */

.table-card{
  overflow-x:auto;
}

table.et,
.dash-exam-table{
  color:
    var(--text) !important;

  background:
    #FFFFFF !important;
}

.et th,
.dash-exam-table th{
  background:
    #EAF3F4 !important;

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

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

  font-weight:
    850 !important;
}

.et td,
.dash-exam-table td{
  color:
    var(--text) !important;

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

.et tr:hover td,
.dash-exam-table tr:hover td{
  background:
    #F5FAFA !important;
}


/* ==========================================================
   17. FORMS
   ========================================================== */

.field label,
.form-section{
  color:
    var(--guardian-navy) !important;
}

.field input,
.field select,
.field textarea,
.control-toolbar input,
.control-toolbar select,
.split-toolbar input,
.split-toolbar select,
.history-filters input,
.history-filters select,
.student360-search input,
.incident-comment{
  background:
    #FFFFFF !important;

  color:
    var(--text) !important;

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

  border-radius:
    12px !important;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.control-toolbar input:focus,
.control-toolbar select:focus,
.split-toolbar input:focus,
.split-toolbar select:focus,
.history-filters input:focus,
.history-filters select:focus,
.student360-search input:focus,
.incident-comment:focus{
  border-color:
    var(--guardian-primary) !important;

  box-shadow:
    0 0 0 3px rgba(26,128,140,.10) !important;
}


/* ==========================================================
   18. BUTTONS
   ========================================================== */

.btn-teal,
.btn-p,
.btn.primary{
  background:
    linear-gradient(
      135deg,
      var(--guardian-primary),
      #167782
    ) !important;

  border-color:
    var(--guardian-primary) !important;

  color:
    #FFFFFF !important;

  box-shadow:
    0 7px 18px rgba(26,128,140,.17) !important;
}

.btn-teal:hover,
.btn-p:hover,
.btn.primary:hover{
  background:
    var(--guardian-navy) !important;

  color:
    #FFFFFF !important;
}

.btn-sm,
.btn,
.hbtn{
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease !important;
}

.btn-sm:active,
.btn:active,
.hbtn:active{
  transform:
    translateY(1px);
}


/* ==========================================================
   19. STATUS
   ========================================================== */

.sc-normal,
.sb-active,
.tag.ok,
.control-chip.ok{
  background:
    #EAF7F1 !important;

  color:
    #17814F !important;
}

.sc-watch,
.tag.warn,
.control-chip.warn{
  background:
    #FFF6DF !important;

  color:
    #9D6714 !important;
}

.sc-suspect{
  background:
    #FFF0E5 !important;

  color:
    #B6571C !important;
}

.sc-critical,
.tag.danger,
.control-chip.danger{
  background:
    #FCEAED !important;

  color:
    #B72E3C !important;
}


/* ==========================================================
   20. HISTORY / STUDENT 360
   ========================================================== */

.student360-list,
.history-layout > div{
  background:
    #FFFFFF !important;

  color:
    var(--text) !important;
}

.student360-metric,
.history-kpi{
  background:
    #F8FAFA !important;
}

.student360-item{
  border-bottom:
    1px solid var(--border) !important;
}

.student360-item:hover,
.student360-item.active,
.history-item:hover,
.history-item.active{
  background:
    #EAF3F4 !important;
}


/* ==========================================================
   21. MODALS
   ========================================================== */

.modal{
  background:
    #FFFFFF !important;

  color:
    var(--text) !important;

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

  border-radius:
    22px !important;

  box-shadow:
    0 30px 90px rgba(8,59,70,.22) !important;
}

.modal-hd{
  border-bottom:
    1px solid var(--border) !important;
}

.modal-hd h3{
  color:
    var(--guardian-navy) !important;
}


/* ==========================================================
   22. CHAT
   ========================================================== */

.proctor-chat-panel{
  background:
    #FFFFFF !important;

  color:
    var(--text) !important;

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

  box-shadow:
    0 26px 80px rgba(8,59,70,.22) !important;
}

.chat-head{
  background:
    linear-gradient(
      120deg,
      var(--guardian-deep),
      var(--guardian-navy)
    ) !important;

  color:#FFFFFF !important;
}

.chat-messages{
  background:
    #F4F8F9 !important;
}

.chat-msg{
  background:
    #FFFFFF !important;

  color:
    var(--text) !important;

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

.chat-msg.mine{
  background:
    var(--guardian-primary) !important;

  color:
    #FFFFFF !important;

  border-color:
    var(--guardian-primary) !important;
}

.proctor-chat-fab{
  background:
    linear-gradient(
      135deg,
      var(--guardian-primary),
      var(--guardian-navy)
    ) !important;

  color:
    #FFFFFF !important;

  box-shadow:
    0 15px 36px rgba(13,75,89,.24) !important;
}


/* ==========================================================
   23. TOASTS / ERRORS
   ========================================================== */

.toast{
  background:
    var(--guardian-navy) !important;

  color:
    #FFFFFF !important;

  box-shadow:
    0 12px 28px rgba(8,59,70,.22) !important;
}

.toast.ok{
  background:
    #17814F !important;

  color:
    #FFFFFF !important;
}

.toast.crit{
  background:
    #B72E3C !important;

  color:
    #FFFFFF !important;
}

.mini-error{
  background:
    #FFF1F2 !important;

  border-color:
    #F1C6CB !important;

  color:
    #A62B38 !important;
}


/* ==========================================================
   24. SCROLLBARS
   ========================================================== */

*{
  scrollbar-width:
    thin;

  scrollbar-color:
    #AFCBCD #EEF4F4;
}

::-webkit-scrollbar{
  width:8px;
  height:8px;
}

::-webkit-scrollbar-track{
  background:#EEF4F4;
}

::-webkit-scrollbar-thumb{
  background:#AFCBCD;
  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
  background:#85AFB4;
}


/* ==========================================================
   25. RESPONSIVE
   ========================================================== */

@media(max-width:1280px){

  header{
    padding:
      10px 14px !important;
  }

  .nav-tabs{
    background:
      transparent !important;
  }

  .dash-wrap{
    padding:
      18px !important;
  }
}


@media(max-width:920px){

  .top-stats{
    padding:
      10px !important;
  }

  .sidebar{
    border-right:
      none !important;

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

  .dash-hero{
    min-height:
      132px;

    padding:
      20px !important;
  }

  .dash-hero:after{
    width:
      96px;

    height:
      96px;
  }

  .control-wrap,
  .panel{
    padding:
      14px !important;
  }
}


@media(max-width:620px){

  header{
    gap:
      8px !important;
  }

  .h-logo{
    width:
      38px !important;

    height:
      38px !important;
  }

  .h-title{
    font-size:
      14px !important;

    min-width:
      120px;
  }

  .dash-wrap{
    padding:
      12px !important;
  }

  .dash-hero{
    padding:
      18px !important;

    border-radius:
      19px !important;
  }

  .dash-hero h1{
    font-size:
      20px !important;
  }

  .dash-hero:after{
    opacity:
      .07;
  }

  .card,
  .dash-card{
    border-radius:
      16px !important;
  }

  .dash-mini{
    padding:
      14px !important;
  }

  .dash-mini .num{
    font-size:
      25px !important;
  }
}


/* ==========================================================
   26. ACCESSIBILITE / MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

  *,
  *:before,
  *:after{
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }
}