/* ============================================================================
 * Finway — light theme
 * ----------------------------------------------------------------------------
 * Calm, professional, borrower-side finance aesthetic. Light surfaces, one
 * trustworthy blue accent, semantic green/amber/red for money states.
 * All colours meet WCAG AA (4.5:1 for body text) on their background.
 * Font stays on the system stack so the app runs offline / self-contained
 * (IBM Plex Sans is a nice optional upgrade if a font dependency is ever ok).
 * ==========================================================================*/

:root {
  --bg:#f4f6fa; --panel:#ffffff; --panel2:#eef2f7; --line:#dde3ec; --line-strong:#c7d0de;
  --text:#0f172a; --muted:#526074; --accent:#2563eb; --accent2:#1d4ed8; --accent-soft:#eaf1ff;
  --good:#047857; --warn:#b45309; --bad:#dc2626;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-lg:0 10px 30px rgba(15,23,42,.12);
  --radius:12px;
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* topbar / nav */
.topbar { display:flex; align-items:center; gap:16px; padding:12px 22px;
  background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
  flex-wrap:wrap; box-shadow:var(--shadow); }
.topbar h1 { font-size:1.15rem; margin:0; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
.topbar h1 .brand-dot { width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#22c1a6); box-shadow:0 0 0 3px var(--accent-soft); }
.topbar h1 .brand-logo { height:40px; width:auto; display:block; }
.topbar h1 .brand-fin { color:var(--ink); font-weight:700; }
.topbar h1 .brand-way { color:var(--accent); font-weight:700; }
.topbar h1 .brand-sub { font-size:.74rem; font-weight:600; color:var(--muted); letter-spacing:.09em; text-transform:uppercase; }
.nav { display:flex; gap:4px; }
.nav button { background:transparent; border:1px solid transparent; color:var(--muted);
  padding:8px 14px; border-radius:9px; cursor:pointer; font-size:0.9rem; font-weight:500;
  transition:background .18s, color .18s, border-color .18s; }
.nav button:hover { background:var(--panel2); color:var(--text); }
.nav button.active { background:var(--accent); color:#fff; }
.nav button.active:hover { background:var(--accent2); }
.spacer { flex:1; }
.io button { background:var(--panel); border:1px solid var(--line-strong); color:var(--text);
  padding:8px 12px; border-radius:9px; cursor:pointer; font-size:0.82rem; margin-left:6px;
  transition:border-color .18s, background .18s; }
.io button:hover { border-color:var(--accent); background:var(--accent-soft); }

.wrap { max-width:1440px; margin:0 auto; padding:24px 22px 80px; }
.view { display:none; } .view.active { display:block; }
h2 { font-size:1.25rem; margin:0 0 16px; letter-spacing:-.01em; }

/* stat cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:26px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.card .k { font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.card .v { font-size:1.5rem; font-weight:700; margin-top:5px; letter-spacing:-.02em; }
.card .v.good { color:var(--good); } .card .v.warn { color:var(--warn); }

/* panels */
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:22px; box-shadow:var(--shadow); overflow-x:auto; }
.panel h3 { margin:0 0 14px; font-size:1rem; }

/* tables */
table { width:100%; border-collapse:collapse; font-size:0.85rem; }
th,td { padding:8px 10px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
th:first-child,td:first-child { text-align:left; }
th { color:var(--muted); font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:.04em;
  background:var(--panel2); border-bottom:1px solid var(--line-strong); }
tbody tr { transition:background .12s; }
tbody tr:hover { background:var(--accent-soft); }

/* type tags — light tints, one per finance type */
.tag { display:inline-block; padding:2px 9px; border-radius:999px; font-size:0.72rem; font-weight:600; }
.tag.cm{ background:#dbeafe; color:#1e40af; }
.tag.fl{ background:#ede9fe; color:#6d28d9; }
.tag.hp{ background:#d1fae5; color:#047857; }
.tag.ol{ background:#ffedd5; color:#b45309; }
.tag.tl{ background:#e0f2fe; color:#0369a1; }
.tag.io{ background:#fef9c3; color:#a16207; }
.tag.bl{ background:#fee2e2; color:#b91c1c; }
.tag.mg{ background:#e2e8f0; color:#334155; }

.due-soon { color:var(--warn); font-weight:600; } .due-over { color:var(--bad); font-weight:600; }

/* forms */
.field { margin-bottom:14px; }
label { display:block; font-size:0.8rem; color:var(--muted); margin-bottom:5px; font-weight:500; }
input,select { width:100%; padding:11px 13px; background:var(--panel); border:1px solid var(--line-strong);
  border-radius:9px; color:var(--text); font-size:0.95rem; transition:border-color .15s, box-shadow .15s; }
input:hover,select:hover { border-color:var(--muted); }
input:focus,select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
input[type=range] { padding:0; border:none; background:transparent; height:auto; accent-color:var(--accent); cursor:pointer; }
input[type=range]:hover,input[type=range]:focus { border:none; box-shadow:none; }

/* buttons */
button.primary { background:var(--accent); border:1px solid var(--accent); color:#fff; padding:12px 20px;
  border-radius:9px; font-weight:600; cursor:pointer; font-size:0.95rem; transition:background .18s; }
button.primary:hover { background:var(--accent2); border-color:var(--accent2); }
button.ghost { background:var(--panel); border:1px solid var(--line-strong); color:var(--text);
  padding:12px 18px; border-radius:9px; cursor:pointer; transition:border-color .18s, background .18s; }
button.ghost:hover { border-color:var(--accent); background:var(--accent-soft); }
button.mini { background:var(--panel); border:1px solid var(--line-strong); color:var(--text);
  padding:5px 10px; border-radius:7px; cursor:pointer; font-size:0.76rem; transition:border-color .15s, background .15s, color .15s; }
button.mini:hover { border-color:var(--accent); background:var(--accent-soft); }
button.mini.del:hover { border-color:var(--bad); color:var(--bad); background:#fef2f2; }
.row-actions { display:flex; gap:6px; justify-content:flex-end; }

/* visible keyboard focus everywhere */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button:focus-visible { box-shadow:0 0 0 3px var(--accent-soft); }

.empty { color:var(--muted); text-align:center; padding:40px; font-size:0.9rem; }

/* modals */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:50;
  align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto;
  backdrop-filter:blur(2px); }
.modal-bg.show { display:flex; }
.modal { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:24px; width:100%; max-width:680px; box-shadow:var(--shadow-lg); }
.modal h3 { margin:0 0 18px; padding-right:34px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.modal-x { position:absolute; top:14px; right:14px; width:32px; height:32px; display:flex;
  align-items:center; justify-content:center; font-size:1.35rem; line-height:1; border-radius:8px;
  background:var(--panel2); border:1px solid var(--line); color:var(--muted); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s; }
.modal-x:hover { background:#fdecec; border-color:var(--bad); color:var(--bad); }
.step-note { background:var(--accent-soft); border:1px solid #bcd3ff; border-left:3px solid var(--accent);
  color:#123a8a; border-radius:10px; padding:11px 14px; margin-bottom:16px; font-size:0.88rem; }
.step-note strong { font-weight:700; }

.hint { font-size:0.76rem; color:var(--muted); margin-top:4px; }
details summary { cursor:pointer; color:var(--accent); font-size:0.85rem; margin-bottom:10px; font-weight:500; }
.sched-wrap { max-height:360px; overflow:auto; margin-top:10px; border:1px solid var(--line); border-radius:9px; }
.sched-wrap th { position:sticky; top:0; }
.badge { font-size:0.7rem; padding:2px 7px; border-radius:5px; background:var(--panel2); color:var(--muted); border:1px solid var(--line); }
.classify-box { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:14px; margin-top:6px; }
.classify-result { margin-top:10px; padding:10px; border-radius:8px; font-size:0.85rem; }
.classify-result.ok { background:#e7f6ef; color:#065f46; border:1px solid #a7e0c6; }
.classify-result.warn { background:#fdf3e3; color:#92400e; border:1px solid #f0d199; }
fieldset { border:1px solid var(--line); border-radius:10px; padding:14px; margin:0 0 14px; }
legend { font-size:0.78rem; color:var(--muted); padding:0 6px; font-weight:600; }

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* print / PDF */
@media print {
  body { background:#fff; color:#000; }
  .topbar, .nav, .io, .no-print, button { display:none !important; }
  .wrap { max-width:100%; padding:0; }
  .view { display:none !important; }
  #print-area { display:block !important; }
  .panel { border:1px solid #ccc; box-shadow:none; page-break-inside:avoid; }
  table { font-size:11px; } th,td { border-bottom:1px solid #ccc; color:#000; }
  th { color:#333; background:#f3f3f3; }
}
#print-area { display:none; }