/* style.css */

/* ==========================================================================
   CSS VARIABLES FOR PREMIUM MODERN THEME
   ========================================================================== */
:root {
    /* Primary Colors - Sleek Indigo/Teal blend for a tech/solar vibe */
    --primary-color: #0f172a;
    /* Deep Slate (Headers/Sidebar) */
    --primary-light: #1e293b;
    /* Lighter Slate */
    --accent-color: #0284c7;
    /* Vibrant Cyan/Teal (Buttons, Links) */
    --accent-hover: #0369a1;
    /* Darker Cyan for hover */
    --accent-glow: rgba(2, 132, 199, 0.4);

    /* Backgrounds */
    --bg-main: #f8fafc;
    /* Very light cool gray for main canvas */
    --bg-surface: #ffffff;
    /* Clean white for cards/panels */

    /* Sidebar Specific */
    --sidebar-bg: var(--primary-color);
    --sidebar-text: #cbd5e1;
    --sidebar-text-hover: #f1f5f9;
    --sidebar-item-hover: rgba(255, 255, 255, 0.05);
    --sidebar-item-active: rgba(2, 132, 199, 0.15);
    --sidebar-border: #1e293b;

    /* Text Colors */
    --text-main: #334155;
    --text-muted: #64748b;
    --text-dark: #0f172a;

    /* Borders & Shadows */
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

/* Polices personnalisées */
body {
    font-family: 'Poppins', 'Tajawal', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* Page de connexion */
.login-body {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e3a8a 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Formes floues en arrière plan pour un effet glassmorphism premium */
.login-body::before,
.login-body::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
}

.login-body::before {
    background: rgba(2, 132, 199, 0.4);
    top: -50px;
    left: -50px;
}

.login-body::after {
    background: rgba(56, 189, 248, 0.3);
    bottom: -50px;
    right: -50px;
}

.login-card {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.5rem;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    z-index: 1;
    /* Au dessus des formes floues */
    position: relative;
}

.login-header {
    font-weight: 800;
    color: var(--text-dark);
    font-size: 1.8rem;
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
}

/* Inputs Premium sur la page de login */
.login-form-control {
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    background-color: #f8fafc;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.login-form-control:focus {
    background-color: #ffffff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.login-btn {
    border-radius: 0.75rem;
    padding: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
    background: linear-gradient(to right, var(--accent-color), var(--accent-hover));
    border: none;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.4);
}

.language-switcher-login {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 2;
}

[dir="rtl"] .language-switcher-login {
    right: auto;
    left: 1rem;
}


/* Layout principal (Dashboard) */
#wrapper {
    overflow-x: hidden;
}

#sidebar-wrapper {
    min-height: 100vh;
    margin-left: -15rem;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
    padding: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff !important;
    background-color: var(--sidebar-bg);
    /* Enforce dark bg */
    border-bottom: 1px solid var(--sidebar-border) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar-wrapper {
    background-color: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-border) !important;
}

#sidebar-wrapper .list-group {
    width: 15rem;
    background-color: transparent !important;
}

/* Base style for sidebar items */
#sidebar-wrapper .list-group-item {
    background-color: transparent !important;
    color: var(--sidebar-text) !important;
    border: none;
    border-left: 4px solid transparent !important;
    padding: 0.8rem 1rem;
    margin: 0.2rem 0.8rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.95rem;
    width: calc(100% - 1.6rem);
    /* Empêche le débordement dû aux marges */
}

#page-content-wrapper {
    min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

/* RTL Support pour la sidebar */
[dir="rtl"] #sidebar-wrapper {
    margin-left: 0;
    margin-right: -15rem;
}

[dir="rtl"] #wrapper.toggled #sidebar-wrapper {
    margin-right: 0;
}

[dir="rtl"] #page-content-wrapper {
    margin-right: 0;
}

[dir="rtl"] #wrapper.toggled #page-content-wrapper {
    margin-right: 15rem;
}


