/* ============================================================
   Suivi des Parapheurs ISO 9001:2015 — Université de Parakou (DAF)
   Design System avec Menu Latéral Gauche + Impression propre
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root {
  --vert-fonce: #0B6E4F;
  --vert-medium: #12855F;
  --vert-clair: #2EAF82;
  --or: #F2B705;
  --or-clair: #FFF4D1;
  --rouge: #C81D25;
  --rouge-clair: #FDF0F0;
  --encre: #0F1E1B;
  --encre-surface: #192D28;
  --gris-fond: #F4F7F6;
  --gris-card: #FFFFFF;
  --gris-bord: #E2E8E5;
  --texte: #1D2B27;
  --texte-muet: #62716D;
  --blanc: #FFFFFF;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --ombre-sm: 0 2px 8px rgba(15, 30, 27, 0.05);
  --ombre: 0 4px 18px rgba(15, 30, 27, 0.08);
  --ombre-lg: 0 12px 36px rgba(15, 30, 27, 0.12);
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--gris-fond);
  color: var(--texte);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .font-sora {
  font-family: 'Sora', 'Manrope', sans-serif;
  color: var(--encre);
}

a { text-decoration: none; color: inherit; }

/* ================= PAGE D'AUTHENTIFICATION ================= */
.auth-body {
  background: linear-gradient(135deg, var(--encre) 0%, #0A4333 50%, var(--vert-fonce) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.auth-wrapper { width: 100%; max-width: 440px; }
.auth-card {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--ombre-lg);
}
.auth-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.auth-logo {
  max-height: 60px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.print-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--vert-fonce);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}
.print-logo {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* ================= SIDEBAR LAYOUT ================= */
.app-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.sidebar {
  width: 270px;
  background: var(--encre);
  color: #D3E0DC;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1040;
  box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}

.sidebar-header {
  padding: 1.5rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-brand-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--vert-clair), var(--vert-fonce));
  color: #fff;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 4px 12px rgba(46,175,130,0.3);
}

.sidebar-brand-logo {
  width: 44px; height: 44px;
  background: var(--blanc);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.sidebar-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sidebar-brand-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700; font-size: 1rem;
  color: var(--blanc); line-height: 1.2;
}
.sidebar-brand-sub { font-size: 0.72rem; color: #8CA09A; font-weight: 500; }

.sidebar-nav {
  padding: 1.2rem 0.8rem;
  flex: 1;
  overflow-y: auto;
}

.nav-section-label {
  font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #637772;
  padding: 0.8rem 0.8rem 0.4rem;
}

.sidebar-link {
  display: flex; align-items: center; gap: 12px;
  color: #B2C4BE;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem; font-weight: 600;
  margin-bottom: 0.25rem;
  transition: var(--transition);
}

.sidebar-link i {
  font-size: 1.1rem; width: 22px; text-align: center;
  color: #79948D; transition: var(--transition);
}

.sidebar-link:hover { background: rgba(255,255,255,0.08); color: var(--blanc); }
.sidebar-link:hover i { color: var(--or); }

.sidebar-link.active {
  background: var(--vert-fonce);
  color: var(--blanc);
  box-shadow: 0 4px 14px rgba(11,110,79,0.4);
}
.sidebar-link.active i { color: var(--or); }

.sidebar-footer {
  padding: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: var(--encre-surface);
}

.user-avatar-sm {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--vert-fonce); color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
  border: 2px solid rgba(255,255,255,0.2);
}

.user-sidebar-name { font-size: 0.85rem; font-weight: 700; color: var(--blanc); }
.user-sidebar-role { font-size: 0.72rem; color: #8CA09A; }

/* Zone Principale */
.main-wrapper {
  margin-left: 270px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-bord);
  padding: 0.8rem 1.8rem;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1030;
  box-shadow: var(--ombre-sm);
}

.topbar-logo {
  height: 40px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
}

.topbar-title-group { display: flex; align-items: center; gap: 12px; }
.topbar-title-group h1 { font-size: 1.2rem; font-weight: 700; margin: 0; }

