/* ==========================================================================
   Finance Manager — unified design system
   One theme, shared across every page.
   ========================================================================== */
:root {
  --indigo:#4f46e5; --indigo-dark:#4338ca; --indigo-soft:#eef2ff;
  --green:#059669; --green-soft:#ecfdf5;
  --red:#dc2626;   --red-soft:#fef2f2;
  --amber:#d97706; --amber-soft:#fffbeb;
  --slate-900:#0f172a; --slate-700:#334155; --slate-500:#64748b;
  --slate-300:#cbd5e1; --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc;
  --bg:#f1f5f9; --card:#ffffff; --text:#0f172a; --muted:#64748b;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 10px 30px rgba(15,23,42,.10);
  --font:'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.55; }
a { text-decoration:none; color:inherit; }

/* ---------- Top navigation ---------- */
.nav { background:var(--card); border-bottom:1px solid var(--slate-200); position:sticky; top:0; z-index:50; box-shadow:var(--shadow); }
.nav-inner { max-width:1400px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; gap:1.5rem; height:64px; }
.nav-brand { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.2rem; color:var(--indigo); white-space:nowrap; }
.nav-brand i { font-size:1.4rem; }
.nav-links { display:flex; align-items:center; gap:.25rem; flex:1; }
.nav-link { padding:.55rem .9rem; border-radius:var(--radius-sm); font-weight:600; font-size:.92rem; color:var(--slate-700); display:inline-flex; align-items:center; gap:.45rem; transition:.15s; }
.nav-link:hover { background:var(--slate-100); color:var(--indigo); }
.nav-link.active { background:var(--indigo-soft); color:var(--indigo); }
.nav-user { display:flex; align-items:center; gap:.75rem; white-space:nowrap; }
.nav-user .who { text-align:right; line-height:1.2; }
.nav-user .who strong { font-size:.9rem; }
.nav-user .who small { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; }
.nav-toggle { display:none; background:none; border:none; font-size:1.5rem; color:var(--slate-700); cursor:pointer; }

/* ---------- Page shell ---------- */
.wrap { max-width:1400px; margin:0 auto; padding:2rem 1.5rem 3rem; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.page-head h1 { font-size:1.8rem; font-weight:800; display:flex; align-items:center; gap:.6rem; }
.page-head .sub { color:var(--muted); font-size:.95rem; margin-top:.2rem; }

/* ---------- Buttons ---------- */
.btn { padding:.7rem 1.2rem; border:none; border-radius:var(--radius-sm); font-weight:700; font-size:.9rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; transition:.15s; font-family:inherit; line-height:1; white-space:nowrap; }
.btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--indigo); color:#fff; }
.btn-primary:hover { background:var(--indigo-dark); }
.btn-success { background:var(--green); color:#fff; }
.btn-danger  { background:var(--red); color:#fff; }
.btn-amber   { background:var(--amber); color:#fff; }
.btn-ghost   { background:var(--slate-100); color:var(--slate-700); }
.btn-ghost:hover { background:var(--slate-200); }
.btn-sm { padding:.45rem .8rem; font-size:.8rem; }
.btn-block { width:100%; justify-content:center; }

/* ---------- Cards & stats ---------- */
.card { background:var(--card); border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-pad { padding:1.5rem; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin-bottom:1.75rem; }
.stat { background:var(--card); border:1px solid var(--slate-200); border-radius:var(--radius); padding:1.4rem 1.5rem; box-shadow:var(--shadow);
  position:relative; overflow:hidden; }
.stat::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--indigo); }
.stat.green::before { background:var(--green); } .stat.red::before { background:var(--red); } .stat.amber::before { background:var(--amber); }
.stat .label { color:var(--muted); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; display:flex; align-items:center; gap:.4rem; }
.stat .value { font-size:1.9rem; font-weight:800; margin-top:.35rem; }
.stat.green .value { color:var(--green); } .stat.red .value { color:var(--red); } .stat.amber .value { color:var(--amber); } .stat.indigo .value { color:var(--indigo); }
.stat .value small { font-size:.9rem; color:var(--muted); font-weight:600; }

/* ---------- Alerts ---------- */
.alert { padding:1rem 1.25rem; border-radius:var(--radius-sm); margin-bottom:1.5rem; display:flex; align-items:center; gap:.7rem; font-weight:600; }
.alert-success { background:var(--green-soft); color:#065f46; border-left:4px solid var(--green); }
.alert-danger  { background:var(--red-soft);  color:#991b1b; border-left:4px solid var(--red); }
.alert-warning { background:var(--amber-soft); color:#92400e; border-left:4px solid var(--amber); }

/* ---------- Tables ---------- */
.table-card { background:var(--card); border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:1.75rem; }
.table-scroll { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; }
table.data th { background:var(--slate-50); padding:.95rem 1.1rem; text-align:left; font-size:.74rem; font-weight:700;
  color:var(--slate-500); text-transform:uppercase; letter-spacing:.6px; white-space:nowrap; border-bottom:1px solid var(--slate-200); }
table.data td { padding:1rem 1.1rem; border-bottom:1px solid var(--slate-100); vertical-align:middle; }
table.data tr:last-child td { border-bottom:none; }
table.data tbody tr:hover { background:var(--slate-50); }
.t-name { font-weight:700; }
.t-sub { color:var(--muted); font-size:.8rem; }
.t-capital { color:var(--slate-900); font-weight:700; }
.t-interest { color:var(--green); font-weight:700; }
.t-due { color:var(--red); font-weight:800; }
.t-num { font-variant-numeric:tabular-nums; }

/* ---------- Badges ---------- */
.badge { padding:.35rem .8rem; border-radius:50px; font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:.4rem; }
.badge-paid    { background:var(--green-soft); color:var(--green); }
.badge-unpaid  { background:var(--red-soft); color:var(--red); }
.badge-closed  { background:var(--indigo-soft); color:var(--indigo); }
.badge-neutral { background:var(--slate-100); color:var(--slate-500); }

/* ---------- Forms ---------- */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.field { display:flex; flex-direction:column; gap:.45rem; }
.field.full { grid-column:1/-1; }
.field label { font-weight:600; font-size:.9rem; color:var(--slate-700); display:flex; align-items:center; gap:.4rem; }
.field input, .field select, .field textarea {
  padding:.8rem 1rem; border:1.5px solid var(--slate-200); border-radius:var(--radius-sm); font-size:.95rem; font-family:inherit;
  background:#fff; transition:.15s; width:100%; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-soft); }
.field textarea { min-height:96px; resize:vertical; }
.field .hint { font-size:.78rem; color:var(--muted); }
.input-affix { position:relative; }
.input-affix .affix { position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:700; pointer-events:none; }
.input-affix input { padding-right:2.5rem; }

/* ---------- Calc preview ---------- */
.calc { background:var(--indigo-soft); border:1px solid #c7d2fe; border-radius:var(--radius); padding:1.25rem 1.5rem; margin:1.5rem 0; }
.calc-row { display:flex; justify-content:space-between; padding:.4rem 0; font-size:.95rem; }
.calc-row .k { color:var(--indigo-dark); font-weight:600; }
.calc-row .v { font-weight:700; color:var(--indigo); font-variant-numeric:tabular-nums; }
.calc-row.total { border-top:2px solid #c7d2fe; margin-top:.5rem; padding-top:.8rem; font-size:1.15rem; }

/* ---------- Empty state ---------- */
.empty { text-align:center; padding:4rem 2rem; color:var(--muted); }
.empty i { font-size:3.5rem; color:var(--slate-300); margin-bottom:1rem; display:block; }
.empty h3 { color:var(--slate-700); margin-bottom:.5rem; }

/* ---------- Pagination ---------- */
.pager { display:flex; justify-content:center; gap:.4rem; margin:1.5rem 0; flex-wrap:wrap; }
.pager a { padding:.55rem .9rem; border:1.5px solid var(--slate-200); border-radius:var(--radius-sm); color:var(--slate-700); font-weight:600; font-size:.88rem; transition:.15s; }
.pager a:hover, .pager a.active { background:var(--indigo); color:#fff; border-color:var(--indigo); }

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%); }
.login-card { background:#fff; width:100%; max-width:400px; border-radius:18px; padding:2.5rem 2.25rem; box-shadow:0 25px 50px rgba(0,0,0,.25); }
.login-card .logo { text-align:center; font-size:2.5rem; color:var(--indigo); margin-bottom:.5rem; }
.login-card h1 { text-align:center; font-size:1.5rem; margin-bottom:.3rem; }
.login-card .tag { text-align:center; color:var(--muted); font-size:.9rem; margin-bottom:1.75rem; }

/* ---------- Utilities ---------- */
.row-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.text-muted{color:var(--muted)}.text-right{text-align:right}.nowrap{white-space:nowrap}
.inline-form{display:inline}

/* ---------- Print (collection sheet) ---------- */
@media print {
  .nav, .no-print, .btn { display:none !important; }
  body { background:#fff; }
  .wrap { padding:0; max-width:none; }
  .table-card, .card, .stat { box-shadow:none; border:1px solid #cbd5e1; }
  .stat-grid { gap:.5rem; }
  table.data th { background:#f1f5f9 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .badge { border:1px solid currentColor; }
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav-links { position:absolute; top:64px; left:0; right:0; background:var(--card); flex-direction:column; align-items:stretch;
    padding:.5rem; gap:.25rem; border-bottom:1px solid var(--slate-200); box-shadow:var(--shadow-lg); display:none; }
  .nav-links.open { display:flex; }
  .nav-toggle { display:block; }
  .nav-inner { gap:.75rem; }
  .form-grid { grid-template-columns:1fr; }
  .page-head h1 { font-size:1.5rem; }
}