@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --navy: #1B2430;
  --navy-light: #26313F;
  --cream: #F5F3EE;
  --paper: #FFFFFF;
  --line: #E4E0D6;
  --amber: #C97A3D;
  --amber-dark: #A9622D;
  --green: #3E7A5B;
  --red: #B4453B;
  --text: #23282F;
  --muted: #6B7280;
  --radius: 8px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--cream);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
}

h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; margin:0 0 4px; color: var(--navy); }
h1{ font-size: 26px; }
h2{ font-size: 19px; }
h3{ font-size: 15px; }

a{ color: var(--amber-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }

.mono{ font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width: 232px; flex-shrink:0;
  background: var(--navy);
  color: #D8DEE9;
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
}
.brand{
  display:flex; align-items:center; gap:10px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand svg{ width:26px; height:26px; flex-shrink:0; }
.brand-name{ font-family:'Fraunces', serif; font-size:19px; font-weight:700; color:#fff; letter-spacing:0.3px; }
.brand-sub{ font-size:10.5px; color:#8993A4; text-transform:uppercase; letter-spacing:1.2px; margin-top:1px; }

.nav{ flex:1; padding: 14px 10px; overflow-y:auto; }
.nav-group-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:#6E7889; margin: 16px 10px 6px; }
.nav a{
  display:flex; align-items:center; gap:10px;
  padding: 9px 12px; border-radius: 6px;
  color: #C4CBD6; font-size: 13.6px; font-weight:500;
  margin-bottom: 2px;
}
.nav a svg{ width:16px; height:16px; opacity:0.85; flex-shrink:0; }
.nav a:hover{ background: rgba(255,255,255,0.06); text-decoration:none; color:#fff; }
.nav a.active{ background: var(--amber); color:#fff; }
.nav a.active svg{ opacity:1; }

.sidebar-foot{ padding: 14px 18px; border-top:1px solid rgba(255,255,255,0.08); font-size:12.5px; color:#8993A4; }
.sidebar-foot a{ color:#C4CBD6; }

.main{ flex:1; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 30px; background: var(--paper); border-bottom:1px solid var(--line);
}
.topbar .who{ font-size:13px; color: var(--muted); }
.topbar .who strong{ color: var(--navy); }
.content{ padding: 26px 30px 50px; max-width: 1180px; }

/* ---------- components ---------- */
.card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 22px;
}
.card-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }

.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.kpi{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; border-left: 4px solid var(--amber);
}
.kpi.ok{ border-left-color: var(--green); }
.kpi.warn{ border-left-color: var(--red); }
.kpi-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.6px; color:var(--muted); margin-bottom:6px; }
.kpi-value{ font-family:'IBM Plex Mono', monospace; font-size:24px; font-weight:600; color:var(--navy); }

table{ width:100%; border-collapse: collapse; }
th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.5px;
  color: var(--muted); font-weight:600; padding: 9px 10px; border-bottom: 2px solid var(--line);
}
td{ padding: 10px 10px; border-bottom: 1px solid var(--line); font-size:13.8px; vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background: #FBFAF7; }
.num{ font-family:'IBM Plex Mono', monospace; text-align:right; }

.badge{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:600; }
.badge.paye{ background:#E4F1EA; color:var(--green); }
.badge.partiel{ background:#FDF0E4; color:var(--amber-dark); }
.badge.impaye{ background:#FBE7E5; color:var(--red); }
.badge.attente{ background:#EFEDE6; color:var(--muted); }
.badge.encaisse{ background:#E4F1EA; color:var(--green); }

.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  padding: 8px 16px; border-radius: 6px; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
  background: var(--amber); color:#fff; text-decoration:none;
}
.btn:hover{ background: var(--amber-dark); text-decoration:none; }
.btn.secondary{ background: var(--paper); color: var(--navy); border:1px solid var(--line); }
.btn.secondary:hover{ background: var(--cream); }
.btn.danger{ background: var(--paper); color: var(--red); border:1px solid #EBD3D0; }
.btn.danger:hover{ background: #FBE7E5; }
.btn.small{ padding:5px 11px; font-size:12.5px; }

form.inline{ display:flex; gap:8px; flex-wrap:wrap; align-items:end; }

.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field label{ font-size:12px; font-weight:600; color:var(--navy); }
.field input, .field select, .field textarea{
  padding: 8px 10px; border:1px solid var(--line); border-radius:6px;
  font-family:'Inter',sans-serif; font-size:13.8px; background:#fff; color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--amber); outline-offset:0; border-color:var(--amber);
}
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; align-items:end; }

.empty{ text-align:center; padding:34px 20px; color:var(--muted); }
.empty svg{ width:34px; height:34px; opacity:0.4; margin-bottom:10px; }

.alert{ padding:11px 14px; border-radius:6px; font-size:13.5px; margin-bottom:16px; }
.alert.error{ background:#FBE7E5; color:#8C332B; border:1px solid #EBD3D0; }
.alert.success{ background:#E4F1EA; color:#2A5B41; border:1px solid #C7E2D3; }

.line-row{ display:grid; grid-template-columns: 2.2fr 1fr 1fr 1fr auto; gap:10px; align-items:end; margin-bottom:10px; }
.line-row .field{ margin-bottom:0; }
.remove-line{ background:none; border:none; color:var(--red); cursor:pointer; font-size:18px; padding:6px; }

.tag{ font-size:11.5px; color:var(--muted); background:#EFEDE6; padding:2px 8px; border-radius:5px; }

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--navy);
  background-image: radial-gradient(circle at 20% 20%, rgba(201,122,61,0.12), transparent 40%);
}
.login-card{
  background: var(--paper); border-radius: 12px; padding: 38px 36px; width: 360px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.login-card .brand{ border:none; padding:0 0 22px; justify-content:flex-start; }
.login-card .brand-name{ color: var(--navy); }

@media (max-width: 860px){
  .sidebar{ display:none; }
  .content{ padding: 18px; }
}