/* ================================================================
   examens-auth.css  —  examens.tn  Auth Plugin
   Palette : Bleu marine #0D2C54 + Or #D4A017 + Blanc
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --ea-primary   : #0D2C54;
  --ea-primary-l : #16407c;
  --ea-gold      : #D4A017;
  --ea-gold-l    : #f0bb2b;
  --ea-danger    : #e74c3c;
  --ea-success   : #27ae60;
  --ea-bg        : transparent; /* جعلت الخلفية شفافة لتتناسب مع الموقع */
  --ea-white     : #ffffff;
  --ea-border    : #d0d8e8;
  --ea-text      : #1a2332;
  --ea-muted     : #6b7a94;
  --ea-radius    : 18px; /* زيادة النعومة في الحواف */
  --ea-shadow    : 0 10px 40px rgba(13,44,84,.08); /* ظل أنعم وأفخم */
  --ea-font      : 'Cairo', 'Poppins', sans-serif;
}

/* ── Wrapper ────────────────────────────────────────────────── */
.exauth-wrap { 
  min-height  : 100%;
  display     : flex;
  align-items : center;
  justify-content: center; 
}

/* RTL Support (Arabic) */
.exauth-wrap[dir="rtl"] {
  text-align: right;
  direction: rtl;
}

/* ── Card ───────────────────────────────────────────────────── */
.exauth-card {
  background    : var(--ea-white);
  border-radius : var(--ea-radius);
  box-shadow    : var(--ea-shadow);
  padding       : 45px 50px;
  width         : 90%; 
  animation     : eaFadeUp .4s ease both;
  border        : 1px solid rgba(13, 44, 84, 0.05); /* إطار خفيف جداً */
}
 