@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem;
    }

    /* RTL Support pour la sidebar sur grands écrans */
    [dir="rtl"] #sidebar-wrapper {
        margin-left: 0;
        margin-right: 0;
    }

    [dir="rtl"] #wrapper.toggled #sidebar-wrapper {
        margin-right: -15rem;
    }
}

/* ... (code CSS existant) ... */

/* Style pour le contenu principal de l'application */
#page-content-wrapper .container-fluid {
    background-color: var(--bg-main) !important;
    min-height: calc(100vh - 56px);
    /* 100% de la hauteur moins la navbar */
}

/* Style des cartes de statistiques */
.stat-card {
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-lg) !important;
}

.stat-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* ... (code CSS existant) ... */

/* Correction pour la navbar sticky-top pour qu'elle ne soit pas sous la sidebar */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
    /* z-index standard de Bootstrap pour les navbars */
}

/* Offcanvas pour la recherche */
.offcanvas-top {
    height: auto;
}

/* Ajustement navbar sur mobile */
.navbar .dropdown-toggle::after {
    /* Cache la petite flèche du dropdown sur mobile pour gagner de la place */
    display: none;
}

@media (min-width: 992px) {
    .navbar .dropdown-toggle::after {
        /* La réaffiche sur grand écran */
        display: inline-block;
    }
}

#sidebar-wrapper {
    min-height: 100vh;
    margin-left: -15rem;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
    /* On ajoute un z-index pour qu'elle passe au-dessus du contenu si besoin */
    z-index: 1030;
}

#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
    font-weight: bold;
}

#sidebar-wrapper .list-group {
    width: 15rem;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

/* RTL Support pour la sidebar */
[dir="rtl"] #sidebar-wrapper {
    margin-left: 0;
    margin-right: -15rem;
}

[dir="rtl"] #wrapper.toggled #sidebar-wrapper {
    margin-right: 0;
}


@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem;
    }

    /* RTL Support pour la sidebar sur grands écrans */
    [dir="rtl"] #sidebar-wrapper {
        margin-left: 0;
        margin-right: 0;
    }

    [dir="rtl"] #wrapper.toggled #sidebar-wrapper {
        margin-right: -15rem;
    }
}


/* Style pour le contenu principal de l'application */
#page-content-wrapper {
    flex-grow: 1;
    /* Permet au contenu de prendre la place restante */
    background-color: var(--bg-main) !important;
}

#page-content-wrapper .container-fluid {
    background-color: transparent !important;
    min-height: calc(100vh - 110px);
    /* 100% de la hauteur moins la navbar ET le footer */
}

/* Style des cartes de statistiques */
/* ... (stat-card, stat-card-icon inchangés) ... */

/* La navbar est sticky en haut du .page-container */
.navbar {
    background-color: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm);
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

#sidebar-wrapper .list-group-item.active {
    background-color: var(--sidebar-item-active) !important;
    color: var(--accent-color) !important;
    border-left: 4px solid var(--accent-color) !important;
    font-weight: 600;
}

#sidebar-wrapper .list-group-item:focus,
#sidebar-wrapper .list-group-item:hover {
    background-color: var(--sidebar-item-hover) !important;
    color: var(--sidebar-text-hover) !important;
}

/* ... (CSS existant) ... */

/**
 * Notre règle d'or pour le bilinguisme : les chiffres restent LTR.
 * Cette classe utilitaire nous permet de forcer la direction et l'alignement
 * pour les nombres, les dates, et les références (SKU, N° de facture)
 * afin qu'ils soient toujours lisibles, même dans une interface RTL (Arabe).
 */
.force-ltr {
    direction: ltr;
    text-align: right;
    /* En RTL, les cellules de droite doivent rester alignées à droite */
}

/* On ajuste pour que l'alignement gauche reste à gauche en RTL */
[dir="rtl"] .force-ltr.text-start {
    text-align: left;
}

[dir="rtl"] .table .force-ltr {
    text-align: left;
    /* Par défaut dans un tableau, on aligne à gauche */
}

[dir="rtl"] .table .text-end .force-ltr {
    text-align: right;
    /* Sauf si la colonne est déjà alignée à droite */
}

