body {
    font-family: 'Cairo', sans-serif;
    overflow-x: hidden;
}

/* Admin layout - CSS Grid */
.app-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    min-height: 100vh;
    width: 100%;
}

.app-header {
    grid-area: header;
    width: 100%;
}

.app-sidebar {
    grid-area: sidebar;
    width: 250px;
    transition: width 0.3s ease;
}

.app-main {
    grid-area: main;
    min-width: 0;
    padding: 20px;
    background: #f4f8f5;
}

.app-footer {
    grid-area: footer;
    width: 100%;
}

/* Toujours afficher le bouton toggle de la sidebar */
.app-header .sidebar-toggle {
    display: inline-flex !important;
}

/* Sidebar on the right for RTL */
[dir="rtl"] .app-sidebar {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}

/* Sidebar collapsed */
.sidebar-collapse .app-sidebar {
    width: 0;
    padding: 0;
    min-height: auto;
    overflow: hidden;
}

.school-name {
    font-size: 0.85rem;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
}

.academic-year {
    font-size: 0.75rem;
}

.brand-link .brand-image {
    max-height: 60px;
}

.sidebar-menu .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 0;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
}

.sidebar-menu .nav-link .nav-icon,
.sidebar-menu .nav-link p {
    color: #fff;
}

[dir="rtl"] .sidebar-menu .nav-link {
    justify-content: flex-end;
    text-align: right;
}

[dir="rtl"] .sidebar-menu .nav-link .nav-icon {
    order: 0;
    margin-right: 0.5rem;
    margin-left: 0;
}

.sidebar-menu .nav-link .nav-icon {
    min-width: 24px;
    display: inline-flex;
    justify-content: center;
}

.sidebar-menu .nav-link p {
    margin: 0;
    white-space: nowrap;
    font-size: 0.95rem;
    line-height: 1.2;
    flex: 1 1 auto;
    text-align: right;
}

.sidebar-menu .nav-treeview {
    background: rgba(0, 0, 0, 0.15);
    display: none;
}

.sidebar-menu .nav-treeview .nav-link {
    padding-right: 2.5rem;
}

.sidebar-menu .fa-angle-left {
    transition: transform 0.3s ease;
}

[dir="rtl"] .sidebar-menu .nav-link p {
    order: 1;
}


[dir="rtl"] .sidebar-menu .nav-link p {
    order: 0;
}

.sidebar-menu .nav-link:hover {
    background: rgba(255,255,255,0.1);
}

.sidebar-menu .nav-link.active {
    background: rgba(255,255,255,0.15);
    border-right: 3px solid #FFD700;
}

[dir="rtl"] .sidebar-menu .nav-link.active {
    border-right: none;
    border-left: 3px solid #FFD700;
}

.card-header {
    text-align: right;
    gap: 0.5rem;
}

.card-header i {
    margin-inline-end: 0.4rem;
}

.stat-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-3px);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.table th,
.table td {
    text-align: right;
}

.table th {
    font-weight: 600;
    font-size: 0.85rem;
}

.badge {
    font-size: 0.75rem;
    font-weight: 600;
}

.btn-sm {
    font-size: 0.8rem;
}

.search-box {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 0.5rem 1rem;
}

.modal-content {
    border: none;
    border-radius: 12px;
}

.modal-header {
    border-bottom: 1px solid #e9ecef;
}

.form-control:focus,
.form-select:focus {
    border-color: #0f5c3a;
    box-shadow: 0 0 0 0.2rem rgba(15, 92, 58, 0.15);
}

.level-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, padding 0.15s;
    border-radius: 6px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin: 0 -0.5rem;
}

.level-item:last-child {
    border-bottom: none;
}

.level-item:hover {
    background: #f0fdf4;
    cursor: pointer;
}

.level-name {
    font-weight: 600;
    color: #333;
}

.level-count {
    background: #0f5c3a;
    color: #fff;
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 800;
}

.stat-label {
    font-size: 0.85rem;
    color: #666;
}

