/* Ibis Fund 1 Portal — prototype styling echoing the captured AppFolio
   skeleton (spec §6): single centered column of white cards on light grey. */
:root {
  --bg:#f5f7fa; --card:#fff; --ink:#1a2233; --muted:#5b6472;
  --line:#e3e7ee; --accent:#0f4c81; --link:#0f6fbf; --neg:#1a2233;
}
body.dark {
  --bg:#14181f; --card:#1d232d; --ink:#e8ecf2; --muted:#98a2b3;
  --line:#2c3442; --accent:#7db3e0; --link:#7db3e0;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }

.topbar { background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:18px; padding:10px 20px; }
.topbar .logo { font-weight:700; letter-spacing:2px; color:var(--accent); font-size:18px; }
.topbar .spacer { flex:1; }
.topbar details { position:relative; }
.topbar summary { cursor:pointer; list-style:none; color:var(--muted); }
.topbar .menu { position:absolute; right:0; top:26px; background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:8px 0; min-width:160px;
  box-shadow:0 6px 18px rgba(0,0,0,.08); z-index:20; }
.topbar .menu a, .topbar .menu button { display:block; width:100%; text-align:left;
  padding:7px 16px; background:none; border:0; font:inherit; color:var(--ink); cursor:pointer; }
.topbar .menu a:hover, .topbar .menu button:hover { background:var(--bg); text-decoration:none; }

nav.sidenav { background:var(--card); border-bottom:1px solid var(--line);
  padding:6px 20px; display:flex; gap:4px; flex-wrap:wrap; }
nav.sidenav a { padding:7px 12px; border-radius:6px; color:var(--muted); }
nav.sidenav a.active { background:var(--accent); color:#fff; }
body.dark nav.sidenav a.active { color:#14181f; }

.wrap { max-width:980px; margin:0 auto; padding:24px 16px 60px; }
.wrap.wide { max-width:1150px; }
h1 { font-size:22px; margin:6px 0 18px; }
h2 { font-size:16px; margin:0 0 12px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; margin-bottom:22px; }
.card .cap, .fineprint { color:var(--muted); font-size:12.5px; }
.actions-right { float:right; font-size:13.5px; }

table.data { width:100%; border-collapse:collapse; font-size:14px; }
table.data th { text-align:left; color:var(--muted); font-weight:600;
  border-bottom:1px solid var(--line); padding:7px 8px; white-space:nowrap; }
table.data td { border-bottom:1px solid var(--line); padding:7px 8px; vertical-align:top; }
table.data tr.total td { font-weight:700; border-bottom:0; }
table.data td.num, table.data th.num { text-align:right; white-space:nowrap; }
.scroll-x { overflow-x:auto; }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px; margin-bottom:22px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.tile .v { font-size:20px; font-weight:700; }
.tile .k { color:var(--muted); font-size:12.5px; }

.dot { display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#1668c9; margin-right:6px; vertical-align:middle; }
.pill { display:inline-block; font-size:12px; padding:2px 9px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line); color:var(--muted); }
.pill.on { background:#e4f2e7; border-color:#bcdcc3; color:#1c6b2f; }
body.dark .pill.on { background:#1e3324; border-color:#2e5238; color:#8fd0a0; }

.chart { display:flex; align-items:flex-end; gap:8px; height:150px; padding:8px 0; }
.chart .bar { flex:1; background:var(--accent); border-radius:3px 3px 0 0; min-height:2px; position:relative; }
.chart .bar span { position:absolute; bottom:-20px; left:0; right:0; text-align:center;
  font-size:10.5px; color:var(--muted); white-space:nowrap; }
.chart-labels { height:18px; }

form.stack p { margin:0 0 12px; }
form.stack label { display:block; font-size:13px; color:var(--muted); margin-bottom:3px; }
input, select, textarea { font:inherit; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:6px; padding:6px 9px; }
input.cell { width:110px; text-align:right; }
.btn { display:inline-block; background:var(--accent); color:#fff; border:0;
  border-radius:6px; padding:8px 16px; font:inherit; cursor:pointer; }
body.dark .btn { color:#14181f; }
.btn.secondary { background:transparent; color:var(--link); border:1px solid var(--line); }
.btn:hover { opacity:.92; }

.msg { padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:14px;
  background:#e8f1fb; border:1px solid #c9dff5; }
.msg.error { background:#fbe9e7; border-color:#f3c3bd; }
body.dark .msg { background:#1c2a3a; border-color:#2c3f57; }

.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tabs a { padding:8px 16px; color:var(--muted); border-bottom:2px solid transparent; }
.tabs a.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

.assets-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.asset-card { border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:13.5px; }
.asset-card h3 { margin:0 0 6px; font-size:14.5px; }
.asset-card .kv { display:flex; justify-content:space-between; gap:8px; padding:2px 0; }
.asset-card .kv .k { color:var(--muted); }

details.breakdown summary { cursor:pointer; color:var(--link); }
details.breakdown div { padding:6px 0 2px 12px; color:var(--muted); font-size:13px; }
pre.explain { background:var(--bg); border:1px solid var(--line); border-radius:6px;
  padding:8px 10px; font-size:12px; overflow-x:auto; }

.note { font-size:13px; color:var(--muted); border-left:3px solid var(--accent);
  padding:4px 10px; margin:10px 0; }
.login-box { max-width:360px; margin:80px auto; }
.login-box .logo { text-align:center; font-weight:700; letter-spacing:3px;
  color:var(--accent); font-size:22px; margin-bottom:16px; }
.login-box .foot { text-align:center; color:var(--muted); font-size:12.5px; margin-top:14px; }