/* ... (CSS existant) ... */

/**
 * Notre amélioration pour la sidebar : un indicateur d'ouverture/fermeture.
 * Nous créons un conteneur flexible sur le lien pour aligner facilement
 * le texte et notre nouvel indicateur.
 */
#sidebar-wrapper .list-group-item[data-bs-toggle="collapse"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/**
 * L'indicateur lui-même.
 * C'est un simple span que nous stylisons.
 * Nous ajoutons une transition pour un effet de rotation fluide.
 */
#sidebar-wrapper .menu-indicator {
    font-size: 1.2em;
    /* Un peu plus grand pour être bien visible */
    transition: transform 0.25s ease-in-out;
}

/**
 * La magie du CSS : quand le lien n'est PAS "collapsed" (donc, quand le sous-menu est ouvert),
 * nous faisons tourner l'indicateur de 45 degrés pour transformer le '+' en 'x' ou '–'.
 * L'attribut aria-expanded="true" est géré automatiquement par Bootstrap.
 */
#sidebar-wrapper .list-group-item[aria-expanded="true"] .menu-indicator {
    transform: rotate(45deg);
}

/* ========================================================== */
/* --- STYLE POUR LES IMAGES DANS LA LISTE DES PRODUITS --- */
/* ========================================================== */


.product-list-img,
.product-list-placeholder {
    width: 75px;
    height: 75px;
    border-radius: 5px;
    /* Bords légèrement arrondis */
    object-fit: cover;
    /* Recadre l'image pour qu'elle remplisse l'espace */
    transition: transform 0.2s ease-in-out;
}

.product-list-img:hover {
    transform: scale(1.1);
    /* Effet de zoom léger au survol */
    cursor: pointer;
}

.product-list-placeholder {
    background-color: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

/* ... (styles existants) ... */

/* ========================================================== */
/* --- STYLE AMÉLIORÉ POUR LES TABLES DE DONNÉES & PAGINATION --- */
/* ========================================================== */

/* Nous enveloppons la table dans une card pour un meilleur rendu visuel */
.table-container-card {
    border: none;
    /* Supprime la bordure par défaut de la card */
}

.table-responsive {
    /* Ajoute une ombre intérieure subtile quand on peut scroller horizontalement */
    background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
        radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, 100%, 0 0, 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Style général de la table */
.table {
    margin-bottom: 0;
    /* Important quand la table est dans une card */
    color: var(--text-main);
}

/* En-tête de la table */
.table thead.table-light th {
    font-weight: 600;
    color: var(--text-dark);
    background-color: #f1f5f9;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    /* Empêche le retour à la ligne des titres */
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Lignes de la table */
.table tbody tr:hover {
    background-color: rgba(2, 132, 199, 0.04);
    /* Couleur de survol subtile basée sur primary */
}

.table td {
    vertical-align: middle;
    /* Aligne tout le contenu verticalement */
}

/* Pagination Intelligente */
.pagination .page-item .page-link {
    border-radius: 0.375rem;
    margin: 0 4px;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-weight: 500;
    transition: all 0.2s;
}

.pagination .page-item.active .page-link {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    box-shadow: 0 4px 6px -1px var(--accent-glow);
}

.pagination .page-item.disabled .page-link {
    background-color: transparent;
    color: #6c757d;
}

.pagination .page-item .page-link:hover {
    background-color: var(--border-color);
    color: var(--text-dark);
}

.pagination .page-item.active .page-link:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Style pour les "..." de la pagination */
.pagination .page-item.dots .page-link {
    background-color: transparent;
    color: #6c757d;
}

.pagination .page-item.dots .page-link:hover {
    background-color: transparent;
}

/* Style du déclencheur dans la navbar */
.global-search-bar {
    background-color: #f1f3f5;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.375rem 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 250px;
    transition: all 0.2s ease-in-out;
}

.global-search-bar:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
}

.global-search-bar .placeholder-text {
    color: #6c757d;
}

.global-search-bar .keyboard-shortcut {
    margin-left: auto;
    font-size: 0.75em;
    padding: 0.2em 0.5em;
    border: 1px solid #adb5bd;
    border-radius: 3px;
    color: #495057;
}

/* Style de la modale de recherche */
#globalSearchModal .modal-content {
    background-color: #f8f9fa;
    border: none;
}

#globalSearchModal .search-input-container {
    position: relative;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

#globalSearchModal .search-input-container .search-icon {
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    color: #6c757d;
}

