@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --paper:#F4F5F7;
  --card:#FFFFFF;
  --ink:#1A1D23;
  --muted:#6B7280;
  --rule:#E5E7EB;
  --accent:#4F46E5;
  --accent-dark:#3730A3;
  --accent-soft:#EEF0FF;
  --alert:#DC2626;
  --money-pos:#059669;
  --money-neg:#DC2626;
  --amber:#D97706;
  --amber-soft:#FEF3C7;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; background:var(--paper); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:inherit; font-weight:700; letter-spacing:-.01em;}
.num{font-variant-numeric:tabular-nums;}

input[type="date"]{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* --- auth pages --- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:36px 32px; width:100%; max-width:360px; box-shadow:var(--shadow);}
.auth-card h1{font-size:1.4rem; margin:0 0 4px; color:var(--ink); font-weight:700;}
.auth-card p.tagline{color:var(--muted); font-size:.85rem; margin:0 0 24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:.8rem; color:var(--muted); font-weight:500; margin-bottom:5px;}
.field input{width:100%; padding:9px 12px; border:1px solid var(--rule); border-radius:8px; background:#fff; color:var(--ink); font-size:.9rem;}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.btn{display:block; width:100%; padding:10px; border:none; border-radius:8px; background:var(--accent); color:#fff; font-weight:600; font-size:.9rem; cursor:pointer;}
.btn:hover{background:var(--accent-dark);}
.error{background:#FEF2F2; color:var(--alert); border:1px solid #FECACA; padding:10px 12px; border-radius:8px; font-size:.85rem; margin-bottom:16px;}
.switch{margin-top:18px; font-size:.85rem; color:var(--muted); text-align:center;}
.switch a{color:var(--accent); font-weight:600; text-decoration:none;}

/* --- sidebar façon logiciel métier --- */
.app-shell{min-height:100vh;}
.sidebar{
  width:232px; flex-shrink:0; background:var(--card); border-right:1px solid var(--rule);
  display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:10;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid var(--rule);}
.sidebar-brand .avatar{
  width:32px; height:32px; border-radius:8px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.75rem; flex-shrink:0;
}
.sidebar-brand .name{font-size:.85rem; font-weight:600; line-height:1.2; color:var(--ink);}
.sidebar-brand .sub{font-size:.7rem; color:var(--muted);}
.sidebar-section{padding:16px 12px 6px; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700;}
.sidebar nav{display:flex; flex-direction:column; gap:1px; padding:0 8px;}
.sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  color:#374151; text-decoration:none; font-size:.86rem; font-weight:500;
}
.sidebar nav a .ic{width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.sidebar nav a .ic svg{width:17px; height:17px; stroke:currentColor;}
.sidebar nav a:hover{background:#F3F4F6;}
.sidebar nav a.active{background:var(--accent-soft); color:var(--accent-dark); font-weight:600;}
.sidebar-footer{margin-top:auto; padding:14px 16px; border-top:1px solid var(--rule); font-size:.8rem; display:flex; justify-content:space-between; align-items:center;}
.sidebar-footer a{color:var(--muted); text-decoration:none; font-size:.78rem;}
.sidebar-footer a:hover{color:var(--alert);}

.topsearch{display:flex; align-items:center; gap:8px; padding:14px 28px; border-bottom:1px solid var(--rule); background:var(--card); margin-left:232px; position:relative;}
.topsearch svg{width:16px; height:16px; stroke:var(--muted); flex-shrink:0;}
.topsearch input{flex:1; border:none; outline:none; font-size:.88rem; background:transparent; color:var(--ink);}
.topsearch input::placeholder{color:#9CA3AF;}

main{flex:1; max-width:1360px; margin:0 0 0 232px; padding:28px 40px 64px;}
.wide-main{max-width:1600px;}

.ledger-total{background:var(--accent); color:#fff; border-radius:10px; padding:20px 24px; display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px;}
.ledger-total .label{font-size:.8rem; opacity:.85;}
.ledger-total .value{font-size:2rem; font-weight:700;}
.ledger-total .count{font-size:.8rem; opacity:.85;}

.dropzone{border:1.5px dashed var(--rule); border-radius:10px; padding:28px; text-align:center; color:var(--muted); background:var(--card); cursor:pointer; margin-bottom:22px;}
.dropzone.drag{border-color:var(--accent); color:var(--accent-dark); background:var(--accent-soft);}
.dropzone input{display:none;}
.dropzone .sub{font-size:.8rem; margin-top:4px;}

.review-card{background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:10px; padding:16px; margin-bottom:12px; box-shadow:var(--shadow);}
.review-card .fname{font-size:.8rem; color:var(--muted); margin-bottom:10px; word-break:break-all;}
.review-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px;}
.review-grid .full{grid-column:1 / -1;}
.review-grid label{display:block; font-size:.72rem; color:var(--muted); margin-bottom:3px;}
.review-grid input{width:100%; padding:8px 10px; border:1px solid var(--rule); border-radius:8px; font-size:.9rem; background:#fff; color:var(--ink);}
.review-actions{display:flex; gap:8px; margin-top:12px;}
.btn-sm{padding:8px 14px; border-radius:8px; border:none; font-size:.85rem; font-weight:600; cursor:pointer;}
.btn-sm.primary{background:var(--accent); color:#fff;}
.btn-sm.primary:hover{background:var(--accent-dark);}
.btn-sm.ghost{background:#fff; border:1px solid var(--rule); color:var(--ink);}
.btn-sm.ghost:hover{background:#F9FAFB;}

.section-head{display:flex; justify-content:space-between; align-items:center; margin:28px 0 10px;}
.section-head h2{font-size:1.05rem; margin:0; color:var(--ink); font-weight:700;}
.export-link{font-size:.82rem; color:var(--ink); text-decoration:none; border:1px solid var(--rule); padding:6px 12px; border-radius:8px; background:var(--card);}
.export-link:hover{border-color:var(--accent); color:var(--accent-dark);}

.folder{background:var(--card); border:1px solid var(--rule); border-radius:10px; margin-bottom:10px; overflow:hidden;}
.folder-head{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; cursor:pointer;}
.folder-head .name{font-weight:600;}
.folder-head .sub{font-size:.78rem; color:var(--muted);}
.folder-head .amount{font-size:1.05rem; font-weight:600;}
.folder-body{border-top:1px solid var(--rule);}
.inv-row{display:grid; grid-template-columns:1fr auto auto auto auto; gap:10px; align-items:center; padding:10px 16px; border-bottom:1px solid #F3F4F6; font-size:.87rem;}
.inv-row:last-child{border-bottom:none;}
.inv-row a{color:var(--accent-dark); text-decoration:none;}
.payment-date-input{font-size:.78rem; padding:3px 5px; border:1px solid var(--rule); border-radius:6px; background:#fff;}
.inv-row .del{background:none; border:none; color:var(--alert); cursor:pointer; font-size:1rem;}
.muted-note{color:var(--muted); text-align:center; padding:20px 0; font-size:.9rem;}

/* --- listes génériques (clients, catalogue, devis/factures) --- */
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.toolbar h1{font-size:1.35rem; margin:0; color:var(--ink); font-weight:700;}
.filters{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.filters select, .filters input{padding:7px 10px; border:1px solid var(--rule); border-radius:8px; background:var(--card); font-size:.85rem; color:var(--ink);}
.panel{background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:20px; margin-bottom:18px; box-shadow:var(--shadow);}
.panel h2{font-size:1rem; margin:0 0 14px; color:var(--ink); font-weight:700;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
.data-table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--rule); border-radius:10px; overflow:hidden; box-shadow:var(--shadow);}
.data-table th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:12px 16px; border-bottom:1px solid var(--rule); background:#FAFAFB;}
.data-table td{padding:13px 16px; border-bottom:1px solid #F3F4F6; font-size:.87rem; vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:#FAFAFB;}
.data-table td.num{text-align:right;}
.data-table a.row-link{color:var(--ink); text-decoration:none; font-weight:600;}
.data-table a.row-link:hover{color:var(--accent);}
.icon-btn{background:none; border:none; cursor:pointer; color:var(--muted); font-size:.95rem; padding:4px 6px; border-radius:6px;}
.icon-btn:hover{color:var(--ink); background:#F3F4F6;}
.icon-btn.danger:hover{color:var(--alert); background:#FEF2F2;}
.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:600;}
.badge-brouillon{background:#F3F4F6; color:var(--muted);}
.badge-envoye{background:#DBEAFE; color:#1D4ED8;}
.badge-accepte{background:#DCFCE7; color:var(--money-pos);}
.badge-refuse{background:#FEE2E2; color:var(--money-neg);}
.badge-paye{background:#DCFCE7; color:var(--money-pos);}
.badge-annule{background:#F3F4F6; color:var(--muted); text-decoration:line-through;}
.type-devis{color:#6B7280;}
.type-facture{color:var(--accent-dark); font-weight:600;}
.type-acompte, .type-situation{color:#B45309;}
.type-avoir{color:var(--alert);}

.type-toggle{display:flex; gap:8px; margin-bottom:16px;}
.type-btn{padding:8px 16px; border-radius:20px; border:1px solid var(--rule); background:var(--card); color:var(--muted); font-size:.85rem; font-weight:600; cursor:pointer;}
.type-btn.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.client-type-tag{display:inline-block; font-size:.72rem; padding:2px 8px; border-radius:10px; background:#F3F4F6; color:var(--muted);}