/* ===== Auth / Login (deux-panneaux) ===== */

.auth-layout-body {
  background:
    radial-gradient(circle at 12% 10%, rgba(15, 92, 58, 0.25), transparent 38%),
    radial-gradient(circle at 88% 90%, rgba(26, 138, 85, 0.2), transparent 35%),
    #e8f2ed;
  min-height: 100vh;
}

.auth-layout-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-login-shell {
  width: min(1140px, 100%);
  min-height: 550px;
  overflow: hidden;
  border: 1px solid #c5d9cf;
  border-radius: 1.3rem;
  background: #ffffff;
  box-shadow: 0 28px 58px rgba(8, 61, 37, 0.2);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}

/* Visual Panel (right side in RTL) */
.auth-visual-panel {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: #083d25;
}

.auth-visual-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auth-visual-rim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 75% 20%, rgba(26, 138, 85, 0.35), transparent 40%),
    linear-gradient(130deg, rgba(5, 20, 10, 0.2), rgba(3, 12, 6, 0.5));
}

.auth-visual-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.15) 0.8px, transparent 0.8px),
    radial-gradient(rgba(0, 0, 0, 0.14) 0.8px, transparent 0.8px);
  background-size: 18px 18px;
  background-position: 0 0, 8px 8px;
}

.auth-visual-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.45rem;
  color: #f0faf4;
  background:
    linear-gradient(180deg, rgba(4, 16, 8, 0.1), rgba(4, 16, 8, 0.9)),
    radial-gradient(circle at 85% 18%, rgba(26, 138, 85, 0.3), transparent 35%);
}

.auth-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 0.31rem 0.74rem;
  margin-bottom: 0.92rem;
  border-radius: 999px;
  border: 1px solid rgba(210, 240, 220, 0.42);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.auth-visual-title {
  margin: 0 0 0.75rem;
  line-height: 1.2;
  font-size: 1.5rem;
  font-weight: 800;
}

.auth-visual-text {
  margin: 0;
  max-width: 36ch;
  color: rgba(210, 245, 225, 0.92);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* Form Panel (left side in RTL) */
.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.8rem;
  background:
    radial-gradient(circle at 85% 8%, rgba(15, 92, 58, 0.11), transparent 35%),
    #ffffff;
}

.auth-form-card {
  width: min(398px, 100%);
  border-radius: 1rem;
  border: 1px solid #cfe0d6;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 36px rgba(8, 61, 37, 0.12);
  padding: 1.25rem 1.25rem 1.05rem;
}

.auth-form-title {
  margin-bottom: 0.22rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #083d25;
  text-align: center;
}

.auth-form-subtitle {
  margin-bottom: 1.15rem;
  color: #6a7f73;
  font-size: 0.92rem;
  text-align: center;
}

.auth-form-grid {
  display: grid;
  gap: 0.95rem;
}

.auth-label {
  margin-bottom: 0.34rem;
  color: #2d5a42;
  font-size: 0.84rem;
  font-weight: 700;
}

.auth-input {
  border-radius: 0 12px 12px 0;
  border-color: #c5d9cf;
  padding: 0.66rem 0.75rem;
}

[dir="rtl"] .auth-input {
  border-radius: 12px 0 0 12px;
}

.auth-input:focus {
  border-color: #1a8a55;
  box-shadow: 0 0 0 0.2rem rgba(26, 138, 85, 0.15);
}

.auth-input-group-text {
  background: #f1f8f4;
  border-color: #c5d9cf;
  color: #0f5c3a;
  border-radius: 12px 0 0 12px;
}

[dir="rtl"] .auth-input-group-text {
  border-radius: 0 12px 12px 0;
}

.auth-submit-btn {
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  padding: 0.72rem 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0f5c3a, #1a8a55);
}

.auth-submit-btn:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #083d25, #0f5c3a);
}

.auth-link {
  color: #0f5c3a;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.auth-link:hover {
  text-decoration: underline;
  color: #1a8a55;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .auth-visual-title {
    font-size: 1.3rem;
  }
}

