/* ==========================================================================
   GESTOCK — CSS GLOBAL UNIFIÉ
   Ordre de chargement : après bootstrap.min.css et style.css du template
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
    /* Identité Gestock */
    --gestock-blue-dark:  #1A365D;
    --gestock-blue-vivid: #2563EB;
    --gestock-green:      #10b981;
    --gestock-blue-soft:  rgba(26, 54, 93, 0.06);
    --gestock-green-soft: rgba(16, 185, 129, 0.1);

    /* Dark theme (listing / dashboard) */
    --bg-dark:      #0f172a;
    --accent-blue:  #38bdf8;
    --glass-bg:     rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Textes */
    --text-light:  #e2e8f0;
    --text-muted:  #94a3b8;
    --text-subtle: #64748b;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Masquer la scrollbar tout en gardant le scroll fonctionnel */
html, body {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-dark) !important;
    background-image:
        radial-gradient(circle at 0% 0%,   rgba(56, 189, 248, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(37, 99, 235, 0.08) 0%, transparent 50%);
    color: var(--text-light) !important;
    height: auto !important;
    overflow-x: hidden;
}

/* Titres uniquement dans le contexte dark */
.page-wrapper h1, .page-wrapper h2, .page-wrapper h3,
.page-wrapper h4, .page-wrapper h5, .page-wrapper h6,
.card h1, .card h2, .card h3,
.card h4, .card h5, .card h6,
.card-title { color: #fff !important; }

/* NE PAS forcer p, span, label, small globalement
   — ça écrase les couleurs spécifiques (bleu, vert, etc.) */

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

a:hover { opacity: 0.8; }

hr {
    border-color: var(--glass-border) !important;
    opacity: 1 !important;
}

/* ==========================================================================
   3. LAYOUT DU TEMPLATE (overrides DreamsPos)
   ========================================================================== */
.main-wrapper  { background-color: transparent !important; }

.page-wrapper {
    background-color: transparent !important;
    min-height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 20px !important;
    margin-left: 250px; /* compense la sidebar fixe */
}

.page-wrapper .content,
.content {
    background-color: transparent !important;
    padding-top: 20px !important;
    padding-bottom: 0 !important;
}

.page-header {
    background: transparent !important;
    border-bottom: none !important;
}

.page-header h3,
.page-header h4 { color: #fff !important; }

.breadcrumb-item         { color: var(--text-muted) !important; }
.breadcrumb-item.active { color: var(--accent-blue) !important; }
.breadcrumb-item a      { color: var(--accent-blue) !important; }

/* Correctifs conteneurs de pages */
#create-category-container,
#profile-page-container,
#categories-page-container,
#stockage-page-container,
#settings-page-container { margin-top: -25px !important; }

.profile-header { margin-top: -5px !important; }

/* ==========================================================================
   4. NAVBAR / HEADER
   ========================================================================== */
#header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    height: 70px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 24px;
    gap: 20px;
}

/* Logo */
.header-brand { flex: 1; }
.header-brand a { display: flex; align-items: center; text-decoration: none; }
.header-brand img { max-height: 48px; width: auto; }

/* Lien central inventaire */
.header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-link-gestock-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #e2e8f0;
    background: transparent;
    border: 1.5px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.nav-link-gestock-header i { color: var(--accent-blue); font-size: 1rem; }
.nav-link-gestock-header:hover,
.nav-link-gestock-header.active {
    color: #fff;
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.25);
    text-decoration: none;
}

