:root{
  --surface-1:      #fcfcfb;
  --surface-2:      #f2f1ed;
  --page-plane:     #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);

  --blue:    #2a78d6;
  --aqua:    #1baf7a;
  --yellow:  #eda100;
  --violet:  #4a3aa7;

  --good:     #0ca30c;
  --warning:  #fab219;
  --critical: #d03b3b;

  --seq-450: #2a78d6;
}
[data-theme="dark"]{
  --surface-1:      #1a1a19;
  --surface-2:      #232322;
  --page-plane:     #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --gridline:       #2c2c2a;
  --baseline:       #383835;
  --border:         rgba(255,255,255,0.10);
  --blue:    #3987e5;
  --aqua:    #199e70;
  --yellow:  #c98500;
  --violet:  #9085e9;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page-plane);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea{ font-family: inherit; }
.hidden{ display:none !important; }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:380px; background: var(--surface-1); border:1px solid var(--border);
  border-radius:14px; padding:28px;
}
.login-brand{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.brand-mark{
  width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-mark img{ width:100%; height:100%; object-fit:contain; }
.login-card h1{ font-size:16px; margin:0; }
.login-card p.sub{ font-size:12.5px; color:var(--text-muted); margin:2px 0 0; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:11.5px; font-weight:600; color:var(--text-secondary); margin-bottom:4px; }
.field input, .field select, .field textarea{
  width:100%; font-size:13px; padding:9px 10px; border:1px solid var(--border); border-radius:8px;
  background: var(--surface-1); color:var(--text-primary);
}
.form-error{ background: rgba(208,59,59,0.1); color: var(--critical); font-size:12.5px; padding:8px 10px; border-radius:8px; margin-bottom:12px; display:none; }
.form-error.show{ display:block; }
.auth-toggle{ text-align:center; margin-top:14px; font-size:12.5px; color:var(--text-muted); }
.auth-toggle a{ color: var(--blue); cursor:pointer; text-decoration:none; font-weight:600; }

/* ---------- App shell ---------- */
header{ position: sticky; top:0; z-index:20; background: var(--surface-1); border-bottom: 1px solid var(--border); padding: 14px 24px; }
.header-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-text h1{ margin:0; font-size:16px; font-weight:700; }
.brand-text p{ margin:1px 0 0; font-size:12px; color: var(--text-muted); }
.header-actions{ display:flex; align-items:center; gap:8px; }
.btn{
  font-size:13px; font-weight:600; cursor:pointer; border-radius:8px; border:1px solid var(--border);
  padding:8px 14px; background: var(--surface-1); color: var(--text-primary);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn:hover{ background: var(--surface-2); }
.btn-primary{ background: var(--blue); border-color: var(--blue); color:#fff; }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-sm{ padding:5px 10px; font-size:12px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.stats-row{ display:grid; grid-template-columns: repeat(4, minmax(140px,1fr)); gap:10px; margin-top:14px; }
.stat-tile{ background: var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 14px; }
.stat-tile .label{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.stat-tile .value{ font-size:22px; font-weight:700; margin-top:2px; }
.stat-tile .value.good{ color: var(--good); }

.filter-row{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.filter-row input[type="text"], .filter-row select{ font-size:13px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background: var(--surface-1); color: var(--text-primary); }
.filter-row input[type="text"]{ min-width:220px; flex:1; }

.offline-banner{
  display:none; background: var(--warning); color:#3a2a00; font-size:12.5px; font-weight:600;
  text-align:center; padding:6px; }
.offline-banner.show{ display:block; }

main{ padding: 18px 24px 60px; }
.board{ display:grid; grid-auto-flow:column; grid-auto-columns: minmax(300px, 320px); gap:14px; overflow-x:auto; padding-bottom: 10px; align-items:start; }
.column{ background: var(--surface-2); border:1px solid var(--border); border-top:3px solid transparent; border-radius:12px; display:flex; flex-direction:column; max-height: calc(100vh - 230px); }
.column-head{ padding:12px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:8px; border-radius:10px 10px 0 0; }
.column-head-title{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; }
.dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.count-badge{ background: var(--surface-1); border:1px solid var(--border); color:var(--text-secondary); font-size:11px; font-weight:700; border-radius:20px; padding:1px 8px; }
.column-sub{ font-size:11px; color:var(--text-muted); padding: 0 14px 10px; }
.column-body{ padding:10px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.empty-col{ font-size:12px; color:var(--text-muted); text-align:center; padding:22px 8px; }

/* Per-stage color coding so the five columns read apart at a glance */
.column[data-stage="new"]{ border-top-color: var(--blue); }
.column[data-stage="new"] .column-head{ background: color-mix(in srgb, var(--blue) 8%, transparent); }
.column[data-stage="new"] .count-badge{ color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.column[data-stage="progress"]{ border-top-color: var(--yellow); }
.column[data-stage="progress"] .column-head{ background: color-mix(in srgb, var(--yellow) 10%, transparent); }
.column[data-stage="progress"] .count-badge{ color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 40%, transparent); }
.column[data-stage="diligence"]{ border-top-color: var(--violet); }
.column[data-stage="diligence"] .column-head{ background: color-mix(in srgb, var(--violet) 8%, transparent); }
.column[data-stage="diligence"] .count-badge{ color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); }
.column[data-stage="won"]{ border-top-color: var(--good); }
.column[data-stage="won"] .column-head{ background: color-mix(in srgb, var(--good) 8%, transparent); }
.column[data-stage="won"] .count-badge{ color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.column[data-stage="lost"]{ border-top-color: var(--critical); }
.column[data-stage="lost"] .column-head{ background: color-mix(in srgb, var(--critical) 8%, transparent); }
.column[data-stage="lost"] .count-badge{ color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }

.card{ background: var(--surface-1); border:1px solid var(--border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; flex-shrink:0; }
.card-priority-high{ border-left:3px solid var(--warning); }
.card-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); background: var(--surface-2); }
.card-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.card-head-text{ flex:1; min-width:0; }
.card-name{ font-size:13.5px; font-weight:700; line-height:1.3; }
.card-sub{ font-size:10.5px; color:var(--text-muted); margin-top:1px; }
.card-body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.card-cp{ font-size:12px; font-weight:600; color: var(--text-secondary); }
.priority-badge{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color: var(--warning); background: rgba(250,178,25,0.14); border-radius:20px; padding:1px 7px; display:inline-block; flex-shrink:0; }
.pill{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; padding:2px 7px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.pill-spot{ background: rgba(42,120,214,0.12); color: var(--blue); }
.pill-term{ background: rgba(74,58,167,0.12); color: var(--violet); }

/* Volume is the primary/highlighted figure on each card; deal value + commission are secondary */
.card-value-block{ display:flex; flex-direction:column; }
.card-volume{ font-size:19px; font-weight:800; line-height:1.2; }
.card-volume .unit{ font-size:11px; font-weight:600; color: var(--text-muted); }
.card-value-sub{ font-size:11px; color: var(--text-muted); margin-top:1px; }

/* Trade terms as a labeled mini spec-sheet, like a real trade ticket */
.ticket-grid{ background: var(--surface-2); border-radius:8px; padding:9px 11px; display:grid; grid-template-columns:1fr 1fr; gap:7px 10px; }
.ticket-cell .tk{ font-size:9px; text-transform:uppercase; letter-spacing:.3px; color:var(--text-muted); font-weight:700; }
.ticket-cell .tv{ font-size:11.5px; color:var(--text-primary); font-weight:600; margin-top:1px; }

.owners-row{ display:flex; gap:5px; flex-wrap:wrap; }
.owner-chip{ display:inline-flex; align-items:center; gap:5px; background: var(--surface-2); border-radius:20px; padding:2px 8px 2px 2px; font-size:10.5px; font-weight:600; color: var(--text-secondary); }
.owner-dot{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; color:#fff; font-size:8px; font-weight:700; flex-shrink:0; }

.progress-wrap{ display:flex; flex-direction:column; gap:4px; }
.progress-label{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-muted); font-weight:600; }
.progress-track{ height:6px; border-radius:4px; background: var(--gridline); overflow:hidden; }
.progress-fill{ height:100%; border-radius:4px; background: var(--seq-450); }
.exec-progress .exec-fill{ background: var(--good); }
.pay-status-pill{ font-size:10px; font-weight:700; border-radius:20px; padding:2px 8px; display:inline-block; align-self:flex-start; }
.pay-status-pill.pay-pending{ background: var(--surface-2); color: var(--text-muted); border:1px solid var(--border); }
.pay-status-pill.pay-issued{ background: rgba(42,120,214,0.12); color: var(--blue); }
.pay-status-pill.pay-confirmed{ background: rgba(74,58,167,0.12); color: var(--violet); }
.pay-status-pill.pay-received{ background: rgba(12,163,12,0.12); color: var(--good); }
.toggle-row{ display:flex; gap:12px; }
.checklist-toggle, .docs-toggle{ font-size:11.5px; font-weight:600; color: var(--text-secondary); background:none; border:none; cursor:pointer; padding:2px 0; display:flex; align-items:center; gap:5px; }
.checklist-toggle:hover, .docs-toggle:hover{ color: var(--text-primary); }
.chev{ transition: transform .15s ease; font-size:9px; }
.chev.open{ transform: rotate(90deg); }
.checklist{ display:none; flex-direction:column; gap:5px; margin-top:2px; border-top:1px dashed var(--gridline); padding-top:8px; }
.checklist.open{ display:flex; }
.checklist-item{ display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11.5px; }
.checklist-item .item-label{ color: var(--text-secondary); }
.status-pill{ font-size:10px; font-weight:700; border-radius:20px; padding:2px 8px; cursor:pointer; border:1px solid transparent; white-space:nowrap; }
.status-pending{ background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
.status-verified{ background: rgba(12,163,12,0.12); color: var(--good); }
.status-flagged{ background: rgba(208,59,59,0.12); color: var(--critical); }

.docs-panel{ display:none; flex-direction:column; gap:8px; margin-top:2px; border-top:1px dashed var(--gridline); padding-top:8px; }
.docs-panel.open{ display:flex; }
.doc-item{ background: var(--surface-2); border-radius:8px; padding:8px; font-size:11.5px; }
.doc-item .doc-name{ font-weight:600; margin-bottom:3px; }
.doc-item .doc-tags{ display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.tag{ font-size:9.5px; font-weight:700; border-radius:20px; padding:1px 6px; background: rgba(42,120,214,0.12); color: var(--blue); }
.tag.urgent{ background: rgba(208,59,59,0.12); color: var(--critical); }
.tag.tag-source{ background: rgba(12,163,12,0.12); color: var(--good); }
.upload-row{ display:flex; align-items:center; gap:8px; }
.upload-row input[type=file]{ font-size:11px; flex:1; }
.upload-hint{ font-size:10px; color: var(--text-muted); margin:2px 0 6px; }

.card-footer{ display:flex; align-items:center; justify-content:space-between; gap:6px; border-top:1px solid var(--gridline); padding-top:8px; margin-top:2px; flex-wrap:wrap; }
.stage-select{ font-size:11px; font-weight:600; padding:5px 8px; border-radius:7px; border:1px solid var(--border); background: var(--surface-1); color: var(--text-primary); max-width: 140px; }
.card-footer-actions{ display:flex; align-items:center; gap:6px; }
.icon-btn{ background:none; border:none; cursor:pointer; padding:4px; border-radius:6px; color: var(--text-muted); display:flex; align-items:center; }
.icon-btn:hover{ background: var(--surface-2); color: var(--text-primary); }
.updated-note{ font-size:10px; color:var(--text-muted); }
.entered-note{ font-size:10px; color:var(--text-muted); padding-right:6px; border-right:1px solid var(--gridline); }

.modal-overlay{ display:none; position:fixed; inset:0; background: rgba(11,11,11,0.45); z-index:50; align-items:flex-start; justify-content:center; padding: 40px 16px; overflow-y:auto; }
.modal-overlay.open{ display:flex; }
.modal{ background: var(--surface-1); border-radius:14px; width:100%; max-width:560px; padding:22px; border:1px solid var(--border); }
.modal h2{ margin:0 0 4px; font-size:17px; }
.modal p.sub{ margin:0 0 16px; font-size:12.5px; color:var(--text-muted); }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.form-grid .full{ grid-column: 1 / -1; }
.field textarea{ resize: vertical; min-height:56px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.summary-list{ display:flex; flex-direction:column; gap:8px; font-size:13px; }
.summary-list .row{ display:flex; justify-content:space-between; padding:8px 10px; background:var(--surface-2); border-radius:8px; }

.classify-result{ display:none; flex-direction:column; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--gridline); }
.classify-result.show{ display:flex; }
.classify-row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; background: var(--surface-2); border-radius:8px; padding:8px 10px; }
.classify-row .evidence{ font-size:10.5px; color:var(--text-muted); }

.intake-banner{ display:none; background: rgba(250,178,25,0.12); border: 1px solid rgba(250,178,25,0.35); border-radius:10px; padding:10px 12px; margin-bottom:14px; font-size:12.5px; color: var(--text-primary); }
.intake-banner.show{ display:block; }
.intake-banner .intake-title{ font-weight:700; margin-bottom:4px; }
.intake-banner ul{ margin:4px 0 0; padding-left:18px; }
.intake-banner li{ margin-bottom:2px; }
.field.field-missing input, .field.field-missing select{ border-color: var(--warning); background: rgba(250,178,25,0.08); }
.field.field-missing label::after{ content: " — please check"; font-weight:400; color: var(--warning); text-transform:none; letter-spacing:0; font-size:10px; }

/* Deal-lead tag input */
.tag-input{ border:1px solid var(--border); border-radius:8px; padding:6px 8px; background: var(--surface-1); }
.tag-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:4px; }
.tag-chips:empty{ margin-bottom:0; }
.tag-chip{ display:inline-flex; align-items:center; gap:5px; color:#fff; font-size:11.5px; font-weight:600; border-radius:20px; padding:2px 6px 2px 10px; }
.tag-chip button{ background:none; border:none; color:#fff; opacity:.8; cursor:pointer; font-size:13px; line-height:1; padding:0 2px; }
.tag-chip button:hover{ opacity:1; }
.tag-input input{ width:100%; border:none; outline:none; background:transparent; font-size:13px; padding:3px 2px; color: var(--text-primary); }

/* Deal activity log */
.activity-section{ margin-top:16px; padding-top:14px; border-top:1px solid var(--gridline); }
.activity-head{ font-size:11.5px; font-weight:700; color: var(--text-secondary); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.activity-list{ display:flex; flex-direction:column; gap:6px; max-height:160px; overflow-y:auto; margin-bottom:8px; }
.note-item{ background: var(--surface-2); border-radius:8px; padding:8px 10px; font-size:12.5px; }
.note-item .note-text{ color: var(--text-primary); }
.note-item .note-meta{ color: var(--text-muted); font-size:10.5px; margin-top:3px; }
.activity-add-row{ display:flex; gap:6px; }
.activity-add-row input{ flex:1; font-size:13px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background: var(--surface-1); color: var(--text-primary); }

/* Post-Won execution: checklist, treasury, intermediaries */
.execution-section{ margin-top:16px; padding-top:14px; border-top:1px solid var(--gridline); }
.exec-block{ margin-bottom:16px; }
.exec-block-title{ font-size:11.5px; font-weight:700; color: var(--text-secondary); margin-bottom:8px; }
.intermediary-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.intermediary-item{ display:flex; align-items:center; gap:8px; background: var(--surface-2); border-radius:8px; padding:7px 10px; }
.im-main{ flex:1; min-width:0; }
.im-name{ font-size:12.5px; font-weight:600; color: var(--text-primary); }
.im-meta{ font-size:10.5px; color: var(--text-muted); margin-top:1px; }
.im-pay-select{ font-size:11px; padding:4px 6px; border-radius:6px; border:1px solid var(--border); background: var(--surface-1); color: var(--text-primary); }
.intermediary-add-row{ display:flex; gap:6px; flex-wrap:wrap; }
.intermediary-add-row input, .intermediary-add-row select{ font-size:12.5px; padding:7px 9px; border:1px solid var(--border); border-radius:8px; background: var(--surface-1); color: var(--text-primary); }
.intermediary-add-row input[type="text"]{ flex:1 1 140px; min-width:100px; }
.intermediary-add-row input[type="number"]{ width:90px; }
.intermediary-add-row select{ flex:0 0 auto; }

@media (max-width: 720px){ .stats-row{ grid-template-columns: repeat(2, 1fr); } }