/* Meridian Sales CRM — mobile (sales-agent) app. Rendered inside the iOS frame. */

.m-app {
  --brand: #2F6B4F;
  --brand-strong: color-mix(in srgb, var(--brand) 86%, #000);
  --brand-soft: color-mix(in srgb, var(--brand) 13%, transparent);
  --brand-softer: color-mix(in srgb, var(--brand) 7%, transparent);
  --on-brand: #fff;
  --bg: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #f6f5f2;
  --border: rgba(24,22,18,0.09);
  --border-strong: rgba(24,22,18,0.14);
  --text: #1c1a17;
  --text-muted: #6e6a62;
  --text-faint: #9a958c;
  --shadow: 0 1px 2px rgba(24,22,18,0.05), 0 8px 22px rgba(24,22,18,0.07);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  height: 100%;
  display: flex;
  flex-direction: column;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
.m-app.m-dark {
  --brand-soft: color-mix(in srgb, var(--brand) 26%, transparent);
  --brand-softer: color-mix(in srgb, var(--brand) 14%, transparent);
  --bg: #0f0e0d;
  --surface: #1b1a18;
  --surface-2: #232220;
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.17);
  --text: #f3f1ec;
  --text-muted: #a8a39a;
  --text-faint: #76726a;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 22px rgba(0,0,0,0.3);
}
.m-app * { box-sizing: border-box; }
.m-app button { font-family: inherit; }
.m-serif { font-family: 'Spectral', Georgia, serif; }
.m-mono { font-family: 'JetBrains Mono', monospace; }

/* ---- HEADER ---- */
.m-header { padding: 58px 18px 12px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.m-header-row { display: flex; align-items: center; gap: 12px; }
.m-header-eyebrow { font-size: 12px; color: var(--text-muted); }
.m-header-title { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.m-avatar { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 650; font-size: 14px; flex-shrink: 0; }
.m-iconbtn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.m-back { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--brand); font-size: 15px; font-weight: 600; cursor: pointer; padding: 0; }

/* ---- CONTENT ---- */
.m-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 26px; display: flex; flex-direction: column; gap: 14px; }
.m-content::-webkit-scrollbar { display: none; }
.m-content > * { flex-shrink: 0; }
.m-section-label { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: center; white-space: nowrap; gap: 10px; }
.m-section-label button { border: 0; background: transparent; color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }

/* ---- CARD ---- */
.m-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.m-card-title { font-size: 15px; font-weight: 650; }

/* ---- STAT CHIPS ---- */
.m-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 13px 14px; }
.m-stat-label { font-size: 11.5px; color: var(--text-muted); }
.m-stat-value { font-size: 23px; font-weight: 650; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.m-stat-sub { font-size: 11px; margin-top: 3px; }

/* ---- LEAD/LIST ROW CARD ---- */
.m-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; width: 100%; text-align: left; cursor: pointer; color: var(--text); }
.m-row:active { background: var(--brand-softer); }
.m-row-name { font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.m-row-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.m-row-stack { min-width: 0; flex: 1; }
.m-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.m-row-time { font-size: 11px; color: var(--text-faint); }

/* ---- CHIPS / SEGMENTED ---- */
.m-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chip { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 550; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.m-chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* ---- TASK ---- */
.m-task { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.m-check { width: 22px; height: 22px; border-radius: 999px; border: 1.8px solid var(--border-strong); background: transparent; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.m-check.is-high { border-color: #d9544a; }
.m-check.is-done { background: var(--brand); border-color: var(--brand); }
.m-task-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-softer); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---- QUICK ACTIONS (lead detail) ---- */
.m-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.m-action { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text); }
.m-action:active { background: var(--brand-softer); }
.m-action-ic { width: 38px; height: 38px; border-radius: 999px; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; }
.m-action span { font-size: 11px; font-weight: 550; }

/* ---- STAGE TRACKER ---- */
.m-stages { display: flex; gap: 4px; }
.m-stage-seg { flex: 1; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.m-stage-bar { width: 100%; height: 5px; border-radius: 999px; background: var(--surface-2); }
.m-stage-lbl { font-size: 9.5px; color: var(--text-faint); }

/* ---- KV ---- */
.m-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.m-kv > div span { font-size: 11.5px; color: var(--text-muted); display: block; }
.m-kv > div strong { font-size: 14px; font-weight: 600; }

/* ---- NOTES ---- */
.m-note { padding: 11px 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 13px; }
.m-note-head { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; margin-bottom: 4px; }
.m-note-head strong { font-weight: 650; white-space: nowrap; }
.m-note-head span { color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.m-note-body { font-size: 13px; line-height: 1.45; }

/* ---- UNIT CARD ---- */
.m-unit { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; cursor: pointer; }
.m-unit-img { height: 120px; position: relative; display: flex; align-items: flex-end; justify-content: space-between; padding: 10px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--surface-2)), color-mix(in srgb, var(--brand) 14%, var(--surface-2)) 9px, color-mix(in srgb, var(--brand) 7%, var(--surface-2)) 9px, color-mix(in srgb, var(--brand) 7%, var(--surface-2)) 18px); }
.m-unit-code { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; background: rgba(0,0,0,0.55); color: #fff; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.m-unit-body { padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; }
.m-unit-specs { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); }
.m-unit-specs span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.m-unit-price { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* dev selector */
.m-dev { flex-shrink: 0; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; min-width: 175px; }
.m-dev.is-active { border-color: var(--brand); background: var(--brand-softer); }
.m-dev-name { font-size: 13.5px; font-weight: 650; }
.m-dev-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* pipeline deal */
.m-deal { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; cursor: pointer; }
.m-deal-move { display: flex; gap: 6px; }
.m-movebtn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.m-movebtn:active { background: var(--brand-softer); color: var(--brand); }
.m-movebtn:disabled { opacity: 0.3; }

/* progress */
.m-progress { height: 6px; background: rgba(0,0,0,0.07); border-radius: 999px; overflow: hidden; flex: 1; }
.m-dark .m-progress { background: rgba(255,255,255,0.1); }
.m-progress > div { height: 100%; border-radius: 999px; background: var(--brand); }

/* ---- BOTTOM TAB BAR ---- */
.m-tabbar { flex-shrink: 0; display: flex; padding: 8px 6px 26px; background: color-mix(in srgb, var(--surface) 88%, transparent); border-top: 1px solid var(--border); backdrop-filter: blur(12px); }
.m-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: transparent; color: var(--text-faint); cursor: pointer; padding: 4px 0; }
.m-tab.is-active { color: var(--brand); }
.m-tab span { font-size: 10px; font-weight: 600; }
.m-tab-badge { position: absolute; transform: translate(11px, -7px); background: #d9544a; color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

/* ---- FAB (copilot) ---- */
.m-fab { position: absolute; right: 16px; bottom: 96px; width: 52px; height: 52px; border-radius: 999px; background: var(--brand); color: var(--on-brand); border: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 45%, transparent); cursor: pointer; z-index: 30; }

/* ---- TOAST ---- */
.m-toast { position: absolute; left: 50%; bottom: 110px; transform: translateX(-50%); background: #1c1a17; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 550; box-shadow: var(--shadow); z-index: 40; animation: m-toast-in .2s ease; white-space: nowrap; max-width: 90%; }
.m-toast.is-ok { background: #1f6e47; }
@keyframes m-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* hero gradient card on home */
.m-hero { background: linear-gradient(150deg, var(--brand), var(--brand-strong)); color: #fff; border: 0; }
.m-hero .m-card-title { color: #fff; }