.btn-quick-add {
  background: var(--vert-fonce); color: var(--blanc);
  border: none; padding: 0.5rem 1rem; border-radius: 10px;
  font-weight: 600; font-size: 0.88rem;
  display: flex; align-items: center; gap: 8px;
  transition: var(--transition); cursor: pointer;
}
.btn-quick-add:hover {
  background: var(--vert-medium); color: var(--blanc);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(11,110,79,0.25);
}

.page-content { padding: 1.8rem; flex: 1; }

/* ================= CARTES & PANNEAUX ================= */
.card-panel {
  background: var(--blanc);
  border-radius: var(--radius);
  border: 1px solid var(--gris-bord);
  box-shadow: var(--ombre-sm);
  padding: 1.4rem;
  margin-bottom: 1.5rem;
  transition: var(--transition);
}

.stat-card {
  background: var(--blanc);
  border-radius: var(--radius);
  border: 1px solid var(--gris-bord);
  box-shadow: var(--ombre-sm);
  padding: 1.25rem 1.3rem;
  display: flex; align-items: center; gap: 1rem;
  height: 100%;
  transition: var(--transition);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--ombre); }

.stat-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; flex-shrink: 0;
}

.stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.65rem; font-weight: 800;
  line-height: 1; color: var(--encre);
}
.stat-label {
  color: var(--texte-muet); font-size: 0.78rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px;
}

