/* AdvisorPro design system for the CRM.
   Palette and type come from crm-pages/guest-kit.css:
   navy #0A0E1A, text #F6F6F4, blue #216CFF, purple #7A3CFF, magenta #E500FF,
   Plus Jakarta Sans. The button and link blue is #1558E0 so white and ink
   text clear WCAG AA. Logos are the files in crm-pages/assets/.
   Loaded last. Layout and scripts stay as they are. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;
  --ap-ink: #0a0e1a;
  --ap-ink-soft: #1c2433;
  --ap-muted: #3d4c63;
  --ap-canvas: #f3f5fa;
  --ap-surface: #ffffff;
  --ap-surface-2: #f7f8fc;
  --ap-line: #d5ddec;
  --ap-line-strong: #c3cddc;
  --ap-blue: #216cff;
  --ap-blue-ink: #1558e0;
  --ap-blue-soft: #e8eeff;
  --ap-purple: #7a3cff;
  --ap-sidebar: #0a0e1a;
  --ap-sidebar-ink: #f6f6f4;
  --ap-sidebar-muted: #c5cdd8;
  --ap-danger: #9a3412;
  --ap-danger-bg: #fdf6f3;
  --ap-warn: #8a4b08;
  --ap-warn-bg: #fbf6ee;
  --ap-ok: #0f6b4c;
  --ap-ok-bg: #e8f6f0;
  --ap-radius: 12px;
  --ap-radius-sm: 8px;
  --ap-radius-pill: 999px;
  --ap-shadow: 0 1px 2px rgba(10, 14, 26, 0.06);
  --ap-shadow-pop: 0 8px 24px rgba(10, 14, 26, 0.1);
  --ap-font: "Plus Jakarta Sans", Poppins, Arial, sans-serif;
  --ap-space-1: 4px;
  --ap-space-2: 8px;
  --ap-space-3: 12px;
  --ap-space-4: 16px;
  --ap-space-5: 24px;
  --ap-space-6: 32px;
  --sx-blur: 0px;
  --sx-glow: none;
  --sx-sheen: none;
  --sx-edge: none;
  --sx-canvas: var(--ap-canvas);
  --sx-glass: var(--ap-surface);
  --sx-glass-solid: var(--ap-surface);
  --sx-surface: var(--ap-surface-2);
  --sx-ink: var(--ap-ink);
  --sx-muted: var(--ap-muted);
  --sx-accent: var(--ap-blue-ink);
  --sx-accent-ink: #ffffff;
  --sx-link: var(--ap-blue-ink);
  --sx-teal: var(--ap-blue-ink);
  --sx-teal-ink: #ffffff;
  --sx-gold-text: var(--ap-warn);
  --sx-line: var(--ap-line);
  --sx-line-strong: var(--ap-line-strong);
  --sx-shadow: var(--ap-shadow);
  --sx-sidebar: var(--ap-sidebar);
  --sx-sidebar-ink: var(--ap-sidebar-ink);
  --sx-sidebar-muted: var(--ap-sidebar-muted);
  --bg: var(--ap-canvas);
  --panel: var(--ap-surface);
  --panel2: var(--ap-surface-2);
  --ink: var(--ap-ink);
  --ink-soft: var(--ap-ink-soft);
  --muted: var(--ap-muted);
  --dim: var(--ap-muted);
  --faint: var(--ap-muted);
  --teal: var(--ap-blue-ink);
  --teal-dim: var(--ap-blue-soft);
  --gold: var(--ap-blue-ink);
  --coral: var(--ap-danger);
  --slate: #2f5d78;
  --line: var(--ap-line);
  --line-dark: var(--ap-line-strong);
  --edge: var(--ap-line);
  --red: #b42318;
  --red-dim: #fdecea;
  --amber: var(--ap-warn);
  --amber-dim: var(--ap-warn-bg);
  --blue: var(--ap-blue-ink);
  --crm-font: var(--ap-font);
  --body: var(--ap-font);
  --sans: var(--ap-font);
  --serif: var(--ap-font);
  --disp: var(--ap-font);
  --mono: var(--ap-font);
  --color-tremor-content: var(--ap-muted);
  --color-tremor-content-subtle: var(--ap-muted);
  --color-tremor-content-emphasis: var(--ap-ink);
  --color-tremor-content-strong: var(--ap-ink);
  --color-tremor-border: var(--ap-line);
  --color-tremor-background: var(--ap-surface);
  --color-tremor-background-muted: var(--ap-surface-2);
  --color-dark-tremor-content: var(--ap-muted);
  --color-dark-tremor-content-emphasis: var(--ap-ink);
  --color-dark-tremor-border: var(--ap-line);
  --color-dark-tremor-background: var(--ap-surface);
}

body {
  background: var(--ap-canvas);
  background-image: none;
  color: var(--ap-ink);
  font-family: var(--ap-font);
  font-size: 14.5px;
  line-height: 1.55;
}

body,
input,
select,
textarea,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ap-font);
}

body.has-sidebar {
  background: var(--ap-sidebar);
}

body.has-sidebar .crm-workspace {
  background: var(--ap-canvas);
  background-image: none;
  color: var(--ap-ink);
}

.crm-workspace-scroll {
  scrollbar-color: #c3cddc transparent;
}

.ap-card,
#cashflow-root .glass-panel,
body.has-sidebar .kpi,
body.has-sidebar .sec,
body.has-sidebar .card,
body.has-sidebar .stat,
body.has-sidebar .journey-board,
body.has-sidebar .workspace-bottom,
body.has-sidebar .ops-tile,
body.has-sidebar .ops-panel,
body.has-sidebar .ops-metric,
body.has-sidebar .action-card,
body.has-sidebar .hh-stat,
body.has-sidebar .hh-fr-card,
body.has-sidebar .hh-form,
body.has-sidebar .pms-stat,
body.has-sidebar .ev-panel,
body.has-sidebar .pd-stat,
body.has-sidebar .pd-form,
body.has-sidebar .pd-card,
body.has-sidebar .d-cell,
body.has-sidebar .dcard,
body .pmenu,
.overlay .card,
dialog,
.hh-dialog,
.pms-dialog,
.km-dialog {
  background-color: var(--ap-surface);
  background-image: none;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ap-ink);
}

body.has-sidebar h3.sec {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ap-ink);
  letter-spacing: 0.04em;
}

.ap-section,
.pd-section,
.hh-section,
.ev-section {
  color: var(--ap-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ap-stat,
.pd-stat,
.kpi,
.hh-stat,
.pms-stat,
.stat {
  color: var(--ap-ink);
}

.ap-stat strong,
.pd-stat strong,
.kpi .num,
.stat b,
.hh-stat strong,
.pms-stat strong,
.ev-stat strong {
  color: var(--ap-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pd-stat span,
.kpi .lbl,
.stat span,
.hh-stat span,
.pms-stat span {
  color: var(--ap-muted);
}

body.has-sidebar .ops-tile-active {
  background: var(--ap-surface);
  border-color: #b9cdfb;
  box-shadow: inset 3px 0 0 var(--ap-blue-ink);
}

body.has-sidebar .crm-sidebar {
  background: var(--ap-sidebar);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-right: 1px solid #1c2740;
  color: var(--ap-sidebar-ink);
}

.ap-sidebar .nav-link,
body.has-sidebar .crm-sidebar .nav-link {
  color: var(--ap-sidebar-muted);
  border-radius: 10px;
}

body.has-sidebar .crm-sidebar .sidebar-label,
body.has-sidebar .crm-sidebar .brand small {
  color: var(--ap-sidebar-muted);
}

body.has-sidebar .crm-sidebar .sidebar-tenant select,
body.has-sidebar .crm-sidebar .sidebar-bottom .pbtn,
.sidebar-toggle {
  background-color: #141a2e;
  background-image: none;
  color: var(--ap-sidebar-ink);
  border: 1px solid #2a3550;
  box-shadow: none;
}

body.has-sidebar .crm-sidebar .nav-link:hover {
  background: #1a2340;
  color: var(--ap-sidebar-ink);
}

body.has-sidebar .crm-sidebar .nav-link.active {
  background: var(--ap-blue-ink);
  color: #ffffff;
  box-shadow: none;
  font-weight: 600;
}

.crm-sidebar .brand img {
  width: 168px;
  height: 38px;
  object-fit: contain;
  object-position: left center;
}

.crm-workspace table,
body.has-sidebar table,
.ap-table,
.pd-table {
  background-color: var(--ap-surface);
  border: 1px solid var(--ap-line);
  border-collapse: collapse;
  width: 100%;
}

.crm-workspace th,
body.has-sidebar th,
.ap-table th,
.pd-table th,
#events .ev-table th,
#hiring .hh-table th,
#pms .pms-table th,
#podcasts .pd-table th {
  color: var(--ap-muted);
  background-color: var(--ap-surface-2);
  border-bottom: 1px solid var(--ap-line-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
}

.crm-workspace td,
body.has-sidebar td,
.ap-table td,
.pd-table td,
#events .ev-table td,
#hiring .hh-table td,
#pms .pms-table td,
#podcasts .pd-table td {
  color: var(--ap-ink-soft);
  background-color: transparent;
  border-bottom: 1px solid var(--ap-line);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: normal;
  vertical-align: middle;
}

body.has-sidebar td:first-child,
.hh-name,
.cname,
#pms .pms-task-name,
#podcasts button.pd-link {
  color: var(--ap-ink);
}

body.has-sidebar tbody tr:nth-child(even),
#hiring .hh-table tbody tr:nth-child(even),
#pms .pms-table tbody tr:nth-child(even),
#events .ev-table tbody tr:nth-child(even),
#podcasts .pd-table tbody tr:nth-child(even) {
  background-color: #f8f9fd;
}

body.has-sidebar tbody tr:hover,
body.has-sidebar tr.row:hover,
#hiring .hh-table tbody tr:hover,
#pms .pms-table tbody tr:hover,
#events .ev-table tbody tr:hover,
#podcasts .pd-table tbody tr:hover {
  background-color: #f3f6ff;
}

#podcasts .pd-table tr.selected,
.pd-table tr.selected {
  background: var(--ap-blue-soft);
}

.hh-table-wrap,
.pms-table-wrap,
.ev-table-wrap,
.pd-table-wrap,
.ops-tile,
.card,
.sec {
  min-width: 0;
  max-width: 100%;
}

body.has-sidebar .hh-table-wrap,
body.has-sidebar .pms-table-wrap,
body.has-sidebar .ev-table-wrap,
body.has-sidebar .pd-table-wrap,
body.has-sidebar main > table {
  border: 1px solid var(--ap-line);
  background-color: var(--ap-surface);
  border-radius: var(--ap-radius);
  max-width: 100%;
  min-width: 0;
  overflow: auto;
}

.overlay .card { max-width: 760px; }
.overlay .dcard { max-width: 720px; }

.hh-role-preview,
.hh-note-preview,
.hh-ev div,
.hh-meta,
.pms-description {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--ap-ink-soft);
}

.hh-name,
.cname,
.ops-name,
.ev-item,
.ev-item strong,
.pms-task-name {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  color: var(--ap-ink);
}

.hh-badge,
.hh-short,
.hh-stage-sel,
.hh-table th,
.pill,
.stpill,
.ops-badge,
.ops-status,
.ap-badge,
.pd-badge {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.hh-short { min-width: 6.75rem; }

.card .ctitle,
.col-head,
.t-date,
.col-total,
.d-cell b,
.crm-pagination,
.crm-page-range,
.data-source,
.hh-intro p,
.ev-intro p,
.pms-intro p,
.pd-intro p,
.hh-stat span,
.pms-stat span,
.ap-meta,
.ap-status,
.ap-tools label {
  color: var(--ap-muted);
}

.ap-input,
body.has-sidebar input,
body.has-sidebar select,
body.has-sidebar textarea,
#events input,
#events select,
#events textarea,
#hiring input,
#hiring select,
#hiring textarea,
#podcasts input,
#podcasts select,
#podcasts textarea,
.hh-dialog input,
.hh-dialog select,
.hh-dialog textarea,
.pms-dialog input,
.pms-dialog select,
.pms-dialog textarea,
.keys-page input {
  background-color: var(--ap-surface);
  background-image: none;
  border: 1px solid var(--ap-line-strong);
  border-radius: var(--ap-radius-sm);
  color: var(--ap-ink);
}

body.has-sidebar input:focus,
body.has-sidebar select:focus,
body.has-sidebar textarea:focus,
#events input:focus,
#events select:focus,
#events textarea:focus,
#podcasts input:focus,
#podcasts select:focus,
#podcasts textarea:focus,
#hiring input:focus,
#hiring select:focus,
#hiring textarea:focus {
  border-color: var(--ap-blue-ink);
  outline: 2px solid var(--ap-blue);
  outline-offset: 1px;
}

.ap-btn,
body.has-sidebar .abtn,
body.has-sidebar .vbtn,
body.has-sidebar .round-button,
body.has-sidebar .close,
#events button:not(.ev-primary),
#hiring button:not(.hh-primary):not(.hh-share),
#pms button:not(.pms-primary),
#podcasts button:not(.pd-primary):not(.pd-link),
.crm-pagination button,
.crm-pagination select {
  background-color: var(--ap-surface);
  background-image: none;
  border: 1px solid var(--ap-line-strong);
  border-radius: var(--ap-radius-sm);
  color: var(--ap-ink);
}

.ap-btn-primary,
body.has-sidebar .vbtn.active,
body.has-sidebar .abtn.primary,
#pms .pms-tab.active,
body.has-sidebar .hh-primary,
body.has-sidebar .ev-primary,
body.has-sidebar .pms-primary,
#podcasts button.pd-primary,
button.hh-share,
.btn.open,
.tier .flag,
.tier.featured .cta {
  background: var(--ap-blue-ink) !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: none;
  font-weight: 600;
}

.ap-btn-primary:hover,
#podcasts button.pd-primary:hover,
body.has-sidebar .abtn.primary:hover {
  background: #124bcc !important;
}

.pill,
.stpill,
.hh-badge,
.ev-badge,
.ops-tag,
.ops-status,
.badge,
.pd-badge {
  box-shadow: none;
  border-radius: var(--ap-radius-pill);
}

.pill.ok,
.pill.product,
.b-open,
.b-st-hired,
.ev-badge.published,
.ev-badge.confirmed,
.pd-live,
.pd-published {
  color: var(--ap-ok);
  border-color: #b7e0cf;
  background: var(--ap-ok-bg);
}

.pill.catch_all,
.pill.unsolicited,
.b-paused,
.b-st-offer,
.ev-badge.draft,
.ev-badge.pending,
.pd-sent {
  color: var(--ap-warn);
  border-color: #ead7b5;
  background: var(--ap-warn-bg);
}

.pill.invalid,
.pill.disposable,
.ev-badge.cancelled,
.ev-badge.refunded,
.pd-danger {
  color: var(--ap-danger);
  border-color: #f0c2b0;
  background: var(--ap-danger-bg);
}

.pill.unknown,
.b-normal,
.b-low,
.b-closed,
.pd-badge {
  color: var(--ap-muted);
  border-color: var(--ap-line-strong);
  background: var(--ap-surface-2);
}

.stpill {
  background: var(--ap-surface-2);
  color: var(--ap-ink);
  border: 1px solid var(--ap-line);
}

.crm-workspace a,
.d-email,
.d-contact,
.ev-link,
.ap-link,
#podcasts button.pd-link {
  color: var(--ap-blue-ink);
}

body .pmenu a { color: var(--ap-ink); }

.overlay,
dialog::backdrop,
.pms-dialog::backdrop,
.hh-dialog::backdrop,
.km-dialog::backdrop {
  background: rgba(10, 14, 26, 0.48);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

main:has(table) #page-data { display: none; }

.crm-load-error,
.ev-notice.error,
.hh-notice.error,
.pms-notice.error,
.pd-notice.error,
.pd-empty {
  color: var(--ap-muted);
}

.crm-load-error,
.ev-notice.error,
.hh-notice.error,
.pms-notice.error,
.pd-notice.error {
  background: #fdecea;
  border: 1px solid #f0c2b0;
  color: #7a2e24;
}

.crm-load-error button { color: var(--ap-blue-ink); }

.issue .txt,
.meet .t,
.pay .who,
.dealrow { color: var(--ap-ink); }

.issue:hover { background: #f3f6ff; }

.dot.high,
.dot.medium,
.pulse {
  box-shadow: none;
  animation: none;
}

.siren {
  background: #fdecea;
  background-image: none;
  border: 1px solid #f0c2b0;
  color: #7a2e24;
}

.bar { background: #e6ebf5; }
.bar i,
.bar i.gold {
  background: var(--ap-blue-ink);
  background-image: none;
}

.kpi::after { opacity: 1; }

body .pmenu {
  background: var(--ap-surface);
  border: 1px solid var(--ap-line);
  box-shadow: var(--ap-shadow-pop);
  color: var(--ap-ink);
}

body .pmenu .pm-item:hover { background: var(--ap-surface-2); }

body:not(.has-sidebar) .card,
body:not(.has-sidebar) header {
  background-color: var(--ap-surface);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#cashflow-root {
  --cf-ink: var(--ap-ink);
  --cf-muted: var(--ap-muted);
  --cf-gold: var(--ap-blue-ink);
  --cf-coral: var(--ap-danger);
  --cf-surface: var(--ap-canvas);
  --cf-glass: var(--ap-surface);
  --cf-glass-solid: var(--ap-surface);
  --cf-line: var(--ap-line);
  --cf-blur: var(--sx-blur);
  --cf-glow: var(--sx-glow);
  color: var(--ap-ink);
}

#cashflow-root .cf-segment {
  background: var(--ap-surface-2);
  border-color: var(--ap-line);
}

#cashflow-root .cf-segment button[data-state="on"] {
  background: var(--ap-blue-ink);
  color: #ffffff;
}

#cashflow-root .cf-tip {
  background: var(--ap-surface);
  color: var(--ap-ink);
  border: 1px solid var(--ap-line);
  box-shadow: var(--ap-shadow);
}

#cashflow-root .cf-chart-card::before { display: none; }

#cashflow-root .cf-chart .recharts-cartesian-grid line { stroke: var(--ap-line); }

#cashflow-root .cf-table th,
#cashflow-root .cf-table td { border-bottom-color: var(--ap-line); }

#cashflow-root .crm-pagination,
#cashflow-root .crm-page-range { color: var(--ap-muted); }

.crm-workspace,
.crm-workspace *,
.crm-sidebar,
dialog,
dialog::backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .crm-sidebar,
  .sidebar-toggle,
  .kpi,
  .sec,
  .card,
  button,
  .pill,
  .vbtn,
  .abtn {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .crm-workspace,
  .crm-sidebar,
  .card,
  dialog {
    backdrop-filter: none;
  }
}