/* Utilisateur */
.header-user {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Pilule utilisateur */
.user-pill-gestock {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.user-pill-gestock::after { display: none !important; }
.user-pill-gestock:hover  {
    border-color: var(--accent-blue);
    background: rgba(56, 189, 248, 0.1);
    text-decoration: none;
}

.user-name-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.header-chevron {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    transition: transform 0.2s;
}
.user-pill-gestock[aria-expanded="true"] .header-chevron {
    transform: rotate(180deg);
}

/* Avatar */
.avatar-wrapper     { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.avatar-wrapper img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid white; }
.online-status {
    position: absolute; bottom: 1px; right: 1px;
    width: 9px; height: 9px;
    background: var(--gestock-green);
    border: 2px solid white;
    border-radius: 50%;
}

/* Dropdown */
.custom-dropdown-gestock {
    padding: 8px !important;
    border-radius: 16px !important;
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
    margin-top: 8px !important;
    min-width: 200px !important;
}
.custom-dropdown-gestock .dropdown-item {
    display: flex;
    align-items: center;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    font-weight: 600;
    font-size: 0.875rem;
    color: #e2e8f0;
    transition: all 0.15s;
    text-decoration: none;
}
.custom-dropdown-gestock .dropdown-item:hover {
    background: rgba(56, 189, 248, 0.1) !important;
    color: #fff !important;
}

.logout-item:hover {
    background: var(--gestock-blue-dark) !important;
    color: white !important;
}
.logout-item:hover .icon-circle        { background: rgba(255,255,255,0.15) !important; }
.logout-item:hover .text-gestock-dark { color: white !important; }
.logout-item:hover i                  { color: white !important; }

/* Cercles icônes */
.icon-circle {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    transition: all 0.15s;
}
.bg-blue-soft  { background: rgba(56, 189, 248, 0.1); }
.bg-green-soft { background: rgba(16, 185, 129, 0.12); }
.bg-dark-soft  { background: rgba(15, 23, 42, 0.08); }

/* Couleurs utilitaires */
.text-gestock-blue  { color: var(--gestock-blue-dark) !important; }
.text-gestock-green { color: var(--gestock-green) !important; }
.text-gestock-dark  { color: #0f172a !important; }
.bg-gestock-blue    { background-color: var(--gestock-blue-dark) !important; }
.bg-gestock-green   { background-color: var(--gestock-green) !important; }
.shadow-custom      { box-shadow: 0 10px 25px rgba(26, 54, 93, 0.12) !important; }

@media (max-width: 768px) {
    .header-nav    { display: none; }
    .header-inner  { padding: 0 16px; }
}

/* ==========================================================================
   5. SIDEBAR
   ========================================================================== */
#sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-right: 1px solid var(--glass-border) !important;
    z-index: 1040;
}

.sidebar-inner  { padding: 20px 12px; }
.sidebar-nav    { display: flex; flex-direction: column; gap: 2px; }

/* Liens sidebar */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #cbd5e1 !important;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    margin-bottom: 2px;
}
.sidebar-link:hover {
    background-color: rgba(56, 189, 248, 0.08) !important;
    color: var(--accent-blue) !important;
    transform: translateX(4px);
    box-shadow: inset 4px 0 0 var(--accent-blue);
    text-decoration: none;
}
.sidebar-link i {
    width: 20px;
    text-align: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.sidebar-link .icon-gestock { color: var(--accent-blue) !important; transition: color 0.2s; }
.sidebar-link:hover .icon-gestock { color: var(--accent-blue) !important; }

/* État actif */
.sidebar-link.active-gestock,
.active-gestock {
    background-color: rgba(56, 189, 248, 0.08) !important;
    color: var(--accent-blue) !important;
    box-shadow: inset 4px 0 0 var(--accent-blue);
}
.active-gestock i { color: var(--accent-blue) !important; }

/* État inactif */
.sidebar-link.inactive-gestock,
.inactive-gestock {
    background-color: transparent !important;
    color: var(--gestock-blue-vivid) !important;
}
.inactive-gestock i { color: var(--gestock-blue-vivid) !important; }

/* Séparateur et labels */
.sidebar-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 12px 4px;
}
.sidebar-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569 !important;
    padding: 0 12px;
    margin: 8px 0 6px;
}

/* Scrollbar sidebar */
#sidebar::-webkit-scrollbar       { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, 0.3); border-radius: 10px; }
#sidebar::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

@media (max-width: 768px) {
    #sidebar        { transform: translateX(-100%); transition: transform 0.3s ease; }
    #sidebar.show   { transform: translateX(0); }
    .page-wrapper   { margin-left: 0; }
}

/* ==========================================================================
   6. CARDS (glassmorphism)
   ========================================================================== */
/* Ciblage maximal pour écraser style.css du template */
.card,
.card.border-0,
.card.shadow-sm,
.card.rounded-4,
.page-wrapper .card,
.content .card,
body .card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    color: var(--text-light) !important;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.card:hover {
    border-color: rgba(56, 189, 248, 0.3) !important;
    transform: translateY(-2px);
}

/* Toutes les variantes de card-header sans fond */
.card > .card-header,
.card-header,
.card-header.bg-light,
.card-header.bg-white,
.card-header[class*="bg-"] {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #fff !important;
}

