/* ============================================================
   BOUTIQUE v4 — styles.css
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --sw:    252px;
    --th:    62px;
    --blue:  #1a56db;
    --bluel: #2563eb;
    --acc:   #f0a500;
    --grn:   #22c55e;
    --red:   #ef4444;
    --font:  'Plus Jakarta Sans', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body   { font-family: var(--font); background: #f0f4f8; margin: 0; color: #1e293b; }
a      { text-decoration: none; }

/* ── SIDEBAR ──────────────────────────────────── */
.sidebar {
    position: fixed; top:0; left:0; bottom:0;
    width: var(--sw); background: #0d1117;
    display: flex; flex-direction: column;
    z-index: 1040; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #1e293b transparent;
}
.sb-brand { padding:18px 16px 14px; border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0; }
.sb-brand .logo { display:flex; align-items:center; gap:10px; }
.sb-brand .logo-icon { width:36px; height:36px; border-radius:9px; background:linear-gradient(135deg,#f0a500,#e07b00); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem; flex-shrink:0; }
.sb-brand h5 { color:#fff; margin:0; font-size:.86rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-brand small { color:#475569; font-size:.67rem; }
.sb-section { padding:12px 14px 3px; font-size:.61rem; text-transform:uppercase; letter-spacing:.14em; color:#475569; font-weight:700; }
.sb-link { display:flex; align-items:center; gap:9px; padding:8px 10px; margin:1px 7px; border-radius:8px; color:#94a3b8; font-size:.81rem; transition:all .15s; cursor:pointer; }
.sb-link i { width:16px; text-align:center; font-size:.8rem; flex-shrink:0; }
.sb-link:hover { background:rgba(255,255,255,.06); color:#e2e8f0; }
.sb-link.active { background:rgba(26,86,219,.22); color:#93c5fd; }
.sb-badge { margin-left:auto; background:#ef4444; color:#fff; border-radius:10px; font-size:.64rem; padding:1px 6px; font-weight:700; }
.sb-new   { margin-left:auto; background:rgba(34,197,94,.2); color:#4ade80; border-radius:10px; font-size:.62rem; padding:1px 6px; font-weight:700; }
.sb-user  { margin-top:auto; padding:12px 14px; border-top:1px solid rgba(255,255,255,.07); display:flex; align-items:center; gap:9px; flex-shrink:0; }
.sb-avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; color:#fff; }
.av-admin      { background:linear-gradient(135deg,#1a56db,#3b82f6); }
.av-vendeur    { background:linear-gradient(135deg,#059669,#34d399); }
.av-magasinier { background:linear-gradient(135deg,#d97706,#fbbf24); }
.sb-user-info { flex:1; min-width:0; }
.sb-uname { color:#e2e8f0; font-size:.77rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-urole { font-size:.65rem; text-transform:capitalize; }
.ur-admin      { color:#93c5fd; }
.ur-vendeur    { color:#6ee7b7; }
.ur-magasinier { color:#fcd34d; }
.btn-logout { background:none; border:none; color:#475569; padding:5px; border-radius:6px; cursor:pointer; transition:color .15s; }
.btn-logout:hover { color:#f87171; }

/* ── TOPBAR ───────────────────────────────────── */
.topbar { position:fixed; top:0; left:var(--sw); right:0; height:var(--th); background:#fff; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; padding:0 22px; z-index:1030; }
.topbar-title { font-size:.93rem; font-weight:700; color:#1e293b; margin:0; }
.role-chip { padding:3px 10px; border-radius:20px; font-size:.67rem; font-weight:700; margin-left:9px; text-transform:capitalize; }
.rc-admin      { background:#dbeafe; color:#1d4ed8; }
.rc-vendeur    { background:#dcfce7; color:#15803d; }
.rc-magasinier { background:#fef3c7; color:#b45309; }
.topbar-actions { margin-left:auto; }
.btn-pos { background:var(--blue); color:#fff; border:none; border-radius:8px; padding:7px 14px; font-size:.77rem; font-weight:700; display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-family:var(--font); transition:background .15s; }
.btn-pos:hover { background:var(--bluel); color:#fff; text-decoration:none; }

/* ── MAIN ─────────────────────────────────────── */
.main-wrap { margin-left:var(--sw); padding-top:calc(var(--th) + 20px); padding-bottom:48px; padding-left:22px; padding-right:22px; min-height:100vh; }

/* ── CARDS ────────────────────────────────────── */
.card { border:none !important; border-radius:13px !important; box-shadow:0 1px 3px rgba(0,0,0,.06) !important; background:#fff; }
.card-header { background:#fff !important; border-bottom:1px solid #f1f5f9 !important; border-radius:13px 13px 0 0 !important; font-weight:700; font-size:.86rem; color:#1e293b; padding:14px 18px; }
.card-body { padding:18px; }

/* KPI */
.kpi { border-radius:14px; padding:20px 22px; color:#fff; position:relative; overflow:hidden; }
.kpi .ki { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:2.4rem; opacity:.13; }
.kpi .kl { font-size:.72rem; opacity:.85; font-weight:500; }
.kpi .kv { font-size:1.5rem; font-weight:800; margin:3px 0 2px; line-height:1; }
.kpi .ks { font-size:.69rem; opacity:.7; }
.kb { background:linear-gradient(135deg,#1a56db,#3b82f6); }
.kg { background:linear-gradient(135deg,#059669,#10b981); }
.ka { background:linear-gradient(135deg,#d97706,#f59e0b); }
.kp { background:linear-gradient(135deg,#7c3aed,#a78bfa); }
.kt { background:linear-gradient(135deg,#0891b2,#22d3ee); }
.kr { background:linear-gradient(135deg,#dc2626,#f87171); }
.kx { background:linear-gradient(135deg,#9a3412,#c2410c); }

/* ── TABLES ───────────────────────────────────── */
.table th { font-size:.71rem; text-transform:uppercase; letter-spacing:.07em; color:#64748b; font-weight:700; border-bottom:2px solid #f1f5f9 !important; border-top:none !important; padding:10px 14px; white-space:nowrap; }
.table td { vertical-align:middle; font-size:.83rem; padding:11px 14px; border-color:#f8fafc; }
.table tbody tr:hover { background:#fafbff; }

/* ── PILLS ────────────────────────────────────── */
.pill { border-radius:20px; padding:3px 11px; font-size:.71rem; font-weight:700; display:inline-block; }
.pg { background:#dcfce7; color:#15803d; }
.pr { background:#fee2e2; color:#b91c1c; }
.pa { background:#fef3c7; color:#b45309; }
.pb { background:#dbeafe; color:#1d4ed8; }
.pp { background:#f1f5f9; color:#475569; }
.ppu{ background:#f3e8ff; color:#7c3aed; }

/* ── FORMS ────────────────────────────────────── */
.form-control, .custom-select { border-radius:8px; border:1.5px solid #e2e8f0; font-size:.83rem; padding:9px 13px; color:#1e293b; transition:border-color .15s; font-family:var(--font); }
.form-control:focus, .custom-select:focus { border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(26,86,219,.1); }
label { font-size:.8rem; font-weight:600; color:#374151; margin-bottom:4px; display:block; }
.btn { font-family:var(--font); font-weight:600; border-radius:8px; font-size:.82rem; }
.btn-primary { background:var(--blue); border-color:var(--blue); }
.btn-primary:hover { background:var(--bluel); border-color:var(--bluel); }
.btn-sm { border-radius:7px; font-size:.77rem; padding:5px 10px; }

/* ── ALERTS ───────────────────────────────────── */
.alert { border:none; border-radius:10px; font-size:.83rem; }
.alert-success { background:#f0fdf4; color:#15803d; border-left:3px solid #22c55e; }
.alert-danger  { background:#fff1f2; color:#b91c1c; border-left:3px solid #ef4444; }
.alert-warning { background:#fffbeb; color:#b45309; border-left:3px solid #f59e0b; }

/* ── PRODUIT PHOTO ────────────────────────────── */
.prod-photo { width:40px; height:40px; border-radius:8px; object-fit:cover; border:1px solid #e2e8f0; background:#f8fafc; }
.prod-photo-lg { width:100%; max-height:260px; object-fit:cover; border-radius:12px; }
.no-photo { width:40px; height:40px; border-radius:8px; background:#f1f5f9; border:1px solid #e2e8f0; display:inline-flex; align-items:center; justify-content:center; color:#94a3b8; font-size:.88rem; }

/* ── POS ──────────────────────────────────────── */
.pos-wrap { height:calc(100vh - 130px); overflow-y:auto; }
.prod-tile { border:1.5px solid #e2e8f0; border-radius:11px; overflow:hidden; cursor:pointer; transition:all .15s; }
.prod-tile:hover { border-color:var(--blue); box-shadow:0 4px 14px rgba(26,86,219,.15); transform:translateY(-2px); }
.prod-tile.out  { opacity:.38; pointer-events:none; }
.tile-img { width:100%; height:68px; object-fit:cover; background:#f8fafc; }
.tile-body { padding:7px 8px 9px; }
.cart-row { border-bottom:1px solid #f1f5f9; padding:7px 0; }
.cart-row:last-child { border-bottom:none; }
.total-box { background:#0d1117; border-radius:12px; color:#fff; padding:14px 16px; }

/* Saisie quantite clavier */
.qty-inp { width:56px; text-align:center; border:1.5px solid #e2e8f0; border-radius:7px; font-size:.82rem; padding:3px 4px; font-family:var(--font); font-weight:700; transition:border-color .15s; }
.qty-inp:focus { border-color:var(--blue); outline:none; box-shadow:0 0 0 2px rgba(26,86,219,.12); }

/* Exoneration */
.exo-inp { width:90px; text-align:right; border:1.5px solid rgba(240,165,0,.4); border-radius:7px; font-size:.82rem; padding:3px 6px; font-family:var(--font); font-weight:700; background:rgba(240,165,0,.08); color:#92400e; }
.exo-inp:focus { border-color:#f0a500; outline:none; }

/* Dette */
.dette-bar { height:6px; border-radius:10px; background:#fee2e2; overflow:hidden; }
.dette-fill { height:100%; border-radius:10px; background:#ef4444; transition:width .5s; }

/* Modal */
.modal-content { border:none; border-radius:14px; }
.modal-header  { border-bottom:1px solid #f1f5f9; padding:16px 20px; }
.modal-footer  { border-top:1px solid #f1f5f9; padding:12px 20px; }

@media(max-width:768px){
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main-wrap { margin-left:0; }
    .topbar { left:0; }
    .pos-wrap { height:auto; max-height:48vh; }
}