/* ═══════════════════════════════════════════════════════════════
   IQOS DESIGN SYSTEM v2.0 — Charte Graphique Unifiée
   Shared across: SAV IQOS · Transfert Stock · Demande Virement
   ═══════════════════════════════════════════════════════════════ */

/* ═══ DESIGN TOKENS ═══ */
:root{
    --accent:#69F0AE;--accent-hover:#00E676;--accent-glow:rgba(105,240,174,0.15);--accent-light:rgba(105,240,174,0.04);
    --orange:#FFAB40;--orange-hover:#FF9100;--orange-glow:rgba(255,171,64,0.15);
    --bg-body:#0B0B0F;--bg-sidebar:#101017;--bg-topbar:rgba(16,16,23,0.85);--bg-card:#16161E;--bg-elevated:#1C1C26;
    --bg-input:#12121A;--bg-hover:rgba(255,255,255,0.04);--bg-active:rgba(105,240,174,0.06);
    --text-primary:rgba(255,255,255,0.92);--text-secondary:rgba(255,255,255,0.55);--text-muted:rgba(255,255,255,0.3);
    --border:rgba(255,255,255,0.06);--border-hover:rgba(255,255,255,0.12);--border-accent:rgba(105,240,174,0.25);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 8px 25px rgba(0,0,0,0.5);
    --shadow-glow:0 0 20px rgba(105,240,174,0.08);
    --radius:12px;--radius-sm:8px;--radius-lg:16px;--radius-xl:20px;
    --sidebar-width:260px;--topbar-height:56px;
    --font-sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
    --holder-color:#69F0AE;--pocket-color:#40C4FF;--kit-color:#BB86FC;
    --selection-bg:rgba(105,240,174,0.2);--user-avatar-text:#0B0B0F;--primary:#69F0AE;--success:#69F0AE;--info:#40C4FF;--warning:#FFAB40;--danger:#FF5252;--gray-500:rgba(255,255,255,0.4);--gray-600:rgba(255,255,255,0.55);
}

/* ═══ LIGHT THEME ═══ */
html[data-theme="light"]{
    --bg-body:#F5F5F7;--bg-sidebar:#FFFFFF;--bg-topbar:rgba(255,255,255,0.88);--bg-card:#FFFFFF;--bg-elevated:#F0F0F5;
    --bg-input:#FFFFFF;--bg-hover:rgba(0,0,0,0.03);--bg-active:rgba(105,240,174,0.08);
    --text-primary:rgba(0,0,0,0.87);--text-secondary:rgba(0,0,0,0.55);--text-muted:rgba(0,0,0,0.3);
    --border:rgba(0,0,0,0.08);--border-hover:rgba(0,0,0,0.15);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.06);--shadow-md:0 4px 12px rgba(0,0,0,0.08);--shadow-lg:0 8px 25px rgba(0,0,0,0.12);
    --shadow-glow:0 0 20px rgba(105,240,174,0.12);
    --accent:#00C853;--accent-hover:#00B248;--accent-glow:rgba(0,200,83,0.12);--accent-light:rgba(0,200,83,0.04);
    --btn-close-filter:none;--selection-bg:rgba(0,200,83,0.15);--primary:#00C853;--success:#00C853;--info:#0091EA;--warning:#FF9100;--danger:#FF1744;--gray-500:rgba(0,0,0,0.4);--gray-600:rgba(0,0,0,0.55);
}

/* ═══ THEME TOGGLE ═══ */
.theme-toggle{display:flex;background:var(--bg-elevated);border:1px solid var(--border);border-radius:20px;padding:2px;height:32px;align-items:center;gap:1px}
.theme-toggle button{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;transition:all .2s}
.theme-toggle button.active{background:var(--accent);color:#0B0B0F;box-shadow:0 2px 8px var(--accent-glow)}
.theme-toggle button:hover:not(.active){color:var(--text-primary);background:var(--bg-hover)}

/* ═══ BASE ═══ */
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--selection-bg);color:var(--text-primary)}
html{font-size:15px;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-sans);background:var(--bg-body);color:var(--text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative}

/* ═══ SIDEBAR ═══ */
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--bg-sidebar);border-right:1px solid var(--border);z-index:1050;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden;overflow-y:auto}

/* Sidebar Header/Brand — supports ALL layout variants */
.sidebar-header{padding:1.15rem 1.25rem;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;gap:.5rem}
.sidebar-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.sidebar-logo{width:36px;height:36px;border-radius:8px;object-fit:contain;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.brand-text{font-size:.95rem;font-weight:700;color:var(--accent);letter-spacing:-.01em;line-height:1.2}
.brand-text small{display:block;color:var(--text-muted);font-size:.68rem;font-weight:500;letter-spacing:0}
/* Virement brand variant */
.sidebar-brand-icon{display:flex;align-items:center}
.sidebar-brand-text{color:var(--accent);font-size:.95rem;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.sidebar-brand-text small{display:block;color:var(--text-muted);font-size:.68rem;font-weight:500;letter-spacing:0}

/* Sidebar Navigation — supports ALL variants */
.sidebar-menu{flex:1;overflow-y:auto;padding:.5rem 0}
.sidebar-menu::-webkit-scrollbar{width:4px}.sidebar-menu::-webkit-scrollbar-track{background:transparent}.sidebar-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:2px}
.sidebar-menu .nav{flex-direction:column}

/* Nav sections / labels */
.sidebar-section,.nav-section span,.sidebar-nav-label{display:block;padding:1.5rem 1.25rem .4rem;font-size:.65rem;text-transform:uppercase;letter-spacing:1.8px;color:var(--text-muted);font-weight:700}
.nav-section span{padding:1.5rem 1.25rem .4rem}

/* Nav links — Transfert style (.nav-link) */
.nav-link{display:flex!important;align-items:center;gap:.75rem;padding:.65rem 1.25rem!important;color:var(--text-secondary)!important;text-decoration:none;transition:all .2s;font-size:.87rem;font-weight:500;border-left:3px solid transparent}
.nav-link:hover{color:var(--text-primary)!important;background:var(--bg-hover)}
.nav-link.active{color:var(--accent)!important;background:var(--bg-active);border-left-color:var(--accent);font-weight:600}
.nav-link i{width:22px;text-align:center;font-size:.9rem;opacity:.7}
.nav-link:hover i,.nav-link.active i{opacity:1}
.nav-link.active i{color:var(--accent)}
.nav-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* SAV sidebar nav (ul.sidebar-nav > li > a) */
.sidebar-nav{list-style:none;padding:.75rem 0;margin:0;flex:1;overflow-y:auto}
.sidebar-nav::-webkit-scrollbar{width:4px}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:2px}
.sidebar-nav li a{display:flex;align-items:center;gap:.75rem;padding:.65rem 1.25rem;color:var(--text-secondary);text-decoration:none;transition:all .2s;font-size:.87rem;font-weight:500;border-left:3px solid transparent}
.sidebar-nav li a:hover{color:var(--text-primary);background:var(--bg-hover)}
.sidebar-nav li.active a{color:var(--accent);background:var(--bg-active);border-left-color:var(--accent);font-weight:600}
.sidebar-nav li a i{width:22px;text-align:center;font-size:.9rem;opacity:.7}
.sidebar-nav li.active a i,.sidebar-nav li a:hover i{opacity:1}
.sidebar-nav li.active a i{color:var(--accent)}