/* card-body toujours transparent */
.card > .card-body,
.card-body {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-light) !important;
}
.card-title { color: #fff !important; }

/* Modal dark */
.modal-content,
.modal-content.profile-modal {
    background: rgba(15, 23, 42, 0.97) !important;
    background-color: rgba(15, 23, 42, 0.97) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-light) !important;
}
.modal-header,
.modal-header.bg-light,
.modal-header.profile-modal-header {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--glass-border) !important;
}
.modal-body {
    background: transparent !important;
    background-color: transparent !important;
}


/* ==========================================================================
   6b. GLASS-CARD — classe custom sans conflit Bootstrap
   ========================================================================== */
.glass-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    color: #e2e8f0;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.glass-card:hover {
    border-color: rgba(56, 189, 248, 0.3);
    transform: translateY(-2px);
}
.glass-card-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 16px 20px;
    border-radius: 15px 15px 0 0;
}
.glass-card-body {
    background: transparent;
    color: #e2e8f0;
    padding: 20px;
}

/* ==========================================================================
   7. TABLEAUX
   ========================================================================== */
.table { color: var(--text-light) !important; }

.table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text-light) !important;
    border-bottom-color: var(--glass-border) !important;
}
.table thead th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-muted) !important;
    border-color: var(--glass-border) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.table-hover tbody tr:hover td {
    background-color: rgba(56, 189, 248, 0.05) !important;
}

/* Table glassmorphism container */
.table-container {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: rgba(15, 23, 42, 0.3);
}

/* ==========================================================================
   8. FORMULAIRES
   ========================================================================== */
.form-control,
.form-select {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid var(--glass-border) !important;
    color: #fff !important;
    border-radius: 10px !important;
}
.form-control::placeholder { color: var(--text-subtle) !important; }
.form-control:focus,
.form-select:focus {
    background-color: rgba(15, 23, 42, 0.7) !important;
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1) !important;
    color: #fff !important;
}