#globalSearchModal #global-search-input {
    border: none;
    background-color: transparent;
    padding-left: 3rem;
    box-shadow: none !important;
}

#globalSearchModal #search-spinner {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
}

/* Style des résultats */
.search-results-category {
    margin-bottom: 1.5rem;
}

.search-results-header {
    font-size: 0.8rem;
    font-weight: bold;
    color: #6c757d;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.1s ease-in-out;
    text-decoration: none;
    color: inherit;
}

.search-result-item:hover {
    background-color: #e9ecef;
}

.result-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dee2e6;
    color: #495057;
    border-radius: 5px;
}

.result-details {
    overflow: hidden;
}

.result-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-subtitle {
    font-size: 0.85rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Styles pour l'Assistant de Gestion Intelligent */
.assistant-fab {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    transition: transform 0.2s ease-in-out;
}

.assistant-fab:hover {
    transform: scale(1.1);
}

.assistant-chat-window {
    position: fixed;
    bottom: 100px;
    right: 25px;
    width: 370px;
    max-width: 90vw;
    height: 500px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    z-index: 1049;
    transform: scale(0.5) translateY(100px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.assistant-chat-window.open {
    transform: scale(1) translateY(0);
    opacity: 1;
    visibility: visible;
}

.assistant-header {
    background-color: #0d6efd;
    color: white;
    padding: 10px 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assistant-title {
    font-weight: bold;
}

.assistant-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.8;
}

.assistant-close:hover {
    opacity: 1;
}

.assistant-body {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #f1f3f5;
}

.assistant-message {
    margin-bottom: 10px;
    display: flex;
}

.assistant-message.user {
    justify-content: flex-end;
}

.assistant-message .message-content {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 15px;
}

.assistant-message.assistant .message-content {
    background-color: #ffffff;
    border-bottom-left-radius: 2px;
}

.assistant-message.user .message-content {
    background-color: #dcf8c6;
    border-bottom-right-radius: 2px;
}

.assistant-footer {
    padding: 10px;
    display: flex;
    border-top: 1px solid #dee2e6;
}

#assistant-input {
    flex-grow: 1;
    border: 1px solid #ced4da;
    border-radius: 20px;
    padding: 8px 15px;
    outline: none;
}

#assistant-send-btn {
    background: none;
    border: none;
    color: #0d6efd;
    font-size: 20px;
    margin-left: 10px;
    cursor: pointer;
}

/* ========================================================== */
/* --- STYLE POUR LE SÉLECTEUR DE PRODUITS INTELLIGENT --- */
/* ========================================================== */

/* Le conteneur des résultats de recherche */
#product-search-results {
    /* Nous utilisons les classes de Bootstrap, mais on peut les forcer ici si besoin */
    width: 100%;
    /* S'adapte à la largeur de son parent */
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Style de chaque carte de résultat */
.search-result-card {
    padding: 0.75rem !important;
    /* Forcer le padding */
    position: relative;
    /* Pour positionner le badge de stock */
}

/* L'image ou son placeholder */
.search-result-img,
.search-result-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 0.375rem;
    /* Coins arrondis */
    object-fit: cover;
}

.search-result-placeholder {
    background-color: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Le titre du produit */
.search-result-title {
    font-weight: 600;
    color: #212529;
}

/* Le prix */
.search-result-price {
    font-weight: bold;
    color: #0d6efd;
    /* Bleu primaire */
}

/* Le badge de stock */
.search-result-card .badge {
    font-size: 0.75rem;
    padding: 0.4em 0.7em;
}

/* ... (styles existants de l'assistant) ... */

/* Amélioration du footer et de l'input */
.assistant-footer {
    padding: 10px;
    background-color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#assistant-form {
    align-items: center;
}

#assistant-input {
    border: none;
    box-shadow: none !important;
    flex-grow: 1;
    height: 40px;
    padding-right: 10px;
}