@media (max-width: 991.98px) {
  .auth-login-shell {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    width: 100%;
  }

  .auth-visual-panel {
    min-height: 200px;
  }

  .auth-layout-main {
    padding: 0;
  }

  .auth-visual-overlay {
    padding: 1.5rem;
  }

  .auth-visual-title {
    font-size: 1.4rem;
  }

  .auth-form-panel {
    padding: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  html, body {
    overflow-x: hidden;
  }

  .auth-layout-main {
    padding: 0;
  }

  .auth-form-panel {
    padding: 1rem;
  }

  .auth-form-card {
    padding: 0.75rem;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  .auth-form-card .text-center img {
    height: 60px !important;
  }

  .auth-form-title {
    font-size: 1.2rem;
  }

  .auth-form-subtitle {
    font-size: 0.82rem;
    margin-bottom: 0.8rem;
  }

  .auth-visual-panel {
    min-height: 150px;
  }

  .auth-visual-overlay {
    padding: 0.75rem;
  }

  .auth-visual-title {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
  }

  .auth-visual-text {
    font-size: 0.78rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .auth-kicker {
    font-size: 0.6rem;
    padding: 0.15rem 0.45rem;
    margin-bottom: 0.35rem;
  }

  .auth-label {
    font-size: 0.8rem;
  }

  .auth-input {
    padding: 0.55rem 0.6rem;
    font-size: 0.9rem;
  }

  .auth-submit-btn {
    padding: 0.65rem 0.8rem;
    font-size: 0.95rem;
  }

  .auth-link {
    font-size: 0.82rem;
  }

  .auth-form-grid {
    gap: 0.75rem;
  }
}

@media (max-width: 380px) {
  .auth-form-panel {
    padding: 0.5rem;
  }

  .auth-form-card {
    padding: 0.5rem;
  }

  .auth-form-card .text-center img {
    height: 50px !important;
  }

  .auth-visual-panel {
    min-height: 120px;
  }

  .auth-visual-overlay {
    padding: 0.5rem;
  }

  .auth-visual-title {
    font-size: 1rem;
  }

  .auth-visual-text {
    display: none;
  }

  .auth-kicker {
    font-size: 0.55rem;
  }
}

/* ===== Pagination des listes admin =====
   Bootstrap rend la page active en bleu, etranger a la charte. Le gabarit
   bootstrap-5 range par ailleurs le compteur et les numeros aux deux extremites
   d'une ligne flex : les numeros se retrouvaient colles au bord. Ils sont donc
   centres, le compteur restant epingle au bord de depart.
   Portee limitee a .admin-pagination pour ne pas toucher d'autres paginations. */

.admin-pagination .pagination {
    margin-bottom: 0;
}

.admin-pagination .page-link {
    color: #0f5c3a;
    border-color: #dde7e2;
    padding: .4rem .75rem;
}

.admin-pagination .page-link:hover {
    background-color: #f1f8f4;
    border-color: #c5d9cf;
    color: #083d25;
}

.admin-pagination .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(15, 92, 58, .2);
    color: #083d25;
}

.admin-pagination .page-item.active .page-link {
    background-color: #0f5c3a;
    border-color: #0f5c3a;
    color: #ffffff;
}

.admin-pagination .page-item.disabled .page-link {
    color: #a7b3ad;
    border-color: #e9efec;
}

/* Numeros centres, compteur centre dessous.
   Une premiere version gardait le compteur sur la meme ligne, sorti du flux par
   positionnement absolu pour que le centrage des numeros reste exact. Mais rien
   ne reservait alors sa place : des que le compteur etait large, les numeros
   passaient par-dessus. Empiler supprime le probleme a la racine, a toute
   largeur, et centre reellement les numeros. */
.admin-pagination nav {
    justify-content: center;
}

.admin-pagination nav > div:last-child {
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}

.admin-pagination nav > div:last-child > div:first-child {
    order: 2;
}

.admin-pagination nav > div:last-child > div:first-child p {
    margin-bottom: 0;
}