@keyframes eaFadeUp {
  from { opacity:0; transform:translateY(15px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────── */
.exauth-card-header {
  text-align    : center;
  margin-bottom : 32px;
}
.exauth-logo {
  font-size     : 10rem;
  line-height   : 1;
  margin-bottom : 10px;
}
.exauth-card-header h2 { 
  font-weight : 700;
  color       : var(--ea-primary);
  margin      : 0 0 6px;
}
.exauth-card-header p {
  color       : var(--ea-muted); 
  margin      : 0;
}

/* Avatar dashboard */
.exauth-avatar {
  width          : 64px;
  height         : 64px;
  border-radius  : 50%;
  background     : var(--ea-primary);
  color          : var(--ea-gold);
  font-size      : 1.5rem;
  font-weight    : 700;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin         : 0 auto 12px;
}

/* ── Grille 2 colonnes ──────────────────────────────────────── */
.exauth-row {
  display              : grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap                  : 0 20px;
}
@media (max-width:540px) {
  .exauth-row { grid-template-columns: 1fr; }
  .exauth-card { padding: 30px 25px; }
}

/* ── Champs ─────────────────────────────────────────────────── */
.exauth-field {
  margin-bottom : 20px;
  position      : relative;
}
.exauth-field label {
  display     : block; 
  font-weight : 600;
  color       : var(--ea-primary);
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.req { color: var(--ea-gold); }

.exauth-field input,
.exauth-field select,
.exauth-field textarea {
  width         : 100%;
  box-sizing    : border-box;
  padding       : 12px 16px;
  border        : 1.5px solid var(--ea-border);
  border-radius : 10px;
  font-family   : var(--ea-font); 
  color         : var(--ea-text);
  background    : #fdfdfe;
  transition    : all .2s;
  outline       : none;
}
.exauth-field input:focus,
.exauth-field select:focus,
.exauth-field textarea:focus {
  border-color : var(--ea-primary);
  box-shadow   : 0 0 0 3px rgba(13,44,84,.08);
  background   : #fff;
}
.exauth-field input.is-invalid,
.exauth-field select.is-invalid {
  border-color: var(--ea-danger);
}
.exauth-field select:disabled { opacity:.6; cursor:not-allowed; }
.exauth-field textarea { resize: vertical; min-height: 62px; }

/* ── Compteur ───────────────────────────────────────────────── */
.exauth-field-counter {
  font-size  : .75rem;
  color      : var(--ea-muted);
  position   : absolute;
  bottom     : -20px;
  right      : 0;
}
.exauth-wrap[dir="rtl"] .exauth-field-counter {
  right : auto;
  left  : 0;
}

/* ── Erreur champ ───────────────────────────────────────────── */
.exauth-field-error {
  display    : block;
  font-size  : .75rem;
  color      : var(--ea-danger);
  margin-top : 4px;
  min-height : 16px;
}

/* ── Mot de passe ───────────────────────────────────────────── */
.exauth-pass-wrap {
  position : relative;
}
.exauth-pass-wrap input {
  padding-right : 45px;
}
.exauth-eye {
  position   : absolute;
  right      : 12px;
  top        : 50%;
  transform  : translateY(-50%);
  background : none;
  border     : none;
  cursor     : pointer;
  font-size  : 2.5rem;
  line-height: 1;
  padding    : 0;
  color      : var(--ea-muted);
  transition : color .2s;
}
.exauth-eye:hover { color: var(--ea-primary); }

/* RTL Mot de passe */
.exauth-wrap[dir="rtl"] .exauth-pass-wrap input {
  padding-right: 16px;
  padding-left : 45px;
}
.exauth-wrap[dir="rtl"] .exauth-eye {
  right : auto;
  left  : 12px;
}

/* ── Indicateurs mot de passe ───────────────────────────────── */
.pass-hints {
  display   : flex;
  gap       : 8px;
  flex-wrap : wrap;
  margin-top: 8px;
}
.ph {
  font-size     : .75rem;
  background    : #eef0f5;
  color         : var(--ea-muted);
  padding       : 4px 10px;
  border-radius : 20px;
  transition    : all .2s;
}
.ph-ok {
  background : #d4f1e2;
  color      : var(--ea-success);
  font-weight: 600;
}

/* ── Remember ───────────────────────────────────────────────── */
.exauth-remember {
  margin-bottom: 18px;
}
.exauth-remember label {
  font-size : .9rem;
  color     : var(--ea-text);
  cursor    : pointer;
  display   : flex;
  align-items: center;
  gap       : 8px;
}

/* ── Bouton principal ───────────────────────────────────────── */
.exauth-btn {
  width          : 30%;
  padding        : 14px 20px;
  background     : var(--ea-primary);
  color          : var(--ea-white);
  border         : 2px solid var(--ea-primary);
  border-radius  : 12px;
  font-family    : var(--ea-font);
  font-weight    : 700;
  letter-spacing : .02em;
  cursor         : pointer;
  transition     : all .2s ease;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  margin-top     : 10px;
}
.exauth-btn:hover:not(:disabled) {
  background  : var(--ea-primary-l);
  box-shadow  : 0 6px 20px rgba(13,44,84,.2);
  transform   : translateY(-2px);
}
.exauth-btn:active:not(:disabled) { transform: translateY(0); }
.exauth-btn:disabled { opacity:.65; cursor:not-allowed; }

.exauth-btn-outline {
  background  : transparent;
  color       : var(--ea-primary);
  border-color: var(--ea-primary);
  margin-top  : 20px;
}
.exauth-btn-outline:hover:not(:disabled) {
  background: var(--ea-primary);
  color     : var(--ea-white);
}

/* ── Messages globaux ───────────────────────────────────────── */
.exauth-msg {
  padding       : 14px 18px;
  border-radius : 10px;
  margin-bottom : 20px;
  font-size     : .9rem;
  line-height   : 1.5;
  border        : 1.5px solid transparent;
}
.exauth-success {
  background   : #e8f8f0;
  color        : #1a6b3c;
  border-color : #bce8d1;
}
.exauth-error {
  background   : #fbecec;
  color        : #a93226;
  border-color : #f5c6c2;
}

/* ── Lien switch inscription/connexion ──────────────────────── */
.exauth-switch {
  text-align  : center;
  margin-top  : 25px; 
  color       : var(--ea-muted);
}
.exauth-switch a {
  color       : var(--ea-primary);
  font-weight : 700;
  text-decoration: none;
  transition  : color .2s;
}
.exauth-switch a:hover { color: var(--ea-gold); }

/* ── Info (déjà connecté) ───────────────────────────────────── */
.exauth-info {
  font-family : var(--ea-font);
  color       : var(--ea-text);
  font-size   : 1rem;
  text-align  : center;
  padding     : 30px;
  background  : #fff;
  border-radius: var(--ea-radius);
  box-shadow  : var(--ea-shadow);
}
.exauth-info a { color: var(--ea-primary); font-weight: 700; }

/* ── Dashboard profil ───────────────────────────────────────── */
.exauth-profile-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 15px;
  margin               : 25px 0;
}
.exauth-profile-item {
  background    : #f9fafc;
  border        : 1px solid var(--ea-border);
  border-radius : 10px;
  padding       : 14px 18px;
}
.pi-label {
  display     : block; 
  font-weight : 700;
  color       : var(--ea-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom : 6px;
}
.pi-value { 
  color       : var(--ea-text);
  font-weight : 600;
}

/* ── Accent or sur la bordure haute du card ────────────────── */
.exauth-card::before {
  content       : '';
  display       : block;
  width         : calc(100% + 100px);
  height        : 5px;
  background    : linear-gradient(90deg, var(--ea-primary), var(--ea-gold));
  border-radius : var(--ea-radius) var(--ea-radius) 0 0;
  margin        : -45px -50px 35px;
}
@media (max-width:540px) {
  .exauth-card::before { margin: -30px -25px 25px; width: calc(100% + 50px); }
}
/* ================================================================
   DASHBOARD EX_ PREFIXED - SOLUTION ANTI-CONFLIT THEME
================================================================ */

.EX_wrap {
  display: flex;
  justify-content: center;
  font-family: 'Cairo', sans-serif;
}

.EX_card {
  background: #ffffff !important; /* Forcer le blanc */
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(13,44,84,.08);
  padding: 40px;
  width: 100%;
  max-width: 900px;
  border: 1px solid rgba(13,44,84,.05);
  color: #1a2332 !important; /* Texte sombre */
}

/* Header */
.EX_header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eef0f5;
}
.EX_avatar {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #0D2C54, #16407c);
  color: #D4A017;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
}
.EX_welcome h2 { margin: 0; color: #0D2C54 !important; font-size: 1.5rem; }
.EX_meta_email { margin: 5px 0 0; color: #6b7a94; display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.EX_meta_email svg { width: 14px; }

.EX_logout_btn {
  margin-left: auto;
  background: #fdfdfe;
  border: 1px solid #d0d8e8;
  width: 40px; height: 40px;
  border-radius: 10px;
  cursor: pointer;
  color: #e74c3c;
  display: flex; align-items: center; justify-content: center;
}
.EX_logout_btn:hover { background: #e74c3c; color: #fff; }

/* Grille */
.EX_grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 25px;
}
@media (max-width: 768px) { .EX_grid { grid-template-columns: 1fr; } }

/* Panneaux - ICI ON FIXE LE PROBLEME DU NOIR */
.EX_panel {
  background: #ffffff !important; /* Force fond blanc */
  border: 1px solid #d0d8e8;
  border-radius: 15px;
  padding: 20px;
}
.EX_val_panel { background: #f9fafc !important; }

.EX_panel_head { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.EX_panel_head h3 { margin: 0; font-size: 1.1rem; color: #0D2C54 !important; }
.EX_panel_head svg { width: 20px; color: #D4A017; }

/* Panel Body - Sécurité supplémentaire */
.EX_panel_body {
  background: transparent !important;
  color: #1a2332 !important;
}

/* Info Items */
.EX_info_item { display: flex; gap: 12px; margin-bottom: 15px; }
.EX_info_icon { width: 32px; height: 32px; background: rgba(13,44,84,.05); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #0D2C54; }
.EX_info_icon svg { width: 16px; }
.EX_label { display: block; color: #6b7a94; text-transform: uppercase; }
.EX_value { font-weight: 600; color: #1a2332; }

/* Validation Items */
.EX_val_item {
  background: #ffffff !important;
  border: 1px solid #d0d8e8;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.EX_val_icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(13,44,84,.05); display: flex; align-items: center; justify-content: center; color: #0D2C54; }
.EX_tg_icon { color: #0088cc; background: rgba(0,136,204,.1); }
.EX_val_details { flex-grow: 1; }
.EX_val_details h4 { margin: 0; color: #000;}

.EX_badge {  font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.is_warn .EX_badge { background: #fbecec; color: #a93226; }
.is_ok .EX_badge { background: #e8f8f0; color: #1a6b3c; }

.EX_val_btn {
  background: #0D2C54; color: #fff; border: none; padding: 7px 12px; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
}
.EX_tg_btn { background: #0088cc; }
/* Styles pour l'édition en ligne des contacts */
.EX_val_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.EX_btn_edit_link {
  background: none;
  border: none;
  color: #6b7a94; 
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.EX_btn_edit_link:hover { color: #D4A017; }
.EX_val_data {
  font-weight: 600;
  color: #1a2332;
  margin-right: 10px;
}
.EX_contact_edit {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.EX_inline_input {
  flex-grow: 1;
  padding: 8px 12px;
  border: 1px solid #d0d8e8;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
}
.EX_inline_input:focus { border-color: #0D2C54; }
.EX_btn_icon {
  background: #f9fafc;
  border: 1px solid #d0d8e8;
  border-radius: 8px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.EX_btn_icon:hover { background: #eef0f5; }

/* ================================================================
   RESET PASSWORD OPTIONS UI
================================================================ */
.exa-reset-options { display: flex; gap: 15px; margin: 20px 0; }
.exa-reset-option { 
    flex: 1; border: 2px solid #e1e8f0; border-radius: 12px; padding: 15px; 
    text-align: center; cursor: pointer; transition: all 0.3s; background: #fff; 
}
.exa-reset-option:hover { border-color: #0D2C54; background: #f8faff; transform: translateY(-2px); }
.exa-reset-option.selected { border-color: #0088cc; background: #f0faff; box-shadow: 0 4px 15px rgba(0,136,204,0.15); }
.exa-reset-option input { display: none; }
.exa-reset-option svg { width: 32px; height: 32px; margin-bottom: 8px; }
.exa-reset-option.email svg { color: #0D2C54; }
.exa-reset-option.telegram svg { color: #0088cc; }