/* ASO Financial — Client Portal · Brand-aligned tokens
   Mint #99ddcc primary, white surface, near-black ink */
:root {
  /* Palette */
  --bg: #f6f6f6;
  --paper: #fbfbfb;
  --surface: #ffffff;
  --surface-2: #f0f0f0;

  --ink: #111111;
  --ink-2: #2a2a2a;
  --ink-3: #4a4a4a;
  --muted: #6e6e6e;
  --muted-2: #9a9a9a;

  --line: #e6e6e6;
  --line-soft: #ededed;
  --hairline: #f0f0f0;

  --mint: #99ddcc;
  --mint-1: #bfeadf;   /* lighter */
  --mint-2: #73d0b9;   /* darker */
  --mint-3: #4eb89c;   /* deepest, for text on light bg */
  --mint-soft: #e8f6f1;

  --pos: #2f7d5b;
  --pos-soft: #dde9e0;
  --warn: #b8782a;
  --warn-soft: #f4e6cf;
  --neg: #a64435;
  --neg-soft: #f4ddd5;
  --info: #355c8a;
  --info-soft: #dde6ef;

  /* Type */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-display: "Geist", "Inter", -apple-system, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 0 rgba(17, 17, 17, 0.03), 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-md: 0 1px 0 rgba(17, 17, 17, 0.04), 0 4px 14px rgba(17, 17, 17, 0.06);
  --shadow-lg: 0 1px 0 rgba(17, 17, 17, 0.04), 0 18px 40px rgba(17, 17, 17, 0.10);
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: -0.003em;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; }

/* Utility */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.ink-2 { color: var(--ink-2); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 500; transition: all 120ms ease; user-select: none;
  letter-spacing: -0.005em; }
.btn:hover { border-color: var(--ink-3); background: var(--paper); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-mint { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.btn-mint:hover { background: var(--mint-2); border-color: var(--mint-2); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--line-soft); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-icon { padding: 6px; border-radius: 8px; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); }
.card-pad { padding: 18px; }
.card-pad-lg { padding: 22px; }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: -0.005em;
  background: var(--line-soft); color: var(--ink-2); border: 1px solid transparent; }
.pill-pos { background: var(--pos-soft); color: #1f5a3f; }
.pill-warn { background: var(--warn-soft); color: #8a5a1c; }
.pill-neg { background: var(--neg-soft); color: #7d2b1f; }
.pill-info { background: var(--info-soft); color: #1f4063; }
.pill-mint { background: var(--mint-soft); color: #1f6b56; }
.pill-ink { background: var(--ink); color: #fff; }
.pill-outline { background: transparent; border-color: var(--line); }

.dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; }

/* Inputs */
.input { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 13px; width: 100%; outline: none;
  transition: border 120ms; }
.input:focus { border-color: var(--ink); }
.input::placeholder { color: var(--muted-2); }

/* Layout */
.shell { display: grid; grid-template-columns: 232px 1fr; height: 100vh; overflow: hidden; min-width: 1200px; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column;
  padding: 14px 10px; overflow-y: auto; }
.main { background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
.topbar { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--surface); z-index: 5;
  flex-shrink: 0; min-height: 60px; }
.content { flex: 1; overflow-y: auto; padding: 24px 28px 60px; }

/* Nav items */
.nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 7px; font-size: 13px; color: var(--ink-3); cursor: pointer; position: relative;
  transition: all 100ms; }
.nav-item:hover { background: var(--line-soft); color: var(--ink); }
.nav-item.active { background: var(--ink); color: #ffffff; }
.nav-item.active .nav-count { color: var(--mint); }
.nav-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted-2); padding: 14px 10px 6px; font-weight: 500; }
.nav-item .nav-count { margin-left: auto; font-size: 11px; color: var(--muted-2);
  font-variant-numeric: tabular-nums; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tab { padding: 10px 14px; font-size: 13px; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 120ms; font-weight: 500; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--mint-2); }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 500; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.07em; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px; border-bottom: 1px solid var(--hairline); }
.tbl tr:hover td { background: var(--paper); }
.tbl tr:last-child td { border-bottom: none; }

/* Big numbers */
.bignum { font-family: var(--font-display); font-weight: 500; font-size: 38px; line-height: 1;
  letter-spacing: -0.035em; color: var(--ink); }
.bignum-sm { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1;
  letter-spacing: -0.03em; }
.label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted);
  font-weight: 500; }
.h1 { font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.03em;
  line-height: 1.15; }
.h2 { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.02em;
  line-height: 1.2; }
.h3 { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }

/* Misc */
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--paper); color: var(--muted); }

/* AI insight pill */
.ai-insight { display: flex; gap: 10px; padding: 11px 12px; border-radius: 10px;
  background: var(--mint-soft); border: 1px solid #cfeae0; font-size: 12.5px;
  color: var(--ink-2); align-items: flex-start; }
.ai-mark { width: 20px; height: 20px; flex-shrink: 0; border-radius: 5px; background: var(--ink);
  color: var(--mint); display: grid; place-items: center; font-weight: 700; font-size: 11px; margin-top: 0; }

/* Logo */
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--ink);
  display: grid; place-items: center; flex-shrink: 0; }
.logo-mark svg { width: 17px; height: 17px; }
.logo-name { font-weight: 600; letter-spacing: -0.02em; font-size: 14.5px; }
.logo-sub { font-size: 9.5px; color: var(--muted); letter-spacing: 0.10em; text-transform: uppercase; margin-top: -1px; }

/* Role switcher */
.role-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); }
.role-switch button { padding: 5px 11px; border-radius: 6px; border: none; background: transparent;
  font-size: 12px; color: var(--muted); font-weight: 500; cursor: pointer; }
.role-switch button.active { background: var(--mint); color: var(--ink); }

/* Avatar */
.avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--surface-2);
  color: var(--ink); display: grid; place-items: center; font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--line); flex-shrink: 0; }
.avatar-lg { width: 36px; height: 36px; font-size: 12.5px; }
.avatar-sm { width: 22px; height: 22px; font-size: 9.5px; }

/* Progress */
.bar { height: 4px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--ink); border-radius: 999px; }
.bar-fill.mint { background: var(--mint-2); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* Status indicator dot */
.status-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.status-dot.green { background: var(--mint-2); }
.status-dot.amber { background: var(--warn); }
.status-dot.red { background: var(--neg); }
.status-dot.gray { background: var(--muted-2); }

/* Fades / motion */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn 220ms ease both; }

/* Device frames */
.device-row { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; padding: 30px; }
.device { width: 320px; height: 660px; border-radius: 36px; background: #0a0a0a; padding: 12px;
  box-shadow: var(--shadow-lg); }
.device-screen { width: 100%; height: 100%; background: var(--bg); border-radius: 26px;
  overflow: hidden; position: relative; }

/* Section title row */
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.section-title .h2 { margin: 0; }
.section-title .muted { font-size: 12px; }

/* Empty / accent panel */
.accent-panel { background: var(--mint-soft); border: 1px solid #cfeae0; border-radius: 12px; padding: 18px; }

/* Dark hero (for big stat surface) */
.dark-card { background: var(--ink); color: #fff; border-radius: 12px; padding: 22px; }
.dark-card .label { color: var(--mint); }
.dark-card .muted { color: rgba(255,255,255,0.6); }