/* ===== CRM v3 – basé sur v2 mais + structuré ===== */ /* Actif si */ .v3 { --bg:#F9FAFB; --surface:#FFFFFF; --text:#0F172A; --muted:#64748B; --border:#E2E8F0; --shadow:0 4px 12px rgba(15,23,42,0.06); --r:12px; --primary:#2563EB; --success:#16A34A; --warning:#F59E0B; --danger:#DC2626; font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); } /* === Sidebar compacte === */ .v3 #sidebar { width:200px; position:fixed; top:0; bottom:0; left:0; background:linear-gradient(180deg,#1E3A8A 0%,#2563EB 40%,#3B82F6 80%); color:#fff; display:flex; flex-direction:column; } .v3 #sidebar .sidebar-brand { font-size:18px; font-weight:700; padding:16px; text-align:center; } .v3 #sidebar .sidebar-nav a { display:flex; align-items:center; gap:10px; padding:10px 16px; margin:4px 12px; border-radius:8px; color:#f1f5f9; text-decoration:none; } .v3 #sidebar .sidebar-nav a:hover { background:rgba(255,255,255,.15); } .v3 #sidebar .sidebar-nav li.active>a { background:rgba(255,255,255,.25); font-weight:600; } /* === Header minimal === */ .v3 header.navbar { margin-left:200px; height:56px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 20px; } .v3 header.navbar input[type="text"] { border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:14px; } /* === Main container === */ .v3 #main-container { margin-left:200px; padding:20px; background:var(--bg); min-height:100vh; } /* === Cards === */ .v3 .block { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:20px; margin-bottom:20px; } .v3 .block-title { font-size:16px; font-weight:600; margin-bottom:12px; border-bottom:1px solid var(--border); padding-bottom:8px; } /* === Dashboard tiles === */ .v3 .nav-horizontal { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; padding:0; margin-bottom:20px; } .v3 .nav-horizontal a { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:120px; text-align:center; font-weight:500; } .v3 .nav-horizontal i { font-size:22px; color:var(--primary); } .v3 .nav-horizontal a:hover { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); } /* === Tables === */ .v3 table.table { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; } .v3 table thead th { background:#F1F5F9; padding:14px; text-align:left; font-weight:600; border-bottom:1px solid var(--border); } .v3 table tbody td { padding:14px; border-bottom:1px solid var(--border); } .v3 table tbody tr:hover td { background:#F9FAFB; } /* === Labels / Chips (on garde v2) === */ .v3 .label, .v3 .badge, .v3 .chip { display:inline-flex; align-items:center; padding:.25rem .6rem; border-radius:999px; font-size:12px; font-weight:600; line-height:1.2; } /* === Boutons === */ .v3 .btn { border-radius:8px; padding:8px 14px; font-weight:600; } .v3 .btn-primary { background:var(--primary); color:#fff; } .v3 .btn-default { background:#fff; border:1px solid var(--border); color:var(--text); } .v3 .btn-success { background:var(--success); color:#fff; } .v3 .btn-warning { background:var(--warning); color:#fff; } .v3 .btn-danger { background:var(--danger); color:#fff; }