/* ============================================================
   ADMIN.CSS
   Styles pour le panel d'administration.
   Accessible via un code admin (pas de système d'inscription).
   
   Structure :
   1. Écran de connexion admin (saisie du code)
   2. Dashboard admin
   3. Liste des commandes
   4. Modale de détails / édition de commande
   ============================================================ */

/* ---- 1. ÉCRAN DE CONNEXION ADMIN ---- */
.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

.admin-login__box {
  width: 100%;
  max-width: 400px;
  padding: var(--space-2xl);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-bg-secondary);
  text-align: center;
}

.admin-login__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-yellow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-lg);
}

.admin-login__subtitle {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

.admin-login .form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: var(--space-lg);
}

.admin-login .form-input:focus {
  border-color: var(--color-default);
}

.admin-login__back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 14px 10px 14px;
  margin-bottom: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-secondary);
  background: var(--color-default);
  border-radius: 50px;
  cursor: pointer;
  position: relative;        /* Nécessaire pour le ::before */
  overflow: hidden;           /* Cache le ::before qui déborde */
  z-index: 1;                /* Le texte reste cliquable */
}
.admin-login__back-link:hover {
  color: var(--color-default);
}
.admin-login__back-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                  /* Invisible par défaut */
  height: 0;
  background: var(--color-secondary);
  border-radius: 50px;
  transition: height 0.2s ease;
  z-index: -1;               /* Derrière le texte */
}
.admin-login__back-link:hover::before {
  height: 100%;               /* Remplit tout le bouton */
}

/* ---- 2. DASHBOARD ADMIN ---- */
.admin-dashboard {
  display: none; /* Affiché via JS après connexion */
  min-height: 100vh;
  padding: var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
}
.admin-dashboard.is-visible {
  display: block;
}

.admin-dashboard__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.admin-dashboard__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-yellow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-dashboard__logout {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--color-red);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-red);
  border-radius: 30px;
  cursor: pointer;
  transition: 0.4s;
}
.admin-dashboard__logout:hover {
  background: var(--color-red);
  color: var(--color-bg-primary);
}

.admin-dashboard__back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 14px 10px 14px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-secondary);
  background: var(--color-default);
  border-radius: 50px;
  cursor: pointer;
  position: relative;        /* Nécessaire pour le ::before */
  overflow: hidden;           /* Cache le ::before qui déborde */
  z-index: 1;                /* Le texte reste cliquable */
  transition: color var(--transition-base);
}

/* Barre de remplissage (pseudo-élément) */
.admin-dashboard__back-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                  /* Invisible par défaut */
  height: 0;
  background: var(--color-secondary);
  border-radius: 50px;
  transition: height 0.2s ease;
  z-index: -1;               /* Derrière le texte */
}

.admin-dashboard__back-link:hover {
  color: var(--color-default);
}

.admin-dashboard__back-link:hover::before {
  height: 100%;               /* Remplit tout le bouton */
}
/* Statistiques rapides */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.admin-stat {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  text-align: center;
  border-radius: 20px;
}
.admin-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-cyan);
}
.admin-stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--space-xs);
}

/* Filtres */
.admin-filters {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.admin-filter-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: 
    border-color var(--transition-base),
    color var(--transition-base),
    background var(--transition-base);
}
.admin-filter-btn:hover,
.admin-filter-btn.is-active {
  border-color: var(--color-border);
  color: var(--color-text-primary);
  background: var(--color-default);
}

/* ---- 3. LISTE DES COMMANDES ---- */
.admin-orders {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.order-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-bg-secondary);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.order-card:hover {
  border-color: var(--color-cyan-dim);
  background: var(--color-bg-elevated);
}

.order-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.order-card__client {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

.order-card__type {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.order-card__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.order-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
}

/* Status badges (réutilisés des tracking-result) */
.status-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid;
  border-radius: 20px;
}
.status-badge--pending  { color: var(--color-orange); border-color: var(--color-yellow-dim); }
.status-badge--rejected { color: var(--color-red);    border-color: var(--color-red); }
.status-badge--progress { color: var(--color-blue);   border-color: var(--color-blue); }
.status-badge--completed{ color: var(--color-text-primary); background: var(--color-default); }

/* ---- 4. MODALE DE DÉTAILS / ÉDITION ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}
.modal-overlay.is-visible {
  display: flex;
}

.modal {
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-2xl);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-bg-primary);
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xl);
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.modal__close {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-xs);
  transition: color var(--transition-fast);
}
.modal__close:hover {
  color: var(--color-red);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.modal__actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* Bouton danger (rejet, suppression) */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-red);
  background: transparent;
  border: 1px solid var(--color-red);
  border-radius: 50px;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.btn-danger:hover {
  background: var(--color-red);
  color: var(--color-bg-primary);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
  .order-card {
    grid-template-columns: 1fr;
  }
  .order-card__actions {
    flex-direction: row;
    align-items: center;
  }
  .modal {
    padding: var(--space-lg);
  }
}