:root {
  --color-primary: #3271a8;
  --color-secondary: #7732a8;
  --gradient-brand: linear-gradient(135deg, #3271a8 0%, #7732a8 100%);
  --sidebar-width: 260px;
  --navbar-height: 64px;
  --color-bg: #f4f6fb;
  --color-card: #ffffff;
  --color-text: #212529;
  --color-muted: #6c757d;
  --color-border: #e6e9f0;
  --radius: 0.75rem;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a {
  color: var(--color-primary);
}

/* ---------- Navbar ---------- */
.gx-navbar {
  height: var(--navbar-height);
  background: var(--gradient-brand);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 10px rgba(50, 113, 168, 0.25);
}

.gx-navbar .navbar-brand {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.gx-navbar .btn-toggle-sidebar {
  color: #fff;
  border: none;
  background: transparent;
  font-size: 1.3rem;
}

.gx-navbar .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ---------- Layout ---------- */
.gx-layout {
  display: flex;
  min-height: calc(100vh - var(--navbar-height));
}

.gx-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid var(--color-border);
}

.gx-sidebar .nav-link {
  color: var(--color-text);
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
  margin: 0.15rem 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.gx-sidebar .nav-link:hover {
  background-color: rgba(50, 113, 168, 0.08);
  color: var(--color-primary);
}

.gx-sidebar .nav-link.active {
  background: var(--gradient-brand);
  color: #fff;
}

.gx-sidebar .nav-section-title {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  padding: 1rem 1.25rem 0.35rem;
}

.gx-content {
  flex-grow: 1;
  padding: 1.75rem;
  min-width: 0;
}

.gx-page-header {
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}

.gx-page-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.gx-page-header p {
  margin-bottom: 0;
  opacity: 0.9;
}

/* ---------- Cards / KPI ---------- */
.gx-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.gx-kpi {
  border-radius: var(--radius);
  padding: 1.25rem;
  color: #fff;
  background: var(--gradient-brand);
}

.gx-kpi .gx-kpi-value {
  font-size: 1.8rem;
  font-weight: 700;
}

.gx-kpi .gx-kpi-label {
  opacity: 0.9;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Buttons ---------- */
.btn-brand {
  background: var(--gradient-brand);
  border: none;
  color: #fff;
}

.btn-brand:hover {
  filter: brightness(1.08);
  color: #fff;
}

.btn-outline-brand {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

.btn-outline-brand:hover {
  background: var(--color-primary);
  color: #fff;
}

.btn-whatsapp-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-whatsapp-pay i {
  font-size: 1.8rem;
}

.btn-whatsapp-pay:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55);
  color: #fff;
}

/* ---------- Badges ---------- */
.badge-brand {
  background: var(--gradient-brand);
  color: #fff;
}

.badge-role-admin { background-color: var(--color-secondary); color: #fff; }
.badge-role-directeur { background-color: var(--color-primary); color: #fff; }
.badge-role-comptable { background-color: #2b8a5e; color: #fff; }
.badge-role-enseignant { background-color: #b8860b; color: #fff; }

/* ---------- Auth pages ---------- */
.gx-auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-brand);
  padding: 1rem;
}

.gx-auth-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 2.25rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
}

.gx-auth-card h1 {
  font-weight: 700;
  color: var(--color-secondary);
  font-size: 1.5rem;
}

/* ---------- Error pages ---------- */
.gx-error-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

.gx-error-code {
  font-size: 5rem;
  font-weight: 800;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Responsive sidebar ---------- */
@media (max-width: 991.98px) {
  .gx-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh; /* hauteur réelle visible sur Safari iOS (barre d'outils incluse) */
    transform: translateX(-100%);
    transition: transform 0.25s ease-in-out;
    z-index: 1040;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .gx-sidebar.show {
    transform: translateX(0);
  }

  .gx-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1035;
  }

  .gx-sidebar-backdrop.show {
    display: block;
  }
}

/* Empêche la page de fond de défiler pendant que le menu mobile est ouvert
   (sinon le geste de défilement peut être "volé" par la page plutôt que par
   le menu, rendant certains liens difficiles à atteindre sur iPhone). */
body.gx-no-scroll {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
}

@media (max-width: 991.98px) {

  /* Zone tactile plus confortable pour le menu sur téléphone/tablette. */
  .gx-sidebar .nav-link {
    padding: 0.85rem 1rem;
  }
}

/* ---------- Optimisations mobile (téléphone) ---------- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

/* Empêche le zoom automatique de Safari iOS à la mise au point d'un champ
   (déclenché dès que la taille de police du champ est inférieure à 16px).
   Les variantes .form-control-sm restent volontairement compactes : elles
   servent aux grilles denses (saisie de notes, etc.) où l'espace prime. */
.form-control,
.form-select,
textarea.form-control {
  font-size: 16px;
}

@media (max-width: 575.98px) {
  .gx-content {
    padding: 1rem;
  }

  .gx-page-header {
    padding: 1.1rem 1.25rem;
    border-radius: calc(var(--radius) * 0.85);
  }

  .gx-page-header h1 {
    font-size: 1.2rem;
  }

  .gx-card {
    padding: 1rem;
  }

  .gx-kpi {
    padding: 1rem;
  }

  .gx-kpi .gx-kpi-value {
    font-size: 1.5rem;
  }

  /* Boutons pleine largeur dans les barres d'actions pour un appui facile
     au pouce, sans se marcher dessus sur un écran étroit. */
  .gx-page-header .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Cible tactile minimale recommandée (44px) pour tous les boutons/liens
   cliquables sur écran tactile. */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .gx-navbar .btn-toggle-sidebar,
  .gx-sidebar .nav-link {
    min-height: 44px;
  }
}