/* ============================================================
   CRM LALEG — Feuille de style principale
   ============================================================ */

/* Variables */
:root {
    --primary:      #2563eb;
    --primary-dark: #1d4ed8;
    --secondary:    #0f172a;
    --bg:           #f1f5f9;
    --card:         #ffffff;
    --border:       #e2e8f0;
    --text:         #1e293b;
    --muted:        #64748b;
    --success:      #16a34a;
    --error:        #dc2626;
    --warning:      #d97706;
    --radius:       8px;
    --shadow:       0 1px 3px rgba(0,0,0,.08);
    --shadow-md:    0 4px 12px rgba(0,0,0,.10);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; font-size:14px; color:var(--text); background:var(--bg); line-height:1.6; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Login ── */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1e3a5f,#2563eb); }
.login-container { background:var(--card); border-radius:12px; padding:40px 36px; width:100%; max-width:420px; box-shadow:0 20px 40px rgba(0,0,0,.25); }
.login-brand { text-align:center; margin-bottom:28px; }
.login-logo { font-size:40px; color:var(--primary); margin-bottom:10px; }
.login-brand h1 { font-size:26px; color:var(--secondary); letter-spacing:-.5px; }
.login-brand h1 strong { color:var(--primary); }
.login-brand p { color:var(--muted); font-size:13px; margin-top:4px; }
.login-hint { text-align:center; color:var(--muted); font-size:12px; margin-top:16px; }
.login-form .form-group { margin-bottom:16px; }
.login-form label { display:block; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
.login-form input { border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; font-size:14px; width:100%; transition:border-color .15s,box-shadow .15s; }
.login-form input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.input-with-toggle { display:flex; }
.input-with-toggle input { border-radius:var(--radius) 0 0 var(--radius); flex:1; }
.toggle-pw { border:1px solid var(--border); border-left:none; border-radius:0 var(--radius) var(--radius) 0; background:#f8fafc; cursor:pointer; padding:0 12px; }

/* ── Header ── */
.site-header { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:24px; background:var(--secondary); color:#fff; padding:0 24px; height:58px; box-shadow:var(--shadow-md); }
.header-brand { display:flex; align-items:center; gap:8px; font-size:16px; white-space:nowrap; color:#fff; min-width:155px; }
.brand-icon { color:#60a5fa; }
.brand-name strong { color:#60a5fa; }
.main-nav { display:flex; gap:4px; flex:1; }
.main-nav a { color:#94a3b8; padding:6px 12px; border-radius:var(--radius); font-size:13px; font-weight:500; transition:background .15s,color .15s; white-space:nowrap; }
.main-nav a:hover, .main-nav a.active { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }
.header-user { display:flex; align-items:center; gap:12px; color:#cbd5e1; font-size:13px; white-space:nowrap; }
.user-name { font-size:13px; }
.btn-logout { color:#94a3b8; border:1px solid #334155; padding:4px 12px; border-radius:var(--radius); font-size:12px; transition:background .15s,color .15s; }
.btn-logout:hover { background:#334155; color:#fff; text-decoration:none; }

/* Cloche notifications */
.notif-bell { position:relative; cursor:pointer; font-size:18px; padding:4px 8px; border-radius:var(--radius); transition:background .15s; }
.notif-bell:hover { background:rgba(255,255,255,.1); }
.notif-count { position:absolute; top:0; right:0; background:#dc2626; color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:1px 5px; min-width:16px; text-align:center; }
.bell-ring { animation:ring .5s ease; }
@keyframes ring { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-15deg)} 75%{transform:rotate(15deg)} }

/* Alerte expiration session */
.session-alert { background:#fef3c7; border-bottom:2px solid var(--warning); color:#92400e; padding:10px 24px; font-size:13px; display:flex; gap:12px; align-items:center; }
.session-alert a { color:var(--warning); font-weight:600; }

/* ── Layout ── */
.main-content { max-width:1280px; margin:0 auto; padding:28px 24px 48px; }
.site-footer { text-align:center; padding:20px; color:var(--muted); font-size:12px; border-top:1px solid var(--border); background:var(--card); }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:10px; }
.page-header h2 { font-size:20px; font-weight:700; color:var(--secondary); }
.date-label { color:var(--muted); font-size:13px; }

/* ── Stats grid ── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow); }
.stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.icon-blue   { background:#dbeafe; color:#2563eb; }
.icon-teal   { background:#ccfbf1; color:#0d9488; }
.icon-orange { background:#ffedd5; color:#d97706; }
.icon-green  { background:#dcfce7; color:#16a34a; }
.icon-purple { background:#ede9fe; color:#7c3aed; }
.stat-info { display:flex; flex-direction:column; }
.stat-value { font-size:24px; font-weight:700; line-height:1.1; color:var(--secondary); }
.stat-label { font-size:11px; color:var(--muted); margin-top:2px; }

/* ── Charts ── */
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.chart-card .chart-body { padding:16px 20px 20px; }

/* ── Card ── */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); }
.card-header h3 { font-size:14px; font-weight:600; color:var(--secondary); }

/* ── Table ── */
.table-wrapper { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { background:#f8fafc; padding:9px 16px; text-align:left; font-weight:600; color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.5px; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:10px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:#f8fafc; }
.text-center { text-align:center; }
.muted { color:var(--muted); }

/* ── Badges ── */
.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.3px; white-space:nowrap; }
.badge-blue   { background:#dbeafe; color:#1d4ed8; }
.badge-orange { background:#ffedd5; color:#c2410c; }
.badge-green  { background:#dcfce7; color:#15803d; }
.badge-red    { background:#fee2e2; color:#b91c1c; }
.badge-teal   { background:#ccfbf1; color:#0f766e; }
.badge-gray   { background:#f1f5f9; color:#475569; }
.badge-purple { background:#ede9fe; color:#6d28d9; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:5px; padding:8px 16px; border-radius:var(--radius); font-size:13px; font-weight:500; border:none; cursor:pointer; transition:background .15s,transform .1s,box-shadow .15s; white-space:nowrap; text-decoration:none; font-family:inherit; }
.btn:hover { text-decoration:none; transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.btn:active { transform:translateY(0); }
.btn-primary  { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); color:#fff; }
.btn-outline  { background:#fff; color:var(--text); border:1px solid var(--border); }
.btn-outline:hover { background:var(--bg); color:var(--text); }
.btn-danger   { background:#fee2e2; color:var(--error); }
.btn-danger:hover { background:#fecaca; }
.btn-full { width:100%; justify-content:center; padding:11px; font-size:14px; }
.btn-sm   { padding:4px 10px; font-size:12px; }

/* ── Forms ── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-full { grid-column:1/-1; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.form-group input, .form-group select, .form-group textarea { border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; font-size:13px; font-family:inherit; color:var(--text); background:#fff; transition:border-color .15s,box-shadow .15s; width:100%; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.form-group textarea { resize:vertical; }
.form-actions { display:flex; gap:10px; padding:0 0 4px; margin-top:4px; }

/* ── Filters ── */
.filters { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.filter-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filter-form input, .filter-form select { border:1px solid var(--border); border-radius:var(--radius); padding:6px 12px; font-size:13px; font-family:inherit; background:#fff; }
.filter-form input:focus, .filter-form select:focus { outline:none; border-color:var(--primary); }
.result-count { font-size:12px; color:var(--muted); white-space:nowrap; }

/* ── Alerts ── */
.alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:16px; font-size:13px; font-weight:500; }
.alert-success { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
.alert-error   { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }
.alert-warning { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }

/* Actions */
.actions { display:flex; gap:6px; }

/* Select inline (attribution rapide) */
.select-inline { border:1px solid var(--border); border-radius:6px; padding:3px 6px; font-size:12px; background:#fff; }

/* Info list (fiche) */
.info-list { display:grid; grid-template-columns:140px 1fr; gap:8px 16px; font-size:13px; }
.info-list dt { color:var(--muted); font-weight:600; }

/* Code */
code { background:#f1f5f9; border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-size:12px; font-family:monospace; }

/* ── Responsive ── */
@media (max-width:900px) {
    .charts-grid { grid-template-columns:1fr; }
    .fiche-grid  { grid-template-columns:1fr !important; }
}
@media (max-width:640px) {
    .main-content { padding:16px; }
    .form-grid { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .page-header { flex-direction:column; align-items:flex-start; }
    .main-nav a { font-size:11px; padding:4px 8px; }
    .header-user .user-name { display:none; }
    .site-header { gap:8px; }
}