/* איפה הכסף — design system v2. Shared by every screen in design/v2. */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --bg: #070B10;
  --bg-2: #0B1118;
  --surface: #10171F;
  --surface-2: #151E28;
  --surface-3: #1B2633;
  --line: #22303F;
  --line-2: #2E3F52;
  --ink: #EAF0F6;
  --ink-2: #B7C3D0;
  --muted: #7D8B9C;
  --faint: #4C5A6A;

  --brand: #2EE6A8;        /* money found / savings */
  --brand-2: #14B88A;
  --brand-ink: #03140E;
  --brand-glow: rgba(46, 230, 168, .22);
  --amber: #FFB547;        /* open finding / suspect */
  --amber-bg: rgba(255, 181, 71, .12);
  --blue: #5B9DFF;         /* action / info */
  --blue-bg: rgba(91, 157, 255, .12);
  --violet: #A78BFA;       /* AI */
  --violet-bg: rgba(167, 139, 250, .12);
  --coral: #FF7A6B;        /* high business risk only */
  --coral-bg: rgba(255, 122, 107, .12);
  --ok-gray: #8796A8;      /* reviewed OK */

  --cat-ai: #A78BFA; --cat-cloud: #5B9DFF; --cat-saas: #2EE6A8; --cat-ap: #FFB547;
  --cat-telecom: #F472B6; --cat-office: #38BDF8; --cat-payroll: #FB923C; --cat-finance: #FACC15;

  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 40px -12px rgba(0,0,0,.6);
  --font: 'Heebo', system-ui, 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 15px/1.55 var(--font); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.num, .money { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.mono { font-family: var(--mono); font-size: .86em; direction: ltr; unicode-bidi: isolate; }

/* type */
.h-display { font-size: clamp(2.4rem, 5.6vw, 4.6rem); font-weight: 900; line-height: 1.02; letter-spacing: -.035em; margin: 0; }
.h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.h2 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.h3 { font-size: .98rem; font-weight: 600; margin: 0; }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.muted { color: var(--muted); } .ink2 { color: var(--ink-2); } .small { font-size: .85rem; } .xs { font-size: .75rem; }
.accent-text { color: var(--brand); }
.big-money { font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--brand); text-shadow: 0 0 40px var(--brand-glow); }

/* surfaces */
.card { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); }
.card.flat { background: var(--surface); box-shadow: none; }
.card.glow { position: relative; overflow: hidden; }
.card.glow::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, var(--brand-glow), transparent); pointer-events: none; }
.divider { height: 1px; background: var(--line); margin: 16px 0; border: 0; }
.glass { background: rgba(16, 23, 31, .72); backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255,255,255,.07); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-3); font-weight: 600; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s; white-space: nowrap; }
.btn:hover { border-color: var(--faint); background: #213042; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: transparent; box-shadow: 0 8px 28px -8px var(--brand-glow); }
.btn.primary:hover { background: #5BF0BE; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.lg { min-height: 52px; padding: 0 24px; font-size: 1.05rem; border-radius: 14px; }
.btn.sm { min-height: 32px; padding: 0 12px; font-size: .85rem; border-radius: 10px; }
.btn.block { width: 100%; }

/* chips + badges */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.chip.open { background: var(--amber-bg); color: var(--amber); border-color: transparent; }
.chip.fixed { background: var(--brand-glow); color: var(--brand); border-color: transparent; }
.chip.progress { background: var(--blue-bg); color: var(--blue); border-color: transparent; }
.chip.ok { background: rgba(135,150,168,.14); color: var(--ok-gray); border-color: transparent; }
.chip.ai { background: var(--violet-bg); color: var(--violet); border-color: transparent; }
.chip.risk { background: var(--coral-bg); color: var(--coral); border-color: transparent; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }
.conf { display: inline-flex; gap: 2px; } .conf i { width: 4px; height: 12px; border-radius: 2px; background: var(--line-2); } .conf i.on { background: var(--brand); }

/* form */
.field { display: grid; gap: 6px; }
.label { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.input { height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); outline: none; width: 100%; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }
.toggle { width: 40px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; flex: none; border: 0; }
.toggle::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; }
.toggle[aria-checked="true"] { background: var(--brand-2); }
.toggle[aria-checked="true"]::after { inset-inline-start: 19px; }

/* table */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.table th { text-align: start; font-size: .74rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:hover td { background: rgba(255,255,255,.02); }
.table .end { text-align: end; }
.table-wrap { overflow: auto; border-radius: var(--r); border: 1px solid var(--line); }

/* layout helpers */
.row { display: flex; align-items: center; gap: 12px; } .row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; }
.stack { display: grid; gap: 12px; } .stack.lg { gap: 20px; } .stack.xl { gap: 32px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.grow { flex: 1; min-width: 0; }
.container { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* app shell (injected by shell.js) */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow: auto; border-inline-end: 1px solid var(--line); background: var(--bg-2); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 800; font-size: 1.1rem; }
.side .ws { margin: 0 4px 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; gap: 10px; font-size: .88rem; }
.side .ws .av { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #2EE6A8, #5B9DFF); color: #04110D; font-weight: 900; }
.side .sec { font-size: .7rem; color: var(--faint); font-weight: 700; letter-spacing: .08em; padding: 14px 12px 6px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: .92rem; }
.nav-link svg { width: 18px; height: 18px; opacity: .8; flex: none; }
.nav-link:hover { background: var(--surface); color: var(--ink); }
.nav-link[aria-current="page"] { background: var(--surface-3); color: var(--ink); box-shadow: inset -3px 0 0 var(--brand); }
.nav-link .count { margin-inline-start: auto; font-size: .72rem; background: var(--amber-bg); color: var(--amber); padding: 1px 7px; border-radius: 999px; font-weight: 700; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(7, 11, 16, .8); backdrop-filter: blur(14px); }
.topbar .search { flex: 1; max-width: 520px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--muted); font-size: .9rem; }
.topbar svg { width: 18px; height: 18px; flex: none; }
.topbar .search { min-width: 0; }
.content > * { min-width: 0; }
.topbar .kbd { margin-inline-start: auto; font-family: var(--mono); font-size: .72rem; border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: linear-gradient(135deg, #FFB547, #FF7A6B); color: #1A0D02; flex: none; }
.content { padding: 28px; display: grid; gap: 20px; align-content: start; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .topbar .search { flex: 0 0 40px; padding: 0; justify-content: center; }
  .topbar .search span, .topbar .row .small { display: none; }
}

/* synthetic data marker — required on every screen with company data */
.synthetic { position: fixed; bottom: 12px; inset-inline-start: 12px; z-index: 50; font-size: .7rem; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-2); border-radius: 999px; padding: 4px 10px; }

/* phone frame for mobile mockups */
.phone { width: 390px; height: 844px; border-radius: 54px; padding: 12px; background: linear-gradient(145deg, #2a3442, #0d1218); box-shadow: 0 40px 80px -20px rgba(0,0,0,.8), inset 0 0 0 2px #3a4656; flex: none; }
.phone .screen { width: 100%; height: 100%; border-radius: 44px; overflow: hidden; background: var(--bg); position: relative; display: flex; flex-direction: column; }
.phone .notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; border-radius: 20px; background: #000; z-index: 5; }
.phone .status { height: 52px; flex: none; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 30px 6px; font-size: .8rem; font-weight: 600; direction: ltr; }

/* motion */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }