/* Theme tokens live in theme.css — loaded before this file. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
a { color: var(--brand-700); text-decoration: none; }
.boot { display: grid; place-items: center; height: 100vh; color: var(--muted); }

/* ---------- Auth screens ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero {
  background: linear-gradient(150deg, var(--brand-700), var(--brand-600) 55%, var(--brand-2));
  color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: center;
}
.auth-hero h1 { font-size: 40px; line-height: 1.1; margin: 0 0 16px; font-weight: 800; letter-spacing: -.02em; }
.auth-hero p { font-size: 17px; opacity: .92; max-width: 460px; line-height: 1.6; }
.auth-features { margin-top: 34px; display: grid; gap: 12px; }
.auth-features div { display: flex; gap: 10px; align-items: center; opacity: .95; }
.auth-features .dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 13px; }
.auth-panel { display: grid; place-items: center; padding: 32px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h2 { margin: 0 0 6px; font-size: 24px; font-weight: 700; }
.auth-card .sub { color: var(--muted); margin: 0 0 24px; }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-hero { display: none; } }

/* ---------- Forms ---------- */
label.field { display: block; margin-bottom: 14px; }
label.field span { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; color: var(--ink); background: var(--panel); outline: none; transition: border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea { min-height: 90px; resize: vertical; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; background: var(--brand);
  color: var(--on-brand); font-weight: 600; cursor: pointer; font-size: 14px; transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn.block { width: 100%; }
.btn.secondary { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn.ghost { background: transparent; color: var(--muted); border-color: transparent; }
.btn.danger { background: var(--bad); }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.err { color: var(--bad); font-size: 13px; margin: 8px 0; min-height: 18px; }
.muted { color: var(--muted); }
.link-btn { background: none; border: none; color: var(--brand-700); cursor: pointer; font: inherit; padding: 0; }

/* ---------- App layout ---------- */
.layout { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar { background: var(--sidebar); color: var(--sidebar-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; background: var(--brand); display: grid; place-items: center; color: #fff; font-weight: 800; overflow: hidden; flex: none; }
.brand .logo img { width: 100%; height: 100%; object-fit: cover; }
.brand .name { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.1; }
.brand .name small { display: block; color: #64748b; font-weight: 500; font-size: 11px; }
.nav { padding: 10px; overflow-y: auto; flex: 1; }
.nav .group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sidebar-ink-dim); padding: 14px 12px 6px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--sidebar-ink); font-weight: 500; margin-bottom: 2px; }
.nav a:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.nav a.active { background: var(--brand); color: var(--on-brand); }
.nav a .ico { width: 18px; text-align: center; opacity: .9; }
.nav a .badge { margin-left: auto; background: var(--bad); color: #fff; border-radius: 20px; font-size: 11px; padding: 1px 7px; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar .page-title { font-size: 17px; font-weight: 700; }
.subswitch { position: relative; margin-left: auto; }
.subswitch button { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; cursor: pointer; font: inherit; font-weight: 600; }
.subswitch .caret { color: var(--muted); }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 240px; padding: 6px; z-index: 50; }
.menu .item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.menu .item:hover { background: var(--bg); }
.menu .item.active { background: var(--brand-soft); color: var(--brand-700); font-weight: 600; }
.menu .divider { height: 1px; background: var(--line); margin: 6px 4px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-700); display: grid; place-items: center; font-weight: 700; cursor: pointer; }

.content { padding: 22px; max-width: 1300px; width: 100%; margin: 0 auto; }

/* ---------- Cards / tables ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card .card-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.card .card-h h3 { margin: 0; font-size: 15px; font-weight: 700; }
.card .card-b { padding: 16px; }
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(4, 1fr); }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.kpi .k-label { color: var(--muted); font-size: 13px; font-weight: 500; }
.kpi .k-val { font-size: 26px; font-weight: 800; margin-top: 6px; letter-spacing: -.02em; }
.kpi .k-ico { float: right; width: 38px; height: 38px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-700); display: grid; place-items: center; font-size: 18px; }
@media (max-width: 1050px) { .kpis { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Phones and small tablets ----------
   The app was laid out for a desk, but the people using it are often standing
   in somebody's driveway. Below 900px the sidebar becomes a drawer and the
   content takes the full width. */
.navtoggle { display: none; background: none; border: 0; color: var(--ink); font-size: 20px;
             line-height: 1; padding: 6px 8px; margin-left: -4px; cursor: pointer; border-radius: 8px; }
.navtoggle:hover { background: var(--chip); }
.nav-backdrop { display: none; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .navtoggle { display: block; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 264px; z-index: 60;
    height: 100dvh;                        /* not 100vh — phone browser chrome */
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .layout.nav-open .sidebar { transform: none; }

  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55;
                  background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .layout.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  .topbar { padding: 10px 14px; gap: 8px; }
  /* The page title yields first — the switcher and avatar are controls. */
  .topbar .page-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .subswitch button { padding: 7px 9px; max-width: 42vw; overflow: hidden; }
  .subswitch button span:not(.caret) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .content { padding: 14px; }
  .page-head { flex-wrap: wrap; gap: 8px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr !important; }

  /* A table is the one thing allowed to scroll sideways, inside its own card. */
  .card:has(> .tbl), .card:has(> table) { overflow-x: auto; }
  .tbl { min-width: 560px; }

  .modal { max-width: calc(100vw - 24px); }
  .row2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-backdrop { transition: none; }
}

table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); }
table.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr.clickable { cursor: pointer; }
table.tbl tr.clickable:hover { background: var(--bg); }

.tag { display: inline-block; background: var(--brand-soft); color: var(--brand-700); border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; margin: 0 4px 4px 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.pill.green { background: #dcfce7; color: #166534; }
.pill.gray { background: var(--chip); color: var(--muted); }
.pill.amber { background: #fef3c7; color: #92400e; }
.pill.red { background: #fee2e2; color: #991b1b; }
.pill.blue { background: #dbeafe; color: #1e40af; }

.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.page-head .spacer { flex: 1; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.search { max-width: 300px; }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty .big { font-size: 36px; margin-bottom: 8px; }

/* ---------- Kanban ---------- */
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.col { background: var(--chip); border-radius: 12px; width: 280px; flex: none; }
.col-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; font-size: 13px; }
.col-h .count { color: var(--muted); font-weight: 600; }
.col-h .sum { margin-left: auto; color: var(--brand-700); font-weight: 700; font-size: 12px; }
.col-b { padding: 0 10px 10px; min-height: 40px; display: flex; flex-direction: column; gap: 8px; }
.col-b.drop-over { outline: 2px dashed var(--brand); outline-offset: -4px; border-radius: 10px; }
.oppcard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; box-shadow: var(--shadow); cursor: grab; }
.oppcard:active { cursor: grabbing; }
.oppcard .t { font-weight: 600; }
.oppcard .v { color: var(--good); font-weight: 700; margin-top: 4px; }
.oppcard .c { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* ---------- Conversations ---------- */
.inbox { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 150px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.conv-list { border-right: 1px solid var(--line); overflow-y: auto; }
.conv-item { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; display: flex; gap: 10px; }
.conv-item:hover, .conv-item.active { background: var(--bg); }
.conv-item .who { font-weight: 600; }
.conv-item .prev { color: var(--muted); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.thread { display: flex; flex-direction: column; }
.thread-h { padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 700; display: flex; gap: 10px; align-items: center; }
.thread-b { flex: 1; overflow-y: auto; padding: 18px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 70%; padding: 10px 13px; border-radius: 14px; line-height: 1.4; }
.bubble.in { background: var(--panel); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.out { background: var(--brand); color: var(--on-brand); align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble .meta { font-size: 11px; opacity: .7; margin-top: 4px; }
.thread-f { padding: 12px; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.thread-f input { flex: 1; }

/* ---------- Contact detail ---------- */
.detail { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .detail, .inbox { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr 1fr; } }
.timeline .ev { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.timeline .ev .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-700); display: grid; place-items: center; flex: none; font-size: 13px; }
.timeline .ev .txt { flex: 1; }
.timeline .ev .when { color: var(--muted); font-size: 12px; }

/* funnel */
.funnel { display: grid; gap: 8px; }
.funnel .row { display: grid; grid-template-columns: 140px 1fr 46px; align-items: center; gap: 10px; }
.funnel .bar { height: 26px; background: var(--brand); border-radius: 6px; min-width: 4px; }
.funnel .row:nth-child(2) .bar { opacity: .85; } .funnel .row:nth-child(3) .bar { opacity: .7; }
.funnel .row:nth-child(4) .bar { opacity: .55; } .funnel .row:nth-child(5) .bar { opacity: .4; }

/* integrations */
.intg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px){ .intg-grid { grid-template-columns: 1fr; } }
.intg { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.intg .top { display: flex; align-items: center; gap: 10px; }
.intg .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft); display: grid; place-items: center; font-size: 18px; }
.intg .nm { font-weight: 700; }
.intg .ds { color: var(--muted); font-size: 13px; flex: 1; }
.stage-tab { display: inline-flex; gap: 6px; }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { background: var(--panel); border-radius: 16px; box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
.modal .m-h { padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 16px; display: flex; align-items: center; }
.modal .m-b { padding: 20px; }
.modal .m-f { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* toast */
#toast-host { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast { background: var(--chip); color: var(--ink); border: 1px solid var(--line); padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-weight: 500; max-width: 340px; animation: pop .2s ease; }
.toast.good { background: #14532d; } .toast.bad { background: #7f1d1d; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }

.stars { color: #f59e0b; letter-spacing: 2px; }
.hint { background: var(--brand-soft); color: var(--brand-700); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
code.copy { background: var(--bg); padding: 2px 7px; border-radius: 6px; cursor: pointer; border: 1px solid var(--line); font-size: 12px; }

/* ---------- print (invoices, reports) ---------- */
@media print {
  /* Invoices and reports print on white paper — force the light palette so
     dark-mode text doesn't come out invisible. */
  :root {
    --bg: #fff; --bg-page: #fff; --panel: #fff; --soft: #fff; --chip: #f1f5f9;
    --ink: #0f172a; --muted: #475569; --line: #cbd5e1; --line-soft: #e2e8f0;
    --shadow: none; --shadow-lg: none;
  }
  .sidebar, .topbar, .no-print, .page-head button, .page-head a.btn { display: none !important; }
  .layout { grid-template-columns: 1fr !important; }
  .content { padding: 0 !important; max-width: none !important; }
  .card { border: none !important; box-shadow: none !important; }
  body { background: #fff !important; }
  a[href]::after { content: none !important; }
}

/* ---------- brand mark ---------- */
.brand .logo.has-img { background: transparent; }
.brand .logo.has-img img { width: 100%; height: 100%; object-fit: contain; }
.auth-logo { display: block; height: 64px; width: auto; margin: 0 0 20px; object-fit: contain; }

/* ---------- Paradox label layer ----------
   Both paradoxlabs.online and prime.paradoxlabs.online set eyebrows, section labels
   and metadata in letterspaced monospace. Applying it to the same layer here
   keeps the app in the same visual family as the marketing sites. */
.nav .group,
table.tbl th,
.kpi .k-label,
.card-h h3 + .pill,
.pill {
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.nav .group { letter-spacing: .12em; }
table.tbl th { letter-spacing: .08em; font-size: 11px; }
.kpi .k-label { letter-spacing: .06em; font-size: 12px; text-transform: uppercase; }
.kpi .k-val { font-family: var(--font); letter-spacing: -.02em; }

/* Subtle grid, the way PRIME textures its background. */
.main {
  background-image:
    linear-gradient(rgba(168,85,247,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  background-attachment: fixed;
}
.sidebar { border-right: 1px solid var(--line); }