.bg-vert  { background: rgba(11,110,79,0.1);  color: var(--vert-fonce); }
.bg-or    { background: rgba(242,183,5,0.15);  color: #8C6A00; }
.bg-rouge { background: rgba(200,29,37,0.1);   color: var(--rouge); }
.bg-bleu  { background: rgba(30,100,170,0.1);  color: #1E64AA; }
.bg-gris  { background: rgba(98,113,109,0.1);  color: var(--texte-muet); }

/* ================= BADGES ================= */
.badge-statut {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.35rem 0.75rem; border-radius: 50px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}
.badge-statut.vise    { background: #E2F6ED; color: #086043; }
.badge-statut.rejete  { background: #FDE8E9; color: var(--rouge); }
.badge-statut.en-cours { background: #E6F0FA; color: #1E64AA; }

/* Respect du délai */
.badge-delai-oui { background: #E2F6ED; color: #086043; font-weight: 800; font-size: 0.85rem; border-radius: 50px; padding: 0.3rem 0.8rem; }
.badge-delai-non { background: #FDE8E9; color: var(--rouge); font-weight: 800; font-size: 0.85rem; border-radius: 50px; padding: 0.3rem 0.8rem; }

/* ================= TABLEAUX ================= */
.table-parapheurs {
  width: 100%; border-collapse: separate; border-spacing: 0;
}
.table-parapheurs th {
  background: #F8FAFA; color: var(--texte-muet);
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--gris-bord);
}
.table-parapheurs td {
  padding: 0.9rem 1rem; border-bottom: 1px solid var(--gris-bord);
  vertical-align: middle; font-size: 0.88rem;
}
.table-parapheurs tbody tr { transition: var(--transition); }
.table-parapheurs tbody tr:hover { background: #F8FCFA; }

/* ================= PIPELINE ================= */
.pipeline-circle {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px; font-size: 1.1rem;
}
.pipeline-circle.completed { background: var(--vert-fonce); color: #fff; }
.pipeline-circle.current   { background: var(--or); color: var(--encre); box-shadow: 0 0 0 4px rgba(242,183,5,0.25); }
.pipeline-circle.pending   { background: #EAEFEF; color: #8EA09A; }
.pipeline-step             { text-align: center; flex: 1; }

/* ================= BOUTONS ================= */
.btn-primary-vert {
  background: var(--vert-fonce); color: var(--blanc);
  border: none; border-radius: 10px; padding: 0.55rem 1.2rem;
  font-weight: 600; transition: var(--transition); cursor: pointer;
}
.btn-primary-vert:hover { background: var(--vert-medium); color: var(--blanc); }

.btn-transmission {
  background: linear-gradient(135deg, #1E64AA, #1a55a0);
  color: #fff; border: none; border-radius: 10px;
  padding: 0.55rem 1.2rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  transition: var(--transition); cursor: pointer;
}
.btn-transmission:hover { background: linear-gradient(135deg, #1a55a0, #153f80); color: #fff; transform: translateY(-1px); }

/* ================= GESTION UTILISATEURS ================= */
.badge-utilisateur-actif {
  display: inline-flex; align-items: center; gap: 5px;
  background: #E2F6ED; color: #086043;
  font-weight: 700; font-size: 0.82rem;
  border-radius: 50px; padding: 0.3rem 0.85rem;
}
.badge-utilisateur-inactif {
  display: inline-flex; align-items: center; gap: 5px;
  background: #FDE8E9; color: var(--rouge);
  font-weight: 700; font-size: 0.82rem;
  border-radius: 50px; padding: 0.3rem 0.85rem;
}
.row-inactif { opacity: 0.55; }
.row-inactif:hover { opacity: 0.8; }

/* Avatar placeholder large (profil) */
.avatar-large {
  width: 80px; height: 80px; border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--vert-clair);
}
.avatar-placeholder-large {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--vert-fonce); color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700;
  border: 3px solid rgba(46,175,130,0.3);
}

/* ================= RESPONSIVE DESIGN ================= */
.sidebar-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 30, 27, 0.6);
  backdrop-filter: blur(2px);
  z-index: 1039;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

.sidebar-toggle {
  background: transparent;
  border: 1px solid var(--gris-bord);
  border-radius: var(--radius-sm);
  color: var(--encre);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition);
}

.sidebar-toggle:hover {
  background: var(--gris-fond);
  color: var(--vert-fonce);
}

.sidebar-close-btn {
  background: transparent;
  border: none;
  color: #8CA09A;
  font-size: 1.25rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  margin-left: auto;
  cursor: pointer;
  border-radius: 6px;
  transition: var(--transition);
}

.sidebar-close-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--blanc);
}

@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 280px;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-wrapper {
    margin-left: 0 !important;
  }

  .topbar {
    padding: 0.75rem 1rem;
  }

  .topbar-title-group h1 {
    font-size: 1rem;
  }

  .topbar-logo {
    height: 32px;
  }

  .page-content {
    padding: 1rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .filter-bar {
    padding: 0.9rem;
  }
}

@media (max-width: 575.98px) {
  .auth-card {
    padding: 1.75rem 1.25rem;
  }

  .auth-logo {
    max-height: 48px;
  }

  .stat-value {
    font-size: 1.35rem;
  }

  .stat-icon {
    width: 44px; height: 44px;
    font-size: 1.1rem;
  }

  .table-parapheurs th, .table-parapheurs td {
    padding: 0.65rem 0.75rem;
    font-size: 0.82rem;
  }
}

/* ================= ZONE IMPRESSION ================= */
@media print {
  body * { visibility: hidden; }

  .sidebar, .topbar, .no-print,
  .btn, button, form, nav, header,
  .alert { display: none !important; }

  #zone-impression, #zone-impression * {
    visibility: visible;
  }

  #zone-impression {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    padding: 20px;
    font-family: Arial, sans-serif;
    font-size: 11pt;
    color: #000;
  }

  .print-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 2px solid #0B6E4F !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
  }

  .print-logo {
    max-height: 65px !important;
    width: auto !important;
  }

  #zone-impression .card-panel {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    page-break-inside: avoid;
  }

  #zone-impression .badge-statut,
  #zone-impression .badge-delai-oui,
  #zone-impression .badge-delai-non {
    border: 1px solid #aaa !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
  }

  #zone-impression table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  #zone-impression table th,
  #zone-impression table td {
    border: 1px solid #ccc !important;
    padding: 6px 8px !important;
    font-size: 10pt !important;
  }
}