/* Virement sidebar nav (.sidebar-nav-link) */
.sidebar-nav-item{}
.sidebar-nav-link{display:flex;align-items:center;gap:.75rem;padding:.65rem 1.25rem;color:var(--text-secondary);font-size:.87rem;font-weight:500;border-left:3px solid transparent;transition:all .2s ease;text-decoration:none}
.sidebar-nav-link:hover{background:var(--bg-hover);color:var(--text-primary)}
.sidebar-nav-link.active{background:var(--bg-active);color:var(--accent);border-left-color:var(--accent);font-weight:600}
.sidebar-nav-link.active i{color:var(--accent)}
.sidebar-nav-link i{width:22px;text-align:center;font-size:.9rem;opacity:.7}
.sidebar-nav-link:hover i,.sidebar-nav-link.active i{opacity:1}

/* Sidebar Footer */
.sidebar-footer{border-top:1px solid var(--border);padding:.75rem 1rem;flex-shrink:0}
.user-info{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--text-secondary)}
.user-info i{font-size:1.2rem;color:var(--accent);margin-right:0}
.user-info span{color:var(--text-primary);font-weight:600;font-size:.82rem}
.user-info small{color:var(--text-muted)}
.user-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));display:flex;align-items:center;justify-content:center;color:var(--user-avatar-text);font-size:.8rem;font-weight:700;flex-shrink:0;box-shadow:0 2px 10px rgba(105,240,174,0.2)}
.user-details{flex:1;min-width:0}
.user-name{color:var(--text-primary);font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{color:var(--text-muted);font-size:.68rem}
.sidebar-footer .btn-outline-light{color:var(--text-secondary);border:1px solid var(--border);font-size:.78rem}
.sidebar-footer .btn-outline-light:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-hover)}
/* Virement user variant */
.sidebar-user{position:relative}
.sidebar-user-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));display:flex;align-items:center;justify-content:center;color:var(--user-avatar-text);font-size:.8rem;font-weight:700;flex-shrink:0;box-shadow:0 2px 10px rgba(105,240,174,0.2)}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-name{display:block;color:var(--text-primary);font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-role{display:block;color:var(--text-muted);font-size:.68rem}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:2px}

/* Sidebar Overlay (Mobile) */
.sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:1040;display:none}
.sidebar-overlay.show{display:block}

/* Sidebar open state — always works regardless of media query */
.sidebar.open{transform:translateX(0)!important}

/* ═══ APP WRAPPER ═══ */
.app-wrapper{display:flex;min-height:100vh}

/* ═══ MAIN CONTENT ═══ */
.main-content{margin-left:var(--sidebar-width);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .3s ease;flex:1}
.main-content.expanded{margin-left:0}

/* ═══ TOPBAR — supports all variants ═══ */
.topbar,.top-bar,.top-header{height:var(--topbar-height);background:var(--bg-topbar);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;position:sticky;top:0;z-index:1000}
.page-title{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin:0;letter-spacing:-.01em}
.top-bar h4{color:var(--text-primary);font-size:1.05rem;font-weight:700;margin:0;letter-spacing:-.01em}
.top-bar-right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.top-bar .badge{font-size:.72rem}
.top-header-left{display:flex;align-items:center;gap:.75rem}
.top-header-right{display:flex;align-items:center;gap:.5rem}
.page-title-header h1{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin:0;letter-spacing:-.01em}

.sidebar-toggle{color:var(--text-secondary);font-size:1.2rem;padding:.35rem;background:none;border:none;cursor:pointer;border-radius:var(--radius-sm);transition:all .15s}
.sidebar-toggle:hover{background:var(--bg-hover);color:var(--text-primary)}
.header-btn{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}
.header-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-hover)}
.header-btn .notification-count{font-size:.65rem!important}

/* ═══ PAGE CONTENT — supports all variants ═══ */
.page-content,.content-area,.page-body{padding:1.5rem;flex:1}

/* ═══ CARDS ═══ */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:all .25s;color:var(--text-primary)}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-hover)}
.card-header{background:var(--bg-elevated);font-weight:600;font-size:.88rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem;color:var(--text-primary)}
.card-body{padding:1.25rem}
.card-header i{color:var(--accent)}
.card-title{color:var(--text-primary);font-weight:700;margin-bottom:.5rem}
.card-text{color:var(--text-secondary)}

/* ═══ STAT CARDS ═══ */
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;border-left:4px solid var(--accent);transition:all .25s;box-shadow:var(--shadow-sm)}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-hover);border-left-color:var(--accent)}
.stat-value,.stat-number,.stat-card .stat-value,.stat-card .stat-number,.stat-card-value{font-size:1.8rem;font-weight:800;color:var(--text-primary);line-height:1;margin-bottom:.25rem}
.stat-label,.stat-card .stat-label,.stat-card-label{font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.stat-icon,.stat-card .stat-icon,.stat-card-icon{width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff}

/* ═══ MINI STAT CARDS ═══ */
.mini-stat-card{display:flex;align-items:center;gap:.85rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1rem;transition:all .2s ease;box-shadow:var(--shadow-sm)}
.mini-stat-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.mini-stat-icon{width:40px;height:40px;min-width:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0}
.mini-stat-value{font-size:1.25rem;font-weight:800;color:var(--text-primary);line-height:1.1}
.mini-stat-label{font-size:.68rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1.2;margin-top:.1rem}

/* ═══ DASHBOARD WIDGETS ═══ */
.dashboard-widget{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.dashboard-widget .widget-header{background:var(--bg-elevated);padding:.85rem 1.25rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.88rem;display:flex;align-items:center;gap:.5rem;color:var(--text-primary)}
.dashboard-widget .widget-header i{color:var(--accent)}
.dashboard-widget .widget-body{padding:1.25rem}

/* ═══ FORM CHOICE CARDS ═══ */
.form-choice-card{display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem;border-radius:var(--radius-lg);background:var(--bg-card);border:2px solid var(--border);box-shadow:var(--shadow-sm);text-decoration:none;color:var(--text-primary);transition:all .3s cubic-bezier(.4,0,.2,1);text-align:center;cursor:pointer}
.form-choice-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg),var(--shadow-glow);border-color:var(--accent);color:var(--text-primary)}
.form-choice-card.holder{border-color:rgba(105,240,174,0.25)}
.form-choice-card.holder:hover{border-color:var(--holder-color);background:linear-gradient(135deg,rgba(105,240,174,0.04),rgba(105,240,174,0.08));box-shadow:var(--shadow-lg),0 0 30px rgba(105,240,174,0.1)}
.form-choice-card.pocket{border-color:rgba(64,196,255,0.25)}
.form-choice-card.pocket:hover{border-color:var(--pocket-color);background:linear-gradient(135deg,rgba(64,196,255,0.04),rgba(64,196,255,0.08));box-shadow:var(--shadow-lg),0 0 30px rgba(64,196,255,0.1)}
.form-choice-card.kit{border-color:rgba(187,134,252,0.25)}
.form-choice-card.kit:hover{border-color:var(--kit-color);background:linear-gradient(135deg,rgba(187,134,252,0.04),rgba(187,134,252,0.08));box-shadow:var(--shadow-lg),0 0 30px rgba(187,134,252,0.1)}
.form-choice-card .icon{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;margin-bottom:1rem;box-shadow:0 4px 15px rgba(0,0,0,0.3)}
.form-choice-card h4{font-size:1rem;font-weight:700;margin-bottom:.4rem;color:var(--text-primary)}
.form-choice-card p{font-size:.82rem;color:var(--text-secondary);margin:0}

