/* ═══════════════════════════════════════════════════════════
   ENS SEAS – Feuille de style principale
   Typographie : Inter (primary) · Icônes : Tabler Icons
   Couleurs : palette officielle seas.mg
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Palette SEAS officielle ── */
  --seas-navy:        #0C2461;
  --seas-blue-mid:    #1565C0;
  --seas-blue-hero:   #1A72C5;
  --seas-blue-bright: #2176AE;
  --seas-gold:        #D4A017;
  --seas-gold-light:  #F0B429;
  --seas-gold-pale:   #FEF3C7;
  --seas-red:         #9B1C1C;
  --seas-red-pale:    #FEE2E2;
  --seas-white:       #FFFFFF;
  --seas-off-white:   #EEF4FB;
  --seas-muted:       #5A6B84;
  --seas-border:      #D8E4F0;
  --seas-success:     #15803D;
  --seas-warning:     #92680A;
  --seas-danger:      #B91C1C;

  /* Compatibilité */
  --navy:   var(--seas-navy);
  --border: var(--seas-border);

  /* ── Typographie : Inter ── */
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;
  --font-weight-black:   800;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  background: var(--seas-off-white);
  color: #1E293B;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── Tabler Icons alignement ── */
.ti {
  font-size: 1em;
  line-height: 1;
  vertical-align: -0.125em;
}

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
.exam-navbar {
  background: linear-gradient(
    135deg,
    var(--seas-navy)      0%,
    var(--seas-blue-mid)  55%,
    var(--seas-blue-hero) 100%
  );
  padding: .75rem 0;
  border-bottom: 3px solid var(--seas-gold);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(12,36,97,.32);
}

.uni-logo-wrap { display: flex; align-items: center; gap: .75rem; }

.uni-emblem {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--seas-gold) 0%, var(--seas-gold-light) 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; color: var(--seas-navy);
  box-shadow: 0 2px 10px rgba(212,160,23,.4);
  flex-shrink: 0;
  font-family: var(--font);
}

.uni-name {
  font-family: var(--font);
  font-weight: 800; font-size: .78rem; color: #fff;
  letter-spacing: .03em; line-height: 1.1;
}
.uni-dept {
  font-family: var(--font);
  font-size: .64rem; color: rgba(255,255,255,.55); margin-top: .15rem;
}

.navbar-back-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font); font-size: .75rem; font-weight: 600;
  color: #fff; text-decoration: none;
  padding: .42rem 1rem; border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.18);
  transition: all .2s;
  white-space: nowrap;
}
.navbar-back-btn:hover {
  background: rgba(255,255,255,.28); color: #fff;
  border-color: rgba(255,255,255,.65);
  transform: translateY(-1px);
}

/* ── Bouton déconnexion ── */
.btn-logout {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(220,38,38,.3); border: 1.5px solid rgba(220,38,38,.55);
  color: #fca5a5; padding: .38rem .75rem; border-radius: 8px;
  font-size: .78rem; text-decoration: none; transition: all .2s;
  white-space: nowrap; font-family: var(--font); font-weight: 600;
}
.btn-logout:hover {
  background: rgba(220,38,38,.5); color: #fff; border-color: rgba(220,38,38,.8);
}

/* ══════════════════════════════════════
   HEADER DE SECTION
══════════════════════════════════════ */
.admin-header {
  background: linear-gradient(
    135deg,
    var(--seas-navy)      0%,
    var(--seas-blue-mid)  60%,
    var(--seas-blue-hero) 100%
  );
  padding: 1.6rem 0;
  border-bottom: 3px solid var(--seas-gold);
  position: relative; overflow: hidden;
}
.admin-header::after {
  content: 'ENS SEAS';
  position: absolute; right: 2rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font);
  font-weight: 900; font-size: 3.5rem;
  color: rgba(255,255,255,.06);
  pointer-events: none; letter-spacing: .04em; white-space: nowrap;
}
.admin-title {
  font-family: var(--font);
  font-weight: 800; font-size: 1.3rem; color: #fff;
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .5rem;
}
.admin-title .ti { font-size: 1.2rem; }

/* ══════════════════════════════════════
   BOUTONS SECONDAIRES & ACTIONS
══════════════════════════════════════ */

