/* Mobile styles - Styles de base pour les petits écrans */
img {
    max-width: 100px; /* Taille réduite sur mobile */
    height: auto;
}

.new {
    color: white;
    background-color: #6c757d;
    margin-bottom: 20px;
}

.new1 {
    background-color: #20cbd1;
}

.animation-container {
    position: relative;
    width: 100vw; /* Prend toute la largeur de la fenêtre */
    height: 20vh; /* Hauteur pour visibilité sur mobile */
}

.animated-image {
    position: absolute;
    width: 30px; /* Taille ajustée pour mobile */
    animation: move 10s linear infinite;
}

/* Couleur des stocks */
.orange {
    color: orange;
}

.red {
    color: red;
}

/* Animation Keyframes */
@keyframes move {
    0% {
        left: 0;
        transform: rotate(0deg);
    }
    10% {
        left: 10%;
        transform: rotate(90deg);
    }
    20% {
        left: 20%;
        transform: rotate(180deg);
    }
    30% {
        left: 30%;
        transform: rotate(270deg);
    }
    40% {
        left: 40%;
        transform: rotate(360deg);
    }
    50% {
        left: 50%;
        transform: rotate(450deg);
    }
    60% {
        left: 60%;
        transform: rotate(540deg);
    }
    70% {
        left: 70%;
        transform: rotate(630deg);
    }
    80% {
        left: 80%;
        transform: rotate(720deg);
    }
    90% {
        left: 90%;
        transform: rotate(810deg);
    }
    100% {
        left: 100%;
        transform: rotate(900deg);
    }
}

/* Styles pour les tableaux défilables */
.table-responsive {
    overflow-x: auto; /* Active le défilement horizontal si le contenu dépasse */
    -webkit-overflow-scrolling: touch; /* Permet un défilement fluide */
}

.table-responsive table {
    width: 100%; /* Le tableau prend toute la largeur du conteneur */
    border-collapse: collapse; /* Fusionne les bordures */
}

.table-responsive th, .table-responsive td {
    white-space: nowrap; /* Évite le retour à la ligne du texte dans les cellules */
    padding: 8px;
}

.table-responsive tr[style*="background-color: red"] {
    background-color: white !important; /* Fond rouge pour le stock épuisé */
    color: red; 
}

.table-responsive tr[style*="background-color: orange"] {
    background-color: white !important; /* Fond orange pour le stock critique */
    color: orange;
}

/* Styles pour le message de bienvenue */
.welcome-container {
    background-color: #f4f4f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 15px;
    display: flex; /* Utilisation de flexbox pour aligner les éléments sur une ligne */
    justify-content: space-between; /* Séparation entre le nom/prénom et le service */
    font-family: 'Bookman', serif; /* Police Bookman */
    align-items: center; /* Centrage vertical */
}

.welcome-message {
    font-size: 1.5em;
    color: #333;
    margin-right: 10px; /* Espace entre le message et le service */
}

.welcome-text {
    color: #20cbd1;
    font-weight: bold;
}

.user-name {
    color: #2c3e50;
    font-size: 1.2em;
}

.service-label {
    font-size: 1.1em;
    color: #7f8c8d;
}

.service-name {
    color: #27ae60;
    font-weight: bold;
}

.container-fluid {
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2.display-4 {
    color: #007bff;
    font-size: 2em;
}

h3 {
    color: #333;
    margin-top: 20px;
    padding-left: 10px;
}

p.lead {
    font-size: 1.2rem;
    color: #555;
}

.accordion .card {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.accordion .card-header {
    background-color: #007bff;
    color: white;
}

.accordion .btn-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

.accordion .card-body {
    background-color: #f1f1f1;
    padding: 15px;
    font-size: 1rem;
}

.accordion .collapse.show {
    transition: height 0.35s ease;
}

.accordion .collapse:not(.show) {
    display: none;
}

ul, ol {
    list-style-type: none; /* Supprime les puces ou numéros */
    padding: 0; /* Supprime le retrait par défaut */
    margin: 0; /* Supprime les marges par défaut */
}

/* CALENDRIER */

.event-day {
    background-color: #9D2933 !important; /* Rouge foncé */
    color: white;
    font-weight: bold;
    border-radius: 5px;
    padding: 5px;
}

.calendar-month {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.calendar .row {
    display: flex;
    flex-wrap: wrap;
}

.calendar .col {
    width: calc(100% / 7);
    min-height: 60px;
    display: grid;
    align-items: center;
    justify-content: center;
    position: relative;
}

.calendar2 .col {
    width: calc(100% / 7);
    min-height: 60px;
    display: block;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 120px;
}

.event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin: 2px;
}

.invisible {
    visibility: hidden;
}

.events {
    display: block;
    padding: 5px;
    border-radius: 5px;
    margin-top: 3px;
    text-align: center;
    font-size: 10px;
}

.event-legend .color-box {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.event-item {
    padding: 10px;
    border-radius: 5px;
    font-size: 0.9rem;
}
/* .card {
    min-height: 180px;
} */

.legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 5px;
}

/* Mise en page calendrier accueil */
#events-today {
    border: 2px solid #ccc;
    padding: 15px;
    border-radius: 10px;
    background-color: #f9f9f9;
    max-width: 400px;
    margin: 0 auto;
    margin-left: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#events-today h4 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 10px;
}

#events-today ul {
    list-style-type: none;
    padding-left: 0;
}

