/* The investor CRM inside Space (29 Oct 2026): "make the styling exactly match the rest of Space, I want it to feel
   one and the same". Loaded after crm.css and todos.css. It points every CRM colour and font at Space's own tokens
   (styles.css), so light and dark follow Space, and sets headings, buttons, tabs, chips, inputs and the side panel
   to Space's sizes. The CRM's own sidebar is gone: Space's sidebar lists CRM and its pages (main.tsx, CrmNav). */

/* ── Space's sidebar: CRM and its pages ── */
.nav .subnav { display: flex; flex-direction: column; gap: 1px; margin: -2px 0 4px 40px; padding-left: 14px; border-left: 1px solid var(--side-line); }
.nav .subnav a, .nav .subnav button { display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 7px; font-size: 14px; color: var(--side-muted); gap: 0; }
.nav .subnav button { border: 0; background: none; cursor: pointer; text-align: left; width: 100%; }
.nav .subnav a:hover, .nav .subnav button:hover { background: rgba(255, 255, 255, 0.06); color: var(--side-ink); }
.nav .subnav a.on { background: var(--side-on); color: var(--side-ink); }
.nav .count.bad { background: var(--red); color: #fff; }
.side.mini .nav .subnav { display: none; }
@media (max-width: 1099px) {
  /* The phone's one-line menu: the CRM pages join it while you are in the CRM. */
  .nav .subnav { display: none; }
  .nav .subnav.open { display: contents; }
  .nav .subnav.open a, .nav .subnav.open button { height: 38px; padding: 0 12px; font-size: 14px; white-space: nowrap; width: auto; }
  .nav a.crmhead.on { background: none; }
}

/* ── The page sits in Space's content area ── */
.content.crm { padding: 0; max-width: none; }
.content.crm .crm-app {
  --c-bg: var(--bg); --c-side: var(--side); --c-panel: var(--panel); --c-card: var(--card); --c-field: var(--bg); --c-tint: var(--row-on); --c-nav-on: var(--row-on);
  --c-line: var(--line); --c-hair: var(--hair); --c-ink: var(--ink); --c-muted: var(--muted); --c-faint: var(--faint);
  --c-green: var(--teal); --c-green-hover: var(--teal); --c-on-green: var(--on-teal); --c-gold: var(--amber-ink); --c-red: var(--red); --c-red-soft: var(--red-soft);
  --c-pill-green: var(--green-soft); --c-pill-green-ink: var(--green-ink); --c-pill-amber: var(--amber-soft); --c-pill-amber-ink: var(--amber-ink);
  --c-pill-blue: var(--blue-soft); --c-pill-blue-ink: var(--blue-ink); --c-pill-grey: var(--grey-soft); --c-pill-grey-ink: var(--muted);
  --c-shadow: var(--shadow); --c-date: var(--muted); --c-tab-on: var(--teal);
  --c-serif: var(--head); --c-sans: var(--sans); --c-panel-w: var(--panelw);
  position: static; inset: auto; z-index: auto; overflow: visible; min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--sans);
}
.content.crm .crm-app.with-panel { grid-template-columns: minmax(0, 1fr) var(--panelw); }
.content.crm .c-main { overflow: visible; }
.content.crm .c-page, .content.crm .crm-app .t-page { padding: 60px 28px 32px 34px; max-width: 1240px; }
.content.crm .crm-app .t-page { max-width: 900px; }
.content.crm .c-banner { padding: 10px 34px; }

