/* ══════════════════════════════════════════════════════════════════
   EZAlbion Auth CSS
══════════════════════════════════════════════════════════════════ */

/* ── Bouton Discord Login ── */
.auth-btn-discord {
  display:flex;align-items:center;gap:8px;padding:8px 16px;
  background:#5865F2;border:none;border-radius:12px;
  color:#fff;font-weight:700;font-size:13px;font-family:inherit;
  text-decoration:none;cursor:pointer;transition:all .15s;
  box-shadow:0 2px 12px rgba(88,101,242,.35);
}
.auth-btn-discord:hover{background:#4752c4;transform:translateY(-1px);box-shadow:0 4px 18px rgba(88,101,242,.5)}

/* ── User Pill ── */
.auth-user-pill{position:relative;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;background:rgba(255,255,255,.06);border:1px solid rgba(136,175,255,.15);border-radius:12px;cursor:pointer;user-select:none;transition:all .12s}
.auth-user-pill:hover{background:rgba(255,255,255,.1)}
.auth-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0}
.auth-username{font-size:13px;font-weight:700;color:#eef3fb}
.auth-badge{font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px}
.auth-badge.premium{background:rgba(240,212,112,.15);border:1px solid rgba(240,212,112,.3);color:#f0d470}
.auth-badge.admin{background:rgba(88,101,242,.15);border:1px solid rgba(88,101,242,.3);color:#8891f5}

/* ── Dropdown ── */
.auth-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:rgba(12,22,44,.97);border:1px solid rgba(136,175,255,.15);border-radius:14px;padding:6px;z-index:200;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.auth-dropdown.open{display:block}
.auth-dd-item{display:block;width:100%;padding:9px 12px;border:none;background:none;color:rgba(200,218,255,.85);font-family:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer;border-radius:8px;text-decoration:none;transition:background .1s}
.auth-dd-item:hover{background:rgba(136,175,255,.1)}
.auth-dd-item.danger:hover{background:rgba(255,107,107,.12);color:#ff6b6b}

/* ── Toast ── */
.auth-toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:12px;font-weight:700;font-size:14px;z-index:9999;opacity:0;transform:translateY(10px);transition:all .25s;pointer-events:none}
.auth-toast.show{opacity:1;transform:translateY(0)}
.auth-toast.success{background:#1a6640;border:1px solid rgba(94,212,144,.3);color:#5ed490}
.auth-toast.error{background:#6b1a1a;border:1px solid rgba(255,107,107,.3);color:#ff6b6b}

/* ══ PANNEAU ADMIN ══════════════════════════════════════════════ */
.admin-modal{position:fixed;inset:0;background:rgba(8,14,26,.75);backdrop-filter:blur(12px);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.admin-modal.open{display:flex}
.admin-dialog{width:min(900px,100%);max-height:90vh;background:linear-gradient(180deg,#0b1729,#080f1d);border:1px solid rgba(136,175,255,.15);border-radius:24px;display:flex;flex-direction:column;overflow:hidden}
.admin-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid rgba(136,175,255,.08)}
.admin-title{font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:#e8c97a;margin:0}
.admin-close{background:none;border:none;color:rgba(200,218,255,.7);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:8px}
.admin-close:hover{background:rgba(255,255,255,.08)}
.admin-tabs{display:flex;gap:6px;padding:12px 24px;border-bottom:1px solid rgba(136,175,255,.08)}
.admin-tab{padding:8px 16px;border-radius:10px;border:1px solid rgba(136,175,255,.1);background:none;color:rgba(200,218,255,.6);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .12s}
.admin-tab:hover{background:rgba(136,175,255,.08);color:#eef3fb}
.admin-tab.active{background:rgba(136,175,255,.15);border-color:rgba(136,175,255,.3);color:#fff}
.admin-body{flex:1;overflow:auto;padding:20px 24px}
.admin-loading{text-align:center;padding:40px;color:rgba(180,200,240,.5)}
.admin-section-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(180,200,240,.5);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.admin-unread-badge{background:rgba(255,107,107,.15);border:1px solid rgba(255,107,107,.25);color:#ff6b6b;font-size:10px;padding:2px 7px;border-radius:999px}
.admin-empty{text-align:center;color:rgba(180,200,240,.5);padding:32px;font-size:13px}

/* Stats grid */
.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:20px}
.admin-stat-card{background:rgba(255,255,255,.04);border:1px solid rgba(136,175,255,.1);border-radius:14px;padding:16px;text-align:center}
.admin-stat-card.premium{border-color:rgba(240,212,112,.2);background:rgba(240,212,112,.05)}
.admin-stat-card.good{border-color:rgba(94,212,144,.2);background:rgba(94,212,144,.05)}
.admin-stat-icon{font-size:22px;margin-bottom:8px}
.admin-stat-val{font-size:24px;font-weight:900;color:#eef3fb;margin-bottom:4px}
.admin-stat-lbl{font-size:11px;color:rgba(180,200,240,.6);font-weight:700}

/* Bar chart */
.admin-bar-chart{display:flex;align-items:flex-end;gap:4px;height:100px;padding:10px 0 4px;overflow:hidden}
.admin-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%}
.admin-bar{width:100%;background:rgba(136,175,255,.5);border-radius:3px 3px 0 0;transition:height .3s;min-height:4px}
.admin-bar-label{font-size:8px;color:rgba(180,200,240,.4);white-space:nowrap;transform:rotate(-45deg);width:20px;overflow:hidden;text-overflow:clip}

/* Users list */
.admin-users-list{display:flex;flex-direction:column;gap:8px}
.admin-user-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(136,175,255,.07);border-radius:12px}
.admin-user-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0}
.admin-user-avatar.small{width:24px;height:24px}
.admin-user-info{flex:1;min-width:0}
.admin-user-info strong{display:block;font-size:13px;color:#eef3fb}
.admin-user-info small{font-size:11px;color:rgba(180,200,240,.5)}
.admin-user-badges{display:flex;gap:4px;flex-shrink:0}
.admin-badge{font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px}
.admin-badge.premium{background:rgba(240,212,112,.12);border:1px solid rgba(240,212,112,.2);color:#f0d470}
.admin-badge.admin{background:rgba(88,101,242,.12);border:1px solid rgba(88,101,242,.2);color:#8891f5}

/* Support */
.admin-support-list{display:flex;flex-direction:column;gap:10px}
.admin-support-msg{padding:14px;border-radius:12px;border:1px solid rgba(136,175,255,.1)}
.admin-support-msg.unread{border-color:rgba(94,212,144,.25);background:rgba(94,212,144,.04)}
.admin-support-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.admin-support-header time{margin-left:auto;font-size:11px;color:rgba(180,200,240,.5)}
.admin-support-body{font-size:13px;color:rgba(200,218,255,.85);line-height:1.5;margin-bottom:10px}
.admin-support-reply{font-size:12px;color:rgba(94,212,144,.8);background:rgba(94,212,144,.07);border:1px solid rgba(94,212,144,.15);border-radius:8px;padding:8px 12px}
.admin-reply-form{display:flex;gap:8px}
.admin-reply-input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(136,175,255,.15);border-radius:8px;padding:8px 12px;color:#fff;font-family:inherit;font-size:13px;resize:none}

/* ══ PANNEAU SUPPORT (user) ═════════════════════════════════════ */
.support-modal{position:fixed;bottom:24px;right:24px;z-index:250;display:none}
.support-modal.open{display:block}
.support-dialog{width:340px;background:rgba(10,18,34,.97);border:1px solid rgba(136,175,255,.18);border-radius:18px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.6);display:flex;flex-direction:column;max-height:480px}
.support-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(136,175,255,.08);background:rgba(136,175,255,.05)}
.support-title{font-size:14px;font-weight:800;color:#eef3fb;margin:0}
.support-messages-list{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.support-empty{text-align:center;padding:24px;font-size:12px;color:rgba(180,200,240,.5)}
.support-msg-item{background:rgba(255,255,255,.04);border:1px solid rgba(136,175,255,.08);border-radius:10px;padding:10px 12px}
.support-msg-item time{display:block;font-size:10px;color:rgba(180,200,240,.4);margin-bottom:4px}
.support-msg-text{font-size:12px;color:rgba(200,218,255,.85);line-height:1.5}
.support-admin-reply{margin-top:8px;font-size:12px;color:rgba(94,212,144,.8);background:rgba(94,212,144,.07);border-radius:6px;padding:6px 10px}
.support-composer{padding:10px 12px;border-top:1px solid rgba(136,175,255,.08);display:flex;flex-direction:column;gap:8px}
.support-composer textarea{background:rgba(255,255,255,.06);border:1px solid rgba(136,175,255,.15);border-radius:10px;padding:8px 12px;color:#fff;font-family:inherit;font-size:12px;resize:none}
.support-composer textarea:focus{outline:none;border-color:rgba(136,175,255,.35)}

/* ── Support amélioré ── */
.support-msg-bubble{background:rgba(136,175,255,.1);border:1px solid rgba(136,175,255,.15);border-radius:10px 10px 2px 10px;padding:10px 12px;font-size:13px;color:#eef3fb;line-height:1.5;margin:4px 0}
.support-reply-bubble{background:rgba(94,212,144,.08);border:1px solid rgba(94,212,144,.18);border-radius:2px 10px 10px 10px;padding:10px 12px;font-size:13px;color:rgba(200,240,220,.9);line-height:1.5;margin:4px 0 0 12px}
.support-reply-who{display:block;font-size:10px;font-weight:800;color:rgba(94,212,144,.7);margin-bottom:4px;letter-spacing:.05em}
.support-pending{font-size:11px;color:rgba(180,200,240,.4);font-style:italic;margin:4px 0 0 8px}
.support-msg-item{margin-bottom:12px}
.support-msg-item time{display:block;font-size:10px;color:rgba(180,200,240,.4);margin-bottom:3px}
.support-close-btn{background:none;border:none;color:rgba(200,218,255,.7);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px}
.support-close-btn:hover{background:rgba(255,255,255,.08)}
/* Badge non lus sur le bouton Support flottant */
.support-notif-badge{position:absolute;top:-4px;right:-4px;background:#ff6b6b;color:#fff;font-size:10px;font-weight:800;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(8,14,26,.9)}

/* ══ PAGE DE CONNEXION ════════════════════════════════════════════ */
.login-gate {
  position:fixed;inset:0;z-index:999;
  background:radial-gradient(ellipse 80% 60% at 30% 40%, #0d1e38 0%, #060e1c 60%);
  display:flex;align-items:center;justify-content:center;
  padding:24px;overflow:auto;
}

/* Langue picker */
.login-lang-picker {
  position:absolute;top:20px;right:20px;
  display:flex;gap:6px;z-index:10;
}
.login-lang-btn {
  background:rgba(255,255,255,.06);border:1px solid rgba(136,175,255,.15);
  border-radius:8px;padding:5px 10px;color:rgba(200,218,255,.5);
  font-size:11px;font-weight:800;font-family:inherit;cursor:pointer;
  letter-spacing:.05em;transition:all .12s;
  display:flex;align-items:center;gap:6px;
}
.login-lang-btn img { border-radius:2px; display:block; }
.login-lang-btn span { letter-spacing:.05em; }
.login-lang-btn:hover { background:rgba(136,175,255,.12);color:#eef3fb; }
.login-lang-btn.active { background:rgba(136,175,255,.18);border-color:rgba(136,175,255,.4);color:#eef3fb; }

/* Layout 2 colonnes */
.login-layout {
  display:grid;
  grid-template-columns:1fr 420px;
  gap:48px;
  max-width:960px;width:100%;
  align-items:center;
}
@media (max-width:720px) {
  .login-layout { grid-template-columns:1fr;gap:32px; }
  .login-promo { text-align:center; }
}

/* ── Colonne gauche ── */
.login-promo-logo {
  font-size:36px;font-weight:900;letter-spacing:-.02em;margin-bottom:16px;
  line-height:1;
}
.login-ez  { color:#f0c534; }
.login-albion { color:#fff; }

.login-promo-tagline {
  font-size:16px;color:rgba(180,200,240,.7);line-height:1.5;
  margin:0 0 36px;
}

.login-features { display:flex;flex-direction:column;gap:20px; }
.login-feature {
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.03);border:1px solid rgba(136,175,255,.08);
  border-radius:14px;padding:16px 18px;
  transition:border-color .15s;
}
.login-feature:hover { border-color:rgba(136,175,255,.18); }
.login-feature-icon { font-size:24px;flex-shrink:0;margin-top:1px;line-height:1; }
.login-feature strong {
  display:block;font-size:14px;font-weight:800;color:#eef3fb;margin-bottom:4px;
}
.login-feature p {
  margin:0;font-size:12px;color:rgba(180,200,240,.6);line-height:1.55;
}

/* ── Colonne droite : card ── */
.login-card-wrap { display:flex;justify-content:center; }
.login-card {
  width:100%;background:rgba(10,18,34,.96);
  border:1px solid rgba(136,175,255,.15);
  border-radius:24px;padding:44px 36px;text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(136,175,255,.04);
}
.login-card-logo {
  font-size:28px;font-weight:900;letter-spacing:-.02em;margin-bottom:28px;
  display:flex;align-items:center;justify-content:center;
}
.login-card-title {
  font-family:'Cinzel',serif;font-size:22px;font-weight:700;
  color:#eef3fb;margin:0 0 10px;
}
.login-card-sub {
  font-size:13px;color:rgba(180,200,240,.6);line-height:1.6;margin:0 0 30px;
}

/* Bouton connexion */
.login-gate-btn {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;background:#5865F2;
  border:none;border-radius:14px;color:#fff;
  font-weight:700;font-size:15px;font-family:inherit;
  text-decoration:none;cursor:pointer;transition:all .15s;
  box-shadow:0 4px 20px rgba(88,101,242,.4);
}
.login-gate-btn:hover {
  background:#4752c4;transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(88,101,242,.55);
}
.login-gate-hint {
  margin:18px 0 0;font-size:12px;color:rgba(180,200,240,.35);
}

/* ── État chargement ── */
.login-card-loading {
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.login-loading-spinner {
  margin-bottom:16px;animation:loginSpin 1.2s linear infinite;
  display:flex;align-items:center;justify-content:center;
}
@keyframes loginSpin { to { transform:rotate(360deg); } }
.login-loading-discord {
  margin-bottom:20px;opacity:.85;
}
.login-loading-title {
  font-family:'Cinzel',serif;font-size:18px;font-weight:700;
  color:#eef3fb;margin:0 0 8px;
}
.login-loading-sub {
  font-size:13px;color:rgba(180,200,240,.55);margin:0 0 24px;line-height:1.5;
}
.login-loading-dots {
  display:flex;gap:7px;margin-bottom:28px;
}
.login-loading-dots span {
  width:7px;height:7px;border-radius:50%;background:rgba(136,175,255,.4);
  animation:loginDot 1.2s ease-in-out infinite;
}
.login-loading-dots span:nth-child(2) { animation-delay:.2s; }
.login-loading-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes loginDot {
  0%,80%,100% { transform:scale(.6);opacity:.3; }
  40% { transform:scale(1);opacity:1; }
}
.login-loading-cancel {
  background:none;border:1px solid rgba(136,175,255,.15);border-radius:10px;
  padding:7px 18px;color:rgba(200,218,255,.45);font-family:inherit;
  font-size:12px;cursor:pointer;transition:all .12s;
}
.login-loading-cancel:hover {
  border-color:rgba(136,175,255,.3);color:rgba(200,218,255,.7);
}