/* Switch */
.form-switch .form-check-input {
    width: 2.5em !important;
    height: 1.25em !important;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.form-check-input:checked {
    background-color: var(--gestock-blue-vivid) !important;
    border-color: var(--gestock-blue-dark) !important;
}
.form-check-input:focus {
    border-color: var(--gestock-blue-vivid);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

/* Labels */
.form-label-gestock {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 8px;
    display: block;
}

/* Input style alternatif (pages claires) */
.input-gestock {
    border: 1.5px solid #edf2f7 !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease-in-out !important;
    background-color: #fcfdfd !important;
    color: #1e293b !important;
}
.input-gestock:focus {
    border-color: var(--gestock-green) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px var(--gestock-green-soft) !important;
    outline: none;
}

/* Validation */
.invalid-feedback { font-weight: 600; font-size: 0.8rem; color: #e11d48; }

/* Onglets profil */
.profile-menu .nav-tabs {
    border-bottom: 2px solid rgba(255,255,255,0.1);
    margin-bottom: 0.75rem !important;
}

/* ==========================================================================
   9. BOUTONS
   ========================================================================== */

/* Principal Gestock */
.btn-gestock {
    background-color: var(--gestock-blue-dark);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-gestock:hover {
    background-color: var(--gestock-green);
    color: white;
    transform: translateY(-1px);
}

/* Gradient bleu */
.btn-gradient-primary,
.btn-vinted-gradient {
    background: linear-gradient(135deg, var(--gestock-blue-dark) 0%, var(--gestock-blue-vivid) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-gradient-primary:hover,
.btn-vinted-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(26, 54, 93, 0.4);
    color: white !important;
    opacity: 0.95;
}
.btn-gradient-primary:active { transform: translateY(0); }

/* Gris soft */
.btn-soft-grey,
.btn-gestock-soft {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-soft-grey:hover,
.btn-gestock-soft:hover {
    background: #e5e7eb !important;
    color: var(--gestock-blue-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Outline primary */
.btn-outline-primary {
    border-color: var(--gestock-blue-dark) !important;
    color: var(--gestock-blue-dark) !important;
    transition: all 0.2s ease;
}
.btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--gestock-blue-dark) 0%, var(--gestock-blue-vivid) 100%) !important;
    color: white !important;
    border-color: transparent !important;
}

/* Boutons Bootstrap généraux */
.btn-primary {
    background: linear-gradient(135deg, var(--gestock-blue-dark) 0%, var(--gestock-blue-vivid) 100%) !important;
    border-color: var(--gestock-blue-dark) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--gestock-blue-vivid) 0%, var(--gestock-blue-dark) 100%) !important;
}

/* Bouton Ajout rapide */
.btn-add-quick {
    background-color: var(--gestock-blue-dark);
    color: white;
    border-radius: 10px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
    border: none;
}
.btn-add-quick:hover {
    background-color: var(--gestock-green);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Actions tableau */
.btn-edit {
    background: rgba(255, 159, 28, 0.1) !important;
    color: #FF9F1C !important;
    border: 1px solid rgba(255, 159, 28, 0.2) !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-decoration: none !important;
    cursor: pointer;
}
.btn-delete {
    background: rgba(230, 57, 70, 0.1) !important;
    color: #E63946 !important;
    border: 1px solid rgba(230, 57, 70, 0.2) !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-decoration: none !important;
    cursor: pointer;
}
.btn-edit:hover, .btn-delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    opacity: 0.95;
}
.btn-edit i, .btn-delete i { font-size: 12px; }

.btn-action {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; border: none;
    transition: all 0.2s;
    text-decoration: none;
    cursor: pointer;
}
.btn-action.edit         { background-color: var(--gestock-blue-soft); color: var(--gestock-blue-dark); }
.btn-action.edit:hover   { background-color: var(--gestock-blue-dark); color: white; }
.btn-action.delete       { background-color: #fff1f2; color: #e11d48; }
.btn-action.delete:hover { background-color: #e11d48; color: white; }

.action-buttons { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   10. BADGES
   ========================================================================== */
.badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
}
.badge-success   { background: rgba(16, 185, 129, 0.1);  color: #10b981; }
.badge-danger    { background: rgba(230, 57, 70, 0.1);   color: #ef4444; }
.badge-info      { background: rgba(56, 189, 248, 0.1);  color: var(--accent-blue); }
.badge-warning   { background: rgba(255, 159, 28, 0.1);  color: #FF9F1C; }
.badge-secondary { background: rgba(148, 163, 184, 0.1); color: #94a3b8; }

.badge-gestock {
    font-size: 0.75rem; font-weight: 700;
    padding: 6px 14px; border-radius: 50px;
    display: inline-flex; align-items: center;
}
.status-active   { background-color: #ecfdf5; color: #10b981; border: 1px solid #d1fae5; }
.status-inactive { background-color: #fff1f2; color: #e11d48; border: 1px solid #ffe4e6; }

.badge-status { font-size: 0.75rem; font-weight: 600; padding: 0.4em 1em; letter-spacing: 0.3px; }
.bg-active-subtle   { background-color: rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.2); }
.bg-inactive-subtle { background-color: rgba(230,57,70,0.1);  color: #e11d48; border: 1px solid rgba(230,57,70,0.2); }

/* ==========================================================================
   11. SWITCH (on/off listing)
   ========================================================================== */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #334155;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute; content: "";
    height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider { background-color: var(--accent-blue) !important; }
input:checked + .slider:before { transform: translateX(18px); }



/* ==========================================================================
   12. ICÔNES (CORRIGÉ)
   ========================================================================== */
.icon-gestock,
.fas, .far, .fab {
    width: 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* On ne force le vert QUE pour l'icône spécifique Gestock, pas toutes les .fas */
.icon-gestock { 
    color: var(--gestock-green) !important; 
    transition: color 0.2s; 
}

/* Correction spécifique pour l'icône Profil (la rendre plus visible) */
.fa-user-circle {
    font-weight: 900 !important; /* Force la version "Solid" si dispo */
    filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.2));
}



/* ==========================================================================
   13. TITRES DE SECTIONS
   ========================================================================== */
.section-title-modern {
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02rem;
    color: var(--text-light);
    text-transform: uppercase;
    opacity: 0.9;
    display: inline-block;
    padding-top: 10px;
    line-height: 1.2;
    vertical-align: middle;
}

.section-title-gestock {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.text-gestock-gradient {
    background: linear-gradient(135deg, var(--gestock-blue-dark) 0%, var(--gestock-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.text-gradient-primary {
    background: linear-gradient(135deg, var(--gestock-blue-dark) 0%, var(--gestock-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

/* ==========================================================================
   14. TOASTS & ALERTES
   ========================================================================== */
.toast-item {
    background: rgba(30, 41, 59, 0.95) !important;
    padding: 16px 20px;
    border-radius: 18px;
    margin-bottom: 12px;
    border-left: 6px solid;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    display: flex;
    align-items: center;
    animation: slideInRight 0.4s ease-out;
    color: var(--text-light) !important;
}
.alert-danger-modern  { border-left-color: #e11d48 !important; }
.alert-success-modern { border-left-color: #16a34a !important; }

/* ==========================================================================
   15. PAGES AUTH (login / register)
   ========================================================================== */
.login-body  { background: linear-gradient(135deg, var(--gestock-blue-dark) 0%, var(--gestock-blue-vivid) 100%) !important; }
.login-left  { background: linear-gradient(135deg, var(--gestock-blue-dark) 0%, var(--gestock-blue-vivid) 100%) !important; padding: 40px !important; }
.login-right { padding: 40px 50px !important; }

.login-right-wrap h1 { font-size: 1.75rem !important; margin-bottom: 0.5rem !important; }
.login-right-wrap p  { margin-bottom: 1.5rem !important; }

#modal_avatar_preview { width: 180px !important; height: 180px !important; }
#modal_avatar_preview_container .mb-4 { margin-bottom: 1rem !important; }

@media (max-width: 768px) {
    .login-right, .login-left { padding: 30px 20px !important; }
}

/* ==========================================================================
   16. DIVERS / QR / PARAMÈTRES
   ========================================================================== */
.qr-frame {
    border: 2px dashed rgba(255,255,255,0.2);
    padding: 10px;
    border-radius: 15px;
    display: inline-block;
    background: rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}
.qr-frame img { max-width: 100%; height: auto; }

#settings-form label { font-size: 0.9rem; color: var(--text-light); }

#settings-form-btn,
.btn-gradient-primary.mt-3 {
    margin-top: 1rem !important;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* ==========================================================================
   17. ANIMATIONS
   ========================================================================== */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDropdown {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.animate-fade-in  { animation: fadeInDropdown 0.15s ease; }
.animate-slide-in { animation: slideIn 0.2s ease-out; }

/* form { animation: fadeInUp 0.5s ease; } — désactivé : causait une saccade dans les dropdowns */

/* ==========================================================================
   18. PAGE PROFIL
   ========================================================================== */

/* Email sous le nom */
.profile-email {
    font-size: 0.85rem;
    color: var(--accent-blue);
}

/* Avatar avec bordure accent */
.profile-avatar-img {
    border: 3px solid var(--accent-blue);
    object-fit: cover;
}

/* Lignes d'info */
.profile-info-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--glass-border);
    gap: 16px;
}
.profile-info-row:last-child { border-bottom: none; }

.profile-info-label {
    width: 140px;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}
.profile-info-value {
    font-weight: 600;
    color: var(--text-light);
}

/* Onglets profil */
.profile-tabs {
    border-bottom: 1px solid var(--glass-border);
    gap: 4px;
}

.profile-tab {
    background: transparent;
    border: none;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0;
}
.profile-tab:hover { color: var(--text-light); }
.profile-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* Modal profil */
.profile-modal {
    background: rgba(15, 23, 42, 0.97) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    color: var(--text-light);
}
.profile-modal-header {
    background: rgba(255,255,255,0.04) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding: 16px 24px;
}

/* Panel avatar dans la modal */
.profile-avatar-panel {
    border-left: 1px solid var(--glass-border);
    padding: 20px;
}
.profile-avatar-preview {
    width: 130px;
    height: 130px;
    border: 3px solid var(--accent-blue);
    background: rgba(255,255,255,0.05);
    object-fit: cover;
}

/* Boutons nav avatar */
.profile-nav-btn {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* ==========================================================================
   FORCE GLASS EFFECT - À PLACER TOUT EN BAS DU FICHIER
   ========================================================================== */

/* 1. On force les cartes en mode transparent/bleu marine */
#profile-page-container .glass-card, 
#profile-page-container .card,
.glass-card {
    background: rgba(15, 23, 42, 0.4) !important;
    background-color: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 2. On nettoie les fonds des éléments à l'intérieur (body, header, colonnes) */
#profile-page-container .glass-card-body,
#profile-page-container .card-body,
#profile-page-container .card-header,
#profile-page-container [class*="col-"],
#profile-page-container .tab-content,
#profile-page-container .tab-pane {
    background: transparent !important;
    background-color: transparent !important;
}

/* 3. TEST DE CONTRÔLE : Si tu vois du rouge, le CSS est bien appliqué */
/* #profile-page-container .glass-card { background: rgba(255, 0, 0, 0.3) !important; } */

/* ==========================================================================
   VERSION FINALE : GLASSMORTHISM SOMBRE & PROFOND
   ========================================================================== */

/* 1. On nettoie les fonds du template qui polluent le rendu */
.page-wrapper, .main-wrapper, .content, .tab-content, .tab-pane {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. On configure la carte pour qu'elle soit "teintée" en bleu nuit */
#profile-page-container .glass-card, 
#profile-page-container .card {
    background: rgba(15, 23, 42, 0.6) !important; /* Bleu nuit transparent */
    background-color: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(12px) saturate(180%) !important; /* Flou + boost des couleurs de fond */
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Bordure très fine */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* 3. On s'assure que les textes ne "bavent" pas */
#profile-page-container .profile-info-label {
    color: #94a3b8 !important; /* Gris bleu clair */
    font-weight: 500;
}

#profile-page-container .profile-info-value {
    color: #ffffff !important;
}

/* 4. On harmonise les lignes de séparation internes */
.profile-info-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* --- COMPACITÉ DU PROFIL --- */

/* On réduit le padding interne de la carte du pseudo */
#profile-page-container .profile-header .glass-card-body {
    padding: 1rem 1.5rem !important; /* Réduit la hauteur interne */
}

/* On réduit la taille de l'avatar pour qu'il ne pousse pas la carte vers le haut */
.profile-header img.profile-avatar-img {
    width: 60px !important;
    height: 60px !important;
    border: 2px solid var(--accent-blue) !important;
    box-shadow: 0 0 15px var(--accent-glow);
}

/* Ajustement de la marge du titre */
.profile-header h4 {
    font-size: 1.1rem !important;
    margin-bottom: 2px !important;
}

/* On remonte la page pour compenser la perte du style.css */
#profile-page-container {
    margin-top: -15px !important;
}
/* --- RÉDUCTION DES ESPACES (BYE BYE LES 4CM) --- */

.page-wrapper {
    margin-left: 250px !important; 
    /* On passe de 90px à 40px pour coller davantage au header */
    padding-top: 40px !important;  
    min-height: auto !important;
}

#profile-page-container {
    /* On réduit la marge au-dessus de la carte à presque rien */
    margin-top: 5px !important;   
    padding: 0 20px !important;
}

/* On supprime les marges par défaut des titres qui pourraient pousser vers le bas */
.page-header, .profile-header h4 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* --- NETTOYAGE TABLEAUX GLASS --- */

#categories-page-container .card {
    background: rgba(15, 23, 42, 0.4) !important; /* Même opacité que ton profil */
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden; /* Pour que les arrondis soient propres */
}

/* On rend le tableau transparent */
.table-gestock {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

/* On enlève le fond des lignes et des cellules */
.table-gestock tr, 
.table-gestock td, 
.table-gestock th {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* On change l'effet de survol (hover) pour qu'il soit subtil et bleu */
.table-hover tbody tr:hover td {
    background-color: rgba(56, 189, 248, 0.05) !important;
    color: #fff !important;
}

/* Couleur des titres de colonnes */
.table-gestock thead th {
    color: #94a3b8 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 15px !important;
}
/* --- BOUTON AJOUTER (FIX VISIBILITÉ) --- */

.btn-gestock-primary {
    /* Forme et taille de base (au cas où .btn ne marche plus) */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 24px !important;
    border-radius: 50px !important; /* Forme pilule comme dans ton blade */
    
    /* Couleurs Gestock Tech */
    background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    
    /* Typographie */
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Effets de profondeur */
    border: none !important;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4) !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

.btn-gestock-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.6) !important;
    color: #ffffff !important;
    filter: brightness(1.1);
}

.btn-gestock-primary i {
    font-size: 1rem;
    color: #ffffff !important;
}

/* page de login

/* ==========================================================================
   AUTH LAYOUT — RESTAURATION DU LAYOUT DEUX COLONNES
   ========================================================================== */

.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--gestock-blue-dark) 0%, var(--gestock-blue-vivid) 100%) !important;
}

.login-wrapper {
    width: 100%;
}

.loginbox {
    display: flex !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
    min-height: 480px;
    max-width: 900px;
    margin: 0 auto;
}

.login-left {
    width: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--gestock-blue-dark) 0%, var(--gestock-blue-vivid) 100%) !important;
    padding: 40px !important;
}

.login-left img {
    max-width: 220px;
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.login-right {
    width: 50% !important;
    background: rgba(15, 23, 42, 0.97) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 50px !important;
}

.login-right-wrap {
    width: 100%;
}

/* Titre et sous-titre */
.login-right-wrap h1 {
    color: #fff !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.25rem !important;
}

.login-right-wrap p {
    color: var(--text-muted) !important;
    margin-bottom: 1.5rem !important;
}

/* Labels */
.login-right-wrap .form-label {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
}

@media (max-width: 768px) {
    .loginbox {
        flex-direction: column !important;
    }
    .login-left,
    .login-right {
        width: 100% !important;
        padding: 30px 20px !important;
    }
    .login-left {
        min-height: 200px;
    }
}
.nav-link-gestock-header i, 
.dropdown-item i {
    display: inline-block; /* Force l'icône à exister physiquement */
    min-width: 20px;       /* Évite qu'elle disparaisse si le texte prend trop de place */
    font-style: normal;    /* Sécurité FontAwesome */
}
/* Cercles icônes (CORRIGÉ) */
.icon-circle {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* Force la visibilité des icônes dans les cercles */
.icon-circle i {
    font-size: 14px;
    opacity: 1 !important; /* Empêche la disparition */
}

/* Couleurs utilitaires (Amélioration du contraste) */
.text-gestock-blue  { color: var(--accent-blue) !important; } /* Utilise le bleu clair au lieu du bleu nuit */
.text-gestock-green { color: var(--gestock-green) !important; }
.text-gestock-dark  { color: #f87171 !important; } /* Force le rouge clair pour l'icône déconnexion par défaut */

/* État au survol (Hover) */
.dropdown-item:hover .icon-circle {
    transform: scale(1.1);
}

.logout-item:hover .icon-circle { 
    background: #ef4444 !important; 
}
.logout-item:hover .icon-circle i { 
    color: white !important; 
}

/* ==========================================================================
   AJOUT SCROLLBAR GESTOCK (TABLES UNIQUEMENT)
   ========================================================================== */
.table-responsive {
    max-height: 500px !important;
    overflow-y: auto !important;
}

.table-responsive::-webkit-scrollbar {
    width: 6px !important;
}

.table-responsive::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2563EB, #10b981) !important;
    border-radius: 10px;
}

/* Fix sticky header pour pas que les titres bougent */
.table-gestock thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}
/* --- Réduction de la zone Header --- */
.page-header {
    margin-bottom: 0.5rem !important; /* Réduit l'espace sous "Support Client" */
    padding-bottom: 0 !important;
}

/* --- Remonter le contenu global --- */
.page-wrapper .content {
    padding-top: 0.5rem !important; /* Force la remontée vers le haut */
}

/* --- Ajustement de l'icône et des textes --- */
.contact-icon {
    font-size: 2rem !important; /* Plus petit (était fa-3x soit 3rem) */
    margin-bottom: 1rem !important;
}

.contact-title {
    font-size: 1.5rem !important; /* Titre plus discret */
    margin-bottom: 0.25rem !important;
}

/*Mobile */
@media (max-width: 768px) {
    .nav-glass {
        padding: 12px 16px;
    }

    .nav-glass > a svg {
        width: 160px;
        height: 42px;
    }

    .nav-links {
        flex-direction: column;
        gap: 6px;
        align-items: flex-end;
    }

    .nav-links a {
        font-size: 0.85rem;
    }

    /*version dashboard mobile*/

    .stats-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur mobile */
        gap: 10px;
        padding: 10px;
    }
    
    .stat-card {
        padding: 15px;
        text-align: center;
    }

    .stat-card h3 {
        font-size: 12px; /* On réduit le titre pour que le chiffre reste gros */
    }



@media (max-width: 991px) {
    /* Cache la sidebar par défaut */
    .sidebar {
        position: fixed;
        left: -100%; /* Sort de l'écran */
        transition: 0.3s;
        z-index: 1001;
    }

    /* Classe pour ouvrir la sidebar */
    .sidebar.opened {
        left: 0;
    }

    /* Header plus compact */
    .header {
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

@media (max-width: 768px) {
    /* Le conteneur qui entoure tes cartes */
    .row-stats { 
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
        gap: 12px;
        padding: 10px;
    }

    /* On réduit la taille interne des cartes */
    .dash-widget {
        margin-bottom: 0 !important;
        padding: 15px !important;
    }

    .dash-widget-icon {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 18px !important;
    }
}
/* ==========================================================================
   19. SYSTÈME BURGER & SIDEBAR MOBILE
   ========================================================================== */

/* Bouton Burger : Toujours caché sur PC */
.header-mobile-toggle {
    display: none;
}

@media (max-width: 991px) {
    /* 1. Affichage du bouton Burger */
    .header-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 70px; /* Aligné sur la hauteur du header */
    }

    /* 2. Comportement de la Sidebar */
    #sidebar {
        position: fixed !important;
        top: 0;
        left: -250px; /* On la sort de l'écran (largeur 250px) */
        width: 250px;
        height: 100vh;
        z-index: 1100 !important; /* Passe au-dessus du header */
        transition: transform 0.3s ease-in-out !important;
        transform: none !important; /* On annule le transform par défaut du template */
        display: block !important;
        background-color: rgba(15, 23, 42, 0.98) !important;
        box-shadow: none;
    }

    /* 3. L'état ouvert (déclenché par le JS) */
    #sidebar.opened {
        left: 0 !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
    }

    /* 4. Ajustements Header Mobile */
    .header-inner {
        padding: 0 10px !important;
        justify-content: flex-start !important; /* Aligne Burger + Logo */
    }

    .header-brand {
        flex: 0 !important; /* Empêche le logo de prendre toute la place */
        margin-right: auto;
    }

    .header-brand svg {
        width: 140px !important; /* Logo plus petit sur mobile */
    }

    /* 5. On masque l'utilisateur sur très petit écran si ça pousse trop */
    @media (max-width: 400px) {
        .user-name-text { display: none; }
    }
}

/* Overlay (optionnel : assombrit le fond quand ouvert) */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1090;
}
.sidebar-overlay.show { display: block; }


@media (max-width: 991px) {
    /* 1. Sidebar mobile : on ajoute un petit flou derrière et on gère l'ID */
    #sidebar {
        position: fixed !important;
        top: 0;
        left: -260px; /* Légèrement plus large pour cacher l'ombre */
        width: 250px;
        height: 100vh;
        z-index: 2000 !important; /* Doit être au-dessus de TOUT */
        transition: all 0.3s ease;
        background: rgba(15, 23, 42, 0.98) !important;
        backdrop-filter: blur(10px);
        border-right: 1px solid rgba(255,255,255,0.1);
    }

    #sidebar.opened {
        left: 0 !important;
    }

    /* 2. GRILLE DE 2 : On force les cartes de stats côte à côte */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 -5px !important; /* On réduit l'espace entre les colonnes */
    }

    /* On cible les colonnes de stats (souvent col-xl-3 ou col-sm-6) */
    .col-xl-3, .col-sm-6, .col-12 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 5px !important;
    }

    /* On réduit la taille interne pour que ça tienne bien */
    .dash-widget {
        padding: 10px !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dash-widget-info h3 {
        font-size: 14px !important; /* Chiffres plus petits */
        margin-bottom: 2px !important;
    }

    .dash-widget-info span {
        font-size: 10px !important; /* Libellés plus petits */
        white-space: nowrap;
    }
}

@media (max-width: 991px) {
    /* On annule la marge de la sidebar PC pour libérer tout l'espace */
    .page-wrapper {
        margin-left: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
    }

    /* On s'assure que le row prend toute la largeur sans déborder */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -5px !important;
        margin-right: -5px !important;
        width: auto !important;
    }

    /* Grille de 2 cartes bien centrées */
    .col-xl-3, .col-sm-6, .col-12 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 5px !important;
    }

    /* Optionnel : on centre le contenu du widget pour l'esthétique mobile */
    .dash-widget {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
}


/* Force le texte à revenir à la ligne plutôt que de faire déborder la carte */
.text-break {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

@media (max-width: 576px) {
    /* Ajustement des lignes d'info pour mobile : label au-dessus de la valeur */
    .profile-info-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    
    .profile-info-label {
        width: 100% !important;
        margin-bottom: 0;
    }

    .profile-info-value {
        width: 100%;
        word-break: break-all; /* Sécurité pour les emails très longs dans le tableau */
    }
}
@media (max-width: 576px) {
    /* On rend le bouton plus petit et carré sur mobile */
    .btn-edit-profile {
        width: 40px;
        height: 40px;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px !important; /* Forme plus moderne pour un petit bouton */
    }

    .btn-edit-profile i {
        margin: 0 !important;
        font-size: 1.1rem;
    }

    /* Optionnel : Remonter un peu le titre de section sur mobile */
    .section-title-gestock {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 576px) {
    /* On force les widgets admin à 100% au lieu de 50% pour éviter l'écrasement */
    #admin-dashboard .col-12.col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* On réduit un peu l'icône pour laisser plus de place au texte */
    .icon-circle {
        width: 35px !important;
        height: 35px !important;
        margin-right: 10px !important;
    }
}


    
}