/* Headings: Space's page title and panel titles (Gabarito, display colour). */
.content.crm .crm-app h1, .content.crm .crm-app h2, .content.crm .crm-app h3 { font-family: var(--head); font-weight: 600; color: var(--display); letter-spacing: -0.01em; }
.content.crm .c-head, .content.crm .t-head { margin-bottom: 12px; }
.content.crm .c-head h1, .content.crm .t-head h1 { font-size: 58px; line-height: 0.95; font-weight: 600; letter-spacing: -0.03em; color: var(--display); }
.content.crm .c-head p { margin-top: 1px; font-size: 19px; }
.content.crm .c-head .c-btn, .content.crm .t-head .t-btn { margin-top: 2px; }
.content.crm .f-pname, .content.crm .p-pname, .content.crm .t-pname, .content.crm .c-panel-title { font-family: var(--head); font-weight: 600; color: var(--display); letter-spacing: -0.02em; }
.content.crm .t-sec > h2, .content.crm .t-sec summary h2 { font-family: var(--sans); }
.content.crm .c-serif, .content.crm .c-bucket b, .content.crm .t-title { font-family: var(--head); font-weight: 500; letter-spacing: 0; }
.content.crm .t-title { font-size: 17px; color: var(--ink); }

/* Buttons: Space's .btn (44px, 7px corners, 15.5px). */
.content.crm .c-btn, .content.crm .crm-app .t-btn { height: 44px; padding: 0 18px; gap: 12px; border-radius: var(--r); font-size: 15.5px; font-weight: 500; box-shadow: none; }
.content.crm .c-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.content.crm .c-btn:hover { background: var(--bg); }
.content.crm .c-btn.primary, .content.crm .crm-app .t-btn:not(.ghost) { background: var(--teal); border: 1px solid var(--teal); color: var(--on-teal); font-size: 15.5px; font-weight: 500; }
.content.crm .c-btn.primary:hover, .content.crm .crm-app .t-btn:not(.ghost):hover { background: var(--teal); filter: brightness(1.15); }
.content.crm .crm-app .t-btn.ghost { background: var(--card); border-color: var(--line); color: var(--ink); }
.content.crm .c-btn.small, .content.crm .crm-app .t-btn.small { height: 34px; padding: 0 13px; font-size: 14px; }
.content.crm .c-btn .c-i, .content.crm .crm-app .t-btn .c-i { width: 20px; height: 20px; }
.content.crm .crm-app .t-btn.big { height: 44px; padding: 0 18px; font-size: 15.5px; margin-top: 2px; }
.content.crm .c-link, .content.crm .crm-app .t-link { color: var(--teal); }
@media (prefers-color-scheme: dark) { .content.crm .c-link, .content.crm .crm-app .t-link { color: var(--teal); } }

/* Inputs and search boxes: Space's fields. */
.content.crm .crm-app input, .content.crm .crm-app select, .content.crm .crm-app textarea { border-radius: var(--r); min-height: 40px; background: var(--card); border-color: var(--line); }
.content.crm .c-search { height: 44px; border-radius: var(--r); background: var(--card); margin-bottom: 18px; }
.content.crm .c-search input { font-size: 15.5px; }
.content.crm .c-search input::placeholder { color: var(--faint); }
.content.crm .crm-app :focus-visible { outline-color: var(--teal); }