/* Bouton annuler / retour sur fond clair */
.btn-secondary {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #F1F5F9; color: #374151; border: 1.5px solid #CBD5E1;
  padding: .65rem 1.4rem; border-radius: 10px;
  font-family: var(--font); font-weight: 700; font-size: .85rem;
  text-decoration: none; transition: all .2s; cursor: pointer;
}
.btn-secondary:hover { background: #E2E8F0; color: #1E293B; border-color: #94A3B8; transform: translateY(-1px); }

/* Petits boutons d'action dans les tableaux */
.btn-action {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font); font-size: .72rem; font-weight: 700;
  padding: .3rem .65rem; border-radius: 7px; text-decoration: none;
  border: 1.5px solid; transition: all .15s; white-space: nowrap; cursor: pointer;
}
.btn-action-primary {
  background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE;
}
.btn-action-primary:hover { background: #DBEAFE; color: #1E3A8A; border-color: #93C5FD; }

.btn-action-secondary {
  background: #F8FAFC; color: #475569; border-color: #CBD5E1;
}
.btn-action-secondary:hover { background: #F1F5F9; color: #1E293B; border-color: #94A3B8; }

.btn-action-danger {
  background: #FEF2F2; color: #DC2626; border-color: #FECACA;
}
.btn-action-danger:hover { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }

.btn-action-success {
  background: #DCFCE7; color: #15803D; border-color: #86EFAC;
}
.btn-action-success:hover { background: #BBF7D0; color: #166534; border-color: #4ADE80; }

.btn-action-muted {
  background: #F1F5F9; color: #94A3B8; border-color: #E2E8F0;
}
.btn-action-muted:hover { background: #E2E8F0; color: #64748B; border-color: #CBD5E1; }

/* Lien texte stylisé (Voir tout, etc.) */
.btn-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font); font-size: .78rem; font-weight: 700;
  color: var(--seas-blue-mid); text-decoration: none;
  padding: .3rem .65rem; border-radius: 7px;
  border: 1.5px solid var(--seas-blue-mid);
  background: #EFF6FF; transition: all .15s;
}
.btn-link:hover { background: #DBEAFE; color: var(--seas-navy); }


/* ══════════════════════════════════════
   CARDS
══════════════════════════════════════ */
.sidebar-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--seas-border);
  box-shadow: 0 2px 12px rgba(12,36,97,.06);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.sidebar-card:hover { box-shadow: 0 8px 28px rgba(12,36,97,.11); }

.sidebar-card-header {
  background: linear-gradient(135deg, var(--seas-navy) 0%, var(--seas-blue-mid) 100%);
  color: #fff;
  font-family: var(--font);
  font-weight: 700; font-size: .85rem;
  padding: .9rem 1.3rem;
  border-bottom: 2px solid var(--seas-gold);
  display: flex; align-items: center; gap: .4rem;
}

/* ══════════════════════════════════════
   STAT CARDS
══════════════════════════════════════ */
.stat-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--seas-border);
  border-top: 4px solid var(--seas-blue-mid);
  padding: 1.2rem 1rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(12,36,97,.05);
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(12,36,97,.10); }
.stat-num {
  font-family: var(--font);
  font-weight: 800; font-size: 2.1rem; color: var(--seas-navy); line-height: 1;
}
.stat-label {
  font-family: var(--font);
  font-size: .65rem; font-weight: 700; color: var(--seas-muted);
  text-transform: uppercase; letter-spacing: .07em; margin-top: .35rem;
}

/* ══════════════════════════════════════
   EXAM CARDS (étudiant)
══════════════════════════════════════ */
.exam-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--seas-border);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 2px 10px rgba(12,36,97,.05);
}
.exam-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(12,36,97,.12); }

.exam-card-head {
  background: linear-gradient(135deg, var(--seas-navy) 0%, var(--seas-blue-mid) 100%);
  padding: 1.1rem 1.3rem;
  border-bottom: 3px solid var(--seas-gold);
}
.exam-card-title {
  font-family: var(--font);
  font-weight: 700; color: #fff; font-size: .92rem; line-height: 1.35;
}
.exam-card-sub {
  font-family: var(--font);
  font-size: .69rem; color: rgba(255,255,255,.6); margin-top: .25rem;
}
.exam-card-body { padding: 1.1rem 1.3rem; }

/* Badges */
.level-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font); font-size: .65rem; font-weight: 700;
  padding: .22rem .65rem; border-radius: 20px;
  background: var(--seas-gold-pale); color: var(--seas-warning);
  border: 1px solid var(--seas-gold-light);
  letter-spacing: .04em; white-space: nowrap;
}