#events-today ul li {
    font-size: 0.9rem;
    background-color: #e8f4f8;
    border: 1px solid #ddd;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 5px;
    color: #333;
}

#events-today ul li:last-child {
    margin-bottom: 0;
}

#events-today p {
    font-size: 1rem;
    color: #777;
    margin-top: 10px;
}




/* Styles pour les écrans moyens (tablettes) */
@media (min-width: 768px) and (max-width: 1024px) {
    img {
        max-width: 120px; /* Taille légèrement augmentée */
    }

    .animation-container {
        width: 90vw; /* Réduction de largeur pour écrans moyens */
        height: 15vh;
    }

    .animated-image {
        width: 40px; /* Taille augmentée */
    }

    .table-responsive {
        margin: 0 10px; /* Ajoute des marges pour les tablettes */
    }

    .table-responsive th, .table-responsive td {
        padding: 12px; /* Augmente le padding pour une meilleure lisibilité */
    }

    /* Adaptation de l'élément de bienvenue pour les tablettes */
    .welcome-container {
        padding: 15px;
    }

    .welcome-message {
        font-size: 1.3em;
    }
}

/* Styles pour les grands écrans */
@media (min-width: 1024px) {
    .animation-container {
        width: 80vw; /* Réduction supplémentaire de largeur */
        height: 10vh;
    }

    /* Adaptation de l'élément de bienvenue pour les grands écrans */
    .welcome-container {
        padding: 25px;
    }

    .welcome-message {
        font-size: 1em;
    }
}

/* Police personnalisée */
body {
    font-family: "Open Sans", sans-serif;

    background-color: #f8f9fa;
}

/* Style général de la barre de navigation */
.navbar {
    background-color: #007bff; /* Couleur de fond bleu pour la navbar */
    border-radius: 5px;
    padding: 0.5rem 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Logo dans la barre de navigation */
#img {
    width: 100px;
    height: auto;
}

/* Titre centré */
.navbar h3 {
    font-size: 2,2rem;
    font-weight: bold;
    color: rgb(22, 161, 179);
}

/* Style des liens dans la navigation */
.navbar-nav .nav-link {
    color: white !important;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Effet de survol sur les liens de navigation */
.navbar-nav .nav-link:hover {
    background-color: #9ea3aa;
    transform: scale(1.05);
}

/* Effet de survol pour les éléments du dropdown */
.navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: #0056b3;
    color: white;
}

/* Style du conteneur des services et utilisateur */
.welcome-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.welcome-text, .service-label {
    font-size: 1.2rem;
    font-weight: bold;
}

.user-name, .service-name {
    font-size: 1.2rem;
    color: #007bff;
}

/* Séparation entre "Accueil" et "Déconnexion" dans le menu */
.navbar-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-nav li:last-child {
    border-bottom: none;
}