#assistant-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    padding: 0;
    /* Important pour centrer l'icône */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* NOUVEAU: Style pour la poignée de redimensionnement */
.assistant-resize-handle {
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 10px;
    cursor: ns-resize;
    /* Curseur de redimensionnement vertical */
    /* background-color: rgba(0,0,0,0.1); Pour le debug */
}

/* Amélioration des réponses formatées */
.assistant-message .message-content table {
    width: 100%;
    font-size: 0.9em;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}

/* ========================================================== */
/* --- DESIGN "HYPER PRO" POUR LA GRILLE DE PRODUITS --- */
/* ========================================================== */

.product-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    overflow: hidden;
    /* Pour que l'image respecte les coins arrondis */
    position: relative;
    /* Pour les actions contextuelles */
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.product-card .card-img-top {
    /*height: 180px;*/
    object-fit: cover;
    background-color: var(--bg-main);
}

.product-card .card-body {
    padding: 1rem;
}

.product-card .product-category {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.product-card .product-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: #212529;
    /* Gérer les noms trop longs */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.5rem;
}

.product-card .product-sku {
    font-size: 0.8rem;
    color: #adb5bd;
}

.product-card .product-price {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(2, 132, 199, 0.95);
    /* Couleur primaire modifiée avec transparence */
    color: white;
    padding: 6px 12px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.product-stock-info {
    margin-top: 1rem;
}

.product-stock-info .stock-label {
    font-size: 0.8rem;
    color: #6c757d;
}

.progress {
    height: 8px;
    border-radius: 50px;
}

/* Actions contextuelles qui apparaissent au survol */
.product-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}

.product-card:hover .product-actions {
    opacity: 1;
    visibility: visible;
}

.product-actions .btn {
    margin: 0 5px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
}


/* ========================================================== */
/* --- STYLE DU COCKPIT HYBRIDE --- */
/* ========================================================== */

/* Poids de police personnalisé pour un meilleur rendu */
.fw-500 {
    font-weight: 500;
}

/* Style pour les onglets Top 5 */
#top5-tabs .nav-link {
    color: #6c757d;
    font-weight: 600;
}

#top5-tabs .nav-link.active {
    color: #fff;
    background-color: #0d6efd;
}

/* Style pour les listes de classement Top 5 */
.top-rank {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background-color: #f1f3f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #495057;
}

/* Mettre en valeur le #1 */
#top-products-content .list-group-item:first-child .top-rank,
#top-customers-content .list-group-item:first-child .top-rank {
    background-color: #ffc107;
    /* Jaune or */
    color: #000;
}

/* Carte des factures impayées */
.bg-danger h2,
.bg-danger h6 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.bg-danger a.stretched-link:hover {
    text-decoration: underline;
}

/* ========================================================== */
/* --- DESIGN DU CENTRE D'ACTIONS "LAUNCHPAD" --- */
/* ========================================================== */

.launchpad-container {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    border: 1px solid #e9ecef;
}

.launchpad-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 1.25rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    height: 100%;
    text-align: center;
    border: 1px solid transparent;
}

.launchpad-icon {
    margin-bottom: 0.75rem;
    transition: transform 0.2s ease-in-out;
}