/* Tabs: Space's underlined tabs. The To-dos Open / Completed / Bin switch keeps its boxes, in Space's chip style. */
.content.crm .f-tabs { gap: 0; border-bottom: 1px solid var(--hair); margin-bottom: 22px; }
.content.crm .f-tabs button { height: 52px; padding: 0 14px 4px; border-bottom: 3px solid transparent; font-size: 19px; color: var(--muted); }
.content.crm .f-tabs button + button { margin-left: 26px; }
.content.crm .f-tabs button.on { color: var(--display); border-bottom-color: var(--teal); }
.content.crm .t-tabs button { height: 36px; padding: 0 14px; border-radius: var(--r); border-color: var(--line); background: var(--card); font-size: 14.5px; color: var(--ink); }
.content.crm .t-tabs button.on { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.content.crm .t-tabs button.on span { color: var(--on-teal); opacity: 0.75; }

/* Chips and stage tiles: Space's chips (7px corners, 32px). */
.content.crm .c-chips { gap: 8px; margin-bottom: 20px; }
.content.crm .c-chip { height: 34px; padding: 0 12px; border-radius: var(--r); border-color: var(--line); background: var(--card); color: var(--ink); font-size: 14px; }
.content.crm .c-chip:hover { background: var(--bg); border-color: var(--line); }
.content.crm .c-chip.on { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.content.crm .c-chip.on .c-chip-n { color: var(--on-teal); }
.content.crm .c-buckets { margin: 0 0 22px; }
.content.crm .c-bucket { border-radius: var(--r); border-color: var(--line); background: var(--card); }
.content.crm .c-bucket b { font-size: 22px; color: var(--display); }
.content.crm .c-bucket:hover { border-color: var(--faint); }
.content.crm .c-card { border-radius: 10px; border-color: var(--line); background: var(--card); }
.content.crm .f-status { height: 25px; padding: 0 10px; border-radius: 6px; font-size: 13px; gap: 7px; }
.content.crm .f-status i, .content.crm .f-statussel i { width: 8px; height: 8px; }

/* Rows: Space's hairlines and selected row. */
.content.crm .t-row, .content.crm .p-tr, .content.crm .f-tr { border-bottom-color: var(--hair); }
.content.crm .t-row.on, .content.crm .p-tr.on, .content.crm .f-tr.on { background: var(--row-on); }
.content.crm .f-tr.on { box-shadow: inset 3px 0 0 var(--teal); }
.content.crm .t-sec > h2, .content.crm .t-sec summary h2 { font-size: 13px; letter-spacing: 0.12em; }
.content.crm .t-sec:not(.overdue):not(.today) > h2, .content.crm .t-sec summary h2 { color: var(--muted); }
.content.crm .t-sec.today > h2 { color: var(--amber-ink); }
.content.crm .t-check.on { background: var(--teal); border-color: var(--teal); }
.content.crm .t-check { border-color: var(--faint); border-radius: 5px; }
.content.crm .c-count { background: var(--red); }

/* The side panel: Space's panel (rounded top corner, soft shadow, sticky beside the page). */
.content.crm .c-panel { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--panel); border-left: 0; border-radius: 18px 0 0 0;
  box-shadow: -1px 0 0 var(--hair), -10px 0 30px rgba(20, 30, 30, 0.05); padding: 60px 28px 28px; }
@media (max-width: 1239px) {
  .content.crm .crm-app.with-panel { grid-template-columns: minmax(0, 1fr); }
  .content.crm .c-panel { position: fixed; top: 0; right: 0; bottom: 0; height: auto; width: min(var(--panelw), 100vw); z-index: 20; border-radius: 18px 0 0 18px; box-shadow: -14px 0 36px var(--shadow); }
}

/* Dialogs, the search box and toasts in Space's colours. */
.content.crm .c-dialog, .content.crm .t-palette, .content.crm .c-palette { background: var(--panel); border-color: var(--line); border-radius: 12px; }
.content.crm .c-dialog-head h2 { font-family: var(--head); font-weight: 600; font-size: 24px; }
.content.crm .d-dialog .d-actions { background: var(--panel); }
.content.crm .c-toast, .content.crm .t-toast { background: var(--display); color: var(--bg); }

/* Phones: Space's own phone sizes. */
@media (max-width: 1099px) {
  .content.crm .c-page, .content.crm .crm-app .t-page { padding: 20px 16px 40px; }
  .content.crm .c-head h1, .content.crm .t-head h1 { font-size: 40px; }
  .content.crm .c-head p { font-size: 16px; }
  .content.crm .f-tabs button { font-size: 16px; height: 46px; padding: 0 8px 4px; }
  .content.crm .f-tabs button + button { margin-left: 12px; }
}
/* "CRM settings" on a phone, where the menu is one row and Space's own Settings sits beside it. */
.nav .phoneonly { display: none; }
@media (max-width: 1099px) { .nav .phoneonly { display: inline; white-space: pre; } }
/* On a phone the page's Add button is a round + beside the title (Space's button size must not bring its words back). */
@media (max-width: 600px) {
  .content.crm .c-head .c-btn.primary { flex: none; width: 46px; height: 46px; padding: 0; gap: 0; border-radius: 99px; font-size: 0; margin-top: 0; }
  .content.crm .c-head .c-btn.primary .c-i { width: 22px; height: 22px; }
}