.status-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font); font-size: .65rem; font-weight: 600;
  padding: .22rem .65rem; border-radius: 20px;
}
.status-badge.open   { background: #DCFCE7; color: #15803D; }
.status-badge.soon   { background: var(--seas-gold-pale); color: var(--seas-warning); }
.status-badge.closed { background: #F1F5F9; color: #94A3B8; }

/* ══════════════════════════════════════
   BOUTONS
══════════════════════════════════════ */
.btn-seas {
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%);
  color: #fff; border: none; cursor: pointer;
  padding: .65rem 1.4rem; border-radius: 10px;
  font-family: var(--font); font-weight: 700; font-size: .85rem;
  text-decoration: none; transition: box-shadow .2s, transform .15s;
  letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(21,101,192,.35);
}
.btn-seas:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 8px 22px rgba(21,101,192,.45); }
.btn-seas:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(21,101,192,.3); }
.btn-seas:disabled, .btn-seas[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-gold {
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, #E67E00 0%, #FBBF24 100%);
  color: #fff; border: none; cursor: pointer;
  padding: .65rem 1.4rem; border-radius: 10px;
  font-family: var(--font); font-weight: 700; font-size: .85rem;
  text-decoration: none; transition: box-shadow .2s, transform .15s;
  box-shadow: 0 4px 14px rgba(230,126,0,.35);
}
.btn-gold:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 8px 22px rgba(230,126,0,.45); }
.btn-gold:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(230,126,0,.3); }
.btn-gold:disabled, .btn-gold[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ══════════════════════════════════════
   TABLE ADMIN
══════════════════════════════════════ */
.admin-table {
  background: #fff; border-radius: 14px;
  border: 1px solid var(--seas-border); overflow: hidden;
  box-shadow: 0 2px 12px rgba(12,36,97,.05);
}
.admin-table table { width: 100%; border-collapse: collapse; }
.admin-table thead {
  background: linear-gradient(135deg, var(--seas-navy) 0%, var(--seas-blue-mid) 100%);
}
.admin-table thead th {
  font-family: var(--font);
  font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.85);
  text-transform: uppercase; letter-spacing: .07em;
  padding: .85rem 1rem; border-bottom: 2px solid var(--seas-gold);
}
.admin-table tbody tr {
  border-bottom: 1px solid var(--seas-border);
  transition: background .15s;
}
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--seas-off-white); }
.admin-table tbody td { padding: .8rem 1rem; font-size: .85rem; color: #334155; }

/* ══════════════════════════════════════
   FORMULAIRES
══════════════════════════════════════ */
.form-control, .form-select {
  border: 2px solid var(--seas-border);
  border-radius: 9px; padding: .6rem .9rem;
  font-family: var(--font); font-size: .9rem;
  transition: border .2s, box-shadow .2s; background: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--seas-blue-mid);
  box-shadow: 0 0 0 3px rgba(21,101,192,.14);
  outline: none;
}
.form-label {
  font-family: var(--font);
  font-size: .71rem; font-weight: 700; color: #374151;
  text-transform: uppercase; letter-spacing: .05em;
  display: block; margin-bottom: .4rem;
}

/* ══════════════════════════════════════
   IMPORT ZONE & FEEDBACK
══════════════════════════════════════ */
.upload-zone {
  border: 2.5px dashed var(--seas-border);
  border-radius: 14px; padding: 2.2rem 1.5rem;
  text-align: center; background: var(--seas-off-white);
  cursor: pointer; transition: all .25s; font-size: 2.5rem;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--seas-blue-mid); background: #E8F0FE;
}
.import-result {
  border-radius: 12px; padding: 1rem 1.3rem;
  font-family: var(--font); font-size: .84rem;
}
.import-result.success { background: #DCFCE7; border: 1.5px solid #86EFAC; color: #15803D; }
.import-result.warning { background: var(--seas-gold-pale); border: 1.5px solid var(--seas-gold-light); color: var(--seas-warning); }
.import-result.error   { background: var(--seas-red-pale); border: 1.5px solid #FCA5A5; color: var(--seas-danger); }

/* ══════════════════════════════════════
   BADGES RÉSULTATS
══════════════════════════════════════ */
.badge-ok {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--font); font-size: .7rem; font-weight: 600;
  padding: .2rem .65rem; border-radius: 20px;
  background: #DCFCE7; color: #15803D; border: 1px solid #86EFAC;
}
.badge-late {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--font); font-size: .7rem; font-weight: 600;
  padding: .2rem .65rem; border-radius: 20px;
  background: var(--seas-gold-pale); color: var(--seas-warning);
  border: 1px solid var(--seas-gold-light);
}

/* ══════════════════════════════════════
   COUNTDOWN
══════════════════════════════════════ */
.countdown-bar {
  background: linear-gradient(135deg, var(--seas-navy), var(--seas-blue-mid));
  color: #fff; padding: .45rem .85rem; border-radius: 9px;
  font-family: var(--font); font-size: .78rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .4rem;
}
.countdown-bar.urgent {
  background: linear-gradient(135deg, #7F1D1D, var(--seas-danger));
}


/* ══════════════════════════════════════
   MODALE DE CONFIRMATION SEAS
══════════════════════════════════════ */
#sm-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(12,36,97,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; transition: opacity .22s ease;
}
#sm-overlay.sm-visible { opacity: 1; }
#sm-overlay.sm-open { display: flex; }

#sm-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(12,36,97,.28), 0 4px 16px rgba(0,0,0,.12);
  width: 100%; max-width: 420px;
  transform: scale(.92) translateY(16px);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
  opacity: 0; overflow: hidden;
}
#sm-overlay.sm-visible #sm-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

#sm-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 16px;
  margin: 0 auto 1rem; font-size: 1.6rem;
}
#sm-icon-wrap.variant-danger  { background: #FEF2F2; color: #DC2626; }
#sm-icon-wrap.variant-warning { background: #FFFBEB; color: #D97706; }
#sm-icon-wrap.variant-primary { background: #EFF6FF; color: #1E40AF; }

#sm-title {
  font-family: var(--font); font-weight: 800; font-size: 1.1rem;
  color: var(--seas-navy); text-align: center; margin-bottom: .45rem;
}
#sm-message {
  font-family: var(--font); font-size: .85rem; color: #64748B;
  text-align: center; line-height: 1.55;
}

#sm-card-body { padding: 2rem 2rem 1.5rem; }
#sm-card-footer {
  display: flex; gap: .75rem; padding: 0 2rem 1.75rem;
  flex-direction: row-reverse;
}

#sm-btn-confirm {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; border: none; cursor: pointer; border-radius: 10px;
  font-family: var(--font); font-weight: 700; font-size: .88rem;
  padding: .65rem 1.2rem; transition: all .18s;
}
#sm-btn-confirm.variant-danger  { background: linear-gradient(135deg,#DC2626,#EF4444); color:#fff; box-shadow:0 4px 12px rgba(220,38,38,.35); }
#sm-btn-confirm.variant-danger:hover  { box-shadow:0 6px 18px rgba(220,38,38,.5); transform:translateY(-1px); }
#sm-btn-confirm.variant-warning { background: linear-gradient(135deg,#D97706,#FBBF24); color:#fff; box-shadow:0 4px 12px rgba(217,119,6,.35); }
#sm-btn-confirm.variant-warning:hover { box-shadow:0 6px 18px rgba(217,119,6,.5); transform:translateY(-1px); }
#sm-btn-confirm.variant-primary { background: linear-gradient(135deg,#1565C0,#42A5F5); color:#fff; box-shadow:0 4px 12px rgba(21,101,192,.35); }
#sm-btn-confirm.variant-primary:hover { box-shadow:0 6px 18px rgba(21,101,192,.5); transform:translateY(-1px); }

#sm-btn-cancel {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  gap: .35rem; border: 1.5px solid #CBD5E1; background: #F8FAFC; cursor: pointer;
  border-radius: 10px; font-family: var(--font); font-weight: 600; font-size: .88rem;
  color: #475569; padding: .65rem 1.2rem; transition: all .18s;
}
#sm-btn-cancel:hover { background: #F1F5F9; border-color: #94A3B8; color: #1E293B; }

/* Séparateur haut de la modale selon variante */
#sm-card-top {
  height: 4px; width: 100%;
}
#sm-card-top.variant-danger  { background: linear-gradient(90deg,#DC2626,#EF4444); }
#sm-card-top.variant-warning { background: linear-gradient(90deg,#D97706,#FBBF24); }
#sm-card-top.variant-primary { background: linear-gradient(90deg,#1565C0,#42A5F5); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.exam-main { min-height: calc(100vh - 130px); padding-bottom: 3rem; }
.exam-footer {
  background: var(--seas-navy);
  border-top: 3px solid var(--seas-gold);
  color: rgba(255,255,255,.42);
  font-family: var(--font); font-size: .68rem;
  text-align: center; padding: 1rem;
}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp .4s ease both; }
.animate-in:nth-child(2) { animation-delay: .05s; }
.animate-in:nth-child(3) { animation-delay: .1s; }
.animate-in:nth-child(4) { animation-delay: .15s; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
  .admin-title { font-size: 1.1rem; }
  .admin-header::after { font-size: 2rem; right: .6rem; }
  .stat-num { font-size: 1.6rem; }
  .admin-table { overflow-x: auto; border-radius: 10px; }
}