/* Gantry · DM Automation workspace
 *
 * Built entirely on the tokens in tokens.css, with no new colours: the DM tab
 * is the fourth workspace in an existing product, not a separate app that
 * happens to share a page. Anything hardcoded here would drift the first time
 * the theme changes.
 *
 * Loaded after hitec.css so .subtab-btn (shared with the Salman workspace) is
 * already defined; this file only adds what the DM tab needs on top.
 */

/* ---- overview: the funnel ----
   Stage counts, widest first. A row of plain numbers rather than a chart: six
   integers do not need axes, and the question ("where are people falling out")
   is answered by reading them left to right. */
.dm-funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:18px}
.dm-stat{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:14px 12px;text-align:center}
.dm-stat-n{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--ink-1);line-height:1.1}
.dm-stat-l{font-size:.76rem;color:var(--ink-2);margin-top:4px;font-weight:600}

.dm-h{margin:20px 0 8px;font-size:.95rem;font-weight:600;font-family:var(--font-display);color:var(--ink-1)}

/* ---- tables ----
   The wrapper scrolls, not the page: a wide table must never make the whole
   layout shift sideways on a phone. */
.dm-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-1)}
.dm-table{width:100%;border-collapse:collapse;font-size:.86rem}
.dm-table th{text-align:left;padding:10px 12px;color:var(--ink-3);font-weight:600;font-size:.76rem;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);white-space:nowrap}
.dm-table td{padding:10px 12px;border-bottom:1px solid var(--border-soft);color:var(--ink-1)}
.dm-table tr:last-child td{border-bottom:none}

/* ---- generic row (accounts) ---- */
.dm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px}
.dm-row-main{min-width:0}
.dm-row-title{font-weight:700;color:var(--ink-1);font-size:.9rem}
.dm-row-sub{color:var(--ink-2);font-size:.78rem;margin-top:2px}

/* ---- inbox ---- */
.dm-msg{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px}
/* An unread reply is the single most time-critical thing in this workspace:
   someone answered a cold DM and is waiting. It gets the accent border. */
.dm-msg.unread{border-left:3px solid var(--accent);background:var(--surface-2)}
.dm-msg-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:6px}
.dm-msg-head strong{color:var(--ink-1);font-size:.9rem}
.dm-when{color:var(--ink-3);font-size:.75rem;white-space:nowrap}
.dm-msg-body{color:var(--ink-2);font-size:.86rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.dm-msg-actions{margin-top:8px;display:flex;gap:8px}

/* ---- follow-ups ---- */
.dm-note{color:var(--ink-2);font-size:.8rem;line-height:1.6;margin:0 0 14px;
  background:var(--bg-1);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:10px 12px}
.dm-note code{background:var(--surface-2);padding:1px 5px;border-radius:4px;font-size:.92em;color:var(--ink-1)}

.dm-fu{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px}
.dm-fu-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.dm-fu-next{display:flex;align-items:center;gap:8px;flex-shrink:0}
.dm-next{color:var(--ink-1);font-weight:700;font-size:.82rem;white-space:nowrap}
.dm-done{color:var(--green);font-weight:700;font-size:.82rem;white-space:nowrap}

/* WHICH level of the cascade won, colour-coded by how specific it is. This is
   the tab's most load-bearing detail: three levels of override are invisible
   without it, and "why is this person on this schedule" is the question the
   whole pane exists to answer. Escalating colour = escalating specificity. */
.dm-src{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 7px;border-radius:999px;white-space:nowrap}
.dm-src-global{background:var(--surface-2);color:var(--ink-2)}
.dm-src-campaign{background:rgba(25,103,255,.16);color:var(--accent-hover)}
.dm-src-person{background:var(--accent);color:var(--accent-ink)}
.dm-src-none{background:var(--surface-2);color:var(--ink-3)}

.dm-fu-plan{color:var(--ink-2);font-size:.8rem;margin:10px 0}
.dm-fu-plan strong{color:var(--ink-1)}

.dm-fu-edit{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:start;
  border-top:1px solid var(--border-soft);padding-top:12px}
.dm-fu-edit label{display:flex;flex-direction:column;gap:4px;color:var(--ink-2);font-size:.74rem;font-weight:700}
.dm-fu-edit input,.dm-fu-edit textarea{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 10px;color:var(--ink-1);font:inherit;font-size:.84rem;font-weight:400;width:100%;resize:vertical}
.dm-fu-edit input:focus,.dm-fu-edit textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:transparent}
.dm-fu-actions{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.dm-saved{font-size:.76rem;color:var(--ink-2)}
.dm-saved.ok{color:var(--green)}
.dm-saved.err{color:var(--red)}
/* A saved-but-unusable schedule is neither success nor failure: the sheet took
   the text, but the engine will run the inherited plan instead. Amber says
   "look at this" without claiming the save failed. */
.dm-saved.warn{color:var(--amber)}

.dm-warn{background:var(--red-dim);border:1px solid var(--red);color:var(--ink-1);
  border-radius:var(--radius-sm);padding:8px 10px;font-size:.78rem;margin:10px 0}

.dm-empty{color:var(--ink-2);font-size:.86rem;text-align:center;padding:28px 16px;line-height:1.6}
.dm-empty code{background:var(--surface-2);padding:1px 5px;border-radius:4px;color:var(--ink-1)}

#dmKillBtn.danger{background:var(--red-dim);border-color:var(--red);color:var(--ink-1)}

@media (max-width:640px){
  /* The two-column editor collapses rather than squeezing: a 60px-wide hours
     field is unusable, and this is a form people type real values into. */
  .dm-fu-edit{grid-template-columns:1fr}
  .dm-fu-head{flex-direction:column;gap:8px}
}