/**
 * Charte Graphique Personnalisée - GROUPE SAMATÉ
 * Couleurs extraites directement du logo officiel.
 */

:root {
  --samate-blue: #0a2d54; /* Bleu foncé officiel */
  --samate-gold: #c59b4e; /* Or / Doré officiel */
  --samate-dark: #1e293b; /* Texte sombre moderne */
  --samate-light: #f8fafc; /* Arrière-plan des pages */
  --samate-gray: #64748b; /* Texte secondaire */
  --success-color: #10b981; /* Vert moderne pour statut 'Payé' */
  --warning-color: #f59e0b; /* Orange moderne pour statut 'Partiel' */
  --danger-color: #ef4444; /* Rouge moderne pour statut 'Impayé' */
}

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

/* Éléments aux couleurs de l'entreprise */
.bg-samate-blue {
  background-color: var(--samate-blue) !important;
  color: #ffffff !important;
}

.text-samate-blue {
  color: var(--samate-blue) !important;
}

.text-samate-gold {
  color: var(--samate-gold) !important;
}

/* Boutons Professionnels Customisés */
.btn-samate-primary {
  background-color: var(--samate-blue);
  color: #ffffff;
  border: 1px solid var(--samate-blue);
  transition: all 0.3s ease;
}

.btn-samate-primary:hover {
  background-color: #061f3b;
  color: #ffffff;
  border-color: #061f3b;
}

.btn-samate-secondary {
  background-color: transparent;
  color: var(--samate-gold);
  border: 2px solid var(--samate-gold);
  font-weight: 600;
}

.btn-samate-secondary:hover {
  background-color: var(--samate-gold);
  color: #ffffff;
}

/* Badges de statuts financiers de la matrice */
.badge-paye {
  background-color: var(--success-color);
  color: white;
  font-weight: 600;
}

.badge-partiel {
  background-color: var(--warning-color);
  color: #000000;
  font-weight: 600;
}

.badge-impaye {
  background-color: var(--danger-color);
  color: white;
  font-weight: 600;
}

/* Ajustements pour les tables responsives de gestion */
.table-responsive {
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

/* Layout Admin Structurel */
.admin-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sidebar-menu {
  background-color: var(--samate-blue);
  border-right: 3px solid var(--samate-gold);
  min-height: 100vh; /* S'adapte à la hauteur de l'écran au minimum */
  height: auto; /* Devient extensible si de nouvelles pages sont ajoutées */
  transition: all 0.3s ease;
}

.sidebar-menu .nav-link {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 8px;
  margin: 4px 10px;
  transition: all 0.2s ease-in-out;
}

.sidebar-menu .nav-link:hover {
  background-color: rgba(197, 155, 78, 0.15);
  color: var(--samate-gold);
}

.sidebar-menu .nav-link.active {
  background-color: var(--samate-gold);
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(197, 155, 78, 0.3);
}

.sidebar-menu .nav-link i {
  width: 24px;
  font-size: 1.1rem;
}

/* Version Mobile (Ajustement Responsive) */
@media (max-width: 767.98px) {
  .sidebar-menu {
    min-height: auto !important;
    border-right: none;
    border-bottom: 3px solid var(--samate-gold);
  }
}

/* ======================================================
   RESPONSIVE GLOBAL - GROUPE SAMATÉ
   À AJOUTER EN FIN DE style.css
====================================================== */

/* Amélioration générale */

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  height: auto;
}

table {
  width: 100%;
}

.form-control,
.form-select,
.btn {
  min-height: 42px;
}

/* Cartes */

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  font-weight: 600;
}

/* Tableaux */

.table th {
  white-space: nowrap;
  font-weight: 600;
}

.table td {
  vertical-align: middle;
}

/* Titres */

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.1rem;
}

h6 {
  font-size: 1rem;
}

/* ======================================================
   ÉCRANS XXL
====================================================== */

@media (min-width: 1400px) {
  .container,
  .container-fluid {
    max-width: 1600px;
  }

  body {
    font-size: 16px;
  }
}

/* ======================================================
   LAPTOP
====================================================== */

@media (max-width: 1199.98px) {
  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  .sidebar-menu .nav-link {
    padding: 10px 15px;
  }
}

/* ======================================================
   TABLETTE
====================================================== */

@media (max-width: 991.98px) {
  body {
    font-size: 15px;
  }

  .card {
    margin-bottom: 15px;
  }

  .table-responsive {
    border-radius: 10px;
  }

  h1 {
    font-size: 1.7rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .btn {
    font-size: 0.95rem;
  }

  .sidebar-menu {
    min-height: auto;
  }
}

/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 767.98px) {
  body {
    font-size: 14px;
  }

  .container,
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Sidebar */

  .sidebar-menu {
    min-height: auto !important;
    border-right: none;
    border-bottom: 3px solid var(--samate-gold);
  }

  .sidebar-menu .nav-link {
    padding: 10px;
    margin: 3px;
    font-size: 14px;
  }

  /* Titres */

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  h3 {
    font-size: 1.15rem;
  }

  h4 {
    font-size: 1rem;
  }

  /* Boutons */

  .btn {
    width: auto;
    font-size: 14px;
    padding: 8px 14px;
  }

  /* Formulaires */

  .form-control,
  .form-select {
    font-size: 14px;
    padding: 8px 12px;
  }

  /* Cartes */

  .card-body {
    padding: 1rem;
  }

  /* Badges */

  .badge {
    font-size: 12px;
  }

  /* Tables */

  .table {
    font-size: 13px;
  }

  .table th,
  .table td {
    white-space: nowrap;
  }

  /* Espacements */

  .p-5 {
    padding: 1.5rem !important;
  }

  .p-4 {
    padding: 1rem !important;
  }

  .m-5 {
    margin: 1.5rem !important;
  }

  .m-4 {
    margin: 1rem !important;
  }
}

/* ======================================================
   PETITS SMARTPHONES
====================================================== */

@media (max-width: 575.98px) {
  html {
    font-size: 14px;
  }

  .container,
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  .card {
    border-radius: 10px;
  }

  .card-body {
    padding: 0.85rem;
  }

  h1 {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1.15rem;
  }

  h3 {
    font-size: 1rem;
  }

  .btn {
    font-size: 13px;
  }

  .table {
    font-size: 12px;
  }

  .badge {
    font-size: 11px;
  }
}

/* ======================================================
   IMPRESSION
====================================================== */

@media print {
  .sidebar-menu,
  .btn,
  .navbar,
  .dropdown,
  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}

/* ===== MENU MOBILE LATÉRAL ===== */

@media (max-width: 767.98px) {
  #sidebarMenu {
    position: fixed;
    top: 0;
    left: 0;

    width: 280px;
    height: 100vh;

    z-index: 1050;

    background: var(--samate-blue);

    overflow-y: auto;

    transform: translateX(-100%);
    transition: transform 0.35s ease-in-out;

    border-right: 3px solid var(--samate-gold);

    display: block !important;
  }

  #sidebarMenu.show {
    transform: translateX(0);
  }

  main {
    width: 100% !important;
  }

  /* Fond sombre derrière le menu */

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

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

.text-primary {
  color: var(--samate-blue) !important;
}