.bi {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

/*
 * Sidebar
 */

@media (min-width: 768px) {
  .sidebar .offcanvas-lg {
    position: -webkit-sticky;
    position: sticky;
    top: 48px;
  }
  .navbar-search {
    display: block;
  }
}

.sidebar .nav-link {
  font-size: .875rem;
  font-weight: 500;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar-heading {
  font-size: .75rem;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
  padding: .75rem 1rem;
}


/* Sidebar toujours pleine hauteur */
html, body {
  height: 100%;
}

.container-fluid > .row {
  min-height: 100vh; /* toute la page prend la hauteur de l'écran */
}

/* Colonne de gauche */
.sidebar {
  min-height: 100vh;          /* colonne pleine hauteur */
  background-color: #111827;  /* optionnel : fond plus foncé type Makuta */
}

/* Intérieur de la sidebar en colonne */
.sidebar .offcanvas-body {
  display: flex;
  flex-direction: column;
}

/* Footer collé en bas de la sidebar */
.sidebar-footer {
  margin-top: auto;               /* pousse le footer en bas */
  font-size: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  color: #9ca3af;                 /* texte gris clair */
}
.sidebar-footer strong {
  font-weight: 600;
}

/* La ligne qui contient sidebar + main doit prendre la hauteur */
.app-main > .row {
  min-height: calc(100vh - 56px); /* 56px ≃ hauteur de la navbar top */
}

/* Le body prend la hauteur de l'écran */
html, body {
  height: 100%;
  margin: 0;
}

/* Le main (zone contenu) gère le footer collé en bas */
.page-main {
  min-height: 100%; /* ~ hauteur de la navbar top */
  display: flex;
  flex-direction: column;
}

/* Contenu scrolable, avant le footer */
.page-main-content {
  flex: 1 0 auto;
}

/* Sidebar toujours longue */
.sidebar {
  min-height: 100%;
}

/* Footer seulement sous le contenu principal */
.app-footer {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  color: #9ca3af;
  text-align: right; /* tu peux mettre left/center si tu veux */
}
.app-footer {
  font-size: 0.8rem;
}

.brand-logo {
  max-height: 38px;     /* ajuste 28–40px selon ce que tu préfères */
  height: auto;
  width: auto;
  object-fit: contain;
}

/* Optionnel : éviter que le logo “pousse” trop la navbar */
.navbar-brand {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.invoice-preview-panel {
  height: 480px;          /* hauteur de la zone de prévisualisation */
  max-height: 60vh;
}

.invoice-preview-panel iframe {
  width: 100%;
  height: 100%;
  border: 0;
}