.launchpad-text {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Style Principal (Action la plus importante) */
.launchpad-btn.launchpad-btn-primary {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.launchpad-btn.launchpad-btn-primary:hover {
    background-color: #0d6efd;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(13, 110, 253, 0.3);
}

/* Style Secondaire (Actions importantes) */
.launchpad-btn.launchpad-btn-secondary {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.launchpad-btn.launchpad-btn-secondary:hover {
    background-color: #495057;
    color: #fff;
    border-color: #495057;
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(73, 80, 87, 0.2);
}

/* Style Tertiaire (Navigation) */
.launchpad-btn.launchpad-btn-tertiary {
    background-color: transparent;
    color: #6c757d;
}

.launchpad-btn.launchpad-btn-tertiary:hover {
    background-color: #f8f9fa;
    color: #212529;
}

.launchpad-btn.launchpad-btn-tertiary:hover .launchpad-icon {
    transform: scale(1.1);
}

/* --- Style des Cartes Produits (Version "Scène Produit") --- */

.product-card {
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    /* 8px */
    background-color: #fff;
    /* Fond blanc pour la carte */
}

.product-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-8px);
}

/* Le conteneur de l'image */
.product-image-link {
    position: relative;
    display: block;
    background-color: #f8f9fa;
    /* Fond gris très clair pour la "scène" */
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    overflow: hidden;
    /* Pour que l'ombre intérieure reste contenue */
}

/* L'image elle-même */
.product-image {
    width: 100%;
    height: 220px;

    /* LA MODIFICATION CLÉ : Affiche l'image en entier */
    object-fit: contain;

    padding: 10px;
    /* Ajoute un peu d'air autour de l'image */

    /* Effet de zoom subtil au survol pour dynamiser */
    transition: transform 0.3s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

/* Effet d'ombre intérieure pour donner de la profondeur (optionnel mais très pro) */
.product-image-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.07);
    pointer-events: none;
    /* Pour que l'ombre ne bloque pas le clic */
}


.product-stock-status {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    /* S'assurer qu'il est au-dessus de l'ombre */
}

/* Les autres styles (.product-name, .product-price, etc.) restent inchangés */
.product-name {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    min-height: 40px;
}

.product-name a {
    text-decoration: none;
    color: #343a40;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0d6efd;
    margin-bottom: 1rem;
}

/* Conteneur du champ de recherche */
.search-container {
    flex-grow: 1;
    position: relative;
}

.search-container .search-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: #adb5bd;
    font-size: 1.2rem;
}

.search-container #product-search {
    height: 60px;
    border-radius: 0.5rem;
    border: 2px solid #e9ecef;
    padding-left: 55px;
    /* Espace pour l'icône */
    font-size: 1.2rem;
    font-weight: 500;
}

.search-container #product-search:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .product-action-bar {
        flex-direction: column;
    }

    .search-container,
    .scan-container {
        width: 100%;
    }

    .separator {
        width: 100%;
        margin: 1rem 0;
    }
}

/* ========================================================== */
/* --- DESIGN "PREMIUM" POUR LES RÉSULTATS DE RECHERCHE --- */
/* ========================================================== */

#product-search-results {
    /* Nous enlevons les styles en ligne et les gérons ici */
    position: absolute;
    z-index: 1050;
    /* Doit être au-dessus de la plupart des autres éléments */
    width: 100%;
    /* S'adapte à la largeur de son conteneur parent */

    /* Le design */
    border-radius: 0 0 0.75rem 0.75rem;
    /* Coins arrondis seulement en bas */
    overflow: hidden;
    /* Appliquer les coins arrondis */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #dee2e6;
    border-top: none;
    /* Pas de bordure en haut, pour un effet "attaché" */

    /* Comportement */
    max-height: 400px;
    overflow-y: auto;
}

/* Nous enlevons les styles par défaut de .list-group pour un contrôle total */
#product-search-results.list-group {
    border-radius: 0 0 0.75rem 0.75rem;
}

#product-search-results .list-group-item {
    border-left: none;
    border-right: none;
    border-top: 1px solid #f0f0f0;
}

#product-search-results .list-group-item:first-child {
    border-top: none;
}


/* --- Le style de chaque résultat (déjà créé mais on l'affine) --- */
.search-result-card {
    padding: 0.75rem 1rem !important;
    position: relative;
    cursor: pointer;
}

/* NOUVEAU: Style pour l'élément "actif" (sélectionné au clavier) */
.search-result-card.active-result {
    /*background-color: rgba(13, 110, 253, 0.1);  Un bleu très clair */
    border-left: 4px solid var(--primary-color);
    padding-left: calc(1rem - 4px) !important;
    background-color: #64e664;
    color: white;
}