/* Style de la deuxième barre de navigation (par exemple pour le stock et les commandes) */
.navbar-light.bg-light {
    background-color: #f8f9fa !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Espacement des éléments dans la barre de navigation secondaire */
.navbar-nav .nav-item {
    margin: 0 15px;
}

/* ==================== PS LAYOUT — propre & unifié ==================== */
/* Variables */
:root {
  --ps-sidebar-width: 260px;
  --ps-topbar-height: 64px;
  --ps-bg: #ffffff;
  --ps-border: #e6e8ee;
  --ps-text: #222;
  --ps-muted: #6c757d;
  --ps-active-bg: #111;
  --ps-active-fg: #fff;
}

/* App layout (desktop par défaut) */
.ps-app{
  display:grid;
  grid-template-columns: var(--ps-sidebar-width) 1fr;
  min-height:100vh;
  background:#f8f9fa;
}

/* Sidebar (desktop) */
.ps-sidebar{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  background: var(--ps-bg);
  border-right:1px solid var(--ps-border);
  color: var(--ps-text);
  z-index: 10;
}

.ps-sidebar__brand{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--ps-border);
}
.ps-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.ps-brand__logo{ width:32px; height:32px; border-radius:8px; object-fit:cover; }
.ps-brand__name{ font-weight:700; letter-spacing:.2px; color:#111; }
.ps-sidebar__toggle{ appearance:none; border:0; background:transparent; cursor:pointer; font-size:18px; }

.ps-user{ display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--ps-border); }
.ps-user__avatar{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#f2f3f6; }
.ps-user__name{ font-weight:600; color:#111; }
.ps-user__role{ font-size:12px; color: var(--ps-muted); }

.ps-nav{
  flex:1 1 auto; overflow:auto; padding:10px 8px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.ps-nav__section{
  margin:10px 8px 4px; font-size:11px; color: var(--ps-muted);
  text-transform:uppercase; letter-spacing:.8px;
}
.ps-nav__item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  text-decoration:none; color: var(--ps-text); border:1px solid transparent;
  transition: background .16s ease, border .16s ease, transform .16s ease;
  white-space:nowrap;
}
.ps-nav__item i{ width:18px; text-align:center; font-size:14px; }
.ps-nav__item:hover{ background:#f6f6f6; transform: translateY(-1px); }
.ps-nav__item.is-active{ background: var(--ps-active-bg); color: var(--ps-active-fg); }

.ps-sidebar__footer{
  border-top:1px solid var(--ps-border); padding:10px 14px; background:#fafafa;
}

/* Main area */
.ps-main{ display:flex; flex-direction:column; min-width:0; }
.ps-topinfo{ background:#fff; border-bottom:1px solid var(--ps-border); padding:10px 16px; }
.ps-topinfo__left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ps-muted{ color: var(--ps-muted); }
.ps-marquee{ display:flex; gap:18px; overflow:auto; white-space:nowrap; scrollbar-width:none; }
.ps-marquee::-webkit-scrollbar{ display:none; }
.ps-marquee__item{ padding:3px 8px; border-radius:999px; background:#eef2ff; border:1px solid #c7d2fe; font-size:13px; }

.ps-content{ padding:20px; }
.ps-footer{ margin-top:auto; padding:14px 20px; color: var(--ps-muted); border-top:1px solid var(--ps-border); background:#fff; }

/* Sidebar repliée (desktop) */
.ps-sidebar.is-collapsed { width:80px; }
.ps-sidebar.is-collapsed .ps-brand__name,
.ps-sidebar.is-collapsed .ps-user__meta,
.ps-sidebar.is-collapsed .ps-nav__item span,
.ps-sidebar.is-collapsed .ps-nav__section{ display:none; }

/* ======== MENU BURGER (mobile) — drawer plein écran (UNIFIÉ) ======== */
@media (max-width: 767.98px){
  :root{ --ps-topbar-height: 56px; }

  /* Layout: 1 colonne */
  .ps-app{ grid-template-columns: 1fr; }

  /* Barre supérieure compacte */
  .ps-sidebar{
    position:fixed; top:0; left:0; right:0; height: var(--ps-topbar-height);
    display:flex; align-items:center; gap:8px; padding:0 10px;
    background:#fff; border-bottom:1px solid #e6e8ee; z-index: 1001;
    width:100% !important; /* neutralise tout état collapsed */
  }
  .ps-sidebar__brand{ padding:0; border:0; margin-right:6px; }
  .ps-brand__logo{ width:28px; height:28px; }
  .ps-brand__name{ display:none !important; }
  .ps-user{ display:none; }            /* visible dans le drawer */
  .ps-sidebar__footer{ display:none; } /* visible dans le drawer */

  /* Contenu poussé sous la barre */
  .ps-main{ margin-top: calc(var(--ps-topbar-height) + 1px); }

  /* Drawer (nav verticale) — masqué par défaut */
  .ps-nav{
    position: fixed;
    top: var(--ps-topbar-height);
    left: 0; right: 0; bottom: 0;
    display: none;
    flex-direction: column; gap: 6px;
    padding: 12px 12px 80px; /* espace bas pour footer */
    background: #fff; border-top:1px solid #e6e8ee;
    overflow-y: auto; z-index: 1000;
  }

  /* OUVERTURE du menu (classe posée en JS) */
  .ps-sidebar.is-menu-open .ps-nav{ display:flex; }
  body.menu-open{ overflow:hidden; } /* lock scroll fond */

  /* User + Footer visibles DANS le drawer quand ouvert */
  .ps-sidebar.is-menu-open .ps-user{
    display:flex; align-items:center; gap:10px;
    padding: 8px 12px 12px; border-bottom:1px solid #e6e8ee; background:#fff;
  }
  .ps-sidebar.is-menu-open .ps-sidebar__footer{
    display:block; position: sticky; bottom:0; left:0; right:0;
    padding: 12px; border-top:1px solid #e6e8ee; background:#fafafa;
  }

  /* Items */
  .ps-nav__section{ display:none; } /* sections masquées sur mobile */
  .ps-nav__item{ padding:12px 12px; border-radius:10px; font-size:1rem; }

  /* Neutraliser totalement le "collapsed" sur mobile */
  .ps-sidebar.is-collapsed{ width:100% !important; }
  .ps-sidebar.is-collapsed .ps-nav__item span,
  .ps-sidebar.is-collapsed .ps-user__meta{ display:initial !important; }
}

/* Accessibilité focus */
.ps-nav__item:focus{ outline:2px solid #9ab0ff; outline-offset:2px; }

/* === Patch: remettre "Déconnexion" visible dans le tiroir mobile === */
@media (max-width: 767.98px){
  /* Par défaut caché dans la topbar */
  .ps-sidebar__footer{ display:none; }

  /* Quand le menu est ouvert, on l’affiche en bas en fixe */
  .ps-sidebar.is-menu-open .ps-sidebar__footer{
    display:block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fafafa;
    border-top: 1px solid #e6e8ee;
    padding: 12px 12px calc(env(safe-area-inset-bottom) + 12px);
    z-index: 1002; /* au-dessus du tiroir */
  }

  /* On ajoute de l’espace en bas du tiroir pour ne pas masquer des items */
  .ps-sidebar.is-menu-open .ps-nav{
    padding-bottom: 96px; /* réserve pour le footer fixe */
  }

  /* Style du lien de déconnexion dans le footer */
  .ps-sidebar__footer .ps-nav__item{
    display:flex; justify-content:center; align-items:center;
    border-radius: 999px;
  }
}

/* === Patch: agrandir topbar, logo et bouton burger sur mobile === */
@media (max-width: 767.98px){
  :root{
    --ps-topbar-height: 70px; /* plus haute qu'avant (56px) */
  }

  /* Topbar plus grande */
  .ps-sidebar{
    height: var(--ps-topbar-height);
    padding: 0 14px;
  }

  /* Logo plus large */
  .ps-brand__logo{
    width: 40px !important;
    height: 40px !important;
  }

  /* Bouton ☰ plus gros */
  #psSidebarToggle{
    font-size: 26px !important;   /* taille de l’icône */
    padding: 8px 10px;            /* zone cliquable plus grande */
  }

  /* Ajuster le décalage du contenu sous la topbar */
  .ps-main{
    margin-top: calc(var(--ps-topbar-height) + 5px);
  }
}


/* Responsive */
@media (max-width: 992px){
  :root { --ps-sidebar-width: 80px; }
  .ps-sidebar { width: var(--ps-sidebar-width); }
}


/* --------- embellissements page stock --------- */
.font-weight-semibold { font-weight: 600; }
.ps-table th, .ps-table td { vertical-align: middle; }
.ps-table tbody tr:hover { background: #f7f9fc; }

.ps-dot {
  width: 10px; height: 10px; border-radius: 50%; display:inline-block; flex:0 0 10px;
  border: 1px solid rgba(0,0,0,.05);
}
.ps-dot--ok     { background: #28a745; }
.ps-dot--warn   { background: #ffc107; }
.ps-dot--danger { background: #dc3545; }

.ps-toolbar .btn.active {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* Style pour recherche article */
#article-select {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
#article-meta {
  font-size: .9rem;
}