/* ═══ BUTTONS ═══ */
.btn{border-radius:var(--radius-sm);font-weight:600;font-size:.87rem;transition:all .2s ease;border:none}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#0B0B0F;border:none;font-weight:700}
.btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,var(--accent-hover),#00C853);box-shadow:0 4px 20px var(--accent-glow);color:#0B0B0F;transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-outline-primary{color:var(--accent);border:1px solid var(--accent);background:transparent}
.btn-outline-primary:hover{background:var(--accent);border-color:var(--accent);color:#0B0B0F}
.btn-secondary{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-hover)}
.btn-success{background:linear-gradient(135deg,#69F0AE,#00E676);color:#0B0B0F;border:none;font-weight:700}
.btn-success:hover{box-shadow:0 4px 20px rgba(105,240,174,0.3);color:#0B0B0F}
.btn-warning{background:linear-gradient(135deg,var(--orange),var(--orange-hover));color:#0B0B0F;border:none;font-weight:700}
.btn-warning:hover{box-shadow:0 4px 20px var(--orange-glow);color:#0B0B0F}
.btn-danger{background:linear-gradient(135deg,#FF5252,#FF1744);color:#fff;border:none}
.btn-danger:hover{box-shadow:0 4px 20px rgba(255,82,82,0.3)}
.btn-info{background:linear-gradient(135deg,#40C4FF,#0091EA);color:#0B0B0F;border:none;font-weight:700}
.btn-outline-secondary{color:var(--text-secondary);border:1px solid var(--border);background:transparent}
.btn-outline-secondary:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-hover)}
.btn-outline-light{color:var(--text-secondary);border:1px solid var(--border)}
.btn-outline-light:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-hover)}
.btn-link{color:var(--text-secondary);text-decoration:none}.btn-link:hover{color:var(--text-primary)}
.btn-sm{font-size:.78rem;padding:.3rem .7rem}
.btn-lg{font-size:.95rem;padding:.7rem 1.8rem}
.btn-icon{display:inline-flex;align-items:center;gap:.4rem}
.btn-icon i{font-size:.95rem}
.btn-group .btn{border-radius:0}.btn-group .btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.btn-group .btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.btn-pdf{background:linear-gradient(135deg,#FF5252,#FF1744);border:none;color:#fff;font-weight:600}
.btn-pdf:hover{color:#fff;box-shadow:0 4px 12px rgba(255,82,82,0.3)}
.btn-ghost{background:transparent;border:1px solid transparent;color:var(--text-secondary);font-weight:600}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border)}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#0B0B0F;border:none;font-weight:700}
.btn-accent:hover,.btn-accent:focus{background:linear-gradient(135deg,var(--accent-hover),#00C853);box-shadow:0 4px 20px var(--accent-glow);color:#0B0B0F;transform:translateY(-1px)}
.btn-accent:active{transform:translateY(0)}
.btn-outline-dark{color:var(--text-primary);border:1px solid var(--border);background:transparent}
.btn-outline-dark:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-hover)}

/* ═══ TABLES ═══ */
.table-wrapper,.table-sav,.table-trf{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--bg-card);border:1px solid var(--border)}
.table-wrapper .table,.table-sav .table,.table-trf .table{margin-bottom:0}
.table{--bs-table-bg:transparent;--bs-table-color:var(--text-primary);color:var(--text-primary)}
.table thead th{background:var(--bg-elevated);border-bottom:1px solid var(--border);font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-weight:700;padding:.75rem 1rem;white-space:nowrap}
.table tbody td{padding:.7rem 1rem;vertical-align:middle;font-size:.87rem;border-bottom:1px solid var(--border);color:var(--text-primary)}
.table tbody tr{transition:background .15s}
.table-hover tbody tr:hover{background:var(--accent-light)!important}
.table-bordered{border-color:var(--border)}.table-bordered td,.table-bordered th{border-color:var(--border)}
.table-striped tbody tr:nth-of-type(odd){background:rgba(255,255,255,0.01)}
.clickable-row{cursor:pointer;transition:background .15s ease}
.clickable-row:hover{background:var(--accent-light)!important}

/* ═══ DataTables DARK ═══ */
.dataTables_wrapper{color:var(--text-secondary)}
.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{color:var(--text-secondary)!important;padding:.75rem 0}
.dataTables_wrapper .dataTables_length select,.dataTables_wrapper .dataTables_filter input{background:var(--bg-input)!important;border:1px solid var(--border)!important;color:var(--text-primary)!important;border-radius:var(--radius-sm)!important;padding:.35rem .65rem}
.dataTables_wrapper .dataTables_filter input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-glow)!important;outline:none}
.dataTables_wrapper .dataTables_paginate .paginate_button{background:var(--bg-card)!important;border:1px solid var(--border)!important;color:var(--text-secondary)!important;border-radius:var(--radius-sm)!important;margin:0 2px;padding:.35rem .7rem}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:var(--bg-hover)!important;color:var(--text-primary)!important;border-color:var(--border-hover)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--accent)!important;border-color:var(--accent)!important;color:#0B0B0F!important;font-weight:700}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{opacity:.35!important}
table.dataTable.no-footer{border-bottom-color:var(--border)!important}
div.dataTables_wrapper div.dataTables_length label,div.dataTables_wrapper div.dataTables_filter label{color:var(--text-secondary)}

/* ═══ BADGES ═══ */
.badge{font-weight:600;font-size:.74rem;padding:.35em .8em;border-radius:6px;letter-spacing:.3px}
.badge-holder{background:rgba(105,240,174,0.15)!important;color:var(--holder-color)!important;border:1px solid rgba(105,240,174,0.3)}
.badge-pocket{background:rgba(64,196,255,0.15)!important;color:var(--pocket-color)!important;border:1px solid rgba(64,196,255,0.3)}
.badge-kit{background:rgba(187,134,252,0.15)!important;color:var(--kit-color)!important;border:1px solid rgba(187,134,252,0.3)}
.badge-pending{background:rgba(255,171,64,0.12)!important;color:#FFAB40!important;border:1px solid rgba(255,171,64,0.25)}
.badge-in_progress{background:rgba(64,196,255,0.12)!important;color:#40C4FF!important;border:1px solid rgba(64,196,255,0.25)}
.badge-received,.badge-completed{background:rgba(105,240,174,0.12)!important;color:#69F0AE!important;border:1px solid rgba(105,240,174,0.25)}
.badge-not_received,.badge-refused{background:rgba(255,82,82,0.12)!important;color:#FF5252!important;border:1px solid rgba(255,82,82,0.25)}
.badge-cancelled{background:rgba(255,255,255,0.06)!important;color:var(--text-muted)!important;border:1px solid var(--border)}
.badge-draft,.badge-brouillon{background:rgba(255,255,255,0.06)!important;color:var(--text-muted)!important;border:1px solid var(--border)}
.badge-sent,.badge-envoyee{background:rgba(64,196,255,0.12)!important;color:#40C4FF!important;border:1px solid rgba(64,196,255,0.25)}
.badge-deposited,.badge-deposee{background:rgba(255,171,64,0.12)!important;color:#FFAB40!important;border:1px solid rgba(255,171,64,0.25)}
.badge-validated,.badge-validee{background:rgba(105,240,174,0.12)!important;color:#69F0AE!important;border:1px solid rgba(105,240,174,0.25)}
.badge-rejected,.badge-rejetee{background:rgba(255,82,82,0.12)!important;color:#FF5252!important;border:1px solid rgba(255,82,82,0.25)}
.bg-success{background:var(--accent)!important;color:#0B0B0F!important}
.bg-warning{background:var(--orange)!important;color:#0B0B0F!important}
.bg-danger{background:#FF5252!important;color:#fff!important}
.bg-info{background:#40C4FF!important;color:#0B0B0F!important}
.bg-secondary{background:var(--bg-elevated)!important;color:var(--text-secondary)!important}
.bg-primary{background:var(--accent)!important;color:#0B0B0F!important}

/* ═══ STATUS BADGES ═══ */
.status-brouillon,.status-draft,.status-secondary{background:rgba(255,255,255,0.06);color:var(--text-muted);border:1px solid var(--border);padding:.3em .75em;border-radius:20px;font-size:.78rem;font-weight:600}
.status-envoyee,.status-sent,.status-info{background:rgba(64,196,255,0.12);color:#40C4FF;border:1px solid rgba(64,196,255,0.25);padding:.3em .75em;border-radius:20px;font-size:.78rem;font-weight:600}
.status-deposee,.status-deposited,.status-warning{background:rgba(255,171,64,0.12);color:#FFAB40;border:1px solid rgba(255,171,64,0.25);padding:.3em .75em;border-radius:20px;font-size:.78rem;font-weight:600}
.status-validee,.status-validated,.status-success{background:rgba(105,240,174,0.12);color:#69F0AE;border:1px solid rgba(105,240,174,0.25);padding:.3em .75em;border-radius:20px;font-size:.78rem;font-weight:600}
.status-rejetee,.status-rejected,.status-danger{background:rgba(255,82,82,0.12);color:#FF5252;border:1px solid rgba(255,82,82,0.25);padding:.3em .75em;border-radius:20px;font-size:.78rem;font-weight:600}
.status-dark{background:rgba(255,255,255,0.04);color:var(--text-muted);border:1px solid var(--border);padding:.3em .75em;border-radius:20px;font-size:.78rem;font-weight:600;opacity:.7}

/* ═══ STOCK BADGE ═══ */
.stock-badge{display:inline-block;padding:.2em .7em;border-radius:20px;font-size:.78rem;font-weight:700}
.stock-badge.in-stock{background:rgba(105,240,174,0.12);color:#69F0AE;border:1px solid rgba(105,240,174,0.25)}
.stock-badge.low-stock{background:rgba(255,171,64,0.12);color:#FFAB40;border:1px solid rgba(255,171,64,0.25)}
.stock-badge.out-stock{background:rgba(255,82,82,0.12);color:#FF5252;border:1px solid rgba(255,82,82,0.25)}

/* ═══ FORMS ═══ */
.form-control,.form-select{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.9rem;padding:.55rem .85rem;transition:all .2s}
.form-control:focus,.form-select:focus{background:var(--bg-input);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);color:var(--text-primary)}
.form-control::placeholder{color:var(--text-muted)}
.form-label{font-size:.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:.4rem}
.form-text{color:var(--text-muted);font-size:.78rem}
.input-group-text{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary)}
.form-check-input{background-color:var(--bg-input);border-color:var(--border)}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-check-input:focus{box-shadow:0 0 0 3px var(--accent-glow)}
textarea.form-control{min-height:100px}
.was-validated .form-control:valid,.form-control.is-valid{border-color:var(--accent);box-shadow:none}
.was-validated .form-control:invalid,.form-control.is-invalid{border-color:#FF5252;box-shadow:none}
.invalid-feedback{color:#FF5252;font-size:.78rem}
.valid-feedback{color:var(--accent);font-size:.78rem}

/* ═══ FORM SECTIONS ═══ */
.sav-form{max-width:920px;margin:0 auto}
.form-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm)}
.section-title,.form-section-title{font-size:.92rem;font-weight:700;color:var(--text-primary);margin-bottom:1.15rem;padding-bottom:.6rem;border-bottom:2px solid var(--accent);display:flex;align-items:center;gap:.5rem}
.section-title i,.form-section-title i{color:var(--accent);font-size:1rem}
.form-group{margin-bottom:1.15rem}
.input-icon-wrapper{position:relative}
.input-icon-wrapper .input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.95rem;pointer-events:none;z-index:2}
.input-icon-wrapper .form-control,.input-icon-wrapper .form-select{padding-left:2.5rem}

/* ═══ PRODUCT TABLE ═══ */
#productsTable{font-size:.87rem;color:var(--text-primary)}
#productsTable thead{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
#productsTable .btn-danger{padding:.2rem .5rem;font-size:.75rem}
#productsTable input[type="number"]{width:80px;text-align:center;background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius-sm)}
#productsTable input[type="number"]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

/* ═══ WAREHOUSE INDICATOR ═══ */
.warehouse-indicator{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.15rem;border-radius:var(--radius-sm);font-weight:600;font-size:.95rem}
.warehouse-indicator.source{background:rgba(105,240,174,0.08);color:var(--accent);border:1px solid rgba(105,240,174,0.2)}
.warehouse-indicator i{font-size:1.2rem}
.warehouse-indicator .wh-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;opacity:.6;display:block}
.warehouse-locked{position:relative}
.warehouse-locked::after{content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:12px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.1);font-size:1.2rem}

/* ═══ TRANSFER FLOW ═══ */
.transfer-flow{display:flex;align-items:stretch;gap:0}
.transfer-flow .flow-arrow{display:flex;align-items:center;justify-content:center;padding:0 .75rem;color:var(--accent);font-size:1.5rem}

/* ═══ WORKFLOW ═══ */
.workflow-progress{gap:.5rem}
.workflow-progress::before{content:'';position:absolute;top:24px;left:10%;right:10%;height:3px;background:var(--border);z-index:0}
.workflow-progress > div{z-index:1}
.step-circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .3s;background:var(--bg-elevated);border:2px solid var(--border);color:var(--text-muted)}
.step-active .step-circle{background:var(--accent)!important;border-color:var(--accent)!important;color:#0B0B0F!important;box-shadow:0 4px 15px var(--accent-glow)}
.step-current .step-circle{animation:pulse-step 2s infinite;box-shadow:0 0 0 4px var(--accent-glow);transform:scale(1.1)}
@keyframes pulse-step{0%,100%{transform:scale(1.1)}50%{transform:scale(1.15)}}
.workflow-steps{padding:0}
.workflow-step{display:flex;align-items:flex-start;gap:.85rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--border);transition:background .2s}
.workflow-step:last-child{border-bottom:none}
.workflow-step:hover{background:var(--bg-hover)}
.workflow-step-number{width:32px;height:32px;min-width:32px;border-radius:50%;background:var(--bg-elevated);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--text-muted);transition:all .3s}
.workflow-step.active .workflow-step-number{background:var(--accent);border-color:var(--accent);color:#0B0B0F;box-shadow:0 0 12px var(--accent-glow)}
.workflow-step.completed .workflow-step-number{background:var(--accent);border-color:var(--accent);color:#0B0B0F;opacity:.6}
.workflow-step strong{font-size:.85rem;color:var(--text-primary);font-weight:600;display:block;line-height:1.3}
.workflow-step small{font-size:.75rem;color:var(--text-muted);line-height:1.3}
.workflow-step.active strong{color:var(--accent)}

/* ═══ DETAIL PAGES ═══ */
.detail-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.detail-ref{font-size:1.4rem;font-weight:800;color:var(--text-primary)}
.detail-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}
.detail-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow-sm)}
.demande-detail{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.demande-header{background:var(--bg-elevated);padding:1.5rem;border-bottom:1px solid var(--border)}
.demande-body{padding:1.5rem}
.detail-row{display:flex;padding:.65rem 0;border-bottom:1px solid var(--border);font-size:.88rem}
.detail-row:last-child{border-bottom:none}
.detail-label{width:180px;flex-shrink:0;color:var(--text-muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.3px}
.detail-value{flex:1;color:var(--text-primary)}
.amount-display{font-size:1.5rem;font-weight:800;color:var(--accent)}
.amount-display.large{font-size:2rem}

/* ═══ TIMELINE ═══ */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:1.25rem}
.timeline-item::before{content:'';width:12px;height:12px;border-radius:50%;background:var(--bg-elevated);border:2px solid var(--border);position:absolute;left:-20px;top:4px}
.timeline-item.active::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.timeline-date{font-size:.72rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.timeline-content{font-size:.87rem;color:var(--text-primary);margin-top:.15rem}

/* ═══ FILTERS BAR ═══ */
.filters-bar{display:flex;align-items:flex-end;gap:.75rem;flex-wrap:wrap;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm)}
.filters-bar .form-label,.filter-label{font-size:.68rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.filter-label{display:block;margin-bottom:.3rem;white-space:nowrap;letter-spacing:.8px}
.filter-group{min-width:0}
.filter-group .form-select,.filter-group .form-control{min-width:130px}
.filter-group-grow{flex:1;min-width:160px}
.filter-group-actions{flex-shrink:0}

/* ═══ SELECT2 DARK ═══ */
.select2-container--bootstrap-5 .select2-selection{background:var(--bg-input)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;color:var(--text-primary)!important;min-height:38px}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered{color:var(--text-primary)!important}
.select2-container--bootstrap-5 .select2-selection--single:focus,.select2-container--bootstrap-5.select2-container--focus .select2-selection,.select2-container--bootstrap-5.select2-container--open .select2-selection{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-glow)!important}
.select2-dropdown{background:var(--bg-card)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;box-shadow:var(--shadow-lg)!important}
.select2-container--bootstrap-5 .select2-results__option{color:var(--text-primary)!important}
.select2-container--bootstrap-5 .select2-results__option--highlighted{background:var(--accent)!important;color:#0B0B0F!important}
.select2-container--bootstrap-5 .select2-results__option--selected{background:var(--accent-light)!important;color:var(--accent)!important}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field{background:var(--bg-input)!important;border:1px solid var(--border)!important;color:var(--text-primary)!important;border-radius:var(--radius-sm)!important}

/* ═══ NOTIFICATIONS / DROPDOWN ═══ */
.notification-dropdown{background:var(--bg-card)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-lg)!important;border-radius:var(--radius)!important}
.notification-dropdown .dropdown-header{color:var(--text-primary);font-weight:700;border-bottom:1px solid var(--border)}
.notification-item{color:var(--text-primary)!important;border-bottom:1px solid var(--border)!important;transition:background .15s ease;white-space:normal!important}
.notification-item:hover{background:var(--bg-hover)!important}
.notification-item strong{color:var(--text-primary)}
.notification-item .text-muted{color:var(--text-secondary)!important}
.dropdown-menu{background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-lg);color:var(--text-primary);border-radius:var(--radius-sm)}
.dropdown-item{color:var(--text-primary);font-size:.87rem;padding:.55rem 1rem;transition:background .15s}
.dropdown-item:hover,.dropdown-item:focus{background:var(--bg-hover);color:var(--text-primary)}
.dropdown-item.text-danger{color:#FF5252!important}
.dropdown-item.text-danger:hover{background:rgba(255,82,82,0.08)}
.dropdown-item i{width:18px;margin-right:.5rem;opacity:.6}
.dropdown-header{color:var(--text-muted)!important;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.dropdown-divider{border-color:var(--border)}

/* ═══ FLASH & ALERTS ═══ */
.alert{border-radius:var(--radius-sm);padding:1rem 1.25rem;display:flex;align-items:center;gap:.75rem;font-weight:500;border:1px solid}
.alert-success{background:rgba(105,240,174,0.08)!important;border-color:rgba(105,240,174,0.2)!important;color:var(--accent)!important}
.alert-danger{background:rgba(255,82,82,0.08)!important;border-color:rgba(255,82,82,0.2)!important;color:#FF5252!important}
.alert-warning{background:rgba(255,171,64,0.08)!important;border-color:rgba(255,171,64,0.2)!important;color:var(--orange)!important}
.alert-info{background:rgba(64,196,255,0.08)!important;border-color:rgba(64,196,255,0.2)!important;color:#40C4FF!important}
.alert .btn-close,.btn-close{filter:var(--btn-close-filter, invert(1) grayscale(100%) brightness(200%))}
.flash-success{background:rgba(105,240,174,0.08);border:1px solid rgba(105,240,174,0.2);color:var(--accent);border-radius:var(--radius-sm);padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:.75rem;font-weight:500;animation:slideUp .3s ease}
.flash-success i{font-size:1.1rem}
.alert-stock{background:rgba(255,82,82,0.08);border:1px solid rgba(255,82,82,0.2);border-radius:var(--radius-sm);padding:.75rem 1rem;color:#FF5252;font-size:.85rem}

/* ═══ SUCCESS OVERLAY ═══ */
.success-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(11,11,15,0.85);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(8px)}
.success-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2.5rem;text-align:center;max-width:450px;box-shadow:var(--shadow-lg);animation:slideUp .4s ease}
.success-card .check-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#0B0B0F;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem;box-shadow:0 8px 25px var(--accent-glow)}
.success-card h4{color:var(--text-primary);font-weight:700;margin-bottom:.5rem}
.success-card p{color:var(--text-secondary);font-size:.92rem}

/* ═══ MODALS ═══ */
.modal-content{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius)}
.modal-header{border-bottom:1px solid var(--border);padding:1.15rem 1.25rem}
.modal-header .modal-title{font-size:1rem;font-weight:700}
.modal-body{padding:1.25rem}
.modal-footer{border-top:1px solid var(--border);padding:1rem 1.25rem}

/* ═══ TABS ═══ */
.nav-tabs{border-bottom:1px solid var(--border)}
.nav-tabs .nav-link{color:var(--text-secondary);border:none;border-bottom:2px solid transparent;padding:.65rem 1rem;font-weight:600;font-size:.87rem;transition:all .2s}
.nav-tabs .nav-link:hover{color:var(--text-primary);border-bottom-color:var(--border-hover)}
.nav-tabs .nav-link.active{color:var(--accent);border-bottom-color:var(--accent);background:transparent}
.tab-content{padding-top:1rem}

/* ═══ PAGINATION ═══ */
.pagination .page-link{background:var(--bg-card);border-color:var(--border);color:var(--text-secondary);font-size:.85rem;padding:.4rem .75rem}
.pagination .page-link:hover{background:var(--bg-hover);color:var(--text-primary)}
.pagination .active .page-link{background:var(--accent);border-color:var(--accent);color:#0B0B0F;font-weight:700}

/* ═══ LIST GROUP ═══ */
.list-group-item{background:var(--bg-card);border-color:var(--border);color:var(--text-primary);transition:background .15s}
.list-group-item:hover{background:var(--bg-hover)}
.list-group-item.active{background:var(--accent-light);border-color:var(--border-accent);color:var(--accent)}

/* ═══ LOGIN PAGE ═══ */
.login-page{min-height:100vh;display:flex;background:var(--bg-body);position:relative;overflow:hidden}
.login-page::before{content:'';position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(105,240,174,0.08) 0%,transparent 70%);top:-150px;right:-150px;border-radius:50%;pointer-events:none}
.login-page::after{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(255,171,64,0.06) 0%,transparent 70%);bottom:-100px;left:-100px;border-radius:50%;pointer-events:none}
.login-left{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.login-right{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border-left:1px solid var(--border);position:relative;z-index:1}
.login-brand-top{position:absolute;top:2rem;left:2rem;display:flex;align-items:center;gap:.75rem;z-index:2}
.login-logo{width:40px;height:40px;border-radius:10px;object-fit:contain;box-shadow:var(--shadow-sm);transition:transform .3s ease}
.login-logo:hover{transform:scale(1.08)}
.login-brand-label{font-size:.85rem;font-weight:700;color:var(--text-secondary);letter-spacing:.5px;text-transform:uppercase}
.login-form-logo{width:48px;height:48px;border-radius:12px;object-fit:contain;margin-bottom:1.25rem;box-shadow:var(--shadow-sm)}
.login-hero-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem;color:#0B0B0F;box-shadow:0 8px 30px var(--accent-glow)}
html[data-theme="light"] .login-hero-icon{color:#fff}
.login-left-content{text-align:center;max-width:400px;padding:2rem}
.login-left-content h1{font-size:2rem;font-weight:800;color:var(--text-primary);margin-bottom:.5rem}
.login-left-content p{color:var(--text-secondary);font-size:1rem;line-height:1.6}
.login-features{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}
.login-feature{display:flex;align-items:center;gap:.6rem;color:var(--text-secondary);font-size:.9rem}
.login-feature i{color:var(--accent);font-size:1.1rem}
.login-form-container{width:100%;max-width:380px;padding:2rem}
.login-form-header h2{font-size:1.5rem;font-weight:800;color:var(--text-primary);margin-bottom:.25rem}
.login-form-header p{color:var(--text-secondary);font-size:.92rem}
.login-form .form-group{margin-bottom:1.15rem}
.btn-login{width:100%;padding:.7rem;font-size:.95rem;margin-top:.5rem}
.login-footer{text-align:center;margin-top:1.5rem}
.login-footer p{color:var(--text-muted);font-size:.8rem;margin:0}
.login-card{width:100%;max-width:400px;padding:2.5rem}
.login-card h2{font-size:1.5rem;font-weight:800;color:var(--text-primary);margin-bottom:.25rem}
.login-card .text-muted{color:var(--text-secondary)!important}
.login-card .form-control{background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary)}
.login-card .form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.login-card .btn-primary{width:100%;padding:.65rem;font-size:.95rem}
.login-brand{text-align:center;color:var(--text-primary);padding:2rem}
.login-brand h1{font-size:2rem;font-weight:800}
.login-brand p{color:var(--text-secondary);font-size:1rem}

/* ═══ EMPTY STATE ═══ */
.empty-state{text-align:center;padding:4rem 1rem}
.empty-state i{font-size:3.5rem;margin-bottom:1rem;opacity:.15;color:var(--text-muted)}
.empty-state h5{color:var(--text-secondary);font-weight:600}
.empty-state p{font-size:.92rem;color:var(--text-muted);margin-bottom:1.5rem}

/* ═══ BOOTSTRAP DARK OVERRIDES ═══ */
.text-dark{color:var(--text-primary)!important}
.text-muted{color:var(--text-secondary)!important}
.text-black-50{color:var(--text-muted)!important}
.border,.border-bottom,.border-top{border-color:var(--border)!important}
.bg-light{background:var(--bg-elevated)!important}
.bg-white{background:var(--bg-card)!important}
.text-body{color:var(--text-primary)!important}
hr{border-color:var(--border);opacity:1}
small,.small{color:var(--text-muted)}
strong{color:var(--text-primary)}
h1,h2,h3,h4,h5,h6{color:var(--text-primary)}
p{color:var(--text-secondary)}
.breadcrumb{background:transparent;padding:0;margin:0}
.breadcrumb-item{font-size:.85rem}.breadcrumb-item+.breadcrumb-item::before{color:var(--text-muted)}
.breadcrumb-item a{color:var(--text-secondary)}.breadcrumb-item a:hover{color:var(--accent)}
.breadcrumb-item.active{color:var(--text-primary)}

/* ═══ LOADING ═══ */
.btn-loading{position:relative;pointer-events:none;opacity:.7}
.btn-loading::after{content:'';position:absolute;width:16px;height:16px;top:50%;left:50%;margin:-8px 0 0 8px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:btnSpin .6s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.spinner-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(11,11,15,0.8);display:flex;align-items:center;justify-content:center;z-index:9999}

/* ═══ UTILITY ═══ */
.text-accent{color:var(--accent)!important}
.bg-accent{background:var(--accent)!important;color:#0B0B0F!important}
.bg-accent-light{background:var(--accent-light)!important}
.border-accent{border-color:var(--accent)!important}
.text-orange{color:var(--orange)!important}
.glow-accent{box-shadow:var(--shadow-glow)}
.rounded-premium{border-radius:var(--radius)!important}
.table-responsive,.table-sav,.table-trf{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ═══ RESPONSIVE ═══ */
@media(max-width:991.98px){
    .sidebar{transform:translateX(-100%);z-index:1050}
    .sidebar.open{transform:translateX(0)}
    .main-content{margin-left:0!important;width:100%!important;max-width:100vw!important}
    .main-content.expanded{margin-left:0}
    .sidebar-toggle{display:flex!important}
    #openSidebar{display:inline-block!important}
    #closeSidebar{display:inline-block!important}
    .login-page{flex-direction:column}
    .login-left{min-height:auto;padding:3rem 1rem 2rem}
    .login-left-content h1{font-size:1.5rem}
    .login-left-content{padding:1rem}
    .login-brand-top{top:1rem;left:1rem}
    .login-right{border-left:none;border-top:1px solid var(--border);min-height:auto}
    .login-form-container{padding:1.5rem 1rem}
    .login-form-logo{width:40px;height:40px}
}

@media(max-width:767.98px){
    /* Prevent horizontal overflow on mobile */
    html,body{overflow-x:hidden!important}
    .app-wrapper{overflow-x:hidden}
    .main-content{overflow-x:hidden;width:100%}
    .content-area,.page-content,.page-body{overflow-x:hidden;max-width:100vw;box-sizing:border-box;width:100%}
    .row{margin-left:0;margin-right:0}
    /* Fix stat label truncation on mobile */
    .stat-label,.stat-card .stat-label,.stat-card-label{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.3}
    .row>[class*="col-"]{padding-left:.5rem;padding-right:.5rem}
    /* Fix for narrow iframes/viewports */
    .col-6.col-lg-3,.col-6.col-lg-2{min-width:0;overflow:hidden}
    .stat-card{overflow:hidden;word-wrap:break-word}
    .stat-label,.stat-card .stat-label,.stat-card-label{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.3}

    .page-content,.content-area,.page-body{padding:1rem .75rem}
    .topbar,.top-bar,.top-header{padding:0 .75rem;max-width:100vw;box-sizing:border-box}
    .page-title,.top-bar h4,.page-title-header h1{font-size:.9rem}
    .top-bar-right,.top-header-right{gap:.35rem}
    .top-bar .badge{font-size:.65rem;padding:.25em .5em}
    .theme-toggle{height:30px}
    .theme-toggle button{width:26px;height:26px;font-size:.72rem}
    .header-btn{width:34px;height:34px}

    /* Stat cards: smaller icon, proper flex */
    .stat-card{padding:.85rem .9rem}
    .stat-card:hover{transform:none}
    .stat-card .d-flex{gap:.5rem}
    .stat-value,.stat-number,.stat-card .stat-value,.stat-card .stat-number,.stat-card-value{font-size:1.3rem}
    .stat-label,.stat-card .stat-label,.stat-card-label{font-size:.65rem}
    .stat-icon,.stat-card .stat-icon,.stat-card-icon{width:34px;height:34px;min-width:34px;font-size:.85rem;flex-shrink:0}
    .mini-stat-card{padding:.7rem .85rem;gap:.65rem}
    .mini-stat-icon{width:34px;height:34px;min-width:34px;font-size:.9rem}
    .mini-stat-value{font-size:1.05rem}
    .mini-stat-label{font-size:.62rem}
    .dashboard-widget .widget-body{padding:1rem}
    .dashboard-widget .widget-header{padding:.75rem 1rem;font-size:.82rem}

    /* Form choice cards: force full width + horizontal layout */
    .col-md-4{flex:0 0 100%!important;max-width:100%!important;width:100%!important}
    .form-choice-card{padding:1.25rem 1rem;flex-direction:row!important;align-items:center!important;text-align:left!important;gap:1rem;width:100%}
    .form-choice-card .icon{width:48px;height:48px;min-width:48px;font-size:1.2rem;margin-bottom:0!important;flex-shrink:0}
    .form-choice-card h4{font-size:.9rem;margin-bottom:.15rem}
    .form-choice-card p{font-size:.78rem}

    .sav-form{padding:1.25rem}
    .detail-header{flex-direction:column;align-items:flex-start;gap:.75rem}
    .detail-ref{font-size:1.1rem}
    .detail-actions{margin-left:0;width:100%}
    .detail-actions .btn{flex:1}
    .detail-card{padding:1rem}
    .detail-row{flex-direction:column;gap:.25rem}
    .detail-label{width:auto}
    .demande-header{padding:1rem}
    .demande-body{padding:1rem}
    .amount-display{font-size:1.2rem}
    .amount-display.large{font-size:1.5rem}
    .transfer-flow{flex-direction:column}
    .transfer-flow .flow-arrow{transform:rotate(90deg);padding:.5rem 0}
    .warehouse-indicator{padding:.65rem .85rem;font-size:.85rem}
    .step-circle{width:38px;height:38px;font-size:.9rem}
    .workflow-step{padding:.7rem 1rem;gap:.65rem}
    .workflow-step-number{width:28px;height:28px;min-width:28px;font-size:.72rem}
    .workflow-step strong{font-size:.8rem}
    .workflow-step small{font-size:.7rem}
    .timeline{padding-left:20px}
    .timeline-item::before{width:10px;height:10px;left:-16px}
    .timeline-content{font-size:.82rem}
    .table-responsive,.table-responsive-wrapper,.table-wrapper,.table-sav,.table-trf{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.75rem;padding:0 .75rem}
    .table{min-width:auto}
    .table thead th{font-size:.68rem;padding:.6rem .65rem;white-space:nowrap}
    .table tbody td{font-size:.8rem;padding:.55rem .65rem}
    .dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{float:none!important;text-align:left!important;margin-bottom:.5rem}
    .dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none!important;text-align:center!important;padding:.5rem 0}
    .dataTables_wrapper .dataTables_filter input{width:100%!important;max-width:100%!important}
    .dataTables_wrapper .dataTables_paginate .paginate_button{padding:.25rem .5rem;margin:0 1px}
    #productsTable{font-size:.8rem}
    #productsTable input[type="number"]{width:60px}
    .card-body{padding:1rem}
    .card-header{padding:.75rem 1rem;font-size:.82rem}
    .form-section{padding:1.15rem}
    .section-title,.form-section-title{font-size:.85rem}
    .btn{font-size:.82rem;padding:.4rem .75rem}
    .btn-sm{font-size:.72rem;padding:.25rem .55rem}
    .btn-lg{font-size:.87rem;padding:.6rem 1.2rem}
    .btn-group .btn{font-size:.78rem;padding:.35rem .6rem}
    .btn-icon{gap:.3rem}
    .form-control,.form-select{font-size:.85rem;padding:.5rem .75rem}
    .form-label{font-size:.78rem}
    textarea.form-control{min-height:80px}
    .badge{font-size:.68rem;padding:.3em .6em}
    .status-brouillon,.status-draft,.status-secondary,.status-envoyee,.status-sent,.status-info,.status-deposee,.status-deposited,.status-warning,.status-validee,.status-validated,.status-success,.status-rejetee,.status-rejected,.status-danger,.status-dark{font-size:.72rem;padding:.25em .6em}
    .modal-dialog{margin:.5rem}
    .modal-body{padding:1rem}
    .modal-header{padding:.85rem 1rem}
    .modal-footer{padding:.75rem 1rem}
    .nav-tabs .nav-link{padding:.5rem .65rem;font-size:.8rem}
    .pagination .page-link{font-size:.78rem;padding:.3rem .6rem}
    .filters-bar{flex-direction:column;align-items:stretch}
    .filter-group,.filter-group-grow{width:100%}
    .filter-group .form-select,.filter-group .form-control{min-width:auto;width:100%}
    .notification-dropdown{width:calc(100vw - 1.5rem)!important;max-width:360px}
    .empty-state{padding:2.5rem .75rem}
    .empty-state i{font-size:2.5rem}
    .empty-state h5{font-size:.95rem}
    .empty-state p{font-size:.82rem}
    .select2-container{width:100%!important}
    .login-hero-icon{width:60px;height:60px;font-size:1.5rem}
    .login-features{margin-top:1.25rem;gap:.5rem}
    .login-feature{font-size:.82rem}
}

@media(max-width:575.98px){
    .page-content,.content-area,.page-body{padding:.65rem .4rem}
    .page-title,.top-bar h4,.page-title-header h1{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}

    /* Stat cards: full width on very small screens */
    .col-6{flex:0 0 100%!important;max-width:100%!important}
    .stat-card{padding:.7rem .75rem}
    .stat-value,.stat-number,.stat-card .stat-value,.stat-card .stat-number,.stat-card-value{font-size:1.15rem}
    .stat-label,.stat-card .stat-label,.stat-card-label{font-size:.6rem;letter-spacing:.3px}
    .stat-icon,.stat-card .stat-icon,.stat-card-icon{width:30px;height:30px;min-width:30px;font-size:.75rem}

    .row.g-3{--bs-gutter-x:.5rem;--bs-gutter-y:.5rem}
    .row.g-4{--bs-gutter-x:.5rem;--bs-gutter-y:.5rem}

    /* Form choice cards: compact on very small */
    .form-choice-card{padding:1rem .85rem}
    .form-choice-card .icon{width:42px;height:42px;min-width:42px;font-size:1rem}
    .form-choice-card h4{font-size:.85rem}
    .form-choice-card p{font-size:.72rem}

    .table{min-width:auto}
    .card-body{padding:.75rem}
    .card-header{padding:.6rem .75rem;font-size:.78rem}
    .login-left{display:none}
    .login-right{flex:1;border:none}
    .login-form-container{max-width:100%;padding:2rem 1.25rem}
    .login-card{padding:1.5rem 1rem}
}

@media(min-width:992px){.sidebar-toggle{display:none!important}#openSidebar,#closeSidebar{display:none!important}}

/* ═══ IFRAME MODE ═══ */
@media(max-height:500px){
    .topbar,.top-bar,.top-header{height:44px}
    .page-title,.top-bar h4,.page-title-header h1{font-size:.88rem}
    .page-content,.content-area,.page-body{padding:.75rem}
    .stat-card{padding:.85rem}
    .stat-value,.stat-card .stat-value,.stat-card-value{font-size:1.3rem}
    .mini-stat-card{padding:.65rem .75rem}
    .card-body{padding:.85rem}
}


/* NARROW VIEWPORT FIX (iframes/small phones) */
@media(max-width:420px){
    .page-content,.content-area,.page-body{padding:.5rem .35rem}
    .row.g-3{--bs-gutter-x:.5rem;--bs-gutter-y:.5rem}
    .row.g-4{--bs-gutter-x:.5rem;--bs-gutter-y:.5rem}
    .stat-card{padding:.6rem .5rem}
    .stat-number,.stat-value,.stat-card .stat-number,.stat-card .stat-value,.stat-card-value{font-size:1.1rem}
    .stat-label,.stat-card .stat-label,.stat-card-label{font-size:.55rem;letter-spacing:.2px;white-space:normal;overflow-wrap:break-word;word-break:break-word}
    .stat-icon,.stat-card .stat-icon,.stat-card-icon{width:28px;height:28px;min-width:28px;font-size:.7rem}
    .topbar,.top-bar,.top-header{padding:0 .5rem}
    .card-body{padding:.75rem .5rem}
    .card-header{padding:.5rem .65rem;font-size:.75rem}
    .btn-sm{font-size:.7rem;padding:.2rem .45rem}
    .btn{font-size:.78rem;padding:.35rem .55rem}
    .d-flex.align-items-center.gap-3{gap:.4rem!important}
    .table thead th{font-size:.6rem;padding:.4rem .35rem}
    .table tbody td{font-size:.72rem;padding:.4rem .35rem}
    .badge{font-size:.6rem;padding:.2em .45em}
    h4.fw-bold,.mb-4 h4{font-size:.9rem}
    .flash-success{padding:.65rem .75rem;font-size:.82rem}
    .mb-4{margin-bottom:.75rem!important}
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.card,.stat-card,.form-section,.table-wrapper,.table-sav,.table-trf,.detail-card,.demande-detail,.dashboard-widget,.form-choice-card,.sav-form{animation:fadeIn .35s ease}
.fade-in{animation:fadeIn .35s ease forwards}
.fade-in.delay-1{animation-delay:.1s;opacity:0}
.fade-in.delay-2{animation-delay:.2s;opacity:0}
.fade-in.delay-3{animation-delay:.3s;opacity:0}

/* ═══ PRINT ═══ */
@media print{.sidebar,.topbar,.top-bar,.top-header,.btn,.sidebar-overlay,.detail-actions{display:none!important}.main-content{margin-left:0!important;width:100%!important;max-width:100vw!important}.page-content,.content-area,.page-body{padding:0!important}body{background:#fff;color:#000}.card{box-shadow:none;border:1px solid #ddd}}