/* ... (les autres styles pour .search-result-img, .search-result-title, etc. restent valides) ... */
.search-result-card.active-result {
    /*background-color: rgba(13, 110, 253, 0.1);*/
    border-left: 4px solid #0d6efd;
    padding-left: calc(1rem - 4px) !important;
}

/* =================================================================== */
/* --- DESIGN "WOUAH" POUR LE CENTRE D'AJUSTEMENT DE STOCK --- */
/* =================================================================== */

/* Nous donnons un style unique à la card principale de cette page */
#adjustment-form .card-header {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
    color: white;
}

#adjustment-form .card-header .card-title {
    font-weight: 600;
}

/* Style des champs du haut (Date, Entrepôt, etc.) */
#adjustment-form .form-label {
    font-weight: 500;
    color: #6c757d;
}

#adjustment-form .form-control,
#adjustment-form .form-select {
    border-width: 2px;
    transition: all 0.2s ease-in-out;
}

#adjustment-form .form-control:focus,
#adjustment-form .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}

/* Style spécifique pour le champ de recherche de produit avec Select2 */
#product-search-adj+.select2-container .select2-selection--single {
    height: 38px !important;
    border-width: 2px;
}

#product-search-adj+.select2-container--bootstrap-5 .select2-selection {
    border-radius: 0.375rem;
}

/* La table des produits à ajuster */
#adjustment-items-table {
    margin-top: 1.5rem !important;
}

#adjustment-items-table thead {
    background-color: #f8f9fa;
    color: #495057;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

#adjustment-items-table tbody tr {
    transition: background-color 0.2s ease;
}

#adjustment-items-table tbody tr:hover {
    background-color: #f1f3f5;
}

#adjustment-items-table td {
    vertical-align: middle;
}

#adjustment-items-table .quantity-to-remove {
    font-weight: bold;
    text-align: center;
}

#adjustment-items-table .current-stock-display {
    display: inline-block;
    padding: 0.3em 0.6em;
    font-size: 0.85em;
    font-weight: 700;
    color: #fff;
    background-color: #6c757d;
    border-radius: 0.25rem;
}

/* Style du bouton de suppression dans la ligne */
#adjustment-items-table .delete-item-btn {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Le bouton de validation final, avec un effet "agressif" */
#adjustment-form button[type="submit"] {
    background-color: #ffc107;
    /* Jaune Avertissement/Action */
    border-color: #ffc107;
    color: #000;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 50rem;
    /* Style pilule */
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
    transition: all 0.3s ease;

    /* Animation de "pulsation" pour attirer l'œil */
    animation: pulse-yellow 2s infinite;
}

#adjustment-form button[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.5);
}

@keyframes pulse-yellow {
    0% {
        box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
    }

    50% {
        box-shadow: 0 5px 25px rgba(255, 193, 7, 0.7);
    }

    100% {
        box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
    }
}

/* ========================================================== */
/* --- STYLE DU GARDIEN DE CONNECTIVITÉ --- */
/* ========================================================== */

.offline-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Fond semi-transparent avec effet de flou */
    background-color: rgba(26, 29, 36, 0.8);
    /* Notre couleur de fond sombre (#1a1d24) avec transparence */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    z-index: 9999;
    /* Au-dessus de tout, même des modales */

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;

    /* Animation d'apparition/disparition */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.offline-overlay.active {
    opacity: 1;
    visibility: visible;
}

.offline-content .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* --- Indicateur de Connexion Hors Ligne --- */
#connection-status-indicator {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f44336;
    /* Rouge d'alerte */
    color: #fff;
    padding: 10px 0;
    text-align: center;
    z-index: 1056;
    /* Au-dessus de Bootstrap modals */
    font-size: 0.9rem;
    font-weight: 500;
    animation: slideUp 0.5s ease-out forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Classe ajoutée au body par JS quand on est hors ligne */
body.is-offline #connection-status-indicator {
    display: block !important;
}